/* Locker Room — the portal as a champions' locker room at night.
   The room itself is the backdrop (theme-locker.js builds it once): a back wall of red steel lockers with vents and
   number plates, a dark floor that reflects them, warm light beams sweeping slowly across, dust drifting in the
   light. Every station is a locker of its own: the red door hangs open on its hinge in 3D, a gold number plate on
   top, and pointing at it rattles the door, flickers the light on inside and leans the locker toward you. Titles are
   extruded chrome-gold capitals; labels are tiny spaced mono. A camera switch in the header (Front / Wide / Angle)
   moves the view of the page in 3D, a red ticker runs live station figures along the bottom, and the pages bar is
   a number rail with a gold trophy on the open page (theme-navs.js). Motion is transform/opacity only and stops
   under prefers-reduced-motion. */

/* ---------- Palette ---------- */
html[data-theme="locker"] {
  color-scheme: dark;
  --lk-room: #0d0907; --lk-red: #b3121f; --lk-red-hi: #e0283a; --lk-red-lo: #6e0a12; --lk-gold: #e8ab36; --lk-gold-hi: #ffc570; --lk-white: #f6faf9;
  --lk-glass: rgba(26, 14, 12, .84); --lk-line: rgba(246, 250, 249, .12); --lk-line-2: rgba(255, 197, 112, .3);
  --tint: #e8ab36; --accent: #e8ab36; --accent-2: #e0283a; --accent-3: #ffc570;
  --font: "Geist", "Inter", system-ui, sans-serif;
  --lk-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --lk-display: "Montserrat", "Archivo Black", "Geist", sans-serif;
  --bg: #0d0907; --panel: #1a0f0d; --panel-2: #24140f; --border: rgba(246, 250, 249, .12);
  --text: #f6faf9; --muted: rgba(246, 250, 249, .62); --input-bg: rgba(10, 6, 5, .7); --link: #ffc570;
  --green: #5fd38a; --red: #ff4d5e; --amber: #ffc570; --orange: #ff8a3d;
  --radius: 14px; --radius-btn: 999px; --radius-input: 10px;
  --surface: var(--lk-glass); --surface-border-color: rgba(246, 250, 249, .12);
  --grad-brand: linear-gradient(90deg, #ffc570, #e8ab36);
  --grad-primary: linear-gradient(180deg, #ffd48a, #e8ab36); --grad-primary-hover: linear-gradient(180deg, #ffe0a8, #f0b545);
  --grad-success: linear-gradient(180deg, #6fe39a, #2f9e5c); --grad-danger: linear-gradient(180deg, #ff5a6a, #b3121f);
  --grad-warn: linear-gradient(180deg, #ffd48a, #e08a1a); --grad-info: linear-gradient(180deg, #8aa4c8, #4a6080);
  --btn-soft: rgba(28, 16, 14, .8); --btn-soft-hover: rgba(48, 24, 18, .9);
  --app-bg: #0d0907;
  --elev: 0 1px 0 rgba(255, 220, 170, .08) inset, 0 24px 40px -24px rgba(0, 0, 0, .9);
  --shadow: 0 24px 40px -24px rgba(0, 0, 0, .9); --shadow-glow: 0 0 0 1px rgba(232, 171, 54, .4), 0 0 24px rgba(232, 171, 54, .25);
  --glow1: transparent; --glow2: transparent; --glow-blend: normal;
  --lk-ease: cubic-bezier(.2, .9, .2, 1);
  --lk-spring: linear(0, .2 6%, .62 15%, 1.02 27%, 1.1 33%, 1.06 40%, .99 52%, .98 60%, 1.002 75%, 1);
  --lk-chrome: linear-gradient(180deg, #fff8e0 0%, #ffe3a0 22%, #e8ab36 46%, #8a5612 54%, #f2c46b 70%, #fff0c2 86%, #c98d2a 100%);
}
html[data-theme="locker"][data-mode="light"] {
  color-scheme: light;
  --lk-room: #d9d2c8; --lk-glass: rgba(255, 252, 247, .9); --lk-line: rgba(30, 14, 10, .14); --lk-line-2: rgba(160, 100, 20, .35);
  --bg: #d9d2c8; --panel: #fffaf3; --panel-2: #f2ebe1; --border: rgba(30, 14, 10, .14);
  --text: #1c0f0b; --muted: rgba(28, 15, 11, .62); --input-bg: #fffaf3; --link: #9a5e0a;
  --green: #1f8a4c; --red: #c0141f; --amber: #a86a0a; --orange: #c4521f;
  --surface: var(--lk-glass); --surface-border-color: rgba(30, 14, 10, .14);
  --btn-soft: rgba(255, 252, 247, .9); --btn-soft-hover: #fff;
  --app-bg: #d9d2c8;
  --elev: 0 1px 0 #fff inset, 0 20px 36px -24px rgba(60, 30, 10, .45);
  --lk-chrome: linear-gradient(180deg, #6b3d08 0%, #b37a1c 40%, #4a2a06 55%, #c9902e 75%, #6b3d08 100%);
}

/* ---------- Motion vocabulary ---------- */
@keyframes lk-sweep { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } }
@keyframes lk-sweep-2 { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-8deg); } }
@keyframes lk-motes { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-60px, -400px, 0); } }
@keyframes lk-ticker { to { transform: translateX(-50%); } }
@keyframes lk-rattle { 0% { transform: perspective(2600px) rotateY(-85deg); } 25% { transform: perspective(2600px) rotateY(-90deg); }
  50% { transform: perspective(2600px) rotateY(-80deg); } 75% { transform: perspective(2600px) rotateY(-87deg); } 100% { transform: perspective(2600px) rotateY(-85deg); } }
@keyframes lk-flicker { 0% { opacity: 0; } 8% { opacity: .9; } 12% { opacity: .15; } 20% { opacity: 1; } 26% { opacity: .5; } 34%, 100% { opacity: 1; } }
@keyframes lk-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes lk-ruler { from { transform: scaleX(0); } }
@keyframes lk-glow { 50% { box-shadow: 0 0 0 1px rgba(255, 197, 112, .7), 0 0 26px rgba(232, 171, 54, .55); } }

/* ---------- The room (built by theme-locker.js as .lk-room) ---------- */
html[data-theme="locker"][data-mode] body { background: var(--lk-room); color: var(--text); font-family: var(--font); }
html[data-theme="locker"][data-mode] body::before, html[data-theme="locker"][data-mode] body::after { content: none; }
html[data-theme="locker"][data-mode] :is(#app-view, #login-view, #modal-root) { position: relative; z-index: 1; }
.lk-room { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse 90% 70% at 50% 30%, #3a1a10 0%, #160c08 55%, #080504 100%); }
/* the back wall of lockers, seen from the room: steel doors with vents, number plates and seams */
.lk-room .lk-wall {
  position: absolute; left: -5%; right: -5%; top: 10%; height: 46%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 18%, transparent 82%, rgba(0, 0, 0, .7)),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(0, 0, 0, .75) 58px 62px),
    repeating-linear-gradient(180deg, transparent 0 14%, rgba(0, 0, 0, .55) 14% 15.2%, transparent 15.2% 17%, rgba(0, 0, 0, .55) 17% 18.2%, transparent 18.2% 82%, rgba(0, 0, 0, .55) 82% 83.2%, transparent 83.2% 85%, rgba(0, 0, 0, .55) 85% 86.2%, transparent 86.2%),
    linear-gradient(180deg, #8e1019, #b3121f 30%, #7d0c15 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .8);
}
.lk-room .lk-wall::after {   /* number plates on every door */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(255, 210, 150, .22) 20px 38px, transparent 38px 62px) 0 7% / 100% 9px no-repeat;
}
.lk-room .lk-floor {
  position: absolute; left: 0; right: 0; top: 56%; bottom: 0;
  background: linear-gradient(180deg, rgba(179, 18, 31, .22), transparent 30%), linear-gradient(180deg, #1a0f0b, #050302);
}
.lk-room .lk-beam {
  position: absolute; top: -30%; width: 46vw; height: 150%; transform-origin: 50% 0; will-change: transform; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255, 190, 110, .26), rgba(255, 140, 60, .05) 60%, transparent);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
}
.lk-room .lk-beam.a { left: 4%; animation: lk-sweep 16s ease-in-out infinite; }
.lk-room .lk-beam.b { left: 50%; animation: lk-sweep-2 21s ease-in-out infinite; background: linear-gradient(180deg, rgba(255, 90, 90, .2), rgba(255, 60, 60, .04) 60%, transparent); }
.lk-room .lk-motes {
  position: absolute; left: 0; top: 0; width: calc(100% + 60px); height: calc(100% + 400px); opacity: .55; will-change: transform;
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 220, 170, .8), transparent), radial-gradient(1px 1px at 140px 90px, rgba(255, 220, 170, .6), transparent),
    radial-gradient(1.5px 1.5px at 260px 170px, rgba(255, 200, 140, .7), transparent), radial-gradient(1px 1px at 80px 230px, rgba(255, 230, 190, .6), transparent),
    radial-gradient(2px 2px at 210px 280px, rgba(255, 180, 120, .5), transparent);
  background-size: 300px 300px; animation: lk-motes 38s linear infinite;
}
.lk-room .lk-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(0, 0, 0, .75)); }
html[data-theme="locker"][data-mode="light"] .lk-room { background: radial-gradient(ellipse 90% 70% at 50% 30%, #f3ece2, #d4cbbf 60%, #b9ae9f); }
html[data-theme="locker"][data-mode="light"] .lk-room .lk-floor { background: linear-gradient(180deg, rgba(179, 18, 31, .12), transparent 30%), linear-gradient(180deg, #cfc5b8, #a89c8c); }
html[data-theme="locker"][data-mode="light"] .lk-room :is(.lk-beam, .lk-motes) { opacity: .35; mix-blend-mode: normal; }
html[data-theme="locker"][data-mode="light"] .lk-room .lk-vignette { background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 45%, rgba(60, 40, 20, .3)); }

/* ---------- Header: glass, with the camera switch ---------- */
html[data-theme="locker"][data-mode] .topbar {
  background: linear-gradient(180deg, rgba(8, 5, 4, .92), rgba(8, 5, 4, .6)); border-bottom: 1px solid var(--lk-line); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-theme="locker"][data-mode="light"] .topbar { background: linear-gradient(180deg, rgba(255, 252, 247, .95), rgba(255, 252, 247, .75)); }
html[data-theme="locker"][data-mode] .brand { font: italic 900 18px var(--lk-display); text-transform: uppercase; letter-spacing: .01em;
  background: var(--lk-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
html[data-theme="locker"][data-mode] :is(.crumb, .crumb-back) { font: 600 11px var(--lk-mono); letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; }
html[data-theme="locker"][data-mode] .crumb.current { background: rgba(232, 171, 54, .14); color: var(--lk-gold-hi); box-shadow: inset 0 0 0 1px rgba(232, 171, 54, .4); }
.lk-cam { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(20, 12, 10, .8); border: 1px solid var(--lk-line); margin-left: auto; }
html[data-mode="light"] .lk-cam { background: rgba(255, 252, 247, .9); }
.lk-cam button { position: relative; font: 600 11px var(--lk-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: none; border: 0; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: color .3s, background .3s; }
.lk-cam button:hover { color: var(--text); }
.lk-cam button[aria-pressed="true"] { color: var(--text); background: rgba(246, 250, 249, .08); }
.lk-cam button[aria-pressed="true"]::after { content: ""; position: absolute; left: 35%; right: 35%; bottom: 3px; height: 2px; border-radius: 2px; background: var(--lk-gold); box-shadow: 0 0 8px var(--lk-gold); }
@media (max-width: 760px) { .lk-cam { display: none; } }
/* the opening-the-lockers ruler, run on every page change */
.lk-load { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 80; pointer-events: none; transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, var(--lk-gold-hi) 0 2px, transparent 2px 9px), linear-gradient(90deg, var(--lk-gold), var(--lk-gold-hi));
  animation: lk-ruler .7s var(--lk-ease); transition: opacity .5s .3s; }
.lk-load.done { opacity: 0; }

/* ---------- The camera: the page seen from the front, wide or at an angle ---------- */
html[data-theme="locker"][data-mode] :is(.station-grid, .station-main) { transition: transform 1.1s var(--lk-spring); transform-origin: 50% 0; }
html[data-theme="locker"][data-lk-cam="wide"] .station-grid { transform: perspective(1800px) rotateX(5deg); }
html[data-theme="locker"][data-lk-cam="angle"] .station-grid { transform: perspective(1500px) rotateY(-9deg) rotateX(3deg); transform-origin: 0 30%; }
html[data-theme="locker"][data-lk-cam="angle"] .station-main { transform: perspective(1800px) rotateY(-4deg); transform-origin: 0 20%; }

/* ---------- Type: chrome-gold capitals for titles, tiny spaced mono for labels ---------- */
html[data-theme="locker"][data-mode] :is(h1, h2, h3) { font-family: var(--font); font-weight: 600; letter-spacing: -.01em; }
html[data-theme="locker"][data-mode] .section-head h2 {
  font: 900 clamp(30px, 3.8vw, 52px)/1 var(--lk-display); text-transform: uppercase; letter-spacing: .01em;
  background: var(--lk-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #6b4410) drop-shadow(0 2px 0 #4a2e0a) drop-shadow(0 3px 0 #2e1c06) drop-shadow(0 10px 14px rgba(0, 0, 0, .65));
}
html[data-theme="locker"][data-mode] :is(.stat .label, .sc-bal-label, table thead th, .ov-l, .sc-flag-l, .sc-day) {
  font: 600 10.5px var(--lk-mono) !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--muted);
}
html[data-theme="locker"][data-mode] :is(.stat .value, .sc-bal-num, td, .num, .money) { font-variant-numeric: tabular-nums; }

/* ---------- Surfaces: dark maroon glass ---------- */
html[data-theme="locker"][data-mode] .card {
  background: linear-gradient(180deg, rgba(42, 20, 16, .9), rgba(18, 10, 8, .92)); border: 1px solid var(--lk-line); border-radius: var(--radius);
  box-shadow: var(--elev); animation: lk-in .8s var(--lk-ease) backwards;
}
html[data-mode="light"][data-theme="locker"] .card { background: linear-gradient(180deg, rgba(255, 252, 247, .96), rgba(246, 239, 230, .96)); }
html[data-theme="locker"][data-mode] .card::before { height: 1px; opacity: 1; background: linear-gradient(90deg, transparent, rgba(255, 197, 112, .55), transparent); }
html[data-theme="locker"][data-mode] .stat {
  border-radius: 14px; border: 1px solid var(--lk-line); box-shadow: var(--elev);
  background: linear-gradient(180deg, rgba(36, 18, 14, .92), rgba(16, 9, 7, .94));
}
html[data-mode="light"][data-theme="locker"] .stat { background: linear-gradient(180deg, #fffaf3, #f2ebe1); }
html[data-theme="locker"][data-mode] .stat .value { font: 600 22px var(--font); letter-spacing: -.01em; }

/* ---------- Controls: glass pills; the primary one gold, like "NEXT →" ---------- */
html[data-theme="locker"][data-mode] .btn {
  font: 600 11px var(--lk-mono); letter-spacing: .14em; text-transform: uppercase; border-radius: 999px;
  background: var(--btn-soft); border: 1px solid var(--lk-line); color: var(--text); box-shadow: none;
  transition: transform .4s var(--lk-spring), border-color .25s, background .25s, color .25s;
}
html[data-theme="locker"][data-mode] .btn:hover { border-color: var(--lk-line-2); transform: translateY(-2px); }
html[data-theme="locker"][data-mode] .btn:active { transform: scale(.95); transition-duration: .1s; }
html[data-theme="locker"][data-mode] .btn.primary { background: var(--grad-primary); color: #1c0f05; border-color: transparent; box-shadow: 0 10px 22px -10px rgba(232, 171, 54, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
html[data-theme="locker"][data-mode] .btn.primary:hover { animation: lk-glow 1.6s ease-in-out infinite; }
html[data-theme="locker"][data-mode] .btn.danger { color: #fff; background: var(--grad-danger); border-color: transparent; }
html[data-theme="locker"][data-mode] :is(input, select, textarea) { border-radius: var(--radius-input); background: var(--input-bg); border: 1px solid var(--lk-line); color: var(--text); transition: border-color .2s, box-shadow .2s; }
html[data-theme="locker"][data-mode] :is(input, select, textarea):focus { outline: none; border-color: var(--lk-gold); box-shadow: 0 0 0 3px rgba(232, 171, 54, .22); }
html[data-theme="locker"][data-mode] :is(.chip, .badge, .sc-badge, .sc-owed, .sc-flag, .gp) { border-radius: 999px; font: 600 10.5px var(--lk-mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Tables ---------- */
html[data-theme="locker"][data-mode] table thead th { border-bottom: 1px solid var(--lk-line-2); }
html[data-theme="locker"][data-mode] table tbody td { border-bottom: 1px solid var(--lk-line); }
html[data-theme="locker"][data-mode] table tbody tr { transition: background .2s, box-shadow .2s; }
html[data-theme="locker"][data-mode] table tbody tr:hover { background: rgba(179, 18, 31, .14); box-shadow: inset 3px 0 0 var(--lk-red-hi); }

/* ---------- Every station is an open locker ---------- */
html[data-theme="locker"][data-mode] .station-grid { counter-reset: lk-st; gap: 34px 30px !important; margin-top: 40px; padding-left: 28px; }   /* room for the open doors */
html[data-theme="locker"][data-mode] .station-grid > .station-card {
  counter-increment: lk-st; position: relative; overflow: visible; isolation: isolate; cursor: pointer;
  padding: 44px 22px 22px 64px; border-radius: 6px;
  border: 3px solid #8e0f19; border-top-color: #c4202d; border-left-color: #a8141f; border-bottom-color: #5e0910;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .55) 0 3px, transparent 3px 7px) 50% 10px / 46% 18px no-repeat,
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 200, 140, .1), transparent 70%),
    linear-gradient(180deg, #1b0e0b, #0d0705);
  transform: perspective(1000px) rotateX(var(--lk-rx, 0deg)) rotateY(var(--lk-ry, 0deg));
}
html[data-mode="light"][data-theme="locker"] .station-grid > .station-card { background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .35) 0 3px, transparent 3px 7px) 50% 10px / 46% 18px no-repeat,
    linear-gradient(180deg, #fffaf3, #efe6da); }
/* the door: red steel, hinged on the left, standing open — edge-on it reads as a strip down the side */
html[data-theme="locker"][data-mode] .station-grid > .station-card::before {
  content: ""; display: block; position: absolute; left: -3px; top: -3px; bottom: -3px; width: calc(100% + 6px); height: auto; z-index: 2; opacity: 1;
  border-radius: 4px; transform-origin: 0 50%; transform: perspective(2600px) rotateY(-85deg); pointer-events: none; backface-visibility: visible;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 30%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .55) 0 3px, transparent 3px 7px) 30% 16px / 40% 22px no-repeat,
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .55) 0 3px, transparent 3px 7px) 30% calc(100% - 16px) / 40% 22px no-repeat,
    radial-gradient(circle at 88% 50%, #e9e2d6 0 5px, #6b6258 6px, transparent 7px),
    linear-gradient(180deg, #d1202e, #a8131f 40%, #7a0b14);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .18);
}
/* the light inside, which flickers on */
html[data-theme="locker"][data-mode] .station-grid > .station-card::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 60%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 214, 160, .32), transparent 70%);
}
html[data-theme="locker"][data-mode] .station-grid > .station-card:hover::before { animation: lk-rattle .8s var(--lk-ease); }
html[data-theme="locker"][data-mode] .station-grid > .station-card:hover::after { animation: lk-flicker .9s steps(1) forwards; }
html[data-theme="locker"][data-mode] .station-grid > .station-card:nth-child(2) { animation-delay: .1s; }
html[data-theme="locker"][data-mode] .station-grid > .station-card:nth-child(n+3) { animation-delay: .2s; }
/* the gold number plate on top */
html[data-theme="locker"][data-mode] .station-card .sc-head { position: relative; }
html[data-theme="locker"][data-mode] .station-card .sc-head::after {
  content: counter(lk-st, decimal-leading-zero); position: absolute; right: -6px; top: -34px;
  font: 700 12px var(--lk-mono); letter-spacing: .12em; color: #2a1704; padding: 3px 10px; border-radius: 3px;
  background: linear-gradient(180deg, #ffe4a8, #e8ab36 55%, #b8801f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 8px rgba(0, 0, 0, .5);
}
html[data-theme="locker"][data-mode] .station-card h3 {
  font: italic 900 clamp(24px, 2.6vw, 34px)/1 var(--lk-display); text-transform: uppercase; letter-spacing: .005em;
  background: var(--lk-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #6b4410) drop-shadow(0 2px 0 #3a2408) drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}
html[data-theme="locker"][data-mode] .station-card .meta { font: 600 10.5px var(--lk-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
html[data-theme="locker"][data-mode] .station-card .sc-balance.sc-live { background: rgba(0, 0, 0, .28); border: 1px solid var(--lk-line); border-radius: 10px; }
html[data-mode="light"][data-theme="locker"] .station-card .sc-balance.sc-live { background: rgba(255, 255, 255, .6); }
html[data-theme="locker"][data-mode] .station-card .sc-bal-num { font: 700 26px var(--font); letter-spacing: -.02em; color: var(--text); }
html[data-theme="locker"][data-mode] .station-card .sc-cash-box { border-radius: 10px; background: rgba(0, 0, 0, .3); border-color: var(--lk-line); }
html[data-theme="locker"][data-mode] .station-card .sc-cash-box.now { border-color: rgba(95, 211, 138, .4); background: rgba(95, 211, 138, .08); }
html[data-theme="locker"][data-mode] .station-card .sc-cash-v.sc-bal-num { font: 700 18px var(--font) !important; }
html[data-theme="locker"][data-mode] .sc-spark rect { fill: rgba(246, 250, 249, .22); transform-box: fill-box; transform-origin: 50% 100%; }
html[data-theme="locker"][data-mode] .sc-spark rect.now { fill: var(--lk-gold); }
html[data-theme="locker"][data-mode] .station-card:hover .sc-spark rect { fill: rgba(255, 197, 112, .45); }
html[data-theme="locker"][data-mode] .sc-flag.hot { background: var(--grad-danger); color: #fff; border-color: transparent; box-shadow: 0 0 14px rgba(224, 40, 58, .55); }
html[data-theme="locker"][data-mode] .sc-live .sc-bal-num.sc-tick { animation: lk-in .6s var(--lk-spring); }

/* ---------- Calendar ---------- */
html[data-theme="locker"][data-mode] .cal .day { border-radius: 8px; background: rgba(26, 14, 12, .75); border-color: var(--lk-line); transition: transform .5s var(--lk-spring), border-color .2s; }
html[data-mode="light"][data-theme="locker"] .cal .day { background: rgba(255, 252, 247, .85); }
html[data-theme="locker"][data-mode] .cal .day:hover { transform: translateY(-3px); border-color: var(--lk-line-2); }
html[data-theme="locker"][data-mode] .cal .day .num { font: 700 12px var(--lk-mono); }
html[data-theme="locker"][data-mode] .cal .day.today { border-color: var(--lk-gold); box-shadow: 0 0 0 1px var(--lk-gold), 0 0 18px rgba(232, 171, 54, .3); }

/* ---------- Pop-ups: maroon glass cards ---------- */
html[data-theme="locker"][data-mode] .modal { background: linear-gradient(180deg, #2a1410, #140a08); border: 1px solid var(--lk-line-2); border-radius: 18px; box-shadow: 0 40px 80px -30px #000;
  transition: opacity .35s, transform .6s var(--lk-spring); }
html[data-mode="light"][data-theme="locker"] .modal { background: linear-gradient(180deg, #fffaf3, #f2ebe1); }
@starting-style { html[data-theme="locker"][data-mode] .modal { opacity: 0; transform: translateY(22px) scale(.96); } }
html[data-theme="locker"][data-mode] .modal-backdrop { background: rgba(6, 3, 2, .66); }
html[data-theme="locker"][data-mode] .login-card { border-radius: 18px; animation: lk-in .9s var(--lk-spring); }

/* ---------- The ticker along the bottom (theme-locker.js) ---------- */
.lk-ticker { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; z-index: 70; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #c4141f, #8e0f19); border-top: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 -8px 20px rgba(0, 0, 0, .5); }
.lk-ticker .lk-track { display: inline-flex; white-space: nowrap; height: 100%; align-items: center; will-change: transform; animation: lk-ticker var(--lk-dur, 60s) linear infinite; }
.lk-ticker span { font: italic 900 13px var(--lk-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; padding: 0 22px; }
.lk-ticker span b { color: #ffd48a; font-weight: 900; }
.lk-ticker span::after { content: "•"; margin-left: 44px; color: rgba(255, 255, 255, .6); }
html[data-theme="locker"][data-mode] #app-view { padding-bottom: 34px; }

/* ---------- Page entrance ---------- */
html[data-theme="locker"][data-mode] .station-main > * { animation: lk-in .7s var(--lk-ease) backwards; }
html[data-theme="locker"][data-mode] .station-main > :nth-child(2) { animation-delay: .07s; }
html[data-theme="locker"][data-mode] .station-main > :nth-child(n+3) { animation-delay: .14s; }

/* ---------- Own depth, not the shared "sculpted forms" layer (see styles.css) ---------- */
html[data-theme="locker"][data-mode]:root { --form-shadow: var(--elev); --form-lit: transparent; --form-shade: transparent; --form-cast: transparent; }
html[data-theme="locker"][data-mode]:root :is(.card, .stat, .add-card, .cal .day:not(.empty)) { transition: transform .5s var(--lk-spring), border-color .25s !important; }
html[data-theme="locker"][data-mode]:root :is(.card, .add-card):not(.station-card):hover { transform: translateY(-3px) !important; }
html[data-theme="locker"][data-mode]:root .station-grid > .station-card {
  transition: transform .7s var(--lk-spring), box-shadow .4s !important;
  box-shadow: inset 0 18px 40px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 30px 50px -26px rgba(0, 0, 0, .95) !important;
}
html[data-mode="light"][data-theme="locker"]:root .station-grid > .station-card { box-shadow: inset 0 18px 40px rgba(60, 30, 10, .12), 0 26px 44px -26px rgba(60, 30, 10, .5) !important; }
html[data-theme="locker"][data-mode]:root .station-grid > .station-card:hover {
  transform: perspective(1000px) rotateX(var(--lk-rx, 0deg)) rotateY(var(--lk-ry, 0deg)) translateY(-4px) !important;
  box-shadow: inset 0 18px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 197, 112, .25), 0 40px 60px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(232, 171, 54, .3) !important;
}
html[data-theme="locker"][data-mode]:root :is(.btn, .tab, .seg button) { transition: transform .4s var(--lk-spring), border-color .25s, background-color .25s, color .25s !important; }
html[data-theme="locker"][data-mode]:root .btn:active { transform: scale(.95) !important; }
html[data-theme="locker"][data-mode]:root .btn.primary { box-shadow: 0 10px 22px -10px rgba(232, 171, 54, .7), inset 0 1px 0 rgba(255, 255, 255, .5) !important; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  html[data-theme="locker"][data-mode] .station-grid > .station-card { padding-left: 48px; }
  .lk-room .lk-beam { display: none; }
}

/* ---------- Stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="locker"] *, html[data-theme="locker"] *::before, html[data-theme="locker"] *::after, .lk-room *, .lk-ticker * { animation: none !important; transition: none !important; }
}


/* ---------- Pointers: this theme's own arrow, and a ring for anything you can press (the shared rule in
   styles.css reads --cur-hand everywhere and keeps the I-beam in text fields) ---------- */
html[data-theme="locker"] { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 L4 24 L9.6 18.6 L13.6 27 L17.4 25.4 L13.6 17.2 L21 17.2 Z' fill='%23e8ab36' stroke='%232a1704' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3; }
html[data-theme="locker"] :is(a, button, .btn, [role="button"], .tab, select, summary, label, .station-card, .add-card, .cal .day:not(.empty), .chip, input[type="checkbox"], input[type="radio"], input[type="range"]) { --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='8' fill='rgba(20,10,6,.55)' stroke='%23e8ab36' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23e0283a'/%3E%3C/svg%3E") 16 16; }


/* ---------- Selected segment / tab / pill: the theme's pill colour with text that reads on it, in light and dark
   (the shared style puts white text on --grad-primary, which vanishes on a light pill) ---------- */
html[data-theme="locker"][data-mode] :is(.seg button.active, .tab.active, .pill.active) { background: var(--grad-primary); color: #1c0f05; text-shadow: none; }