:root {
      --bg:        #f0f4f8;
      --surface:   #ffffff;
      --s2:        #f1f5f9;
      --s3:        #e8edf3;
      --border:    #dde3ec;
      --border-2:  #c8d2df;
      --text:      #0f172a;
      --t2:        #475569;
      --t3:        #94a3b8;
      --blue:      #2563eb;
      --blue-d:    rgba(37,99,235,.08);
      --blue-glow: rgba(37,99,235,.15);
      --amber:     #d97706;
      --amber-d:   rgba(217,119,6,.09);
      --green:     #16a34a;
      --green-d:   rgba(22,163,74,.09);
      --purple:    #7c3aed;
      --purple-d:  rgba(124,58,237,.08);
      --rose:      #e11d48;
      --rose-d:    rgba(225,29,72,.08);
      --teal:      #0d9488;
      --teal-d:    rgba(13,148,136,.09);
      --r:  14px;
      --rs: 8px;
      --mono: 'JetBrains Mono', 'Fira Code', monospace;
      --shadow:   0 4px 24px rgba(0,0,0,.08);
      --shadow-lg:0 10px 48px rgba(0,0,0,.12);
    }
    /* Dark theme override — values ported verbatim from design/pic-2026-06-28.html
       (the dark mockup) :root block; accent hues unchanged from that mockup. */
    html[data-theme="dark"] {
      --bg:        #080810;
      --surface:   #10101c;
      --s2:        #16162a;
      --s3:        #1e1e30;
      --border:    #252538;
      --border-2:  #303048;
      --text:      #eeeef8;
      --t2:        #8888a8;
      --t3:        #444460;
      --blue:      #4f83f0;
      --blue-d:    rgba(79,131,240,.12);
      --blue-glow: rgba(79,131,240,.22);
      --amber:     #f59e0b;
      --amber-d:   rgba(245,158,11,.12);
      --green:     #22c55e;
      --green-d:   rgba(34,197,94,.12);
      --purple:    #a855f7;
      --purple-d:  rgba(168,85,247,.12);
      --rose:      #f43f5e;
      --rose-d:    rgba(244,63,94,.12);
      --teal:      #14b8a6;
      --teal-d:    rgba(20,184,166,.12);
      --shadow:   0 4px 24px rgba(0,0,0,.55);
      --shadow-lg:0 10px 48px rgba(0,0,0,.65);
    }
    html[data-theme="dark"] .hdr { background: rgba(10,14,22,.92); }
    html[data-theme="dark"] .toggle-knob,
    html[data-theme="dark"] .btn-primary { color: #fff; }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg); color: var(--text);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      line-height: 1.5; min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }
    body::before {
      content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse at 10% 0%,  rgba(37,99,235,.04) 0%, transparent 60%),
        radial-gradient(ellipse at 90% 100%, rgba(124,58,237,.03) 0%, transparent 60%);
    }

    /* ── LAYOUT ────────────────────────────── */
    .wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }

    /* ── HEADER ─────────────────────────────── */
    .hdr {
      position: sticky; top: 0; z-index: 200;
      background: rgba(240,244,248,.92);
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
      border-bottom: 1px solid var(--border);
    }
    .hdr-i {
      max-width: 1440px; margin: 0 auto; padding: 13px 40px;
      display: flex; align-items: center; justify-content: space-between; gap: 24px;
    }
    .brand { display: flex; align-items: center; gap: 10px; }
    .brand-logo {
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      background: linear-gradient(135deg, #2563eb, #7c3aed);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 900; color: #fff; letter-spacing: -1px;
    }
    .brand-name { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
    .brand-sep  { color: var(--t3); margin: 0 2px; }
    .brand-sub  { font-size: 13px; font-weight: 500; color: var(--t2); }
    .hdr-center { display: flex; align-items: center; gap: 8px; }
    .snap-chip {
      font-size: 11px; font-weight: 600; color: var(--t2);
      background: var(--s3); border: 1px solid var(--border-2);
      border-radius: 6px; padding: 4px 10px; font-family: var(--mono);
    }
    .hdr-r { display: flex; align-items: center; gap: 12px; }
    .live-pill {
      display: flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 600; color: var(--green);
      background: var(--green-d); border: 1px solid rgba(22,163,74,.25);
      border-radius: 20px; padding: 4px 10px;
    }
    .live-dot { width: 5px; height: 5px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
    .hdr-ts { font-size: 11px; color: var(--t3); }

    /* ── COMPARE BAR ─────────────────────────── */
    .cmp-bar {
      background: var(--s2); border-bottom: 1px solid var(--border);
      padding: 9px 40px; max-width: 1440px; margin: 0 auto;
      display: flex; align-items: center; gap: 16px; font-size: 12px;
    }
    .cmp-label { font-weight: 700; color: var(--t2); letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
    .cmp-toggle {
      display: flex; align-items: center; gap: 7px; cursor: pointer;
      color: var(--t2); transition: color .15s;
    }
    .cmp-toggle:hover { color: var(--text); }
    .toggle-pill {
      width: 32px; height: 18px; background: var(--border-2); border-radius: 9px;
      position: relative; transition: background .2s;
    }
    .toggle-pill.on { background: var(--blue); }
    .toggle-knob {
      position: absolute; top: 2px; left: 2px;
      width: 14px; height: 14px; background: #fff; border-radius: 50%;
      transition: transform .2s;
    }
    .toggle-pill.on .toggle-knob { transform: translateX(14px); }
    .cmp-divider { color: var(--t3); }
    .cmp-basis { color: var(--t3); }
    .cmp-select-wrap { display: none; align-items: center; gap: 8px; }
    .cmp-select-wrap.show { display: flex; }
    .cmp-select {
      background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px;
      color: var(--text); font-size: 12px; padding: 4px 8px; font-family: 'Inter', sans-serif;
    }
    .cmp-hint { color: var(--t3); font-size: 11px; font-style: italic; }
    .cmp-ml { margin-left: auto; }

    /* ── MAIN ───────────────────────────────── */
    .main { padding: 56px 0 100px; }

    /* ── PAGE HERO ──────────────────────────── */
    .page-hero { margin-bottom: 60px; }
    .section-eyebrow {
      font-size: 10px; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: var(--blue); margin-bottom: 12px;
      display: flex; align-items: center; gap: 8px;
    }
    .section-eyebrow::before { content: ''; flex: none; display: block; width: 20px; height: 2px; background: var(--blue); border-radius: 1px; }
    .page-title {
      font-size: 52px; font-weight: 900; letter-spacing: -.05em;
      line-height: 1.05; margin-bottom: 12px; color: var(--text);
    }
    .page-sub { font-size: 17px; color: var(--t2); font-weight: 400; max-width: 580px; line-height: 1.6; }

    /* ── SECTION HEADING ────────────────────── */
    .sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; padding-top: 56px; }
    .sec-num { font-size: 11px; font-weight: 700; color: var(--t3); font-family: var(--mono); letter-spacing: .04em; }
    .sec-title { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
    .sec-rule { flex: 1; height: 1px; background: var(--border); }

    /* ── CARD ───────────────────────────────── */
    .card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r); padding: 28px 30px;
      transition: box-shadow .2s, border-color .2s;
    }
    .card:hover { box-shadow: var(--shadow); border-color: var(--border-2); }
    .card-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
    .card-desc { font-size: 12px; color: var(--t2); line-height: 1.55; }
    .source-line { font-size: 10px; color: var(--t3); font-family: var(--mono); margin-top: 6px; }

    /* ── BIG COUNTER ────────────────────────── */
    .big-num { font-size: 80px; font-weight: 900; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
    .mid-num { font-size: 48px; font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
    .sm-num  { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

    /* ── COLOR UTILS ────────────────────────── */
    .c-blue   { color: var(--blue); }
    .c-amber  { color: var(--amber); }
    .c-green  { color: var(--green); }
    .c-purple { color: var(--purple); }
    .c-rose   { color: var(--rose); }
    .c-teal   { color: var(--teal); }
    .c-muted  { color: var(--t2); }

    /* ── BADGE ──────────────────────────────── */
    .badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10px; font-weight: 700; border-radius: 20px; padding: 2px 8px;
      letter-spacing: .02em;
    }
    .badge.blue   { color:var(--blue);   background:var(--blue-d);   border:1px solid rgba(37,99,235,.22);   }
    .badge.amber  { color:var(--amber);  background:var(--amber-d);  border:1px solid rgba(217,119,6,.22);  }
    .badge.green  { color:var(--green);  background:var(--green-d);  border:1px solid rgba(22,163,74,.22);   }
    .badge.purple { color:var(--purple); background:var(--purple-d); border:1px solid rgba(124,58,237,.22);  }
    .badge.rose   { color:var(--rose);   background:var(--rose-d);   border:1px solid rgba(225,29,72,.22);   }
    .badge.muted  { color:var(--t2);     background:var(--s3);       border:1px solid var(--border-2);       }

    /* ═════════════════════════════════════════
       §01 MODEL COMPOSITION
    ═════════════════════════════════════════ */
    .comp-hero-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
    .comp-hero {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r); padding: 24px 26px; position: relative; overflow: hidden;
    }
    .comp-hero::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background: linear-gradient(90deg, transparent, var(--hc, var(--blue)), transparent);
    }
    .comp-hero.h-blue   { --hc: var(--blue); }
    .comp-hero.h-amber  { --hc: var(--amber); }
    .comp-hero.h-teal   { --hc: var(--teal); }
    .comp-hero.h-purple { --hc: var(--purple); }
    .comp-hero.h-rose   { --hc: var(--rose); }
    .comp-hero.h-green  { --hc: var(--green); }
    .comp-hero-lbl { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:10px; }
    .comp-hero-num { font-size:60px; font-weight:900; letter-spacing:-.06em; line-height:1; font-variant-numeric:tabular-nums; }
    .comp-hero.h-blue   .comp-hero-num { color:var(--blue); }
    .comp-hero.h-amber  .comp-hero-num { color:var(--amber); }
    .comp-hero.h-teal   .comp-hero-num { color:var(--teal); }
    .comp-hero.h-purple .comp-hero-num { color:var(--purple); }
    .comp-hero.h-rose   .comp-hero-num { color:var(--rose); }
    .comp-hero.h-green  .comp-hero-num { color:var(--green); }
    .comp-hero-sub { font-size:12px; color:var(--t2); margin-top:6px; }

    /* treemap strip — the smallest layer of the drill-down (total > chips > strip) */
    .treemap-strip {
      display:flex; height:44px; border-radius:10px; overflow:hidden;
      gap:2px; margin-bottom:10px;
    }
    /* generic per-class block: flex weight + gradient background set inline by render.js.
       min-width keeps sliver-sized domains visible; their labels move to callouts. */
    .tm-block { display:flex; align-items:center; justify-content:center; padding:0 12px; min-width:6px; overflow:hidden; }
    .tm-loc   { flex:4914; background:linear-gradient(135deg,#0d9488,#14b8a6); display:flex; align-items:center; padding:0 20px; gap:12px; }
    .tm-prod  { flex:459;  background:linear-gradient(135deg,#92570a,#c17a18); display:flex; align-items:center; justify-content:center; }
    .tm-type  { flex:298;  background:linear-gradient(135deg,#7030b0,#a855f7); display:flex; align-items:center; justify-content:center; }
    .tm-label { font-size:11px; font-weight:700; color:rgba(255,255,255,.95); letter-spacing:-.01em; }
    .tm-count { font-size:15px; font-weight:800; color:#fff; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
    .tm-pct   { font-size:10px; font-weight:600; color:rgba(255,255,255,.7); margin-left:5px; }
    .treemap-legend { display:flex; gap:20px; font-size:11px; color:var(--t2); margin-bottom:24px; }
    .tm-leg-dot { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px; }

    /* §01 drill-down: full-width total bar -> domain chips -> distribution */
    .comp-total-bar {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:22px 30px; margin-bottom:12px; position:relative; overflow:hidden;
      display:flex; align-items:baseline; gap:20px; flex-wrap:wrap;
    }
    .comp-total-bar::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px;
      background:linear-gradient(90deg, transparent, var(--blue), transparent);
    }
    .comp-total-lbl { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); }
    .comp-total-num { font-size:56px; font-weight:900; letter-spacing:-.06em; line-height:1; color:var(--blue); font-variant-numeric:tabular-nums; }
    .comp-total-sub { font-size:13px; color:var(--t2); margin-left:auto; text-align:right; }
    .comp-total-sub .source-line { margin-top:4px; }

    .domain-chip-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
    .domain-chip {
      display:inline-flex; align-items:baseline; gap:12px;
      background:var(--surface); border:1px solid var(--border); border-radius:12px;
      padding:14px 22px; font-size:13px; color:var(--t2);
      flex:1 1 auto; min-width:150px;
      transition:box-shadow .2s, border-color .2s;
    }
    .domain-chip:hover { box-shadow:var(--shadow); border-color:var(--border-2); }
    .domain-chip .dc-dot { width:10px; height:10px; border-radius:3px; align-self:center; flex:none; }
    .domain-chip .dc-name { font-weight:700; color:var(--text); font-size:17px; letter-spacing:-.02em; }
    .domain-chip .dc-count { font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; font-size:26px; letter-spacing:-.04em; margin-left:auto; }
    .domain-chip .dc-pct { font-size:12px; color:var(--t3); }
    .domain-chip.dc-unreachable { border-style:dashed; color:var(--t3); flex-grow:0; }
    .domain-chip.dc-unreachable .dc-name { color:var(--t3); }

    .tm-inner { display:flex; align-items:baseline; gap:7px; white-space:nowrap; }

    /* §03 sankey — model connectivity */
    .sankey-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:28px 30px; margin-bottom:16px;
    }
    .sankey-card .source-line { margin-top:12px; }
    .sk-ribbon { opacity:.42; transition:opacity .15s; }
    .sk-ribbon:hover { opacity:.72; }
    .sk-label { font-size:13px; font-weight:700; fill:var(--text); letter-spacing:-.01em; }
    .sk-value { font-size:11px; font-weight:600; fill:var(--t3); font-variant-numeric:tabular-nums; }
    .sk-label-end { text-anchor:end; }
    .tm-callouts { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:11px; color:var(--t2); margin:8px 0 24px; }
    .tm-callout { display:inline-flex; align-items:center; gap:6px; }
    .tm-callout::before { content:'↳'; color:var(--t3); }
    .tm-callout .dc-dot { width:8px; height:8px; border-radius:2px; flex:none; }
    .tm-callout .dc-count { font-family:var(--mono); font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }

    /* coverage gauges row */
    .coverage-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
    .cov-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:24px 28px; display:flex; align-items:center; gap:28px;
    }
    .cov-gauge { flex-shrink:0; }
    .cov-gauge-svg { width:120px; overflow:visible; }
    #cov-arc-1, #cov-arc-2 { transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1); }
    .cov-body { flex:1; }
    .cov-title { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); margin-bottom:4px; }
    .cov-big { font-size:38px; font-weight:900; letter-spacing:-.05em; color:var(--amber); font-variant-numeric:tabular-nums; }
    .cov-formula { font-size:11px; color:var(--t3); font-family:var(--mono); margin-top:6px; }
    .cov-gap { margin-top:8px; }
    .cov-gap-num { font-size:20px; font-weight:800; color:var(--rose); font-variant-numeric:tabular-nums; }
    .cov-gap-lbl { font-size:11px; color:var(--t2); margin-left:4px; }

    /* ═════════════════════════════════════════
       §02 INTERFACE INTELLIGENCE
    ═════════════════════════════════════════ */
    .iis-layout { display:grid; grid-template-columns:1fr 340px; gap:12px; margin-bottom:12px; }
    .iis-left { display:flex; flex-direction:column; gap:12px; }
    .iis-main {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:28px 32px;
    }
    .iis-hero { display:flex; align-items:flex-start; gap:32px; margin-bottom:28px; }
    .iis-num-col { flex-shrink:0; }
    .iis-big { font-size:96px; font-weight:900; letter-spacing:-.07em; line-height:1; color:var(--blue); font-variant-numeric:tabular-nums; }
    .iis-big-lbl { font-size:13px; font-weight:600; color:var(--t2); margin-top:4px; }
    .iis-stats { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:8px; }
    .iis-stat { background:var(--s2); border:1px solid var(--border); border-radius:var(--rs); padding:14px 16px; }
    .iis-stat-num { font-size:26px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
    .iis-stat-lbl { font-size:10px; font-weight:600; color:var(--t3); letter-spacing:.04em; text-transform:uppercase; margin-top:3px; }
    .iis-stat-src { font-size:10px; color:var(--t3); font-family:var(--mono); margin-top:4px; }

    /* domain split bar */
    .domain-split { background:var(--s2); border:1px solid var(--border); border-radius:var(--r); padding:20px 24px; }
    .domain-split-title { font-size:11px; font-weight:700; color:var(--t3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
    .split-bar { display:flex; height:36px; border-radius:8px; overflow:hidden; gap:2px; }
    .split-cross  { background:linear-gradient(90deg,#1d4ed8,#2563eb); flex:162; display:flex; align-items:center; padding:0 12px; }
    .split-within { background:linear-gradient(90deg,#94a3b8,#64748b); flex:68;  display:flex; align-items:center; padding:0 12px; justify-content:center; }
    .split-lbl { font-size:11px; font-weight:700; color:#fff; }
    .split-legend { display:flex; gap:20px; margin-top:12px; font-size:11px; color:var(--t2); }
    .split-legend-item { display:flex; align-items:center; gap:6px; }
    .split-dot { width:8px; height:8px; border-radius:2px; }

    /* crit donut panel */
    .crit-panel {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:28px 24px; display:flex; flex-direction:column;
    }
    .crit-panel-title { font-size:11px; font-weight:700; color:var(--t3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px; }
    .crit-donut-wrap { flex:1; display:flex; align-items:center; justify-content:center; }
    .crit-canvas { width:190px; height:190px; }
    .crit-legend { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
    .crit-li { display:flex; align-items:center; justify-content:space-between; }
    .crit-li-l { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--t2); }
    .crit-li-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
    .crit-li-val { font-size:14px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
    .crit-li-pct { font-size:11px; color:var(--t3); margin-left:3px; }

    /* density gauge */
    .density-gauge-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .density-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:20px 24px;
    }
    .density-card-title { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:14px; }
    .density-big { font-size:44px; font-weight:900; letter-spacing:-.06em; color:var(--purple); font-variant-numeric:tabular-nums; }
    .density-sub { font-size:12px; color:var(--t2); margin-top:6px; }
    .density-formula { font-size:10px; color:var(--t3); font-family:var(--mono); margin-top:8px; }
    .orphan-big { font-size:44px; font-weight:900; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }

    /* ═════════════════════════════════════════
       §03 RELATIONS
    ═════════════════════════════════════════ */
    .rel-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
    .rel-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:26px 28px; position:relative; overflow:hidden;
    }
    .rel-card::before {
      content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
      background: linear-gradient(90deg, transparent, var(--rc, var(--blue)), transparent);
      opacity:.7;
    }
    .rel-card.rc-blue   { --rc: var(--blue); }
    .rel-card.rc-teal   { --rc: var(--teal); }
    .rel-card.rc-green  { --rc: var(--green); }
    .rel-card.rc-amber  { --rc: var(--amber); }
    .rel-card.rc-purple { --rc: var(--purple); }
    .rel-card.rc-rose   { --rc: var(--rose); }
    .rel-verb { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:8px; }
    .rel-label { font-size:18px; font-weight:700; color:var(--text); margin-bottom:16px; letter-spacing:-.02em; }
    .rel-num { font-size:54px; font-weight:900; letter-spacing:-.06em; line-height:1; font-variant-numeric:tabular-nums; margin-bottom:14px; }
    .rel-card.rc-blue  .rel-num { color:var(--blue); }
    .rel-card.rc-teal  .rel-num { color:var(--teal); }
    .rel-card.rc-green .rel-num { color:var(--green); }
    .rel-card.rc-amber  .rel-num { color:var(--amber); }
    .rel-card.rc-purple .rel-num { color:var(--purple); }
    .rel-card.rc-rose   .rel-num { color:var(--rose); }
    .rel-bar-wrap { margin-bottom:10px; }
    .rel-bar-track { height:5px; background:var(--s3); border-radius:3px; overflow:hidden; }
    .rel-bar-fill  { height:100%; border-radius:3px; width:0; transition:width 1.3s cubic-bezier(.16,1,.3,1); }
    .rel-card.rc-blue  .rel-bar-fill { background:var(--blue); }
    .rel-card.rc-teal  .rel-bar-fill { background:var(--teal); }
    .rel-card.rc-green .rel-bar-fill { background:var(--green); }
    .rel-card.rc-amber  .rel-bar-fill { background:var(--amber); }
    .rel-card.rc-purple .rel-bar-fill { background:var(--purple); }
    .rel-card.rc-rose   .rel-bar-fill { background:var(--rose); }
    .rel-bar-stats { display:flex; justify-content:space-between; font-size:11px; color:var(--t2); margin-top:5px; }
    .rel-formula { font-size:10px; color:var(--t3); font-family:var(--mono); margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }

    /* richness meter */
    .richness-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:26px 28px; display:flex; align-items:center; gap:32px; margin-bottom:12px;
    }
    .richness-num { font-size:72px; font-weight:900; letter-spacing:-.07em; color:var(--teal); font-variant-numeric:tabular-nums; }
    .richness-body { flex:1; }
    .richness-title { font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.02em; margin-bottom:8px; }
    .richness-desc { font-size:13px; color:var(--t2); line-height:1.6; }
    .richness-formula { font-size:11px; color:var(--t3); font-family:var(--mono); margin-top:12px; }

    /* ═════════════════════════════════════════
       §04 MODEL ACTIVITY
    ═════════════════════════════════════════ */
    .act-hero-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
    .act-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:22px 26px; position:relative; overflow:hidden;
    }
    .act-card::before {
      content:''; position:absolute; top:0; left:0; bottom:0; width:2px;
      background: var(--ac2, var(--blue));
    }
    .act-card.a1 { --ac2: var(--rose); }
    .act-card.a2 { --ac2: var(--amber); }
    .act-card.a3 { --ac2: var(--blue); }
    .act-card.a4 { --ac2: var(--purple); }
    .act-period { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:8px; }
    .act-num { font-size:52px; font-weight:900; letter-spacing:-.06em; line-height:1; font-variant-numeric:tabular-nums; }
    .act-card.a1 .act-num { color:var(--rose); }
    .act-card.a2 .act-num { color:var(--amber); }
    .act-card.a3 .act-num { color:var(--blue); }
    .act-card.a4 .act-num { color:var(--purple); }
    .act-sub { font-size:11px; color:var(--t2); margin-top:6px; }
    .act-chart-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:28px 30px; margin-bottom:12px;
    }
    .act-chart-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }
    .act-chart-title { font-size:13px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
    .act-chart-note { font-size:10px; color:var(--t3); font-family:var(--mono); font-style:italic; }
    .act-canvas-wrap { height:120px; }

    /* ═════════════════════════════════════════
       §05 SNAPSHOT & PROVENANCE
    ═════════════════════════════════════════ */
    .prov-hero-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:12px; }
    .prov-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:26px 30px;
    }
    .prov-lbl { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:10px; }
    .prov-big { font-size:56px; font-weight:900; letter-spacing:-.07em; line-height:1; font-variant-numeric:tabular-nums; }
    .prov-sub { font-size:12px; color:var(--t2); margin-top:8px; }
    .prov-timeline-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:28px 30px; margin-bottom:12px;
    }
    .prov-timeline-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:20px; }
    .snap-dots { display:flex; flex-wrap:wrap; gap:4px; }
    .snap-dot {
      width:8px; height:8px; border-radius:2px;
      background:var(--border-2); transition:background .1s;
    }
    .snap-dot.active  { background:var(--blue); }
    .snap-dot.recent  { background:var(--green); }
    .snap-dot.current { background:var(--amber); box-shadow:0 0 6px rgba(217,119,6,.4); }
    .snap-dot-legend { display:flex; gap:20px; font-size:11px; color:var(--t2); margin-top:16px; }

    /* ═════════════════════════════════════════
       §06 ENGINEERING INSIGHTS
    ═════════════════════════════════════════ */
    .insights-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
    .insight-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
      padding:24px 26px; display:flex; flex-direction:column; gap:12px;
      transition:box-shadow .2s, border-color .2s; cursor:default;
    }
    .insight-card:hover { box-shadow:var(--shadow); border-color:var(--border-2); }
    .insight-icon {
      width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center;
      font-size:17px;
    }
    .insight-icon.amber  { background:var(--amber-d);  }
    .insight-icon.blue   { background:var(--blue-d);   }
    .insight-icon.rose   { background:var(--rose-d);   }
    .insight-icon.green  { background:var(--green-d);  }
    .insight-icon.purple { background:var(--purple-d); }
    .insight-icon.teal   { background:var(--teal-d);   }
    .insight-body { flex:1; }
    .insight-finding { font-size:15px; font-weight:600; color:var(--text); line-height:1.45; letter-spacing:-.01em; margin-bottom:8px; }
    .insight-evidence { font-size:12px; color:var(--t2); line-height:1.55; }
    .insight-metric {
      font-size:11px; font-family:var(--mono); color:var(--t3);
      border-top:1px solid var(--border); padding-top:10px;
    }

    /* ═════════════════════════════════════════
       TIME COMPARISON DELTA
    ═════════════════════════════════════════ */
    .delta { display:inline-flex; align-items:center; gap:2px; font-size:11px; font-weight:700; margin-left:8px; }
    .delta.up   { color:var(--green); }
    .delta.dn   { color:var(--rose); }
    .delta.flat { color:var(--t3); }
    .delta-off { display:none; }
    .cmp-active .delta-off { display:inline-flex; }

    /* ── MISC ─────────────────────────────── */
    .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
    .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
    .mb-12 { margin-bottom:12px; }
    .mt-12 { margin-top:12px; }
    .row { display:flex; align-items:center; gap:8px; }

    @media (max-width: 960px) {
      .comp-hero-row, .act-hero-row { grid-template-columns:1fr 1fr; }
      .rel-row, .insights-grid { grid-template-columns:1fr 1fr; }
      .iis-layout { grid-template-columns:1fr; }
      .prov-hero-row { grid-template-columns:1fr 1fr; }
    }
    @media (max-width: 640px) {
      .wrap { padding:0 16px; }
      .page-title { font-size:32px; }
      .comp-hero-row, .act-hero-row, .rel-row, .insights-grid, .coverage-row, .prov-hero-row { grid-template-columns:1fr; }
    }

/* ── LOGIN ─────────────────────────────── */
/* :not([hidden]) so the ID selector's `display` never outranks the hidden
   attribute's UA default of display:none (app.js toggles [hidden] to switch
   between the login and dashboard views). */
#view-login:not([hidden]) { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 36px; width: 380px; box-shadow: var(--shadow-lg); }
.login-sub { font-size: 13px; color: var(--t2); margin: 8px 0 20px; }
.fld { display: block; font-size: 11px; font-weight: 600; color: var(--t2);
  margin-bottom: 12px; }
.fld input, .fld select, .manage-form input { width: 100%; margin-top: 4px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
  background: var(--s2); border: 1px solid var(--border-2); border-radius: var(--rs); }
.btn-primary { width: 100%; padding: 9px; margin-top: 6px; font-weight: 700;
  font-size: 13px; color: #fff; background: var(--blue); border: 0;
  border-radius: var(--rs); cursor: pointer; }
.btn-ghost { padding: 6px 10px; font-size: 12px; color: var(--t2);
  background: transparent; border: 1px solid var(--border-2);
  border-radius: var(--rs); cursor: pointer; margin-top: 8px; }
.login-error { margin: 10px 0; padding: 8px 10px; font-size: 12px;
  color: var(--rose); background: var(--rose-d);
  border: 1px solid rgba(225,29,72,.25); border-radius: var(--rs); }
#manage-panel { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.manage-row { display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 5px 0; }
.manage-row .mr-name { flex: 1; font-weight: 600; }
.manage-row .mr-url { color: var(--t3); font-family: var(--mono); font-size: 10px; }
.manage-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.manage-note { font-size: 10px; color: var(--t3); }
.section-unavailable { background: var(--s2); border: 1px dashed var(--border-2);
  border-radius: var(--r); padding: 24px; font-size: 13px; color: var(--t2); }