:root {
  --neo-border: #000000;
  --neo-shadow: #000000;
  --neo-bg: #f4f0ea;
  --neo-surface: #ffffff;
  --neo-ink: #000000;
  --neo-primary: #ffe600;
  --neo-secondary: #00f0ff;
  --neo-danger: #ff3366;
  --neo-tertiary: #ff9b35;
  --neo-muted: #3b3b3b;
}

:root[data-mode="dark"] {
  --neo-bg: #121214;
  --neo-surface: #1e1e22;
  --neo-ink: #f3f4f6;
  --neo-primary: #ccff00;
  --neo-secondary: #00e5ff;
  --neo-danger: #ff2a5f;
  --neo-tertiary: #ffb000;
  --neo-border: #f3f4f6;
  --neo-shadow: #000000;
  --neo-muted: #c4c5cc;
}

:root[data-palette="retro"][data-mode="light"] {
  --neo-bg: #fff3e0;
  --neo-surface: #fffcf8;
  --neo-ink: #0d0d0d;
  --neo-primary: #ff90e8;
  --neo-secondary: #23a6f0;
  --neo-danger: #e33b70;
  --neo-tertiary: #ffc700;
  --neo-border: #0d0d0d;
  --neo-shadow: #0d0d0d;
  --neo-muted: #453f49;
}

:root[data-palette="retro"][data-mode="dark"] {
  --neo-bg: #18151d;
  --neo-surface: #231f2a;
  --neo-ink: #f3f4f6;
  --neo-primary: #ff66d8;
  --neo-secondary: #38bdf8;
  --neo-danger: #ff5a81;
  --neo-tertiary: #ffd000;
  --neo-border: #f3f4f6;
  --neo-shadow: #000000;
  --neo-muted: #d4cedb;
}

html, body { background: var(--neo-bg); color: var(--neo-ink); }
body { background-image: radial-gradient(var(--neo-secondary) 1px, transparent 1px); background-size: 17px 17px; letter-spacing: -.01em; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 5px, currentColor 6px); mix-blend-mode: overlay; }
.app-shell { background: transparent; }
.sidebar { background: var(--neo-surface); border-right: 3px solid var(--neo-border); box-shadow: 5px 0 0 var(--neo-shadow); z-index: 2; }
.brand { color: var(--neo-ink); font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: -.045em; line-height: .82; text-transform: uppercase; }
.brand em { color: var(--neo-ink); font-family: 'DM Mono', monospace; font-size: .82rem; letter-spacing: .12em; }
.brand-mark { width: 2.65rem; height: 2.65rem; color: var(--neo-ink); background: var(--neo-primary); border: 3px solid var(--neo-border); border-radius: 0; box-shadow: 3px 3px 0 var(--neo-shadow); font: 700 .66rem/1 'DM Mono', monospace; }
.nav-item { border: 2px solid transparent; border-radius: 0; color: var(--neo-ink); font-weight: 700; }
.nav-item span { color: inherit; }
.nav-item:hover, .nav-item.active { background: var(--neo-secondary); color: #000; border-color: var(--neo-border); box-shadow: 3px 3px 0 var(--neo-shadow); }
.nav-item.active { box-shadow: 3px 3px 0 var(--neo-shadow); }
.sidebar-foot { border-top: 2px solid var(--neo-border); }
.status-dot, .text-button { color: var(--neo-ink); font-weight: 700; }
.status-dot:before { background: var(--neo-danger); box-shadow: none; border: 1px solid var(--neo-border); }
main { max-width: 115rem; }
.topbar { align-items: center; border-bottom: 3px solid var(--neo-border); padding-bottom: 1.25rem; }
.eyebrow { color: var(--neo-ink); font-weight: 700; letter-spacing: .12em; }
h1, h2, h3 { color: var(--neo-ink); font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-weight: 500; letter-spacing: -.025em; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); text-shadow: 3px 3px 0 var(--neo-primary); }
.top-actions { flex-wrap: wrap; justify-content: flex-end; }
.session-chip { color: var(--neo-ink); background: var(--neo-surface); border: 2px solid var(--neo-border); border-radius: 0; box-shadow: 3px 3px 0 var(--neo-shadow); font-weight: 700; }
.style-controls, .palette-toggle { display: flex; gap: .35rem; align-items: stretch; }
.style-toggle, .palette-toggle button { border: 2px solid var(--neo-border); border-radius: 0; background: var(--neo-surface); color: var(--neo-ink); padding: .55rem .65rem; font: 700 .71rem/1 'DM Mono', monospace; text-transform: uppercase; box-shadow: 3px 3px 0 var(--neo-shadow); }
.style-toggle:hover, .palette-toggle button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--neo-shadow); }
.palette-toggle button[aria-pressed="true"] { background: var(--neo-secondary); color: #000; }
.style-toggle { background: var(--neo-primary); color: #000; }
.spotify-button, .primary-button, .secondary-button { border: 3px solid var(--neo-border); border-radius: 0; box-shadow: 4px 4px 0 var(--neo-shadow); font-weight: 800; color: var(--neo-ink); }
.spotify-button { background: var(--neo-secondary); color: #000; }
.primary-button { background: var(--neo-primary); color: #000; }
.secondary-button { background: var(--neo-surface); }
.spotify-button:hover, .primary-button:hover, .secondary-button:hover { transform: translate(-2px, -2px); filter: none; box-shadow: 6px 6px 0 var(--neo-shadow); }
.spotify-button:active, .primary-button:active, .secondary-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--neo-shadow); }
.panel, .pool-card, .track-table { background: var(--neo-surface); color: var(--neo-ink); border: 3px solid var(--neo-border); border-radius: 0; box-shadow: 6px 6px 0 var(--neo-shadow); }
.panel { box-shadow: 6px 6px 0 var(--neo-shadow); }
.pool-card { background: var(--neo-primary); color: #000; }
.pool-card .eyebrow, .pool-card p:last-child { color: #000; }
.pool-card strong { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: -.08em; }
.choice-card { background: var(--neo-surface); border: 3px solid var(--neo-border); border-radius: 0; color: var(--neo-ink); }
.choice-card.selected, .choice-card.selected strong { background: var(--neo-primary); border-color: var(--neo-border); box-shadow: 4px 4px 0 var(--neo-shadow); color: #000 !important; }
.choice-card small, .muted, .now-playing p:not(.eyebrow), .pool-card p:last-child { color: var(--neo-muted); }
.pool-card p:last-child { color: #000; }
.choice-card.selected small { color: #111; }
.choice-icon { background: var(--neo-secondary); color: #000; border: 2px solid var(--neo-border); border-radius: 0; }
input, select, textarea { background: var(--neo-surface); border: 2px solid var(--neo-border); border-radius: 0; color: var(--neo-ink); box-shadow: 2px 2px 0 var(--neo-shadow); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--neo-secondary); outline-offset: 2px; }
.chip-label span { background: var(--neo-surface); border: 2px solid var(--neo-border); border-radius: 0; color: var(--neo-ink); font-weight: 700; }
.chip-label input:checked + span { background: var(--neo-secondary); border-color: var(--neo-border); color: #000; box-shadow: 2px 2px 0 var(--neo-shadow); }
.toggle { background: var(--neo-surface); border: 2px solid var(--neo-border); border-radius: 0; }
.toggle:after { background: var(--neo-ink); border-radius: 0; }
.toggle-row input:checked + .toggle { background: var(--neo-primary); }
.rounds select { font-weight: 700; }
.flow-list li { font-weight: 700; }
.flow-list b { color: var(--neo-danger); }
.now-playing { background: var(--neo-surface); }
.round-badge { background: var(--neo-secondary); border: 2px solid var(--neo-border); border-radius: 0; color: #000; font-weight: 700; }
.record { background: repeating-radial-gradient(circle, var(--neo-ink) 0 1px, var(--neo-surface) 3px 7px); border: 3px solid var(--neo-border); box-shadow: 6px 6px 0 var(--neo-shadow); }
.record:after { background: var(--neo-primary); box-shadow: inset 0 0 0 .7rem var(--neo-danger); }
.record-label { color: #000; font-weight: 700; }
.lyric-prompt { color: var(--neo-ink); border-left: 5px solid var(--neo-danger); background: var(--neo-primary); padding: .8rem; }
.round-tabs button { background: var(--neo-surface); color: var(--neo-ink); border: 2px solid var(--neo-border); border-radius: 0; font-weight: 700; }
.round-tabs button.active { background: var(--neo-primary); color: #000; border-color: var(--neo-border); }
.called-item, .bingo-cell, .export-card { background: var(--neo-surface); border: 2px solid var(--neo-border); border-radius: 0; color: var(--neo-ink); }
.bingo-cell.called, .bingo-cell.free { background: var(--neo-secondary); border-color: var(--neo-border); }
.bingo-cell:before { color: var(--neo-muted); font-weight: 700; }
.bingo-cell.called:after, .bingo-cell.free:after { color: #000; }
.validity-tag { background: var(--neo-surface); border: 2px solid var(--neo-border); border-radius: 0; color: var(--neo-ink); }
.validity-tag.valid { background: var(--neo-primary); border-color: var(--neo-border); color: #000; }
.progress-copy, .form-message, .field-preview code, code { color: var(--neo-ink); font-weight: 700; }
.track-row { border-bottom: 2px solid var(--neo-border); }
.track-row.head { background: var(--neo-primary); color: #000; font-weight: 800; }
.category-tags span { background: var(--neo-secondary); color: #000; border: 1px solid var(--neo-border); border-radius: 0; }
.hard-flag { color: var(--neo-danger); font-weight: 800; }
.settings-dialog form { background: var(--neo-surface); border: 3px solid var(--neo-border); border-radius: 0; color: var(--neo-ink); box-shadow: 8px 8px 0 var(--neo-shadow); }
.settings-dialog::backdrop { background: #000b; }
#toast { background: var(--neo-primary); border: 3px solid var(--neo-border); border-radius: 0; color: #000; box-shadow: 5px 5px 0 var(--neo-shadow); }

@media (max-width: 900px) {
  .sidebar { border-right: 0; border-bottom: 3px solid var(--neo-border); box-shadow: 0 4px 0 var(--neo-shadow); }
  .topbar { align-items: flex-start; }
}
@media (max-width: 570px) {
  .top-actions { justify-content: flex-start; }
  .style-controls { order: 3; width: 100%; }
  .style-toggle, .palette-toggle { flex: 1; }
  .palette-toggle button { flex: 1; }
  .brand { font-size: .86rem; }
  .brand-mark { width: 2.1rem; height: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }