/* ===================================================================
   Transfer Pricing Dashboard — design system
   =================================================================== */
:root {
  /* surfaces (light) — AJMS Global brand (blue + multicolour) */
  --plane: #eef2f7;
  --surface-1: #ffffff;
  --surface-2: #f4f8fc;
  --surface-3: #e8eff6;
  --ink-1: #12314e;
  --ink-2: #54637a;
  --ink-muted: #8593a7;
  --grid: #e5ecf3;
  --axis: #c1cddd;
  --border: #e5ecf3;
  --border-strong: #d0dae7;

  /* brand — AJMS blue primary */
  --brand: #1a73bb;
  --brand-deep: #103f6b;
  --accent: #1a73bb;
  --accent-2: #2b9bd6;
  --accent-ink: #155a94;
  --accent-soft: rgba(26,115,187,0.10);
  /* legacy 'gold' vars repurposed to brand light-blue so existing chrome stays cohesive */
  --gold: #2b9bd6;
  --gold-ink: #155a94;
  --gold-soft: rgba(43,155,214,0.14);
  --grad: linear-gradient(135deg, #1a73bb 0%, #2b9bd6 100%);
  --grad-gold: linear-gradient(135deg, #1a73bb 0%, #2b9bd6 100%);
  --grad-brand: linear-gradient(120deg, #103f6b 0%, #1a73bb 55%, #2b9bd6 100%);
  --grad-sidebar: linear-gradient(180deg, #12558f 0%, #0e4576 55%, #0b3a63 100%);
  /* pinwheel accents (from logo) */
  --pin1:#1a73bb; --pin2:#ef6c2a; --pin3:#c82d80; --pin4:#7da63f;

  /* status */
  --ok:#1a9e5f;      --ok-ink:#137a48;   --ok-bg:rgba(26,158,95,0.12);
  --warn:#e0a10f;    --warn-ink:#9a6c05;  --warn-bg:rgba(224,161,15,0.15);
  --serious:#ef6c2a; --serious-ink:#c2540c; --serious-bg:rgba(239,108,42,0.14);
  --bad:#d62b45;     --bad-ink:#b01d38;   --bad-bg:rgba(214,43,69,0.12);
  --neutral-bg:rgba(133,147,167,0.14); --neutral-ink:#54637a;

  /* categorical (charts) — AJMS pinwheel + supporting */
  --c1:#1a73bb; --c2:#ef6c2a; --c3:#c82d80; --c4:#7da63f;
  --c5:#2b9bd6; --c6:#6b57a8; --c7:#e0a10f; --c8:#5b6b82;

  --shadow-sm: 0 1px 2px rgba(16,63,107,0.06);
  --shadow: 0 2px 5px rgba(16,63,107,0.05), 0 12px 32px rgba(16,63,107,0.08);
  --shadow-lg: 0 16px 46px rgba(16,63,107,0.18);
  --radius: 14px;
  --radius-sm: 10px;
  --side-w: 250px;
}
:root[data-theme="dark"] {
  --plane:#081321;
  --surface-1:#0f2135;
  --surface-2:#0b1a2b;
  --surface-3:#16293d;
  --ink-1:#eaf1f9; --ink-2:#a4b4c9; --ink-muted:#6d7d93;
  --grid:#203247; --axis:#2b4058;
  --border:#203247; --border-strong:#2b4058;
  --brand:#4f9fd9; --brand-deep:#0c3157;
  --accent:#4f9fd9; --accent-2:#5fb2e0; --accent-ink:#8fc0e6;
  --accent-soft:rgba(79,159,217,0.16);
  --gold:#5fb2e0; --gold-ink:#8fc0e6; --gold-soft:rgba(95,178,224,0.18);
  --grad:linear-gradient(135deg,#1a73bb 0%,#2b9bd6 100%);
  --grad-gold:linear-gradient(135deg,#2b9bd6 0%,#4f9fd9 100%);
  --grad-brand:linear-gradient(120deg,#0c3157 0%,#1a73bb 60%,#2b9bd6 100%);
  --grad-sidebar:linear-gradient(180deg,#103f6b 0%,#0c3157 55%,#092645 100%);
  --pin1:#4f9fd9; --pin2:#f2854e; --pin3:#db5b97; --pin4:#93bd5c;
  --ok-ink:#4ade80; --warn-ink:#f0c04a; --serious-ink:#f2854e; --bad-ink:#f2687e;
  --neutral-ink:#a4b4c9;
  --ok-bg:rgba(26,158,95,0.18); --warn-bg:rgba(224,161,15,0.18);
  --serious-bg:rgba(239,108,42,0.16); --bad-bg:rgba(214,43,69,0.20);
  --neutral-bg:rgba(109,125,147,0.18);
  --c1:#4f9fd9; --c2:#f2854e; --c3:#db5b97; --c4:#93bd5c;
  --c5:#5fb2e0; --c6:#8f7cc4; --c7:#e6bf5a; --c8:#7f92a8;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow:0 2px 6px rgba(0,0,0,0.4),0 12px 34px rgba(0,0,0,0.5);
  --shadow-lg:0 16px 50px rgba(0,0,0,0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plane:#081321; --surface-1:#0f2135; --surface-2:#0b1a2b; --surface-3:#16293d;
    --ink-1:#eaf1f9; --ink-2:#a4b4c9; --ink-muted:#6d7d93;
    --grid:#203247; --axis:#2b4058; --border:#203247; --border-strong:#2b4058;
    --brand:#4f9fd9; --brand-deep:#0c3157;
    --accent:#4f9fd9; --accent-2:#5fb2e0; --accent-ink:#8fc0e6; --accent-soft:rgba(79,159,217,0.16);
    --gold:#5fb2e0; --gold-ink:#8fc0e6; --gold-soft:rgba(95,178,224,0.18);
    --grad:linear-gradient(135deg,#1a73bb 0%,#2b9bd6 100%);
    --grad-gold:linear-gradient(135deg,#2b9bd6 0%,#4f9fd9 100%);
    --grad-brand:linear-gradient(120deg,#0c3157 0%,#1a73bb 60%,#2b9bd6 100%);
    --grad-sidebar:linear-gradient(180deg,#103f6b 0%,#0c3157 55%,#092645 100%);
    --pin1:#4f9fd9; --pin2:#f2854e; --pin3:#db5b97; --pin4:#93bd5c;
    --ok-ink:#4ade80; --warn-ink:#f0c04a; --serious-ink:#f2854e; --bad-ink:#f2687e; --neutral-ink:#a4b4c9;
    --ok-bg:rgba(26,158,95,0.18); --warn-bg:rgba(224,161,15,0.18);
    --serious-bg:rgba(239,108,42,0.16); --bad-bg:rgba(214,43,69,0.20); --neutral-bg:rgba(109,125,147,0.18);
    --c1:#4f9fd9; --c2:#f2854e; --c3:#db5b97; --c4:#93bd5c;
    --c5:#5fb2e0; --c6:#8f7cc4; --c7:#e6bf5a; --c8:#7f92a8;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
    --shadow:0 2px 6px rgba(0,0,0,0.4),0 12px 34px rgba(0,0,0,0.5); --shadow-lg:0 16px 50px rgba(0,0,0,0.6);
  }
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--plane); color:var(--ink-1); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { margin:0; font-weight:660; letter-spacing:-0.01em; }

/* ===================== App shell ===================== */
.app { display:flex; min-height:100vh; }

.sidebar {
  width:var(--side-w); flex:none; position:sticky; top:0; height:100vh;
  background:var(--grad-sidebar); color:#e7e6f5;
  display:flex; flex-direction:column; z-index:40;
  border-right:1px solid rgba(255,255,255,0.06);
  margin-left:calc(-1 * var(--side-w));           /* collapsed by default; JS opens on desktop */
  transition:margin-left .26s ease, transform .26s ease;
}
.app.nav-open .sidebar { margin-left:0; }
.side-head { padding:20px 18px 12px; display:flex; align-items:center; }
.side-logo { width:170px; max-width:100%; height:auto; display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28)); }
.side-product { margin:0 18px; padding:0 0 14px; font-size:10.5px; color:#c7d9ea; text-transform:uppercase;
  letter-spacing:0.16em; font-weight:700; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid rgba(255,255,255,0.10); }
.side-product::before { content:""; width:16px; height:2px; border-radius:2px; background:var(--accent-2); }

.side-nav { padding:8px 12px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:2px;
  scrollbar-width:none; -ms-overflow-style:none; }
.side-nav::-webkit-scrollbar { width:0; height:0; display:none; }
.side-nav .nav-group { font-size:10px; text-transform:uppercase; letter-spacing:0.08em;
  color:rgba(231,230,245,0.42); padding:14px 12px 6px; font-weight:700; }
.nav-item {
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 12px; border:0; background:transparent; color:rgba(231,230,245,0.80);
  font-family:inherit; font-size:13.5px; font-weight:520; cursor:pointer;
  border-radius:10px; text-align:left; position:relative;
}
.nav-item svg { width:17px; height:17px; flex:none; opacity:.8; }
.nav-item:hover { background:rgba(255,255,255,0.07); color:#fff; }
.nav-item.active { background:rgba(43,155,214,0.20); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,0.10); }
.nav-item.active svg { opacity:1; color:var(--accent-2); }
.nav-item.active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:linear-gradient(180deg,#2b9bd6,#1a73bb); }
.nav-item .nbadge {
  margin-left:auto; min-width:19px; height:19px; padding:0 6px; border-radius:999px;
  background:var(--bad); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center;
}
.side-foot { padding:14px 16px; border-top:1px solid rgba(255,255,255,0.08);
  font-size:11px; color:rgba(231,230,245,0.55); }
.side-foot .dummy-tag { display:inline-block; margin-top:6px; padding:3px 9px; border-radius:6px;
  background:rgba(245,158,11,0.20); color:#fcd34d; font-weight:700; font-size:10.5px; letter-spacing:0.03em; }

.app-main { flex:1; min-width:0; display:flex; flex-direction:column; border-top:3px solid var(--gold); }

/* ===================== Topbar ===================== */
.topbar {
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:12px 26px; background:color-mix(in srgb,var(--plane) 82%,transparent);
  backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--border);
}
.menu-btn { display:grid; place-items:center; width:36px; height:36px; border-radius:9px;
  border:1px solid var(--border-strong); background:var(--surface-1); color:var(--ink-1);
  cursor:pointer; font-size:17px; flex:none; }
.menu-btn:hover { border-color:var(--accent); color:var(--accent-ink); }
.topbar .crumb { font-size:15px; color:var(--ink-1); font-weight:660; }
.topbar .crumb b { color:var(--ink-1); }
.topbar .spacer { margin-left:auto; }
.topbar-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pill { font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px;
  border:1px solid var(--border-strong); color:var(--ink-2); background:var(--surface-1); white-space:nowrap; }
.theme-btn { border:1px solid var(--border-strong); background:var(--surface-1); color:var(--ink-2);
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:15px; display:grid; place-items:center; flex:none; }
.theme-btn:hover { color:var(--ink-1); border-color:var(--accent); }

main { padding:24px 26px 64px; max-width:1500px; width:100%; }

.backdrop { display:none; }

/* ===================== View head + filters ===================== */
.view-head { margin-bottom:18px; }
.view-head h2 { font-size:21px; }
.view-head p { color:var(--ink-2); margin:5px 0 0; font-size:13px; max-width:78ch; }

.filters { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:16px;
  padding:12px 14px; background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.filters .fico { color:var(--ink-muted); display:flex; align-items:center; gap:7px; font-size:12px;
  font-weight:600; padding-bottom:8px; }
.filter { display:flex; flex-direction:column; gap:5px; }
.filter label { font-size:10px; text-transform:uppercase; letter-spacing:0.09em; color:var(--ink-muted); font-weight:800; padding-left:2px; }
.filter select, .filter input {
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-1); background:var(--surface-1);
  border:1px solid var(--border-strong); border-radius:11px; padding:9px 34px 9px 13px; min-width:150px;
  cursor:pointer; box-shadow:var(--shadow-sm);
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238593a7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.filter input { cursor:text; }
.filter select:hover { border-color:var(--accent-2); }
.filter select:focus, .filter input:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.filter-reset { margin-left:auto; align-self:flex-end; border:1px solid var(--border-strong);
  background:var(--surface-1); color:var(--ink-2); border-radius:11px; padding:9px 14px; font-size:12.5px;
  font-weight:650; cursor:pointer; font-family:inherit; box-shadow:var(--shadow-sm);
  transition:border-color .15s ease, color .15s ease; }
.filter-reset:hover { color:var(--accent-ink); border-color:var(--accent); }
.result-count { font-size:12px; color:var(--ink-muted); margin:-6px 0 14px; }

/* active-filter chips */
.fchips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-6px 0 14px;
  font-size:12px; color:var(--ink-muted); }
.fchips-lab { display:flex; align-items:center; gap:6px; font-weight:800; text-transform:uppercase;
  font-size:9.5px; letter-spacing:.12em; color:var(--accent-ink); }
.fchips-lab svg { width:13px; height:13px; }
.fchip { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(26,115,187,.38);
  background:var(--accent-soft); color:var(--accent-ink); border-radius:999px; padding:5px 11px 5px 12px;
  font-size:12px; font-weight:650; cursor:pointer; font-family:inherit;
  transition:border-color .15s ease, transform .12s ease; }
.fchip:hover { border-color:var(--accent); transform:translateY(-1px); }
.fchip .x { font-size:9.5px; opacity:.65; }
.fchip:hover .x { opacity:1; }
.fchips-count { margin-left:2px; }
.fchips-count strong { color:var(--ink-1); }

/* multi-select dropdown */
.filter.ms { position:relative; }
.ms-btn { font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-1); background:var(--surface-1);
  border:1px solid var(--border-strong); border-radius:11px; padding:9px 12px; min-width:168px;
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px;
  box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .15s ease; }
.ms-btn:hover { border-color:var(--accent-2); }
.ms-btn.open { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ms-btn .chev { width:14px; height:14px; color:var(--ink-muted); transition:transform .15s ease; flex:none; }
.ms-btn.open .chev { transform:rotate(180deg); }
.ms-pop { position:absolute; top:calc(100% + 5px); left:0; z-index:60; min-width:200px;
  background:var(--surface-1); border:1px solid var(--border-strong); border-radius:11px;
  box-shadow:var(--shadow-lg); padding:6px; display:none; max-height:290px; overflow-y:auto;
  scrollbar-width:thin; }
.ms-pop.open { display:block; }
.ms-opt { display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; font-size:13px;
  cursor:pointer; color:var(--ink-1); white-space:nowrap; }
.ms-opt:hover { background:var(--accent-soft); }
.ms-opt input { accent-color:var(--accent); width:15px; height:15px; cursor:pointer; flex:none; }
.ms-actions { display:flex; justify-content:flex-end; padding:6px 4px 2px; border-top:1px solid var(--grid); margin-top:4px; }
.ms-actions button { border:0; background:none; color:var(--accent-ink); font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; padding:4px 6px; }
.ms-actions button:hover { text-decoration:underline; }

/* ===================== Cards ===================== */
.grid { display:grid; gap:18px; }
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px; }
.card > h3 { font-size:13px; letter-spacing:0.01em; color:var(--ink-1); margin-bottom:4px; font-weight:660;
  display:flex; align-items:center; gap:9px; }
.card > h3 .h3-ico { width:18px; height:18px; color:var(--accent-ink); }
.card .card-sub { font-size:12px; color:var(--ink-muted); margin-bottom:16px; }
.card .card-note { font-size:12px; color:var(--ink-muted); margin-top:14px; }

/* ===================== KPI tiles ===================== */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  padding:17px 18px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.kpi::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad-gold); opacity:.9; }
.kpi.tone-ok::after{background:var(--ok);} .kpi.tone-bad::after{background:var(--bad);}
.kpi.tone-warn::after{background:var(--warn);} .kpi.tone-serious::after{background:var(--serious);}
.kpi .k-top { display:flex; align-items:center; justify-content:space-between; }
.kpi .k-label { font-size:11.5px; color:var(--ink-2); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.kpi .k-ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:var(--gold-soft); color:var(--gold-ink); }
.kpi .k-ico svg { width:16px; height:16px; }
.kpi .k-value { font-size:30px; font-weight:720; letter-spacing:-0.02em; margin-top:12px; line-height:1; }
.kpi .k-value .unit { font-size:13px; font-weight:600; color:var(--ink-muted); margin-left:5px; }
.kpi .k-foot { font-size:12px; color:var(--ink-muted); margin-top:9px; }
.kpi .k-foot strong { color:var(--ink-2); font-weight:650; }
.kpi.tone-ok .k-ico{background:var(--ok-bg);color:var(--ok-ink);}
.kpi.tone-warn .k-ico{background:var(--warn-bg);color:var(--warn-ink);}
.kpi.tone-serious .k-ico{background:var(--serious-bg);color:var(--serious-ink);}
.kpi.tone-bad .k-ico{background:var(--bad-bg);color:var(--bad-ink);}
.kpi.tone-ok .k-value{color:var(--ok-ink);} .kpi.tone-bad .k-value{color:var(--bad-ink);}

/* KPI gauge ring + micro-interactions */
.k-gauge { position:relative; width:44px; height:44px; flex:none; transition:transform .28s cubic-bezier(.34,1.5,.5,1), filter .25s ease; }
.kpi:hover .k-gauge { transform:scale(1.18) translateY(-2px); filter:drop-shadow(0 4px 6px rgba(14,42,71,.3)); }
.k-ring { width:44px; height:44px; transform:rotate(-90deg); display:block; }
.k-ring circle { fill:none; stroke-width:3.4; }
.k-ring-bg { stroke:var(--surface-3); }
.k-ring-fg { stroke:var(--accent); stroke-linecap:round; transition:stroke-width .22s ease; }
.kpi:hover .k-ring-fg { stroke-width:5; }
.k-ring-fg.rt-ok{stroke:var(--ok);} .k-ring-fg.rt-bad{stroke:var(--bad);}
.k-ring-fg.rt-warn{stroke:var(--warn);} .k-ring-fg.rt-serious{stroke:var(--serious);}
.k-glyph { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--accent-ink); line-height:0; }
.k-glyph svg { width:17px; height:17px; }
.kpi.tone-ok .k-glyph{color:var(--ok-ink);} .kpi.tone-bad .k-glyph{color:var(--bad-ink);}
.kpi.tone-warn .k-glyph{color:var(--warn-ink);} .kpi.tone-serious .k-glyph{color:var(--serious-ink);}
.kpi > * { position:relative; z-index:1; }
.kpi::before { content:""; position:absolute; top:0; left:-75%; width:48%; height:100%; z-index:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg); pointer-events:none; opacity:0; }
.kpi:hover::before { animation:kpiShine .75s ease; }
@keyframes kpiShine { 0%{left:-75%;opacity:0} 12%{opacity:1} 100%{left:150%;opacity:0} }
.kpi.kpi-active { outline:2px solid var(--accent); outline-offset:-1px; box-shadow:0 0 0 4px var(--accent-soft), var(--shadow-lg); }
@media (prefers-reduced-motion: reduce){ .kpi:hover::before{animation:none;} .k-gauge{transition:none;} }

/* ===================== Executive insight strip (replaces the KPI cards) ===================== */
.kstrip { display:grid; grid-template-columns:repeat(7,1fr); background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.kseg { position:relative; padding:15px 16px 13px; border-right:1px solid var(--border); transition:background .18s ease; }
.kseg:last-child { border-right:0; }
.kseg.clickable { cursor:pointer; }
.kseg::after { content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--accent-2));
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
.kseg:hover { background:var(--surface-2); }
.kseg:hover::after, .kseg.kseg-active::after { transform:scaleX(1); }
.kseg.kseg-active { background:var(--accent-soft); }
.ks-l { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ks-v { font-size:26px; font-weight:720; letter-spacing:-0.02em; color:var(--ink-1); margin:6px 0 1px;
  line-height:1.05; font-variant-numeric:tabular-nums; }
.ks-v.small { font-size:19px; padding-top:5px; }
.ks-v small { font-size:12px; font-weight:600; color:var(--ink-muted); letter-spacing:0; }
.ks-c { font-size:11px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ks-g { height:24px; margin-top:8px; display:flex; align-items:center; }
.kseg.tn-ok .ks-v{color:var(--ok-ink);} .kseg.tn-bad .ks-v{color:var(--bad-ink);}
.kseg.tn-warn .ks-v{color:var(--warn-ink);} .kseg.tn-serious .ks-v{color:var(--serious-ink);}
/* micro-glyphs */
.kdots { display:grid; grid-template-columns:repeat(5,9px); gap:4px; }
.kdots i { width:9px; height:9px; border-radius:3px; }
.krank { display:flex; align-items:flex-end; gap:4px; height:22px; width:100%; max-width:120px; }
.krank i { flex:1; border-radius:3px 3px 0 0; background:var(--axis); }
.krank i.hl { background:linear-gradient(180deg,var(--ok),rgba(26,158,95,.55)); }
.kstack { display:flex; width:100%; max-width:130px; height:8px; border-radius:5px; overflow:hidden; gap:2px; }
.kstack i { height:100%; }
.kticks { display:flex; align-items:flex-end; gap:3px; height:22px; width:100%; max-width:130px; }
.kticks i { flex:1; border-radius:2.5px 2.5px 0 0; background:var(--axis); }
.kticks i.f { background:var(--accent); }
.kdelta { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  color:var(--serious-ink); background:var(--serious-bg); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.kdelta.muted { color:var(--ink-muted); background:var(--neutral-bg); }
@media (max-width:1240px){
  .kstrip { grid-template-columns:repeat(4,1fr); }
  .kseg { border-bottom:1px solid var(--border); }
  .kseg:nth-child(4n) { border-right:0; }
  .kseg:nth-last-child(-n+3) { border-bottom:0; }
}
@media (max-width:760px){
  .kstrip { grid-template-columns:repeat(2,1fr); }
  .kseg:nth-child(4n) { border-right:1px solid var(--border); }
  .kseg:nth-child(2n) { border-right:0; }
  .kseg:nth-last-child(-n+3) { border-bottom:1px solid var(--border); }
  .kseg:last-child { border-bottom:0; border-right:0; }
}

/* ===================== 3D globe (Executive) ===================== */
.globe-wrap { display:flex; align-items:center; justify-content:center; gap:22px; padding:4px 0 2px; flex-wrap:wrap; }
.globe-wrap canvas { display:block; max-width:430px; flex:0 0 auto; touch-action:none; user-select:none; }
/* country names sit as a single vertical column beside the globe (fills the side space, no wrapping) */
.globe-legend { display:flex; flex-direction:column; gap:8px; flex:0 0 auto; align-items:flex-start; margin:0; }
.gl-chip { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--ink-2); border-radius:999px; padding:6px 13px;
  font-size:12px; font-weight:650; cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease; }
.gl-chip i { width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
.gl-chip.loss i { background:var(--bad); }
.gl-chip:hover { border-color:var(--accent); color:var(--ink-1); }
.gl-chip.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); }

/* ===================== Entity performance chart (Executive) ===================== */
.ec-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.ec-top > div:first-child { min-width:0; }
/* the card-head sits inside a wrapper here, so mirror the .card > h3 rules */
.ec-top h3 { font-size:13px; letter-spacing:0.01em; color:var(--ink-1); margin-bottom:4px; font-weight:660;
  display:flex; align-items:center; gap:9px; }
.ec-top h3 .h3-ico { width:18px; height:18px; color:var(--accent-ink); }
.ec-tabs { display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:4px; flex:none; }
.ec-tabs button { border:0; background:transparent; color:var(--ink-2); font-family:inherit;
  font-size:11.5px; font-weight:650; padding:8px 13px; border-radius:8px; cursor:pointer;
  letter-spacing:.01em; transition:background .15s ease, color .15s ease; white-space:nowrap; }
.ec-tabs button:hover { color:var(--ink-1); }
.ec-tabs button.on { background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(26,115,187,.35); }
.ec-wrap { display:flex; margin-top:8px; }
.ec-stage { flex:1; min-width:0; }
.ec-stage svg { width:100%; height:auto; display:block; }
.ec-side { width:262px; flex:none; border-left:1px solid var(--border); padding:4px 0 4px 18px; margin-left:18px; }
.ec-side-h { font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:9px; }
.ec-code { font-size:19px; font-weight:750; color:var(--accent-ink); letter-spacing:-.01em; }
.ec-name { font-size:11.5px; color:var(--ink-2); margin:1px 0 8px; }
.ec-kv { display:flex; justify-content:space-between; gap:12px; padding:6px 0;
  border-bottom:1px dashed var(--border-strong); font-size:12px; color:var(--ink-2); }
.ec-kv:last-child { border-bottom:0; }
.ec-kv b { color:var(--ink-1); font-weight:650; font-variant-numeric:tabular-nums; text-align:right; }
.ec-kv b.pos { color:var(--ok-ink); } .ec-kv b.neg { color:var(--bad-ink); }
.ec-kv b.mut { color:var(--ink-muted); font-weight:600; }
/* svg parts */
.ec-grid { stroke:var(--grid); stroke-dasharray:3 5; }
.ec-zero { stroke:var(--axis); stroke-width:1.2; }
.ec-tick { fill:var(--ink-muted); font-size:10px; font-variant-numeric:tabular-nums; }
.ec-xlab { fill:var(--ink-2); font-size:10px; font-weight:600; }
.ec-xlab.on { fill:var(--ink-1); font-weight:800; }
.ec-area { opacity:0; }
.ec-line { fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.ec-pt { fill:var(--surface-1); stroke-width:2.4; transition:r .14s ease; }
.ec-cross { stroke:var(--axis); stroke-dasharray:4 4; }
.ec-hit { fill:transparent; cursor:pointer; }
@media (max-width:900px){
  .ec-wrap { flex-direction:column; }
  .ec-side { width:100%; border-left:0; border-top:1px solid var(--border); margin:14px 0 0; padding:14px 0 0; }
}

/* ===================== Deviation chart (PLI vs range) ===================== */
.dev { display:flex; flex-direction:column; }
.dev-row { display:grid; grid-template-columns:170px 1fr 104px; align-items:center; gap:14px; padding:11px 0; }
.dev-row + .dev-row { border-top:1px solid var(--grid); }
.dev-name b { font-size:13px; font-weight:640; }
.dev-name small { display:block; color:var(--ink-muted); font-weight:500; font-size:11px; margin-top:2px; }
.dev-track { position:relative; height:34px; }
.dev-mid { position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--axis); }
.dev-zone { position:absolute; top:8px; bottom:8px; left:calc(50% - 3px); width:6px; border-radius:3px;
  background:var(--ok); opacity:.55; }
.dev-bar { position:absolute; top:6px; height:22px; border-radius:6px; display:flex; align-items:center; }
.dev-bar.pos { left:50%; justify-content:flex-end; }
.dev-bar.neg { justify-content:flex-start; }
.dev-bar .blabel { font-size:11px; font-weight:700; color:#fff; padding:0 8px; white-space:nowrap; }
.dev-inrange { position:absolute; left:calc(50% + 10px); top:50%; transform:translateY(-50%);
  font-size:11.5px; font-weight:650; color:var(--ok-ink); white-space:nowrap; }
.dev-status { text-align:right; }
.dev-axis { display:grid; grid-template-columns:170px 1fr 104px; gap:14px; margin-top:8px; }
.dev-axis .lbls { display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-muted); font-weight:600; }
.dev-axis .lbls .mid { color:var(--ok-ink); }

/* ===================== Chips ===================== */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:660;
  padding:3px 10px; border-radius:999px; white-space:nowrap; line-height:1.5; }
.chip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.chip.dot-none::before { display:none; }
.s-ok{color:var(--ok-ink);background:var(--ok-bg);}
.s-warn{color:var(--warn-ink);background:var(--warn-bg);}
.s-serious{color:var(--serious-ink);background:var(--serious-bg);}
.s-bad{color:var(--bad-ink);background:var(--bad-bg);}
.s-neutral{color:var(--neutral-ink);background:var(--neutral-bg);}

/* ===================== Tables ===================== */
.tbl-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-1); box-shadow:var(--shadow); }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
table.tbl th, table.tbl td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--grid); vertical-align:top; }
table.tbl thead th { position:sticky; top:0; background:var(--surface-2); z-index:1; font-size:10.5px;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-2); font-weight:700; }
table.tbl tbody tr:hover { background:var(--accent-soft); }
table.tbl tbody tr:last-child td { border-bottom:0; }
table.tbl td.num, table.tbl th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.tbl tr.total td { font-weight:700; border-top:2px solid var(--axis); background:var(--surface-2); }
.neg{color:var(--bad-ink);} .pos{color:var(--ok-ink);}
.mono{font-variant-numeric:tabular-nums;}
.muted{color:var(--ink-muted);}
.entity-code{font-weight:660;}
.empty-row td { text-align:center; color:var(--ink-muted); padding:30px; font-style:italic; }

.sub-note { font-size:12.5px; color:var(--ink-2); background:var(--surface-3);
  border-radius:12px; padding:12px 15px; margin-top:16px; }
.sub-note.warnbox { color:var(--serious-ink); background:var(--serious-bg); }
.sub-note .mono { font-weight:600; }

/* ===================== Compliance panel ===================== */
.seg { display:flex; height:34px; border-radius:10px; overflow:hidden; gap:2px; }
.seg .part { display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; min-width:34px; }
.comp-legend { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.comp-legend .lg { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:5px 10px; }
.comp-legend .sw { width:10px; height:10px; border-radius:3px; }
.attn-list { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.attn { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background:var(--surface-2); }
.attn .ent { font-weight:640; font-size:13px; }
.attn .jur { font-size:11.5px; color:var(--ink-muted); }
.attn .spacer { margin-left:auto; }
.attn .due { font-size:11.5px; color:var(--ink-2); text-align:right; }
.attn .days { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }
.attn .days.over { background:var(--bad-bg); color:var(--bad-ink); }
.attn .days.soon { background:var(--warn-bg); color:var(--warn-ink); }

/* ===================== Flags list ===================== */
.flag-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; padding:12px 0; align-items:start; }
.flag-item + .flag-item { border-top:1px solid var(--grid); }
.flag-ref { font-weight:700; font-size:12px; }
.flag-ref small { display:block; color:var(--ink-muted); font-weight:500; }
.flag-body b { font-size:13px; font-weight:600; }
.flag-body small { display:block; color:var(--ink-muted); margin-top:2px; font-size:11.5px; }

/* ===================== Minibars (benchmarking) ===================== */
.minibars { display:flex; flex-direction:column; gap:9px; }
.minibar { display:grid; grid-template-columns:150px 1fr 74px; align-items:center; gap:12px; font-size:12.5px; }
.minibar .track { height:15px; background:var(--surface-3); border-radius:5px; overflow:hidden; }
.minibar .fill { height:100%; border-radius:5px; }
.minibar .val { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:600; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.deviation-card { border-left:3px solid var(--warn); }

/* ===================== Responsive ===================== */
@media (max-width:1160px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:980px){ .two-col{grid-template-columns:1fr;} }
@media (max-width:900px){
  .sidebar { position:fixed; left:0; top:0; margin-left:0; transform:translateX(-100%);
    box-shadow:var(--shadow-lg); }
  .app.nav-open .sidebar { transform:translateX(0); }
  .app.nav-open .backdrop { display:block; position:fixed; inset:0; background:rgba(8,11,20,0.5); z-index:35; }
  main { padding:18px 16px 60px; }
  .topbar { padding:10px 16px; }
}
@media (max-width:560px){
  .kpi-grid{grid-template-columns:1fr;}
  .dev-row,.dev-axis{grid-template-columns:110px 1fr 76px;}
  .topbar-meta .pill.hide-sm{display:none;}
  .chart-2col,.chart-3col{grid-template-columns:1fr;}
  .pl-row{grid-template-columns:104px 1fr 74px;}
}

/* ===================== KPI value emphasis ===================== */
.kpi .k-value.small { font-size:22px; }
.kpi .k-value .k-sub { display:block; font-size:12px; font-weight:600; color:var(--ink-muted); margin-top:5px; letter-spacing:0; }

/* ===================== Section heading ===================== */
.sec-head { display:flex; align-items:center; gap:10px; margin:26px 2px 14px; }
.sec-head .bar { width:4px; height:18px; border-radius:3px; background:var(--grad-gold); }
.sec-head h3 { font-size:15px; font-weight:700; color:var(--ink-1); }
.sec-head .hint { font-size:12px; color:var(--ink-muted); margin-left:auto; }

/* ===================== Chart grids ===================== */
.chart-2col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.chart-3col { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:18px; }
/* Paired chart cards are equal height (grid stretch); their bodies then FILL that
   height so neither card shows an empty gap — the two in a row always look consistent. */
.chart-2col > .card { display:flex; flex-direction:column; }
.chart-2col > .card > .pie3d-wrap { flex:1 1 auto; min-height:252px; }
.chart-2col > .card > .hbars { flex:1 1 auto; min-height:252px; justify-content:space-between; }
.chart-2col > .card > .globe-wrap { flex:1 1 auto; min-height:252px; align-items:center; }

/* ===================== Donut ===================== */
.donut-wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.donut { position:relative; width:150px; height:150px; flex:none; }
.donut svg { width:150px; height:150px; transform:rotate(-90deg); }
.donut .seg { fill:none; stroke-width:20; }
.donut-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
.donut-center .big { font-size:24px; font-weight:750; color:var(--ink-1); line-height:1; }
.donut-center .cap { font-size:10.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:3px; }
.donut-legend { display:flex; flex-direction:column; gap:7px; min-width:150px; flex:1; }
.dl-row { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:9px; font-size:12.5px; }
.dl-row .sw { width:11px; height:11px; border-radius:3px; }
.dl-row .dl-lab { color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-row .dl-lab small { font-size:10.5px; color:var(--ink-muted); font-weight:600; margin-left:7px; }
.dl-row .dl-val { font-variant-numeric:tabular-nums; font-weight:650; color:var(--ink-1); }
.dl-row .dl-pct { color:var(--ink-muted); font-size:11px; margin-left:6px; font-weight:500; }

/* ===================== Profit / Loss bars ===================== */
.pl { display:flex; flex-direction:column; }
.pl-row { display:grid; grid-template-columns:150px 1fr 92px; align-items:center; gap:14px; padding:8px 0; }
.pl-row + .pl-row { border-top:1px solid var(--grid); }
.pl-name b { font-size:12.5px; font-weight:640; }
.pl-name small { display:block; color:var(--ink-muted); font-size:10.5px; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-track { position:relative; height:22px; }
.pl-mid { position:absolute; top:-2px; bottom:-2px; left:50%; width:1px; background:var(--axis); }
.pl-bar { position:absolute; top:3px; height:16px; border-radius:5px; transition:width .8s cubic-bezier(.22,1,.36,1); }
.pl-bar.pos { left:50%; background:var(--ok); }
.pl-bar.neg { background:var(--bad); }
.pl-val { text-align:right; font-variant-numeric:tabular-nums; font-weight:650; font-size:12.5px; }

/* ===================== Labelled bar chart (profit/loss) ===================== */
.bc-legend { display:flex; gap:16px; justify-content:flex-end; margin-bottom:8px; font-size:12px; color:var(--ink-2); }
.bc-legend .lg { display:inline-flex; align-items:center; }
.bc-legend .sw { width:11px; height:11px; border-radius:3px; margin-right:6px; }
.bc-row { display:grid; grid-template-columns:150px 1fr 88px; align-items:center; gap:14px; padding:7px 0; }
.bc-row + .bc-row { border-top:1px solid var(--grid); }
.bc-name b { font-size:12.5px; font-weight:640; }
.bc-name small { display:block; color:var(--ink-muted); font-size:10.5px; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bc-track { position:relative; height:20px; }
.bc-grid { position:absolute; top:-2px; bottom:-2px; width:1px; background:var(--grid); }
.bc-zero { position:absolute; top:-4px; bottom:-4px; width:1.5px; background:var(--axis); z-index:1; }
.bc-bar { position:absolute; top:3px; height:14px; border-radius:4px; z-index:2;
  animation:growW .8s cubic-bezier(.22,1,.36,1) both; }
.bc-val { text-align:right; font-weight:650; font-variant-numeric:tabular-nums; font-size:12.5px; }
.bc-axis { display:grid; grid-template-columns:150px 1fr 88px; gap:14px; margin-top:4px; }
.bc-axis .bc-track { height:14px; }
.bc-tick { position:absolute; top:0; transform:translateX(-50%); font-size:10px; color:var(--ink-muted); white-space:nowrap; }
.bc-title { text-align:center; font-size:11px; color:var(--ink-muted); margin-top:6px; letter-spacing:0.02em; }
@media (max-width:560px){ .bc-row,.bc-axis{grid-template-columns:96px 1fr 72px;} }

/* ===================== Policy vs ERP dumbbell ===================== */
.cmp { display:flex; flex-direction:column; }
.cmp-row { display:grid; grid-template-columns:150px 1fr 96px; align-items:center; gap:14px; padding:11px 0; }
.cmp-row + .cmp-row { border-top:1px solid var(--grid); }
.cmp-name b { font-size:12.5px; font-weight:640; }
.cmp-name small { display:block; color:var(--ink-muted); font-size:10.5px; margin-top:1px; }
.cmp-track { position:relative; height:26px; }
.cmp-line { position:absolute; top:50%; height:3px; border-radius:3px; transform:translateY(-50%); }
.cmp-line.ok { background:var(--ok); opacity:.35; }
.cmp-line.bad { background:var(--bad); opacity:.55; }
.cmp-dot { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid var(--surface-1); box-shadow:0 0 0 1px var(--border-strong); }
.cmp-dot.policy { background:var(--c8); }
.cmp-dot.erp { background:var(--accent); }
.cmp-dot.erp.breach { background:var(--bad); }
.cmp-dev { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; font-size:12px; }
.cmp-legend { display:flex; gap:16px; margin-top:12px; font-size:12px; color:var(--ink-2); flex-wrap:wrap; }
.cmp-legend .lg { display:inline-flex; align-items:center; gap:7px; }
.cmp-legend .dot { width:12px; height:12px; border-radius:50%; }

/* ===================== Red-flag risk board ===================== */
.risk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.risk-card { border:1px solid var(--border); border-left-width:4px; border-radius:12px; padding:14px;
  background:var(--surface-1); box-shadow:var(--shadow-sm); position:relative; }
.risk-card.sev-High { border-left-color:var(--bad); }
.risk-card.sev-Medium { border-left-color:var(--serious); }
.risk-card.sev-Low { border-left-color:var(--warn); }
.risk-card .rc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.risk-card .rc-ref { font-weight:700; font-size:12px; color:var(--ink-muted); }
.risk-card .rc-title { font-size:13px; font-weight:640; line-height:1.35; }
.risk-card .rc-ent { font-size:11.5px; color:var(--accent-ink); font-weight:600; margin-top:6px; }
.risk-card .rc-meta { font-size:11px; color:var(--ink-muted); margin-top:8px; display:flex; justify-content:space-between; gap:8px; }

/* entities-by bars (generic horizontal) */
.hbars { display:flex; flex-direction:column; gap:8px; }
.hbar-row { display:grid; grid-template-columns:132px 1fr 40px; align-items:center; gap:10px; font-size:12px; }
.hbar-row .bt { height:16px; background:var(--surface-3); border-radius:5px; overflow:hidden; }
.hbar-row .bf { height:100%; border-radius:5px; transition:width .8s cubic-bezier(.22,1,.36,1); }
.hbar-row .bv { text-align:right; font-weight:650; font-variant-numeric:tabular-nums; }

/* ===================== Animations ===================== */
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes popIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:none; } }
@keyframes growW { from { width:0; } }
.pl-bar, .hbar-row .bf, .cmp-line { animation:growW .8s cubic-bezier(.22,1,.36,1) both; }
/* fail-safe: content is visible by default; the keyframe's `from` supplies the entrance,
   so if animations are disabled the element still shows (never stuck invisible). */
.anim { animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both; }
.kpi.anim { animation-name:popIn; }
.anim-1{animation-delay:.03s;} .anim-2{animation-delay:.08s;} .anim-3{animation-delay:.13s;}
.anim-4{animation-delay:.18s;} .anim-5{animation-delay:.23s;} .anim-6{animation-delay:.28s;}
.anim-7{animation-delay:.33s;} .anim-8{animation-delay:.38s;}
@media (prefers-reduced-motion: reduce){
  .anim{animation:none;opacity:1;}
  .donut .seg,.pl-bar,.hbar-row .bf,.cmp-line{animation:none;}
  .hero-mark{animation:none;}
}

/* ===================== Card hover lift ===================== */
.card, .kpi, .risk-card { transition:transform .18s ease, box-shadow .18s ease; }
.card:hover, .risk-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.kpi { transition:transform .22s cubic-bezier(.34,1.3,.5,1), box-shadow .22s ease; }
.kpi:hover { transform:translateY(-7px) scale(1.03); box-shadow:var(--shadow-lg); z-index:5; }

/* ===================== Hero banner ===================== */
.hero { position:relative; overflow:hidden; border-radius:16px; padding:26px 28px;
  background:linear-gradient(100deg, #0e3a63 0%, #1a73bb 54%, #6fb3e3 78%, #d7ecf9 92%, #eef7fd 100%);
  color:#fff; box-shadow:var(--shadow); margin-bottom:20px; display:flex; align-items:center; gap:20px; }
@media (max-width:720px){ .hero{ background:linear-gradient(100deg,#0e3a63 0%,#1a73bb 100%); } }
/* ambient entity-network canvas + drifting light (background motion) */
.hero-net { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero-glow { position:absolute; inset:0; z-index:0; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:
    radial-gradient(300px 220px at 22% 18%, rgba(120,190,255,.5), transparent 70%),
    radial-gradient(360px 260px at 60% 120%, rgba(43,155,214,.4), transparent 70%);
  animation:heroGlow 16s ease-in-out infinite alternate; }
@keyframes heroGlow {
  0%   { transform:translate3d(-3%,-2%,0) scale(1);    opacity:.5; }
  50%  { transform:translate3d(4%,3%,0)  scale(1.08);  opacity:.7; }
  100% { transform:translate3d(-2%,4%,0) scale(1.03);  opacity:.5; } }
.hero-left { position:relative; z-index:1; flex:1; min-width:0; }
.hero-eyebrow2 { font-size:11px; font-weight:800; letter-spacing:0.2em; text-transform:uppercase;
  color:#bfe0f5; margin-bottom:8px; }
.hero-eyebrow { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:#bfe0f5; display:flex; align-items:center; gap:9px; }
.hero-eyebrow::before { content:""; width:20px; height:2px; background:var(--pin2); border-radius:2px; }
.hero-title { font-size:32px; font-weight:820; letter-spacing:-0.022em; margin:0 0 11px; line-height:1.04;
  text-wrap:balance; display:flex; align-items:baseline; flex-wrap:wrap; column-gap:12px; row-gap:2px;
  text-shadow:0 2px 22px rgba(8,30,58,.30); }
/* soft shimmer that sweeps across the lead phrase */
.hero-title-sheen { background:linear-gradient(100deg,
    #ffffff 0%, #ffffff 36%, #d9efff 46%, #ffffff 58%, #ffffff 100%);
  background-size:260% 100%; background-position:130% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  animation:heroSheen 7.5s ease-in-out 1.2s infinite; }
@keyframes heroSheen { 0%,72%,100%{ background-position:130% 0; } 40%{ background-position:-30% 0; } }
/* "Dashboard" set lighter for typographic contrast against the bold lead phrase */
.hero-title .ht-light { font-weight:400; color:rgba(233,244,255,.86); letter-spacing:-0.01em; }
/* the year, styled as a refined accent tag with a branded divider */
.hero-title .hero-year { font-size:20px; font-weight:600; letter-spacing:0.05em; color:#cbe7fb;
  position:relative; padding-left:15px; align-self:center; }
.hero-title .hero-year::before { content:""; position:absolute; left:0; top:8%; bottom:8%; width:2.5px;
  border-radius:2px; background:linear-gradient(180deg, var(--pin2), var(--pin3)); }
/* short branded accent rule under the title */
.hero-rule { width:60px; height:3px; border-radius:3px; margin:0 0 15px;
  background:linear-gradient(90deg, var(--pin2) 0%, var(--pin3) 46%, var(--accent-2) 100%);
  box-shadow:0 1px 8px rgba(239,108,42,.35); }
@media (max-width:720px){ .hero-title{ font-size:24px; } .hero-title .hero-year{ font-size:16px; } }
@media (prefers-reduced-motion: reduce){
  .hero-glow{ animation:none; }
  .hero-title-sheen{ animation:none; background-position:0 0; }
}
.hero-sub { font-size:13px; color:#d7e6f3; }
.hero-stats { display:flex; gap:26px; margin-top:16px; flex-wrap:wrap; }
.hero-stat b { display:block; font-size:22px; font-weight:750; line-height:1; }
.hero-stat span { font-size:11px; color:#bcd6ea; text-transform:uppercase; letter-spacing:0.05em; }
.hero-mark { position:relative; z-index:1; width:112px; height:112px; flex:none; display:block; object-fit:contain;
  filter:drop-shadow(0 3px 7px rgba(14,42,71,.22)); animation:spin 24s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .hero-mark{ animation:none; } }
@media (max-width:720px){ .hero-mark{display:none;} .hero-title{font-size:23px;} }

/* count-up */
.countup { font-variant-numeric:tabular-nums; }

/* ===================== Interactivity ===================== */
.clickable { cursor:pointer; }
.seg { transition:opacity .15s ease; }
.seg.clickable:hover { opacity:.78; }
.kpi.clickable:hover { border-color:var(--accent); }
.kpi.kpi-active { outline:2px solid var(--accent); outline-offset:-1px; box-shadow:var(--shadow-lg); }
.dl-row.clickable { border-radius:6px; padding:2px 4px; margin:-2px -4px; transition:background .15s ease; }
.dl-row.clickable:hover { background:var(--accent-soft); }
.hbar-row.clickable:hover .bf { filter:brightness(1.1); }
.hbar-row.clickable:hover .dl-lab { color:var(--accent-ink); }
.bc-row.clickable:hover .bc-bar { filter:brightness(1.1); }
.linklike { border:0; background:none; color:var(--accent-ink); font-family:inherit; font-size:inherit;
  font-weight:700; cursor:pointer; text-decoration:underline; padding:0; }
.result-count.hint-row { color:var(--ink-muted); }

/* download button (benchmarking report) */
.dl-btn { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11.5px; font-weight:650;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--accent-ink);
  border-radius:7px; padding:4px 9px; cursor:pointer; white-space:nowrap; }
.dl-btn:hover { border-color:var(--accent); background:var(--accent-soft); }
.dl-btn svg { width:13px; height:13px; }

/* toast */
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:400;
  background:var(--ink-1); color:var(--surface-1); font-size:13px; font-weight:550; padding:11px 18px;
  border-radius:10px; box-shadow:var(--shadow-lg); opacity:0; transition:opacity .28s ease, transform .28s ease;
  max-width:80vw; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.ok { background:var(--ok); color:#fff; }
.toast.bad { background:var(--bad); color:#fff; }

/* tooltip */
#tt { position:fixed; z-index:400; pointer-events:none; background:var(--ink-1); color:var(--surface-1);
  font-size:12px; font-weight:600; padding:6px 10px; border-radius:8px; box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(3px); transition:opacity .12s ease; white-space:nowrap; max-width:280px; }
#tt.show { opacity:1; transform:none; }

/* segmented (large) donut */
.donut-lg { width:190px; height:190px; }
.donut-lg svg { width:190px; height:190px; }
.donut-center .big.sm { font-size:19px; }

/* ===================== 3D elevated pie ===================== */
.pie3d-wrap { display:flex; gap:22px; align-items:center; flex-wrap:wrap; justify-content:center; padding:8px 0 4px; }
.pie3d { flex:none; width:266px; max-width:100%; }
.pie3d svg { width:266px; max-width:100%; height:auto; overflow:visible; display:block; }
.donut-legend { flex:1 1 190px; }
.p3-slice { transform:translate(calc(var(--mx)*6px), calc(var(--my)*6px));
  transform-box:view-box; transform-origin:0 0;
  transition:transform .32s cubic-bezier(.34,1.36,.5,1), filter .2s ease; cursor:pointer; }
.p3-slice:hover { transform:translate(calc(var(--mx)*17px), calc(var(--my)*17px - 13px));
  filter:drop-shadow(0 11px 13px rgba(14,42,71,.36)); }
.p3-top { stroke:rgba(255,255,255,.65); stroke-width:1.1; }
@media (prefers-reduced-motion: reduce){ .p3-slice{ transition:none; } }