/* ============================================================
   THF Iloq — v2 theming
   4 aesthetics × light/dark, driven by [data-theme] + [data-mode]
   ============================================================ */

/* ---- Base semantic tokens (defaults; themes override) ---- */
:root {
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: Consolas, 'Courier New', monospace;
  --font-display: 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs: 14px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --pad: 18px;
  --row-h: 46px;
  --gap: 14px;

  --sidebar-w: 236px;

  /* status */
  --ok: #1D9E75;   --ok-bg: rgba(29,158,117,.12);
  --nok: #D14343;  --nok-bg: rgba(209,67,67,.12);
  --ano: #C08A2D;  --ano-bg: rgba(192,138,45,.14);
  --raf: #8A93A1;  --raf-bg: rgba(138,147,161,.14);

  --tr: 220ms cubic-bezier(.4,0,.2,1);
  --tr-fast: 140ms cubic-bezier(.4,0,.2,1);
  --tr-slow: 480ms cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   NEUTRAL LAYERS PER MODE (base, then themes refine)
   ========================================================= */
[data-mode="light"] {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --elevated: #FFFFFF;
  --ink: #10151C;
  --ink-2: #333B47;
  --muted: #5B6472;
  --muted-2: #8A93A1;
  --muted-3: #B7BEC8;
  --line: #E9ECF0;
  --line-strong: #D8DDE4;
  --overlay: rgba(16,21,28,.42);
  --shadow-1: 0 1px 2px rgba(16,21,28,.05), 0 1px 1px rgba(16,21,28,.03);
  --shadow-2: 0 1px 2px rgba(16,21,28,.05), 0 8px 22px rgba(16,21,28,.07);
  --shadow-3: 0 4px 8px rgba(16,21,28,.07), 0 24px 56px rgba(16,21,28,.14);
  --glass: rgba(255,255,255,.72);
}
[data-mode="dark"] {
  --bg: #0C1017;
  --surface: #131924;
  --surface-2: #0F141D;
  --elevated: #1A2230;
  --ink: #EEF2F7;
  --ink-2: #C3CBD6;
  --muted: #8B95A4;
  --muted-2: #67717F;
  --muted-3: #454E5C;
  --line: #212A38;
  --line-strong: #2C3646;
  --overlay: rgba(3,6,11,.62);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3);
  --shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.4);
  --shadow-3: 0 8px 20px rgba(0,0,0,.45), 0 30px 70px rgba(0,0,0,.6);
  --glass: rgba(19,25,36,.72);
}

/* =========================================================
   THEME: CORPORATE  (THF blue, generous, soft, rich cards)
   ========================================================= */
[data-theme="corporate"] {
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'Archivo', var(--font-sans);
  --accent: #1F4E79;
  --accent-2: #2C74B3;
  --accent-ink: #FFFFFF;
  --accent-weak: rgba(31,78,121,.10);
  --brand-grad: linear-gradient(135deg,#1F4E79 0%,#173d61 58%,#102d49 100%);
  --radius: 14px; --radius-sm: 9px; --radius-lg: 18px;
  --pad: 20px; --row-h: 50px; --fs: 14px;
  --chart-1: #1F4E79; --chart-2: #1D9E75; --chart-3: #C08A2D; --chart-4: #97C459;
}
[data-theme="corporate"][data-mode="light"] { --bg:#EEF1F5; --accent-weak: rgba(31,78,121,.09); }
[data-theme="corporate"][data-mode="dark"]  { --accent:#3B82C4; --accent-2:#5AA0DB; --brand-grad: linear-gradient(135deg,#1b3a58 0%,#132a42 100%); }

/* =========================================================
   THEME: EDITORIAL  (swiss, white, huge numerals, hairlines)
   ========================================================= */
[data-theme="editorial"] {
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --accent: #111111;
  --accent-2: #C4392D;
  --accent-ink: #FFFFFF;
  --accent-weak: rgba(17,17,17,.06);
  --radius: 4px; --radius-sm: 3px; --radius-lg: 6px;
  --pad: 24px; --row-h: 56px; --fs: 14px;
  --chart-1: #111111; --chart-2: #C4392D; --chart-3: #4A72B0; --chart-4: #B7BEC8;
  --ok:#1a1a1a; --ok-bg:rgba(0,0,0,.05);
}
[data-theme="editorial"][data-mode="light"] {
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FFFFFF; --line:#EAEAEA; --line-strong:#111111;
  --ok:#1D8A66; --ok-bg:rgba(29,138,102,.08);
  --nok:#C4392D; --ano:#B8860B; --raf:#B7BEC8;
}
[data-theme="editorial"][data-mode="dark"] {
  --bg:#0A0A0A; --surface:#0F0F0F; --surface-2:#0A0A0A; --elevated:#161616;
  --line:#232323; --line-strong:#EDEDED; --accent:#FFFFFF; --accent-ink:#000;
  --ok:#3DBE92; --chart-1:#FFFFFF; --chart-4:#555;
}

/* =========================================================
   THEME: DENSE  (Linear/Vercel — compact, fine, cool grays)
   ========================================================= */
[data-theme="dense"] {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Inter', var(--font-sans);
  --accent: #5E6AD2;
  --accent-2: #8A94F0;
  --accent-ink: #FFFFFF;
  --accent-weak: rgba(94,106,210,.12);
  --radius: 8px; --radius-sm: 6px; --radius-lg: 10px;
  --pad: 12px; --row-h: 38px; --fs: 13px;
  --chart-1:#5E6AD2; --chart-2:#3DBE92; --chart-3:#E5A13A; --chart-4:#7A8290;
}
[data-theme="dense"][data-mode="light"] {
  --bg:#F7F8F9; --surface:#FFFFFF; --surface-2:#FBFBFC; --line:#ECEDEF; --line-strong:#DFE1E4;
  --ink:#111317; --muted:#62666D;
}
[data-theme="dense"][data-mode="dark"] {
  --bg:#0B0C0E; --surface:#var; --surface:#141518; --surface-2:#0E0F11; --elevated:#1B1D21;
  --line:#212226; --line-strong:#2B2D31; --accent:#7B84E8; --ink:#EDEEF0; --muted:#8B8F98;
}

/* =========================================================
   THEME: TERMINAL  (bloomberg — dark first, mono, green/amber)
   ========================================================= */
[data-theme="terminal"] {
  --font-sans: 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'IBM Plex Mono', monospace;
  --accent: #00C88C;
  --accent-2: #FFB000;
  --accent-ink: #04120C;
  --accent-weak: rgba(0,200,140,.12);
  --radius: 3px; --radius-sm: 2px; --radius-lg: 4px;
  --pad: 12px; --row-h: 34px; --fs: 13px;
  --ok:#00C88C; --ok-bg:rgba(0,200,140,.12);
  --nok:#FF4D4D; --nok-bg:rgba(255,77,77,.14);
  --ano:#FFB000; --ano-bg:rgba(255,176,0,.14);
  --raf:#5A6472; --raf-bg:rgba(90,100,114,.16);
  --chart-1:#00C88C; --chart-2:#FFB000; --chart-3:#4DA6FF; --chart-4:#FF4D4D;
}
[data-theme="terminal"][data-mode="dark"] {
  --bg:#05080C; --surface:#0A0F16; --surface-2:#070B10; --elevated:#0E141C;
  --ink:#D7E0EA; --ink-2:#A9B4C0; --muted:#6B7683; --muted-2:#4C5663; --muted-3:#333c48;
  --line:#141C26; --line-strong:#1E2833;
  --glass: rgba(10,15,22,.8);
}
[data-theme="terminal"][data-mode="light"] {
  --bg:#EDEEE9; --surface:#F7F7F3; --surface-2:#F1F1EC; --elevated:#FFFFFF;
  --ink:#1A1E17; --ink-2:#3A4034; --muted:#5F6656; --line:#DBDCD3; --line-strong:#C7C8BD;
  --accent:#0A7F58; --accent-ink:#fff; --ok:#0A7F58; --nok:#C42B2B; --ano:#9A6B00;
  --chart-1:#0A7F58; --chart-2:#9A6B00; --chart-3:#245FA6; --chart-4:#C42B2B;
}

/* =========================================================
   THEME: BI  (Power-BI-style analytical — light gray canvas,
   near-square white tiles, teal categorical palette,
   thin Segoe-like numerals). THF-branded, not a Power BI clone.
   ========================================================= */
[data-theme="bi"] {
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: Consolas, 'Courier New', monospace;
  --accent: #118DFF;
  --accent-2: #12A5A0;
  --accent-ink: #FFFFFF;
  --accent-weak: rgba(17,141,255,.10);
  --brand-grad: linear-gradient(135deg,#1F4E79 0%,#12726b 100%);
  --radius: 3px; --radius-sm: 2px; --radius-lg: 4px;
  --pad: 16px; --row-h: 42px; --fs: 13px;
  /* Power-BI-ish categorical palette */
  --chart-1: #01B8AA; --chart-2: #374649; --chart-3: #FD625E; --chart-4: #F2C80F;
  --ok:#01B8AA;  --ok-bg:rgba(1,184,170,.14);
  --nok:#FD625E; --nok-bg:rgba(253,98,94,.14);
  --ano:#F2C80F; --ano-bg:rgba(210,170,0,.18);
  --raf:#8A9295; --raf-bg:rgba(138,146,149,.16);
}
[data-theme="bi"][data-mode="light"] {
  --bg:#F0F0F0; --surface:#FFFFFF; --surface-2:#F7F7F7; --elevated:#FFFFFF;
  --ink:#252423; --ink-2:#3B3A39; --muted:#605E5C; --muted-2:#8A8886; --muted-3:#C8C6C4;
  --line:#E6E6E6; --line-strong:#D2D0CE;
  --glass: rgba(242,242,242,.85);
  --shadow-1: 0 0 0 1px rgba(0,0,0,.04);
  --shadow-2: 0 1.6px 3.6px rgba(0,0,0,.08), 0 .3px .9px rgba(0,0,0,.06);
  --ano:#B88A00;
}
[data-theme="bi"][data-mode="dark"] {
  --bg:#0B0C0E; --surface:#1B1A19; --surface-2:#141312; --elevated:#252423;
  --ink:#F3F2F1; --ink-2:#D2D0CE; --muted:#A19F9D; --muted-2:#797775; --muted-3:#484644;
  --line:#292827; --line-strong:#3B3A39;
  --accent:#3AA0FF; --glass: rgba(11,12,14,.82);
}
/* thin, oversized numerals à la Power BI cards */
[data-theme="bi"] .kpi-v { font-weight: 400; font-size: 38px; letter-spacing: -.01em; }
[data-theme="bi"] .kpi.feature { background: var(--brand-grad); }
[data-theme="bi"] .region-pct, [data-theme="bi"] .donut-c { font-weight: 400; }
[data-theme="bi"] .fin-card .v { font-weight: 400; }
[data-theme="bi"] .card-head h3 { font-weight: 600; }
/* Sidebar façon Power BI : anthracite, texte blanc, accent jaune */
[data-theme="bi"] .sidebar {
  background: #3A3A38;
  border-right-color: transparent;
  --ink: #fff; --ink-2: rgba(255,255,255,.85);
  --muted: rgba(255,255,255,.66); --muted-2: rgba(255,255,255,.45);
  --line: rgba(255,255,255,.14);
}
[data-theme="bi"] .nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
[data-theme="bi"] .nav-item.active { color: #fff; background: rgba(255,255,255,.13); box-shadow: inset 3px 0 0 #F2C811; font-weight: 600; }
[data-theme="bi"] .nav-item .badge-count { background: rgba(255,255,255,.15); color: rgba(255,255,255,.82); }
[data-theme="bi"] .sb-collapse { background: #3A3A38; border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.72); }
[data-theme="bi"] .sb-collapse:hover { color: #fff; }
[data-theme="bi"] .card, [data-theme="bi"] .kpi { box-shadow: var(--shadow-1); }

/* ---- BI tile mosaic ---- */
.biboard { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; grid-auto-rows: 132px; }
.bi-kpis { grid-column: span 12; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bi-kpis .bi-tile { grid-column: span 1; }
.bi-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 16px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: box-shadow var(--tr-fast), border-color var(--tr-fast); grid-column: span 2; }
.bi-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.bi-th { flex-shrink: 0; margin-bottom: 6px; }
.bi-th h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-th .sub { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bi-kpi .big { font-weight: 400; font-size: 40px; letter-spacing: -.02em; color: var(--ink); line-height: 1; margin-top: auto; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.bi-bignum { font-weight: 200; font-size: 60px; letter-spacing: -.03em; color: var(--ink); line-height: 1; margin: auto 0; font-variant-numeric: tabular-nums; }
.bi-tile.span-v { grid-column: span 7; grid-row: span 3; }
.bi-tile.span-tech { grid-column: span 3; grid-row: span 3; }
.bi-tile.span-big { grid-column: span 2; grid-row: span 1; }
.bi-tile.span-donut { grid-column: span 2; grid-row: span 2; }
.bi-tile.span-third { grid-column: span 4; grid-row: span 3; }
.bi-legend { display: flex; gap: 16px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.bi-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bi-legend i { width: 10px; height: 10px; border-radius: 2px; }
.bi-hbars { display: flex; flex-direction: column; gap: 7px; flex: 1; justify-content: center; }
.hbar { display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; gap: 8px; cursor: pointer; }
.hbar:hover .hl { color: var(--ink); }
.hbar .hl { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .ht { height: 13px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.hbar .ht i { display: block; height: 100%; border-radius: 2px; transition: width .9s var(--tr-slow); }
.hbar .hv { font-size: 11.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
@media (max-width: 1180px) {
  .biboard { grid-auto-rows: 120px; }
  .bi-tile.span-v { grid-column: span 12; }
  .bi-tile.span-tech { grid-column: span 6; }
  .bi-tile.span-third { grid-column: span 6; }
  .bi-tile.span-half { grid-column: span 12; }
}
/* SLA callout inside a tile */
.sla-callout { display: flex; gap: 12px; align-items: center; background: var(--accent-weak); border-radius: var(--radius); padding: 10px 13px; margin-bottom: 12px; }
.sla-callout .big { font-size: 30px; font-weight: 400; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sla-callout .txt { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.bi-tile.span-half { grid-column: span 4; grid-row: span 3; }
.bi-tile.span-half.wide6 { grid-column: span 4; }
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background var(--tr), color var(--tr);
}
[data-theme="terminal"] body, [data-theme="editorial"] body { font-feature-settings: "tnum"; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--accent-weak); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-3); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   APP SHELL — sidebar + main
   ============================================================ */
.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100%; transition: grid-template-columns var(--tr); }
.layout.collapsed { --sidebar-w: 64px; }

/* ---- Sidebar ---- */
.sidebar {
  position: sticky; top: 0; height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 16px 12px;
  gap: 4px;
  z-index: 40;
  overflow: hidden;
}
[data-theme="corporate"] .sidebar { background: var(--brand-grad); border-right-color: transparent; }
[data-theme="corporate"] .sidebar { --ink: #fff; --muted: rgba(255,255,255,.62); --line: rgba(255,255,255,.12); }
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.sb-mark { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--brand-grad); box-shadow: var(--shadow-1); }
[data-theme="corporate"] .sb-mark { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
[data-theme="terminal"] .sb-mark { border-radius: 2px; background: var(--accent); }
.sb-logo { height: 30px; width: auto; flex-shrink: 0; display: block; }
/* Sidebar sombre en permanence → logo blanc dans les deux modes */
.sb-logo-color { display: none; }
.sb-logo-white { display: block; }
.layout.collapsed .sb-logo { opacity: 0; }
.sb-brand-txt { min-width: 0; white-space: nowrap; overflow: hidden; }
.sb-brand-txt .n { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); line-height: 1.1; }
.sb-brand-txt .s { font-size: 11.5px; color: #8CC63F; font-weight: 700; text-align: center; margin-top: 1px; }
.layout.collapsed .sb-brand-txt, .layout.collapsed .nav-txt, .layout.collapsed .sb-section, .layout.collapsed .sb-foot-txt { opacity: 0; pointer-events: none; }

/* Sélecteur d'activité (Maintenance | Accès) — visible si le profil a plusieurs accès */
.sb-activity { display: flex; gap: 4px; padding: 4px; margin: 0 2px 8px; border-radius: 9px; background: rgba(255,255,255,.08); }
.sb-activity button { flex: 1; border: 0; border-radius: 6px; padding: 6px 4px; font-family: inherit; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); background: transparent; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.sb-activity button.on { background: #F2C811; color: #3A3A38; }
.sb-activity button:not(.on):not([disabled]):hover { color: #fff; background: rgba(255,255,255,.08); }
.sb-activity button[disabled] { opacity: .6; cursor: default; }
.layout.collapsed .sb-activity { display: none; }

.sb-section { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding: 14px 10px 6px; white-space: nowrap; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 550; font-size: 13.5px;
  cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left;
  position: relative; transition: background var(--tr-fast), color var(--tr-fast);
  white-space: nowrap;
}
.nav-item:hover { background: var(--accent-weak); color: var(--ink); }
[data-theme="corporate"] .nav-item:hover { background: rgba(255,255,255,.10); }
.nav-item.active { color: var(--accent); background: var(--accent-weak); font-weight: 600; }
[data-theme="corporate"] .nav-item.active { color: #fff; background: rgba(255,255,255,.16); }
[data-theme="terminal"] .nav-item.active { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); border-radius: 0; }
.nav-item .ic { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item .badge-count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted-2); background: var(--accent-weak); padding: 1px 7px; border-radius: 999px; }
[data-theme="corporate"] .nav-item .badge-count { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.layout.collapsed .nav-item .badge-count { display: none; }
.sb-spacer { flex: 1; }
.sb-foot { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); }
.sb-foot-txt { min-width: 0; white-space: nowrap; overflow: hidden; }
.sb-foot-txt .n { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.sb-foot-txt .r { font-size: 11px; color: var(--muted); }

/* collapse toggle */
.sb-collapse { position: absolute; top: 18px; right: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); display: grid; place-items: center; cursor: pointer; z-index: 50; box-shadow: var(--shadow-1); transition: transform var(--tr); }
.sb-collapse:hover { color: var(--ink); }
.layout.collapsed .sb-collapse svg { transform: rotate(180deg); }

/* ---- Main ---- */
.main { min-width: 0; display: flex; flex-direction: column; }.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 0 26px; height: 60px;
  display: flex; align-items: center; gap: 16px;
}
.tb-title { min-width: 90px; }
.tb-title h1, .tb-title .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-title h1 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.tb-title .crumb { font-size: 12px; color: var(--muted); margin-top: 1px; }
.tb-spacer { flex: 1; }

.cmdk-btn {
  display: flex; align-items: center; gap: 10px; min-width: 220px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px; cursor: pointer;
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.cmdk-btn:hover { border-color: var(--line-strong); }
.cmdk-btn .kbd { margin-left: auto; }
.kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); box-shadow: 0 1px 0 var(--line-strong); }

/* icon buttons */
.iconbtn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: all var(--tr-fast); flex-shrink: 0; }
.iconbtn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.iconbtn.spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font-weight: 550; font-size: 13px; cursor: pointer; transition: all var(--tr-fast); white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn svg { width: 15px; height: 15px; }

.live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 600; white-space: nowrap; }
[data-theme="editorial"] .live { border-radius: 3px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2.1s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent);} 70%{box-shadow:0 0 0 8px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* segmented control */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; font-size: 12.5px; font-weight: 550; color: var(--muted); padding: 5px 11px; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; transition: all var(--tr-fast); white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
[data-theme="terminal"] .seg button.on { background: var(--accent); color: var(--accent-ink); }

/* content area */
.content { padding: 22px 26px 72px; max-width: 1560px; width: 100%; margin: 0 auto; }
.view { animation: viewin 340ms cubic-bezier(.22,1,.36,1); }
@keyframes viewin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* filter bar (global) */
.filterbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.chip-filter { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 550; cursor: pointer; transition: all var(--tr-fast); }
[data-theme="editorial"] .chip-filter { border-radius: 3px; }
.chip-filter:hover { border-color: var(--line-strong); color: var(--ink); }
.chip-filter.on { background: var(--accent-weak); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.chip-filter .dotc { width: 7px; height: 7px; border-radius: 50%; }
.chip-filter .x { color: var(--muted-2); font-size: 14px; line-height: 1; }
.filter-clear { font-size: 12.5px; color: var(--accent); background: none; border: 0; cursor: pointer; font-weight: 550; padding: 6px 4px; }

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
[data-theme="editorial"] .card { box-shadow: none; }
[data-theme="editorial"][data-mode="light"] .card { border-color: var(--line); }
.card-head { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad); border-bottom: 1px solid var(--line); }
.card-head h3 { margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
.card-head .meta { font-size: 12.5px; color: var(--muted); }
.card-body { padding: var(--pad); }

/* KPI grid */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px var(--pad); position: relative; overflow: hidden;
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
[data-theme="editorial"] .kpi { box-shadow: none; }
[data-theme="editorial"] .kpi:hover { transform: none; border-color: var(--line-strong); }
[data-theme="corporate"] .kpi.feature { background: var(--brand-grad); border-color: transparent; color: #fff; }
[data-theme="corporate"] .kpi.feature .kpi-l, [data-theme="corporate"] .kpi.feature .kpi-sub { color: rgba(255,255,255,.72); }
.kpi-l { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; font-weight: 500; }
.kpi-l .sw { width: 8px; height: 8px; border-radius: 3px; }
.kpi-v { font-family: var(--font-display); font-size: 30px; font-weight: 680; letter-spacing: -.02em; margin-top: 8px; line-height: 1; display: flex; align-items: baseline; gap: 5px; }
[data-theme="editorial"] .kpi-v { font-size: 40px; font-weight: 600; letter-spacing: -.03em; }
[data-theme="dense"] .kpi-v { font-size: 24px; }
[data-theme="terminal"] .kpi-v { font-size: 26px; font-weight: 600; }
.kpi-v .u { font-size: 13px; color: var(--muted); font-weight: 500; }
.kpi-sub { margin-top: 8px; font-size: 12px; color: var(--muted-2); display: flex; align-items: center; gap: 6px; }
.kpi-sub b { color: var(--ink-2); font-weight: 600; }
.kpi-spark { position: absolute; right: 12px; top: 14px; opacity: .9; }
.kpi-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--line); }
.kpi-bar i { display: block; height: 100%; background: var(--accent); transition: width 1.1s var(--tr-slow); }

/* stat ribbon */
.ribbon { margin-top: var(--gap); display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ribbon .cell { background: var(--surface); padding: 15px var(--pad); display: flex; align-items: center; gap: 13px; }
.ribbon .ic { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-weak); color: var(--accent); flex-shrink: 0; }
[data-theme="terminal"] .ribbon .ic { border-radius: 2px; }
.ribbon .l { font-size: 11.5px; color: var(--muted); }
.ribbon .v { font-family: var(--font-display); font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin-top: 2px; }
.ribbon .v .u { font-size: 11.5px; color: var(--muted-2); font-weight: 500; margin-left: 5px; }

.sec-label { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); margin: 26px 2px 12px; }

/* ============================================================
   TABLE
   ============================================================ */
.tbl-wrap { overflow-x: auto; }
/* Tableaux posés dans une carte (Analytics, Financier) : en-tête non collant */
table.tbl.tbl-static thead th { position: static; top: auto; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
[data-theme="dense"] table.tbl, [data-theme="terminal"] table.tbl { font-size: 12.5px; }
table.tbl thead th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: 11px var(--pad); background: var(--surface-2);
  border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none;
}
table.tbl thead th.sortable { cursor: pointer; }
table.tbl thead th.sortable:hover { color: var(--ink); }
th .th-in { display: inline-flex; align-items: center; gap: 5px; }
th .sort-caret { opacity: .4; transition: opacity var(--tr-fast); }
th.sorted .sort-caret { opacity: 1; color: var(--accent); }
table.tbl tbody td { padding: 0 var(--pad); height: var(--row-h); border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
table.tbl tbody tr { cursor: pointer; transition: background var(--tr-fast); }
table.tbl tbody tr:hover { background: var(--accent-weak); }
table.tbl tbody tr.sel { background: var(--accent-weak); box-shadow: inset 2px 0 0 var(--accent); }
.code { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.sub2 { font-size: 11px; color: var(--muted-2); }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
[data-theme="editorial"] .badge, [data-theme="terminal"] .badge { border-radius: 3px; }
[data-theme="terminal"] .badge { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.badge .d { width: 6px; height: 6px; border-radius: 50%; }
.b-ok  { background: var(--ok-bg);  color: var(--ok); }  .b-ok .d { background: var(--ok); }
.b-nok { background: var(--nok-bg); color: var(--nok); } .b-nok .d { background: var(--nok); }
.b-ano { background: var(--ano-bg); color: var(--ano); } .b-ano .d { background: var(--ano); }
.b-raf { background: var(--raf-bg); color: var(--muted); } .b-raf .d { background: var(--raf); }

.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-grad); color: #fff; font-size: 10.5px; font-weight: 600; display: inline-grid; place-items: center; flex-shrink: 0; }
[data-theme="terminal"] .avatar { border-radius: 2px; }
[data-theme="editorial"] .avatar { border-radius: 0; background: var(--ink); }
.tech-cell { display: inline-flex; align-items: center; gap: 8px; }
.pdf-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: var(--accent-weak); color: var(--accent); font-size: 11px; font-weight: 600; border: 1px solid transparent; }
[data-theme="editorial"] .pdf-chip { border-radius: 2px; }

/* toolbar */
.toolbar { display: flex; align-items: center; gap: 10px; padding: 12px var(--pad); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.search { flex: 1; max-width: 360px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); transition: all var(--tr-fast); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); background: var(--surface); }
.search input { border: 0; outline: 0; background: transparent; flex: 1; }
.search svg { color: var(--muted-2); flex-shrink: 0; }

.col-menu { position: relative; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 200px; background: var(--elevated); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-3); padding: 6px; animation: pop 160ms cubic-bezier(.22,1,.36,1); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-pop .mh { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); padding: 6px 10px; font-weight: 600; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.menu-item:hover { background: var(--accent-weak); }
.menu-item .ck { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: #fff; }
.menu-item.on .ck { background: var(--accent); border-color: var(--accent); }

.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--pad); font-size: 12.5px; color: var(--muted); }
.pgbtns { display: inline-flex; gap: 4px; }
.pgbtns button { min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; font-weight: 550; transition: all var(--tr-fast); }
.pgbtns button:hover:not(:disabled) { background: var(--surface-2); }
.pgbtns button:disabled { opacity: .4; cursor: default; }
.pgbtns button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
.cmdk-overlay { position: fixed; inset: 0; z-index: 200; background: var(--overlay); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: fade 160ms ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk { width: min(620px, 92vw); background: var(--elevated); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; animation: cmdkin 200ms cubic-bezier(.22,1,.36,1); }
@keyframes cmdkin { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
.cmdk-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.cmdk-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; }
.cmdk-input svg { color: var(--muted-2); }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 8px; }
.cmdk-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); padding: 10px 12px 5px; font-weight: 600; }
.cmdk-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.cmdk-row .ic { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex-shrink: 0; }
.cmdk-row.active { background: var(--accent-weak); }
.cmdk-row.active .ic { background: var(--accent); color: var(--accent-ink); }
.cmdk-row .t { font-size: 13.5px; font-weight: 550; }
.cmdk-row .d { font-size: 11.5px; color: var(--muted); }
.cmdk-row .code { font-size: 12px; }
.cmdk-row .hint { margin-left: auto; font-size: 11px; color: var(--muted-2); }
.cmdk-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted-2); }
.cmdk-foot .k { display: inline-flex; align-items: center; gap: 5px; }

/* ============================================================
   DETAIL DRAWER
   ============================================================ */
.drawer-scrim { position: fixed; inset: 0; z-index: 150; background: var(--overlay); animation: fade 200ms ease; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 94vw); z-index: 160; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-3); display: flex; flex-direction: column; animation: drawerin 320ms cubic-bezier(.22,1,.36,1); }
@keyframes drawerin { from { transform: translateX(100%); } to { transform: none; } }
.drawer-head { padding: 20px 22px; border-bottom: 1px solid var(--line); position: relative; }
[data-theme="corporate"] .drawer-head { background: var(--brand-grad); color: #fff; }
[data-theme="corporate"] .drawer-head .muted { color: rgba(255,255,255,.7); }
.drawer-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
[data-theme="corporate"] .drawer-close { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: #fff; }
.drawer-body { padding: 22px; overflow-y: auto; flex: 1; }
.dr-id { font-family: var(--font-mono); font-size: 13px; font-weight: 600; opacity: .9; }
.dr-title { font-family: var(--font-display); font-size: 22px; font-weight: 650; letter-spacing: -.01em; margin: 6px 0 3px; }
.dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 4px 0 20px; }
.dr-cell { background: var(--surface); padding: 13px 15px; }
.dr-cell .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dr-cell .v { font-size: 14px; font-weight: 600; margin-top: 4px; }
.dr-sec { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 4px 0 12px; }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item::before { content: ''; position: absolute; left: -22px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted-3); }
.tl-item.done::before { background: var(--ok); border-color: var(--ok); }
.tl-item.active::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-weak); }
.tl-item .tt { font-size: 13px; font-weight: 600; }
.tl-item .td { font-size: 12px; color: var(--muted); margin-top: 2px; }
.drawer-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; }

/* mini map in drawer */
.dr-map { height: 150px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 20px; }

/* ============================================================
   MAP
   ============================================================ */
.map-wrap { position: relative; height: 620px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
#lmap, .lmap { width: 100%; height: 100%; background: var(--surface-2); }
.map-ctl { position: absolute; z-index: 600; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.map-layers { top: 14px; right: 14px; display: flex; gap: 2px; padding: 4px; }
.map-layers button { border: 0; background: transparent; font-size: 12px; font-weight: 550; color: var(--muted); padding: 6px 11px; border-radius: var(--radius-sm); cursor: pointer; }
.map-layers button.on { background: var(--accent); color: var(--accent-ink); }
.map-legend { bottom: 14px; left: 14px; padding: 13px 15px; min-width: 168px; }
.map-legend h5 { margin: 0 0 9px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); font-weight: 600; }
.lg-row { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.lg-row.off { opacity: .4; }
.lg-row .sw { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.lg-row .v { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.marker-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform var(--tr-fast); }
.marker-dot:hover { transform: scale(1.45); }
.leaflet-popup-content-wrapper { background: var(--elevated) !important; color: var(--ink) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-3) !important; border: 1px solid var(--line-strong); }
.leaflet-popup-tip { background: var(--elevated) !important; }
.leaflet-popup-content { margin: 13px 15px !important; font-family: var(--font-sans) !important; }
.leaflet-container { font-family: var(--font-sans) !important; }
.pop-id { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); }
.pop-site { font-weight: 650; margin: 4px 0 8px; font-size: 14px; }
.pop-row { display: flex; gap: 12px; font-size: 12px; color: var(--muted); margin: 3px 0; }
.pop-row b { color: var(--ink-2); font-weight: 600; margin-left: auto; }
.pop-btn { margin-top: 10px; width: 100%; padding: 7px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink); border: 0; font-weight: 600; font-size: 12.5px; cursor: pointer; }

/* ============================================================
   CHARTS
   ============================================================ */
.charts { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); }
.charts .wide { grid-column: 1 / 3; }
.chart-svg { display: block; width: 100%; overflow: visible; }
.legend-inline { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); margin-left: auto; }
.legend-inline .li { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.legend-inline .li.off { opacity: .38; }
.legend-inline .sw { width: 10px; height: 10px; border-radius: 3px; }
.g-tip { position: absolute; pointer-events: none; background: var(--elevated); color: var(--ink); border: 1px solid var(--line-strong); font-size: 12px; padding: 8px 11px; border-radius: var(--radius-sm); box-shadow: var(--shadow-3); transform: translate(-50%,-120%); white-space: nowrap; z-index: 20; transition: opacity var(--tr-fast); }
.g-tip b { font-variant-numeric: tabular-nums; }
.g-tip .muted { color: var(--muted); }

.donut-c { font-family: var(--font-display); font-size: 30px; font-weight: 680; fill: var(--ink); letter-spacing: -.02em; }
.donut-s { font-size: 10.5px; fill: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.heatmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.hm-col { display: grid; grid-template-rows: repeat(7,1fr); gap: 4px; }
.hm-cell { aspect-ratio: 1; border-radius: 3px; background: var(--raf-bg); cursor: pointer; transition: transform var(--tr-fast); }
.hm-cell:hover { transform: scale(1.4); position: relative; z-index: 4; }
.hm-cell.weekend { opacity: .35; }
.hm-cell.future { background: transparent; border: 1px dashed var(--line-strong); }

/* region cards */
.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.region-card { padding: var(--pad); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--tr), box-shadow var(--tr); cursor: pointer; }
.region-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
[data-theme="editorial"] .region-card { box-shadow: none; }
.region-card .h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.region-card h4 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 650; }
.region-pct { font-family: var(--font-display); font-size: 30px; font-weight: 680; letter-spacing: -.02em; }
.region-pct .u { font-size: 14px; color: var(--muted); }
.rprog { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin: 14px 0; position: relative; }
[data-theme="editorial"] .rprog { border-radius: 2px; }
.rprog i { display: block; height: 100%; background: linear-gradient(90deg, var(--chart-2), var(--accent)); border-radius: inherit; transition: width 1.3s var(--tr-slow); position: relative; }
.rprog i::after { content:''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-100%); animation: sh 2.6s ease-in-out infinite; }
@keyframes sh { to { transform: translateX(220%); } }
.rstats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; font-size: 12px; }
.rstats .l { color: var(--muted); }
.rstats .v { font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* finance */
.fin-cards { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--gap); }
.fin-card { padding: 16px var(--pad); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--tr), box-shadow var(--tr); }
.fin-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
[data-theme="editorial"] .fin-card { box-shadow: none; }
.fin-card.hero { background: var(--brand-grad); color: #fff; border-color: transparent; }
[data-theme="editorial"][data-mode="light"] .fin-card.hero { background: var(--ink); }
.fin-card.hero .l, .fin-card.hero .s { color: rgba(255,255,255,.72); }
.fin-card .l { font-size: 12px; color: var(--muted); }
.fin-card .v { font-family: var(--font-display); font-size: 23px; font-weight: 680; letter-spacing: -.02em; margin-top: 7px; font-variant-numeric: tabular-nums; }
.fin-card .s { font-size: 12px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }

.fade { opacity: 0; transform: translateY(8px); animation: fade-up var(--tr-slow) forwards; }
@keyframes fade-up { to { opacity: 1; transform: none; } }

.empty { text-align: center; padding: 48px; color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.spacer { flex: 1; }