:root {
  /* Dark Tech Dashboard Palette */
  --bg-deep: #000000;
  --bg-panel: #0a0a0a;
  --bg-card: #111111;
  --border-muted: #1f1f1f;
  --border-focus: #333333;
  --text-main: #f5f5f5;
  --text-dim: #888888;
  --accent: #0ea5e9; /* Electric Blue */
  --accent-hover: #38bdf8;
  --accent-bg: rgba(14, 165, 233, 0.1);
  --danger: #ef4444;
}

body {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-deep);
  color: var(--text-main);
  line-height: 1.5;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Prevent bounce scroll on mobile if possible */
  overscroll-behavior-y: none;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--border-focus);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* Base Components */
.card-border {
  border: 1px solid var(--border-muted);
}
.card-bg {
  background-color: var(--bg-card);
}
.panel-bg {
  background-color: var(--bg-panel);
}

/* Horizontal Scroll Utilities (For mobile filters) */
.hide-scroll::-webkit-scrollbar {
  display: none;
}
.hide-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animations */
@keyframes spin-pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(14, 165, 233, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}

.spin-active {
  animation: spin-pulse 1.5s infinite;
  transform: scale(0.95);
}

/* Winner Highlight (Bento Cell) */
@keyframes bento-winner {
  0%, 100% {
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-bg);
  }
  50% {
    border-color: var(--text-main);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
  }
}

.winner-highlight {
  animation: bento-winner 1s ease-in-out infinite;
  z-index: 10;
  position: relative;
}

/* Floating Action Button (Mobile) */
.fab-shadow {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-muted);
}

@media (max-width: 767px) {
  #btnSpinContainer {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 90%;
  }
}

/* Dashboard Layout Overrides */
/* The layout uses Tailwind mostly, but custom structural rules can go here if needed */