/* =====================================================================
   Tiltless — colour themes + glass styles (Settings → Appearance)
   <html data-accent="…" data-glass="…" data-theme="dark|light">
   Every accent colour in the app reads these variables; the aurora
   background and the tint of the glass cards follow the theme too.
   ===================================================================== */
:root {
  /* Ocean (default) */
  --ac-rgb: 6, 182, 212;   --purple: #06b6d4;
  --ac2-rgb: 34, 211, 238; --accent-2: #22d3ee;
  --accent-light: #67e8f9; --accent-deep: #0891b2; --accent-text: #a5f3fc; --accent-ink: #ffffff;
  --purple-soft: rgba(var(--ac-rgb), 0.16);
  --aur-1: var(--ac-rgb); --aur-2: 139, 92, 246; --aur-3: 52, 211, 153;
  /* glass */
  --glass-rgb: 18, 22, 30; --glass-a: 0.54; --glass-blur: 22px;
  --gb-rgb: 255, 255, 255; --gb-a: 0.09;
  --glass: rgba(var(--glass-rgb), var(--glass-a));
  --glass-strong: rgba(var(--glass-rgb), min(1, calc(var(--glass-a) + 0.2)));
  --glass-border: rgba(var(--gb-rgb), var(--gb-a));
}
html[data-theme="light"] {
  --glass-rgb: 255, 255, 255; --glass-a: 0.66;
  --gb-rgb: 15, 23, 42; --gb-a: 0.08;
  --accent-text: var(--accent-deep);
}

/* ---------- colour themes (dark values; light mode keeps its light surfaces) ---------- */
html[data-accent="emerald"] { --ac-rgb: 16, 185, 129; --purple: #10b981; --ac2-rgb: 52, 211, 153; --accent-2: #34d399; --accent-light: #6ee7b7; --accent-deep: #047857; --accent-text: #a7f3d0; --aur-2: 20, 184, 166; --aur-3: 132, 204, 22; --glass-rgb: 12, 26, 22; --gb-rgb: 52, 211, 153; --gb-a: 0.12; --bg: #070e0b; --sidebar-bg: #08110d; }
html[data-accent="violet"] { --ac-rgb: 139, 92, 246; --purple: #8b5cf6; --ac2-rgb: 167, 139, 250; --accent-2: #a78bfa; --accent-light: #c4b5fd; --accent-deep: #6d28d9; --accent-text: #ddd6fe; --aur-2: 217, 70, 239; --aur-3: 99, 102, 241; --glass-rgb: 22, 16, 38; --gb-rgb: 167, 139, 250; --gb-a: 0.13; --bg: #0b0812; --sidebar-bg: #0d0a16; }
html[data-accent="sunset"] { --ac-rgb: 249, 115, 22; --purple: #f97316; --ac2-rgb: 251, 146, 60; --accent-2: #fb923c; --accent-light: #fdba74; --accent-deep: #c2410c; --accent-text: #fed7aa; --aur-2: 244, 63, 94; --aur-3: 245, 158, 11; --glass-rgb: 32, 18, 14; --gb-rgb: 251, 146, 60; --gb-a: 0.12; --bg: #100a08; --sidebar-bg: #130c09; }
html[data-accent="rose"] { --ac-rgb: 244, 63, 94; --purple: #f43f5e; --ac2-rgb: 251, 113, 133; --accent-2: #fb7185; --accent-light: #fda4af; --accent-deep: #be123c; --accent-text: #fecdd3; --aur-2: 236, 72, 153; --aur-3: 168, 85, 247; --glass-rgb: 32, 14, 22; --gb-rgb: 251, 113, 133; --gb-a: 0.12; --bg: #10080c; --sidebar-bg: #130a0e; }
html[data-accent="gold"] { --ac-rgb: 234, 179, 8; --purple: #eab308; --ac2-rgb: 250, 204, 21; --accent-2: #facc15; --accent-light: #fde047; --accent-deep: #a16207; --accent-text: #fef08a; --accent-ink: #1a1405; --aur-2: 249, 115, 22; --aur-3: 250, 204, 21; --glass-rgb: 28, 24, 12; --gb-rgb: 250, 204, 21; --gb-a: 0.12; --bg: #0e0c06; --sidebar-bg: #110e07; }
html[data-accent="ice"] { --ac-rgb: 56, 189, 248; --purple: #38bdf8; --ac2-rgb: 125, 211, 252; --accent-2: #7dd3fc; --accent-light: #bae6fd; --accent-deep: #0369a1; --accent-text: #e0f2fe; --accent-ink: #04121c; --aur-2: 186, 230, 253; --aur-3: 99, 102, 241; --glass-rgb: 20, 30, 42; --gb-rgb: 186, 230, 253; --gb-a: 0.16; --glass-blur: 24px; --bg: #080c12; --sidebar-bg: #0a0f16; }
html[data-accent="midnight"] { --ac-rgb: 99, 102, 241; --purple: #6366f1; --ac2-rgb: 129, 140, 248; --accent-2: #818cf8; --accent-light: #a5b4fc; --accent-deep: #4338ca; --accent-text: #c7d2fe; --aur-2: 59, 130, 246; --aur-3: 139, 92, 246; --glass-rgb: 14, 16, 38; --gb-rgb: 129, 140, 248; --gb-a: 0.13; --bg: #070814; --sidebar-bg: #090a18; }
html[data-accent="graphite"] { --ac-rgb: 229, 231, 235; --purple: #e5e7eb; --ac2-rgb: 243, 244, 246; --accent-2: #f3f4f6; --accent-light: #ffffff; --accent-deep: #4b5563; --accent-text: #f3f4f6; --accent-ink: #111827; --aur-1: 148, 163, 184; --aur-2: 100, 116, 139; --aur-3: 203, 213, 225; --glass-rgb: 22, 22, 24; --bg: #0a0a0b; --sidebar-bg: #0c0c0d; }

/* light mode: same colours, softer glass tint; a very light accent needs a dark one */
html[data-theme="light"][data-accent="emerald"] { --glass-rgb: 240, 253, 248; --gb-a: 0.2; }
html[data-theme="light"][data-accent="violet"] { --glass-rgb: 247, 245, 255; --gb-a: 0.2; }
html[data-theme="light"][data-accent="sunset"] { --glass-rgb: 255, 249, 243; --gb-a: 0.2; }
html[data-theme="light"][data-accent="rose"] { --glass-rgb: 255, 245, 247; --gb-a: 0.2; }
html[data-theme="light"][data-accent="gold"] { --glass-rgb: 254, 252, 238; --gb-a: 0.24; }
html[data-theme="light"][data-accent="ice"] { --glass-rgb: 243, 250, 255; --gb-a: 0.3; }
html[data-theme="light"][data-accent="midnight"] { --glass-rgb: 244, 245, 255; --gb-a: 0.2; }
html[data-theme="light"][data-accent="graphite"] { --ac-rgb: 31, 41, 55; --purple: #1f2937; --ac2-rgb: 75, 85, 99; --accent-2: #4b5563; --accent-deep: #111827; --accent-ink: #ffffff; }
html[data-theme="light"][data-accent] { --bg: #f3f4f8; --sidebar-bg: #ffffff; }

/* ---------- glass styles ---------- */
html[data-glass="clear"] { --glass-a: 0.34; --glass-blur: 26px; }
html[data-glass="solid"] { --glass-a: 0.96; --glass-blur: 0px; }
html[data-theme="light"][data-glass="clear"] { --glass-a: 0.42; }
html[data-theme="light"][data-glass="solid"] { --glass-a: 0.98; }

/* text on accent backgrounds */
.primary-btn, .primary-btn:hover:not(:disabled) { color: var(--accent-ink); }

/* ---------- Settings → appearance pickers ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.theme-sw { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; transition: transform .15s var(--ease-out), border-color .2s, box-shadow .2s; }
.theme-sw:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.theme-sw.active { border-color: var(--sw); box-shadow: 0 0 0 1px var(--sw) inset, 0 10px 26px -14px var(--sw); }
.theme-sw.active::after { content: "✓"; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: var(--sw); }
.sw-prev { position: relative; height: 62px; border-radius: 10px; overflow: hidden; background: var(--swbg); }
.sw-prev::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60px 50px at 20% 20%, var(--sw), transparent 70%), radial-gradient(70px 50px at 90% 100%, var(--sw2), transparent 70%); opacity: .75; }
.sw-prev i { position: absolute; left: 12px; right: 12px; bottom: 9px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sw-prev i::before { content: ""; position: absolute; left: 8px; top: 9px; width: 36%; height: 7px; border-radius: 4px; background: var(--sw); }
.theme-sw b { font-size: 12.5px; padding: 0 2px 2px; }
.pref-col { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); }

/* =====================================================================
   Glass 2.0 — light-catching gradient edge, soft top sheen, a whisper of
   frost grain and depth tinted with the theme colour. Text contrast is
   untouched (the grain is ~4% and the sheen fades out by 40% height).
   ===================================================================== */
:root {
  --edge-hi: rgba(255, 255, 255, 0.24); --edge-lo: rgba(255, 255, 255, 0.035);
  --sheen: rgba(255, 255, 255, 0.05);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-theme="light"] {
  --edge-hi: rgba(255, 255, 255, 1); --edge-lo: rgba(15, 23, 42, 0.07);
  --sheen: rgba(255, 255, 255, 0.55);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-glass="solid"] { --grain: none; --sheen: rgba(255, 255, 255, 0.02); }

.card {
  background: var(--grain), linear-gradient(180deg, var(--sheen), transparent 40%), var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 22px 44px -30px rgba(0, 0, 0, 0.8), 0 34px 70px -52px rgba(var(--ac-rgb), 0.45);
}
html[data-theme="light"] .card { box-shadow: inset 0 1px 0 var(--glass-hi), 0 20px 40px -30px rgba(15, 23, 42, 0.3), 0 30px 60px -48px rgba(var(--ac-rgb), 0.45); }
/* gradient edge: bright where the light hits (top-left), tinted with the theme at the far corner */
.card::after, .auth-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, var(--edge-hi), var(--edge-lo) 34%, var(--edge-lo) 64%, rgba(var(--ac-rgb), 0.38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0.9; transition: opacity 0.25s;
}
@media (hover: hover) { .card:hover::after { opacity: 1; } }
@media (max-width: 860px) { .card::after { opacity: 0.6; } }

/* =====================================================================
   Scrollbars — slim, rounded, tinted with the theme colour
   (Chrome/Edge/Safari use ::-webkit-scrollbar; Firefox gets the thin
   standard one in the same colours)
   ===================================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--ac-rgb), 0.28); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; transition: background-color .2s; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--ac-rgb), 0.55); border-width: 2px; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: rgba(var(--ac-rgb), 0.75); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(var(--ac-rgb), 0.35); background-clip: padding-box; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(var(--ac-rgb), 0.45) transparent; }
}

/* =====================================================================
   Premium 4K pass — deeper colour, glass 3.0, crisp hairlines
   ===================================================================== */
/* hairlines: one device pixel on Retina / 4K screens */
:root { --hair: 1px; }
@media (min-resolution: 2dppx) { :root { --hair: 0.5px; } }

/* dark palette with a cool blue undertone (Ocean); the other themes keep their own background */
/* (glass alpha/blur defaults live in :root above, so the Clear/Solid picker and per-theme tints still win) */
html[data-theme="dark"] {
  --surface: #0f1117; --surface-2: #14161d;
  --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.12);
  --text: #eef1f8; --text-dim: #a2a9b9; --text-muted: #747b8f;
}
html[data-theme="dark"]:not([data-accent]), html[data-theme="dark"][data-accent="ocean"] {
  --bg: #05070c; --sidebar-bg: #070a11; --glass-rgb: 14, 19, 29;
}
html[data-theme="dark"] body { background: radial-gradient(140% 90% at 50% -25%, rgba(var(--ac-rgb), 0.1), transparent 55%) 0 0 / 100% 100vh no-repeat, var(--bg); }

/* aurora: four soft lights + a vignette and film grain over the whole page */
body::before {
  background:
    radial-gradient(42vmax 42vmax at 14% 8%, rgba(var(--aur-1), 0.2), transparent 62%),
    radial-gradient(36vmax 36vmax at 88% 14%, rgba(var(--aur-2), 0.16), transparent 62%),
    radial-gradient(46vmax 46vmax at 70% 108%, rgba(var(--aur-3), 0.12), transparent 62%),
    radial-gradient(30vmax 30vmax at 38% 58%, rgba(var(--ac2-rgb), 0.05), transparent 60%);
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--grain), radial-gradient(125% 125% at 50% 35%, transparent 55%, rgba(0, 0, 0, 0.5)); }
html[data-theme="light"] body::after { background: var(--grain); }

/* glass 3.0: specular corner, top sheen, frost grain, layered depth, hairline rim */
.card {
  border-width: var(--hair);
  background:
    var(--grain),
    radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, 0.055), transparent 46%),
    linear-gradient(180deg, var(--sheen), transparent 38%),
    var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  box-shadow:
    inset 0 var(--hair) 0 rgba(255, 255, 255, 0.08),
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 12px 26px -16px rgba(0, 0, 0, 0.7),
    0 44px 90px -56px rgba(0, 0, 0, 0.95),
    0 36px 80px -62px rgba(var(--ac-rgb), 0.55);
}
html[data-theme="light"] .card {
  background: var(--grain), radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, 0.7), transparent 50%), var(--glass);
  box-shadow: inset 0 var(--hair) 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.06), 0 14px 30px -18px rgba(15, 23, 42, 0.25), 0 30px 60px -48px rgba(var(--ac-rgb), 0.45);
}
.card::after, .auth-card::after { padding: var(--hair); background: linear-gradient(150deg, var(--edge-hi), var(--edge-lo) 32%, var(--edge-lo) 66%, rgba(var(--ac-rgb), 0.45)); }
.auth-card, .modal, .dlg { border-width: var(--hair); box-shadow: inset 0 var(--hair) 0 rgba(255, 255, 255, 0.08), 0 30px 80px -30px rgba(0, 0, 0, 0.85), 0 40px 90px -60px rgba(var(--ac-rgb), 0.55); }

/* buttons: three-stop gradient, inner highlight, coloured glow */
.primary-btn { background: linear-gradient(135deg, var(--accent-2), var(--purple) 45%, var(--accent-deep)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 26px -12px rgba(var(--ac-rgb), 0.9); }
.primary-btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-light), var(--accent-2) 40%, var(--purple)); }

/* page titles get a soft metallic fade in dark mode */
html[data-theme="dark"] #page-title { background: linear-gradient(180deg, #ffffff 30%, #b7c0d6); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* big screens (1440p / 4K): keep content at a readable width, centred */
@media (min-width: 1900px) { .topbar, .content { width: 100%; max-width: 1880px; margin-inline: auto; } }
@media (min-width: 2400px) { .topbar, .content { max-width: 2160px; } }

/* phones keep the light-weight surface (no blur) for smooth scrolling */
@media (max-width: 860px) {
  .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--grain), linear-gradient(180deg, var(--sheen), transparent 38%), color-mix(in srgb, var(--surface) 94%, transparent); }
}

/* crisp vector icons in the sidebar (were text glyphs) */
.nav-icon svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active .nav-icon svg { stroke-width: 1.95; }
#collapse-btn .chev { transform-box: fill-box; transform-origin: center; transition: transform 0.25s var(--ease-out); }
#app-shell.collapsed #collapse-btn .chev { transform: scaleX(-1); }

/* progress tracks (goal ring, bars) need to read on the deeper glass */
.goal-track { stroke: color-mix(in srgb, var(--text) 9%, transparent); }
.bar-track { background: color-mix(in srgb, var(--text) 8%, transparent); }
.lvl-bar, .tc-bar, .ses-bar { background: color-mix(in srgb, var(--text) 8%, transparent); }
.goal-ring-empty { border-color: color-mix(in srgb, var(--text) 9%, transparent); }
.tc-ring { background: conic-gradient(var(--accent-2) calc(var(--xp) * 1turn), color-mix(in srgb, var(--text) 9%, transparent) 0); }

/* phone tab bar: same vector icons */
.mobile-nav button span { display: inline-block; line-height: 0; }
.mobile-nav span svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-nav .mobile-add span svg { stroke-width: 2.4; }

/* Tiltless: the app logo is the level */
.brand-logo { background: url(/favicon.svg) center / contain no-repeat; border-radius: 0; transform: none; box-shadow: none; filter: drop-shadow(0 0 10px rgba(163, 230, 53, .35)); }
.brand:hover .brand-logo { transform: rotate(-8deg); }

/* =====================================================================
   Stats as one smooth glass strip (were five separate boxes): hairline
   dividers between the numbers, one accent line on top, no lift on hover.
   Same for the Insights KPI row and the owner console stats.
   ===================================================================== */
:root { --strip-line: rgba(255, 255, 255, 0.07); }
html[data-theme="light"] { --strip-line: rgba(15, 23, 42, 0.08); }
.stat-grid { gap: 0; position: relative; isolation: isolate; overflow: hidden; border-radius: calc(var(--radius) + 2px);
  border: var(--hair, 1px) solid var(--glass-border);
  background: var(--grain), radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, 0.055), transparent 46%), linear-gradient(180deg, var(--sheen), transparent 38%), var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%); backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  box-shadow: inset 0 var(--hair, 1px) 0 rgba(255, 255, 255, 0.08), 0 1px 1px rgba(0, 0, 0, 0.35), 0 12px 26px -16px rgba(0, 0, 0, 0.7), 0 44px 90px -56px rgba(0, 0, 0, 0.95), 0 36px 80px -62px rgba(var(--ac-rgb), 0.5); }
.stat-grid::before { content: ""; position: absolute; z-index: 1; left: 8%; right: 8%; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--ac-rgb), 0.6), transparent); }
.stat-grid > .stat-card { background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: -1px 0 0 var(--strip-line), 0 -1px 0 var(--strip-line); transition: background-color 0.25s ease; }
.stat-grid > .stat-card::before, .stat-grid > .stat-card::after { display: none; }
@media (hover: hover) { .stat-grid > .stat-card:hover { transform: none; background: rgba(255, 255, 255, 0.025); border-color: transparent; box-shadow: -1px 0 0 var(--strip-line), 0 -1px 0 var(--strip-line); } }
html[data-theme="light"] .stat-grid { background: var(--grain), radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, 0.7), transparent 50%), var(--glass); box-shadow: inset 0 var(--hair, 1px) 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 23, 42, 0.06), 0 14px 30px -18px rgba(15, 23, 42, 0.25); }
html[data-theme="light"] .stat-grid > .stat-card { background: none; box-shadow: -1px 0 0 var(--strip-line), 0 -1px 0 var(--strip-line); }
@media (max-width: 860px) { .stat-grid { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--grain), linear-gradient(180deg, var(--sheen), transparent 38%), color-mix(in srgb, var(--surface) 94%, transparent); } }
/* every box a touch softer: quieter edges so the cards blend into the page */
.card::after, .auth-card::after { opacity: 0.6; }
@media (hover: hover) { .card:hover::after { opacity: 0.85; } }

/* the level logo is drawn in the theme's own colours (no more green logo on a blue theme) */
.brand-logo { background: none; border-radius: 0; transform: none; box-shadow: none; filter: drop-shadow(0 0 9px rgba(var(--ac-rgb), 0.45)); }
.tl-mark { display: block; width: 100%; height: 100%; overflow: visible; }
.tl-mark .tlm-body { fill: #1a1f26; stroke: url(#tl-acc); stroke-width: 3; }
.tl-mark .tlm-vial { fill: url(#tl-acc); }
.tl-mark .tlm-marks { stroke: #1a1f26; stroke-width: 1.6; fill: none; }

/* =====================================================================
   Airy (dark): a deep night sky behind everything, lighter frosted glass
   that lets the light through, a brighter top edge and soft lifted shadows,
   so the cards seem to float. Light theme and the glass picker unchanged.
   ===================================================================== */
:root { --glass-a: 0.42; --glass-blur: 30px; --edge-hi: rgba(255, 255, 255, 0.34); --sheen: rgba(255, 255, 255, 0.075); }
html[data-theme="dark"] body {
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(var(--ac-rgb), 0.16), transparent 60%) 0 0 / 100% 100vh no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 62%, #1b2c48) 0, var(--bg) 100vh) 0 0 / 100% 100vh no-repeat,
    var(--bg);
}
body::before {
  background:
    radial-gradient(46vmax 46vmax at 12% 6%, rgba(var(--aur-1), 0.26), transparent 62%),
    radial-gradient(40vmax 40vmax at 90% 10%, rgba(var(--aur-2), 0.2), transparent 62%),
    radial-gradient(52vmax 52vmax at 70% 110%, rgba(var(--aur-3), 0.15), transparent 62%),
    radial-gradient(38vmax 30vmax at 42% 50%, rgba(125, 211, 252, 0.075), transparent 66%),
    radial-gradient(34vmax 22vmax at 55% -4%, rgba(255, 255, 255, 0.06), transparent 70%);
}
body::after { background: var(--grain), radial-gradient(135% 135% at 50% 28%, transparent 62%, rgba(0, 0, 0, 0.3)); }
html[data-theme="dark"] .card, html[data-theme="dark"] .stat-grid {
  background: var(--grain),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.012) 62%),
    radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, 0.06), transparent 46%),
    var(--glass);
  box-shadow: inset 0 var(--hair, 1px) 0 rgba(255, 255, 255, 0.13), 0 1px 1px rgba(0, 0, 0, 0.22), 0 26px 50px -30px rgba(0, 0, 0, 0.55), 0 34px 80px -44px rgba(var(--ac-rgb), 0.3);
}
html[data-theme="dark"] .stat-grid > .stat-card { background: none; box-shadow: -1px 0 0 var(--strip-line), 0 -1px 0 var(--strip-line); }
html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008)), color-mix(in srgb, var(--sidebar-bg) 52%, transparent); border-right-color: rgba(255, 255, 255, 0.06); }
@media (max-width: 860px) {
  html[data-theme="dark"] .card, html[data-theme="dark"] .stat-grid { background: var(--grain), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01) 60%), color-mix(in srgb, var(--surface) 86%, transparent); }
  html[data-theme="dark"] .stat-grid > .stat-card { background: none; }
}