/* Console — the portal as a piece of hardware.
   A textured charcoal chassis over a dot grid; panels with bevelled edges; numbers in recessed black screens with
   green LCD labels; an elegant serif for titles that fades from white to grey; pill controls; a floating frosted
   pill header; station cards as pastel folder-tab cards; calendar days as tactile keys that press in; LED dots that
   glow. All motion stops under prefers-reduced-motion. */

/* ---------- Palette ---------- */
html[data-theme="console"] {
  color-scheme: dark;
  --cn-lcd: #a3ee79; --cn-lime: #e3f2b4; --cn-chassis: #1f2021; --cn-screen: #0d0d0d; --cn-hair: rgba(255, 255, 255, .06);
  --tint: #a3ee79; --accent: #a3ee79; --accent-2: #b0b7bc; --accent-3: #e8a99a;
  --font: "Inter", system-ui, sans-serif;
  --cn-serif: "Instrument Serif", "EB Garamond", Georgia, serif;
  --cn-mono: "DM Mono", ui-monospace, "SF Mono", monospace;
  --bg: #171818; --panel: #1f2021; --panel-2: #262729; --border: #2e3033;
  --text: #f2f2f0; --muted: #808289; --input-bg: #0d0d0d; --link: #a3ee79;
  --green: #a3ee79; --red: #ff7a6b; --amber: #f2c86b; --orange: #ef9a6a;
  --radius: 20px; --radius-btn: 999px; --radius-input: 10px;
  --surface: linear-gradient(180deg, #232425, #1c1d1e); --surface-border-color: rgba(255, 255, 255, .06);
  --grad-brand: linear-gradient(90deg, #a3ee79, #e3f2b4);
  --grad-primary: linear-gradient(180deg, #24331c, #1a2614);
  --grad-primary-hover: linear-gradient(180deg, #2d4022, #20301a);
  --grad-success: linear-gradient(180deg, #24331c, #1a2614);
  --grad-danger: linear-gradient(180deg, #4a2320, #36191a);
  --grad-warn: linear-gradient(180deg, #4a3a1c, #362a14);
  --grad-info: linear-gradient(180deg, #2a3440, #1e262f);
  --btn-soft: linear-gradient(180deg, #2c2d30, #232427);
  --btn-soft-hover: linear-gradient(180deg, #34363a, #2a2b2e);
  --app-bg: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.4px) 0 0 / 22px 22px, #171818;
  --elev: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -2px 0 rgba(0, 0, 0, .45), 0 24px 46px -26px rgba(0, 0, 0, .9);
  --shadow: 0 24px 46px -26px rgba(0, 0, 0, .9);
  --shadow-glow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(163, 238, 121, .22), 0 18px 40px -20px rgba(0, 0, 0, .9);
  --glow1: rgba(163, 238, 121, .035); --glow2: rgba(255, 255, 255, .02); --glow-blend: screen;
  --cn-recess: inset 0 2px 6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05);
  --cn-title: linear-gradient(180deg, #ffffff 30%, #9a9ca1);
}
html[data-theme="console"][data-mode="light"] {
  color-scheme: light;
  --cn-lcd: #3c8a1c; --cn-chassis: #e6e4de; --cn-screen: #f8f7f3; --cn-hair: rgba(20, 22, 24, .08);
  --accent: #3c8a1c; --link: #2f7413; --tint: #3c8a1c; --accent-2: #5b6168; --accent-3: #b8604b;
  --bg: #dedcd5; --panel: #ecebe6; --panel-2: #e3e1db; --border: #cfccc4;
  --text: #151617; --muted: #6a6d72; --input-bg: #f8f7f3;
  --green: #2f7413; --red: #b33a2c; --amber: #8a6200; --orange: #a5502a;
  --surface: linear-gradient(180deg, #f0efea, #e6e4de); --surface-border-color: rgba(20, 22, 24, .08);
  --grad-primary: linear-gradient(180deg, #1f2a19, #141c10); --grad-primary-hover: linear-gradient(180deg, #2a3822, #1a2414);
  --btn-soft: linear-gradient(180deg, #f6f5f1, #e8e6e0); --btn-soft-hover: linear-gradient(180deg, #ffffff, #eeece6);
  --app-bg: radial-gradient(rgba(20, 22, 24, .09) 1px, transparent 1.4px) 0 0 / 22px 22px, #dedcd5;
  --elev: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .08), 0 20px 40px -26px rgba(40, 40, 30, .45);
  --shadow-glow: inset 0 1px 0 #fff, 0 0 0 1px rgba(60, 138, 28, .25), 0 16px 34px -22px rgba(40, 40, 30, .5);
  --glow1: rgba(60, 138, 28, .05); --glow2: rgba(0, 0, 0, .02); --glow-blend: multiply;
  --cn-recess: inset 0 2px 5px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 0 #fff;
  --cn-title: linear-gradient(180deg, #151617 30%, #6a6d72);
}

/* ---------- Motion ---------- */
@keyframes cn-led { 0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--cn-lcd), 0 0 14px color-mix(in srgb, var(--cn-lcd) 60%, transparent); } 50% { opacity: .55; box-shadow: 0 0 3px var(--cn-lcd); } }
@keyframes cn-on { 0% { opacity: 0; } 18% { opacity: .9; } 26% { opacity: .3; } 40% { opacity: 1; } 52% { opacity: .7; } 100% { opacity: 1; } }
@keyframes cn-in { from { opacity: 0; } }

/* ---------- Page ---------- */
html[data-theme="console"][data-mode] body { background: var(--app-bg); background-attachment: fixed; }
html[data-theme="console"][data-mode] ::selection { background: var(--cn-lcd); color: #0d0d0d; }
html[data-theme="console"][data-mode] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="console"][data-mode] ::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 999px; border: 2px solid var(--bg); }

/* ---------- Header: a floating frosted pill ---------- */
html[data-theme="console"][data-mode] .topbar {
  position: sticky; top: 10px; z-index: 40; margin: 10px 14px 0; border-radius: 999px; padding: 8px 10px 8px 18px;
  background: color-mix(in srgb, var(--panel) 72%, transparent); border: 1px solid var(--cn-hair);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -18px rgba(0, 0, 0, .8);
}
html[data-theme="console"][data-mode="light"] .topbar { box-shadow: inset 0 1px 0 #fff, 0 12px 28px -18px rgba(40, 40, 30, .45); }
html[data-theme="console"][data-mode] .brand {
  font-family: var(--cn-serif); font-weight: 400; font-size: 23px; letter-spacing: -.01em; font-style: italic;
  background: var(--cn-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="console"][data-mode] :is(.crumb, .crumb-back, .topbar .btn) { border-radius: 999px; }
html[data-theme="console"][data-mode] .crumb.current {
  background: var(--btn-soft); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px -6px rgba(0, 0, 0, .6);
}
html[data-theme="console"][data-mode] .cn-status {
  display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 6px 12px; border-radius: 999px;
  background: var(--cn-screen); box-shadow: var(--cn-recess);
  font-family: var(--cn-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cn-lcd); white-space: nowrap;
}
html[data-theme="console"][data-mode] .cn-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--cn-lcd); animation: cn-led 2.4s ease-in-out infinite; }
html[data-theme="console"][data-mode] .cn-status b { font-weight: 500; color: color-mix(in srgb, var(--cn-lcd) 55%, var(--muted)); }
@media (max-width: 760px) { html[data-theme="console"][data-mode] .cn-status { display: none; } html[data-theme="console"][data-mode] .topbar { border-radius: 24px; } }

/* ---------- Titles: serif, white fading to grey ---------- */
html[data-theme="console"][data-mode] :is(h1, h2) { font-family: var(--cn-serif); font-weight: 400; letter-spacing: -.015em; }
html[data-theme="console"][data-mode] .section-head h2 {
  font-size: clamp(36px, 4.2vw, 64px); line-height: 1; margin: 6px 0 2px;
  background: var(--cn-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="console"][data-mode] :is(h3, h4) { font-family: var(--font); font-weight: 600; letter-spacing: -.01em; }
/* small labels read like the device's LCD captions */
html[data-theme="console"][data-mode] :is(.stat .label, .cal .dow, table th, .sc-bal-label, .meta) {
  font-family: var(--cn-mono); letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Panels: the chassis ---------- */
html[data-theme="console"][data-mode] .card {
  background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: var(--radius); box-shadow: var(--elev);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
html[data-theme="console"][data-mode] .card::before { display: none; }
html[data-theme="console"][data-mode] .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
html[data-theme="console"][data-mode] .add-card {
  background: transparent; border: 1.5px dashed color-mix(in srgb, var(--text) 18%, transparent); box-shadow: none;
  font-family: var(--cn-serif); font-size: 22px; color: var(--muted);
}
html[data-theme="console"][data-mode] .add-card:hover { color: var(--text); border-color: var(--cn-lcd); }

/* numbers sit in recessed black screens */
html[data-theme="console"][data-mode] .stat { background: var(--cn-screen); border: 0; border-radius: 14px; box-shadow: var(--cn-recess); }
html[data-theme="console"][data-mode] .stat .label { font-size: 10px; color: var(--cn-lcd); opacity: .85; }
html[data-theme="console"][data-mode] .stat .value { font-family: var(--cn-serif); font-weight: 400; font-size: 32px; letter-spacing: -.01em; animation: cn-on .9s steps(1, end) backwards; }
html[data-theme="console"][data-mode] .month-bar .title { font-family: var(--cn-serif); font-weight: 400; font-size: 26px; font-style: italic; }

/* ---------- Buttons: pills you press ---------- */
html[data-theme="console"][data-mode] .btn {
  border-radius: 999px; border: 1px solid var(--cn-hair); background: var(--btn-soft); color: var(--text); font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px -6px rgba(0, 0, 0, .7);
  transition: transform .12s, box-shadow .12s, background .2s, color .2s;
}
html[data-theme="console"][data-mode="light"] .btn { box-shadow: inset 0 1px 0 #fff, 0 3px 8px -6px rgba(40, 40, 30, .5); }
html[data-theme="console"][data-mode] .btn:hover { background: var(--btn-soft-hover); transform: none; }
html[data-theme="console"][data-mode] .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55); }
html[data-theme="console"][data-mode] .btn.primary {
  background: var(--grad-primary); color: #b8f58f; border: 1px solid rgba(163, 238, 121, .22);
  font-family: var(--cn-serif); font-size: 17px; font-weight: 400; letter-spacing: 0; padding-left: 20px; padding-right: 20px;
  box-shadow: inset 0 1px 0 rgba(163, 238, 121, .14), 0 10px 26px -14px rgba(163, 238, 121, .45);
}
html[data-theme="console"][data-mode] .btn.primary:hover { background: var(--grad-primary-hover); color: #d4ffb8; }
html[data-theme="console"][data-mode] .btn.small.primary { font-size: 15px; }
html[data-theme="console"][data-mode] .btn.success { color: #b8f58f; }
html[data-theme="console"][data-mode] .btn.danger { color: #ffb0a6; }
html[data-theme="console"][data-mode] .btn.warn { color: #f6d78f; }
html[data-theme="console"][data-mode] .btn.info { color: #c9d6e2; }
html[data-theme="console"][data-mode] .btn.ghost { background: transparent; box-shadow: none; border-color: transparent; }

/* ---------- Inputs: recessed wells ---------- */
html[data-theme="console"][data-mode] :is(input, select, textarea) {
  background: var(--cn-screen); border: 1px solid transparent; border-radius: var(--radius-input); color: var(--text); box-shadow: var(--cn-recess);
}
html[data-theme="console"][data-mode] :is(input, select, textarea):focus { border-color: color-mix(in srgb, var(--cn-lcd) 60%, transparent); box-shadow: var(--cn-recess), 0 0 0 3px color-mix(in srgb, var(--cn-lcd) 18%, transparent); }

/* ---------- Tables: an LCD readout ---------- */
html[data-theme="console"][data-mode] table th { font-size: 10px; color: var(--cn-lcd); font-weight: 500; background: transparent; border-bottom: 1px dashed color-mix(in srgb, var(--text) 16%, transparent); }
html[data-theme="console"][data-mode] table td { border-bottom: 1px solid var(--cn-hair); font-variant-numeric: tabular-nums; }
html[data-theme="console"][data-mode] table tbody tr:hover { background: color-mix(in srgb, var(--cn-lcd) 5%, transparent); }

/* ---------- Station page: pages as a column of lit keys ---------- */
html[data-theme="console"][data-mode] :is(.station-rail-left, .station-rail-right) {
  background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: 24px; box-shadow: var(--elev);
}
html[data-theme="console"][data-mode] .tabs:not(.station-tabs-v) .tab.active {
  background: var(--btn-soft); color: var(--text); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 14px -8px rgba(0, 0, 0, .8);
}
html[data-theme="console"][data-mode] .tabs .tab { border-radius: 999px; }

/* ---------- Station pages: a keypad on the chassis ---------- */
html[data-theme="console"][data-mode] .station-rail-left { padding: 14px 12px 14px; }
html[data-theme="console"][data-mode] .station-rail-left::before {
  content: "Pages"; display: flex; align-items: center; justify-content: space-between; margin: 0 4px 12px; padding: 0 0 10px;
  font-family: var(--cn-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px dashed color-mix(in srgb, var(--text) 14%, transparent);
  background: radial-gradient(circle, var(--cn-lcd) 2.2px, transparent 2.8px) right 0 top 3px / 8px 8px no-repeat,
              radial-gradient(circle, color-mix(in srgb, var(--text) 22%, transparent) 2.2px, transparent 2.8px) right 11px top 3px / 8px 8px no-repeat,
              radial-gradient(circle, color-mix(in srgb, var(--text) 22%, transparent) 2.2px, transparent 2.8px) right 22px top 3px / 8px 8px no-repeat;
}
html[data-theme="console"][data-mode] .tabs.station-tabs-v { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key {
  position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 70px; padding: 10px 6px 9px !important; text-align: center; border-radius: 14px; border: 1px solid var(--cn-hair);
  background: var(--btn-soft); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .4), 0 6px 12px -8px rgba(0, 0, 0, .8);
  transition: transform .1s, box-shadow .12s, background .2s, color .2s;
}
html[data-theme="console"][data-mode="light"] .station-tabs-v .tab.cn-key { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .08), 0 5px 10px -8px rgba(40, 40, 30, .6); }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key::before { display: none; }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key:hover { background: var(--btn-soft-hover); transform: translateY(-1px); }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key:active { transform: translateY(1px); }
html[data-theme="console"][data-mode] .station-tabs-v .cn-ico { font-size: 19px; line-height: 1; filter: grayscale(.35); transition: filter .2s, transform .2s; }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key:hover .cn-ico { filter: none; transform: scale(1.08); }
html[data-theme="console"][data-mode] .station-tabs-v .cn-key .cn-lbl {
  font-family: var(--cn-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; line-height: 1.25;
  color: var(--muted); max-width: 100%; overflow-wrap: anywhere;
}
/* the page you're on: pressed in, its LED lit */
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key.active {
  background: var(--cn-screen); border-color: transparent; box-shadow: var(--cn-recess);
}
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key.active .cn-lbl { color: var(--cn-lcd); }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key.active .cn-ico { filter: none; }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key.active::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--cn-lcd); animation: cn-led 2.4s ease-in-out infinite;
}
/* Fuel and Tickets: full-width switches that open a screen of sub-pages */
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-key.cn-group { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; min-height: 46px; gap: 10px; padding: 8px 14px !important; }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-group .cn-lbl { font-size: 10.5px; }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-group > .muted { margin-left: auto; font-family: var(--cn-mono); color: var(--muted); }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-group.active::after { top: 50%; margin-top: -3px; right: 30px; }
html[data-theme="console"][data-mode] .station-tabs-v .station-submenu {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1px; margin: -2px 0 2px; padding: 8px; border-radius: 14px;
  background: var(--cn-screen) radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.4px) 0 0 / 10px 10px; box-shadow: var(--cn-recess);
  animation: cn-in .25s ease-out;
}
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-sub {
  display: flex !important; align-items: center; gap: 8px; padding: 6px 8px 6px 22px !important; border-radius: 8px; border: 0; background: transparent;
  box-shadow: none !important; position: relative;   /* a shared tab bevel would otherwise draw a box round every row */ font-family: var(--cn-mono); font-size: 11px; letter-spacing: .03em; color: var(--muted);
}
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-sub .cn-ico { font-size: 12px; }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-sub::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: color-mix(in srgb, var(--text) 16%, transparent);
}
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-sub:hover { color: var(--text); background: rgba(255, 255, 255, .04); transform: none; }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-sub.active { color: var(--cn-lcd); background: color-mix(in srgb, var(--cn-lcd) 8%, transparent); font-weight: 500; }
html[data-theme="console"][data-mode] .station-tabs-v .tab.cn-sub.active::before { background: var(--cn-lcd); animation: cn-led 2.4s ease-in-out infinite; }
@media (max-width: 980px) {
  html[data-theme="console"][data-mode] .tabs.station-tabs-v { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* ---------- Calendar: days as tactile keys ---------- */
html[data-theme="console"][data-mode] .cal .dow { font-size: 10px; color: var(--muted); }
html[data-theme="console"][data-mode] .cal .day {
  background: var(--surface); border: 1px solid var(--surface-border-color); border-radius: 16px; box-shadow: var(--elev);
  transition: transform .12s, box-shadow .12s;
}
html[data-theme="console"][data-mode] .cal .day:hover { transform: none; box-shadow: var(--shadow-glow); }
html[data-theme="console"][data-mode] .cal .day:active { transform: translateY(1px); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6); }
html[data-theme="console"][data-mode] .cal .day.empty { background: transparent; box-shadow: none; border: 0; }
html[data-theme="console"][data-mode] .cal .day .num { font-family: var(--cn-serif); font-weight: 400; font-size: 22px; line-height: 1; }
html[data-theme="console"][data-mode] .cal .day.today { background: var(--surface); box-shadow: var(--elev), 0 0 0 1.5px color-mix(in srgb, var(--cn-lcd) 70%, transparent); }
html[data-theme="console"][data-mode] .cal .day.today .num { color: var(--cn-lcd); font-size: 24px; }
html[data-theme="console"][data-mode] .cal .day.today::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--cn-lcd); animation: cn-led 2.4s ease-in-out infinite;
}
html[data-theme="console"][data-mode] .cal .day .badge { border-radius: 999px; font-family: var(--cn-mono); font-size: 10px; }

/* ---------- Dashboard: pastel folder cards, each with a black screen ---------- */
html[data-theme="console"][data-mode] .station-card {
  --cn-folder: #d6f0a4; --cn-ink: #1b1d17;
  background: var(--cn-folder); color: var(--cn-ink); border: 0; border-radius: 22px; overflow: visible; margin-top: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 28px 50px -28px rgba(0, 0, 0, .9);
}
html[data-theme="console"][data-mode] .station-grid > .station-card:nth-child(6n+2) { --cn-folder: #c9b1a3; }
html[data-theme="console"][data-mode] .station-grid > .station-card:nth-child(6n+3) { --cn-folder: #a995b4; }
html[data-theme="console"][data-mode] .station-grid > .station-card:nth-child(6n+4) { --cn-folder: #9cc8e8; }
html[data-theme="console"][data-mode] .station-grid > .station-card:nth-child(6n+5) { --cn-folder: #e8a99a; }
html[data-theme="console"][data-mode] .station-grid > .station-card:nth-child(6n+6) { --cn-folder: #8fc59c; }
/* the folder's tab, top right */
html[data-theme="console"][data-mode] .station-card::before {
  display: block; content: ""; position: absolute; top: -16px; right: 0; left: auto; width: 40%; height: 30px; opacity: 1;
  background: color-mix(in srgb, var(--cn-folder) 82%, #ffffff); border-radius: 14px 14px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); z-index: -1;
}
html[data-theme="console"][data-mode] .station-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 34px 60px -26px rgba(0, 0, 0, .95); }
html[data-theme="console"][data-mode] .station-card h3 { font-family: var(--font); font-weight: 600; font-size: 26px; letter-spacing: -.02em; color: var(--cn-ink); }
html[data-theme="console"][data-mode] .station-card h3::after { content: "°"; font-weight: 400; font-size: .6em; vertical-align: super; margin-left: 3px; }
html[data-theme="console"][data-mode] .station-card :is(.meta, .ov-l) { color: color-mix(in srgb, var(--cn-ink) 62%, transparent); }
html[data-theme="console"][data-mode] .station-card .ov-v { color: var(--cn-ink); }
html[data-theme="console"][data-mode] .station-card .sc-badge { background: rgba(0, 0, 0, .1); color: var(--cn-ink); border: 0; border-radius: 999px; font-family: var(--cn-mono); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
html[data-theme="console"][data-mode] .station-card .sc-owed { background: rgba(0, 0, 0, .08); border: 0; color: color-mix(in srgb, var(--cn-ink) 70%, transparent); font-family: var(--cn-mono); }
html[data-theme="console"][data-mode] .station-card .sc-owed b { color: var(--cn-ink); }
html[data-theme="console"][data-mode] .station-card .sc-owed.owe b { color: #8a2a1e; }
html[data-theme="console"][data-mode] .station-card .sc-rows { border-top-color: rgba(0, 0, 0, .12); }
html[data-theme="console"][data-mode] .station-card .gp { background: rgba(0, 0, 0, .08); border: 0; color: var(--cn-ink); font-family: var(--cn-mono); }
html[data-theme="console"][data-mode] .sc-balance.sc-live {
  background: #0d0d0d; border: 0; border-radius: 16px; padding: 16px 16px 12px; margin: 16px 0 14px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .3);
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px); background-size: 12px 12px;
}
html[data-theme="console"][data-mode] .sc-live .sc-bal-num {
  font-family: var(--cn-serif); font-weight: 400; font-size: 40px; letter-spacing: -.01em; line-height: 1;
  background: linear-gradient(180deg, #ffffff 35%, #9a9ca1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: cn-on .9s steps(1, end) backwards;
}
html[data-theme="console"][data-mode] .sc-live .sc-bal-suffix { font-family: var(--cn-mono); font-size: 12px; -webkit-text-fill-color: #a3ee79; color: #a3ee79; letter-spacing: .08em; }
html[data-theme="console"][data-mode] .sc-live .sc-bal-label { color: #a3ee79; font-size: 10px; margin-top: 6px; }
html[data-theme="console"][data-mode] .sc-spark rect { fill: rgba(163, 238, 121, .28); }
html[data-theme="console"][data-mode] .sc-spark rect.now { fill: #a3ee79; filter: drop-shadow(0 0 4px rgba(163, 238, 121, .9)); }
html[data-theme="console"][data-mode] .sc-spark.store rect { fill: rgba(176, 183, 188, .3); }
html[data-theme="console"][data-mode] .sc-spark.store rect.now { fill: #e3f2b4; }
html[data-theme="console"][data-mode] .sc-live .sc-day { color: #808289; font-family: var(--cn-mono); font-size: 10.5px; letter-spacing: .04em; border-top: 1px dashed rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 8px; }
html[data-theme="console"][data-mode] .sc-live .sc-day::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: #a3ee79; animation: cn-led 2.4s ease-in-out infinite; }
html[data-theme="console"][data-mode] .sc-live .sc-bal-num.sc-tick { animation: cn-on .9s steps(1, end); }

/* ---------- Toasts, modals, chips, login, Save dock ---------- */
html[data-theme="console"][data-mode] :is(.badge, .chip) { border-radius: 999px; }
html[data-theme="console"][data-mode] .toast {
  background: #0d0d0d; color: #e9eae6; border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px;
  font-family: var(--cn-mono); font-size: 12.5px; letter-spacing: .02em; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9);
}
html[data-theme="console"][data-mode] .toast::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #a3ee79; vertical-align: 1px; animation: cn-led 2.4s ease-in-out infinite; }
html[data-theme="console"][data-mode] :is(.toast.err, .toast.error)::before { background: #ff7a6b; }
html[data-theme="console"][data-mode] .modal { background: var(--surface); border: 1px solid var(--cn-hair); border-radius: 26px; box-shadow: var(--elev), 0 40px 90px -30px rgba(0, 0, 0, .9); animation: cn-in .25s ease-out; }
html[data-theme="console"][data-mode] .modal > h3 { font-family: var(--cn-serif); font-weight: 400; font-size: 28px; }
html[data-theme="console"][data-mode] .login-card { border-radius: 28px; }
html[data-theme="console"][data-mode] .login-card::before { display: none; }
html[data-theme="console"][data-mode] .shift-save-dock {
  border-radius: 999px; background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--cn-hair);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 7px 8px 7px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -16px rgba(0, 0, 0, .85);
}
html[data-theme="console"][data-mode] .shift-save-dock > span { font-family: var(--cn-mono); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; color: var(--muted); }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  html[data-theme="console"][data-mode] .section-head h2 { font-size: clamp(30px, 9vw, 44px); }
  html[data-theme="console"][data-mode] .month-bar { flex-wrap: wrap; }
  html[data-theme="console"][data-mode] .month-bar .title { min-width: 0; }
  html[data-theme="console"][data-mode] .topbar { margin: 8px 8px 0; }
}

/* ---------- Stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="console"] *, html[data-theme="console"] *::before, html[data-theme="console"] *::after { 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="console"] { --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='%230d0d0d' stroke='%23a3ee79' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3; }
html[data-theme="console"] :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(13,13,13,.6)' stroke='%23a3ee79' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23a3ee79'/%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="console"][data-mode] :is(.seg button.active, .tab.active, .pill.active) { background: var(--grad-primary); color: #f2fbe6; text-shadow: none; }