/* ============================================================================
   KOREVRA TMS+ — Terminal Management & POS Operations Intelligence Platform
   Design System  ·  Single source of truth  ·  v1
   Premium, sovereign, AI-native fintech UI.  Live-themeable via CSS variables.
   ============================================================================ */

/* ---------- 1. DESIGN TOKENS ---------------------------------------------- */
:root {
  /* Brand — set live by the theming engine (TMS.theme) */
  --brand:        #13C296;   /* Korevra emerald            */
  --brand-d:      #0E9E79;   /* darker shade               */
  --brand-l:      #43E0B6;   /* lighter shade              */
  --brand-ghost:  rgba(19,194,150,.12);
  --brand-ghost2: rgba(19,194,150,.20);

  /* Accent system — vibrant */
  --accent:       #7C9CFF;   /* AI / intelligence (indigo) */
  --accent-d:     #5A78F0;
  --accent-ghost: rgba(124,156,255,.18);
  --gold:         #FBBF3C;   /* Naira / value / premium    */
  --gold-ghost:   rgba(251,191,60,.16);
  --violet:       #B98CFF;

  /* Signal — brighter, livelier */
  --ok:        #35E08C;  --ok-ghost:   rgba(53,224,140,.16);
  --warn:      #FBB040;  --warn-ghost: rgba(251,176,64,.16);
  --danger:    #FF8286;  --danger-ghost: rgba(255,107,112,.16);   /* text brightened for AA on the dark red-tint ghost; solid fills use fixed #C21C22 */
  --info:      #45C8FF;  --info-ghost: rgba(69,200,255,.16);
  --neutral:   #94A2BE;
  /* (light-mode overrides for --muted/--faint/signals live in the [data-theme=light] block) */

  /* DARK THEME (default) — rich deep-indigo, lifted surfaces (cards pop off the bg) */
  --bg:        #0E1526;   /* app background — lifted, warmer navy-indigo */
  --bg-2:      #131D33;   /* deep panel               */
  --surface:   #17223E;   /* card surface — clearly above bg */
  --surface-2: #1F2C4C;   /* elevated / hover         */
  --surface-3: #223158;   /* input / well             */
  --sidebar:   #0A1122;
  --topbar:    #0E1526cc;
  --line:      #2A3A5F;   /* borders — brighter, indigo-tinted */
  --line-2:    #384A73;
  --glass:     rgba(23,34,62,.72);

  /* Text — luminous, less dim (kills the gloom) */
  --text:      #F1F5FD;
  --text-2:    #BECAE2;
  --muted:     #93A3C1;   /* brightened for dark AA — #8B9BBA landed ~4.4:1 on panels */
  --faint:     #5C6C8E;
  --on-brand:  #04130E;

  /* ---- Vibrant tone tokens (--tn-*) — theme-stable base tone; ink + fill flip per theme.
         Drives the §6 vibrant layer (rows, panel bars, kpi-ico, progress, notes/toasts).
         --tn-*-fill is a REAL precomputed tint hex (≈ the tone at ~14% over the surface),
         so it is the Chromium-80 SOLID fallback before every color-mix — never flat grey. ---- */
  --tn-brand:#13C296;  --tn-brand-ink:#43E0B6;  --tn-brand-fill:#16384A;
  --tn-accent:#7C9CFF; --tn-accent-ink:#7C9CFF; --tn-accent-fill:#253359;
  --tn-violet:#B07CFF; --tn-violet-ink:#B07CFF; --tn-violet-fill:#2C2F59;
  --tn-gold:#FBBF3C;   --tn-gold-ink:#FBBF3C;   --tn-gold-fill:#37383E;
  --tn-ok:#35E08C;     --tn-ok-ink:#35E08C;     --tn-ok-fill:#1B3D49;
  --tn-warn:#FBB040;   --tn-warn-ink:#FBB040;   --tn-warn-fill:#373642;
  --tn-danger:#FF6B70; --tn-danger-ink:#FF8286; --tn-danger-fill:#372C45;
  --tn-cyan:#45C8FF;   --tn-cyan-ink:#45C8FF;   --tn-cyan-fill:#1D3959;
  --tn-coral:#FF8A5E;  --tn-coral-ink:#FF8A5E;  --tn-coral-fill:#373143;

  /* Radii */
  --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(0,0,0,.30);
  --sh:    0 6px 22px -6px rgba(0,0,0,.50);
  --sh-lg: 0 26px 60px -16px rgba(0,0,0,.62);
  --sh-brand: 0 10px 34px -10px rgba(19,194,150,.5);
  --ring:  0 0 0 3px var(--brand-ghost2);

  /* Type */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, monospace;

  /* Layout */
  --sidebar-w: 268px;
  --topbar-h: 64px;
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* LIGHT THEME (default) — colorful & lovable: crisp white cards on a warm,
   softly-tinted lavender wash, a light friendly sidebar, and vibrant accents. */
[data-theme="light"] {
  --bg:        #F4F3FC;   /* soft warm lavender-white */
  --bg-2:      #ECEAF7;
  --surface:   #FFFFFF;   /* crisp white cards */
  --surface-2: #F6F3FE;   /* gentle lavender hover tint */
  --surface-3: #F1F0FB;
  --sidebar:   #FBFAFF;   /* light, friendly sidebar */
  --topbar:    #FFFFFF;   /* opaque: the 92.5%-alpha glass let the indigo body wash bleed through
                             behind topbar text (crumb/SIM CLOCK/LIVE DEMO measured 3.84-4.39) */
  --line:      #E9E5F6;   /* soft lavender lines */
  --line-2:    #DAD5EE;
  --glass:     rgba(255,255,255,.86);
  --text:      #191634;   /* deep indigo-ink */
  --text-2:    #4A4869;
  --muted:     #5A5975;   /* darkened again for AA — #6A6986 measured 3.85:1 on the indigo body
                             wash stop #D4DBF9 (page-head subs, tab labels sit straight on it);
                             #5A5975 = 4.90 there, 6.73 on white */
  --faint:     #94929E;   /* lifted from #ABA9C8 so separators/placeholders clear ~3:1 */
  --on-brand:  #04130E;
  --brand-ghost:  rgba(19,194,150,.13);
  --brand-ghost2: rgba(19,194,150,.20);
  --accent-ghost: rgba(124,156,255,.15);
  --gold-ghost:   rgba(251,191,60,.18);
  /* Signal colours re-darkened for LIGHT surfaces so status text, badges, trends and
     icon-chips meet WCAG-AA (dark theme keeps the brighter values above). Gold stays
     bright — a dark-text fill, inked via --gold-ink. brand-l / accent are darkened for
     light in TMS.applyTheme (they're set inline there, and stay rebrand-aware). */
  --ok:        #076B41;   /* a11y: #097A4A on --ok-ghost was 4.46 -> 5.42 */
  --warn:      #8A5E00;
  --danger:    #C21C22;
  --info:      #0A6E9E;
  /* --tn-* ink + fill re-based for LIGHT surfaces (base tone stays vivid, set in :root above) */
  --tn-brand-ink:#08744A;  --tn-brand-fill:#E7F9F4;
  --tn-accent-ink:#4F63DE; --tn-accent-fill:#F2F5FF;
  --tn-violet-ink:#7C3AED; --tn-violet-fill:#F7F2FF;
  --tn-gold-ink:#8A5800;   --tn-gold-fill:#FEF8EB;
  --tn-ok-ink:#097A4A;     --tn-ok-fill:#EBFCF3;
  --tn-warn-ink:#8A5E00;   --tn-warn-fill:#FEF7EC;
  --tn-danger-ink:#C21C22; --tn-danger-fill:#FFF0F1;
  --tn-cyan-ink:#0A6E9E;   --tn-cyan-fill:#ECF9FF;
  --tn-coral-ink:#C2410C;  --tn-coral-fill:#FFF3EF;
  --sh-sm: 0 1px 2px rgba(70,60,130,.07);
  --sh:    0 12px 30px -12px rgba(90,75,160,.20);
  --sh-lg: 0 30px 66px -20px rgba(90,75,160,.24);
  --sh-brand: 0 12px 30px -10px rgba(19,194,150,.42);
  --ring:  0 0 0 3px var(--brand-ghost2);
}

/* ---------- 2. RESET / BASE ----------------------------------------------- */
* { margin:0; padding:0; box-sizing:border-box; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--muted); background-clip:padding-box; }
*::-webkit-scrollbar-track { background:transparent; }

html, body { height:100%; }
body {
  font-family: var(--font);
  /* ambient colour-glow so the app never reads as flat/gloomy */
  background:
    radial-gradient(1100px 720px at 8% -12%, rgba(124,156,255,.12), transparent 55%),
    radial-gradient(1000px 640px at 100% -6%, rgba(19,194,150,.10), transparent 52%),
    radial-gradient(900px 900px at 92% 112%, rgba(185,140,255,.08), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
[data-theme="light"] body {
  background:
    radial-gradient(1100px 720px at 4% -12%, rgba(124,156,255,.20), transparent 56%),
    radial-gradient(1000px 640px at 100% -6%, rgba(19,194,150,.16), transparent 52%),
    radial-gradient(820px 860px at 96% 112%, rgba(255,146,110,.12), transparent 55%),
    radial-gradient(760px 760px at 40% 120%, rgba(185,140,255,.13), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
img, svg { display:block; max-width:100%; }
ul { list-style: none; }
::selection { background: var(--brand-ghost2); }
:focus-visible { outline: none; box-shadow: var(--ring); }

.mono { font-family: var(--mono); }
.naira::before { content:"₦"; }

/* ---------- 3. APP SHELL LAYOUT ------------------------------------------- */
#app { display:none; height:100vh; }
#app.show { display:grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows:100vh; }

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display:flex; flex-direction:column;
  height:100vh; overflow:hidden;
  position:relative; z-index:30;
}
.main { display:flex; flex-direction:column; height:100vh; overflow:hidden; position:relative; }
.content { flex:1; overflow-y:auto; padding: 26px 30px 60px; scroll-behavior:smooth; }
.content-inner { max-width: 1480px; margin:0 auto; }

/* ---------- 4. SIDEBAR ---------------------------------------------------- */
.s-brand { display:flex; align-items:center; gap:11px; padding:18px 18px 16px; border-bottom:1px solid #ffffff10; flex-shrink:0; }
.s-logo {
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background: linear-gradient(135deg, var(--brand), var(--brand-d));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:21px; color:var(--on-brand);
  box-shadow: var(--sh-brand); letter-spacing:-1px;
}
.s-brand-txt { line-height:1.15; overflow:hidden; }
.s-brand-name { font-weight:750; font-size:15.5px; color:#fff; letter-spacing:-.2px; }
.s-brand-sub { font-size:10.5px; color:#7C8AA0; font-weight:600; letter-spacing:.6px; text-transform:uppercase; }

.s-scroll { flex:1; overflow-y:auto; padding:12px 12px 20px; }
.s-scroll::-webkit-scrollbar { width:6px; }
.s-section { margin: 14px 0 4px; padding: 0 10px; }
.s-section-label { font-size:10px; font-weight:750; letter-spacing:1px; text-transform:uppercase; color:#5C6B82; padding:6px 8px 4px; }
.s-item {
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm);
  color:#9DAAC0; font-weight:550; font-size:13.3px; cursor:pointer;
  transition: background .14s, color .14s; position:relative; user-select:none;
}
.s-item:hover { background:#ffffff0a; color:#E9EEF6; }
.s-item.active { background: var(--brand-ghost2); color:#fff; }
.s-item.active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--brand); }
.s-item .s-ico { width:18px; height:18px; flex-shrink:0; opacity:.92; }
.s-item.active .s-ico { color:var(--brand-l); }
.s-item .s-badge { margin-left:auto; background:#C21C22; color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:var(--r-pill); }
.s-item .s-badge.soft { background:var(--brand-ghost2); color:var(--brand-l); }
.s-item .s-chev { margin-left:auto; transition:transform .2s; opacity:.5; }
.s-item.open .s-chev { transform:rotate(90deg); }
.s-sub { overflow:hidden; max-height:0; transition:max-height .26s var(--ease); }
.s-sub.open { max-height:480px; }
.s-sub .s-item { padding-left:38px; font-size:12.7px; }

.s-foot { flex-shrink:0; padding:12px; border-top:1px solid #ffffff10; }
.s-user { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; transition:background .14s; }
.s-user:hover { background:#ffffff0a; }
.s-user .s-uname { color:#E9EEF6; font-weight:650; font-size:13px; }
.s-user .s-urole { color:#7C8AA0; font-size:11px; }

/* ---------- 5. TOPBAR ----------------------------------------------------- */
.topbar {
  height: var(--topbar-h); flex-shrink:0; display:flex; align-items:center; gap:16px;
  padding: 0 24px; border-bottom:1px solid var(--line);
  background: var(--topbar); backdrop-filter: blur(14px);
  position:sticky; top:0; z-index:25;
}
.t-title { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.t-title h1 { font-size:17px; font-weight:720; letter-spacing:-.3px; white-space:nowrap; }
.t-title .t-crumb { font-size:11.5px; color:var(--muted); font-weight:550; }
.t-search {
  margin-left: 8px; flex:1; max-width:440px; display:flex; align-items:center; gap:9px;
  background: var(--surface-3); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 14px; color:var(--muted); cursor:text; transition:border .14s, box-shadow .14s;
}
.t-search:hover, .t-search:focus-within { border-color:var(--brand); box-shadow:var(--ring); }
.t-search input { flex:1; background:none; border:none; color:var(--text); }
.t-search input::placeholder { color:var(--muted); }
.t-search .kbd { font-size:10.5px; color:var(--muted); border:1px solid var(--line-2); border-radius:5px; padding:1px 6px; font-family:var(--mono); }
.t-spacer { flex:1; }
.t-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.t-btn {
  width:38px; height:38px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
  color:var(--text-2); position:relative; transition:background .14s, color .14s;
}
.t-btn:hover { background:var(--surface-3); color:var(--text); }
.t-btn .dot { position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--topbar); }
.t-btn .cnt { position:absolute; top:3px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-pill); background:#C21C22; color:#fff; font-size:9.5px; font-weight:750; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-2); }
.t-clock { font-family:var(--mono); font-size:12px; color:var(--text-2); display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; padding:0 6px; }
.t-clock .t-live { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--ok); font-weight:700; }
.t-clock .t-live .pulse { width:7px; height:7px; border-radius:50%; background:var(--ok); animation:pulse 1.8s infinite; }
.t-divider { width:1px; height:26px; background:var(--line); }
.lang-sel { background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 12px; color:var(--text-2); font-weight:600; font-size:12px; cursor:pointer; }
.lang-sel:hover { border-color:var(--brand); }
/* same deepened indigo→violet ramp as .avatar — var(--accent),var(--violet) resolved to
   #3C5CBF→#B98CFF in light, and the white initials measured 2.54:1 on the violet stop */
.t-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#4C60DD,#7C3AED); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:13px; cursor:pointer; border:2px solid var(--line-2); }

/* environment banner (demo) */
.env-strip { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:650; color:var(--gold); background:var(--gold-ghost); border:1px solid rgba(242,180,65,.3); padding:4px 10px; border-radius:var(--r-pill); }

/* ---------- 6. PAGE / SCREEN ---------------------------------------------- */
.page { display:none; animation: fadeUp .4s var(--ease-out); }
.page.show { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:none; } }

.page-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.page-head .ph-txt { min-width:0; }
.page-head h2 { font-size:23px; font-weight:760; letter-spacing:-.5px; display:flex; align-items:center; gap:11px; }
.page-head .ph-sub { color:var(--muted); font-size:13.5px; margin-top:3px; max-width:760px; }
.page-head .ph-actions { margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; align-items:center; }

/* ---------- 7. GRID HELPERS ----------------------------------------------- */
.grid { display:grid; gap:18px; }
.g-2 { grid-template-columns: repeat(2,1fr); }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }
.g-5 { grid-template-columns: repeat(5,1fr); }
.g-6 { grid-template-columns: repeat(6,1fr); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
.row { display:flex; gap:18px; }
.col { display:flex; flex-direction:column; gap:18px; }
.flex { display:flex; }
.flex-1 { flex:1; min-width:0; }
.between { justify-content:space-between; }
.center { align-items:center; }
.wrap { flex-wrap:wrap; }
.gap-s { gap:8px; } .gap-m { gap:14px; } .gap-l { gap:22px; }
.mt-s{margin-top:8px}.mt-m{margin-top:16px}.mt-l{margin-top:24px}
.mb-s{margin-bottom:8px}.mb-m{margin-bottom:16px}.mb-l{margin-bottom:24px}
@media (max-width:1280px){ .g-5,.g-6{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:980px){ .g-3,.g-4,.g-5,.g-6{grid-template-columns:repeat(2,1fr)} .g-2{grid-template-columns:1fr} .row{flex-direction:column} }

/* ---------- 8. PANEL / CARD ----------------------------------------------- */
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%), var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow: var(--sh-sm); position:relative;
}
.panel.pad { padding:20px; }
.panel.hover { transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; }
.panel.hover:hover { transform:translateY(-2px); box-shadow:var(--sh); border-color:var(--line-2); }
.panel-head { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.panel-head h3 { font-size:14.5px; font-weight:680; letter-spacing:-.2px; display:flex; align-items:center; gap:9px; }
.panel-head .ph-ico { width:30px; height:30px; border-radius:8px; background:var(--brand-ghost); color:var(--brand-l); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.panel-head .sub { font-size:11.5px; color:var(--muted); font-weight:500; }
.panel-head .ph-r { margin-left:auto; display:flex; gap:8px; align-items:center; }
.panel-body { padding:18px 20px; }
.panel-foot { padding:13px 20px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }

/* gradient hero panel */
.hero-panel {
  border-radius:var(--r-xl); padding:26px 28px; position:relative; overflow:hidden;
  background:
    radial-gradient(800px 300px at 88% -40%, var(--brand-ghost2), transparent 60%),
    linear-gradient(135deg, var(--surface), var(--bg-2));
  border:1px solid var(--line);
}
.hero-panel::after { content:""; position:absolute; inset:0; background:radial-gradient(440px 200px at 12% 130%, var(--accent-ghost), transparent 60%); pointer-events:none; }

/* ---------- 9. KPI / STAT TILE -------------------------------------------- */
.kpi { background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%), var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:17px 18px; position:relative; overflow:hidden; transition:transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.kpi:hover { transform:translateY(-2px); border-color:var(--line-2); box-shadow:var(--sh); }
.kpi .kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
/* .kpi-ico is a status chip used app-wide (not only in KPI cards) — unscoped, ink-aware, single source */
.kpi-ico { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.kpi-ico.brand { background:var(--brand-ghost); color:var(--brand-ink); }
.kpi-ico.accent { background:var(--accent-ghost); color:var(--accent); }
.kpi-ico.gold { background:var(--gold-ghost); color:var(--gold-ink); }
.kpi-ico.danger { background:var(--danger-ghost); color:var(--danger); }
.kpi-ico.info { background:var(--info-ghost); color:var(--info); }
.kpi-ico.warn { background:var(--warn-ghost); color:var(--warn); }
.kpi-ico.ok { background:var(--ok-ghost); color:var(--ok); }
.kpi-ico.violet { background:rgba(176,124,255,.14); color:var(--violet-ink); }
.kpi-ico.neutral { background:var(--surface-3); color:var(--muted); }
.kpi .kpi-label { font-size:11.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.kpi .kpi-val { font-size:26px; font-weight:780; letter-spacing:-.8px; margin-top:3px; line-height:1.05; }
.kpi .kpi-val small { font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0; }
.kpi .kpi-foot { display:flex; align-items:center; gap:7px; margin-top:9px; font-size:11.5px; color:var(--muted); }
.kpi-spark { position:absolute; right:0; bottom:0; opacity:.5; }

.trend { display:inline-flex; align-items:center; gap:3px; font-weight:700; font-size:11.5px; padding:1px 6px; border-radius:var(--r-pill); }
.trend.up { color:var(--ok); background:var(--ok-ghost); }
.trend.down { color:var(--danger); background:var(--danger-ghost); }
.trend.flat { color:var(--muted); background:var(--surface-3); }

/* ---------- 10. BADGES / TAGS / PILLS ------------------------------------- */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:680; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; line-height:1.4; }
.badge .bd-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge.ok { color:var(--ok); background:var(--ok-ghost); }
.badge.warn { color:var(--warn); background:var(--warn-ghost); }
.badge.danger { color:var(--danger); background:var(--danger-ghost); }
.badge.info { color:var(--info); background:var(--info-ghost); }
.badge.brand { color:var(--brand-ink); background:var(--brand-ghost); }
.badge.accent { color:var(--accent); background:var(--accent-ghost); }
.badge.gold { color:var(--gold-ink); background:var(--gold-ghost); }
.badge.neutral { color:var(--text-2); background:var(--surface-3); }
.badge.violet { color:var(--violet-ink); background:rgba(176,124,255,.14); }
.badge.outline { background:transparent; border:1px solid var(--line-2); color:var(--text-2); }
.badge.lg { font-size:12px; padding:5px 12px; }

.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--r-pill); background:var(--surface-3); border:1px solid var(--line); color:var(--text-2); cursor:pointer; transition:all .14s; user-select:none; }
.chip:hover { border-color:var(--line-2); color:var(--text); }
.chip.active { background:var(--brand-ghost2); border-color:var(--brand); color:var(--brand-ink); }
.chip .x { opacity:.6; }
.chip .x:hover { opacity:1; }

.tag { font-size:10.5px; font-weight:650; padding:2px 7px; border-radius:5px; background:var(--surface-3); color:var(--text-2); }

/* ---------- 11. BUTTONS --------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; border-radius:var(--r-sm); font-weight:650; font-size:13px;
  border:1px solid transparent; transition: all .15s var(--ease); white-space:nowrap; line-height:1;
}
.btn:active { transform:translateY(1px); }
.btn svg { width:16px; height:16px; }
.btn.primary { background:var(--brand); color:var(--on-brand); box-shadow:var(--sh-brand); }
.btn.primary:hover { filter:brightness(1.07); }   /* was var(--brand-l) — keeps AA now that brand-l darkens in light */
.btn.accent { background:#4C60DD; color:#fff; }    /* fixed deep indigo → white text AA in both themes */
.btn.accent:hover { background:#3E51C4; }
.btn.gold { background:var(--gold); color:#2A1E00; }
.btn.danger { background:#C21C22; color:#fff; }   /* fixed deep red → white AA in both themes (was var(--danger): failed white on bright dark-mode red) */
.btn.danger:hover { filter:brightness(1.12); }
.btn.ghost { background:var(--surface-3); color:var(--text); border-color:var(--line); }
.btn.ghost:hover { border-color:var(--line-2); background:var(--surface-2); }
.btn.outline { background:transparent; color:var(--text-2); border-color:var(--line-2); }
.btn.outline:hover { color:var(--text); border-color:var(--brand); }
.btn.subtle { background:var(--brand-ghost); color:var(--brand-l); }
.btn.subtle:hover { background:var(--brand-ghost2); }
.btn.sm { padding:6px 11px; font-size:12px; border-radius:var(--r-xs); }
.btn.sm svg { width:14px; height:14px; }
.btn.lg { padding:12px 22px; font-size:14.5px; }
.btn.block { width:100%; }
.btn.icon { padding:9px; width:38px; }
.btn.icon.sm { width:30px; padding:6px; }
.btn[disabled] { opacity:.5; pointer-events:none; }

.btn-group { display:inline-flex; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; gap:2px; }
.btn-group .btn { background:transparent; box-shadow:none; color:var(--text-2); padding:6px 13px; }
.btn-group .btn.active { background:var(--surface); color:var(--text); box-shadow:var(--sh-sm); }

/* ---------- 12. TABLES ---------------------------------------------------- */
.table-wrap { overflow-x:auto; border-radius:var(--r-lg); }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
table.tbl th { text-align:left; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); padding:11px 16px; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; background:var(--surface); z-index:1; }
table.tbl td { padding:12px 16px; border-bottom:1px solid var(--line); color:var(--text-2); vertical-align:middle; }
table.tbl tbody tr { transition:background .12s; }
table.tbl tbody tr:hover { background:var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom:none; }
table.tbl td .t-strong { color:var(--text); font-weight:650; }
table.tbl td .t-sub { color:var(--muted); font-size:11.5px; }
table.tbl.compact td, table.tbl.compact th { padding:8px 12px; }
.t-cell { display:flex; align-items:center; gap:10px; }
.t-num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.row-click { cursor:pointer; }

/* ---------- 13. AVATAR ---------------------------------------------------- */
/* Fills are DEEPENED (same hue family) so the white initials clear AA: the old pastel
   ramps measured 1.85-3.07 on white, and no single ink cleared both ends — the default
   ramp resolved to #3C5CBF->#B98CFF in light (dark ink 3.20, white 2.54), so the fill
   had to move. Fixed hexes, not tokens: --accent/--violet also serve as tints/fills. */
.avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; color:#fff; flex-shrink:0; background:linear-gradient(135deg,#4C60DD,#7C3AED); }
.avatar.sm { width:26px; height:26px; font-size:10.5px; }
.avatar.lg { width:46px; height:46px; font-size:16px; }
.avatar.xl { width:64px; height:64px; font-size:22px; }
/* white-on-fill measured before -> after: b1 2.29->5.03 · b2 3.07->4.98 · b3 1.85->4.98
   b4 2.93->5.01 · b5 2.31->5.00 · b6 2.14->4.98  (worst = the LIGHT stop of each ramp) */
.avatar.b1{background:linear-gradient(135deg,#0C7E62,#095E49)} .avatar.b2{background:linear-gradient(135deg,#325FFF,#2A4CD8)}
.avatar.b3{background:linear-gradient(135deg,#97660A,#7C5208)} .avatar.b4{background:linear-gradient(135deg,#8A3DFF,#7126E0)}
.avatar.b5{background:linear-gradient(135deg,#D23200,#A82800)} .avatar.b6{background:linear-gradient(135deg,#0677A9,#05608A)}
.avatar-stack { display:flex; } .avatar-stack .avatar { margin-left:-10px; border:2px solid var(--surface); } .avatar-stack .avatar:first-child{margin-left:0;}

/* ---------- 14. FORMS ----------------------------------------------------- */
.field { display:flex; flex-direction:column; gap:6px; }
.field label, .f-label { font-size:12px; font-weight:620; color:var(--text-2); }
.field .f-hint { font-size:11px; color:var(--muted); }
.input, .select, .textarea {
  width:100%; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 13px; color:var(--text); transition:border .14s, box-shadow .14s;
}
.input::placeholder, .textarea::placeholder { color:var(--faint); }
.input:focus, .select:focus, .textarea:focus { border-color:var(--brand); box-shadow:var(--ring); }
.textarea { resize:vertical; min-height:84px; }
.select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2376849A' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; cursor:pointer; }
.input-icon { position:relative; }
.input-icon svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); width:16px; height:16px; }
.input-icon .input { padding-left:36px; }

/* toggle */
.toggle { position:relative; width:42px; height:24px; flex-shrink:0; cursor:pointer; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .tg-track { position:absolute; inset:0; background:var(--surface-3); border:1px solid var(--line-2); border-radius:var(--r-pill); transition:.2s; }
.toggle .tg-track::after { content:""; position:absolute; left:3px; top:2.5px; width:17px; height:17px; border-radius:50%; background:var(--muted); transition:.2s; }
.toggle input:checked + .tg-track { background:var(--brand); border-color:var(--brand); }
.toggle input:checked + .tg-track::after { transform:translateX(18px); background:#fff; }

.seg { display:inline-flex; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px; }
.seg button { padding:6px 14px; border-radius:var(--r-xs); font-size:12.5px; font-weight:600; color:var(--muted); transition:.14s; }
.seg button.active { background:var(--surface); color:var(--text); box-shadow:var(--sh-sm); }

.checkbox { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13px; color:var(--text-2); }
.checkbox input { width:17px; height:17px; accent-color:var(--brand); }

.slider { -webkit-appearance:none; width:100%; height:5px; border-radius:5px; background:var(--surface-3); outline:none; }
.slider::-webkit-slider-thumb { -webkit-appearance:none; width:17px; height:17px; border-radius:50%; background:var(--brand); cursor:pointer; box-shadow:var(--sh-sm); }

/* ---------- 15. TABS ------------------------------------------------------ */
.tabs { display:flex; gap:3px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto; }
.tabs::-webkit-scrollbar { height:0; }
.tab { padding:11px 16px; font-size:13.3px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; transition:color .14s; display:flex; align-items:center; gap:7px; }
.tab:hover { color:var(--text-2); }
.tab.active { color:var(--brand-ink); border-bottom-color:var(--brand); }
.tab .tab-cnt { font-size:10.5px; background:var(--surface-3); color:var(--text-2); padding:0 6px; border-radius:var(--r-pill); font-weight:700; }
.tab-pane { display:none; } .tab-pane.show { display:block; animation:fadeUp .3s var(--ease-out); }

.pills { display:flex; gap:7px; flex-wrap:wrap; }

/* ---------- 16. MODAL ----------------------------------------------------- */
.modal-overlay { position:fixed; inset:0; background:rgba(5,8,13,.66); backdrop-filter:blur(4px); z-index:200; display:none; align-items:center; justify-content:center; padding:24px; animation:ovIn .2s; }
.modal-overlay.show { display:flex; }
@keyframes ovIn { from{opacity:0} to{opacity:1} }
.modal { background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl); width:100%; max-width:540px; max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--sh-lg); animation:modalIn .3s var(--ease-out); overflow:hidden; }
.modal.wide { max-width:760px; } .modal.xwide { max-width:1020px; } .modal.narrow { max-width:420px; }
@keyframes modalIn { from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1;transform:none} }
.modal-head { display:flex; align-items:flex-start; gap:12px; padding:20px 22px 16px; border-bottom:1px solid var(--line); }
.modal-head .m-ico { width:38px; height:38px; border-radius:11px; background:var(--brand-ghost); color:var(--brand-l); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modal-head h3 { font-size:16.5px; font-weight:700; letter-spacing:-.2px; }
.modal-head .m-sub { font-size:12.5px; color:var(--muted); margin-top:2px; }
.modal-head .m-close { margin-left:auto; width:32px; height:32px; border-radius:8px; color:var(--muted); display:flex; align-items:center; justify-content:center; transition:.14s; }
.modal-head .m-close:hover { background:var(--surface-3); color:var(--text); }
.modal-body { padding:20px 22px; overflow-y:auto; }
.modal-foot { padding:15px 22px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; background:var(--bg-2); }

/* ---------- 17. DRAWER ---------------------------------------------------- */
.drawer-overlay { position:fixed; inset:0; background:rgba(5,8,13,.55); backdrop-filter:blur(3px); z-index:190; display:none; animation:ovIn .2s; }
.drawer-overlay.show { display:block; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:480px; max-width:94vw; background:var(--surface); border-left:1px solid var(--line-2); box-shadow:var(--sh-lg); z-index:191; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s var(--ease-out); }
.drawer.show { transform:none; }
.drawer.wide { width:640px; }
.drawer-head { padding:20px 24px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px; }
.drawer-head h3 { font-size:17px; font-weight:720; }
.drawer-head .m-close { margin-left:auto; width:32px; height:32px; border-radius:8px; color:var(--muted); display:flex; align-items:center; justify-content:center; }
.drawer-head .m-close:hover { background:var(--surface-3); color:var(--text); }
.drawer-body { flex:1; overflow-y:auto; padding:22px 24px; }
.drawer-foot { padding:16px 24px; border-top:1px solid var(--line); display:flex; gap:10px; }

/* ---------- 18. TOAST ----------------------------------------------------- */
.toast-wrap { position:fixed; bottom:24px; right:24px; z-index:300; display:flex; flex-direction:column; gap:10px; max-width:380px; }
.toast { display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--line-2); border-left:3px solid var(--brand); border-radius:var(--r); padding:13px 15px; box-shadow:var(--sh-lg); animation:toastIn .32s var(--ease-out); }
@keyframes toastIn { from{opacity:0; transform:translateX(30px)} to{opacity:1;transform:none} }
.toast.out { animation:toastOut .3s forwards; }
@keyframes toastOut { to{opacity:0; transform:translateX(30px); height:0; margin:0; padding-top:0; padding-bottom:0;} }
.toast.ok{border-left-color:var(--ok)} .toast.warn{border-left-color:var(--warn)} .toast.danger{border-left-color:var(--danger)} .toast.info{border-left-color:var(--info)} .toast.accent{border-left-color:var(--accent)}
.toast .to-ico { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--brand-ghost); color:var(--brand-l); }
.toast.ok .to-ico{background:var(--ok-ghost);color:var(--ok)} .toast.warn .to-ico{background:var(--warn-ghost);color:var(--warn)} .toast.danger .to-ico{background:var(--danger-ghost);color:var(--danger)} .toast.info .to-ico{background:var(--info-ghost);color:var(--info)} .toast.accent .to-ico{background:var(--accent-ghost);color:var(--accent)}
.toast .to-body { flex:1; min-width:0; }
.toast .to-title { font-weight:680; font-size:13px; }
.toast .to-msg { font-size:12px; color:var(--muted); margin-top:1px; }
.toast .to-close { color:var(--faint); cursor:pointer; }

/* ---------- 19. PROGRESS / METER ------------------------------------------ */
.progress { height:7px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:var(--r-pill); background:var(--brand); transition:width .6s var(--ease-out); }
.progress.thin { height:4px; }
.progress > span.ok{background:var(--ok)} .progress > span.warn{background:var(--warn)} .progress > span.danger{background:var(--danger)} .progress > span.accent{background:var(--accent)} .progress > span.gold{background:var(--gold)}

.meter-ring { position:relative; display:inline-flex; }
.meter-ring .mr-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.meter-ring .mr-val { font-size:18px; font-weight:760; }
.meter-ring .mr-cap { font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* ---------- 20. TIMELINE -------------------------------------------------- */
.timeline { position:relative; padding-left:26px; }
.timeline::before { content:""; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background:var(--line); }
.tl-item { position:relative; padding-bottom:18px; }
.tl-item:last-child { padding-bottom:0; }
.tl-dot { position:absolute; left:-22px; top:2px; width:13px; height:13px; border-radius:50%; background:var(--surface); border:2px solid var(--brand); }
.tl-dot.ok{border-color:var(--ok)} .tl-dot.warn{border-color:var(--warn)} .tl-dot.danger{border-color:var(--danger)} .tl-dot.muted{border-color:var(--faint)}
.tl-dot.fill { background:var(--brand); }
.tl-time { font-size:11px; color:var(--muted); font-family:var(--mono); }
.tl-title { font-weight:640; font-size:13px; margin-top:1px; }
.tl-desc { font-size:12px; color:var(--muted); margin-top:2px; }

/* stepper (horizontal) */
.stepper { display:flex; align-items:center; gap:0; }
.step { display:flex; align-items:center; gap:9px; flex:1; }
.step .st-num { width:28px; height:28px; border-radius:50%; background:var(--surface-3); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:var(--muted); flex-shrink:0; }
.step.done .st-num { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.step.active .st-num { background:var(--brand-ghost2); border-color:var(--brand); color:var(--brand-l); }
.step .st-lbl { font-size:12.5px; font-weight:600; color:var(--muted); }
.step.active .st-lbl, .step.done .st-lbl { color:var(--text); }
.step .st-line { flex:1; height:2px; background:var(--line); margin:0 4px; }
.step.done .st-line { background:var(--brand); }

/* ---------- 21. KANBAN ---------------------------------------------------- */
.kanban { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; }
.kan-col { min-width:280px; width:280px; flex-shrink:0; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); display:flex; flex-direction:column; max-height:72vh; }
.kan-col-head { padding:12px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
.kan-col-head .kc-dot { width:9px; height:9px; border-radius:50%; }
.kan-col-head h4 { font-size:13px; font-weight:680; }
.kan-col-head .kc-cnt { margin-left:auto; font-size:11px; color:var(--muted); background:var(--surface-3); padding:1px 8px; border-radius:var(--r-pill); font-weight:700; }
.kan-list { padding:11px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; flex:1; }
.kan-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 13px; cursor:grab; transition:border .14s, transform .14s; }
.kan-card:hover { border-color:var(--line-2); transform:translateY(-1px); }
.kan-card.dragging { opacity:.5; }
.kan-card .kk-title { font-weight:620; font-size:13px; margin-bottom:7px; }
.kan-card .kk-meta { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }

/* ---------- 22. CALENDAR -------------------------------------------------- */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow { text-align:center; font-size:10.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; padding:4px 0; }
.cal-day { aspect-ratio:1.15; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 8px; cursor:pointer; transition:border .14s, background .14s; display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.cal-day:hover { border-color:var(--line-2); }
.cal-day.muted { opacity:.4; }
.cal-day.today { border-color:var(--brand); background:var(--brand-ghost); }
.cal-day.sel { border-color:var(--brand); box-shadow:var(--ring); }
.cal-day .cd-num { font-size:12.5px; font-weight:650; }
.cal-day .cd-events { display:flex; flex-direction:column; gap:3px; }
.cal-ev { font-size:10px; padding:1px 5px; border-radius:4px; background:var(--brand-ghost2); color:var(--brand-l); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev.accent{background:var(--accent-ghost);color:var(--accent)} .cal-ev.warn{background:var(--warn-ghost);color:var(--warn)} .cal-ev.danger{background:var(--danger-ghost);color:var(--danger)} .cal-ev.gold{background:var(--gold-ghost);color:var(--gold-ink)}
.cal-dot-row { display:flex; gap:3px; }
.cal-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); }

/* ---------- 23. ORG CHART (organogram) ------------------------------------ */
.org { display:flex; flex-direction:column; align-items:center; gap:0; }
.org-row { display:flex; gap:22px; justify-content:center; position:relative; padding-top:26px; }
.org-row.root { padding-top:0; }
.org-node { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 15px; min-width:170px; text-align:center; position:relative; box-shadow:var(--sh-sm); transition:border .14s, transform .14s; cursor:pointer; }
.org-node:hover { border-color:var(--brand); transform:translateY(-2px); }
.org-node.lead { border-color:var(--brand); background:linear-gradient(180deg,var(--brand-ghost),var(--surface)); }
.org-node .on-name { font-weight:680; font-size:13px; }
.org-node .on-role { font-size:11px; color:var(--muted); margin-top:1px; }
.org-node .on-av { margin:0 auto 7px; }
.org-connect { position:absolute; background:var(--line-2); }

/* ---------- 24. CHAT / MESSAGING ------------------------------------------ */
.chat { display:flex; flex-direction:column; height:100%; }
.chat-stream { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:13px; }
.bubble { max-width:74%; padding:10px 14px; border-radius:15px; font-size:13px; line-height:1.45; position:relative; }
.bubble .b-time { font-size:10px; color:var(--muted); margin-top:4px; }
.bubble.them { background:var(--surface-3); border-bottom-left-radius:4px; align-self:flex-start; }
.bubble.me { background:var(--brand); color:var(--on-brand); border-bottom-right-radius:4px; align-self:flex-end; }
.bubble.me .b-time { color:rgba(4,19,14,.6); }
.bubble.ai { background:linear-gradient(135deg, var(--accent-ghost), var(--surface-3)); border:1px solid var(--accent-ghost); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-input { display:flex; gap:9px; padding:13px 16px; border-top:1px solid var(--line); align-items:flex-end; }
.chat-input .input { border-radius:var(--r-lg); }

/* whatsapp / ussd sims */
.wa-sim { background:#0b141a; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.wa-head { background:#1f2c34; padding:11px 14px; display:flex; align-items:center; gap:10px; color:#e9edef; }
.wa-body { padding:14px; background:#0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h40v40H0z' fill='%230b141a'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff08'/%3E%3C/svg%3E"); min-height:200px; display:flex; flex-direction:column; gap:8px; }
.wa-msg { max-width:80%; padding:7px 11px; border-radius:9px; font-size:12.5px; color:#e9edef; }
.wa-msg.in { background:#1f2c34; align-self:flex-start; }
.wa-msg.out { background:#005c4b; align-self:flex-end; }
.wa-msg .wa-t { font-size:9.5px; opacity:.6; text-align:right; margin-top:2px; }
.ussd-sim { background:#000; border-radius:var(--r-lg); padding:18px; font-family:var(--mono); color:#d6ffe0; border:1px solid var(--line); min-height:200px; font-size:13px; line-height:1.7; }
.ussd-sim .ussd-title { color:#fff; font-weight:700; border-bottom:1px dashed #2a3a2e; padding-bottom:7px; margin-bottom:9px; }
.ussd-sim .ussd-opt { cursor:pointer; } .ussd-sim .ussd-opt:hover { color:#fff; }

/* ---------- 25. AI ASSISTANT PANEL ---------------------------------------- */
.ai-fab { position:fixed; bottom:26px; right:26px; z-index:150; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--violet)); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 34px -8px rgba(108,140,255,.6); cursor:pointer; transition:transform .2s; color:#fff; }
.ai-fab:hover { transform:scale(1.06); }
.ai-fab .ai-pulse { position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); animation:aipulse 2.4s infinite; }
@keyframes aipulse { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.5);opacity:0} }
.ai-panel { position:fixed; bottom:26px; right:26px; z-index:160; width:400px; max-width:94vw; height:600px; max-height:84vh; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--sh-lg); display:none; flex-direction:column; overflow:hidden; }
.ai-panel.show { display:flex; animation:modalIn .3s var(--ease-out); }
.ai-head { padding:16px 18px; background:linear-gradient(135deg, var(--accent-ghost), transparent); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:11px; }
.ai-head .ai-orb { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--violet)); display:flex; align-items:center; justify-content:center; color:#fff; }
.ai-head h4 { font-size:14.5px; font-weight:700; }
.ai-head .ai-status { font-size:11px; color:var(--ok); display:flex; align-items:center; gap:5px; }
.ai-quick { display:flex; gap:7px; flex-wrap:wrap; padding:11px 14px 5px; border-top:1px solid var(--line); }
/* richer empty state + scope + typing indicator */
.ai-empty { text-align:center; padding:24px 20px 8px; animation:fadeUp .4s var(--ease-out); }
.ai-empty-orb { width:54px; height:54px; border-radius:16px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent-ghost),var(--brand-ghost)); color:var(--accent); }
.ai-empty-title { font-weight:760; font-size:16px; letter-spacing:-.2px; }
.ai-empty-sub { color:var(--muted); font-size:12.5px; margin:4px auto 0; max-width:270px; line-height:1.5; }
.ai-scope { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px; }
.ai-scope-tag { font-size:10.5px; font-weight:650; padding:3px 9px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--text-2); border:1px solid var(--line); }
.ai-dots { display:inline-flex; gap:4px; align-items:center; padding:3px 2px; }
.ai-dots i { width:7px; height:7px; border-radius:50%; background:var(--muted); animation:aiDot 1.2s infinite ease-in-out; }
.ai-dots i:nth-child(2){ animation-delay:.16s; } .ai-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes aiDot { 0%,65%,100%{ opacity:.35; transform:translateY(0);} 32%{ opacity:1; transform:translateY(-3px);} }

/* ---------- 26. MISC ------------------------------------------------------ */
.empty-state { text-align:center; padding:48px 24px; color:var(--muted); }
.empty-state .es-ico { width:60px; height:60px; border-radius:50%; background:var(--surface-3); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--faint); }
.empty-state h4 { color:var(--text-2); font-size:15px; margin-bottom:5px; }

.divider { height:1px; background:var(--line); margin:16px 0; }
.dot-sep { color:var(--muted); }   /* was --faint: 2.22:1 on the body wash, 3.06 even on white */
.skeleton { background:linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r-sm); }
@keyframes shimmer { to { background-position:-200% 0; } }

.list-row { display:flex; align-items:center; gap:13px; padding:12px 4px; border-bottom:1px solid var(--line); }
.list-row:last-child { border-bottom:none; }
.list-row .lr-main { flex:1; min-width:0; }
.list-row .lr-title { font-weight:620; font-size:13px; }
.list-row .lr-sub { font-size:11.5px; color:var(--muted); }

.stat-line { display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.stat-line:last-child { border-bottom:none; }
.stat-line .sl-k { color:var(--muted); }
.stat-line .sl-v { font-weight:650; }

.note-box { padding:13px 15px; border-radius:var(--r); font-size:12.5px; line-height:1.5; display:flex; gap:11px; align-items:flex-start; }
.note-box.brand { background:var(--brand-ghost); border:1px solid var(--brand-ghost2); color:var(--text-2); }
.note-box.warn { background:var(--warn-ghost); border:1px solid rgba(245,166,35,.3); }
.note-box.danger { background:var(--danger-ghost); border:1px solid rgba(255,90,95,.3); }
.note-box.info { background:var(--info-ghost); border:1px solid rgba(56,189,248,.3); }
.note-box .nb-ico { flex-shrink:0; margin-top:1px; }

.map-box { position:relative; background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M0 30h60M30 0v60' stroke='%231E2A3D' stroke-width='1'/%3E%3C/svg%3E"); border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; }
.map-dot { position:absolute; width:11px; height:11px; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(0,0,0,.3); }
.map-dot.ok{background:var(--ok)} .map-dot.warn{background:var(--warn)} .map-dot.danger{background:var(--danger); animation:pulse 1.6s infinite}

@keyframes pulse { 0%{box-shadow:0 0 0 0 currentColor; opacity:.9} 70%{box-shadow:0 0 0 8px transparent; opacity:1} 100%{box-shadow:0 0 0 0 transparent} }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block; animation:pulse 1.8s infinite; }

/* heatmap cell */
.heat-cell { border-radius:4px; aspect-ratio:1; }

/* code / json viewer */
/* code / evidence "terminal" block — pinned dark in BOTH themes so mint/gold/accent
   syntax + evidence-pack headers stay high-contrast (was var(--bg): washed out in light). */
.code-box { background:#0E1526; border:1px solid #26365A; border-radius:var(--r); padding:14px 16px; font-family:var(--mono); font-size:12px; color:#C7D2E8; overflow-x:auto; line-height:1.6; }
.code-box b { color:#43E0B6; }
.code-box .k { color:#8AB4FF; } .code-box .s { color:#43E0B6; } .code-box .n { color:#FBBF3C; }
/* theme-var text used inside code samples must be pinned bright — the box is always dark */
.code-box .text-muted { color:#8B9BBA; } .code-box .text-brand-l, .code-box .text-ok { color:#43E0B6; }

/* fraud graph node */
.graph-canvas { position:relative; min-height:320px; }
.graph-node { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
.graph-node .gn-circle { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--line-2); background:var(--surface); font-weight:700; }
.graph-node.risk .gn-circle { border-color:var(--danger); background:var(--danger-ghost); color:var(--danger); }
.graph-node .gn-label { font-size:10px; color:var(--muted); white-space:nowrap; }

/* ---------- 27. SPLASH / ONBOARDING / LOGIN ------------------------------- */
#splash { position:fixed; inset:0; z-index:500; background:radial-gradient(900px 600px at 50% 30%, #0F1A2A, var(--bg)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; transition:opacity .6s; }
#splash.hide { opacity:0; pointer-events:none; }
.splash-logo { width:96px; height:96px; border-radius:26px; background:linear-gradient(135deg,var(--brand),var(--brand-d)); display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:850; color:var(--on-brand); box-shadow:var(--sh-brand); letter-spacing:-2px; animation:logoIn .8s var(--ease-out); }
@keyframes logoIn { from{opacity:0; transform:scale(.7) rotate(-8deg)} to{opacity:1;transform:none} }
.splash-title { font-size:30px; font-weight:800; letter-spacing:-1px; }
.splash-title b { color:var(--brand-l); }
.splash-sub { color:var(--muted); font-size:14px; margin-top:-14px; }
.splash-bar { width:220px; height:4px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; }
.splash-bar > span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--brand-l)); animation:splashLoad 2.1s var(--ease-out) forwards; }
@keyframes splashLoad { to { width:100%; } }
.splash-foot { position:absolute; bottom:30px; color:var(--faint); font-size:11.5px; letter-spacing:.5px; }

/* AUTH / LOGIN */
#auth { position:fixed; inset:0; z-index:400; display:none; }
#auth.show { display:grid; grid-template-columns: 1fr 1fr; }
@media (max-width:900px){ #auth.show { grid-template-columns:1fr; } .auth-left{display:none!important} }
.auth-left { position:relative; overflow:hidden; background:linear-gradient(150deg, #0C2A22, #0A0E14 70%); padding:54px 56px; display:flex; flex-direction:column; }
.auth-left::before { content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, var(--brand-ghost2), transparent 65%); top:-120px; right:-140px; }
.auth-left::after { content:""; position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, var(--accent-ghost), transparent 65%); bottom:-120px; left:-120px; }
.auth-left .al-content { position:relative; z-index:2; margin-top:auto; }
.auth-brand { display:flex; align-items:center; gap:12px; position:relative; z-index:2; }
.auth-hero-title { font-size:38px; font-weight:820; letter-spacing:-1.3px; line-height:1.08; margin-bottom:16px; }
.auth-hero-title b { color:var(--brand-l); }
.auth-hero-sub { color:var(--text-2); font-size:15px; line-height:1.6; max-width:440px; }
.auth-stats { display:flex; gap:28px; margin-top:34px; }
.auth-stat .as-v { font-size:24px; font-weight:800; color:#fff; letter-spacing:-.5px; }
.auth-stat .as-l { font-size:11.5px; color:var(--muted); }
.auth-right { background:var(--bg); display:flex; align-items:center; justify-content:center; padding:40px; overflow-y:auto; }
.auth-card { width:100%; max-width:400px; }
.auth-card h2 { font-size:24px; font-weight:780; letter-spacing:-.5px; }
.auth-card .ac-sub { color:var(--muted); margin:6px 0 26px; }

/* portal grid */
.portal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.portal-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; cursor:pointer; transition:all .16s var(--ease); display:flex; flex-direction:column; gap:9px; text-align:left; position:relative; }
.portal-card:hover { border-color:var(--brand); transform:translateY(-3px); box-shadow:var(--sh); }
.portal-card.sel { border-color:var(--brand); background:var(--brand-ghost); }
.portal-card .pc-ico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.portal-card .pc-name { font-weight:700; font-size:14px; }
.portal-card .pc-desc { font-size:11.5px; color:var(--muted); line-height:1.4; }
.portal-card .pc-role { font-size:10.5px; color:var(--brand-l); font-weight:650; margin-top:auto; }

/* onboarding slides */
#onboarding { position:fixed; inset:0; z-index:450; background:var(--bg); display:none; align-items:center; justify-content:center; }
#onboarding.show { display:flex; }
.ob-wrap { max-width:520px; text-align:center; padding:30px; }
.ob-slide { display:none; } .ob-slide.show { display:block; animation:fadeUp .5s var(--ease-out); }
.ob-icon { width:96px; height:96px; border-radius:50%; background:var(--brand-ghost); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; color:var(--brand-l); }
.ob-title { font-size:26px; font-weight:780; letter-spacing:-.6px; margin-bottom:12px; }
.ob-text { color:var(--text-2); font-size:15px; line-height:1.6; }
.ob-dots { display:flex; gap:8px; justify-content:center; margin:28px 0; }
.ob-dot { width:8px; height:8px; border-radius:50%; background:var(--line-2); transition:.2s; }
.ob-dot.active { width:24px; background:var(--brand); }

/* ---------- 28. MOBILE PHONE FRAME ---------------------------------------- */
.phone-stage { display:flex; gap:30px; flex-wrap:wrap; justify-content:center; padding:10px 0; }
.phone { width:340px; height:710px; background:#05080d; border-radius:42px; padding:11px; box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 0 0 2px #1c2636; position:relative; flex-shrink:0; }
.phone::before { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:118px; height:26px; background:#05080d; border-radius:0 0 16px 16px; z-index:5; }
.phone-screen { width:100%; height:100%; border-radius:32px; overflow:hidden; background:var(--bg); position:relative; display:flex; flex-direction:column; }
.phone-status { height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 22px 0 24px; font-size:12px; font-weight:650; color:var(--text); padding-top:6px; }
.phone-status .ps-right { display:flex; gap:5px; align-items:center; }
.m-header { padding:12px 18px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--line); flex-shrink:0; }
.m-header h3 { font-size:16px; font-weight:740; }
.m-header .m-sub { font-size:11px; color:var(--muted); }
.m-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.m-body::-webkit-scrollbar { width:0; }
.m-nav { flex-shrink:0; display:flex; border-top:1px solid var(--line); background:var(--surface); padding:6px 4px 8px; }
.m-nav button { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; color:var(--muted); font-size:9.5px; font-weight:600; transition:color .14s; }
.m-nav button.active { color:var(--brand-l); }
.m-nav button svg { width:21px; height:21px; }
.m-tab { display:none; flex-direction:column; gap:14px; } .m-tab.show { display:flex; animation:fadeUp .3s var(--ease-out); }

.m-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px; }
.m-stat-row { display:flex; gap:11px; }
.m-stat { flex:1; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px; }
.m-stat .ms-v { font-size:20px; font-weight:780; letter-spacing:-.5px; }
.m-stat .ms-l { font-size:10.5px; color:var(--muted); margin-top:2px; }
.m-hero { border-radius:var(--r-lg); padding:18px; background:linear-gradient(135deg,var(--brand-d),var(--brand)); color:var(--on-brand); position:relative; overflow:hidden; }
.m-hero .mh-label { font-size:11.5px; color:#0E2A21; font-weight:650; }   /* opacity:.8 over the brand fill was 3.55 -> 5.02 */
.m-hero .mh-val { font-size:30px; font-weight:840; letter-spacing:-1px; margin-top:3px; }
.m-list-item { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.m-list-item:last-child{border-bottom:none}
.m-fab { position:absolute; bottom:78px; right:16px; width:50px; height:50px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-brand); z-index:6; }
.phone-label { text-align:center; font-size:12.5px; font-weight:650; color:var(--text-2); margin-top:14px; }
.phone-label span { display:block; color:var(--muted); font-size:11px; font-weight:500; }

/* big numeric soundbox device */
.soundbox-dev { background:linear-gradient(160deg,#1a2535,#0d1420); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:20px; text-align:center; position:relative; }
.soundbox-dev .sb-speaker { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; max-width:120px; margin:0 auto 14px; }
.soundbox-dev .sb-speaker i { aspect-ratio:1; border-radius:50%; background:#2a3a4f; }
.soundbox-dev .sb-wave { display:inline-flex; gap:3px; align-items:flex-end; height:24px; }
.soundbox-dev .sb-wave i { width:3px; background:var(--brand-l); border-radius:2px; animation:wave 1s infinite ease-in-out; }
/* the device mock is a DARK surface even in light theme — --muted (a light-surface ink)
   measured 2.92:1 on #1a2535 there, so the caption reads a light ink instead (7.55) */
.soundbox-dev .text-muted { color:#A9B6CE !important; }
@keyframes wave { 0%,100%{height:6px} 50%{height:22px} }

/* ---------- 29. UTILITIES ------------------------------------------------- */
.text-muted{color:var(--muted)!important} .text-2{color:var(--text-2)!important} .text-brand{color:var(--brand-ink)!important}
.text-ok{color:var(--ok)!important} .text-danger{color:var(--danger)!important} .text-warn{color:var(--warn)!important} .text-gold{color:var(--gold-ink)!important} .text-accent{color:var(--accent)!important} .text-violet{color:var(--violet-ink)!important} .text-info{color:var(--info)!important}
.fw-7{font-weight:700} .fw-6{font-weight:620} .fs-11{font-size:11px} .fs-12{font-size:12px} .fs-13{font-size:13px} .fs-18{font-size:18px} .fs-22{font-size:22px;font-weight:760;letter-spacing:-.5px}
.tar{text-align:right} .tac{text-align:center}
.w-100{width:100%} .nowrap{white-space:nowrap} .ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none!important} .pointer{cursor:pointer}
.scroll-x{overflow-x:auto} .scroll-y{overflow-y:auto}
.cap{text-transform:capitalize}

/* responsive shell */
@media (max-width:1100px){
  #app.show { grid-template-columns: 1fr; }
  .sidebar { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .3s var(--ease); width:280px; }
  .sidebar.open { transform:none; }
  .content { padding:18px 16px 50px; }
  .t-search { display:none; }
}
.menu-toggle { display:none; }
@media (max-width:1100px){ .menu-toggle { display:flex; } }

/* ============================================================================
   AUDIT HARDENING LAYER (v2) — added after the multi-lens review
   ============================================================================ */

/* --- surface-aware ink tokens: keep brand/gold/violet legible on light surfaces (AA).
       Consumers (.text-*, .badge.*, .tab.active, .chip.active, .kpi-ico.*) live in their
       ORIGINAL rule blocks above and read these tokens — single source of truth, no duplicates. --- */
:root { --brand-ink: var(--brand-l); --gold-ink: var(--gold); --violet-ink: var(--violet); }
[data-theme="light"] { --gold-ink:#8A5800; --violet-ink:#7C3AED; }   /* --brand-ink set per-theme by TMS.applyTheme */
.trend.up  { color: var(--ok); }
.env-strip { color: var(--gold-ink); }

/* --- collapsible sidebar groups --- */
.s-group-head { display:flex; align-items:center; justify-content:space-between; padding:13px 18px 5px; cursor:pointer; user-select:none; border-radius:6px; }
.s-group-head > span:first-child { font-size:10px; font-weight:750; letter-spacing:1px; text-transform:uppercase; color:var(--muted); transition:color .14s; }
.s-group-head:hover > span:first-child { color:#8FA0B8; }
.s-group-chev { color:var(--muted); opacity:.55; transition:transform .22s var(--ease); display:flex; }
.s-group:not(.open) .s-group-chev { transform:rotate(-90deg); }
.s-group-items { overflow:hidden; max-height:900px; transition:max-height .28s var(--ease); }
.s-group:not(.open) .s-group-items { max-height:0; }

/* --- glossary term (inline jargon explainer) --- */
.term { border-bottom:1px dotted var(--muted); cursor:help; }
.term:hover, .term:focus-visible { color:var(--brand-ink); border-bottom-color:var(--brand); }

/* --- breadcrumb home segment --- */
.crumb-home { cursor:pointer; }
.crumb-home:hover { color:var(--brand-ink); }

/* --- topbar select pill (icon-prefixed, disambiguated) + mobile search --- */
.sel-pill { display:inline-flex; align-items:center; gap:6px; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 11px; cursor:pointer; transition:border .14s; }
.sel-pill:hover, .sel-pill:focus-within { border-color:var(--brand); }
.sel-pill > span { font-size:13px; line-height:1; }
select.lang-sel.bare { background:none; border:none; padding:0 2px; color:var(--text-2); font-weight:600; font-size:12px; cursor:pointer; }
select.lang-sel.bare:focus { box-shadow:none; }
.t-search-mobile { display:none; }
@media (max-width:1100px){ .t-search-mobile { display:flex; } .t-hide-sm { display:none!important; } }
@media (max-width:820px){ .env-strip, .t-clock { display:none; } }

/* --- responsive two-pane (messaging / soundbox etc.) --- */
.split-2 { display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }
.split-2.narrow { grid-template-columns:260px 1fr; }
@media (max-width:860px){ .split-2, .split-2.narrow { grid-template-columns:1fr; } }

/* --- first-run guided tour (coach-marks) --- */
#tour { position:fixed; inset:0; z-index:600; }
.tour-dim { position:absolute; inset:0; }
.tour-ring { position:absolute; border:2.5px solid var(--brand-l); border-radius:13px; box-shadow:0 0 0 9999px rgba(4,8,13,.62); transition:all .32s var(--ease-out); pointer-events:none; }
.tour-card { position:absolute; width:326px; max-width:90vw; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:18px 19px; z-index:2; animation:fadeUp .3s var(--ease-out); }
.tour-step { font-size:10px; font-weight:750; letter-spacing:1.2px; color:var(--brand-ink); }
.tour-card h4 { font-size:16.5px; font-weight:730; margin:5px 0 7px; letter-spacing:-.2px; }
.tour-card p { font-size:13px; color:var(--text-2); line-height:1.55; }
.tour-dots { display:flex; gap:6px; margin-top:13px; }
.tour-dots span { width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:.2s; }
.tour-dots span.on { width:20px; border-radius:4px; background:var(--brand); }

/* --- keyboard focus visibility on custom controls --- */
[role="button"]:focus-visible, .tab[data-tab]:focus-visible, .s-item:focus-visible, .portal-card:focus-visible { box-shadow: var(--ring); border-radius:var(--r-sm); outline:none; }

/* ============================================================================
   LIGHT THEME — COLORFUL & LOVABLE (default) : friendly light sidebar,
   vibrant login hero, colourful splash, and warm playful accents.
   ============================================================================ */
[data-theme="light"] .sidebar { border-right-color: var(--line); }
[data-theme="light"] .s-brand { border-bottom-color: var(--line); }
[data-theme="light"] .s-brand-name { color: var(--text); }
[data-theme="light"] .s-brand-sub { color: var(--muted); }
[data-theme="light"] .s-section-label { color: var(--faint); }
[data-theme="light"] .s-item { color: var(--text-2); }
[data-theme="light"] .s-item:hover { background: rgba(124,156,255,.12); color: var(--text); }
[data-theme="light"] .s-item.active { background: var(--brand-ghost2); color: var(--brand-ink); }
[data-theme="light"] .s-item.active .s-ico { color: var(--brand-d); }
[data-theme="light"] .s-group-head:hover { background: rgba(124,156,255,.08); }
[data-theme="light"] .s-foot { border-top-color: var(--line); }
[data-theme="light"] .s-user:hover { background: rgba(124,156,255,.10); }
[data-theme="light"] .s-user .s-uname { color: var(--text); }
[data-theme="light"] .s-user .s-urole { color: var(--muted); }
[data-theme="light"] .s-user > span { color: var(--muted) !important; }   /* was --faint: 2.95:1 on the #FBFAFF sidebar */

/* colourful hero + livelier cards */
[data-theme="light"] .hero-panel {
  background:
    radial-gradient(680px 300px at 90% -40%, var(--brand-ghost2), transparent 62%),
    radial-gradient(460px 240px at 6% 130%, var(--accent-ghost), transparent 62%),
    linear-gradient(135deg, #FFFFFF, #F4F0FE);
  border-color: var(--line);
}
[data-theme="light"] .kpi:hover { box-shadow: 0 18px 36px -16px rgba(90,75,160,.30); }
[data-theme="light"] .panel.hover:hover { box-shadow: 0 18px 40px -18px rgba(90,75,160,.26); }

/* splash — light & colourful */
[data-theme="light"] #splash { background: radial-gradient(950px 640px at 50% 24%, #EAF0FF 0%, #F3EEFD 45%, var(--bg) 100%); }
[data-theme="light"] .splash-title { color: var(--text); }
[data-theme="light"] .splash-title b { color: var(--brand-d); }
[data-theme="light"] .splash-foot { color: var(--faint); }

/* login hero — brand→accent gradient (keeps white text), lovable.
   Stops DEEPENED for AA: the old ramp's lightest stop #13C296 gave white only 2.29:1
   (hero title, stat values, brand name all sat on it). Same emerald→indigo family,
   worst stop is now #0B7A5E = 5.29:1 on white. The alpha-whites below were lifted to
   match (.82 measured 3.80 on the new worst stop, .72 → 3.29), and the two decorative
   glows were softened so they cannot wash the ramp back up under the text. */
[data-theme="light"] .auth-left { background: linear-gradient(150deg, #0A6B52 0%, #0B7A5E 44%, #3A56D8 100%); }
[data-theme="light"] .auth-left::before { background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); }
[data-theme="light"] .auth-left::after  { background: radial-gradient(circle, rgba(255,224,168,.20), transparent 65%); }
[data-theme="light"] .auth-hero-title { color: #FFFFFF; }
[data-theme="light"] .auth-hero-title b { color: #FFE9A8; }   /* 38px/820 = large text, needs 3.0 → 4.40 */
[data-theme="light"] .auth-hero-sub { color: rgba(255,255,255,.96); }
[data-theme="light"] .auth-stat .as-l { color: rgba(255,255,255,.95); }
[data-theme="light"] .auth-brand div div:last-child { color: rgba(255,255,255,.92) !important; }
[data-theme="light"] .auth-right { background: var(--bg); }

/* onboarding — light & colourful */
[data-theme="light"] #onboarding { background: radial-gradient(900px 600px at 50% 20%, #EEF2FF, var(--bg)); }

/* ============================================================================
   VIBRANT v2 — per-metric KPI tints, colour-blocked sidebar, warmer glowing
   base, colourful hero & portal cards. (uses color-mix; graceful fallback.)
   ============================================================================ */
/* tone → --kc map (KPIs + portal cards) */
.kpi-t-brand,.portal-t-brand   { --kc:var(--brand); }
.kpi-t-accent,.portal-t-accent { --kc:var(--accent); }
.kpi-t-gold,.portal-t-gold     { --kc:var(--gold); }
.kpi-t-danger,.portal-t-danger { --kc:var(--danger); }
.kpi-t-info,.portal-t-info     { --kc:var(--info); }
.kpi-t-warn,.portal-t-warn     { --kc:var(--warn); }
.kpi-t-violet,.portal-t-violet { --kc:var(--violet); }
.kpi-t-ok,.portal-t-ok         { --kc:var(--ok); }

/* softly-tinted KPI cards, per metric, with a colour accent bar + tinted value */
.kpi[class*="kpi-t-"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 13%, transparent), color-mix(in srgb, var(--kc) 4%, transparent) 60%), var(--surface);
  border-color: color-mix(in srgb, var(--kc) 30%, var(--line));
}
.kpi[class*="kpi-t-"]::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--kc); }
.kpi[class*="kpi-t-"]:hover { border-color: color-mix(in srgb, var(--kc) 55%, var(--line)); box-shadow: 0 18px 42px -16px color-mix(in srgb, var(--kc) 45%, transparent); }
.kpi[class*="kpi-t-"] .kpi-val { color: color-mix(in srgb, var(--kc) 50%, var(--text)); }

/* colourful portal (login) cards, tinted per role */
.portal-card[class*="portal-t-"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 12%, transparent), color-mix(in srgb, var(--kc) 3%, transparent) 62%), var(--surface);
  border-color: color-mix(in srgb, var(--kc) 28%, var(--line));
}
.portal-card[class*="portal-t-"]:hover { border-color: var(--kc); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--kc) 42%, transparent); }

/* colour-blocked sidebar — each nav group carries its own hue (--gc).
   Text/icons read --gc-ink (darkened for AA on the light sidebar); the vivid raw
   --gc is reserved for the active indicator bar + soft tint backgrounds. */
.s-group { --gc-ink: var(--gc); }
[data-theme="light"] .s-group { --gc-ink: color-mix(in srgb, var(--gc) 56%, #0B0E1F); }
.s-group-head { color: var(--gc-ink, var(--faint)) !important; }
.s-group .s-item .s-ico { color: var(--gc-ink); opacity:.96; }
.s-group .s-item:hover { background: color-mix(in srgb, var(--gc) 12%, transparent); }
.s-group .s-item.active { background: color-mix(in srgb, var(--gc) 17%, transparent); color: var(--gc-ink); }
.s-group .s-item.active .s-ico { color: var(--gc-ink); opacity:1; }
.s-group .s-item.active::before { background: var(--gc); }
.s-group .s-item.active .s-badge.soft { color: var(--gc-ink); background: color-mix(in srgb, var(--gc) 18%, transparent); }

/* warmer, stronger, glowing base (light default) */
[data-theme="light"] { --bg:#F6F3F7; }
[data-theme="light"] body {
  background:
    radial-gradient(1200px 820px at -2% -16%, rgba(124,156,255,.28), transparent 55%),
    radial-gradient(1050px 700px at 102% -10%, rgba(19,194,150,.22), transparent 52%),
    radial-gradient(900px 900px at 104% 116%, rgba(255,138,101,.18), transparent 55%),
    radial-gradient(860px 860px at 16% 122%, rgba(185,140,255,.20), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
/* extra-colourful hero */
[data-theme="light"] .hero-panel {
  background:
    radial-gradient(700px 340px at 90% -55%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%),
    radial-gradient(560px 300px at 2% 145%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(520px 300px at 55% 140%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 62%),
    linear-gradient(135deg, #FFFFFF, #F3EEFE);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}

/* ============================================================================
   VIBRANT v2 · §6 "even more" — per-tone rows, panel accent bars, unified
   kpi-ico chips, per-tone progress fills, 9-tone note-box/toast rails, an
   always-on light sidebar band, and stronger KPI numbers.
   Discipline (matches edge.css): every color-mix is preceded by a SOLID line
   whose fallback is a REAL tint hex (--tn-*-fill / -ink) so Chromium-80 renders
   colour — never flat grey. Tints are bg-only and <=14%; every <14px glyph reads
   an -ink token, never raw --kc. WCAG-AA in both themes.
   ============================================================================ */

/* extend the KPI/portal tone map (908-915) with the two new tones */
.kpi-t-cyan,.portal-t-cyan     { --kc:var(--tn-cyan); }
.kpi-t-coral,.portal-t-coral   { --kc:var(--tn-coral); }

/* tone -> (--kc vivid · --kf fill · --ki ink) map for the §6 components below */
.row-t-brand, .panel-t-brand, .kpi-ico.brand, .note-box.brand   { --kc:var(--tn-brand);  --kf:var(--tn-brand-fill);  --ki:var(--tn-brand-ink); }
.row-t-accent,.panel-t-accent,.kpi-ico.accent,.note-box.accent  { --kc:var(--tn-accent); --kf:var(--tn-accent-fill); --ki:var(--tn-accent-ink); }
.row-t-violet,.panel-t-violet,.kpi-ico.violet,.note-box.violet  { --kc:var(--tn-violet); --kf:var(--tn-violet-fill); --ki:var(--tn-violet-ink); }
.row-t-gold,  .panel-t-gold,  .kpi-ico.gold,  .note-box.gold    { --kc:var(--tn-gold);   --kf:var(--tn-gold-fill);   --ki:var(--tn-gold-ink); }
.row-t-ok,    .panel-t-ok,    .kpi-ico.ok,    .note-box.ok      { --kc:var(--tn-ok);     --kf:var(--tn-ok-fill);     --ki:var(--tn-ok-ink); }
.row-t-warn,  .panel-t-warn,  .kpi-ico.warn,  .note-box.warn    { --kc:var(--tn-warn);   --kf:var(--tn-warn-fill);   --ki:var(--tn-warn-ink); }
.row-t-danger,.panel-t-danger,.kpi-ico.danger,.note-box.danger  { --kc:var(--tn-danger); --kf:var(--tn-danger-fill); --ki:var(--tn-danger-ink); }
.row-t-cyan,  .panel-t-cyan,  .kpi-ico.cyan,  .kpi-ico.info,
  .note-box.cyan, .note-box.info                                { --kc:var(--tn-cyan);   --kf:var(--tn-cyan-fill);   --ki:var(--tn-cyan-ink); }
.row-t-coral, .panel-t-coral, .kpi-ico.coral, .note-box.coral   { --kc:var(--tn-coral);  --kf:var(--tn-coral-fill);  --ki:var(--tn-coral-ink); }

/* a — per-tone table / list rows (bg-only; <=8% tint keeps --text-2/--muted AA) */
tr[class*="row-t-"], .list-row[class*="row-t-"] {
  background: var(--kf);                                       /* Cr-80 solid tint hex */
  background: color-mix(in srgb, var(--kc) 7%, transparent);
}

/* b — panel-header 3px hue accent bar (hue-only, no text sits on it) */
.panel[class*="panel-t-"]::after {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--kc);
  border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg);
  pointer-events:none;
}

/* c — unified kpi-ico status chip: card --kc fill, glyph reads the per-tone -ink
       token (the <14px glyph must NEVER resolve to raw --kc) */
.kpi-ico.brand, .kpi-ico.accent, .kpi-ico.violet, .kpi-ico.gold, .kpi-ico.ok,
.kpi-ico.warn, .kpi-ico.danger, .kpi-ico.info, .kpi-ico.cyan, .kpi-ico.coral {
  background: var(--kf);                                       /* Cr-80 solid tint hex */
  background: color-mix(in srgb, var(--kc) 14%, transparent);
  color: var(--ki);
}

/* d — per-tone progress fills (decorative; existing ok/warn/danger/accent/gold kept) */
.progress > span.brand  { background: var(--tn-brand); }
.progress > span.violet { background: var(--tn-violet); }
.progress > span.cyan   { background: var(--tn-cyan); }
.progress > span.coral  { background: var(--tn-coral); }

/* e — 9-tone note-box rails + tinted body (with --kf Cr-80 fallback); toast rails */
.note-box.brand, .note-box.accent, .note-box.violet, .note-box.gold, .note-box.ok,
.note-box.warn, .note-box.danger, .note-box.info, .note-box.cyan, .note-box.coral {
  border-left: 3px solid var(--kc);
  background: var(--kf);                                       /* Cr-80 solid tint hex */
  background: color-mix(in srgb, var(--kc) 9%, var(--surface));
}
.toast.brand{border-left-color:var(--tn-brand)}   .toast.accent{border-left-color:var(--tn-accent)}
.toast.violet{border-left-color:var(--tn-violet)} .toast.gold{border-left-color:var(--tn-gold)}
.toast.ok{border-left-color:var(--tn-ok)}         .toast.warn{border-left-color:var(--tn-warn)}
.toast.danger{border-left-color:var(--tn-danger)} .toast.info{border-left-color:var(--tn-cyan)}
.toast.cyan{border-left-color:var(--tn-cyan)}     .toast.coral{border-left-color:var(--tn-coral)}

/* f — always-on faint hue band under each light-theme sidebar group (label stays --gc-ink) */
[data-theme="light"] .s-group-head {
  background: rgba(124,156,255,.05);                           /* Cr-80 solid faint tint */
  background: color-mix(in srgb, var(--gc) 6%, transparent);
}

/* stronger KPI numbers — bump hue-mix 50%->60% ONLY for tones that stay AA at 60%
   (brand/accent/violet/danger/cyan/coral). gold/ok/warn/info keep 50% via line 924,
   and .kpi-val is 26px/780 (>=18.66px bold -> large-text 3:1). */
.kpi.kpi-t-brand .kpi-val, .kpi.kpi-t-accent .kpi-val, .kpi.kpi-t-violet .kpi-val,
.kpi.kpi-t-danger .kpi-val, .kpi.kpi-t-cyan .kpi-val, .kpi.kpi-t-coral .kpi-val {
  color: var(--text);                                          /* Cr-80 solid */
  color: color-mix(in srgb, var(--kc) 60%, var(--text));
}