/* ── Design System: Spacing & Typography Scales ── */
:root{
  /* Spacing scale */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  /* Typography scale */
  --text-xs:0.6875rem;--text-sm:0.8125rem;--text-base:0.9375rem;--text-md:1.0625rem;
  --text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:1.875rem;--text-3xl:2.25rem;--text-4xl:3rem;
  /* Grade colours */
  --grade-a:#4ade80;--grade-b:#60a5fa;--grade-c:#fbbf24;--grade-d:#f97316;--grade-f:#f87171;
  /* Severity semantic aliases */
  --sev-critical:#f87171;--sev-high:#fb923c;--sev-medium:#fbbf24;--sev-low:#60a5fa;--sev-pass:#4ade80;--sev-info:#60a5fa;
  /* Brand / provider colours */
  --brand-aws:#ff9900;--brand-azure:#0078d4;--brand-gcp:#4285f4;
  --brand-github:#e8f4ff;--brand-gitlab:#fc6d26;--brand-docker:#2496ED;
  --brand-jira:#0052CC;--brand-wiz:#8b5cf6;--brand-ansible:#EE0000;
  /* Green (used everywhere — single source) */
  --green:#4ade80;--green-dim:rgba(74,222,128,.1);
}
/* ── Colour Schemes ── */
:root,[data-theme="dark"]{
  --bg:#0f172a;--surface:#1e293b;--surface2:#263447;--border:rgba(255,255,255,0.08);
  --text:#cbd5e1;--text-dim:#64748b;--text-bright:#f1f5f9;
  --nav-bg:rgba(15,23,42,0.97);--input-bg:#1e293b;
  --code-bg:rgba(26,115,232,.05);--code-border:rgba(26,115,232,.2);
  --shadow:0 4px 24px rgba(0,0,0,.3);--warn:#f59e0b;--danger:#ef4444;
  --mono:'Share Tech Mono',monospace;--head:'Barlow Condensed',sans-serif;
}
[data-theme="light"]{
  --bg:#f1f5f9;--surface:#ffffff;--surface2:#f8fafc;--border:rgba(0,0,0,0.08);
  --text:#334155;--text-dim:#94a3b8;--text-bright:#0f172a;
  --nav-bg:rgba(255,255,255,.97);--input-bg:#ffffff;
  --code-bg:rgba(26,115,232,.04);--code-border:rgba(26,115,232,.15);
  --shadow:0 1px 3px rgba(0,0,0,.08);--warn:#d97706;--danger:#dc2626;
}
[data-scheme="cyber"][data-theme="dark"]  {--accent:#1A73E8;--accent2:#34d399;--grid:rgba(26,115,232,.025)}
[data-scheme="cyber"][data-theme="light"] {--accent:#1557B0;--accent2:#059669;--grid:rgba(26,115,232,.03)}
[data-scheme="forge"][data-theme="dark"]  {--accent:#f97316;--accent2:#fbbf24;--grid:rgba(249,115,22,.025)}
[data-scheme="forge"][data-theme="light"] {--accent:#ea580c;--accent2:#d97706;--grid:rgba(249,115,22,.03)}
[data-scheme="purple"][data-theme="dark"] {--accent:#8b5cf6;--accent2:#c084fc;--grid:rgba(139,92,246,.025)}
[data-scheme="purple"][data-theme="light"]{--accent:#7c3aed;--accent2:#9333ea;--grid:rgba(124,58,237,.03)}
[data-scheme="emerald"][data-theme="dark"]{--accent:#10b981;--accent2:#6ee7b7;--grid:rgba(16,185,129,.025)}
[data-scheme="emerald"][data-theme="light"]{--accent:#059669;--accent2:#047857;--grid:rgba(5,150,105,.03)}
[data-scheme="redops"][data-theme="dark"] {--accent:#ef4444;--accent2:#fb923c;--grid:rgba(239,68,68,.025)}
[data-scheme="redops"][data-theme="light"]{--accent:#dc2626;--accent2:#ea580c;--grid:rgba(220,38,38,.03)}
[data-scheme="stealth"][data-theme="dark"]{--accent:#94a3b8;--accent2:#cbd5e1;--grid:rgba(148,163,184,.025)}
[data-scheme="stealth"][data-theme="light"]{--accent:#475569;--accent2:#64748b;--grid:rgba(71,85,105,.03)}
/* ────────────────────────────────────────────────────────────────────────────
   University of Florida Gators — full brand takeover.
   Pantone 172 (#FA4616 orange) + Pantone 287 (#0021A5 blue).
   Unlike other schemes (which only swap --accent), this one overrides the
   entire palette — page background, surface, text, nav — so the brand is
   visually dominant for university demos. White cards on UF blue with
   orange + gold throughout.
   ──────────────────────────────────────────────────────────────────────── */
[data-scheme="uf"][data-theme="dark"]{
  /* Dark theme UF: deep UF-navy page, dark UF-blue cards, white text everywhere */
  --bg:#00174D;                       /* very dark UF navy page background */
  --surface:#001F8C;                  /* darker UF-blue cards */
  --surface2:#002BA8;                 /* slightly lighter for layered surfaces */
  --border:rgba(255,255,255,.14);
  --text:#ffffff;
  --text-dim:rgba(255,255,255,.72);
  --text-bright:#FFFFFF;
  --nav-bg:rgba(0,17,64,0.98);        /* very dark UF blue nav */
  --input-bg:#001F8C;
  --code-bg:rgba(255,255,255,.05);
  --code-border:rgba(255,210,0,.25);  /* gold code borders */
  --warn:#FA4616;
  --accent:#FA4616;                   /* UF orange primary CTA */
  --accent2:#FFD200;                  /* UF gold secondary */
  --grid:rgba(255,255,255,.04);
}
[data-scheme="uf"][data-theme="light"]{
  --bg:#E5EAF7;                       /* very light UF-blue page bg */
  --surface:#ffffff;
  --surface2:#F8FAFC;
  --border:rgba(0,33,165,.12);
  --text:#1E293B;
  --text-dim:#64748B;
  --text-bright:#0021A5;
  --nav-bg:rgba(0,33,165,0.98);       /* solid UF blue nav */
  --input-bg:#ffffff;
  --code-bg:rgba(0,33,165,.04);
  --code-border:rgba(0,33,165,.15);
  --warn:#FA4616;
  --accent:#0021A5;
  --accent2:#FA4616;
  --grid:rgba(0,33,165,.04);
}

/* UF brand stripe — appears at the very top of the page across both themes */
[data-scheme="uf"] body::before{
  content:'';
  position:fixed; top:0; left:0; right:0; height:4px; z-index:9999;
  background:linear-gradient(90deg,#FA4616 0%,#FFD200 50%,#0021A5 100%);
  pointer-events:none;
}

/* Nav under UF scheme: white text on UF blue, gold underline on active items */
[data-scheme="uf"] .navbar{
  background:var(--nav-bg) !important;
  border-bottom:2px solid #FA4616;
}
[data-scheme="uf"] .navbar .logo-text,
[data-scheme="uf"] .navbar .logo-text *{ color:#ffffff !important; }
[data-scheme="uf"] .navbar .logo-text span{ color:#FFD200 !important; } /* the "Scan" half of the logo gold */
[data-scheme="uf"] .navbar .logo-sub{ color:rgba(255,255,255,.65) !important; }
[data-scheme="uf"] .navbar .nav-item > a,
[data-scheme="uf"] .navbar .nav-item > .nav-trigger{ color:rgba(255,255,255,.85) !important; }
[data-scheme="uf"] .navbar .nav-item > a:hover,
[data-scheme="uf"] .navbar .nav-item > .nav-trigger:hover,
[data-scheme="uf"] .navbar .nav-item.open > .nav-trigger,
[data-scheme="uf"] .navbar .nav-item > a.active{
  color:#FFD200 !important;
  background:rgba(255,255,255,.06);
}

/* Dropdown menus stay white-on-blue style (legible) */
[data-scheme="uf"] .nav-dropdown{
  background:#ffffff !important;
  border:1px solid rgba(0,33,165,.18);
  box-shadow:0 8px 24px rgba(0,33,165,.18);
}
[data-scheme="uf"] .nav-dropdown a{ color:#1E293B !important; }
[data-scheme="uf"] .nav-dropdown a:hover{ color:#0021A5 !important; background:rgba(0,33,165,.05) !important; }
[data-scheme="uf"] .nav-dropdown a.active{ color:#FA4616 !important; background:rgba(250,70,22,.06) !important; }
[data-scheme="uf"] .nav-dropdown .nav-section-label{ color:#0021A5 !important; }

/* Tables — DARK theme: dark UF-blue surfaces, white text, gold separator.
   LIGHT theme: blue→orange gradient header with white text, white rows. */
[data-scheme="uf"][data-theme="dark"] .rtable thead,
[data-scheme="uf"][data-theme="dark"] .rtable th,
[data-scheme="uf"][data-theme="dark"] table thead th{
  background:#001F8C !important;
  color:#FFD200 !important;
  border-bottom:2px solid #FA4616 !important;
}
[data-scheme="uf"][data-theme="dark"] .rtable tbody tr,
[data-scheme="uf"][data-theme="dark"] table tbody tr{ background:transparent; }
[data-scheme="uf"][data-theme="dark"] .rtable tbody tr:hover,
[data-scheme="uf"][data-theme="dark"] table tbody tr:hover{ background:rgba(250,70,22,.10) !important; }
[data-scheme="uf"][data-theme="dark"] .rtable td,
[data-scheme="uf"][data-theme="dark"] table td{
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  color:#ffffff !important;
}

[data-scheme="uf"][data-theme="light"] .rtable thead,
[data-scheme="uf"][data-theme="light"] .rtable th,
[data-scheme="uf"][data-theme="light"] table thead th{
  background:linear-gradient(90deg,#0021A5 0%,#0040C5 50%,#FA4616 100%) !important;
  color:#ffffff !important;
  border-bottom:2px solid #FFD200 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
[data-scheme="uf"][data-theme="light"] .rtable tbody tr,
[data-scheme="uf"][data-theme="light"] table tbody tr{ background:#ffffff; }
[data-scheme="uf"][data-theme="light"] .rtable tbody tr:hover,
[data-scheme="uf"][data-theme="light"] table tbody tr:hover{ background:rgba(250,70,22,.06) !important; }
[data-scheme="uf"][data-theme="light"] .rtable td,
[data-scheme="uf"][data-theme="light"] table td{
  border-bottom:1px solid rgba(0,33,165,.08) !important;
  color:#1E293B !important;
}

/* Panels / cards — sharper UF-blue shadow + orange top-rail on .atk-panel--primary */
[data-scheme="uf"] .panel,
[data-scheme="uf"] .atk-panel{
  background:#ffffff !important;
  border:1px solid rgba(0,33,165,.10) !important;
  box-shadow:0 1px 3px rgba(0,33,165,.06);
}
[data-scheme="uf"] .atk-panel--primary{
  border-color:#FA4616 !important;
  background:linear-gradient(135deg,rgba(250,70,22,.04),#ffffff 50%) !important;
  box-shadow:0 0 0 1px rgba(250,70,22,.25),0 8px 24px rgba(0,33,165,.10);
}

/* Action header — UF orange→gold gradient (was the generic cyber gradient) */
[data-scheme="uf"] .atk-action-header{
  background:linear-gradient(135deg,rgba(250,70,22,.10),rgba(255,210,0,.06) 60%,#ffffff) !important;
  border-color:rgba(250,70,22,.35) !important;
}
[data-scheme="uf"] .atk-action-header::before{
  background:linear-gradient(90deg,#FA4616,#FFD200 50%,transparent 80%) !important;
}

/* Risk-card severity rail — keep critical/high red (security signal) but
   tint the medium/low rails toward UF blue */
[data-scheme="uf"] .atk-risk-card--sev-medium .atk-risk-card__sev-rail{ background:#FFD200 !important; }
[data-scheme="uf"] .atk-risk-card--sev-low .atk-risk-card__sev-rail{ background:#0021A5 !important; }

/* Buttons — primary = UF orange, secondary = UF blue, hover lifts to gold */
[data-scheme="uf"] .atk-btn--primary,
[data-scheme="uf"] .btn-primary{
  background:#FA4616 !important; border-color:#FA4616 !important; color:#ffffff !important;
}
[data-scheme="uf"] .atk-btn--primary:hover,
[data-scheme="uf"] .btn-primary:hover{ background:#E03E10 !important; border-color:#E03E10 !important; }
[data-scheme="uf"] .atk-btn--secondary,
[data-scheme="uf"] .btn-secondary{
  background:#0021A5 !important; border-color:#0021A5 !important; color:#ffffff !important;
}
[data-scheme="uf"] .atk-btn--secondary:hover,
[data-scheme="uf"] .btn-secondary:hover{ background:#001785 !important; border-color:#001785 !important; }
[data-scheme="uf"] .atk-btn--ghost{ color:#0021A5 !important; border-color:rgba(0,33,165,.25) !important; }
[data-scheme="uf"] .atk-btn--ghost:hover{ color:#FA4616 !important; border-color:#FA4616 !important; background:rgba(250,70,22,.04) !important; }

/* Score-ring grade fills — keep the semantic colour but with UF accent for B-grade */
[data-scheme="uf"] .atk-score-ring__fill--grade-b{ stroke:#0021A5 !important; }
[data-scheme="uf"] .atk-score-meta__grade--b{ color:#0021A5 !important; }

/* Launchpad cards — UF orange icon glow on hover */
[data-scheme="uf"] .atk-launchpad__card:hover{
  border-color:#FA4616 !important;
  box-shadow:0 4px 16px rgba(250,70,22,.18);
}
[data-scheme="uf"] .atk-launchpad__icon{ color:#FA4616 !important; border-color:rgba(250,70,22,.20) !important; }

/* Severity badges retain meaning but borrow UF tints for non-critical */
[data-scheme="uf"] .atk-sev-badge--medium{ color:#0021A5 !important; border-color:rgba(0,33,165,.40) !important; background:rgba(0,33,165,.06) !important; }
[data-scheme="uf"] .atk-sev-badge--low{ color:#0021A5 !important; border-color:rgba(0,33,165,.40) !important; background:rgba(0,33,165,.04) !important; }

/* Footer + ambient pulse → UF gold */
[data-scheme="uf"] .live-pulse{ background:#FFD200 !important; box-shadow:0 0 6px #FFD200 !important; }

/* ── UF: contrast hardening (per-theme variants) ─────────────────────────── */

/* Body copy on UF body backgrounds. */
[data-scheme="uf"][data-theme="dark"] body,
[data-scheme="uf"][data-theme="dark"] body *{ color:#ffffff; }
[data-scheme="uf"][data-theme="light"] body{ color:#1E293B; }

/* DARK theme: cards are dark UF-blue surfaces with WHITE text everywhere.
   No white panel forcing — the theme vars already set --surface to UF blue. */
[data-scheme="uf"][data-theme="dark"] .panel,
[data-scheme="uf"][data-theme="dark"] .atk-panel,
[data-scheme="uf"][data-theme="dark"] .lp-card,
[data-scheme="uf"][data-theme="dark"] .atk-launchpad__card,
[data-scheme="uf"][data-theme="dark"] .stat-tile,
[data-scheme="uf"][data-theme="dark"] .posture-hero,
[data-scheme="uf"][data-theme="dark"] .first-scan-cta,
[data-scheme="uf"][data-theme="dark"] .empty-state-enhanced,
[data-scheme="uf"][data-theme="dark"] .feature-card,
[data-scheme="uf"][data-theme="dark"] .scheme-card{
  background:#001F8C !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.12) !important;
}
[data-scheme="uf"][data-theme="dark"] .atk-action-header{
  background:linear-gradient(135deg,#001F8C 0%,#002BA8 100%) !important;
  border:1px solid rgba(255,210,0,.35) !important;
  border-left:6px solid #FA4616 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  color:#ffffff !important;
}
[data-scheme="uf"][data-theme="dark"] .atk-panel--primary{
  background:linear-gradient(135deg,#001F8C 0%,#002BA8 100%) !important;
  border:1px solid #FA4616 !important;
  border-left:6px solid #FA4616 !important;
  box-shadow:0 4px 16px rgba(250,70,22,.20) !important;
  color:#ffffff !important;
}
[data-scheme="uf"][data-theme="dark"] .atk-panel__title,
[data-scheme="uf"][data-theme="dark"] .atk-panel__subtitle,
[data-scheme="uf"][data-theme="dark"] .atk-risk-card__title,
[data-scheme="uf"][data-theme="dark"] .atk-launchpad__label{
  color:#ffffff !important;
}
[data-scheme="uf"][data-theme="dark"] .atk-panel__title i{ color:#FFD200 !important; }
[data-scheme="uf"][data-theme="dark"] .stat-val{ color:#FFD200 !important; }
[data-scheme="uf"][data-theme="dark"] .atk-score-meta__label,
[data-scheme="uf"][data-theme="dark"] .atk-launchpad__sub,
[data-scheme="uf"][data-theme="dark"] .stat-lbl,
[data-scheme="uf"][data-theme="dark"] .stat-hint{ color:rgba(255,255,255,.72) !important; }

/* LIGHT theme: cards stay white, page bg light blue, dark text. */
[data-scheme="uf"][data-theme="light"] .panel,
[data-scheme="uf"][data-theme="light"] .atk-panel,
[data-scheme="uf"][data-theme="light"] .lp-card,
[data-scheme="uf"][data-theme="light"] .atk-launchpad__card,
[data-scheme="uf"][data-theme="light"] .stat-tile,
[data-scheme="uf"][data-theme="light"] .posture-hero,
[data-scheme="uf"][data-theme="light"] .first-scan-cta,
[data-scheme="uf"][data-theme="light"] .empty-state-enhanced,
[data-scheme="uf"][data-theme="light"] .feature-card,
[data-scheme="uf"][data-theme="light"] .scheme-card{
  background:#ffffff !important;
  color:#1E293B !important;
  border-color:rgba(0,33,165,.12) !important;
}
[data-scheme="uf"][data-theme="light"] .atk-action-header{
  background:#ffffff !important;
  border:1px solid rgba(0,33,165,.18) !important;
  border-left:6px solid #FA4616 !important;
  box-shadow:0 4px 16px rgba(0,33,165,.12);
}
[data-scheme="uf"][data-theme="light"] .atk-panel--primary{
  background:#ffffff !important;
  border:1px solid #FA4616 !important;
  border-left:6px solid #FA4616 !important;
  box-shadow:0 4px 16px rgba(250,70,22,.12) !important;
}
[data-scheme="uf"][data-theme="light"] .atk-panel__title,
[data-scheme="uf"][data-theme="light"] .atk-panel__subtitle,
[data-scheme="uf"][data-theme="light"] .atk-risk-card__title{
  color:#0F172A !important;
}
[data-scheme="uf"][data-theme="light"] .atk-panel__title i{ color:#FA4616 !important; }

/* Panel header bars (.panel-hdr / .atk-panel__head) — apply the same
   blue→orange gradient treatment across both themes for brand consistency.
   Dark theme: deeper UF blue → orange → gold accent.
   Light theme: matches the table header gradient. White header text + gold
   accent count badges so the gradient stays legible. */
[data-scheme="uf"][data-theme="dark"] .panel-hdr{
  background:linear-gradient(90deg,#001F8C 0%,#0036C5 50%,#FA4616 100%) !important;
  border-bottom:2px solid #FFD200 !important;
  color:#ffffff !important;
}
[data-scheme="uf"][data-theme="light"] .panel-hdr{
  background:linear-gradient(90deg,#0021A5 0%,#0040C5 50%,#FA4616 100%) !important;
  border-bottom:2px solid #FFD200 !important;
  color:#ffffff !important;
}
[data-scheme="uf"] .panel-hdr .panel-title,
[data-scheme="uf"] .panel-hdr .panel-title *{
  color:#ffffff !important;
}
[data-scheme="uf"] .panel-hdr .panel-count{
  background:rgba(255,210,0,.18) !important;
  border:1px solid rgba(255,210,0,.45) !important;
  color:#FFD200 !important;
}

/* Tab bar inside panels — sits directly under the gradient header. Make
   tabs white/gold-on-darker-blue strip so they're consistent with the
   header above. */
[data-scheme="uf"][data-theme="dark"] .tab-bar{
  background:#001A75 !important;
  border-bottom:1px solid rgba(255,210,0,.30) !important;
}
[data-scheme="uf"][data-theme="light"] .tab-bar{
  background:#F1F5F9 !important;
  border-bottom:1px solid rgba(0,33,165,.10) !important;
}
[data-scheme="uf"] .tab-btn{ color:rgba(255,255,255,.65) !important; }
[data-scheme="uf"][data-theme="light"] .tab-btn{ color:#64748B !important; }
[data-scheme="uf"] .tab-btn.active{
  color:#FFD200 !important;
  border-bottom-color:#FA4616 !important;
}
[data-scheme="uf"][data-theme="light"] .tab-btn.active{
  color:#0021A5 !important;
  border-bottom-color:#FA4616 !important;
}

/* atk-panel__head (the new component-style header) gets the same gradient
   treatment so dashboard "Top Risk" panel header matches Recent Scans. */
[data-scheme="uf"][data-theme="dark"] .atk-panel__head:not(:empty){
  margin:-24px -24px 16px;
  padding:14px 24px;
  background:linear-gradient(90deg,#001F8C 0%,#0036C5 50%,#FA4616 100%) !important;
  border-bottom:2px solid #FFD200;
  border-radius:14px 14px 0 0;
}
[data-scheme="uf"][data-theme="light"] .atk-panel__head:not(:empty){
  margin:-24px -24px 16px;
  padding:14px 24px;
  background:linear-gradient(90deg,#0021A5 0%,#0040C5 50%,#FA4616 100%) !important;
  border-bottom:2px solid #FFD200;
  border-radius:14px 14px 0 0;
}
[data-scheme="uf"] .atk-panel__head .atk-panel__title,
[data-scheme="uf"] .atk-panel__head .atk-panel__title *,
[data-scheme="uf"] .atk-panel__head .atk-panel__subtitle{
  color:#ffffff !important;
}
[data-scheme="uf"] .atk-panel__head .atk-btn--ghost{
  color:#FFD200 !important; border-color:rgba(255,210,0,.45) !important;
  background:rgba(255,255,255,.06) !important;
}
[data-scheme="uf"] .atk-panel__head .atk-btn--ghost:hover{
  color:#0021A5 !important; background:#FFD200 !important; border-color:#FFD200 !important;
}

/* ── UF: Universal coverage for enterprise dashboards (Risk Dashboard,
   Posture, Scanner Overview, Cato, Drift, Threat Modeling, etc.).
   These templates use class-scoped <style> blocks with hardcoded
   rgba(30,41,59,...) "glass" surfaces that ignore the scheme variables.
   Repaint them so the UF brand reaches every page without editing 30+
   <style> blocks individually. ─────────────────────────────────────── */

/* Generic "glass" / KPI / panel utility classes used across enterprise
   dashboards — repaint to UF surfaces. */
[data-scheme="uf"][data-theme="dark"] .rd-glass,
[data-scheme="uf"][data-theme="dark"] .rd-kpi,
[data-scheme="uf"][data-theme="dark"] .rd-chart-panel,
[data-scheme="uf"][data-theme="dark"] .posture-card,
[data-scheme="uf"][data-theme="dark"] [class$="-glass"],
[data-scheme="uf"][data-theme="dark"] [class*="kpi-"],
[data-scheme="uf"][data-theme="dark"] [class*="-tile"]{
  background:linear-gradient(135deg,#001F8C,#002BA8) !important;
  border:1px solid rgba(255,210,0,.20) !important;
  color:#ffffff !important;
  box-shadow:0 8px 32px rgba(0,0,0,.30) !important;
}
[data-scheme="uf"][data-theme="light"] .rd-glass,
[data-scheme="uf"][data-theme="light"] .rd-kpi,
[data-scheme="uf"][data-theme="light"] .rd-chart-panel,
[data-scheme="uf"][data-theme="light"] .posture-card,
[data-scheme="uf"][data-theme="light"] [class$="-glass"],
[data-scheme="uf"][data-theme="light"] [class*="kpi-"],
[data-scheme="uf"][data-theme="light"] [class*="-tile"]{
  background:#ffffff !important;
  border:1px solid rgba(0,33,165,.12) !important;
  color:#1E293B !important;
  box-shadow:0 4px 16px rgba(0,33,165,.08) !important;
}

/* Section headers across enterprise dashboards — replace the amber/gold
   gradient text-fill with the UF brand gradient (orange→gold). */
[data-scheme="uf"] .rd-section-hdr,
[data-scheme="uf"] [class*="-section-hdr"]{
  background:linear-gradient(90deg,#FA4616,#FFD200) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
[data-scheme="uf"] .rd-section-hdr i,
[data-scheme="uf"] [class*="-section-hdr"] i{
  -webkit-text-fill-color:#FA4616 !important;
}

/* KPI value colors — keep semantic meaning (critical=red, high=orange)
   but tint the safe/money values to UF gold/orange instead of generic
   green/blue. */
[data-scheme="uf"] .rd-score-val,
[data-scheme="uf"] .rd-counter,
[data-scheme="uf"] .rd-kpi-val{ color:#FFD200 !important; }
[data-scheme="uf"] .rd-dollar-val{
  background:linear-gradient(90deg,#FFD200,#FA4616) !important;
  -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
/* keep critical/high red — security signals must stay loud */

/* KPI labels — gold under UF instead of the muted slate. */
[data-scheme="uf"] .rd-kpi-label,
[data-scheme="uf"] [class*="-label"]{ color:rgba(255,255,255,.72) !important; }
[data-scheme="uf"][data-theme="light"] .rd-kpi-label,
[data-scheme="uf"][data-theme="light"] [class*="-label"]{ color:#64748B !important; }

/* Score pills — UF orange critical/high keeps the alert function. */
[data-scheme="uf"] .rd-score-pill{
  border:1px solid currentColor !important;
  background:transparent !important;
}

/* Page-level body text on enterprise dashboards: section subtitles like
   "Quantified risk exposure across your infrastructure" sit on the page
   bg. White in dark theme, dark navy in light theme. */
[data-scheme="uf"][data-theme="dark"] main h1,
[data-scheme="uf"][data-theme="dark"] main h2,
[data-scheme="uf"][data-theme="dark"] main p{ color:#ffffff !important; }
[data-scheme="uf"][data-theme="dark"] main p{ color:rgba(255,255,255,.78) !important; }
[data-scheme="uf"][data-theme="light"] main h1,
[data-scheme="uf"][data-theme="light"] main h2{ color:#0021A5 !important; }

/* Buttons in enterprise dashboards — common naming conventions. */
[data-scheme="uf"] .rd-btn-primary,
[data-scheme="uf"] [class*="-btn-primary"]{
  background:#FA4616 !important; color:#ffffff !important; border-color:#FA4616 !important;
}
[data-scheme="uf"] .rd-btn-primary:hover{ background:#E03E10 !important; border-color:#E03E10 !important; }
[data-scheme="uf"] .rd-btn-ghost{
  background:transparent !important; color:#FFD200 !important;
  border:1px solid rgba(255,210,0,.45) !important;
}
[data-scheme="uf"][data-theme="light"] .rd-btn-ghost{
  color:#0021A5 !important; border-color:rgba(0,33,165,.30) !important;
}

/* Mini-bars / gauges — recolor to UF gradient. */
[data-scheme="uf"] .rd-mini-fill,
[data-scheme="uf"] .rd-gauge-fill{
  background:linear-gradient(90deg,#0021A5,#FA4616) !important;
}

/* Nav text contrast — bump to fully white from .85, plus override inline
   `color:var(--text-dim)` style attributes used by the Sign Out / footer
   links inside the nav. */
[data-scheme="uf"] .navbar .nav-item > a,
[data-scheme="uf"] .navbar .nav-item > .nav-trigger,
[data-scheme="uf"] .navbar .nav-item > a *,
[data-scheme="uf"] .navbar .nav-item > .nav-trigger *{
  color:#ffffff !important;
}
[data-scheme="uf"] .navbar [class*="nav-"] svg,
[data-scheme="uf"] .navbar [class*="nav-"] i{ color:#FFD200 !important; }

/* Onboarding / hero gradient strips that use rgba over the page bg —
   force opaque white so text inside is readable. */
[data-scheme="uf"] [style*="rgba(26,115,232"],
[data-scheme="uf"] [style*="rgba(0,212,255"]{
  background:#ffffff !important;
  color:#1E293B !important;
}

/* Common "dark slate" inline backgrounds across templates that pre-date
   the scheme system (risk_dashboard.html, scanner/graph.html, etc.).
   These were hardcoded #1e293b / #0f172a / #1f2937 — repaint them as
   white surfaces so UF mode doesn't fall back to slate. */
[data-scheme="uf"] [style*="background:#1e293b"],
[data-scheme="uf"] [style*="background: #1e293b"],
[data-scheme="uf"] [style*="background:#0f172a"],
[data-scheme="uf"] [style*="background: #0f172a"],
[data-scheme="uf"] [style*="background:#1f2937"],
[data-scheme="uf"] [style*="background: #1f2937"],
[data-scheme="uf"] [style*="background:#263447"],
[data-scheme="uf"] [style*="background: #263447"]{
  background:#ffffff !important;
  color:#1E293B !important;
}

/* Risk dashboard score-tile pills — give them UF brand colour instead of
   the dim slate they fall back to. */
[data-scheme="uf"] .risk-info{ background:#0021A5 !important; color:#ffffff !important; }
[data-scheme="uf"] .risk-none{ background:#F1F5F9 !important; color:#0021A5 !important; }

/* "TOP RISK" / panel section labels are usually --text-bright (UF blue).
   On the orange-tinted action header background that's too low contrast.
   Bump to a darker navy. */
[data-scheme="uf"] .atk-panel__title,
[data-scheme="uf"] .atk-panel__subtitle,
[data-scheme="uf"] .atk-risk-card__title{
  color:#0F172A !important;
}
[data-scheme="uf"] .atk-panel__title i{ color:#FA4616 !important; }

/* ── UF logo override — replace shield icon with a paw, add gold UF wordmark ── */
/* Hide the default fa-shield-halved icon when UF scheme is active. */
[data-scheme="uf"] .logo-icon .fa-shield-halved{ display:none !important; }
/* Inject a gator paw via FontAwesome unicode + a gold "UF" wordmark. */
[data-scheme="uf"] .logo-icon{
  background:linear-gradient(135deg,#FA4616 0%,#FFD200 100%) !important;
  position:relative;
}
[data-scheme="uf"] .logo-icon::before{
  content:'\f1b0';                                /* fa-paw */
  font-family:'Font Awesome 6 Free','Font Awesome 5 Free','FontAwesome';
  font-weight:900;
  color:#0021A5;
  font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
[data-scheme="uf"] .logo-text::after{
  content:' · UF';
  color:#FFD200;
  font-size:.75em;
  letter-spacing:.04em;
  margin-left:4px;
  font-weight:900;
}
[data-scheme="uf"] .logo-sub{
  color:#FFD200 !important;
  font-style:italic;
}
[data-scheme="uf"] .logo-sub::after{
  content:' · Gators ed.';
  margin-left:4px;
  font-style:normal;
  opacity:.85;
}

/* ── Empty State (global) ── */
.empty-state-enhanced{text-align:center;padding:48px 24px}
.empty-state-enhanced .empty-state-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:8px}
.empty-state-enhanced .empty-state-desc{font-size:.82rem;color:var(--text-dim);max-width:360px;margin:0 auto;line-height:1.6}
.empty-state-enhanced.compact{padding:24px 16px}
.empty-state-enhanced.compact .empty-state-title{font-size:.9rem}
.empty-state-enhanced.compact .empty-state-desc{font-size:.75rem;max-width:260px}

/* ── Base ── */
*{margin:0;padding:0;box-sizing:border-box}
html{transition:background-color .3s ease,color .3s ease}
body{transition:background-color .3s ease,color .3s ease}
nav,.card,.surface,.mobile-panel,.mobile-link,.btn,.alert,.nav-user,.theme-toggle,input,textarea,select{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative}

/* ── Nav ── */
nav{
  background:var(--nav-bg);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:200;
  backdrop-filter:blur(12px);
}
.nav-inner{
  display:flex;align-items:center;
  justify-content:space-between;
  height:56px;gap:0;
}
.logo-wrap{display:flex;align-items:center;padding-right:32px;flex-shrink:0}
.logo{
  display:flex;align-items:center;gap:10px;
  font-size:1.15rem;font-weight:700;color:var(--text-bright);
  text-decoration:none;
}
.logo-icon{
  width:30px;height:30px;background:var(--accent);
  border-radius:7px;display:flex;align-items:center;
  justify-content:center;color:var(--accent-contrast);font-size:.85rem;flex-shrink:0;
}
.logo-text span{color:var(--accent)}
.logo-sub{
  font-size:.6rem;color:var(--text-dim);
  letter-spacing:.06em;margin-top:1px;
  font-weight:400;
}

/* Nav menu */
.nav-menu{display:flex;align-items:stretch;flex:1;gap:0}
.nav-item{position:relative;display:flex;align-items:stretch}
.nav-item > a,.nav-item > .nav-trigger{
  display:flex;align-items:center;gap:6px;
  padding:0 14px;
  font-size:.82rem;font-weight:500;
  color:var(--text-dim);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
  cursor:pointer;background:none;
  border-top:none;border-left:none;border-right:none;
  white-space:nowrap;letter-spacing:0;
}
.nav-item > a:hover,
.nav-item > .nav-trigger:hover,
.nav-item > a.active,
.nav-item.open > .nav-trigger,
.nav-item > .nav-trigger.active{
  color:var(--text-bright);
}
.nav-item > a.active{color:var(--text-bright)}
.nav-caret{
  font-size:.6rem;color:var(--text-dim);
  transition:transform .2s;margin-left:2px;
}
.nav-item.open .nav-caret{transform:rotate(180deg)}

/* Dropdown */
.nav-dropdown{
  display:none;
  position:absolute;top:calc(100% + 4px);left:0;
  min-width:220px;
  max-height:80vh;
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px;
  z-index:300;
  box-shadow:0 16px 48px rgba(0,0,0,.3);
}
.nav-item.open .nav-dropdown{display:block}
.nav-dropdown a{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  font-size:.82rem;font-weight:500;
  color:var(--text-dim);text-decoration:none;
  border-radius:6px;
  transition:color .15s,background .15s;
}
.nav-dropdown a:hover{color:var(--text-bright);background:rgba(255,255,255,.06)}
.nav-dropdown a.active{color:var(--accent);background:var(--accent-soft)}
.nav-dd-icon{
  width:28px;height:28px;border-radius:6px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;color:var(--text-dim);flex-shrink:0;
}
.nav-dropdown a:hover .nav-dd-icon{color:var(--accent);background:var(--accent-soft)}
.nav-dropdown a.active .nav-dd-icon{color:var(--accent);background:var(--accent-soft-strong)}
.nav-divider{height:1px;background:var(--border);margin:4px 0}
.nav-section-label{
  font-size:.68rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-dim);
  padding:8px 12px 4px;opacity:.7;
}
/* Collapsible sub-menu sections */
.nav-sub-group{padding:2px 0}
.nav-sub-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:8px 12px 4px;background:none;border:none;cursor:pointer;
  font-size:.68rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-dim);opacity:.7;
  transition:color .15s,opacity .15s;
}
.nav-sub-toggle:hover{color:var(--text-bright);opacity:1}
.nav-sub-toggle .nav-sub-caret{font-size:.5rem;transition:transform .2s;color:var(--text-dim)}
.nav-sub-toggle.open .nav-sub-caret{transform:rotate(180deg)}
.nav-sub-items{display:none;padding:0}
.nav-sub-items.open{display:block}
/* Desktop+mobile: JS manages .open class — no CSS :hover */
.nav-sub-group.active .nav-sub-items{display:block}
.nav-sub-group.active .nav-sub-toggle{color:var(--text-bright);opacity:1}
.nav-sub-group.active .nav-sub-caret{transform:rotate(180deg)}
/* Mobile: keep items expanded once toggled */
@media(max-width:768px){
  .nav-sub-toggle{padding:10px 12px 6px}
}
.nav-provider-toggle{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 12px;background:transparent;border:none;cursor:pointer;
  border-radius:6px;font-size:.82rem;font-weight:500;color:var(--text-dim);
  transition:color .15s,background .15s;
}
.nav-provider-toggle:hover{color:var(--text-bright);background:rgba(255,255,255,.06)}
.nav-provider-toggle.open{color:var(--text-bright)}
.nav-provider-toggle.open .nav-prov-caret{transform:rotate(180deg)}
.nav-provider-items{display:none;padding-left:10px}
.nav-provider-items.open{display:block}
.nav-provider-items a{font-size:.78rem;padding:6px 12px}

/* ── Chatbot widget ── */
#chatbot-btn{
  position:fixed;bottom:24px;right:24px;z-index:9000;
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent-contrast);font-size:1.2rem;transition:transform .2s,box-shadow .2s;
}
#chatbot-btn:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,0,0,.5)}
#chatbot-btn .cb-badge{
  position:absolute;top:-4px;right:-4px;
  width:16px;height:16px;border-radius:50%;
  background:var(--success);border:2px solid var(--nav-bg);font-size:.55rem;
  display:flex;align-items:center;justify-content:center;color:var(--accent-contrast);font-weight:700;
}
#chatbot-window{
  position:fixed;bottom:88px;right:24px;z-index:9000;
  width:360px;max-height:520px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 16px 64px rgba(0,0,0,.5);
  display:none;flex-direction:column;overflow:hidden;
}
#chatbot-window.open{display:flex}
.cb-header{
  padding:14px 16px;background:var(--accent);
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.cb-header-icon{width:32px;height:32px;background:color-mix(in srgb, var(--text-primary) 20%, transparent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--accent-contrast)}
.cb-header h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem;
  color:var(--accent-contrast);flex:1;margin:0}
.cb-header-close{background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;font-size:1rem;padding:4px}
.cb-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:200px}
.cb-msg{max-width:85%;padding:9px 12px;border-radius:10px;font-size:.8rem;line-height:1.5}
.cb-msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-contrast);border-radius:10px 10px 2px 10px}
.cb-msg.bot{align-self:flex-start;background:var(--surface2);color:var(--text);border-radius:10px 10px 10px 2px;border:1px solid var(--border)}
.cb-msg.typing{color:var(--text-dim);font-style:italic}
.cb-footer{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0}
.cb-footer input{flex:1;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:8px 12px;font-size:.8rem;color:var(--text);outline:none}
.cb-footer input:focus{border-color:var(--accent)}
.cb-footer button{background:var(--accent);border:none;border-radius:8px;
  width:36px;height:36px;color:var(--accent-contrast);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Scan queue indicator */
#scan-indicator{display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--accent-soft);border:1px solid rgba(26,115,232,.25);border-radius:6px;font-family:'Share Tech Mono',monospace;font-size:.65rem;color:var(--accent)}
#scan-indicator .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:scanPulse 1.5s ease infinite}
@keyframes scanPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(26,115,232,.4)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(26,115,232,0)}}
#scan-toast{position:fixed;top:20px;right:20px;z-index:9997;padding:10px 18px;background:var(--accent2);color:var(--accent-contrast);border-radius:8px;font-size:.8rem;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.3);opacity:0;transform:translateY(-10px);transition:opacity .3s,transform .3s;pointer-events:none}
#scan-toast.show{opacity:1;transform:translateY(0)}

/* Right controls */
.nav-right{display:flex;align-items:center;gap:8px}
.nav-user{
  display:inline-flex;align-items:center;
  font-size:.8rem;font-weight:500;color:var(--text-dim);
  padding:5px 12px;border:1px solid var(--border);
  border-radius:6px;background:rgba(255,255,255,.03);
  cursor:pointer;text-decoration:none;transition:all .2s;position:relative;
  white-space:nowrap;
}
.nav-user:hover{border-color:var(--accent);color:var(--text-bright);background:var(--accent-soft)}
.nav-user-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  min-width:180px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:6px;z-index:400;box-shadow:0 16px 48px rgba(0,0,0,.3);
}
.nav-user-dropdown.open{display:block}
.nav-user-dropdown a{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  font-size:.82rem;font-weight:500;color:var(--text-dim);text-decoration:none;
  border-radius:6px;transition:color .15s,background .15s;
}
.nav-user-dropdown a:hover{color:var(--text-bright);background:rgba(255,255,255,.06)}
.nav-user-dropdown .nav-divider{height:1px;background:var(--border);margin:4px 0}
.theme-toggle{
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  cursor:pointer;width:34px;height:34px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);font-size:.85rem;transition:all .2s;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* Scheme swatches */
.scheme-swatch{
  width:22px;height:22px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:all .2s;flex-shrink:0;position:relative;
}
.scheme-swatch.active{border-color:var(--text-bright);box-shadow:0 0 0 2px var(--accent)}
.scheme-swatch:hover{transform:scale(1.2)}
.scheme-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── Components ── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;font-weight:600;font-size:.85rem;
  border:none;cursor:pointer;text-decoration:none;
  transition:all .2s;border-radius:8px;
}
.btn-primary{background:var(--accent);color:var(--accent-contrast)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px rgba(26,115,232,.35);color:var(--accent-contrast)}
.btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-dim)}
.btn-ghost:hover{border-color:var(--accent);color:var(--text-bright);background:var(--accent-soft)}
.btn-danger{background:transparent;border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);color:var(--danger)}
.btn-danger:hover{background:color-mix(in srgb, var(--danger) 8%, transparent)}
.btn-green{background:var(--accent2);color:var(--accent-contrast)}
.btn-green:hover{filter:brightness(1.1)}
.btn-warn{background:transparent;border:1px solid color-mix(in srgb, var(--warning) 40%, transparent);color:var(--warn)}
.btn-sm{padding:5px 13px;font-size:.78rem}
.btn-full{width:100%;text-align:center;justify-content:center;padding:12px}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-dim)}
.btn-outline:hover{border-color:var(--accent);color:var(--text-bright);background:var(--accent-soft);text-decoration:none}

/* ── atk-btn family: namespaced button classes used across enterprise dashboards.
      Aliases of .btn family so <a class="atk-btn-ghost"> renders as a button,
      not an underlined text link. ── */
.atk-btn,
.atk-btn-primary,
.atk-btn-ghost,
.atk-btn-danger,
.atk-btn-green,
.atk-btn-warn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;font-weight:600;font-size:.85rem;
  border:none;cursor:pointer;text-decoration:none;
  transition:all .2s;border-radius:8px;
  white-space:nowrap;
}
.atk-btn,.atk-btn-primary{background:var(--accent);color:var(--accent-contrast)}
.atk-btn:hover,.atk-btn-primary:hover{
  filter:brightness(1.1);transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(26,115,232,.35);color:var(--accent-contrast);
  text-decoration:none;
}
.atk-btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-dim)}
.atk-btn-ghost:hover{
  border-color:var(--accent);color:var(--text-bright);
  background:var(--accent-soft);text-decoration:none;
}
.atk-btn-danger{background:transparent;border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);color:var(--danger)}
.atk-btn-danger:hover{background:color-mix(in srgb, var(--danger) 8%, transparent);text-decoration:none}
.atk-btn-green{background:var(--accent2);color:var(--accent-contrast)}
.atk-btn-green:hover{filter:brightness(1.1);color:var(--accent-contrast);text-decoration:none}
.atk-btn-warn{background:transparent;border:1px solid color-mix(in srgb, var(--warning) 40%, transparent);color:var(--warn)}
.atk-btn-warn:hover{background:color-mix(in srgb, var(--warning) 8%, transparent);text-decoration:none}
.atk-btn-sm{padding:5px 13px;font-size:.78rem}
.atk-btn-full{width:100%;text-align:center;justify-content:center;padding:12px}

/* Defend against underlined-link rendering for anchors carrying atk-btn classes */
a.atk-btn,a.atk-btn-primary,a.atk-btn-ghost,a.atk-btn-danger,
a.atk-btn-green,a.atk-btn-warn{text-decoration:none}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:24px;margin-bottom:16px;
  box-shadow:var(--shadow);transition:all .25s;
}
.sec-label{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);
  margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.sec-label::after{content:'';flex:1;height:1px;background:var(--border)}
.sev{font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:4px;white-space:nowrap}
.sev.critical{color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, transparent)}
.sev.warning{color:var(--warning);background:color-mix(in srgb, var(--warning) 10%, transparent)}
.sev.info{color:var(--info);background:color-mix(in srgb, var(--info) 10%, transparent)}
.sev.pass{color:var(--success);background:color-mix(in srgb, var(--success) 10%, transparent)}
.finding{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid transparent;border-radius:8px;
  padding:15px 18px;margin-bottom:9px;
}
.finding.critical{border-left-color:var(--danger)}
.finding.warning{border-left-color:var(--warn)}
.finding.info{border-left-color:var(--accent)}
.finding.pass{border-left-color:var(--accent2)}
.finding-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:7px}
.finding-title{font-weight:600;font-size:.95rem;color:var(--text-bright)}
.finding-id{font-size:.68rem;color:var(--text-dim);margin-bottom:3px;font-family:'Share Tech Mono',monospace}
.finding-desc{font-size:.85rem;color:var(--text-dim);line-height:1.6;margin-bottom:9px}
.finding-fix{
  background:var(--code-bg);border:1px solid var(--code-border);
  border-radius:6px;padding:9px 13px;
  font-family:'Share Tech Mono',monospace;font-size:.75rem;
  color:var(--accent);line-height:1.6;white-space:pre-wrap;word-break:break-word;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:6px;padding:6px 13px;font-size:.78rem;
}
.dot{width:8px;height:8px;border-radius:50%}
.dot.critical{background:var(--danger)}.dot.warning{background:var(--warn)}
.dot.info{background:var(--accent)}.dot.pass{background:var(--accent2)}
.score-ring{width:80px;height:80px;position:relative;flex-shrink:0}
.score-ring svg{width:80px;height:80px;transform:rotate(-90deg)}
.score-ring circle{fill:none;stroke-width:6}
.score-ring .track{stroke:var(--border)}
.score-val{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:1.4rem;
}
.report-table{width:100%;border-collapse:collapse}
.report-table th{
  font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-dim);
  padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);
}
.report-table td{
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.875rem;vertical-align:middle;
}
.report-table tr:hover td{background:rgba(255,255,255,.02)}
input,textarea,select{
  background:var(--input-bg);border:1px solid var(--border);
  border-radius:8px;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:.88rem;padding:9px 13px;width:100%;
  outline:none;transition:border-color .2s;
}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--text-dim)}
select option{background:var(--surface)}
label{
  font-size:.75rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-dim);
  display:block;margin-bottom:6px;
}
.form-group{margin-bottom:16px}
.errorlist{list-style:none;color:var(--danger);font-size:.78rem;margin-bottom:8px}
.alert{
  padding:12px 16px;font-size:.84rem;margin-bottom:14px;
  border:1px solid;border-radius:8px;
}
.alert-error{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 25%, transparent);background:color-mix(in srgb, var(--danger) 6%, transparent)}
.alert-success{color:var(--success);border-color:color-mix(in srgb, var(--success) 25%, transparent);background:color-mix(in srgb, var(--success) 6%, transparent)}
.alert-warning{color:var(--warning);border-color:color-mix(in srgb, var(--warning) 25%, transparent);background:color-mix(in srgb, var(--warning) 6%, transparent)}
.alert-info{color:var(--info);border-color:color-mix(in srgb, var(--info) 25%, transparent);background:color-mix(in srgb, var(--info) 6%, transparent)}
.mono{font-family:'Share Tech Mono',monospace}
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:0}
.tab{
  font-weight:600;font-size:.85rem;padding:12px 22px;
  cursor:pointer;color:var(--text-dim);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:all .2s;background:transparent;
  border-top:none;border-left:none;border-right:none;
}
.tab:hover{color:var(--text-bright)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-panel{display:none;padding:28px 0 60px}
.tab-panel.active{display:block}
.key-warning{
  background:color-mix(in srgb, var(--warning) 7%, transparent);border:1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  border-radius:8px;padding:12px 16px;font-size:.84rem;
  color:var(--warning);margin-bottom:20px;
}
.key-warning a{color:var(--accent)}
@keyframes scanMove{to{left:100%}}
.scan-bar{width:260px;height:2px;background:var(--border);margin:16px auto;overflow:hidden;position:relative;border-radius:2px}
.scan-bar::after{content:'';position:absolute;left:-60%;width:60%;height:100%;background:linear-gradient(90deg,transparent,var(--accent));animation:scanMove 1.2s linear infinite}

/* ── Toast notifications ── */
.toast-container{position:fixed;top:70px;right:20px;z-index:800;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 18px;box-shadow:0 8px 32px rgba(0,0,0,.4);display:flex;align-items:center;gap:10px;font-size:.84rem;max-width:380px;animation:toastIn .3s ease}
.toast-success{border-left:3px solid var(--success)}.toast-error{border-left:3px solid var(--danger)}.toast-warning{border-left:3px solid var(--warning)}.toast-info{border-left:3px solid var(--info)}
.toast i{font-size:1rem;flex-shrink:0}
.toast-success i{color:var(--success)}.toast-error i{color:var(--danger)}.toast-warning i{color:var(--warning)}.toast-info i{color:var(--info)}
.toast-close{background:none;border:none;color:var(--text-dim);cursor:pointer;margin-left:auto;padding:2px;font-size:.8rem}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(40px)}}

/* ── Breadcrumbs ── */
.breadcrumbs{display:flex;align-items:center;gap:6px;font-family:'Share Tech Mono',monospace;font-size:.72rem;color:var(--text-dim);margin-bottom:16px;flex-wrap:wrap}
.breadcrumbs a{color:var(--text-dim);text-decoration:none;transition:color .15s}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{color:var(--border);font-size:.6rem}

/* ── Empty state ── */
.empty-state{text-align:center;padding:60px 24px}
.empty-state-icon{font-size:3rem;color:var(--text-dim);opacity:.25;margin-bottom:16px}
.empty-state-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.2rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:.08em}
.empty-state-desc{color:var(--text-dim);font-size:.88rem;margin-top:8px;max-width:400px;margin-left:auto;margin-right:auto;line-height:1.6}

/* ── Skeleton loading ── */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);background-size:800px 100%;animation:shimmer 1.5s infinite;border-radius:6px}
.skeleton-text{height:14px;margin-bottom:8px;width:80%}
.skeleton-title{height:22px;margin-bottom:12px;width:50%}
.skeleton-card{height:120px;margin-bottom:12px;border-radius:10px}
.skeleton-circle{width:60px;height:60px;border-radius:50%}

/* ── Search overlay ── */
#search-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:600;align-items:flex-start;justify-content:center;padding-top:15vh;backdrop-filter:blur(4px)}
#search-overlay.open{display:flex}
#search-box{width:min(560px,90vw);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
#search-input{border:none;border-bottom:1px solid var(--border);border-radius:12px 12px 0 0;font-size:1rem;padding:16px 20px;width:100%;background:var(--surface)}
#search-results{max-height:400px;overflow-y:auto;padding:8px}
.search-result{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border-radius:6px;font-size:.85rem;color:var(--text-dim);text-decoration:none}
.search-result:hover,.search-result.active{background:rgba(255,255,255,.06);color:var(--text-bright)}
.search-result i{width:18px;text-align:center;font-size:.8rem;color:var(--accent);flex-shrink:0}
.search-hint{padding:12px 16px;font-family:'Share Tech Mono',monospace;font-size:.68rem;color:var(--text-dim);border-top:1px solid var(--border);display:flex;gap:16px}
.search-hint kbd{background:var(--surface2);border:1px solid var(--border);border-radius:3px;padding:1px 6px;font-size:.65rem}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;gap:6px;margin:20px 0;justify-content:center}
.pagination a,.pagination span{padding:6px 12px;border-radius:6px;font-size:.8rem;font-weight:600;text-decoration:none;border:1px solid var(--border);color:var(--text-dim)}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .current{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}

/* ── Mobile hamburger ── */
.mobile-toggle{
  display:none;background:none;border:1px solid var(--border);
  color:var(--text-dim);width:36px;height:36px;border-radius:7px;
  cursor:pointer;align-items:center;justify-content:center;font-size:1rem;
  transition:all .2s;flex-shrink:0;
}
.mobile-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* ── Mobile drawer ── */
.mobile-drawer{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;isolation:isolate;
}
.mobile-drawer.open{display:flex}
.mobile-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:9998}
.mobile-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(300px,85vw);
  background:var(--surface);border-left:1px solid var(--border);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 0 80px;z-index:9999;
}
.mobile-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.mobile-panel-close{background:none;border:none;color:var(--text-dim);
  cursor:pointer;font-size:1.2rem;padding:4px}
.mobile-section{padding:6px 8px}
.mobile-section-label{
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);
  padding:10px 12px 4px;
}
.mobile-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;font-size:.85rem;font-weight:500;
  color:var(--text-dim);text-decoration:none;
  border-radius:6px;transition:all .15s;
}
.mobile-link:hover,.mobile-link.active{color:var(--text-bright);background:rgba(255,255,255,.06)}
.mobile-link i{width:18px;text-align:center;font-size:.8rem}

/* ── Responsive ── */
@media(max-width:1024px){
  .nav-menu{display:none!important}
  .nav-right .nav-user{display:none}
  .mobile-toggle{display:flex}
}
@media(max-width:768px){
  .wrap{padding:0 14px}
  nav .wrap{padding:0 12px}
  .card{padding:16px;border-radius:10px}
  .report-table th,.report-table td{padding:8px 10px;font-size:.78rem}
  .btn{padding:7px 14px;font-size:.8rem}
  .btn-sm{padding:4px 10px;font-size:.72rem}
  h1{font-size:1.4rem!important}
  .finding{padding:12px 14px}
  .finding-title{font-size:.88rem}
  .pill{padding:4px 10px;font-size:.72rem}
  .score-ring{width:60px;height:60px}
  .score-ring svg{width:60px;height:60px}
  .score-val{font-size:1.1rem}
  .grade-ring{width:50px;height:50px;font-size:1.3rem}
  .stat-box{padding:12px 14px}
  .stat-box .num{font-size:1.5rem}
  /* Horizontal scroll for tables */
  .report-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Stack grids */
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  /* Chatbot */
  #chatbot-window{width:calc(100vw - 24px);right:12px;bottom:76px;max-height:70vh}
  #chatbot-btn{width:46px;height:46px;bottom:16px;right:16px}
  /* Trial banner */
  #trial-banner{flex-direction:column;text-align:center;gap:8px;padding:8px 14px}
}
@media(max-width:480px){
  .wrap{padding:0 10px}
  .card{padding:12px}
  .tabs,.cat-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .tab,.cat-tab{flex-shrink:0;padding:10px 14px;font-size:.78rem}
  .finding-fix,.playbook-hint{font-size:.7rem;padding:7px 10px}
  .cloud-badge{font-size:.58rem;padding:2px 6px}
}

/* ── Mobile: min tap target 44px ── */
@media(max-width:768px){
  .btn,.tab,.nav-user,.mobile-link,.import-btn,
  .mobile-toggle,.theme-toggle,.shortcuts-hint-btn{min-height:44px;min-width:44px}
  .mobile-link{padding:12px 12px}
}

/* ── Skip navigation link (ADA) ── */
.skip-link{
  position:absolute;top:-100%;left:16px;z-index:10001;
  background:var(--accent);color:var(--accent-contrast);padding:10px 20px;
  font-size:.88rem;font-weight:600;border-radius:0 0 8px 8px;
  text-decoration:none;transition:top .2s;
}
.skip-link:focus{top:0}

/* ── Focus-visible outlines (ADA) ── */
*:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM EFFECTS — Glassmorphism, Glow, Animations, Micro-interactions
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Glassmorphism Panel ── */
.glass-panel{
  background:rgba(30,41,59,.55);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.2);
}
[data-theme="light"] .glass-panel{
  background:rgba(255,255,255,.6);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}

/* ── 2. Glow Hover ── */
.glow-hover{transition:box-shadow .3s ease,transform .3s ease}
.glow-hover:hover{
  box-shadow:0 0 20px rgba(26,115,232,.25),0 0 40px var(--accent-soft);
  transform:translateY(-2px);
}
[data-scheme="forge"] .glow-hover:hover{box-shadow:0 0 20px rgba(249,115,22,.25),0 0 40px rgba(249,115,22,.1)}
[data-scheme="purple"] .glow-hover:hover{box-shadow:0 0 20px rgba(139,92,246,.25),0 0 40px rgba(139,92,246,.1)}
[data-scheme="emerald"] .glow-hover:hover{box-shadow:0 0 20px rgba(16,185,129,.25),0 0 40px rgba(16,185,129,.1)}
[data-scheme="redops"] .glow-hover:hover{box-shadow:0 0 20px rgba(239,68,68,.25),0 0 40px rgba(239,68,68,.1)}

/* ── 3. Animated Gradient Border ── */
@property --gradient-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rotateGradient{to{--gradient-angle:360deg}}
.gradient-border{position:relative;overflow:hidden}
.gradient-border::before{
  content:'';position:absolute;inset:-2px;z-index:-1;
  background:conic-gradient(from var(--gradient-angle),var(--accent),var(--accent2),var(--accent));
  animation:rotateGradient 4s linear infinite;
  opacity:0;transition:opacity .4s;
}
.gradient-border:hover::before{opacity:1}
.gradient-border::after{
  content:'';position:absolute;inset:1px;z-index:-1;
  background:var(--surface);border-radius:inherit;
}

/* ── 4. Premium Button ── */
.btn-premium{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--accent2)));
  color:var(--accent-contrast);border:none;position:relative;overflow:hidden;
  transition:all .3s ease;
}
.btn-premium:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 24px rgba(26,115,232,.35);
  filter:brightness(1.1);color:var(--accent-contrast);
}
.btn-premium::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transition:left .5s ease;
}
.btn-premium:hover::before{left:100%}
/* Add glow to existing primary buttons */
.btn-primary{transition:all .25s ease}
.btn-primary:hover{box-shadow:0 6px 24px rgba(26,115,232,.4)}

/* ── 5. Float Animation ── */
@keyframes gentleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.float-anim{animation:gentleFloat 3s ease-in-out infinite}
.float-anim-slow{animation:gentleFloat 5s ease-in-out infinite}

/* ── 6. Pulse Glow ── */
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 8px var(--accent-soft-strong)}
  50%{box-shadow:0 0 20px rgba(26,115,232,.35),0 0 40px var(--accent-soft)}
}
.pulse-glow{animation:pulseGlow 2.5s ease-in-out infinite}

/* ── 7. Scroll Reveal Animations ── */
.reveal-up{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .6s ease,transform .6s ease}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .6s ease,transform .6s ease}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .6s ease,transform .6s ease}
.revealed{opacity:1!important;transform:none!important}

/* ── 8. Stagger Delays ── */
.stagger-1{transition-delay:.1s!important;animation-delay:.1s!important}
.stagger-2{transition-delay:.2s!important;animation-delay:.2s!important}
.stagger-3{transition-delay:.3s!important;animation-delay:.3s!important}
.stagger-4{transition-delay:.4s!important;animation-delay:.4s!important}
.stagger-5{transition-delay:.5s!important;animation-delay:.5s!important}
.stagger-6{transition-delay:.6s!important;animation-delay:.6s!important}

/* ── 9. Gradient Text ── */
.gradient-text{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── 10. Card Shine Effect ── */
.card-shine{position:relative;overflow:hidden}
.card-shine::before{
  content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
  transform:skewX(-15deg);transition:left .6s ease;pointer-events:none;
}
.card-shine:hover::before{left:125%}

/* ── 11. Live Dot ── */
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}
  50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
}
.live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--green,#4ade80);
  animation:livePulse 2s ease-in-out infinite;
  vertical-align:middle;
}
.live-dot-sm{width:6px;height:6px}

/* ── 12. Number Highlight ── */
.num-highlight{
  text-shadow:0 0 12px rgba(26,115,232,.3),0 0 24px var(--accent-soft);
}

/* ── 13. Page Entrance ── */
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main,.page-content,[role="main"]{animation:pageIn .4s ease both}

/* ── 14. Custom Scrollbar ── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:4px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
*{scrollbar-width:thin;scrollbar-color:var(--surface2) var(--bg)}

/* ── 15. Hover Lift ── */
.hover-lift{transition:transform .25s ease,box-shadow .25s ease}
.hover-lift:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.2);
}

/* ── 16. Shimmer Border (for featured cards) ── */
@keyframes shimmerBorder{
  0%{border-color:rgba(26,115,232,.3)}
  50%{border-color:rgba(26,115,232,.7)}
  100%{border-color:rgba(26,115,232,.3)}
}
.shimmer-border{animation:shimmerBorder 2s ease-in-out infinite}

/* ── 17. Typing cursor ── */
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.typing-cursor::after{
  content:'▊';color:var(--accent);animation:blink 1s step-end infinite;margin-left:2px;
}

/* ── 18. Glow Ring ── */
@keyframes ringGlow{
  0%,100%{filter:drop-shadow(0 0 4px rgba(26,115,232,.2))}
  50%{filter:drop-shadow(0 0 12px rgba(26,115,232,.5))}
}
.glow-ring{animation:ringGlow 3s ease-in-out infinite}

/* ── 19. Animated background grid ── */
.bg-grid{
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:60px 60px;
}

/* ── 20. Interactive card glow (mouse-follow) ── */
.card-interactive{position:relative;overflow:hidden}
.card-interactive .card-glow{
  position:absolute;width:200px;height:200px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--accent-soft-strong),transparent 70%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;
}

/* ── Cookie Preferences Modal (ADA) ── */
.cookie-prefs-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);
  z-index:10002;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.cookie-prefs-overlay.open{display:flex}
.cookie-prefs-modal{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;width:min(480px,92vw);max-height:85vh;
  overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5);
  padding:28px;
}
.cookie-prefs-modal h2{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:1.2rem;color:var(--text-bright);margin-bottom:6px;
}
.cookie-prefs-modal p{
  font-size:.82rem;color:var(--text-dim);line-height:1.6;margin-bottom:20px;
}
.cookie-pref-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-top:1px solid var(--border);
}
.cookie-pref-item:first-of-type{border-top:none}
.cookie-pref-label{font-size:.85rem;font-weight:600;color:var(--text-bright)}
.cookie-pref-desc{font-size:.72rem;color:var(--text-dim);margin-top:2px}
.cookie-toggle{
  position:relative;width:44px;height:24px;flex-shrink:0;
}
.cookie-toggle input{opacity:0;width:0;height:0;position:absolute}
.cookie-toggle-slider{
  position:absolute;inset:0;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:12px;transition:background .2s,border-color .2s;
}
.cookie-toggle-slider::after{
  content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;
  background:var(--text-dim);border-radius:50%;transition:transform .2s,background .2s;
}
.cookie-toggle input:checked + .cookie-toggle-slider{
  background:var(--accent);border-color:var(--accent);
}
.cookie-toggle input:checked + .cookie-toggle-slider::after{
  transform:translateX(20px);background:var(--accent-contrast);
}
.cookie-toggle input:disabled + .cookie-toggle-slider{
  opacity:.6;cursor:not-allowed;
}
.cookie-toggle input:focus-visible + .cookie-toggle-slider{
  outline:2px solid var(--accent);outline-offset:2px;
}
.cookie-prefs-actions{
  display:flex;gap:10px;margin-top:20px;justify-content:flex-end;
}

/* ── Keyboard Shortcuts Modal ── */
#shortcuts-modal{display:none;position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);align-items:center;justify-content:center}
#shortcuts-modal.open{display:flex}
.shortcuts-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px 28px;max-width:480px;width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.shortcuts-box h3{font-family:'Barlow Condensed',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text-bright);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.shortcuts-section{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:14px 0 6px;padding-top:8px;border-top:1px solid var(--border)}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.shortcut-keys{display:flex;gap:4px}
.shortcut-keys kbd{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:2px 8px;font-family:'Share Tech Mono',monospace;font-size:.72rem;color:var(--text-dim);min-width:24px;text-align:center}
.shortcut-desc{font-size:.82rem;color:var(--text-dim)}
.shortcuts-hint-btn{background:none;border:1px solid var(--border);border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);font-family:'Share Tech Mono',monospace;font-size:.75rem;font-weight:700;transition:all .2s}
.shortcuts-hint-btn:hover{color:var(--accent);border-color:var(--accent)}