/* Direction: midnight karaoke lounge — deep purple, electric cyan, neon magenta, lavender */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #140a2b;
  --surface: #1e1140;
  --surface-2: #2a1859;
  --border: #3b2a75;
  --border-strong: #5b546b;
  --ink: #f5f1ff;
  --muted: #b8a8ea;
  --accent: #22d3ee;
  --accent-hover: #43daf1;
  --accent-ink: #140a2b;
  --accent-text: #67e8f9;
  --accent-strong: #22d3ee;
  --accent-soft: #123a52;
  --accent-border: #1a6483;
  --success: #34d399;
  --success-ink: #ffffff;
  --success-soft: #1b3643;
  --success-strong: #34d399;
  --warning: #fbbf24;
  --warning-ink: #ffffff;
  --warning-soft: #473229;
  --warning-strong: #fbbf24;
  --danger: #ff4fa3;
  --danger-ink: #ffffff;
  --danger-soft: #481945;
  --danger-strong: #ff4fa3;
  --chart-1: #22d3ee;
  --chart-2: #bcb3fd;
  --chart-3: #d483c9;
  --chart-4: #fea290;
  --chart-5: #bf9d26;
  --chart-6: #76d692;

  --x-magenta: #ff2fb9;
  --x-cyan: #22d3ee;
  --x-lav: #c4b5fd;
  --gradient-neon: linear-gradient(120deg, #ff2fb9 0%, #8b5cf6 50%, #22d3ee 100%);
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --display-tracking: -0.02em;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f4;
  --border: #dedde1;
  --border-strong: #b9b6bf;
  --ink: #140a2b;
  --muted: #726c80;
  --accent: #22d3ee;
  --accent-hover: #1db3ca;
  --accent-ink: #140a2b;
  --accent-text: #137684;
  --accent-strong: #137684;
  --accent-soft: #e0f9fd;
  --accent-border: #9cebf7;
  --success: #34d399;
  --success-ink: #140a2b;
  --success-soft: #e7faf3;
  --success-strong: #1d7656;
  --warning: #fbbf24;
  --warning-ink: #140a2b;
  --warning-soft: #fff7e5;
  --warning-strong: #8d6b14;
  --danger: #ff4fa3;
  --danger-ink: #140a2b;
  --danger-soft: #ffeaf4;
  --danger-strong: #b73975;
  --chart-1: #07a3b9;
  --chart-2: #768ce1;
  --chart-3: #a55a9c;
  --chart-4: #dd7765;
  --chart-5: #8e7313;
  --chart-6: #45a263;
}

body { background: var(--canvas); }
.app-bg {
  background:
    radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--x-magenta) 18%, transparent), transparent 60%),
    radial-gradient(700px 500px at 0% 10%, color-mix(in srgb, var(--x-cyan) 12%, transparent), transparent 60%),
    var(--canvas);
}
/* sidebar */
.sidebar { position: fixed; inset: 0 auto 0 0; width: 16rem; z-index: 40; display: flex; flex-direction: column; padding: 1.25rem 1rem;
  background: color-mix(in srgb, var(--canvas) 88%, var(--surface)); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto; }
.sidebar.open { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.6); }
@media (min-width: 1024px) { .sidebar { transform: none; } .page { margin-left: 16rem; } .topbar { display: none; } }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; padding: .25rem .5rem 1.25rem; color: var(--ink); }
.brand .icon { width: 1.7rem; height: 1.7rem; color: var(--x-magenta); filter: drop-shadow(0 0 8px var(--x-magenta)); }
.brand b { background: var(--gradient-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.nav-link { display: flex; align-items: center; gap: .75rem; padding: .65rem .8rem; border-radius: 12px; color: var(--muted); font-weight: 500; transition: background .15s, color .15s; }
.nav-link:hover { background: color-mix(in srgb, var(--x-lav) 10%, transparent); color: var(--ink); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nav-link.active { color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--x-magenta) 28%, transparent), color-mix(in srgb, var(--x-cyan) 10%, transparent)); box-shadow: inset 3px 0 0 var(--x-magenta); }
.nav-link.active .icon { color: var(--x-cyan); }
.side-foot { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--canvas); border-bottom: 1px solid var(--border); }
/* cards, stats */
.card { background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 55%, var(--surface)), var(--surface)); border: 1px solid var(--border); }
.stat { position: relative; overflow: hidden; padding: 1.1rem 1.2rem; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); transition: transform .2s, border-color .2s; }
.stat:hover { transform: translateY(-2px); border-color: var(--x-cyan); }
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--tone, var(--x-cyan)); opacity: .16; filter: blur(14px); }
.stat .icon { color: var(--tone, var(--x-cyan)); }
.stat-val { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin-top: .5rem; }
.tone-mag { --tone: var(--x-magenta); } .tone-cyan { --tone: var(--x-cyan); } .tone-lav { --tone: var(--x-lav); } .tone-green { --tone: var(--success); } .tone-amber { --tone: var(--warning); }
.neon-text { background: var(--gradient-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* pills */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--t, var(--c)); }
.pill::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.c-cyan { --c: var(--x-cyan); --t: var(--accent-strong); } .c-mag { --c: var(--x-magenta); --t: var(--danger-strong); } .c-green { --c: var(--success); --t: var(--success-strong); } .c-amber { --c: var(--warning); --t: var(--warning-strong); } .c-lav { --c: var(--x-lav); --t: var(--muted); }
.demo-tag { font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 6px; color: var(--x-lav); border: 1px dashed var(--border); margin-left: .4rem; vertical-align: middle; }
/* tables */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
.tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: .75rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.tbl td { padding: .75rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--x-cyan) 6%, transparent); }
.tbl a.lnk { color: var(--accent-text); font-weight: 600; } .tbl a.lnk:hover { text-decoration: underline; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* flash */
.flash { display: flex; gap: .6rem; align-items: center; padding: .75rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-weight: 500; border: 1px solid; }
.flash-ok { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.flash-err { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
/* charts */
.chart-cols { display: flex; gap: .3rem; height: 12rem; align-items: stretch; }
.chart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.chart-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart-bar { width: 100%; max-width: 2.2rem; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--x-cyan), color-mix(in srgb, var(--x-cyan) 25%, var(--surface-2))); transition: filter .2s, height .6s ease; }
.chart-bar.hl { background: linear-gradient(180deg, var(--x-magenta), color-mix(in srgb, var(--x-magenta) 25%, var(--surface-2))); box-shadow: 0 0 14px color-mix(in srgb, var(--x-magenta) 50%, transparent); }
.chart-col:hover .chart-bar { filter: brightness(1.25); }
.chart-val { font-size: .62rem; color: var(--muted); height: .9rem; white-space: nowrap; }
.chart-lab { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hbar { height: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.hbar > i { display: block; height: 100%; border-radius: 999px; background: var(--gradient-neon); }
/* room tiles / agenda */
.room-tile { padding: 1rem; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: border-color .2s, transform .2s; display: block; }
.room-tile:hover { border-color: var(--x-magenta); transform: translateY(-2px); }
.room-tile:focus-visible { outline: 2px solid var(--accent); }
.agenda-day { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: .75rem; min-height: 7rem; }
.agenda-day.today { border-color: var(--x-magenta); box-shadow: 0 0 18px color-mix(in srgb, var(--x-magenta) 25%, transparent); }
.agenda-item { display: block; padding: .4rem .5rem; margin-top: .4rem; border-radius: 8px; font-size: .78rem; background: color-mix(in srgb, var(--c, var(--x-cyan)) 14%, transparent); border-left: 3px solid var(--c, var(--x-cyan)); }
.agenda-item:hover { filter: brightness(1.2); }
.equip { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--muted); padding: .1rem .5rem; border-radius: 8px; background: var(--surface-2); }
.equip .icon { width: .8rem; height: .8rem; }
.queue-item { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.queue-item.now { border-color: var(--x-magenta); box-shadow: 0 0 18px color-mix(in srgb, var(--x-magenta) 30%, transparent); }
.queue-n { width: 1.8rem; height: 1.8rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: var(--surface); color: var(--x-cyan); }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.glow-card { border-radius: 24px; padding: 2rem; background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--border); box-shadow: 0 0 60px color-mix(in srgb, var(--x-magenta) 20%, transparent), 0 0 120px color-mix(in srgb, var(--x-cyan) 10%, transparent); }
.btn { transition: transform .12s, box-shadow .2s, filter .2s; }
.btn:not(.btn-ghost):not(.btn-outline):hover { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn:active { transform: scale(.97); }
.calc-out { padding: .75rem 1rem; border-radius: 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--x-cyan) 40%, transparent); color: var(--accent-text); font-weight: 600; }
html.reduced-motion * { transition: none !important; }