/* Vyybe admin design system. Director-owned. Source of truth: tokens/tokens.css and the live site's glass
   (tools/index.template.html). Dark "amethyst space" is the default; light follows the site's light theme.
   Rules: glass on discrete controls, navigation, KPI tiles and the call dock; dense data (tables, forms, charts)
   sits on near-opaque panels so text keeps AA contrast. Reduced transparency / more contrast => solid surfaces. */

:root{
  --font:"General Sans","Inter",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --bg:#12061f; --bg-deep:#0b0414; --bg-glow:#2a1145;
  --panel:rgba(26,12,44,.86); --panel-solid:#1a0c2c; --panel-2:rgba(255,255,255,.05); --inset:rgba(0,0,0,.28);
  --text:#fbf8ff; --muted:#c9bfdc; --faint:#a397ba;
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.26);
  --accent:#c4b5fd; --accent-ink:#c4b5fd; --violet:#8b5cf6; --btn:#6d3fe0; --btn-deep:#5b2fd6; --on-btn:#fff;
  --ok:#86e3b0; --ok-bg:rgba(134,227,176,.14); --warn:#ffd28a; --warn-bg:rgba(255,210,138,.14);
  --bad:#ff9db0; --bad-bg:rgba(255,157,176,.14); --info:#9ccaff; --info-bg:rgba(156,202,255,.14);
  --demo:#ffd28a; --demo-bg:repeating-linear-gradient(135deg,rgba(255,210,138,.12) 0 10px,rgba(255,210,138,.04) 10px 20px);
  /* charts: categorical series (checked >=3:1 against --panel-solid) */
  --c1:#a78bfa; --c2:#5eead4; --c3:#fbbf24; --c4:#f472b6; --c5:#93c5fd; --c6:#d9f99d; --grid:rgba(255,255,255,.08);
  --g-fill:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 50%,rgba(255,255,255,.07));
  --g-line:rgba(255,255,255,.14); --g-hi:rgba(255,255,255,.5); --g-lo:rgba(255,255,255,.2); --g-glow:rgba(255,255,255,.05);
  --g-rim:linear-gradient(140deg,rgba(255,255,255,.6),rgba(255,255,255,.08) 32%,rgba(255,255,255,.03) 58%,rgba(255,255,255,.35));
  --shadow:12px 28px 36px -14px rgba(8,2,16,.5);
  --r-sm:.625rem; --r:1rem; --r-lg:1.5rem; --pill:9999px;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;
  --ease:cubic-bezier(.22,1,.36,1);
  --dock-h:0px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#ffffff; --bg-deep:#f7f3fd; --bg-glow:#efe4ff;
  --panel:rgba(255,255,255,.9); --panel-solid:#ffffff; --panel-2:rgba(124,58,237,.05); --inset:rgba(124,58,237,.06);
  --text:#1a0d2b; --muted:#4b3d63; --faint:#6b5c84;
  --line:rgba(124,58,237,.16); --line-strong:rgba(124,58,237,.34);
  --accent:#5b21b6; --accent-ink:#5b21b6; --violet:#7c3aed; --btn:#6d3fe0; --btn-deep:#5b2fd6;
  --ok:#0f6b3d; --ok-bg:rgba(16,140,80,.1); --warn:#7a4a00; --warn-bg:rgba(220,150,20,.14);
  --bad:#a1123a; --bad-bg:rgba(200,30,70,.1); --info:#0b4f9c; --info-bg:rgba(30,110,220,.1);
  --demo:#7a4a00; --demo-bg:repeating-linear-gradient(135deg,rgba(220,150,20,.14) 0 10px,rgba(220,150,20,.05) 10px 20px);
  --c1:#6d28d9; --c2:#0f766e; --c3:#b45309; --c4:#be185d; --c5:#1d4ed8; --c6:#4d7c0f; --grid:rgba(26,13,43,.1);
  --g-fill:linear-gradient(145deg,rgba(205,182,255,.4),rgba(176,140,245,.14) 50%,rgba(205,182,255,.28));
  --g-line:rgba(124,58,237,.24); --g-hi:#fff; --g-lo:rgba(124,58,237,.32); --g-glow:rgba(167,128,240,.16);
  --g-rim:linear-gradient(140deg,#fff,rgba(205,182,255,.55) 30%,rgba(124,58,237,.22) 58%,rgba(91,33,182,.7));
  --shadow:12px 24px 32px -16px rgba(91,33,182,.22);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font:400 .9375rem/1.5 var(--font);color:var(--text);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 80% at 70% 0%,var(--bg-glow) 0%,var(--bg) 55%,var(--bg-deep) 100%) fixed,var(--bg);
  padding-bottom:var(--dock-h)}
h1,h2,h3,h4,p{margin:0}
h1{font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
h2{font-size:1.125rem;font-weight:600}
h3{font-size:.9375rem;font-weight:600}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:.375rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-5rem;z-index:100;padding:.625rem 1rem;border-radius:var(--pill);background:var(--panel-solid);color:var(--text);border:1px solid var(--line-strong)}
.skip:focus{top:1rem}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:.8125rem}

/* ---------- glass + panels ---------- */
.glass{position:relative;isolation:isolate;background:var(--g-fill);
  -webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);
  box-shadow:inset 0 0 0 1px var(--g-line),inset 1.5px 1.5px 1px -.5px var(--g-hi),inset -1.5px -1.5px 1px -.5px var(--g-lo),inset 0 0 16px var(--g-glow),var(--shadow)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--g-rim);pointer-events:none;
  -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}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.stack{display:grid;gap:var(--s4)}
.stack>*,.grid>*,.split>*,.kpis>*{min-width:0} .row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.split{display:grid;gap:var(--s4);grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:15rem minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.side .brand{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3)}
.side .brand img{height:1.5rem;width:auto}
.side .org{font-size:.8125rem;color:var(--muted);padding:0 var(--s3)}
.nav{display:grid;gap:2px;padding:var(--s2);border-radius:var(--r-lg)}
.nav a{display:flex;align-items:center;gap:var(--s3);padding:.5rem .75rem;border-radius:var(--r-sm);color:var(--muted);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--text);background:var(--panel-2)}
.nav a[aria-current="page"]{color:var(--text);background:var(--panel-2);box-shadow:inset 3px 0 0 var(--violet)}
.nav svg{width:1.125rem;height:1.125rem;flex:none}
.main{min-width:0;padding:var(--s5) var(--s5) var(--s7)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.btn.menu-btn{display:none}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:min(18rem,85vw);z-index:40;transform:translateX(-105%);transition:transform .3s var(--ease);background:var(--panel-solid)}
  .side[data-open="true"]{transform:none}
  .btn.menu-btn{display:inline-flex}
  .main{padding:var(--s4) var(--s4) var(--s7)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:2.5rem;padding:.5rem 1rem;border-radius:var(--pill);
  font:500 .9375rem/1.2 var(--font);color:var(--text);text-decoration:none;cursor:pointer;border:0;background:var(--g-fill);
  box-shadow:inset 0 0 0 1px var(--g-line),inset 1px 1px 1px -.5px var(--g-hi);transition:transform .15s var(--ease),background .2s}
.btn:hover{background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06))}
:root[data-theme="light"] .btn:hover{background:rgba(124,58,237,.12)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.btn.primary{color:var(--on-btn);background:linear-gradient(180deg,#7d52ea,var(--btn) 55%,var(--btn-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px rgba(109,63,224,.8)}
.btn.primary:hover{background:linear-gradient(180deg,#8a62f0,#7046e6 55%,var(--btn-deep))}
.btn.danger{color:#fff;background:linear-gradient(180deg,#d6365f,#b01c46);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.btn.sm{min-height:2rem;padding:.25rem .75rem;font-size:.8125rem}
.btn.lg{min-height:3rem;padding:.75rem 1.5rem;font-size:1rem}
.btn.icon{width:2.5rem;padding:0}
.btn svg{width:1.125rem;height:1.125rem}

/* ---------- forms ---------- */
.field{display:grid;gap:.375rem}
.field label,.label{font-size:.8125rem;font-weight:500;color:var(--muted)}
.input,select.input,textarea.input{width:100%;min-height:2.5rem;padding:.5rem .75rem;font:inherit;color:var(--text);background:var(--inset);border:1px solid var(--line-strong);border-radius:var(--r-sm)}
textarea.input{min-height:6rem;resize:vertical}
.input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.input[aria-invalid="true"]{border-color:var(--bad)}
.hint{font-size:.8125rem;color:var(--faint)} .error-text{font-size:.8125rem;color:var(--bad)}
.check{display:flex;gap:.5rem;align-items:flex-start}

/* ---------- badges / status ---------- */
.badge{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .625rem;border-radius:var(--pill);font-size:.75rem;font-weight:600;letter-spacing:.02em;background:var(--panel-2);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.badge::before{content:"";width:.4375rem;height:.4375rem;border-radius:50%;background:currentColor}
.badge.plain::before{display:none}
.badge.ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.badge.warn{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.badge.bad{color:var(--bad);background:var(--bad-bg);border-color:transparent}
.badge.info{color:var(--info);background:var(--info-bg);border-color:transparent}
.badge.live::before{animation:pulse 1.6s infinite}
.demo-banner{display:flex;gap:var(--s2);align-items:center;padding:.5rem 1rem;border-radius:var(--r);background:var(--demo-bg);color:var(--demo);font-weight:600;font-size:.8125rem;border:1px dashed currentColor}
.badge.demo{color:var(--demo);background:var(--warn-bg);border:1px dashed currentColor}
.badge.demo::before{display:none}

/* ---------- KPI tiles ---------- */
.kpis{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr))}
.kpi{border-radius:var(--r);padding:var(--s4);display:grid;gap:.25rem;text-decoration:none;color:inherit}
.kpi .k-label{font-size:.8125rem;color:var(--muted)}
.kpi .k-value{font-size:1.75rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .k-value.nodata{font-size:1rem;font-weight:500;color:var(--faint)}
.kpi .k-sub{font-size:.75rem;color:var(--faint);font-variant-numeric:tabular-nums}
a.kpi:hover .k-label{color:var(--text)}

/* ---------- tables ---------- */
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table.data{width:100%;border-collapse:collapse;font-size:.875rem}
table.data th,table.data td{padding:.625rem .75rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);position:sticky;top:0;background:var(--panel-solid)}
table.data th button{all:unset;cursor:pointer;display:inline-flex;gap:.25rem;align-items:center}
table.data th button:focus-visible{outline:2px solid var(--accent)}
table.data tbody tr:hover{background:var(--panel-2)}
table.data td.n,table.data th.n{text-align:right;font-variant-numeric:tabular-nums}
table.data tr:last-child td{border-bottom:0}
@media (max-width:640px){
  table.data.stackable thead{display:none}
  table.data.stackable tr{display:grid;padding:.5rem 0;border-bottom:1px solid var(--line)}
  table.data.stackable td{border:0;padding:.25rem .75rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem}
  table.data.stackable td::before{content:attr(data-label);color:var(--muted);font-size:.75rem}
}

/* ---------- meter, steps, pill radios ---------- */
.meter{height:.5rem;border-radius:var(--pill);background:var(--panel-2);overflow:hidden}
.meter>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c1),var(--violet))}
.steps{display:grid;gap:var(--s2);counter-reset:step;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:1.75rem 1fr;gap:var(--s2);align-items:start;counter-increment:step;color:var(--muted)}
.steps li::before{content:counter(step);display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--line-strong);font-size:.8125rem;font-weight:600}
.steps li[aria-current="step"]{color:var(--text)} .steps li[aria-current="step"]::before{background:var(--btn);color:var(--on-btn);border-color:transparent}
.steps li.done::before{content:"✓";color:var(--ok);border-color:var(--ok)}
.pills{display:flex;flex-wrap:wrap;gap:var(--s2);border:0;padding:0;margin:0}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills label{display:inline-flex;align-items:center;min-height:2.25rem;padding:.375rem .875rem;border-radius:var(--pill);border:1px solid var(--line-strong);cursor:pointer;font-size:.875rem}
.pills input:checked+label{background:var(--btn);color:var(--on-btn);border-color:transparent}
.pills input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- states ---------- */
.state{display:grid;justify-items:center;gap:var(--s2);text-align:center;padding:var(--s6) var(--s4);color:var(--muted)}
.state h3{color:var(--text)}
.state.error h3{color:var(--bad)}
.skeleton{background:linear-gradient(90deg,var(--panel-2),rgba(255,255,255,.1),var(--panel-2));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm);min-height:1rem}
.stale{display:inline-flex;gap:.375rem;align-items:center;font-size:.75rem;color:var(--warn)}
.alert{padding:.75rem 1rem;border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2)}
.alert.bad{border-color:transparent;background:var(--bad-bg);color:var(--bad)}
.alert.warn{border-color:transparent;background:var(--warn-bg);color:var(--warn)}
.alert.ok{border-color:transparent;background:var(--ok-bg);color:var(--ok)}

/* ---------- call dock (persistent call controls) ---------- */
.dock{position:fixed;left:50%;bottom:var(--s3);transform:translateX(-50%);z-index:30;width:min(100% - 1rem,60rem);
  border-radius:var(--r-lg);padding:var(--s3) var(--s4);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center}
.dock[hidden]{display:none}
.dock .who{min-width:0}
.dock .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .timer{font-variant-numeric:tabular-nums;font-size:1.125rem;font-weight:600}
.dock .controls{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.dock .controls .btn{min-height:2.75rem}
@media (min-width:861px){.dock{left:calc(50% + 7.5rem);width:min(100% - 17rem,60rem)}}
@media (max-width:480px){.dock{grid-template-columns:1fr}.dock .controls{justify-content:stretch}.dock .controls .btn{flex:1 1 auto;min-width:0;padding:.5rem}}

/* ---------- dialog + toast ---------- */
dialog.modal{border:0;padding:0;border-radius:var(--r-lg);width:min(100% - 2rem,34rem);color:var(--text);background:var(--panel-solid);box-shadow:0 30px 80px rgba(0,0,0,.5)}
dialog.modal::backdrop{background:rgba(6,2,14,.6);backdrop-filter:blur(4px)}
dialog.modal .m-body{padding:var(--s5);display:grid;gap:var(--s4)}
.toasts{position:fixed;right:var(--s4);bottom:calc(var(--dock-h) + var(--s4));z-index:60;display:grid;gap:var(--s2);max-width:min(24rem,calc(100% - 2rem))}
.toast{padding:.75rem 1rem;border-radius:var(--r);background:var(--panel-solid);border:1px solid var(--line-strong);box-shadow:var(--shadow)}
.toast.bad{border-color:var(--bad)} .toast.ok{border-color:var(--ok)}

/* ---------- charts (SVG from admin-ui.js) ---------- */
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font:12px var(--font)}
.chart .gridline{stroke:var(--grid)}
.chart .s1{fill:var(--c1);stroke:var(--c1)} .chart .s2{fill:var(--c2);stroke:var(--c2)} .chart .s3{fill:var(--c3);stroke:var(--c3)}
.chart .s4{fill:var(--c4);stroke:var(--c4)} .chart .s5{fill:var(--c5);stroke:var(--c5)} .chart .s6{fill:var(--c6);stroke:var(--c6)}
.chart .line{fill:none;stroke-width:2}
.chart .line.s2{stroke-dasharray:7 4}.chart .line.s3{stroke-dasharray:2 3}.chart .line.s4{stroke-dasharray:10 3 2 3}   /* overlapping series stay distinguishable */
.legend{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:.8125rem;color:var(--muted)}
.legend i{display:inline-block;width:.75rem;height:.75rem;border-radius:3px;margin-right:.375rem;vertical-align:-1px}
.funnel{display:grid;gap:.5rem}
.funnel .step{display:grid;grid-template-columns:minmax(7rem,10rem) minmax(0,1fr) auto;gap:var(--s3);align-items:center;font-size:.875rem}
.funnel .track{height:.875rem;border-radius:var(--pill);background:var(--panel-2);overflow:hidden}
.funnel .fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c1),var(--violet))}
@media (max-width:480px){.funnel .step{grid-template-columns:1fr auto}.funnel .track{grid-column:1/-1;order:3}}

/* ---------- auth pages ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:var(--s4)}
.auth .card{width:min(100%,26rem);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:grid;gap:var(--s4)}
.auth .card .brand img{height:1.75rem}

/* ==========================================================================================================
   Liquid-glass workspace (owner direction 2026-10-31; references: Glassy Dashboard v2/v5, glassy CRM dashboard,
   Apple dock, Liquid Glass Kit). Frosted panels over a deep scene, a floating icon rail, a pill top bar and vivid
   KPI tiles. Same tokens and class names as before, so every page restyles without new markup. Reduced
   transparency / more contrast (below) switch back to solid surfaces.
   ========================================================================================================== */
:root{
  --panel:rgba(255,255,255,.065); --panel-2:rgba(255,255,255,.07); --line:rgba(255,255,255,.14);
  --frost:blur(26px) saturate(150%); --r:1.125rem; --r-lg:1.75rem;
  --scene:radial-gradient(55% 45% at 12% 8%,rgba(139,92,246,.42),transparent 62%),radial-gradient(45% 40% at 88% 14%,rgba(45,212,191,.2),transparent 62%),
    radial-gradient(60% 55% at 62% 104%,rgba(236,72,153,.22),transparent 62%),radial-gradient(40% 35% at 30% 70%,rgba(99,102,241,.16),transparent 70%),
    linear-gradient(160deg,#160b2b,#0d0819 55%,#07040e);
  --th-bg:rgba(22,12,40,.94);
  --accent-tile:linear-gradient(150deg,#2dd4bf 0%,#0d9488 55%,#115e59 100%);
}
:root[data-theme="light"]{
  --panel:rgba(255,255,255,.62); --panel-2:rgba(255,255,255,.55); --line:rgba(91,33,182,.14);
  --scene:radial-gradient(55% 45% at 12% 8%,rgba(196,181,253,.75),transparent 62%),radial-gradient(45% 40% at 88% 14%,rgba(153,246,228,.6),transparent 62%),
    radial-gradient(60% 55% at 62% 104%,rgba(251,207,232,.7),transparent 62%),linear-gradient(160deg,#f6f1ff,#eef3ff 55%,#fbf7ff);
  --th-bg:rgba(250,247,255,.96);
  --accent-tile:linear-gradient(150deg,#5eead4 0%,#14b8a6 55%,#0f766e 100%);
}
body{background:var(--scene) fixed,var(--bg)}
.panel,.table-wrap{-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px var(--line),0 24px 48px -28px rgba(4,1,12,.65);border-color:transparent}
:root[data-theme="light"] .panel,:root[data-theme="light"] .table-wrap{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px var(--line),0 24px 48px -30px rgba(91,33,182,.28)}
table.data th{background:var(--th-bg)}
/* KPI tiles: frosted, the first one in a row is the accent tile (as in the references) */
.kpi{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.12);border-radius:var(--r-lg);padding:var(--s4) var(--s5);min-height:6.5rem;align-content:space-between}
.kpi .k-value{font-size:2rem;letter-spacing:-.02em}
.kpis>.kpi:first-child{background:var(--accent-tile);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 36px -18px rgba(13,148,136,.7)}
.kpis>.kpi:first-child .k-label,.kpis>.kpi:first-child .k-sub,.kpis>.kpi:first-child .k-value{color:#04201d}
.kpis>.kpi:first-child .k-value.nodata{color:#0b3b36}

/* Floating icon rail (desktop) */
.brand .brand-symbol{display:none}
@media (min-width:861px){
  .shell{grid-template-columns:6.25rem minmax(0,1fr)}
  .side{top:1rem;margin:1rem 0 1rem 1rem;height:calc(100vh - 2rem);width:5rem;padding:.875rem .5rem;border-radius:2.5rem;align-items:center;gap:var(--s3);overflow:visible;z-index:25}
  .side .brand{padding:.25rem 0;justify-content:center}
  .side .brand .brand-symbol{display:block;width:2rem;height:2rem}
  .side .brand .logo-dark,.side .brand .logo-light,.side .brand .product{display:none!important}
  .side .org{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav{padding:0;gap:.375rem;justify-items:center;background:none}
  .nav a{position:relative;width:3rem;height:3rem;padding:0;justify-content:center;border-radius:50%;color:var(--muted)}
  .nav a:hover{background:var(--panel-2);color:var(--text)}
  .nav a[aria-current="page"]{color:#fff;background:linear-gradient(160deg,#8b5cf6,#6d3fe0 60%,#5b2fd6);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -10px rgba(109,63,224,.9)}
  .nav svg{width:1.25rem;height:1.25rem}
  .nav .nav-label{position:absolute;left:calc(100% + .75rem);top:50%;transform:translate(-.25rem,-50%);white-space:nowrap;padding:.375rem .75rem;border-radius:var(--pill);
    background:var(--panel-solid);color:var(--text);font-size:.8125rem;font-weight:500;box-shadow:0 10px 24px -10px rgba(0,0,0,.6),inset 0 0 0 1px var(--line-strong);opacity:0;pointer-events:none;transition:opacity .15s,transform .2s var(--ease)}
  .nav a:hover .nav-label,.nav a:focus-visible .nav-label{opacity:1;transform:translate(0,-50%)}
  .main{padding:1rem 1.5rem var(--s7) .5rem}
  .dock{left:calc(50% + 3.125rem);width:min(100% - 8rem,60rem)}
}
@media (min-width:861px) and (max-height:820px){.nav a{width:2.5rem;height:2.5rem}.nav{gap:.125rem}}
@media (max-width:860px){.side .brand .brand-symbol{display:none}.nav .nav-label{position:static}}

/* Pill top bar */
.topbar.glass{position:sticky;top:1rem;z-index:20;border-radius:var(--pill);padding:.5rem .625rem .5rem 1.25rem;margin-bottom:var(--s5)}
.topbar .tb-title{display:grid;line-height:1.2;min-width:0}
.topbar .tb-title h1{font-size:1.25rem}
.topbar .tb-org{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-chip{display:flex;align-items:center;gap:var(--s2);padding:.25rem .75rem .25rem .25rem;border-radius:var(--pill);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.who-chip .avatar{display:grid;place-items:center;width:2.125rem;height:2.125rem;border-radius:50%;font-size:.75rem;font-weight:700;color:#fff;background:linear-gradient(140deg,#f472b6,#8b5cf6 55%,#2dd4bf)}
.who-chip .who-am-i{display:grid;line-height:1.15;font-size:.8125rem}
@media (max-width:1100px){.who-chip .who-am-i{display:none}.who-chip{padding:.25rem}}
@media (max-width:860px){.topbar.glass{top:.5rem;border-radius:var(--r-lg);padding:.5rem .75rem}.topbar .tb-right{width:100%;justify-content:flex-end}}

/* Entrances: content rises in gently (skipped for reduced motion below) */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#content>*{animation:rise .5s var(--ease) both}
#content>*:nth-child(2){animation-delay:.05s} #content>*:nth-child(3){animation-delay:.1s} #content>*:nth-child(n+4){animation-delay:.15s}

/* ---------- motion + accessibility preferences ---------- */
@keyframes pulse{50%{opacity:.35}}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .glass,.btn:not(.primary):not(.danger){background:var(--panel-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .glass::after{display:none}
  .panel,.table-wrap,.kpi{background:var(--panel-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  body{background:var(--bg)}
  :root{--line:rgba(255,255,255,.3);--muted:#e2dbef}
  :root[data-theme="light"]{--line:rgba(26,13,43,.4);--muted:#2f2442}
}
@media (forced-colors:active){.glass::after{display:none}.btn,.badge,.panel{border:1px solid CanvasText}}