/* ===== Kwoter AI · themeable design system (3 presets × light/dark) ===== */
/* v2 "cinema" pass (ui-ux-pro-max): deep gradient canvas + film-grain, neutral hairline
   borders, real glass panels with a lit top edge, 20px card radius, Space Grotesk display,
   styled scrollbars, global focus-visible ring. All class contracts unchanged. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{
  color-scheme:light;
  /* midnight — light (default) */
  --bg:#f7f7fb;
  --bg-grid:rgba(79,70,229,.05);
  --aurora-1:rgba(49,46,129,.20);
  --aurora-2:rgba(129,140,248,.18);
  --aurora-3:rgba(99,102,241,.16);
  --panel:rgba(255,255,255,.88);
  --panel-strong:#ffffff;
  --border:rgba(255,255,255,.9);
  --hair:#e2e1f5;
  --text-1:#100f1c;
  --text-2:#5c5a78;
  --text-3:#8f8ca8;
  --chip:rgba(255,255,255,.7);
  --hover:rgba(79,70,229,.07);
  --accent:#4f46e5;
  --accent-bg:#eef0ff;
  --soft:0 1px 2px rgba(16,15,28,.04), 0 8px 24px -10px rgba(16,15,28,.10);
  --field:#ffffff;
  --field-border:#c9c7ea;
  --ring:rgba(79,70,229,.18);
  --btn-a:#312e81; --btn-b:#4f46e5;
  --grad-a:#312e81; --grad-b:#4f46e5;
  --active-text:#ffffff;
  --glow:rgba(79,70,229,.45);
  --blur:18px;
  --radius-card:20px;
  --edge:rgba(255,255,255,.65); /* lit top edge on glass panels */
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Space Grotesk',var(--font-sans);
  /* semantic stat colours — constant across every theme preset, used only to
     differentiate DATA (KPIs, chart series, progress rows), never for branding/UI chrome */
  --stat-1:#3b82f6; --stat-2:#22c55e; --stat-3:#f59e0b; --stat-4:#a855f7; --stat-5:#ec4899; --stat-6:#06b6d4;
  /* status banners (ok/warn/danger) — derived from the stat palette so they follow the system */
  --ok:#166534; --ok-bg:color-mix(in srgb, var(--stat-2) 14%, var(--panel-strong));
  --warn:#92400e; --warn-bg:color-mix(in srgb, var(--stat-3) 16%, var(--panel-strong));
  --danger-base:#ef4444;
  --danger:#b91c1c; --danger-bg:color-mix(in srgb, var(--danger-base) 14%, var(--panel-strong));
}
.dark{
  color-scheme:dark;
  /* midnight — dark ("cinema": neutral near-black canvas, electric indigo→cyan accents) */
  --bg:#050507;
  --bg-grid:rgba(129,140,248,.08);
  --aurora-1:rgba(59,54,160,.42);
  --aurora-2:rgba(103,232,249,.10);
  --aurora-3:rgba(99,102,241,.26);
  --panel:rgba(13,13,16,.78); /* wallboard-neutral: near-black cards, hue lives in accents only */
  --panel-strong:#0a0a0d;
  --border:rgba(255,255,255,.07);
  --hair:rgba(255,255,255,.06);
  --text-1:#f4f4f8;
  --text-2:#a2a2b8;
  --text-3:#616175;
  --chip:rgba(255,255,255,.04);
  --hover:rgba(129,140,248,.09);
  --accent:#7b8dff;
  --accent-bg:rgba(123,141,255,.13);
  --soft:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -18px rgba(0,0,0,.7);
  --edge:rgba(255,255,255,.09);
  --field:rgba(255,255,255,.035);
  --field-border:rgba(255,255,255,.11);
  --ring:rgba(129,140,248,.25);
  --btn-a:#4f46e5; --btn-b:#7b8dff;
  --grad-a:#7b8dff; --grad-b:#67e8f9;
  --active-text:#0b0b14;
  --glow:rgba(123,141,255,.55);
  --ok:#4ade80; --ok-bg:color-mix(in srgb, var(--stat-2) 15%, transparent);
  --warn:#fbbf24; --warn-bg:color-mix(in srgb, var(--stat-3) 15%, transparent);
  --danger:#f87171; --danger-bg:color-mix(in srgb, var(--danger-base) 15%, transparent);
}

/* ── brand preset — kwoter.co.uk colours (abyss/navy/royal/electric/frost) ── */
[data-palette="brand"]{
  --bg:#f2f5fd; --bg-grid:rgba(17,109,255,.05);
  --aurora-1:rgba(67,96,207,.24); --aurora-2:rgba(94,151,255,.20); --aurora-3:rgba(17,109,255,.14);
  --panel:rgba(255,255,255,.88); --panel-strong:#ffffff; --border:rgba(255,255,255,.9); --hair:#e7ecfa;
  --text-1:#0a1233; --text-2:rgba(10,18,51,.64); --text-3:rgba(10,18,51,.44); --chip:rgba(255,255,255,.7); --hover:rgba(17,109,255,.06);
  --accent:#116dff; --accent-bg:#e7eefd; --soft:0 1px 2px rgba(10,18,51,.04), 0 8px 24px -10px rgba(10,18,51,.10);
  --field:#ffffff; --field-border:#c6d3f2; --ring:rgba(17,109,255,.18);
  --btn-a:#1e2c7b; --btn-b:#116dff; --grad-a:#1e2c7b; --grad-b:#5e97ff; --active-text:#ffffff; --glow:rgba(17,109,255,.45);
  --blur:14px;
}
[data-palette="brand"].dark{
  --bg:#050b22; --bg-grid:rgba(94,151,255,.08);
  --aurora-1:rgba(67,96,207,.50); --aurora-2:rgba(94,151,255,.26); --aurora-3:rgba(17,109,255,.32);
  --panel:rgba(13,14,20,.78); --panel-strong:#0a0b11; --border:rgba(255,255,255,.08); --hair:rgba(255,255,255,.07); --edge:rgba(255,255,255,.09);
  --text-1:#f4f7ff; --text-2:rgba(244,247,255,.72); --text-3:rgba(244,247,255,.40); --chip:rgba(255,255,255,.04); --hover:rgba(94,151,255,.10);
  --accent:#5e97ff; --accent-bg:rgba(94,151,255,.14); --soft:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -18px rgba(0,0,0,.7);
  --field:rgba(255,255,255,.035); --field-border:rgba(255,255,255,.11); --ring:rgba(94,151,255,.28);
  --btn-a:#116dff; --btn-b:#5e97ff; --grad-a:#5e97ff; --grad-b:#a8c6ff; --active-text:#050b22; --glow:rgba(94,151,255,.55);
}

/* ── ocean preset (cool blue) ── */
[data-palette="ocean"]{
  --bg:#eef4ff; --bg-grid:rgba(37,99,235,.06);
  --aurora-1:rgba(37,99,235,.28); --aurora-2:rgba(34,211,238,.26); --aurora-3:rgba(99,102,241,.20);
  --panel:rgba(255,255,255,.85); --panel-strong:#ffffff; --border:rgba(255,255,255,.9); --hair:#e7eef9;
  --text-1:#0f172a; --text-2:#64748b; --text-3:#94a3b8; --chip:rgba(255,255,255,.7); --hover:rgba(37,99,235,.06);
  --accent:#2563eb; --accent-bg:#eff6ff; --soft:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -10px rgba(15,23,42,.10);
  --field:#ffffff; --field-border:#c7d3e8; --ring:rgba(37,99,235,.18);
  --btn-a:#1e3a8a; --btn-b:#2563eb; --grad-a:#1e3a8a; --grad-b:#2563eb; --active-text:#ffffff; --glow:rgba(37,99,235,.45);
  --blur:14px;
}
[data-palette="ocean"].dark{
  --bg:#03050d; --bg-grid:rgba(56,189,248,.10);
  --aurora-1:rgba(37,99,235,.50); --aurora-2:rgba(34,211,238,.34); --aurora-3:rgba(124,58,237,.40);
  --panel:rgba(12,14,19,.78); --panel-strong:#090b10; --border:rgba(255,255,255,.08); --hair:rgba(255,255,255,.07); --edge:rgba(255,255,255,.09);
  --text-1:#eaf2ff; --text-2:#9db1d6; --text-3:#62789f; --chip:rgba(255,255,255,.04); --hover:rgba(56,189,248,.12);
  --accent:#56ccff; --accent-bg:rgba(56,189,248,.14); --soft:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -18px rgba(0,0,0,.7);
  --field:rgba(255,255,255,.035); --field-border:rgba(255,255,255,.11); --ring:rgba(56,189,248,.28);
  --btn-a:#2563eb; --btn-b:#56ccff; --grad-a:#56ccff; --grad-b:#a5e8ff; --active-text:#031830; --glow:rgba(56,189,248,.55);
}

/* ── sunset preset (warm amber/brown) ── */
[data-palette="sunset"]{
  --bg:#fdf6ec; --bg-grid:rgba(180,83,9,.06);
  --aurora-1:rgba(180,83,9,.22); --aurora-2:rgba(251,146,60,.20); --aurora-3:rgba(146,64,14,.18);
  --panel:rgba(255,255,255,.88); --panel-strong:#ffffff; --border:rgba(255,255,255,.9); --hair:#f0dfc4;
  --text-1:#2b1405; --text-2:#8a6a45; --text-3:#b79a76; --chip:rgba(255,255,255,.7); --hover:rgba(180,83,9,.07);
  --accent:#b45309; --accent-bg:#fef3e2; --soft:0 1px 2px rgba(43,20,5,.04), 0 8px 24px -10px rgba(43,20,5,.10);
  --field:#ffffff; --field-border:#e6c99a; --ring:rgba(180,83,9,.18);
  --btn-a:#78350f; --btn-b:#b45309; --grad-a:#78350f; --grad-b:#b45309; --active-text:#ffffff; --glow:rgba(180,83,9,.45);
  --blur:14px;
}
[data-palette="sunset"].dark{
  --bg:#160d05; --bg-grid:rgba(251,146,60,.10);
  --aurora-1:rgba(180,83,9,.50); --aurora-2:rgba(251,146,60,.30); --aurora-3:rgba(146,64,14,.35);
  --panel:rgba(18,14,10,.78); --panel-strong:#100c08; --border:rgba(255,255,255,.08); --hair:rgba(255,255,255,.07); --edge:rgba(255,255,255,.09);
  --text-1:#fff3e6; --text-2:#d3ab7f; --text-3:#8a6a4d; --chip:rgba(255,255,255,.04); --hover:rgba(251,146,60,.12);
  --accent:#fb923c; --accent-bg:rgba(251,146,60,.14); --soft:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -18px rgba(0,0,0,.7);
  --field:rgba(255,255,255,.035); --field-border:rgba(255,255,255,.11); --ring:rgba(251,146,60,.28);
  --btn-a:#b45309; --btn-b:#fb923c; --grad-a:#fb923c; --grad-b:#fed7aa; --active-text:#2b1405; --glow:rgba(251,146,60,.55);
}

/* ── Lovable-style entrance animations ── */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Utility animation classes (add to any element) */
.anim-fade-up{animation:fadeInUp .45s var(--ease-out-expo) both}
.anim-fade{animation:fadeIn .3s ease both}
.anim-scale{animation:scaleIn .35s var(--ease-out-expo) both}
/* stagger delays for lists of cards */
.anim-delay-1{animation-delay:.05s}
.anim-delay-2{animation-delay:.10s}
.anim-delay-3{animation-delay:.15s}
.anim-delay-4{animation-delay:.20s}
.anim-delay-5{animation-delay:.25s}

/* Form fields — flat, near-black, hairline-bordered (wallboard-neutral) */
.field{background:var(--field);border:1px solid var(--field-border);border-radius:12px;color:var(--text-1);
  font-size:15px;transition:border-color .25s ease,box-shadow .25s ease,transform .15s ease}
.field::placeholder{color:var(--text-3)}
.field:hover{border-color:var(--accent)}
.field:focus,.field:focus-within{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring);transform:translateY(-1px)}
select.field{cursor:pointer}
select option{background:var(--panel-strong);color:var(--text-1)}

html{scroll-behavior:smooth}
body.k-body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text-1);
  min-height:100vh;position:relative;
  transition:background .35s ease,color .35s ease;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.006em; /* Inter reads more "product-grade" slightly tightened */
  -webkit-font-smoothing:antialiased;
}
/* cinema canvas: a soft key-light from the top-left instead of a flat colour */
.dark body.k-body{
  background:
    radial-gradient(1100px 700px at 18% -12%, color-mix(in srgb, var(--panel-strong) 70%, var(--accent) 6%) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, var(--accent) 3%) 0%, var(--bg) 70%);
  background-attachment:fixed;
}
body.k-body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  transition:background .4s ease;
  background:
    radial-gradient(520px 520px at -8% -12%,var(--aurora-1),transparent 65%),
    radial-gradient(460px 460px at 106% -8%,var(--aurora-2),transparent 65%),
    radial-gradient(440px 440px at 35% 112%,var(--aurora-3),transparent 65%);}
/* film grain — kills banding on the gradients and reads as "premium" at a glance */
body.k-body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px}
.dark body.k-body::before{opacity:.05}

.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}

/* selection + keyboard focus carry the accent everywhere */
::selection{background:color-mix(in srgb, var(--accent) 30%, transparent)}
:where(button,a,select,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* slim, theme-aware scrollbars */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--text-3) 45%, transparent) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--text-3) 38%, transparent);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--text-3) 60%, transparent);border:3px solid transparent;background-clip:content-box}

/* ── Panels — calm, neutral elevation (Apple-style, not neon) ── */
.panel{
  background:var(--panel);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--border);
  box-shadow:var(--soft);
  border-radius:var(--radius-card)!important; /* !important beats the rounded-* Tailwind utilities still present in the JSX */
  animation:fadeInUp .45s var(--ease-out-expo) both;
  transition:box-shadow .3s ease,transform .2s ease,background .3s ease,border-color .3s ease;
}
.panel:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(0,0,0,.08)}
.panel-flat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-card)!important;transition:background .3s ease,border-color .3s ease}
.surface{background:var(--chip);border:1px solid var(--border);border-radius:14px;transition:background .3s ease,border-color .3s ease}

.t1{color:var(--text-1)} .t2{color:var(--text-2)} .t3{color:var(--text-3)}
.bd-hair{border-color:var(--hair)!important}
.divide-hair>*+*{border-top:1px solid var(--hair)}
.row-hover{transition:background .2s ease}
.row-hover:hover{background:var(--hover)}

.accent{color:var(--accent)}
.bg-accent-soft{background:var(--accent-bg)}
.banner-ok{background:var(--ok-bg);color:var(--ok);border:1px solid color-mix(in srgb, var(--ok) 25%, transparent)}
.banner-warn{background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb, var(--warn) 25%, transparent)}
.banner-danger{background:var(--danger-bg);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 25%, transparent)}
.tile{background:var(--accent-bg);color:var(--accent);border-radius:10px}

/* ── Buttons — calm by default, lift + glow only on hover/press ── */
.btn-accent{
  background:linear-gradient(135deg,var(--btn-a),var(--btn-b));
  color:var(--active-text);
  border-radius:12px;
  font-weight:500;
  transition:transform .2s var(--ease-out-expo),box-shadow .2s ease,filter .15s ease,background .3s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.btn-accent:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 8px 20px -6px var(--glow);
}
.btn-accent:active{transform:translateY(0) scale(.98);filter:brightness(.97)}

/* ── In-page tab bars (Reports, Admin, Ops, Logs, Leads, Wallboards) ── */
.nav{background:var(--chip);border:1px solid var(--border);transition:background .3s ease,border-color .3s ease}
.nav button{
  color:var(--text-2);
  border-radius:9999px;
  font-weight:500;
  transition:background .25s ease,color .25s ease,transform .15s ease,box-shadow .2s ease;
}
.nav button:hover:not(.active){
  color:var(--text-1);
  background:var(--hover);
  transform:scale(1.03);
}
button.active{
  background:var(--accent);
  color:var(--active-text);
  box-shadow:0 4px 14px -4px var(--glow);
  transform:scale(1.02);
  border-radius:9999px;
  transition:background .25s ease,color .25s ease,transform .15s ease,box-shadow .2s ease;
}

/* ── Status pills ── */
.pill-green{background:rgba(16,185,129,.14);color:#059669;border-radius:99px}
.pill-amber{background:rgba(245,158,11,.16);color:#d97706;border-radius:99px}
.pill-red{background:rgba(220,38,38,.12);color:#dc2626;border-radius:99px}
.pill-blue{background:var(--accent-bg);color:var(--accent);border-radius:99px}
.pill-mute{background:var(--chip);color:var(--text-2);border-radius:99px}

.glow{box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),0 24px 70px -22px var(--glow)}
.gradtext{background:linear-gradient(90deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent;transition:background .3s ease}
kbd{font-family:'JetBrains Mono',monospace;border-radius:6px}

/* ── Animations ported from kwoter.co.uk (brand site) — theme-colour aware ── */
@keyframes aurora-a{0%{transform:translate(-8%,-4%) scale(1)}to{transform:translate(10%,8%) scale(1.18)}}
@keyframes aurora-b{0%{transform:translate(6%,4%) scale(1.1)}to{transform:translate(-10%,-6%) scale(.92)}}
.aurora-blob{position:absolute;border-radius:9999px;filter:blur(90px);pointer-events:none;opacity:.5;z-index:0}
.aurora-blob-a{animation:aurora-a 16s ease-in-out infinite alternate;background:color-mix(in srgb, var(--accent) 32%, transparent)}
.aurora-blob-b{animation:aurora-b 21s ease-in-out infinite alternate;background:color-mix(in srgb, var(--grad-b) 26%, transparent)}

@keyframes text-shimmer{0%{background-position:-70% 0}45%,to{background-position:190% 0}}
.shimmer-word{position:relative}
.shimmer-word::after{content:attr(data-shimmer);pointer-events:none;color:transparent;position:absolute;inset:0;
  background-image:linear-gradient(110deg,transparent 40%,color-mix(in srgb, var(--accent) 45%, white) 50%,transparent 60%);
  background-size:260% 100%;background-position:-70% 0;-webkit-background-clip:text;background-clip:text;
  animation:text-shimmer 5s ease-in-out infinite}

@keyframes sheen{0%{background-position:180% 0}55%{background-position:-80% 0}to{background-position:-80% 0}}
.chip-sheen{position:relative;overflow:hidden}
.chip-sheen::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 32%,rgba(219,231,255,.28) 50%,transparent 68%) 0 0/220% 100%;
  animation:sheen 5s ease-in-out infinite}

@keyframes twinkle{0%,to{opacity:.15;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}
.twinkle-dot{position:absolute;width:4px;height:4px;border-radius:99px;background:var(--accent);animation:twinkle 4s ease-in-out infinite;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .aurora-blob-a,.aurora-blob-b,.chip-sheen::after,.twinkle-dot{animation:none}
  .shimmer-word::after{animation:none;background-image:none}
  /* entrance animations too — Motion components already respect this via MotionConfig reducedMotion */
  .panel,.anim-fade-up,.anim-fade,.anim-scale,.card-enter{animation:none!important}
}

/* ── Landing & login interactions ── */
.hero-spot{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb, var(--accent) 9%, transparent),transparent 70%);
  transition:opacity .3s ease}
.login-ring{position:relative;overflow:hidden;padding:1.5px;box-shadow:var(--soft)}
.login-ring::before{content:'';position:absolute;inset:-75%;
  background:conic-gradient(transparent 0deg,transparent 250deg,var(--accent) 310deg,transparent 360deg);
  animation:ringspin 5s linear infinite}
.login-ring>*{position:relative}
@keyframes ringspin{to{transform:rotate(360deg)}}
.login-tilt{transition:transform .25s var(--ease-out-expo);will-change:transform}
.feat-icon{transition:transform .25s var(--ease-out-expo)}
.feat-card:hover .feat-icon{transform:scale(1.1) rotate(-4deg)}

/* ── Theme switcher swatches ── */
.theme-swatch{transition:transform .2s var(--ease-out-expo),box-shadow .2s ease}
.theme-swatch:hover{transform:scale(1.08)}
.theme-swatch[data-active="true"]{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--accent)}

/* ── Dark mode polish — calm neutral elevation, not neon ── */
.dark body.k-body::after{opacity:.5} /* auroras whisper; the wallboard-neutral cards lead */
.dark .panel{
  box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent),0 20px 48px -20px rgba(0,0,0,.8);
  animation:fadeInUp .45s var(--ease-out-expo) both;
}
.dark .panel:hover{
  box-shadow:inset 0 1px 0 var(--edge),0 0 0 1px color-mix(in srgb, var(--accent) 13%, transparent),0 24px 56px -20px rgba(0,0,0,.85);
  transform:translateY(-2px);
}
/* dark pills: light-mode greens/ambers vanish on a dark canvas — lift them */
.dark .pill-green{background:rgba(52,211,153,.13);color:#34d399}
.dark .pill-amber{background:rgba(251,191,36,.14);color:#fbbf24}
.dark .pill-red{background:rgba(248,113,113,.13);color:#f87171}
/* primary buttons keep a faint resting glow so the main action reads instantly */
.dark .btn-accent{box-shadow:0 1px 2px rgba(0,0,0,.4),0 0 26px -10px var(--glow)}
.dark .surface{background:var(--chip)}
.dark .btn-accent:hover{box-shadow:0 8px 28px -6px var(--glow);transform:translateY(-2px)}
.dark .glow{box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),0 0 70px -10px var(--glow),0 36px 90px -34px rgba(0,0,0,.95)}
.dark .live{box-shadow:0 0 8px 1px currentColor;border-radius:99px}

/* ── Sidebar navigation (Apple System-Settings style) ── */
.sidebar{background:var(--panel);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-right:1px solid var(--border);transition:background .3s ease,border-color .3s ease}
.sidebar-group{background:var(--chip);border:1px solid var(--hair);border-radius:16px;padding:8px 6px;margin-bottom:12px;transition:border-color .3s ease}
.sidebar-group:hover{border-color:color-mix(in srgb, var(--accent) 22%, var(--hair))}
.sidebar-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:0 10px;margin-bottom:6px}
.sidebar-link{position:relative;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--text-2);font-weight:500;font-size:14.5px;border:1px solid transparent;overflow:hidden;margin-bottom:2px;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1)}
.sidebar-link svg,.sidebar-link img{transition:transform .25s cubic-bezier(.4,0,.2,1)}
.sidebar-link:hover{background:var(--hover);color:var(--text-1);border-color:color-mix(in srgb, var(--accent) 28%, transparent);box-shadow:0 6px 18px -10px var(--glow)}
.sidebar-link:hover svg{transform:scale(1.1)}
.sidebar-link:active{transform:scale(.97);border-radius:0}
.sidebar-link.active{background:var(--accent-bg);color:var(--accent);font-weight:600;border-color:color-mix(in srgb, var(--accent) 35%, transparent);border-radius:0}
.sidebar-link.active::before{content:"";position:absolute;left:-1px;top:50%;translate:0 -50%;width:3px;height:60%;border-radius:3px;background:var(--accent);box-shadow:0 0 8px var(--glow)}

/* ── Stat cards & bars — glass tiles with a semantic colour ACCENT (bar + corner tint),
      not full-colour slabs; the number stays high-contrast text on the panel surface ── */
.stat-card{position:relative;overflow:hidden;border-radius:18px;padding:20px;
  background:var(--panel);color:var(--text-1);
  border:1px solid color-mix(in srgb, var(--kpi,var(--accent)) 26%, var(--border));
  box-shadow:var(--soft),0 0 34px -14px color-mix(in srgb, var(--kpi,var(--accent)) 55%, transparent);
  transition:transform .2s var(--ease-out-expo),box-shadow .2s ease,border-color .2s ease}
.stat-card::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(160px 100px at 85% -12%, color-mix(in srgb, var(--kpi,var(--accent)) 16%, transparent), transparent 72%)}
.stat-card:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--kpi,var(--accent)) 48%, var(--border));
  box-shadow:var(--soft),0 0 44px -12px color-mix(in srgb, var(--kpi,var(--accent)) 70%, transparent)}
.stat-bar-track{background:var(--chip);border-radius:99px;overflow:hidden}
.stat-bar-fill{border-radius:99px;transition:width .5s var(--ease-out-expo)}

/* ── Animations ── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live{animation:pulse 1.6s infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cursor{display:inline-block;width:8px;height:1.05em;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:blink 1s step-end infinite}

/* ── Page-load stagger for dashboard cards ── */
@keyframes cardIn{
  from{opacity:0;transform:translateY(22px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.card-enter{animation:cardIn .5s var(--ease-out-expo) both}