/* ───────────────────────────────────────────────────────────────────────────
   BTS Seller Platform — shared design system (FINISH + TOKENS + THEMES).

   One source of truth for the visual finish across the dashboard, all 7 product
   seller pages, onboarding, training/scripts, live classes, and login/signup.
   Crimson #C8202F is the accent in BOTH themes.

   THEMING: `:root` = LIGHT (default). `html[data-theme="dark"]` overrides with the
   dark palette. Components read semantic vars, so every surface flips automatically.
   Light leans on soft shadow + light-grey borders for depth; dark leans on borders.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── LIGHT theme (default) ── */
:root{
  color-scheme:light;
  /* brand (crimson constant; --brand-hi deepens on white for contrast) */
  --brand:#C8202F;
  --brand-rgb:200,32,47;           /* accent as an rgb triplet → rgba(var(--brand-rgb),α) tints */
  --brand-2:#ff6b75;
  --brand-hi:#b81d2b;
  --brand-deep:#9c1721;
  /* positive green (single source everywhere green appears) */
  --pos:#1a7f4b;
  --pos-bg:rgba(26,127,75,.10);
  --pos-bd:rgba(26,127,75,.26);
  /* surfaces */
  --bg:#f5f5f7;
  --surface:#ffffff;
  --surface-hover:#f0f0f2;
  --card-top:#ffffff;   --card-bot:#ffffff;
  --tile-top:#ffffff;   --tile-bot:#fafafb;
  --row-top:#ffffff;    --row-bot:#fafafb;
  --inset:#f3f3f5;                 /* recessed panel (script text, date block) */
  --input:#ffffff;
  --border:#e6e6e9;
  --border-strong:#d7d7db;
  --track:#ececef;                 /* progress/knob track */
  --row-hover:rgba(0,0,0,.03);
  --sidebar:#ffffff;
  /* text */
  --text:#1a1a1a;                  /* body */
  --text-soft:#33333a;             /* slightly dimmed body */
  --ink-strong:#0d0d0d;            /* headlines */
  --ink:#141414;                   /* money / KPIs — strong dark neutral */
  --muted:#6b6b72;
  --muted-2:#6d6d77;               /* secondary/caption — darkened to clear WCAG 4.5:1 on every light surface */
  --icon-fg:#9a4148;               /* calm icon-tile glyph */
  /* status chip foregrounds (contrast-tuned per theme) */
  --chip-crimson-fg:#b81d2b;
  --chip-warn-fg:#8a5a00;
  --chip-neutral-fg:#5b6470;
  --banner-fg:#7a5b00;             /* amber "preview" banner text — dark on pale amber */
  --spark:#57575e;                 /* KPI sparkline stroke (crisper on white) */
  /* elevation — light = real drop shadows */
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-hover:0 10px 28px rgba(16,24,40,.14);
  --tile-shadow:0 1px 2px rgba(16,24,40,.05);
  --ring:0 0 0 3px rgba(var(--brand-rgb),.18);
  /* legacy aliases (older inline styles) */
  --bts-card:#ffffff; --bts-border:#e6e6e9; --bts-input:#ffffff; --bts-muted:#6b6b72;
  --sbw:264px;

  /* ── design tokens (theme-independent) ──────────────────────────────────
     Fixed type scale kills the fractional rem/em cascade (no more 10.56/12.48px).
     Line-height: 1.3 for headings, 1.5 for body. */
  --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-md:15px;
  --fs-lg:17px; --fs-xl:20px; --fs-2xl:26px; --fs-hero:44px;
  /* radius — one ladder */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  /* transition — one scale, all ease */
  --t-fast:120ms ease; --t-base:180ms ease; --t-slow:280ms ease;
  /* spacing scale (named 4pt scale — snap all padding/gap to these) */
  --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-sm:16px;
  --space-md:24px; --space-lg:32px; --space-xl:48px;
  /* type: Space Grotesk carries display/headings; Inter stays for body; Space Mono for numerals */
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --gold:#C99A2E;                  /* leaderboard #1 — reads as reward, not alert */
}

/* ── DARK theme (overrides) ── */
html[data-theme="dark"]{
  color-scheme:dark;
  --brand-hi:#f0454f;
  --pos:#5cc98c;
  --pos-bg:rgba(46,160,102,.13);
  --pos-bd:rgba(46,160,102,.30);
  --bg:#0a0a0a;
  --surface:#161616;
  --surface-hover:#1e1e1e;
  --card-top:#181818;   --card-bot:#0f0f0f;
  --tile-top:#1b1b1b;   --tile-bot:#131313;
  --row-top:#171717;    --row-bot:#121212;
  --inset:#0f0f0f;
  --input:#131313;
  --border:#242424;
  --border-strong:#2f2f2f;
  --track:#1c1c1c;
  --row-hover:rgba(255,255,255,.02);
  --sidebar:#0c0c0c;
  --text:#ffffff;
  --text-soft:#e7e5e3;
  --ink-strong:#fafafa;
  --ink:#f2f2f2;
  --muted:#9b9793;
  --muted-2:#8f8a85;               /* darkened→lightened for dark theme: clears 4.5:1 on #0a0a0a */
  --icon-fg:#c7c2be;
  --chip-crimson-fg:#ff8a93;
  --chip-warn-fg:#e7b74a;
  --chip-neutral-fg:#b8c2cf;
  --banner-fg:#fde047;             /* dark-mode banner text (unchanged — 12.56:1) */
  --spark:#9b9793;                 /* dark-mode sparkline (unchanged) */
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 2px 4px rgba(0,0,0,.35);
  --shadow-hover:0 1px 0 rgba(255,255,255,.06) inset, 0 16px 38px rgba(0,0,0,.62);
  --tile-shadow:0 1px 0 rgba(255,255,255,.03) inset;
  --bts-card:#141414; --bts-border:#242424; --bts-input:#161616; --bts-muted:#94a3b8;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  transition:background var(--t-base),color var(--t-base)}
.font-mono{font-family:'Space Mono',ui-monospace,monospace}

/* ── type scale — large & light headline, everything else recedes ── */
.h1{font-family:var(--font-display);font-size:var(--fs-2xl);line-height:1.3;font-weight:600;letter-spacing:-.03em;color:var(--ink-strong)}
@media(min-width:640px){ .h1{font-size:var(--fs-hero);line-height:1.1;letter-spacing:-.035em} }
.card-title{font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.desc{font-size:var(--fs-base);line-height:1.5;color:var(--muted)}
.eyebrow,.sec-label{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
/* money/KPIs render neutral (strong dark on light / near-white on dark) — colour reserved for deltas */
.metric{font-size:var(--fs-2xl);line-height:1.1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-family:'Space Mono',ui-monospace,monospace;color:var(--ink)}
.metric .cur{font-size:.5em;font-weight:600;color:var(--muted);letter-spacing:.03em;margin-left:.35em;font-family:Inter,system-ui,sans-serif}
.crimson{color:var(--brand-hi)}
/* comparison deltas: green = up, muted = flat/down (no red — avoids crimson clash) */
.delta{font-size:var(--fs-xs);font-weight:600;display:inline-flex;align-items:center;gap:4px;letter-spacing:.01em}
.delta-up{color:var(--pos)}
.delta-flat{color:var(--muted)}

/* ── elevated card surface ── */
.card{
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
/* crimson-tinted top edge for the primary/commission card */
.card-accent{position:relative;overflow:hidden}
.card-accent::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--brand),rgba(var(--brand-rgb),.12))}

/* ── inner tiles / rows ── */
.tile{
  background:linear-gradient(180deg,var(--tile-top),var(--tile-bot));
  border:1px solid var(--border);
  border-radius:var(--r-md);padding:16px;min-width:0;
  box-shadow:var(--tile-shadow);
}
.row{
  background:linear-gradient(180deg,var(--row-top),var(--row-bot));
  border:1px solid var(--border);border-radius:var(--r-sm);
}

/* ── product-grid cards ── */
.prod-card{
  display:block;min-width:0;position:relative;
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;
  box-shadow:var(--shadow);
}
.prod-live{cursor:pointer;transition:transform var(--t-base),box-shadow var(--t-base)}
.prod-live:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)} /* one signal: lift + shadow */
.prod-soon{opacity:.5;filter:saturate(.5)}
/* featured product (the recommended "Best to start" IB card) spans 2 columns and
   lays out horizontally → breaks the AI 3-equal-column icon-card grid with one
   deliberate asymmetry. Carries the single rationed crimson top-edge accent. */
.prod-featured{grid-column:1/-1}
@media(min-width:1024px){ .prod-featured{grid-column:span 2} }
.prod-featured .prod-head{margin-bottom:16px}
.prod-featured .prod-mid{display:flex;flex-direction:column;gap:16px}
@media(min-width:560px){
  .prod-featured .prod-mid{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px}
  .prod-featured .prod-body{flex:1;min-width:0}
  .prod-featured .prod-foot{flex-shrink:0}
}
.prod-featured .prod-foot{flex-direction:column;align-items:flex-end;gap:8px;border-top:0}
/* Open → is muted by default; crimson only on card hover (rationed accent) */
.prod-open{color:var(--muted);font-weight:600;transition:color var(--t-fast)}
.prod-live:hover .prod-open{color:var(--brand-hi)}

/* ── icon tiles ──
   Calm DEFAULT (repeating grid cards / placeholder panels): small, subtle
   crimson-tinted, monochrome glyph — no glow, so seven of them recede. */
.icon-tile{
  width:36px;height:36px;flex-shrink:0;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);
  color:var(--icon-fg);
  background:rgba(var(--brand-rgb),.08);
  border:1px solid rgba(var(--brand-rgb),.16);
}
/* PRODUCT icon tile — the deliberate, branded treatment for the 7 products
   (landing, dashboard grid, hero float-cards). Larger + more finished than the
   calm .icon-tile: soft crimson-tinted gradient, inner top highlight and a low
   shadow so the set reads as a designed icon system, not placeholder glyphs.
   Crimson stays restrained (tint, not glow) so a grid of them still recedes. */
/* NEUTRAL by design (Linear-style): monochrome icon on a recessed tile. Red is
   rationed to ONE primary CTA per screen, so seven product tiles must recede. */
.prod-ic{
  width:44px;height:44px;flex-shrink:0;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);
  color:var(--muted);
  background:var(--inset);
  border:1px solid var(--border);
  transition:color var(--t-fast),border-color var(--t-fast);
}
/* on a live product card, the tile firms up (neutral) with the card hover */
.prod-live:hover .prod-ic{border-color:var(--border-strong);color:var(--text)}

/* generated user/coach avatars (initials on a deterministic colour).
   Colour + size come inline from window.BTSAvatar(); this is the shared finish
   so chat, feed, leaderboard, notifications and profile all match. */
.avatar{
  flex-shrink:0;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;line-height:1;color:#fff;letter-spacing:.01em;overflow:hidden;
  background:var(--av-bg,#475569);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 1px 2px rgba(16,24,40,.20);
}
html[data-theme="dark"] .avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 1px 3px rgba(0,0,0,.45)}

/* HERO tile — reserved for the ONE seller-page product header: full glowing
   crimson gradient so it's a single focal point, not repeated noise. */
.icon-tile-hero{
  width:52px;height:52px;flex-shrink:0;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl);
  color:var(--brand-hi);
  background:linear-gradient(135deg,rgba(var(--brand-rgb),.22),rgba(var(--brand-rgb),.05));
  border:1px solid rgba(var(--brand-rgb),.30);
  box-shadow:0 6px 18px rgba(var(--brand-rgb),.14);
}

/* ── pills / status chips ── */
.pill{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:4px 8px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:4px;
  line-height:1;white-space:nowrap;border:1px solid transparent}
.pill-live{color:var(--pos);background:var(--pos-bg);border-color:var(--pos-bd)}
.pill-soon{color:var(--chip-neutral-fg);background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.22)}
.chip{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:4px 8px;border-radius:var(--r-pill);display:inline-flex;align-items:center;line-height:1;
  white-space:nowrap;border:1px solid transparent}
.chip-good{color:var(--pos);background:var(--pos-bg);border-color:var(--pos-bd)}
.chip-warn{color:var(--chip-warn-fg);background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.24)}
.chip-neutral{color:var(--chip-neutral-fg);background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.22)}
.chip-crimson{color:var(--chip-crimson-fg);background:rgba(var(--brand-rgb),.12);border-color:rgba(var(--brand-rgb),.3)}
/* legacy amber "Sample" pill (kept until sample-state is consolidated) */
.chip-sample{font-size:var(--fs-xs);font-weight:700;color:var(--chip-warn-fg);background:rgba(234,179,8,.12);
  border:1px solid rgba(234,179,8,.26);border-radius:var(--r-pill);padding:4px 8px;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap}

/* ── buttons ── (primary text stays white — it sits on crimson in both themes) */
.btn-primary{background:linear-gradient(180deg,#d8323f,#C8202F);color:#fff;font-weight:600;
  border:0;border-radius:var(--r-sm);cursor:pointer;transition:filter var(--t-fast),transform var(--t-fast);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px rgba(var(--brand-rgb),.28)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);
  text-decoration:none;transition:border-color var(--t-fast),background var(--t-fast)}
.btn-ghost:hover{border-color:rgba(var(--brand-rgb),.5);background:var(--surface-hover)}

/* ── keyboard focus — an instant ring on every interactive element (never
   transition the outline: keyboard users need it the moment they land) ── */
.btn-primary:focus-visible,.btn-ghost:focus-visible,.theme-toggle:focus-visible,.bell-btn:focus-visible,
[data-view]:focus-visible,[data-tview]:focus-visible,[data-aview]:focus-visible,[data-theme-toggle]:focus-visible,
.chan-item:focus-visible,.cmdk-item:focus-visible,.ob-pill:focus-visible,.ob-collapsed:focus-visible,.ob-x:focus-visible,.curr-link:focus-visible,
.prod-live:focus-visible,.adm-btn:focus-visible,.tp-btn:focus-visible,.notif-readall:focus-visible,
.empty-state .btn-primary:focus-visible,.logout:focus-visible,.back-link:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}
.switch input:focus-visible + .slider{outline:2px solid var(--brand);outline-offset:2px}

/* ── inputs ── */
.field,input.field{background:var(--input);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm)}
.field:focus,input.field:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}

/* ── theme toggle button ── */
.theme-toggle{width:38px;height:38px;flex-shrink:0;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;
  transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.theme-toggle:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-hover)}

/* ── data table ── */
.data-table{width:100%;border-collapse:collapse}
.data-table thead{color:var(--muted);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.07em}
.data-table th,.data-table td{padding:12px 12px;border-bottom:1px solid var(--border);text-align:left}
.data-table tbody tr:last-child td{border-bottom:0}
.table-row:hover{background:var(--row-hover)}

/* ── onboarding ("Start here") panel ── */
.ob-bar{flex:1;height:6px;border-radius:var(--r-pill);background:var(--track);overflow:hidden;border:1px solid var(--border)}
.ob-bar-fill{height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand),#ff6b75);transition:width var(--t-slow)}
/* steps are plain rows inside the panel card — single containment layer (no card-in-card) */
.ob-step{display:flex;gap:12px;align-items:flex-start;padding:8px 4px}
.ob-step-done{opacity:.7}
.ob-check{flex-shrink:0;width:22px;height:22px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);background:var(--track);border:1px solid var(--border)}
.ob-check-on{color:#fff;background:var(--pos);border-color:var(--pos-bd)}
.ob-x{color:var(--muted);background:transparent;border:0;cursor:pointer;font-size:var(--fs-md);line-height:1;padding:4px}
.ob-x:hover{color:var(--text)}
.ob-pill{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-base);font-weight:600;color:var(--text-soft);
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 12px;box-shadow:var(--shadow)}
.ob-pill:hover{border-color:rgba(var(--brand-rgb),.4)}
.ob-pill-count{margin-left:2px;font-size:var(--fs-sm);color:var(--muted);background:var(--track);border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 8px}

/* ── seller-page "do this now" first-action strip ── */
.firstaction{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(var(--brand-rgb),.12),rgba(var(--brand-rgb),.03));border:1px solid rgba(var(--brand-rgb),.28);
  border-radius:var(--r-lg);padding:16px 20px}
.firstaction-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── training & scripts ── */
.playbook{margin:0;padding:0;list-style:none;counter-reset:pb;display:flex;flex-direction:column;gap:8px}
.playbook li{position:relative;padding-left:30px;font-size:var(--fs-base);line-height:1.5;color:var(--text-soft);counter-increment:pb}
.playbook li::before{content:counter(pb);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;color:var(--brand-hi);
  background:rgba(var(--brand-rgb),.10);border:1px solid rgba(var(--brand-rgb),.22)}
.script-card{background:linear-gradient(180deg,var(--row-top),var(--row-bot));border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}
.script-text{white-space:pre-wrap;font-size:var(--fs-sm);line-height:1.6;color:var(--text-soft);background:var(--inset);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:12px 12px;max-height:240px;overflow:auto}
.link-token{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600;color:var(--brand-hi);
  background:rgba(var(--brand-rgb),.10);border:1px solid rgba(var(--brand-rgb),.25);border-radius:var(--r-sm);padding:1px 8px;white-space:nowrap}

/* ── live classes ── */
.live-badge{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--chip-crimson-fg);background:rgba(var(--brand-rgb),.13);border:1px solid rgba(var(--brand-rgb),.32);border-radius:var(--r-pill);padding:4px 8px}
.live-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--brand);animation:livePulse 1.6s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),.5)}70%{box-shadow:0 0 0 6px rgba(var(--brand-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),0)}}
.class-list{display:flex;flex-direction:column;gap:12px}
.class-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--row-top),var(--row-bot));border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}
.class-card-past{opacity:.7}
.class-date{flex-shrink:0;width:96px;text-align:center;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 8px}
.cd-day{font-size:var(--fs-sm);font-weight:700;color:var(--text-soft)}
.cd-time{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
/* tutor identity on class cards: avatar + name/role + one-line bio */
.class-tutor{display:flex;align-items:flex-start;gap:8px;min-width:0}
.class-tutor .avatar{margin-top:1px}
.class-bio{font-size:var(--fs-sm);color:var(--muted-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Join + Add-to-calendar sit together; stack full-width on phones (640 matches
   the other mobile rules — two side-by-side actions crowd the title below it) */
.class-action{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:640px){
  .class-action{width:100%}
  .class-action a,.class-action span{display:block;text-align:center;flex:1}
  .class-action button{flex:1;text-align:center}
}

/* ── student "Start here" welcome + "What you'll learn" ──
   Rows live INSIDE the one welcome/curriculum card (single containment, like
   .ob-step); icons stay neutral monochrome on --inset per the color rules. */
.sw-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
@media(min-width:640px){ .sw-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sw-item{display:flex;gap:12px;align-items:flex-start;padding:8px 4px}
.sw-ic{flex-shrink:0;width:34px;height:34px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:var(--muted);background:var(--inset);border:1px solid var(--border);font-size:var(--fs-base)}
.sw-title{font-size:var(--fs-base);font-weight:600;color:var(--text)}
.sw-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:2px;line-height:1.5}
.sw-next{font-weight:600;color:var(--text-soft)}
.curr-grid{display:grid;grid-template-columns:1fr;gap:4px 24px;margin-top:16px}
@media(min-width:640px){ .curr-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.curr-item{display:flex;gap:12px;align-items:flex-start;padding:8px 4px}
.curr-n{flex-shrink:0;width:22px;height:22px;margin-top:1px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);background:var(--track);border:1px solid var(--border);font-variant-numeric:tabular-nums}
/* topic → real-class link (muted at rest; accent stays rationed) */
.curr-link{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);transition:color var(--t-fast)}
.curr-link:hover{color:var(--brand-hi)}
/* brief highlight when a curriculum link jumps to a schedule card */
.class-hilite{border-color:rgba(var(--brand-rgb),.5)!important;box-shadow:0 0 0 3px rgba(var(--brand-rgb),.14);
  transition:border-color var(--t-slow),box-shadow var(--t-slow)}

/* ── gamification: streak chip ── */
.streak-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));border:1px solid var(--border);box-shadow:var(--shadow);white-space:nowrap}
.streak-flame{font-size:var(--fs-base);line-height:1;color:var(--muted)}
.streak-n{font-weight:700;font-size:var(--fs-md);color:var(--ink-strong)}
.streak-lbl{font-size:var(--fs-sm);color:var(--muted)}
.streak-week{display:inline-flex;gap:4px;margin-left:4px}
.streak-dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--track);border:1px solid var(--border)}
.streak-dot.on{background:var(--brand);border-color:var(--brand)}

/* ── gamification: notification bell + panel ── */
.bell-wrap{position:relative}
.bell-btn{position:relative;width:38px;height:38px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
.bell-btn:hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-hover)}
.bell-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--brand);color:#fff;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg)}
.notif-panel{position:absolute;top:46px;right:0;width:340px;max-width:calc(100vw - 32px);z-index:60;
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-hover);overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.notif-readall{background:transparent;border:0;color:var(--brand-hi);font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.notif-list{max-height:360px;overflow:auto}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);position:relative}
.notif-item:last-child{border-bottom:0}
.notif-item.unread{background:rgba(var(--brand-rgb),.045)}
.notif-ic{width:32px;height:32px;flex-shrink:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:var(--fs-base)}
.notif-good{color:var(--pos);background:var(--pos-bg);border:1px solid var(--pos-bd)}
.notif-neutral{color:var(--chip-neutral-fg);background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.22)}
.notif-crimson{color:var(--brand-hi);background:rgba(var(--brand-rgb),.10);border:1px solid rgba(var(--brand-rgb),.22)}
.notif-text{font-size:var(--fs-sm);line-height:1.4;color:var(--text)}
.notif-detail{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.notif-time{font-size:var(--fs-xs);color:var(--muted-2);margin-top:3px}
.notif-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--brand);flex-shrink:0;margin-top:8px}
.notif-foot{padding:8px 16px;font-size:var(--fs-xs);color:var(--muted-2);border-top:1px solid var(--border);text-align:center}

/* ── gamification: leaderboard ── */
.lb-standing{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.podium-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.podium{border-radius:var(--r-lg);padding:16px 12px;text-align:center;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));box-shadow:var(--shadow)}
.podium-1{padding-top:28px;border-color:rgba(201,154,46,.45);box-shadow:0 8px 26px rgba(201,154,46,.18)}
.podium-2{margin-top:12px} .podium-3{margin-top:24px}
.podium-rank{width:34px;height:34px;margin:0 auto 8px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:var(--fs-md);color:var(--muted);background:var(--track);border:1px solid var(--border)}
.podium-1 .podium-rank{color:#fff;background:linear-gradient(180deg,#d9b24a,var(--gold));border-color:transparent;box-shadow:0 4px 12px rgba(201,154,46,.32)}
.podium-av{display:flex;justify-content:center;margin:2px 0 8px}
.podium-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-base)}
.podium-earn{font-family:'Space Mono',ui-monospace,monospace;font-weight:700;font-size:var(--fs-lg);color:var(--ink-strong);margin-top:8px}
.podium-sales{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.lb-list{display:flex;flex-direction:column}
.lb-row{display:grid;grid-template-columns:44px 1fr auto 52px 88px;align-items:center;gap:8px;padding:12px 12px;border-radius:var(--r-sm)}
.lb-row + .lb-row{border-top:1px solid var(--border)}
.lb-headrow{color:var(--muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding-bottom:8px}
.lb-headrow + .lb-row{border-top:0}
.lb-rank{font-weight:700;color:var(--muted);font-size:var(--fs-base)}
.lb-name{font-size:var(--fs-base);min-width:0;display:flex;align-items:center;gap:8px}
.lb-name-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lb-country{font-size:var(--fs-md)}
.lb-sales{text-align:right;font-size:var(--fs-base);color:var(--muted);font-variant-numeric:tabular-nums}
.lb-earn{text-align:right;font-family:'Space Mono',ui-monospace,monospace;font-weight:700;font-size:var(--fs-base);color:var(--ink);font-variant-numeric:tabular-nums}
.lb-you{background:linear-gradient(90deg,rgba(var(--brand-rgb),.12),rgba(var(--brand-rgb),.02));border:1px solid rgba(var(--brand-rgb),.3)!important}
.lb-you .lb-rank{color:var(--brand-hi)}
@media(max-width:520px){
  .lb-row{grid-template-columns:36px 1fr auto 72px}
  .lb-country{display:none}
}

/* ── gamification: badges ── */
.badge-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){ .badge-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .badge-grid{grid-template-columns:repeat(3,1fr)} }
.badge-tile{padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.badge-ic{width:52px;height:52px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl);margin-bottom:12px}
.badge-earned .badge-ic{color:var(--brand-hi);background:linear-gradient(135deg,rgba(var(--brand-rgb),.20),rgba(var(--brand-rgb),.05));border:1px solid rgba(var(--brand-rgb),.30);box-shadow:0 6px 18px rgba(var(--brand-rgb),.12)}
.badge-locked{opacity:.72}
.badge-locked .badge-ic{color:var(--muted-2);background:var(--track);border:1px solid var(--border)}
.badge-title{font-weight:600;font-size:var(--fs-md);color:var(--text)}
.badge-desc{font-size:var(--fs-sm);color:var(--muted);margin-top:4px;line-height:1.45}
.badge-prog{width:100%;margin-top:12px}
.badge-prog-bar{height:6px;border-radius:var(--r-pill);background:var(--track);border:1px solid var(--border);overflow:hidden}
.badge-prog-bar span{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--brand),#ff6b75)}
.badge-prog-lbl{font-size:var(--fs-sm);color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}

/* dashboard top utility row (streak + bell) */
.gami-utilbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:12px;flex-wrap:wrap}

/* ── community chat ── */
.chat-shell{display:grid;grid-template-columns:1fr;overflow:hidden;padding:0}
@media(min-width:760px){ .chat-shell{grid-template-columns:220px 1fr} }
.chat-channels{border-bottom:1px solid var(--border);padding:12px;min-width:0}
@media(min-width:760px){ .chat-channels{border-bottom:0;border-right:1px solid var(--border);padding:12px} }
.chat-channels-label{margin:2px 4px 8px}
#chat-chan-list{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap}
@media(min-width:760px){ #chat-chan-list{flex-direction:column;overflow:visible} }
.chan-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;
  background:transparent;border:1px solid transparent;color:var(--muted);font-size:var(--fs-base);font-weight:500;transition:background var(--t-fast),color var(--t-fast);flex-shrink:0}
.chan-item i{font-size:var(--fs-sm);color:var(--muted-2)}
.chan-item:hover{background:var(--surface-hover);color:var(--text)}
.chan-active{background:linear-gradient(90deg,rgba(var(--brand-rgb),.14),rgba(var(--brand-rgb),.02));color:var(--text);box-shadow:inset 3px 0 0 var(--brand)}
.chan-active i{color:var(--brand-hi)}
.chat-main{display:flex;flex-direction:column;min-width:0;height:560px}
@media(max-width:759px){ .chat-main{height:70vh} }
.chat-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.chat-subttl{font-size:var(--fs-sm);color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-conn{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--r-pill);flex-shrink:0;border:1px solid transparent}
.chat-conn .conn-dot{width:6px;height:6px;border-radius:var(--r-pill);background:currentColor}
.chat-conn-live{color:var(--pos);background:var(--pos-bg);border-color:var(--pos-bd)}
.chat-conn-off{color:var(--muted);background:var(--track);border-color:var(--border)}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.chat-loading,.chat-empty{color:var(--muted);font-size:var(--fs-base);text-align:center;margin:auto}
.msg-row{display:flex;gap:12px;align-items:flex-start}
.msg-av{width:32px;height:32px;flex-shrink:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);font-weight:700;color:var(--brand-hi);background:rgba(var(--brand-rgb),.10);border:1px solid rgba(var(--brand-rgb),.20)}
.msg-body{min-width:0;flex:1}
.msg-head{display:flex;align-items:baseline;gap:8px}
.msg-name{font-size:var(--fs-base);font-weight:600;color:var(--text)}
.msg-me{color:var(--brand-hi)}
.msg-youtag{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-hi);background:rgba(var(--brand-rgb),.12);border-radius:var(--r-sm);padding:1px 5px;margin-left:2px}
.msg-time{font-size:var(--fs-xs);color:var(--muted-2)}
.msg-text{font-size:var(--fs-base);line-height:1.5;color:var(--text-soft);margin-top:2px;white-space:pre-wrap;word-break:break-word}
.chat-composer{display:flex;gap:8px;align-items:flex-end;padding:12px 12px;border-top:1px solid var(--border)}
.chat-textarea{flex:1;resize:none;background:var(--input);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:8px 12px;font:inherit;font-size:var(--fs-base);line-height:1.4;max-height:120px}
.chat-textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.chat-send{width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-md)}

/* ── direct messages (Phase 6) — reuses the chat/message classes + thread list ── */
.dm-threads{display:flex;flex-direction:column}
.dm-thread{display:flex;align-items:center;gap:10px;width:100%;text-align:left;position:relative;
  padding:10px 10px;border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer;color:var(--muted);
  transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.dm-thread:hover{background:var(--surface-hover);color:var(--text)}
.dm-thread-active{background:linear-gradient(90deg,rgba(var(--brand-rgb),.14),rgba(var(--brand-rgb),.02));color:var(--text);box-shadow:inset 3px 0 0 var(--brand)}
.dm-thread-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.dm-thread-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dm-thread-name{font-size:var(--fs-base);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-thread-time{font-size:var(--fs-xs);color:var(--muted-2);flex-shrink:0}
.dm-thread-prev{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-thread.unread .dm-thread-prev{color:var(--text-soft);font-weight:500}
.dm-unread-dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--brand);flex-shrink:0}
/* pane placeholder (shown until a thread is chosen) */
.dm-placeholder{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--muted);text-align:center;padding:32px}
.dm-placeholder i{font-size:32px;color:var(--muted-2)}
.dm-placeholder span{font-size:var(--fs-base)}
.dm-pane-empty .dm-placeholder{display:flex}
.dm-pane-empty #dm-messages{display:none}
.dm-pane-empty #dm-conn{visibility:hidden}
/* sidebar nav unread badge (dashboard) — mirrors .bell-badge */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;min-width:18px;height:18px;
  padding:0 5px;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-size:var(--fs-xs);font-weight:700;line-height:1}
/* students roster: Message action column */
.stu-action{text-align:right}
.stu-action-h{text-align:right}

/* ── announcements feed ── */
.feed-list{display:flex;flex-direction:column;gap:16px;max-width:720px}
.ann-card{padding:24px}
.ann-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ann-av{width:36px;height:36px;flex-shrink:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);font-weight:700;color:var(--brand-hi);background:rgba(var(--brand-rgb),.10);border:1px solid rgba(var(--brand-rgb),.20)}
.ann-by{font-size:var(--fs-base);font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.ann-date{font-size:var(--fs-sm);color:var(--muted-2);margin-top:1px}
.ann-title{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;color:var(--ink-strong);margin:0 0 8px;line-height:1.3}
.ann-body{font-size:var(--fs-base);line-height:1.65;color:var(--text-soft);white-space:pre-wrap;word-break:break-word}
.ann-composer{max-width:720px;display:flex;flex-direction:column;gap:8px}
.ann-input,.ann-textarea{width:100%;padding:8px 12px;font:inherit;font-size:var(--fs-base)}
.ann-input{font-weight:600}
.ann-textarea{resize:vertical;line-height:1.5;min-height:70px}
.ann-composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.ann-error{font-size:var(--fs-sm);color:var(--brand-hi)}

/* ── responsive table → stacked cards on mobile (no clipping at 390px) ── */
@media(max-width:640px){
  .rtable thead{display:none}
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable tr{background:linear-gradient(180deg,var(--row-top),var(--row-bot));border:1px solid var(--border);
    border-radius:var(--r-md);padding:12px 12px;margin-bottom:8px}
  .rtable tr:last-child{margin-bottom:0}
  .rtable td{border:0;padding:4px 0;text-align:left}
  .rtable td:not(:first-child){display:flex;align-items:center;justify-content:space-between;gap:12px}
  .rtable td:not(:first-child)::before{content:attr(data-label);color:var(--muted);
    font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
  .rtable td:first-child{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--border)}
}

/* ── teacher panel (Phase 4): add/manage classes + students roster ── */
.tp-form{max-width:820px}
.tp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.tp-label{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.tp-opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted-2)}
.tp-input{width:100%;padding:8px 12px;font:inherit;font-size:var(--fs-base);text-transform:none;letter-spacing:normal;color:var(--text)}
.tp-span{grid-column:1/-1}
.tp-bio-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.tp-bio-row .tp-input{flex:1;min-width:0}
@media(max-width:640px){ .tp-bio-row{flex-direction:column;align-items:stretch} .tp-bio-row .tp-btn{justify-content:center} }
.tp-form-foot{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.tp-form-foot .btn-primary,.tp-form-foot .btn-ghost{margin-left:0}
.tp-form-foot .btn-primary{margin-left:auto}
.tp-ok{font-size:var(--fs-sm);color:var(--pos);font-weight:600}
.tp-list{display:flex;flex-direction:column;gap:12px}
.tp-row{display:flex;align-items:center;gap:16px;padding:16px 16px}
.tp-row-actions{display:flex;align-items:center;gap:8px}
.tp-btn{padding:8px 12px;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.stu-cell{display:flex;align-items:center;gap:8px;min-width:0}
.stu-name{font-size:var(--fs-base);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stu-code{font-family:'Space Mono',ui-monospace,monospace;font-size:var(--fs-sm);color:var(--ink);font-weight:700}
.stu-table td{vertical-align:middle}

@media(max-width:640px){
  .tp-grid{grid-template-columns:minmax(0,1fr)}
  .tp-form-foot .btn-primary{margin-left:0;width:100%;justify-content:center}
  .tp-row{flex-direction:column;align-items:flex-start;gap:12px}
  .tp-row-actions{width:100%}
  .tp-row-actions .tp-edit{flex:1;justify-content:center}
  /* students roster: full-width Message button on stacked cards */
  .stu-action::before{display:none}
  .stu-action .tp-btn{width:100%;justify-content:center}
}

/* live-now class card: Join button stacks full-width on phones (no clipping) */
@media(max-width:640px){
  .live-now-card .lc-join{width:100%}
  .live-now-card .lc-join a{display:block;text-align:center}
}

/* ── admin panel (Phase 5): stat tiles, user/product rows, toggle switch ── */
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat-tile{background:linear-gradient(180deg,var(--card-top),var(--card-bot));border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px 16px;box-shadow:var(--shadow)}
.stat-ic{width:34px;height:34px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;
  background:var(--tile-bg,rgba(var(--brand-rgb),.10));color:var(--brand-hi);font-size:var(--fs-base);margin-bottom:12px}
.stat-val{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.02em;color:var(--ink-strong);font-variant-numeric:tabular-nums;line-height:1}
.stat-lbl{font-size:var(--fs-sm);color:var(--muted);margin-top:8px;font-weight:500}
.admin-defer{font-size:var(--fs-sm);color:var(--banner-fg);background:rgba(234,179,8,.10);
  border:1px solid rgba(234,179,8,.28);border-radius:var(--r-sm);padding:12px 12px}
.admin-defer strong{font-weight:700}

.adm-table td{vertical-align:middle}
.adm-actions{text-align:right;white-space:nowrap}
.adm-actions .adm-btn{margin-left:8px}
.adm-btn{padding:8px 12px;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}

.adm-people{display:flex;flex-direction:column;gap:12px}
.adm-person{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px}
.adm-prod{display:flex;align-items:center;gap:16px;padding:12px 16px}

/* tutor "Teaches" audience picker (Tutors tab) — action area wraps on narrow screens */
.adm-person>.shrink-0{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.tp-fixedcat{display:flex;align-items:center;min-height:38px}
.adm-teaches{display:inline-flex;align-items:center;gap:8px}
.adm-teaches-lbl{font-size:var(--fs-sm);color:var(--muted)}
.adm-teaches-sel{padding:7px 10px;font-size:var(--fs-sm)}
.adm-teaches-note{font-size:var(--fs-xs);color:var(--muted);min-width:42px}
.adm-teaches-note.is-ok{color:var(--pos)}
.adm-teaches-note.is-err{color:var(--brand)}

/* toggle switch */
.switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;cursor:pointer;background:var(--track);border:1px solid var(--border-strong);
  border-radius:var(--r-pill);transition:background var(--t-base),border-color var(--t-base)}
.switch .slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform var(--t-base)}
.switch input:checked + .slider{background:linear-gradient(180deg,#d8323f,#C8202F);border-color:transparent}
.switch input:checked + .slider:before{transform:translateX(18px)}
.switch input:disabled + .slider{opacity:.6;cursor:default}

@media(max-width:640px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adm-actions{text-align:left}
  .adm-person,.adm-prod{flex-wrap:wrap}
}

/* ═══ DESIGN TEARDOWN — top-5 fixes ═══════════════════════════════════════ */

/* ── Fix 4: designed empty state ── */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:48px 24px}
.empty-ic{font-size:36px;color:var(--muted-2);line-height:1;margin-bottom:4px}
.empty-title{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:600;color:var(--text);letter-spacing:-.01em}
.empty-sub{font-size:var(--fs-base);color:var(--muted);max-width:36ch;line-height:1.5}
.empty-state .btn-primary{margin-top:4px;text-decoration:none}

/* ── Fix 4: skeleton loaders (shimmer) ── */
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel{background:linear-gradient(90deg,var(--track) 25%,var(--surface-hover) 50%,var(--track) 75%);
  background-size:200% 100%;animation:skel-shimmer 1.4s ease infinite;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){ .skel{animation:none} .live-dot{animation:none} }
.skel-card{height:184px;border-radius:var(--r-lg)}
.skel-row{height:56px;border-radius:var(--r-md);margin-bottom:12px}
.skel-line{height:12px;border-radius:var(--r-pill)}

/* ── Fix 1: dashboard hero north-star ── */
.hero-block{padding:4px 0 8px}
.hero-label{font-size:var(--fs-sm);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.hero-stat{font-family:var(--font-display);font-size:48px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--ink-strong);
  font-variant-numeric:tabular-nums;margin-top:8px}
.hero-delta{margin-top:8px}
.hero-empty{border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--card-top)}

/* ── Fix 1: collapsed onboarding (44px row) ── */
.ob-collapsed{display:flex;align-items:center;gap:16px;height:44px;padding:0 16px;cursor:pointer;
  background:linear-gradient(180deg,var(--card-top),var(--card-bot));border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--shadow);transition:border-color var(--t-fast)}
.ob-collapsed:hover{border-color:var(--border-strong)}
.ob-collapsed .ob-bar{max-width:180px}
.ob-collapsed-txt{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;font-weight:500}
.ob-collapsed-chev{margin-left:auto;color:var(--muted-2);font-size:var(--fs-sm)}

/* ── Fix 2: view transition cross-fade (guarded for reduced motion) ── */
::view-transition-old(root),::view-transition-new(root){animation-duration:120ms;animation-timing-function:ease}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ── Fix 5: Cmd+K command palette ── */
.cmdk-backdrop{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.cmdk-backdrop.cmdk-on{display:flex}
.cmdk-panel{width:min(560px,100%);background:linear-gradient(180deg,var(--card-top),var(--card-bot));
  border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-hover);overflow:hidden}
.cmdk-input-row{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border)}
.cmdk-search-ic{color:var(--muted);font-size:var(--fs-base)}
.cmdk-input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text);font-size:var(--fs-md);font-family:inherit}
.cmdk-input::placeholder{color:var(--muted-2)}
.cmdk-hint{font-size:var(--fs-xs);color:var(--muted-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:2px 8px;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
.cmdk-list{max-height:min(420px,60vh);overflow:auto;padding:8px}
.cmdk-sec{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px 12px 4px;font-weight:600}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r-sm);cursor:pointer;color:var(--text);font-size:var(--fs-base)}
.cmdk-ic{width:28px;height:28px;flex-shrink:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  background:var(--inset);border:1px solid var(--border);color:var(--muted);font-size:var(--fs-sm)}
.cmdk-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-kind{margin-left:auto;font-size:var(--fs-xs);color:var(--muted-2);flex-shrink:0}
.cmdk-item-sel{background:var(--surface-hover)}
.cmdk-item-sel .cmdk-ic{color:var(--text);border-color:var(--border-strong)}
.cmdk-empty{padding:24px;text-align:center;color:var(--muted);font-size:var(--fs-base)}