/* ════════════════════════════════════════════════════════
   ProCarma LMS — Premium Design System v2
   Aesthetic: Linear / Vercel — dark, precise, restrained
   ════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{text-decoration:none;color:inherit}
ul{list-style:none}

:root{
  /* Surfaces — near-black, barely-differentiated layers */
  --bg:        #08080a;
  --bg-1:      #0d0d10;
  --bg-2:      #131316;
  --bg-3:      #1a1a1e;
  --bg-hover:  #18181c;
  --card:      #0e0e11;
  --card-2:    #16161a;
  /* Translucent so the blurred top bar keeps its frosted look */
  --topbar-bg: rgba(8,8,10,0.72);

  /* Borders — hairline, low-opacity */
  --border:      rgba(255,255,255,0.07);
  --border-2:    rgba(255,255,255,0.12);
  --border-focus:rgba(255,255,255,0.22);

  /* Text */
  --text:      #eeeef0;
  --text-2:    #9a9aa2;
  --text-3:    #5c5c64;
  --text-4:    #38383e;

  /* Brand — ProCarma. Sampled from the corporate mark. */
  --brand-cyan:   #1FA4DF;
  --brand-cyan-2: #25A6E7;
  --brand-teal:   #107999;
  --brand-teal-2: #0E5E75;
  --brand-gold:   #EFA828;

  /* Accent — the brand cyan, used sparingly */
  --accent:      #1FA4DF;
  --accent-2:    #4FC0F0;
  --accent-dim:  rgba(31,164,223,0.12);
  --accent-line: rgba(31,164,223,0.30);
  --accent-glow: rgba(31,164,223,0.18);

  /* Button system — cyan → teal primary, soft glass secondary */
  --btn-grad:        linear-gradient(180deg, #1B5C74 0%, #164E62 100%);
  --btn-grad-hover:  linear-gradient(180deg, #1FA4DF 0%, #16809f 100%);
  --btn-text:        #CDEBFA;
  --btn-text-hover:  #FFFFFF;
  --btn-border:      rgba(79,192,240,0.38);
  --btn-grad-hover:  linear-gradient(135deg, #4FC0F0 0%, #25A6E7 45%, #1FA4DF 100%);
  --btn-grad-gold:   linear-gradient(135deg, #F0B84A 0%, #EFA828 50%, #C4840A 100%);
  --btn-glass:       linear-gradient(160deg, rgba(31,164,223,0.18) 0%, rgba(16,121,153,0.10) 100%);
  --btn-glass-border:rgba(79,192,240,0.38);
  --btn-shadow:      0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 3px rgba(0,0,0,0.25);
  --btn-shadow-lg:   0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 28px rgba(31,164,223,0.38);
  --btn-radius:      10px;
  --btn-radius-pill: 999px;

  /* Semantic — muted, drawn from the brand where possible */
  --green:     #3ba776;
  --green-dim: rgba(59,167,118,0.12);
  --red:       #e5534b;
  --red-dim:   rgba(229,83,75,0.12);
  /* Gold matches the chevron on the corporate mark */
  --amber:     #EFA828;
  --amber-dim: rgba(239,168,40,0.14);
  /* Teal stands in for the old purple so status colours stay on-brand */
  --purple:    #107999;
  --purple-dim:rgba(16,121,153,0.14);

  --r-sm: 6px;
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tr: 0.15s var(--ease);

  color-scheme: dark;
}

/* ── Light theme ──────────────────────────────────────────────
   Every component already reads these variables, so the whole UI
   flips by swapping the palette. The --brand-* values are left
   untouched so the logo keeps its exact corporate colours.       */
html[data-theme="light"]{
  --bg:        #f5f6f8;
  --bg-1:      #ffffff;
  --bg-2:      #f0f1f4;
  --bg-3:      #e4e6eb;
  --bg-hover:  #eaecf0;
  --card:      #ffffff;
  --card-2:    #f7f8fa;
  --topbar-bg: rgba(255,255,255,0.75);

  --border:      rgba(10,13,20,0.10);
  --border-2:    rgba(10,13,20,0.16);
  --border-focus:rgba(10,13,20,0.30);

  --text:      #12141a;
  --text-2:    #535863;
  --text-3:    #7c8291;
  --text-4:    #a9aeba;

  /* Deeper than the dark-mode cyan so it stays legible on white */
  --accent:      #1187c4;
  --accent-2:    #0d6a99;
  --accent-dim:  rgba(17,135,196,0.10);
  --accent-line: rgba(17,135,196,0.35);
  --accent-glow: rgba(17,135,196,0.14);

  --btn-grad:        linear-gradient(180deg, #E4F4FC 0%, #CFEBF8 100%);
  --btn-grad-hover:  linear-gradient(180deg, #1FA4DF 0%, #1187c4 100%);
  --btn-text:        #0B5D78;
  --btn-text-hover:  #FFFFFF;
  --btn-border:      rgba(31,164,223,0.42);
  --btn-grad-hover:  linear-gradient(135deg, #25A6E7 0%, #1FA4DF 50%, #107999 100%);
  --btn-grad-gold:   linear-gradient(135deg, #F0B84A 0%, #EFA828 50%, #C4840A 100%);
  --btn-glass:       linear-gradient(160deg, rgba(17,135,196,0.12) 0%, rgba(14,94,117,0.08) 100%);
  --btn-glass-border:rgba(17,135,196,0.40);
  --btn-shadow:      0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(11,93,120,0.10);
  --btn-shadow-lg:   0 1px 0 rgba(255,255,255,0.45) inset, 0 8px 22px rgba(17,135,196,0.30);

  --green:     #1c8055;
  --green-dim: rgba(28,128,85,0.12);
  --red:       #c33630;
  --red-dim:   rgba(195,54,48,0.10);
  --amber:     #c4840a;
  --amber-dim: rgba(196,132,10,0.12);
  --purple:    #0E5E75;
  --purple-dim:rgba(14,94,117,0.12);

  color-scheme: light;
}
/* The hero's faint white grid is invisible on a light canvas */
html[data-theme="light"] .login-left::before{
  background-image:
    linear-gradient(rgba(10,13,20,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,13,20,.045) 1px,transparent 1px);
}

.theme-ico{display:block;font-size:16px}

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:13.5px;
  line-height:1.55;
  letter-spacing:-0.006em;
  font-feature-settings:'ss01' 1,'cv01' 1;
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text-4)}
::selection{background:var(--accent-dim);color:var(--text)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ═══════════════ SHELL ═══════════════ */
.shell{display:flex;min-height:100vh}

/* ═══════════════ SIDEBAR ═══════════════ */
.sidebar{
  width:236px;flex-shrink:0;background:var(--bg-1);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sb-top{
  display:flex;align-items:center;gap:14px;
  padding:20px 16px 18px;
}
.sb-mark{
  width:52px;height:52px;flex-shrink:0;display:block;object-fit:contain;
  border-radius:50%;background:#fff;
  filter:drop-shadow(0 2px 10px rgba(31,164,223,.28));
}
.sb-mark--lockup{
  border-radius:10px;background:transparent;
  filter:drop-shadow(0 2px 8px rgba(0,40,90,.22));
}
.sb-name{font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:var(--text)}

/* ── Brand lockup (mark + wordmark), matches the corporate logo ── */
.brand-word{font-weight:700;letter-spacing:.055em;line-height:1;color:var(--text);white-space:nowrap}
.brand-word em{font-style:normal;color:var(--brand-cyan)}
.brand-tag{
  font-size:7px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--text-3);margin-top:3px;white-space:nowrap;
}
.sb-brand .brand-word{font-size:18px;letter-spacing:.06em}
.sb-brand .brand-tag{font-size:8px;letter-spacing:.18em;margin-top:5px}
.sb-role-pill{
  display:inline-block;font-size:9.5px;font-weight:600;padding:1px 6px;
  border-radius:4px;margin-top:5px;letter-spacing:.02em;
}
.rp-dealer{background:var(--amber-dim);color:var(--amber)}
.rp-admin{background:var(--accent-dim);color:var(--accent-2)}
.rp-manager{background:var(--purple-dim);color:var(--purple)}
.rp-learner{background:rgba(16,121,153,.12);color:var(--brand-teal)}

.sb-search{
  margin:2px 12px 10px;padding:6px 9px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);
  display:flex;align-items:center;gap:7px;cursor:pointer;
  transition:border-color var(--tr),background var(--tr);
}
.sb-search:hover{border-color:var(--border-2);background:var(--bg-3)}
.sb-search i{font-size:13.5px;color:var(--text-3)}
.sb-search span{font-size:12px;color:var(--text-3);flex:1}
.sb-search kbd{
  font-family:var(--font-mono);font-size:10px;color:var(--text-3);
  background:var(--bg-3);border:1px solid var(--border-2);border-radius:4px;
  padding:1px 5px;line-height:1.4;
}

.sb-nav{flex:1;padding:2px 10px 10px;overflow-y:auto}
.sb-sec{margin-bottom:4px}
.sb-sec + .sb-sec{margin-top:16px}
.sb-sec-lbl{
  font-size:10px;font-weight:600;color:var(--text-4);
  text-transform:uppercase;letter-spacing:.07em;
  padding:0 8px;margin-bottom:5px;
}
.sb-i{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:9px;
  color:var(--text-2);cursor:pointer;font-size:12.8px;font-weight:450;
  transition:background var(--tr),color var(--tr),box-shadow var(--tr),transform var(--tr);
  position:relative;white-space:nowrap;border:1px solid transparent;background:transparent;
  width:100%;text-align:left;
}
.sb-i:hover{background:var(--bg-hover);color:var(--text);border-color:var(--border)}
.sb-i.on{
  background:linear-gradient(135deg,rgba(31,164,223,.16),rgba(14,94,117,.08));
  color:var(--accent-2);font-weight:600;
  border-color:rgba(31,164,223,.28);
  box-shadow:inset 0 0 0 1px rgba(31,164,223,.08), 0 0 18px rgba(31,164,223,.08);
}
.sb-i.on::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand-cyan),var(--brand-gold));
}
.sb-i i{font-size:15px;width:16px;flex-shrink:0;opacity:.85}
.sb-i.on i{opacity:1;color:var(--brand-cyan)}
.sub-arrow{margin-left:auto !important;width:auto !important;font-size:12px;transition:transform var(--tr);opacity:.6}
.sb-i.open .sub-arrow{transform:rotate(180deg)}
.sb-sub{display:none;padding-left:12px;margin-top:1px;border-left:1px solid var(--border);margin-left:16px}
.sb-sub.open{display:block;animation:fadeUp .12s var(--ease)}
.sb-i.sub{font-size:12.2px;padding:5px 8px}
.sb-badge{
  margin-left:auto;font-size:9.5px;font-weight:600;padding:1px 6px;
  border-radius:8px;background:var(--bg-3);color:var(--text-2);
}
.sb-badge.r{background:var(--red-dim);color:var(--red)}
.sb-badge.g{background:var(--green-dim);color:var(--green)}
.sb-badge.a{background:var(--accent-dim);color:var(--accent-2)}

.sb-foot{padding:10px;border-top:1px solid var(--border)}
.sb-user{
  display:flex;align-items:center;gap:9px;padding:7px 8px;
  border-radius:var(--r-sm);cursor:pointer;transition:background var(--tr);
}
.sb-user:hover{background:var(--bg-hover)}
.sb-uname{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-urole{font-size:10.5px;color:var(--text-3)}

/* ═══════════════ AVATAR ═══════════════ */
.av{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:650;flex-shrink:0;letter-spacing:-.02em;
}
.av-accent{background:linear-gradient(135deg,var(--brand-cyan),var(--brand-teal));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}

/* ═══════════════ TOPBAR ═══════════════ */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:30;height:52px;
  background:var(--topbar-bg);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:10px;
}
.tb-title{font-size:13.5px;font-weight:600;flex:1;letter-spacing:-0.01em;color:var(--text)}
.tb-search{position:relative;width:230px;display:none}
.tb-btn{
  width:32px;height:32px;border-radius:var(--btn-radius);
  border:1px solid transparent;background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-2);position:relative;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}
.tb-btn:hover{
  background:var(--btn-glass);border-color:var(--btn-glass-border);
  color:var(--accent-2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.tb-btn i{font-size:16px}
.n-dot{position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--bg)}

/* ═══════════════ ALERTS ═══════════════ */
.alert{
  display:flex;align-items:center;gap:10px;padding:9px 20px;
  font-size:12.5px;border-bottom:1px solid var(--border);
  animation:fadeUp .2s var(--ease);
}
.alert-success{background:var(--green-dim);color:var(--green)}
.alert-danger{background:var(--red-dim);color:var(--red)}
.alert-close{margin-left:auto;background:none;border:none;cursor:pointer;color:inherit;opacity:.6;font-size:15px}
.alert-close:hover{opacity:1}

/* ═══════════════ CONTENT ═══════════════ */
/* Fluid gutters: one rule that scales continuously from a 320px phone to a 1440px monitor,
   rather than jumping between hard-coded values at a breakpoint. max(...) against the safe-area
   insets keeps content clear of the notch and the rounded corners in landscape without needing
   a device-specific rule. */
.content{
  padding-top:clamp(18px,2.2vw,28px);
  padding-bottom:calc(clamp(30px,4vw,48px) + env(safe-area-inset-bottom));
  padding-left:max(clamp(14px,2.6vw,32px),env(safe-area-inset-left));
  padding-right:max(clamp(14px,2.6vw,32px),env(safe-area-inset-right));
  flex:1;overflow-y:auto;max-width:1400px;
}

/* ═══════════════ PAGE HEADERS ═══════════════ */
.pg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.pg-head h2{font-size:19px;font-weight:650;letter-spacing:-0.02em}
.pg-greeting{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:32px;gap:16px;flex-wrap:wrap}
.pg-h1{
  font-size:44px;font-weight:700;letter-spacing:-0.04em;margin-bottom:8px;
  color:var(--text);line-height:1.12;
}
.pg-h1 em{font-style:normal;color:var(--brand-cyan);font-weight:700}
.greet-name{position:relative;display:inline-block;padding-top:.55em}
.greet-cap{
  position:absolute;left:50%;top:0;transform:translate(-50%,-18%);
  font-size:.62em;line-height:1;color:var(--brand-cyan);opacity:.95;
  pointer-events:none;
}
.pg-sub{font-size:15.5px;color:var(--text-2);line-height:1.5;max-width:520px}
.count-badge{font-size:13px;font-weight:400;color:var(--text-3);margin-left:6px}
.streak-pill{
  display:flex;align-items:center;gap:7px;
  background:var(--amber-dim);border:1px solid rgba(239,168,40,.28);
  border-radius:100px;padding:8px 16px;white-space:nowrap;
}
.streak-pill i{color:var(--amber);font-size:15px}
.streak-pill span{font-size:12.5px;font-weight:550;color:var(--amber)}

/* ═══════════════ KPI GRID — ProCarma brand tiles ═══════════════ */
.kpi-grid{
  display:grid;gap:14px;margin-bottom:28px;
  background:transparent;border:none;
}
/* Column counts are a ceiling, not a fixed number: auto-fit collapses them as space runs out,
   so these reflow continuously at any width instead of snapping at two or three breakpoints.
   min() keeps a single card full-width on a narrow phone rather than overflowing.
   Written so a device we have never tested — a foldable, a split-screen tablet, a resized
   desktop window — lands somewhere sensible without needing a new breakpoint. */
.kpi-5{grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr))}
.kpi-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.kpi-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.kpi{
  --kpi-tone: var(--brand-cyan);
  --kpi-tone-2: var(--brand-teal);
  position:relative;overflow:hidden;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px 18px 18px;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.kpi::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;
  background:var(--kpi-tone);
}
.kpi:hover{
  transform:translateY(-2px);
  border-color:rgba(31,164,223,.35);
  box-shadow:0 8px 22px rgba(14,94,117,.08);
}
html[data-theme="light"] .kpi{
  background:#fff;
  box-shadow:0 1px 2px rgba(14,94,117,.04);
}
html[data-theme="light"] .kpi:hover{
  box-shadow:0 10px 24px rgba(14,94,117,.08);
}
/* Plain brand glyph — no candy tiles / glow */
.kpi-icon{
  width:auto;height:auto;margin:0 0 14px;padding:0;
  display:flex;align-items:center;justify-content:flex-start;
  background:none;border:none;box-shadow:none;border-radius:0;
  font-size:24px;line-height:1;color:var(--kpi-tone);
  position:relative;z-index:1;
}
.kpi-icon i{font-size:inherit;stroke-width:1.5}
.kpi-val{
  font-size:30px;font-weight:700;line-height:1;margin-bottom:6px;
  letter-spacing:-0.04em;font-variant-numeric:tabular-nums;
  position:relative;z-index:1;color:var(--text);
}
.kpi-lbl{
  font-size:12px;color:var(--text-2);font-weight:550;
  letter-spacing:.02em;position:relative;z-index:1;
  text-transform:none;
}
.kpi-sub{font-size:11px;margin-top:8px;font-weight:500;display:flex;align-items:center;gap:3px;position:relative;z-index:1}

/* Brand-only tones — cyan / teal / gold */
.kpi-cyan{--kpi-tone:var(--brand-cyan);--kpi-tone-2:var(--brand-cyan-2)}
.kpi-teal{--kpi-tone:var(--brand-teal);--kpi-tone-2:var(--brand-teal-2)}
.kpi-gold{--kpi-tone:var(--brand-gold);--kpi-tone-2:#c4840a}
.kpi-green{--kpi-tone:var(--brand-teal);--kpi-tone-2:var(--brand-teal-2)}
.kpi-red{--kpi-tone:var(--brand-teal-2);--kpi-tone-2:var(--brand-teal)}
.up{color:var(--brand-teal)}.dn{color:var(--red)}.neu{color:var(--text-3)}

.td-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;transition:border-color var(--tr)}
.td-card:hover{border-color:var(--border-2)}
/* KPI tiles that act as list filters (Course Reports). Buttons need the text alignment and
   font reset a div got for free; .is-active marks the one currently driving the list. */
.td-card--filter{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;display:block}
.td-card--filter:hover{border-color:var(--accent)}
.td-card--filter.is-active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.td-card--filter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.td-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13.5px;margin-bottom:12px}
.td-val{font-size:24px;font-weight:600;line-height:1;margin-bottom:4px;letter-spacing:-0.03em}
.td-lbl{font-size:11.5px;color:var(--text-3)}

/* ═══════════════ LAYOUT GRID ═══════════════ */
.dash-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;margin-bottom:20px}
.dash-side{display:flex;flex-direction:column;gap:20px}

/* ═══════════════ PANELS ═══════════════ */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--tr)}
.ph{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border)}
.ph-title{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px;color:var(--text);letter-spacing:-0.005em}
.ph-title i{font-size:14px;opacity:.85}
.ph-act{font-size:11.5px;color:var(--text-2);background:none;border:none;cursor:pointer;font-family:inherit;transition:color var(--tr);font-weight:500;text-decoration:none}
.ph-act:hover{color:var(--accent-2)}
/* Panel header CTAs — brand gradient pills */
.ph > a.ph-act,.ph > .ph-act.brand{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--btn-radius-pill);
  font-size:11px;font-weight:650;letter-spacing:.02em;
  color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,0.12);
  background:var(--btn-grad);
  box-shadow:var(--btn-shadow);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);
}
.ph > a.ph-act:hover,.ph > .ph-act.brand:hover{
  color:#fff;filter:brightness(1.08);
  background:var(--btn-grad-hover);
  transform:translateY(-1px);
  box-shadow:var(--btn-shadow-lg);
}
.ph > a.ph-act:active,.ph > .ph-act.brand:active{transform:translateY(0);filter:brightness(.97)}
.ph > a.ph-act i,.ph > .ph-act.brand i{font-size:13px;opacity:.95}
.panel-body{padding:14px 18px}

/* ═══════════════ STATUS LIST ═══════════════ */
.status-list{padding:6px 0}
.status-row{display:flex;align-items:center;gap:10px;padding:9px 18px;border-bottom:1px solid var(--border);font-size:12.5px}
.status-row:last-child{border-bottom:none}
.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ms-auto{margin-left:auto}

/* ═══════════════ PROGRESS ═══════════════ */
.prog-bar{height:4px;background:var(--bg-3);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;border-radius:2px;background:var(--accent);transition:width .5s var(--ease)}
.prog-row{display:flex;align-items:center;gap:8px}
.prog-row .prog-bar{flex:1}
.prog-pct{font-size:11px;font-weight:600;min-width:32px;text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums}
.prog-row-item{margin-bottom:14px}
.prog-row-item:last-child{margin-bottom:0}
.pri-header{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.pri-title{color:var(--text);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px}
.pri-stat{color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ═══════════════ COURSE ROWS ═══════════════ */
.course-row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--tr)}
.course-row:last-child{border-bottom:none}
.course-row:hover{background:var(--bg-hover)}
.cr-thumb{width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
.cr-inf{flex:1;min-width:0}
.cr-title{font-size:12.8px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;color:var(--text)}
.cr-meta{font-size:11px;color:var(--text-3)}
.cr-prog{margin-top:6px}
.cr-prow{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-3);margin-top:4px}

/* ═══════════════ TABS ═══════════════ */
.ctabs{display:flex;border-bottom:1px solid var(--border);padding:0 8px}
.ctab{padding:11px 10px;font-size:12.5px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-3);cursor:pointer;font-family:inherit;transition:color var(--tr);white-space:nowrap;font-weight:500;margin:0 2px}
.ctab.on{color:var(--text);border-bottom-color:var(--accent)}
.ctab:hover:not(.on){color:var(--text-2)}

/* ═══════════════ COURSE GRID ═══════════════ */
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px}
.cc{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:border-color var(--tr),transform var(--tr)}
.cc:hover{border-color:var(--border-2);transform:translateY(-1px)}
.cc-top{height:96px;display:flex;align-items:center;justify-content:center;font-size:32px;position:relative;background:var(--bg-2)}
.cc-badge{position:absolute;top:8px;right:8px}
.cc-body{padding:14px 16px}
.cc-cat{font-size:9.5px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-2);margin-bottom:6px}
.cc-title{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:8px;letter-spacing:-0.005em}
.cc-meta{display:flex;gap:12px;font-size:11px;color:var(--text-3);margin-bottom:10px}
.cc-prog-row{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-3);margin-top:5px}
.cc-btn{
  width:100%;padding:9px 12px;border-radius:var(--btn-radius);
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:10px;
  border:1px solid var(--btn-glass-border);
  background:var(--btn-glass);color:var(--accent-2);
  box-shadow:0 0 0 1px rgba(31,164,223,0.06),inset 0 1px 0 rgba(255,255,255,0.06);
  transition:all .18s var(--ease);
}
.cc-btn:hover{
  background:var(--btn-grad);border-color:rgba(255,255,255,0.14);
  color:#fff;box-shadow:var(--btn-shadow);transform:translateY(-1px);
}

/* ═══════════════ TABLE ═══════════════ */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}

/* ═══════════════ LIST PAGER ═══════════════ */
/* Added by app.js under any .tbl longer than one page. Sits inside the table's panel so it
   reads as part of the list rather than a floating control. */
.pager{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:12px 14px;border-top:1px solid var(--border);
}
.pager-info{font-size:12px;color:var(--text-2);min-width:120px;text-align:center}
.pager button[disabled]{opacity:.4;cursor:default;pointer-events:none}
.tbl th{padding:9px 14px;text-align:left;font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg-1)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}

/* Grouped attempts / submissions — one row per learner, expand for history */
.attempt-group-row{cursor:pointer;transition:background var(--tr)}
.attempt-group-row:hover{background:var(--bg-hover)}
.attempt-group-row.open{background:var(--accent-dim)}
.attempt-group-row .attempt-chevron{transition:transform .15s var(--ease);color:var(--text-3);font-size:14px}
.attempt-group-row.open .attempt-chevron{transform:rotate(90deg);color:var(--accent-2)}
.attempt-group-block{border-bottom:1px solid var(--border)}
.attempt-group-block:last-child{border-bottom:none}
.attempt-group-head{
  width:100%;display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:transparent;border:none;color:inherit;font-family:inherit;cursor:pointer;
  text-align:left;transition:background var(--tr);
}
.attempt-group-head:hover{background:var(--bg-hover)}
.attempt-group-head.open{background:var(--accent-dim)}
.attempt-group-head .attempt-chevron{transition:transform .15s var(--ease);color:var(--text-3);font-size:14px;flex-shrink:0}
.attempt-group-head.open .attempt-chevron{transform:rotate(90deg);color:var(--accent-2)}
.attempt-group-body{background:var(--bg-2);border-top:1px solid var(--border)}
.attempt-group-body .asub-card:last-child{border-bottom:none}
.attempt-detail-row td{border-bottom:1px solid var(--border)!important}
.tbl tbody tr{transition:background var(--tr)}
.tbl tbody tr:hover td{background:var(--bg-hover)}
.tbl-user{display:flex;align-items:center;gap:9px}
.tbl-av{width:26px;height:26px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:650;background:var(--accent-dim);color:var(--accent-2)}
.tbl-actions{display:flex;gap:6px}
.online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-left:5px;vertical-align:middle;box-shadow:0 0 0 2px var(--card)}

/* ═══════════════ TAGS — subtle, no heavy fills ═══════════════ */
.tag{display:inline-flex;align-items:center;font-size:10px;font-weight:600;padding:2.5px 8px;border-radius:5px;white-space:nowrap;letter-spacing:.01em}
.tag-g{background:var(--green-dim);color:var(--green)}
.tag-r{background:var(--red-dim);color:var(--red)}
.tag-a{background:var(--accent-dim);color:var(--accent-2)}
.tag-o{background:var(--amber-dim);color:var(--amber)}
.tag-gold{background:var(--amber-dim);color:var(--amber)}
.tag-pu{background:var(--purple-dim);color:var(--purple)}
.tag-gr{background:var(--bg-3);color:var(--text-2)}

/* ═══════════════ BUTTONS — futuristic brand system ═══════════════ */
.btn-add,
a.btn-add{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;border-radius:var(--btn-radius);
  border:1px solid var(--btn-border);
  background:var(--btn-grad);color:var(--btn-text);
  font-size:12.5px;font-weight:650;letter-spacing:.015em;
  cursor:pointer;font-family:inherit;white-space:nowrap;text-decoration:none;
  box-shadow:var(--btn-shadow);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease),background .18s var(--ease);
  position:relative;overflow:hidden;
}
.btn-add::before,
a.btn-add::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,0.18) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .45s var(--ease);
  pointer-events:none;
}
.btn-add:hover,
a.btn-add:hover{
  background:var(--btn-grad-hover);color:#fff;
  transform:translateY(-1px);box-shadow:var(--btn-shadow-lg);filter:brightness(1.04);
}
.btn-add:hover::before,
a.btn-add:hover::before{transform:translateX(120%)}
.btn-add:active,
a.btn-add:active{transform:translateY(0);filter:brightness(.97)}
.btn-add i{font-size:14px;opacity:.95}

.act-btn,
a.act-btn,
button.act-btn,
label.act-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 13px;border-radius:var(--btn-radius-pill);
  font-size:11.5px;font-weight:650;letter-spacing:.01em;
  border:1px solid var(--btn-glass-border);
  background:var(--btn-glass);color:var(--accent-2);
  cursor:pointer;white-space:nowrap;font-family:inherit;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 2px 8px rgba(31,164,223,0.08);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.act-btn:hover,
a.act-btn:hover,
button.act-btn:hover,
label.act-btn:hover{
  background:var(--btn-grad);color:var(--btn-text);
  border-color:rgba(255,255,255,0.16);
  box-shadow:var(--btn-shadow);transform:translateY(-1px);
}
.act-btn:active,
a.act-btn:active,
button.act-btn:active{transform:translateY(0)}
.act-btn i{font-size:13px}

.act-btn.danger,
a.act-btn.danger,
button.act-btn.danger{
  border-color:rgba(229,83,75,.38);
  background:linear-gradient(160deg,rgba(229,83,75,.16) 0%,rgba(229,83,75,.06) 100%);
  color:var(--red);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.act-btn.danger:hover,
a.act-btn.danger:hover,
button.act-btn.danger:hover{
  background:linear-gradient(135deg,#ee6a62 0%,#e5534b 55%,#c43c3c 100%);
  color:#fff;border-color:rgba(255,255,255,0.12);
  box-shadow:0 1px 0 rgba(255,255,255,0.12) inset,0 6px 16px rgba(229,83,75,.32);
}

/* Gold accent variant for highlight CTAs */
.btn-add.gold,
a.btn-add.gold,
.act-btn.gold,
a.act-btn.gold{
  background:var(--btn-grad-gold);color:#1a1200;
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset,0 6px 18px rgba(239,168,40,0.28);
}
.btn-add.gold:hover,
a.btn-add.gold:hover,
.act-btn.gold:hover,
a.act-btn.gold:hover{
  background:linear-gradient(135deg,#F5C96A 0%,#EFA828 50%,#D49412 100%);
  color:#1a1200;filter:none;
}

/* ═══════════════ SEARCH/FILTER BAR ═══════════════ */
.sfbar{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.sfbar-search{position:relative;flex:1;min-width:160px;max-width:260px}
.sfbar-search input{width:100%;padding:6px 10px 6px 28px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:12.5px;outline:none;transition:border-color var(--tr)}
.sfbar-search input:focus{border-color:var(--accent-line)}
.sfbar-search i{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--text-3)}
.sf-select{padding:6px 10px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);font-size:12px;outline:none;cursor:pointer;transition:border-color var(--tr)}
.sf-select:hover{border-color:var(--border-2)}

/* ═══════════════ EMPTY STATE ═══════════════ */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;color:var(--text-3);text-align:center;gap:10px}
.empty i{font-size:32px;opacity:.35}
.empty p{font-size:12.5px}

/* ═══════════════ MESSAGES ═══════════════ */
.msg-shell{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 52px - 56px);background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.msg-contacts{border-right:1px solid var(--border);display:flex;flex-direction:column}
.msg-contacts-head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.msg-contacts-head h3{font-size:12.5px;font-weight:600}
.msg-search{padding:10px 12px;border-bottom:1px solid var(--border);position:relative}
.msg-search input{width:100%;padding:6px 10px 6px 28px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);font-size:12.5px;color:var(--text);outline:none}
.msg-search i{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text-3)}
.contact-list{flex:1;overflow-y:auto}
.contact-row{display:flex;align-items:center;gap:9px;padding:9px 14px;cursor:pointer;transition:background var(--tr);border-bottom:1px solid var(--border)}
.contact-row:last-child{border-bottom:none}
.contact-row:hover,.contact-row.active{background:var(--bg-hover)}
.contact-row.active{background:var(--accent-dim)}
.contact-name{font-size:12.5px;font-weight:500}
.contact-role{font-size:10.5px;color:var(--text-3)}
.contact-unread{margin-left:auto;background:var(--accent);color:#fff;font-size:9px;font-weight:700;padding:1.5px 6px;border-radius:8px}
.msg-main{display:flex;flex-direction:column}
.msg-header{padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.msg-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msg-bubble{max-width:70%;padding:9px 13px;border-radius:10px;font-size:12.8px;line-height:1.55}
.msg-bubble.sent{background:var(--accent);color:#fff;align-self:flex-end;border-radius:10px 10px 2px 10px}
.msg-bubble.recv{background:var(--bg-2);border:1px solid var(--border);align-self:flex-start;border-radius:10px 10px 10px 2px}
.msg-time{font-size:10px;color:rgba(255,255,255,.55);text-align:right}
.msg-time.recv{color:var(--text-3)}
.msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:4px}
.msg-read{font-size:11px;color:rgba(255,255,255,.65);line-height:1}
.msg-read.read{color:rgba(255,255,255,.92)}
.msg-bubble.recv .msg-read{color:var(--text-3)}
.msg-input-row{padding:13px 18px;border-top:1px solid var(--border);display:flex;gap:9px;align-items:center}
.msg-input{flex:1;padding:9px 13px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:12.8px;outline:none;transition:border-color var(--tr)}
.msg-input:focus{border-color:var(--accent-line)}
.msg-send-btn{
  width:36px;height:36px;border-radius:var(--btn-radius);border:1px solid rgba(255,255,255,0.12);
  background:var(--btn-grad);color:var(--btn-text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;flex-shrink:0;
  box-shadow:var(--btn-shadow);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),filter .16s var(--ease);
}
.msg-send-btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--btn-shadow-lg)}
.msg-send-btn:active{transform:translateY(0)}

/* ═══════════════ SETTINGS ═══════════════ */
.sets-grid{display:grid;grid-template-columns:190px 1fr;gap:20px}
.sets-nav{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;height:fit-content}
.sn-i{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;font-size:12.5px;color:var(--text-2);transition:all var(--tr)}
.sn-i:last-child{border-bottom:none}
.sn-i:hover{background:var(--bg-hover);color:var(--text)}
.sn-i.on{background:var(--accent-dim);color:var(--accent-2)}
.sn-i i{font-size:14px}
.sets-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
.sp-sec{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--border)}
.sp-sec:last-child{border:none;margin-bottom:0;padding-bottom:0}
.sp-title{font-size:13.5px;font-weight:600;margin-bottom:3px;letter-spacing:-0.01em}
.sp-desc{font-size:12px;color:var(--text-3);margin-bottom:18px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sl{display:block;font-size:11.5px;color:var(--text-2);font-weight:500;margin-bottom:6px;margin-top:14px}
.si{width:100%;padding:8px 11px;background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--text);outline:none;transition:border-color var(--tr);font-size:12.8px}
.si:focus{border-color:var(--accent-line);background:var(--bg-1)}
.notif-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.notif-row:last-child{border-bottom:none}
.nr-lbl{font-size:12.8px;font-weight:500}
.nr-sub{font-size:11.5px;color:var(--text-3);margin-top:2px}
.btn-save{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 20px;margin-top:18px;
  border:1px solid var(--btn-border);border-radius:var(--btn-radius);
  background:var(--btn-grad);color:var(--btn-text);
  font-size:12.5px;font-weight:650;letter-spacing:.015em;
  cursor:pointer;font-family:inherit;
  box-shadow:var(--btn-shadow);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease),background .18s var(--ease);
}
.btn-save:hover{
  background:var(--btn-grad-hover);color:#fff;
  transform:translateY(-1px);box-shadow:var(--btn-shadow-lg);filter:brightness(1.04);
}
.btn-save:active{transform:translateY(0)}

/* ═══════════════ LOGIN ═══════════════ */
/* One shared canvas so the quote panel and sign-in column don't look like two blacks */
/* The wash is built from the dealership's own two brand colours (set per tenant on the login
   page) rather than a fixed blue-and-amber pair, which tinted every dealership the same way
   regardless of its logo. Falls back to the house blue/teal off-brand. */
.login-wrap{
  display:flex;min-height:100vh;
  background:
    radial-gradient(ellipse 900px 600px at 18% 28%,var(--brand-wash-1,rgba(31,164,223,.10)) 0%,transparent 58%),
    radial-gradient(ellipse 700px 520px at 88% 78%,var(--brand-wash-2,rgba(16,121,153,.07)) 0%,transparent 55%),
    var(--bg-1);
}
.login-left{
  flex:1 1 65%;width:65%;max-width:65%;position:relative;overflow:hidden;min-width:0;
  background:transparent;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:24px 40px 36px;
}
.login-left::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 700px 500px at 30% 40%,black,transparent);
  pointer-events:none;
}
.l-brand{
  display:flex;align-items:center;gap:22px;
  margin-bottom:20px;position:relative;z-index:1;flex-shrink:0;
}
.l-brand-mark{
  position:relative;flex:0 0 auto;
  width:64px;height:64px;
  display:grid;place-items:center;
}
/* Softened along with the mark: at the old size this halo read as part of the logo and
   made it look even bulkier than it already was. */
.l-brand-glow{
  position:absolute;inset:-12%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%,rgba(31,164,223,.22) 0%,rgba(31,164,223,.07) 42%,transparent 68%);
  filter:blur(2px);
  pointer-events:none;z-index:0;
  animation:l-brand-pulse 5.5s ease-in-out infinite;
}
.l-brand-logo,.l-brand-fallback,.l-mark{
  position:relative;z-index:1;
  width:64px;height:64px;
  display:block;object-fit:contain;
  border-radius:50%;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.28));
}
/* A dealership logo is a full emblem (Spitzer's globe and script, Procarma's hexagon), not
   a round badge — circular clipping cut the corners off both. Sized to sit beside the
   wordmark rather than tower over it. */
.l-brand--tenant .l-brand-mark{
  width:72px;height:72px;
}
.l-brand--tenant .l-brand-logo{
  width:72px;height:72px;
  border-radius:0;
  background:transparent;
  filter:drop-shadow(0 5px 14px rgba(0,40,90,.24));
  object-fit:contain;
}
.l-brand-fallback{
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:46px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 36px rgba(16,121,153,.35);
}
.l-brand-copy{min-width:0;padding-top:2px}
.l-brand .brand-word{
  font-family:"Outfit",Inter,sans-serif;
  font-size:clamp(28px,3.4vw,46px);
  font-weight:700;letter-spacing:-.02em;line-height:1.05;
  color:var(--text);
}
.l-brand .brand-word--stack{
  display:flex;flex-direction:column;gap:2px;
}
/* University lockup: the name set at a moderate weight with open letter-spacing, over a
   widely tracked "UNIVERSITY". The previous 800-weight, tightly-tracked setting read as a
   sportswear logotype rather than an institution. */
.l-brand .bw-line{
  font-size:clamp(36px,4.2vw,56px);
  font-weight:500;letter-spacing:-.005em;line-height:1;
  background:linear-gradient(180deg,#fff 20%,rgba(255,255,255,.82) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.l-brand .bw-sub{
  font-size:clamp(15px,1.6vw,21px);
  font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
  margin-top:4px;
}
.l-brand .brand-tag{
  font-family:"Outfit",Inter,sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  margin-top:10px;color:rgba(255,255,255,.48);
  max-width:28ch;
}
.l-brand--tenant .l-brand-glow{
  background:
    radial-gradient(circle at 50% 42%,rgba(0,102,184,.58) 0%,rgba(239,168,40,.18) 40%,transparent 72%);
}
.l-brand--tenant .brand-tag{
  color:rgba(239,168,40,.78);
  letter-spacing:.16em;
}
@keyframes l-brand-pulse{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}
@media (max-width:900px){
  .l-brand-mark,.l-brand-logo,.l-brand-fallback{width:52px;height:52px}
  .l-brand--tenant .l-brand-mark,.l-brand--tenant .l-brand-logo{width:58px;height:58px}
  .l-brand-fallback{font-size:24px}
}

/* One hero stage: art + quote + dots share a single plane (no framed card). */
.l-hero{
  position:relative;z-index:1;
  flex:1 1 auto;min-height:0;width:100%;
  border-radius:28px;
  overflow:hidden;
  isolation:isolate;
  /* Dark mode: a brand-lit panel rather than flat near-black. A plain --bg-1 fill left the
     artwork looking like a sticker dropped into an empty void, because the stage carried no
     depth of its own and nothing tied the art to the page. Two soft brand washes plus a
     vertical ramp give it a light source; the quote end stays darkest so the copy holds. */
  background:
    radial-gradient(ellipse 120% 78% at 50% 2%,var(--brand-wash-1,rgba(31,164,223,.16)) 0%,transparent 60%),
    radial-gradient(ellipse 80% 60% at 88% 100%,var(--brand-wash-2,rgba(16,121,153,.12)) 0%,transparent 68%),
    linear-gradient(172deg,#14181f 0%,var(--bg-1) 52%,#090b0e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Locks the art box to the artwork's own aspect ratio in the upper part of the stage, which
   leaves the lower third clear for the quote and dots. */
.l-slide-stage{
  position:absolute;left:0;right:0;top:0;height:70%;
  display:flex;align-items:center;justify-content:center;
  padding:3.5% 5% 0;
}
.l-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .9s var(--ease),visibility .9s,transform 1.1s var(--ease);
  transform:scale(1.03);
}
.l-slide.on{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:scale(1);
  z-index:1;
}
/* The plate. Because the box matches the PNG's 911×597 ratio, this background sits exactly
   behind the artwork — giving the white-ground art the light surface it was drawn for while
   the panel around it stays dark. */
.l-slide-art{
  display:block;
  width:auto;height:auto;
  max-width:100%;max-height:100%;
  aspect-ratio:911/597;
  object-fit:contain;
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#eef2f7 100%);
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,.72),
    0 2px 0 0 rgba(255,255,255,.14) inset;
  filter:saturate(1.05) contrast(1.02);
  animation:l-art-drift 14s ease-in-out infinite alternate;
}
.l-slide.on .l-slide-art{animation-play-state:running}
.l-slide:not(.on) .l-slide-art{animation-play-state:paused}
/* Gentler than before: the art box is now sized tight to the plate, so a big drift would push
   the plate's edge and shadow out past the stage. */
@keyframes l-art-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-0.7%,0) scale(1.008)}
}
/* Fades the foot of the slide into the stage so the quote stays readable over artwork.
   It has to fade toward the stage colour, so there is a light-mode counterpart below. */
.l-slide-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(13,13,16,.06) 0%,transparent 28%,transparent 48%,rgba(13,13,16,.62) 72%,rgba(13,13,16,.95) 100%),
    linear-gradient(90deg,rgba(13,13,16,.30) 0%,transparent 28%,transparent 72%,rgba(13,13,16,.18) 100%);
}
.l-slide-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 36px 52px;
  max-width:46rem;
  transform:translateY(14px);
  opacity:0;
  transition:opacity .7s var(--ease) .12s,transform .7s var(--ease) .12s;
}
.l-slide.on .l-slide-copy{
  opacity:1;transform:translateY(0);
}
.l-quote-meta{
  display:inline-block;
  font-family:"Outfit",Inter,sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-gold);
  margin-bottom:10px;
}
.l-quote{
  margin:0;
  font-family:"Outfit",Inter,sans-serif;
  font-size:clamp(22px,2.5vw,32px);
  font-weight:600;line-height:1.28;letter-spacing:-.03em;
  color:#f4f7fb;
  text-wrap:pretty;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}

.l-dots{
  position:absolute;left:36px;right:36px;bottom:22px;z-index:3;
  display:flex;gap:7px;align-items:center;
}
.l-dot{
  height:3px;width:22px;border-radius:999px;
  background:rgba(255,255,255,.22);cursor:pointer;
  border:none;padding:0;
  transition:background .25s var(--ease),width .25s var(--ease),opacity .25s;
}
.l-dot.on{background:var(--accent);width:40px}
.l-dot:hover{background:rgba(255,255,255,.45)}

html[data-theme="light"] .l-brand .bw-line{
  background:linear-gradient(180deg,#0b1220 10%,#1a2a44 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-theme="light"] .l-brand .bw-sub{color:rgba(11,18,32,.62)}
html[data-theme="light"] .l-brand .brand-tag{color:rgba(11,18,32,.45)}
html[data-theme="light"] .l-brand--tenant .brand-tag{color:#9a6a12}
/* Light mode: the stage goes white with the page, which is the ground the art was drawn for,
   so the plate all but disappears and only needs a hairline edge — the heavy dark drop shadow
   the dark panel needs would look like a bruise on white. */
html[data-theme="light"] .l-hero{
  background:var(--bg-1);
  box-shadow:0 18px 48px rgba(10,20,36,.10), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="light"] .l-slide-art{
  background:#fff;
  box-shadow:0 14px 34px -16px rgba(10,20,36,.28), 0 0 0 1px rgba(10,20,36,.06);
}
html[data-theme="light"] .l-slide-veil{
  background:
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,transparent 28%,transparent 48%,rgba(255,255,255,.72) 72%,rgba(255,255,255,.96) 100%),
    linear-gradient(90deg,rgba(255,255,255,.30) 0%,transparent 28%,transparent 72%,rgba(255,255,255,.18) 100%);
}
html[data-theme="light"] .l-quote{color:var(--text);text-shadow:none}
html[data-theme="light"] .l-quote-meta{color:#c4840a}
html[data-theme="light"] .l-dot{background:rgba(10,13,20,.18)}
html[data-theme="light"] .l-dot.on{background:var(--accent)}
html[data-theme="light"] .l-dot:hover{background:rgba(10,13,20,.35)}

.login-right{
  flex:0 0 35%;width:35%;max-width:35%;min-width:0;
  background:transparent;
  border-left:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;padding:48px 56px;
}
html[data-theme="light"] .login-right{
  border-left-color:rgba(10,13,20,.08);
}
/* Same brand-derived wash in light mode. This previously hardcoded an amber second glow,
   which is what gave the Spitzer page its orange cast. */
html[data-theme="light"] .login-wrap{
  background:
    radial-gradient(ellipse 900px 600px at 18% 28%,var(--brand-wash-1,rgba(17,135,196,.08)) 0%,transparent 58%),
    radial-gradient(ellipse 700px 520px at 88% 78%,var(--brand-wash-2,rgba(16,121,153,.05)) 0%,transparent 55%),
    var(--bg-1);
}
.lf-wrap{width:100%;max-width:420px}
.lf-title{font-size:26px;font-weight:650;letter-spacing:-0.02em;margin-bottom:6px}
.lf-sub{font-size:13.5px;color:var(--text-2);margin-bottom:28px}
.tab-sw{display:flex;background:var(--bg-2);border-radius:var(--r);padding:3px;margin-bottom:24px;border:1px solid var(--border)}
.tsb{flex:1;padding:7px;border:none;background:transparent;border-radius:6px;color:var(--text-3);font-size:12.5px;cursor:pointer;transition:all var(--tr);font-weight:500}
.tsb.on{background:var(--bg-3);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.fg{margin-bottom:14px}
.fl{display:block;font-size:11.5px;color:var(--text-2);font-weight:500;margin-bottom:6px}
.fi{width:100%;padding:9px 12px;background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--text);outline:none;transition:border-color var(--tr),background var(--tr);font-size:12.8px}
.fi:focus{border-color:var(--accent-line);background:var(--bg-1)}
.fi::placeholder{color:var(--text-4)}
.fi-row{display:flex;gap:8px}.fi-row .fi{flex:1}
.pw-wrap{position:relative}
.pw-wrap .fi,.pw-wrap .si{padding-right:38px}
.pw-eye{position:absolute;right:9px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-3);padding:3px}
.btn-p{
  width:100%;padding:11px 14px;
  border:1px solid var(--btn-border);border-radius:var(--btn-radius);
  background:var(--btn-grad);color:var(--btn-text);
  font-size:13px;font-weight:650;letter-spacing:.02em;
  cursor:pointer;font-family:inherit;
  box-shadow:var(--btn-shadow);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease),background .18s var(--ease);
  position:relative;overflow:hidden;
}
.btn-p::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,0.16) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .45s var(--ease);pointer-events:none;
}
.btn-p:hover{
  background:var(--btn-grad-hover);color:#fff;
  transform:translateY(-1px);box-shadow:var(--btn-shadow-lg);filter:brightness(1.04);
}
.btn-p:hover::before{transform:translateX(120%)}
.btn-p:active{transform:translateY(0)}
.btn-o{
  width:100%;padding:10px 14px;margin-top:8px;
  border:1px solid var(--btn-glass-border);border-radius:var(--btn-radius);
  background:var(--btn-glass);color:var(--accent-2);
  font-size:12.8px;font-weight:600;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  transition:all .18s var(--ease);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn-o:hover{
  background:var(--btn-grad);color:var(--btn-text);border-color:rgba(255,255,255,0.14);
  box-shadow:var(--btn-shadow);transform:translateY(-1px);
}
.fdiv{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--text-4);font-size:11px}
.fdiv::before,.fdiv::after{content:'';flex:1;height:1px;background:var(--border)}
.fgt{font-size:11.5px;color:var(--accent-2);cursor:pointer}
.sms-box{display:flex;align-items:flex-start;gap:9px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px;margin-bottom:14px}
.tog{position:relative;width:32px;height:18px;flex-shrink:0;margin-top:1px}
.tog input{opacity:0;width:0;height:0}
.tog-t{position:absolute;inset:0;border-radius:9px;background:var(--bg-3);cursor:pointer;transition:background var(--tr);border:1px solid var(--border-2)}
.tog-t::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:var(--text-2);top:2px;left:2px;transition:transform var(--tr),background var(--tr)}
.tog input:checked+.tog-t{background:var(--accent);border-color:var(--accent)}
.tog input:checked+.tog-t::after{transform:translateX(14px);background:#fff}
.sms-lbl{font-size:11.5px;color:var(--text-2);line-height:1.5}
.sms-lbl b{color:var(--text);display:block;margin-bottom:2px;font-weight:600}
.otp-input{font-size:18px;letter-spacing:.3em;text-align:center;font-family:var(--font-mono)}
.otp-note{font-size:11px;color:var(--text-3);margin-top:.6rem}
.otp-note a{color:var(--accent-2);cursor:pointer}
.field-error{font-size:11px;color:var(--red);margin-top:4px;display:block}
.validation-summary{background:var(--red-dim);color:var(--red);border-radius:var(--r-sm);padding:.7rem 1rem;margin-bottom:14px;font-size:12px;border:1px solid rgba(229,83,75,.2)}
/* The tag helper still emits the container when there are no errors; without
   this it renders as an empty red bar above the form. */
.validation-summary-valid{display:none}


/* ═══════════════ TOPBAR MESSAGE DROPDOWN ═══════════════ */
.tb-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;width:320px;
  background:var(--card-2);border:1px solid var(--border-2);border-radius:var(--r-lg);
  box-shadow:0 12px 32px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
  display:none;z-index:100;overflow:hidden;
}
.tb-dropdown.open{display:block;animation:fadeUp .15s var(--ease)}
.tbd-head{padding:12px 16px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--border)}
.tbd-empty{padding:32px 20px;text-align:center;font-size:12px;color:var(--text-3)}
.tbd-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--tr)}
.tbd-item:last-child{border-bottom:none}
.tbd-item:hover{background:var(--bg-hover)}
.tbd-item.unread{background:var(--accent-dim)}
.tbd-name{font-size:12.5px;font-weight:600;color:var(--text)}
.tbd-preview{font-size:11.5px;color:var(--text-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbd-time{font-size:10px;color:var(--text-3);margin-top:3px}
.tbd-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:4px}
.tbd-foot{display:block;text-align:center;padding:10px;font-size:12px;color:var(--accent-2);font-weight:500;border-top:1px solid var(--border);transition:background var(--tr)}
.tbd-foot:hover{background:var(--bg-hover)}

/* ═══════════════ VIEW-AS SWITCH ═══════════════ */
.view-as-switch{display:flex;align-items:center;gap:6px;margin-right:8px}
.vas-label{font-size:10.5px;color:var(--text-3);font-weight:500;margin-right:2px}
.vas-pill{
  padding:4px 10px;border-radius:100px;border:1px solid var(--border);
  background:var(--bg-2);color:var(--text-3);font-size:11px;font-weight:550;
  cursor:pointer;transition:all var(--tr);font-family:inherit;
}
.vas-pill:hover{border-color:var(--border-2);color:var(--text-2)}
.vas-pill.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ═══════════════ KPI AS LINK ═══════════════ */
a.kpi{text-decoration:none;color:inherit;display:block;cursor:pointer}

/* ═══════════════ MESSAGES LAYOUT FIX ═══════════════ */
.msg-shell{
  display:grid;grid-template-columns:280px 1fr;
  height:calc(100vh - 52px - 56px);
  min-height:520px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
}
.msg-main{display:flex;flex-direction:column;min-height:0}
.msg-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:0}
.msg-input-row{
  padding:12px 16px;border-top:1px solid var(--border);
  display:flex;gap:9px;align-items:center;flex-shrink:0;background:var(--bg-1);
}
.msg-input:disabled{opacity:.5;cursor:not-allowed}
.msg-send-btn:disabled{opacity:.4;cursor:not-allowed}
.contact-list{flex:1;overflow-y:auto;min-height:0}
.msg-contacts{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border)}
.support-row:hover{background:rgba(210,153,34,.18) !important}

/* ═══════════════ GLOBAL SEARCH PALETTE ═══════════════ */
.search-overlay{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  align-items:flex-start;justify-content:center;padding-top:12vh;
}
.search-overlay.open{display:flex;animation:fadeUp .12s var(--ease)}
.search-box{
  width:100%;max-width:560px;background:var(--card-2);
  border:1px solid var(--border-2);border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.6);overflow:hidden;
}
.search-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.search-input-row i{font-size:17px;color:var(--text-3)}
.search-input-row input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-size:14.5px;font-family:inherit;
}
.search-input-row input::placeholder{color:var(--text-4)}
.search-input-row kbd{
  font-family:var(--font-mono);font-size:10px;color:var(--text-3);
  background:var(--bg-3);border:1px solid var(--border-2);border-radius:4px;padding:2px 6px;
}
.search-results{max-height:52vh;overflow-y:auto}
.search-hint,.search-empty{padding:32px 20px;text-align:center;font-size:12.5px;color:var(--text-3)}
.search-group-label{
  padding:8px 16px 4px;font-size:9.5px;font-weight:600;color:var(--text-4);
  text-transform:uppercase;letter-spacing:.07em;
}
.search-item{
  display:flex;align-items:center;gap:11px;padding:9px 16px;cursor:pointer;
  transition:background var(--tr);border-left:2px solid transparent;
}
.search-item:hover,.search-item.active{background:var(--bg-hover);border-left-color:var(--accent)}
.search-item i{font-size:15px;color:var(--text-3);width:18px;flex-shrink:0}
.search-item-title{font-size:13px;font-weight:500;color:var(--text)}
.search-item-sub{font-size:10.5px;color:var(--text-3);margin-top:1px}
.search-item-type{
  margin-left:auto;font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:5px;
  background:var(--bg-3);color:var(--text-3);
}



/* ═══ Brand-shade buttons — soft fill at rest, full brand on hover ═══ */
.btn-add, .btn-save, .btn-p {
  background: var(--btn-grad);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
}
.btn-add:hover, .btn-save:hover, .btn-p:hover {
  background: var(--btn-grad-hover);
  color: var(--btn-text-hover);
  border-color: var(--accent);
  filter: none;
}
.btn-add:hover i, .btn-save:hover i, .btn-p:hover i { color: var(--btn-text-hover); }
.btn-add:active, .btn-save:active, .btn-p:active { transform: translateY(1px); }
.btn-add:disabled, .btn-save:disabled, .btn-p:disabled { opacity:.45; cursor:not-allowed; }


/* The responsive layer lives LAST on purpose. Everything above is written
   desktop-first with plain single-class selectors, so source order is the only thing
   that lets these overrides win — declared earlier, .vas-pill and the search palette
   silently re-applied their desktop sizes on a phone. */
/* ═══════════════ RESPONSIVE ═══════════════ */
/* The site is opened inside the Spitzer VIP app's web view — iOS Safari and Android
   Chrome — so phone layout is a first-class target, not a fallback.
   Deliberately NOT using overflow-x:hidden on html/body as a catch-all: that creates a
   scroll container which breaks the sticky topbar. Overflow is fixed at its causes instead. */

/* Main-content-plus-sidebar pages (lesson player, profile, edit screens). These were inline
   `grid-template-columns:1fr 320px` styles, which no media query can override — on a phone the
   fixed side column ate the row and left the lesson video 3px wide. --side lets each page keep
   its own column width while the stacking rule stays in one place. */
.split-grid{display:grid;grid-template-columns:1fr var(--side,320px);gap:20px;align-items:start}

/* Never let a long word or a pasted URL be the thing that widens the page. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
.tbl-wrap{-webkit-overflow-scrolling:touch}
/* Titles must be allowed to shrink, or the topbar's right-hand cluster gets pushed out of
   the viewport — which is exactly what put the avatar off-screen on every page. */
.tb-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Off-canvas navigation drawer ── */
.sb-backdrop{
  position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
#sidebar-toggle{display:none}

@media(max-width:1100px){.dash-grid{grid-template-columns:1fr}}

@media(max-width:900px){
  .sets-grid{grid-template-columns:1fr}
  /* Content first, side panel underneath — a fixed side column has no room on a phone. */
  .split-grid{grid-template-columns:1fr}

  /* The hamburger is the only way to nav at this width, so it must be visible. */
  #sidebar-toggle{display:flex}

  .sidebar{
    display:flex;
    position:fixed;top:0;left:0;bottom:0;
    height:100vh;height:100dvh;      /* dvh so iOS Safari's address bar can't cut it off */
    width:min(84vw,300px);z-index:40;
    transform:translateX(-100%);
    transition:transform .24s var(--ease);
    box-shadow:0 0 40px rgba(0,0,0,.5);
    padding-left:env(safe-area-inset-left);
  }
  .sidebar.open{transform:none}
  body.nav-open .sb-backdrop{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}     /* the page must not scroll under an open drawer */

  /* Topbar: tighten everything and let the title truncate rather than shove the icons out. */
  .topbar{
    padding-left:12px;
    padding-right:calc(12px + env(safe-area-inset-right));
    gap:6px;
  }
  .tb-title{font-size:13px}
  .view-as-switch{margin-right:0;gap:4px;min-width:0}
  .vas-label{display:none}          /* the pills are self-explanatory without the label */

  /* Nothing in the bar may be squeezed narrower than the glyph it contains. A .tb-btn is
     38px with a 16px icon centred in it, but flex-shrink defaults to 1: once three role
     pills, three icon buttons and the avatar stop fitting, the buttons are squashed while
     their icons keep full size and spill sideways over the neighbouring pill (the sun
     landing on top of "Learner"). Only the title and the role strip may give way — the
     strip scrolls instead, so a third role stays reachable rather than clipped. */
  .topbar > *{flex-shrink:0}
  /* No flex-grow: the title expanding to fill is what starved the role strip down to a
     third of its content and pushed the active role off-screen. It may take leftover
     space, never claim it. */
  .tb-title{flex:0 1 auto;min-width:0}
  .view-as-switch{flex-shrink:1;overflow-x:auto;scrollbar-width:none}
  .view-as-switch::-webkit-scrollbar{display:none}

  /* iOS Safari zooms in — and never back out — when a focused field is under 16px, leaving
     the rest of the form off to the side. Every text control in the app therefore has to
     reach 16px on touch widths.
     The `:not(...)` forms are load-bearing, not decoration: a bare `input` scores 0,0,1 and
     loses to single-class rules like `.fi` (the login fields) or `.si` (used 118 times), no
     matter where this block sits in the file. Adding an attribute selector lifts it to 0,1,1
     so it wins — and keeps winning for form classes added later. */
}

/* ── Touch handling keys off the INPUT DEVICE, not the window width ──
   Width alone gets this wrong in both directions: an iPad in landscape is 1024–1366px wide
   and would have kept 14.5px fields (so iOS would still zoom on focus and never zoom back),
   while a mouse-driven desktop window dragged narrow would get finger-sized controls it does
   not need. pointer:coarse / hover:none describe how the device is actually being operated,
   so a phone, a tablet in any orientation, a touchscreen laptop and next year's foldable all
   get the touch treatment without anyone adding a breakpoint for them.
   The max-width arm stays as a fallback for the rare web view that misreports its pointer. */
@media (pointer:coarse),(hover:none),(max-width:900px){
  /* !important is deliberate. This is a platform constraint, not a style preference — any
     control that slips under 16px silently breaks the page for every iOS user. Chasing it by
     specificity became whack-a-mole (`.si` beat a bare `input`, then `.si.group-role-select`
     beat that), and each new form class would reopen the bug. One authoritative rule ends it;
     deliberately-oversized code fields opt back out below. */
  input:not([type=hidden]),select,textarea{font-size:16px !important}
  /* PIN / OTP digits are meant to be large — keep them that way. */
  .otp-input{font-size:22px !important}

  /* Touch targets. 32px icon buttons and 24px pills are too small to hit reliably. */
  .tb-btn{width:38px;height:38px}
  .vas-pill{padding:7px 12px;min-height:32px}
  .act-btn,.btn-add{min-height:38px}
  input[type=checkbox],input[type=radio]{width:18px;height:18px}
  /* Drawer rows: the whole point of the drawer is thumb navigation. */
  .sb-i{min-height:42px}
  .sb-i.sub{min-height:38px}
  .sb-user{min-height:44px}
  .av{min-width:34px;min-height:34px}
}

@media(max-width:640px){
  .login-left{display:none}
  .pg-h1{font-size:32px}
  .login-right{flex:1 1 100%;width:100%;max-width:none;padding:32px 24px}
  /* Page headers stack so a long title plus an action button cannot force a sideways scroll. */
  .pg-head{align-items:flex-start}
  .pg-head h2{font-size:17px}
  /* Messages: contacts on top (scrollable strip), conversation fills the rest. */
  .msg-shell{
    grid-template-columns:1fr;
    grid-template-rows:minmax(140px,32vh) 1fr;
    height:calc(100dvh - 52px - 48px);
    min-height:420px;
  }
  .msg-contacts{border-right:none;border-bottom:1px solid var(--border)}
  .msg-main{min-height:0}
}

@media(max-width:420px){
  .view-as-switch{gap:3px}
  .vas-pill{padding:7px 9px;font-size:10px}
}
/* ═══════════════ MASCOT PAGE LOADER ═══════════════ */
/* Shown while a navigation or a save is in flight, so a slow request reads as "working on it"
   rather than a dead page. Lives above everything (drawer is z-index 40, AI icon 1000) but
   below nothing — it is the only thing that should be interactive while it is up.
   Kept out of the way until JS adds .on, so a JS-less page never sits behind a veil. */
.pl-veil{
  position:fixed;inset:0;z-index:2000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);backdrop-filter:blur(6px) saturate(1.1);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease),visibility .18s;
  padding:24px;
}
.pl-veil.on{opacity:1;visibility:visible;pointer-events:auto}

.pl-art{
  width:min(42vw,168px);height:auto;display:block;
  /* Grounds the cut-out mascot on whatever the page behind happens to be. */
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.32));
  animation:pl-bob 1.15s var(--ease) infinite alternate;
}
@keyframes pl-bob{
  from{transform:translateY(0) rotate(-2.2deg)}
  to{transform:translateY(-11px) rotate(2.2deg)}
}

.pl-msg{
  font-family:"Outfit",Inter,sans-serif;
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text);
  text-align:center;text-wrap:balance;
}
.pl-sub{font-size:12.5px;color:var(--text-3);margin-top:-8px;text-align:center}

.pl-dots{display:flex;gap:6px;align-items:center}
.pl-dots i{
  width:7px;height:7px;border-radius:50%;background:var(--accent);display:block;
  animation:pl-pulse 1s ease-in-out infinite;
}
.pl-dots i:nth-child(2){animation-delay:.16s}
.pl-dots i:nth-child(3){animation-delay:.32s}
@keyframes pl-pulse{
  0%,100%{opacity:.25;transform:scale(.8)}
  50%{opacity:1;transform:scale(1)}
}

/* Motion sickness / battery: keep the reassurance, drop the movement. */
@media (prefers-reduced-motion:reduce){
  .pl-art{animation:none}
  .pl-dots i{animation-duration:2s}
  .pl-veil{transition:opacity .01s}
}

/* ── Success / error banner ── */
/* A save has to be unmissable, so the confirmation carries the mascot and its own colour
   field rather than being a thin line of text that scrolls away unnoticed. */
.alert-mascot{
  width:52px;height:52px;flex:none;object-fit:contain;
  align-self:center;margin:-4px 2px -4px -2px;
}