/* ============================================================
   Blackbox Command Center, chrome.css
   The "black glass, white light" restyle. DARK THEME ONLY.

   Loaded AFTER every other stylesheet (see index.html) and never edits
   them: css/main.css is untouched, this file only overrides it. Every rule
   is scoped to :root[data-theme="dark"], which is exactly how main.css
   selects dark mode (the inline no-flash script in index.html picks the
   value from localStorage bb_theme, falling back to prefers-color-scheme,
   and js/theme.js flips it live). There is no separate media-query path, so
   no @media (prefers-color-scheme) block is needed here. With the theme set
   to light, nothing in this file matches and the app renders as before.

   Layout of this file
     1. Tokens        palette, radius, fonts, shadows
     2. Page          background glow
     3. Recipes       the rim, the chrome fill (shared custom properties)
     4. Surfaces      cards, stat tiles, sidebar, rails, boards
     5. Sidebar       logo tile, section labels, nav rest/hover/active
     6. Type          mono labels, chrome numbers, headings
     7. Controls      chrome pill, ghost pill, tabs, pills, inputs
     8. Dashboard     the hero banner over the cube render
     9. Login         glass card over the cube render
    10. Responsive    small screens

   Light source: one, from the upper right, like the cube render.
   Status colors (danger, warning, live, Discord severity), per-game
   identity colors and chart line colors are NOT touched here.
   ============================================================ */

/* ============ 1. Tokens ============ */
:root[data-theme="dark"] {
  --page: #050607;
  --card: #0E1013;
  --ink: #ECEFF3;
  --ink-soft: #B4BBC4;
  --muted: #8E959F;
  --faint: #6F7680;
  --border: #23272D;
  --border-soft: #171A1E;

  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 10px;

  /* Chrome accents replace the white-to-grey brand fade and the beam stops. */
  --grad: linear-gradient(90deg, #FFFFFF 0%, #DDE2E8 52%, #8E959F 100%);
  --grad-v: linear-gradient(180deg, #FFFFFF 0%, #DDE2E8 52%, #8E959F 100%);
  --bb-beam-c1: #FFFFFF;
  --bb-beam-c2: #DDE2E8;
  --bb-beam-c3: #8E959F;

  --shadow-soft: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-card: 0 10px 34px rgba(0,0,0,0.42);
  --shadow-lift: 0 18px 50px rgba(0,0,0,0.6), 0 0 40px rgba(220,228,240,0.04);

  --tint-active: #16191D;
  --tint-active-ink: #FFFFFF;
  --hover-bg: rgba(255,255,255,0.035);
  --chip-bg: #16191D;
  --surface-2: #0A0C0F;
  --surface-3: #14171B;
  --input-bg: rgba(255,255,255,0.035);
  --input-focus-border: rgba(255,255,255,0.45);
  --focus-ring: rgba(255,255,255,0.06);
  --btn-border-hover: rgba(255,255,255,0.28);
  --btn-dark-hover: #FFFFFF;
  --strike: #3A3F46;
  --skeleton-1: #12151A; --skeleton-2: #1A1E24;
  --tabs-bg: rgba(255,255,255,0.03);
  --switch-track-off: #2A2E35;
  --done-btn-border: #3A3F46;
  --dot-idle: #3A3F46;
  --thumb-bg: #14171B; --thumb-ink: #4A515B;
  --soon-bg: #14171B;
  --drop-ring: rgba(255,255,255,0.3);
  --knob-shadow: rgba(0,0,0,0.6);

  /* Fonts: Sora everywhere (it was display-only before), Geist Mono for the
     small tracked uppercase labels. */
  --font: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bb-label: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ============ 3. Recipes (custom properties so every surface shares them) ============ */
  --bb-glass: linear-gradient(180deg, #0E1013, #090A0C);
  --bb-rim: linear-gradient(155deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 34%, rgba(255,255,255,0.02) 68%, rgba(255,255,255,0.12));
  --bb-rim-hot: linear-gradient(155deg, rgba(255,255,255,0.40), rgba(255,255,255,0.08) 34%, rgba(255,255,255,0.03) 68%, rgba(255,255,255,0.20));
  --bb-rim-ghost: linear-gradient(160deg, rgba(255,255,255,0.35), rgba(255,255,255,0.06));
  --bb-rim-nav: linear-gradient(120deg, rgba(255,255,255,0.55), rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.25));
  --bb-chrome-text: linear-gradient(180deg, #FFFFFF 0%, #DDE2E8 52%, #8E959F 100%);
  --bb-chrome-fill: linear-gradient(180deg, #F6F8FA, #C3CAD3);
  --bb-chrome-edge: linear-gradient(180deg, #FFFFFF, #7D8590);
}

/* ============ 2. Page ============ */
:root[data-theme="dark"],
:root[data-theme="dark"] body {
  background: transparent;
}
:root[data-theme="dark"] {
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(214,222,234,0.07), transparent 62%),
    linear-gradient(118deg, transparent 0 63%, rgba(255,255,255,0.022) 63.1%, transparent 63.35%),
    #050607;
  background-attachment: fixed;
}
:root[data-theme="dark"] ::selection { background: #ECEFF3; color: #050607; }

/* ============ 4. Surfaces: the rim ============
   A 1px border painted with a diagonal gradient (bright at the upper right),
   over near-black glass. Same box size as before: the old 1px border just
   goes transparent and the border-box background layer shows through it. */
:root[data-theme="dark"] :is(
  .card, .stat, .game-card, .team-card, .asset-card, .tool-card, .quick-card,
  .idea-card, .idea-composer, .worklog, .suggest-inbox, .tools-gate-card,
  .skel-card, .tml, .cm-topic, .wl-row
) {
  position: relative;
  border: 1px solid transparent;
  background: var(--bb-glass) padding-box, var(--bb-rim) border-box;
  box-shadow: var(--shadow-soft);
}
:root[data-theme="dark"] :is(.card, .stat, .game-card, .team-card, .asset-card, .tool-card, .quick-card, .idea-card):hover {
  background: var(--bb-glass) padding-box, var(--bb-rim-hot) border-box;
  box-shadow: var(--shadow-lift);
}
/* The short highlight streak along the top edge. */
:root[data-theme="dark"] :is(.card, .stat, .team-card, .quick-card, .idea-card, .tool-card, .asset-card)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 72%, transparent);
  pointer-events: none;
  z-index: 3;
}
/* Cards that clip their overflow would cut a streak at top:-1px. */
:root[data-theme="dark"] :is(.game-card, .tml)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 72%, transparent);
  pointer-events: none;
  z-index: 3;
}

/* The old border-beam on the Live CCU card (and any other .is-on host) is
   replaced by the chrome rim: kill its conic ring, mask and inner pulse. */
:root[data-theme="dark"] .bb-beam.is-on::after,
:root[data-theme="dark"] .bb-beam.active::after {
  content: none;
  animation: none;
}
:root[data-theme="dark"] .bb-beam.is-on::before,
:root[data-theme="dark"] .bb-beam.active::before {
  -webkit-mask: none;
  mask: none;
  padding: 0;
  animation: none;
}
:root[data-theme="dark"] .rail-card.bb-beam {
  box-shadow: var(--shadow-soft), 0 0 40px rgba(220,228,240,0.05);
}
:root[data-theme="dark"] .rail-tint.green { background: transparent; }

/* Board lanes and recessed wells stay quiet: no rim, just a darker well. */
:root[data-theme="dark"] .col {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
}
:root[data-theme="dark"] .col-count { background: rgba(255,255,255,0.05); color: var(--muted); }

/* Floating panels */
:root[data-theme="dark"] :is(.task-drawer-panel, .cm-drawer-panel) {
  border-color: rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #0E1013, #090A0C);
}

/* ============ 5. Sidebar ============ */
:root[data-theme="dark"] .sidebar {
  border: 1px solid transparent;
  background: linear-gradient(180deg, #0C0E11, #08090B) padding-box, var(--bb-rim) border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
:root[data-theme="dark"] .mobile-topbar {
  border: 1px solid transparent;
  background: var(--bb-glass) padding-box, var(--bb-rim) border-box;
}

/* Logo: the square tile with the BLACKBOX wordmark art, then the wordmark
   image beside it at full size (Ryan, 2026-10-05: no "Command Center" label,
   bigger wordmark). Pseudo-element only, so index.html's link and its
   aria-label are unchanged. */
:root[data-theme="dark"] .side-wordmark { padding: 4px 8px 0; margin-bottom: 18px; }
:root[data-theme="dark"] .side-wordmark-link {
  display: flex;
  align-items: center;
  height: 40px;
  gap: 12px;
  line-height: 1;
}
:root[data-theme="dark"] .side-wordmark-link::before {
  content: "";
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: url("../assets/brand/logo-tile.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 8px 24px rgba(0,0,0,0.6);
}
:root[data-theme="dark"] .side-wordmark-link img {
  height: 22px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

/* Section headings */
:root[data-theme="dark"] .side-section {
  font: 500 10.5px/1 var(--bb-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 12px 6px;
  margin: 6px 0 0;
}

/* Nav items: rest / hover / active (.bb-nav, .bb-nav-on) */
:root[data-theme="dark"] .nav-item {
  height: 37px;
  padding: 0 12px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  background: transparent;
}
:root[data-theme="dark"] a.nav-item:visited { color: var(--muted); }
:root[data-theme="dark"] .nav-item:hover,
:root[data-theme="dark"] a.nav-item:hover:visited {
  color: #E8ECF1;
  background: rgba(255,255,255,0.035);
}
:root[data-theme="dark"] .nav-item.active {
  color: #FFFFFF;
  font-weight: 500;
  background: linear-gradient(180deg, #16191D, #0E1013) padding-box, var(--bb-rim-nav) border-box;
  box-shadow: 0 0 24px rgba(220,228,240,0.06);
}
/* Active marker dot, as in the mockup. Replaces the old beam's ::after. */
:root[data-theme="dark"] .nav-item.active::after {
  content: "";
  position: absolute;
  inset: auto 12px auto auto;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(255,255,255,0.9);
  z-index: 1;
  opacity: 1;
  animation: none;
  -webkit-mask: none;
  mask: none;
}
:root[data-theme="dark"] .nav-item.active::before { content: none; }
:root[data-theme="dark"] .nav-item .nav-ext { opacity: 0.5; }

/* Sidebar footer: user chip as a small glass card */
:root[data-theme="dark"] .side-bottom { border-top: 1px solid rgba(255,255,255,0.06); }
:root[data-theme="dark"] .user-chip {
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--bb-glass) padding-box, var(--bb-rim) border-box;
}
:root[data-theme="dark"] .user-avatar {
  background: linear-gradient(160deg, #FFFFFF, #9AA2AC);
  color: #07080A;
}
:root[data-theme="dark"] .user-email { font-family: var(--bb-label); font-size: 10.5px; }
:root[data-theme="dark"] .signout:hover { color: #FFFFFF; }

/* ============ 6. Type ============ */
/* Tracked uppercase mono labels */
:root[data-theme="dark"] :is(.section-label, .stat-label, .hero-date, .col-title) {
  font-family: var(--bb-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
:root[data-theme="dark"] .section-label { font-size: 11px; color: var(--muted); }
:root[data-theme="dark"] .stat-label { font-size: 10.5px; color: var(--muted); letter-spacing: 0.1em; white-space: nowrap; }
:root[data-theme="dark"] .col-title { font-size: 11px; color: var(--ink-soft); }

/* Page titles: bright and clean */
:root[data-theme="dark"] .page-title { color: #FFFFFF; }
:root[data-theme="dark"] .page-sub { color: var(--ink-soft); }
:root[data-theme="dark"] .card-title-row h2,
:root[data-theme="dark"] .card-title { color: #FFFFFF; }
:root[data-theme="dark"] .card-link { color: #C9D0D9; }
:root[data-theme="dark"] .card-link:hover { color: #FFFFFF; }
:root[data-theme="dark"] a { color: inherit; }

/* Big numbers get the metal gradient */
:root[data-theme="dark"] .stat-value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: var(--bb-chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  width: fit-content;
  max-width: 100%;
}
/* Dashboard tiles get narrow at laptop widths (five across), so the number
   scales with its own tile instead of clipping a five-digit peak. */
:root[data-theme="dark"] .snapshot .stat { container-type: inline-size; }
:root[data-theme="dark"] .snapshot .stat-value { font-size: clamp(20px, 22cqi, 32px); }
:root[data-theme="dark"] .rail-tint .stat-value { font-size: 38px; }
/* Revenue has five tiles in a row and eight-digit all-time totals. */
:root[data-theme="dark"] #revenue-snapshot .stat-value { font-size: 24px; }
:root[data-theme="dark"] .stat-note { color: var(--muted); }

/* Stat tiles: a little more air, like the mockup */
:root[data-theme="dark"] .stat { padding: 20px 22px; gap: 14px; }
:root[data-theme="dark"] .ic {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* ============ 7. Controls ============ */
/* Primary: chrome pill (.bb-btn-chrome) */
:root[data-theme="dark"] :is(.btn-dark, .btn-mini.primary, .pill.active, .board-pager-dot.active, .idea-vote.voted, .login-btn) {
  color: #07080A;
  border: 1px solid transparent;
  background: var(--bb-chrome-fill) padding-box, var(--bb-chrome-edge) border-box;
}
:root[data-theme="dark"] :is(.btn-dark, .btn-mini.primary, .idea-vote.voted):hover {
  background: var(--bb-chrome-fill) padding-box, var(--bb-chrome-edge) border-box;
  filter: brightness(1.07);
}
:root[data-theme="dark"] .btn-dark {
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(220,228,240,0.10);
}
:root[data-theme="dark"] .pill.active .pill-count { color: rgba(7,8,10,0.6); }
:root[data-theme="dark"] .pill.active { font-weight: 600; }

/* Secondary: ghost pill (.bb-btn-ghost) */
:root[data-theme="dark"] :is(.btn-ghost, .btn-mini, .pill) {
  color: #E8ECF1;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255,255,255,0.03) padding-box, var(--bb-rim-ghost) border-box;
}
:root[data-theme="dark"] .btn-ghost svg { stroke: var(--ink-soft); }
:root[data-theme="dark"] :is(.btn-ghost, .btn-mini:not(.primary):not(.danger), .pill:not(.active)):hover {
  color: #FFFFFF;
  border-color: transparent;
  background: rgba(255,255,255,0.06) padding-box, var(--bb-rim-ghost) border-box;
  box-shadow: none;
}
:root[data-theme="dark"] .pill:not(.active) { color: var(--ink-soft); }
/* Danger keeps its meaning: red text and red edge, no rim. */
:root[data-theme="dark"] .btn-mini.danger {
  color: var(--danger);
  background: rgba(243,114,114,0.06);
  border: 1px solid rgba(243,114,114,0.35);
}
:root[data-theme="dark"] .btn-mini.danger:hover {
  background: var(--chip-red-bg);
  border-color: var(--danger);
}
:root[data-theme="dark"] .btn-mini.primary { box-shadow: 0 6px 18px rgba(220,228,240,0.08); }

/* Segmented tabs: dark track, chrome fill on the active tab. The fill is on
   the tab itself and the JS-driven sliding indicator is hidden: that
   indicator is measured once at load while its screen is display:none (so it
   is 0px wide until a tab is clicked), and a dark label on a missing pill
   would be unreadable. The tab fill can never be missing. */
:root[data-theme="dark"] .view-tabs {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 3px;
}
:root[data-theme="dark"] .tab-pill-indicator { display: none; }
:root[data-theme="dark"] .view-tab {
  border-radius: 999px;
  font-family: var(--bb-label);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
:root[data-theme="dark"] .view-tab:hover { color: #FFFFFF; }
:root[data-theme="dark"] .view-tab.active {
  color: #07080A;
  background: linear-gradient(180deg, #F4F6F9, #BFC6CF);
  box-shadow: 0 4px 14px rgba(220,228,240,0.10);
}

/* Inputs, selects, textareas */
:root[data-theme="dark"] :is(.field input, .field select, .field textarea, .task-search, .sort-select, .assignee-filter) {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: var(--ink);
}
:root[data-theme="dark"] .task-search { border-radius: 999px; }
:root[data-theme="dark"] :is(.field input, .field select, .field textarea, .task-search, .sort-select, .assignee-filter):focus {
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}
:root[data-theme="dark"] .field label {
  font-family: var(--bb-label);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
:root[data-theme="dark"] :is(a, button, input, select):focus-visible { outline-color: #FFFFFF; }
:root[data-theme="dark"] select option { background: #0E1013; color: #ECEFF3; }

/* Switches: chrome track when on, dark knob so it stays visible on it */
:root[data-theme="dark"] .switch[aria-checked="true"] { background: var(--bb-chrome-fill); }
:root[data-theme="dark"] .switch[aria-checked="true"]::after { background: #07080A; box-shadow: none; }

/* ============ 8. Dashboard hero ============
   The greeting area becomes a banner: dark gradient on the left for text
   legibility, the cube render on the right. */
:root[data-theme="dark"] #screen-dashboard .hero {
  position: relative;
  overflow: hidden;
  min-height: 248px;
  margin-bottom: 22px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(90deg, #050607 0%, rgba(5,6,7,0.92) 30%, rgba(5,6,7,0.35) 58%, rgba(5,6,7,0) 75%) padding-box,
    url("../assets/brand/cube-hero.png") right center / cover no-repeat padding-box,
    var(--bb-rim) border-box;
  box-shadow: var(--shadow-soft);
}
:root[data-theme="dark"] #screen-dashboard .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 72%, transparent);
  pointer-events: none;
}
:root[data-theme="dark"] .hero-rule { display: none; }
:root[data-theme="dark"] .hero-date {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: #A7AFB9;
}
:root[data-theme="dark"] .hero h1 {
  max-width: 560px;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
/* The words animate as inline-blocks, so the metal gradient goes on each
   word rather than on the h1 (background-clip:text does not follow a
   transformed child reliably). */
:root[data-theme="dark"] .hero h1 span {
  background: var(--bb-chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="dark"] .hero p {
  max-width: 460px;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #B4BBC4;
}

/* ============ 9. Login ============
   Glass card over the cube render. #login is dark in both themes in
   main.css; this restyle only applies when the app theme is dark. */
:root[data-theme="dark"] #login {
  --ar-text-primary: #ECEFF3;
  --ar-text-secondary: #A7AFB9;
  --ar-text-muted: #6F7680;
  --ar-glass-bg: rgba(255,255,255,0.035);
  --ar-glass-bg-hover: rgba(255,255,255,0.07);
  --ar-glass-border: rgba(255,255,255,0.10);
  --ar-accent-blue: rgba(255,255,255,0.45);
  --ar-font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(900px 500px at 50% 46%, rgba(5,6,7,0.55), rgba(5,6,7,0.15) 70%),
    linear-gradient(180deg, rgba(5,6,7,0.2), rgba(5,6,7,0.85)),
    url("../assets/brand/cube-hero.png") 70% center / cover no-repeat,
    #050607;
}
:root[data-theme="dark"] #login .bg-animation,
:root[data-theme="dark"] #login .grain { display: none; }

:root[data-theme="dark"] #login .glass-card {
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(18,20,24,0.82), rgba(8,9,11,0.9)) padding-box,
    linear-gradient(150deg, rgba(255,255,255,0.45), rgba(255,255,255,0.06) 35%, rgba(255,255,255,0.03) 65%, rgba(255,255,255,0.2)) border-box;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 80px rgba(220,228,240,0.05);
}
:root[data-theme="dark"] #login .login-card {
  width: 420px;
  padding: 40px 36px 32px;
}
:root[data-theme="dark"] #login .login-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 22%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9) 70%, transparent);
  pointer-events: none;
}
/* The tile replaces the wordmark image (the tile art already carries it). */
:root[data-theme="dark"] #login .login-card > img { display: none; }
:root[data-theme="dark"] #login .login-card::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: url("../assets/brand/logo-tile.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2), 0 0 40px rgba(220,228,240,0.15);
}
:root[data-theme="dark"] #login .login-card p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 22px;
}
:root[data-theme="dark"] #login .login-card p::before {
  content: "Command Center";
  display: block;
  margin-bottom: 10px;
  font: 600 28px/1.1 'Sora', sans-serif;
  letter-spacing: -0.02em;
  background: var(--bb-chrome-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="dark"] #login .login-google-btn {
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  font-weight: 600;
}
:root[data-theme="dark"] #login .login-google-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.28);
}
:root[data-theme="dark"] #login .login-divider {
  margin: 22px 0;
  font: 500 10.5px/1 var(--bb-label);
  letter-spacing: 0.18em;
  color: var(--faint);
}
:root[data-theme="dark"] #login .login-divider::before,
:root[data-theme="dark"] #login .login-divider::after { background: rgba(255,255,255,0.08); }
:root[data-theme="dark"] #login .login-input {
  height: 48px;
  padding: 0 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  color: #ECEFF3;
}
:root[data-theme="dark"] #login .login-input:focus {
  border-color: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}
:root[data-theme="dark"] #login .login-btn {
  height: 48px;
  margin-top: 6px;
  padding: 0;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #07080A;
  box-shadow: 0 12px 34px rgba(220,228,240,0.14);
}
:root[data-theme="dark"] #login .login-btn:hover {
  background: var(--bb-chrome-fill) padding-box, var(--bb-chrome-edge) border-box;
  filter: brightness(1.07);
}
:root[data-theme="dark"] #login::after {
  content: "BLACKBOX GAMES \00B7  BLACKBOXGAMES.NET";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  z-index: 2;
  text-align: center;
  font: 500 11px/1 var(--bb-label);
  letter-spacing: 0.18em;
  color: var(--muted);
  pointer-events: none;
}

/* ============ 10. Responsive ============ */
@media (max-width: 900px) {
  :root[data-theme="dark"] #screen-dashboard .hero { min-height: 200px; padding: 28px 24px; }
  :root[data-theme="dark"] .hero h1 { font-size: 34px; }
}
@media (max-width: 640px) {
  :root[data-theme="dark"] #screen-dashboard .hero {
    padding: 24px 20px;
    background:
      linear-gradient(90deg, #050607 0%, rgba(5,6,7,0.9) 45%, rgba(5,6,7,0.5) 100%) padding-box,
      url("../assets/brand/cube-hero.png") right center / cover no-repeat padding-box,
      var(--bb-rim) border-box;
  }
  :root[data-theme="dark"] .hero h1 { font-size: 28px; }
  :root[data-theme="dark"] .hero p { font-size: 14px; }
  :root[data-theme="dark"] #login .login-card { width: auto; padding: 32px 22px 24px; }
  :root[data-theme="dark"] .stat-value { font-size: 26px; }
}

/* ============ 11. Charts ============
   The canvas side (white/steel lines, grid, glass tooltip) lives in
   js/chartstyle.js. This is the DOM side: Revenue's external tooltip, so it
   matches the Chart.js glass tooltip on the other screens. */
:root[data-theme="dark"] .revenue-chart-tip {
  background: rgba(10,11,13,0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 10px;
  color: #C9D0D9;
  font-family: var(--bb-label);
  font-size: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
:root[data-theme="dark"] .revenue-chart-tip-date {
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 4px;
}
:root[data-theme="dark"] .revenue-chart-tip-value { color: #C9D0D9; font-weight: 500; }
:root[data-theme="dark"] .revenue-chart-tip-usd { color: #8E959F; }
:root[data-theme="dark"] .revenue-chart-tip-row { color: #C9D0D9; font-weight: 500; }
:root[data-theme="dark"] .revenue-chart-tip-swatch {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  align-self: center;
}