/* ── BASE: CSS vars, transitions, body, header, nav sidebar, layout, toast, empty states ── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ════════════════════════════════════════════════════════════════
   THEME-INDEPENDENT CONSTANTS
   ════════════════════════════════════════════════════════════════ */
:root{
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --font-ui:'Inter',system-ui,sans-serif;
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-logo:'Cabinet Grotesk',sans-serif;
  --font-mono:'DM Mono','Fira Mono',monospace;
  --font-body:var(--font-ui);
  --font:var(--font-ui);
  --surface1:var(--surface);
  --text1:var(--text);
  --control-size:30px;

  /* ── semantic colours — fixed across themes, light-mode defaults ── */
  --green:#059669;   --green-bg:rgba(5,150,105,0.08);   --green-ch:5,150,105;
  --amber:#d97706;   --amber-bg:rgba(217,119,6,0.08);   --amber-ch:217,119,6;
  --red:#dc2626;     --red-bg:rgba(220,38,38,0.08);     --red-ch:220,38,38;
  --blue:#2563eb;    --blue-bg:rgba(37,99,235,0.08);    --blue-ch:37,99,235;
  --orange:#ea580c;  --orange-bg:rgba(234,88,12,0.08);  --orange-ch:234,88,12;

  /* ── legacy compat: purple + neutral (used in badge CSS until Step 8) ── */
  --purple:#7c3aed;  --purple-bg:rgba(124,58,237,0.08);  --purple-ch:124,58,237;
  --neutral-ch:100,100,140;

  /* ── compound / misc tokens ── */
  --gradient-success:linear-gradient(135deg,#047857,#059669);
  --overlay-bg:rgba(0,0,0,0.55);
  --overlay-backdrop:rgba(0,0,0,0.22);
  --surface-hover:rgba(0,0,0,0.03);
  --chart-grid:rgba(0,0,20,0.15);
  --green-confirmed:#047857;
  --spark-a:#7c3aed;
  --spark-b:#0891b2;

  /* ── Stat card design tokens — light mode defaults ── */
  --stat-hero-bg:color-mix(in srgb, var(--accent) 3%, var(--surface));
  --stat-hero-border:var(--border);
  --stat-hero-label:#9aa0b4;
  --stat-hero-value:#0f1623;
  --stat-hero-sub:#8a93a8;
  --stat-hero-footer:#b0b8cc;
  --stat-spark-stroke:color-mix(in srgb, var(--accent) 70%, transparent);
  --stat-spark-fill:color-mix(in srgb, var(--accent) 18%, transparent);
  --stat-mini-bg:#ffffff;
  --stat-mini-border:#e4e7ed;
  --stat-mini-label:#9aa0b4;
  --stat-mini-value:#0f1623;
  --stat-ring-spend:rgba(2,132,199,0.04);
  --stat-ring-roas:rgba(5,150,105,0.04);
  --stat-ring-revenue:rgba(217,119,6,0.04);
  --stat-spend-accent:#0284c7;
  --stat-roas-accent:#059669;
  --stat-revenue-accent:#d97706;
}

/* ── dark-mode semantic overrides ── */
.dark{
  --green:#34d399;   --green-bg:rgba(52,211,153,0.10);   --green-ch:52,211,153;
  --amber:#fbbf24;   --amber-bg:rgba(251,191,36,0.10);   --amber-ch:251,191,36;
  --red:#f87171;     --red-bg:rgba(248,113,113,0.10);    --red-ch:248,113,113;
  --blue:#60a5fa;    --blue-bg:rgba(96,165,250,0.10);    --blue-ch:96,165,250;
  --orange:#fb923c;  --orange-bg:rgba(251,146,60,0.10);  --orange-ch:251,146,60;

  /* legacy dark compat */
  --purple:#c084fc;  --purple-bg:rgba(192,132,252,0.1);  --purple-ch:192,132,252;
  --neutral-ch:94,90,114;

  --gradient-success:linear-gradient(135deg,color-mix(in srgb,#34d399 75%,black),#34d399);
  --overlay-bg:rgba(0,0,0,0.65);
  --overlay-backdrop:rgba(0,0,0,0.30);
  --surface-hover:rgba(255,255,255,0.03);
  --chart-grid:rgba(255,255,255,0.18);
  --green-confirmed:color-mix(in srgb,#34d399 75%,black);
  --spark-a:#e0e7ff;
  --spark-b:#67e8f9;

  /* ── Stat card design tokens — dark mode overrides ── */
  --stat-hero-bg:color-mix(in srgb, var(--accent) 5%, var(--surface));
  --stat-hero-border:var(--border);
  --stat-hero-label:rgba(255,255,255,0.4);
  --stat-hero-value:#ffffff;
  --stat-hero-sub:rgba(255,255,255,0.4);
  --stat-hero-footer:rgba(255,255,255,0.25);
  --stat-spark-stroke:color-mix(in srgb, var(--accent) 85%, transparent);
  --stat-spark-fill:color-mix(in srgb, var(--accent) 35%, transparent);
  --stat-mini-bg:#0e0e14;
  --stat-mini-border:#1e1e28;
  --stat-mini-label:#5a5a72;
  --stat-mini-value:#e8e8f4;
  --stat-ring-spend:rgba(2,132,199,0.12);
  --stat-ring-roas:rgba(5,150,105,0.12);
  --stat-ring-revenue:rgba(217,119,6,0.12);
  --stat-spend-accent:#38bdf8;
  --stat-roas-accent:#34d399;
  --stat-revenue-accent:#fbbf24;
}

/* ── exception: Rose dark uses slightly different green / red ── */
.dark.theme-rose{
  --green:#4ade80;  --green-bg:rgba(74,222,128,0.09);  --green-ch:74,222,128;
  --red:#f87171;    --red-bg:rgba(248,113,113,0.09);   --red-ch:248,113,113;
}

/* ════════════════════════════════════════════════════════════════
   THEME TOKENS — 10 blocks  (3 themes × 2 modes + 2 dark-only + 2×2 new)
   ════════════════════════════════════════════════════════════════ */

/* ── Emerald / light ── */
.theme-emerald{
  --bg:#f8f9fb;      --bg2:#f1f3f7;
  --surface:#ffffff; --surface2:#f4f6f9; --surface3:#eceef3;
  --border:#e4e7ed;  --border2:#cfd4e0;
  --text:#0f1623;    --text2:#4a5166;    --text3:#4a5166;
  --accent:#059669;  --accent2:#047857;
  --accent-bg:rgba(5,150,105,0.08);
  --accent-border:rgba(5,150,105,0.24);
  --accent-glow:rgba(5,150,105,0.35);
  --accent-grad:linear-gradient(135deg,#059669,#0d9488);
  /* legacy compat */
  --accent-ch:5,150,105;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(248,249,251,0.48);
  --header-shine:rgba(255,255,255,0.70);
  --modal-bg:rgba(248,249,251,0.40);
  --modal-shine:rgba(255,255,255,0.80);
  --shadow:0 1px 3px rgba(15,22,35,0.06),0 1px 2px rgba(15,22,35,0.04);
  --shadow-lg:0 4px 16px rgba(15,22,35,0.09),0 2px 6px rgba(15,22,35,0.05);
  --shadow-xl:0 12px 40px rgba(15,22,35,0.14),0 4px 16px rgba(15,22,35,0.08);
  --panel-bg:rgba(0,0,0,0.025);
  --panel-border:rgba(0,0,0,0.06);
  --panel-inset:inset 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Emerald / dark ── */
.dark.theme-emerald{
  --bg:#13161f;      --bg2:#181c27;
  --surface:#1e2230; --surface2:#252a3a; --surface3:#2d3344;
  --border:#303754;  --border2:#3d4568;
  --text:#e8ecf8;    --text2:#7d8fbb;    --text3:#7d8fbb;
  --accent:#059669;  --accent2:#34d399;
  --accent-bg:rgba(5,150,105,0.12);
  --accent-border:rgba(5,150,105,0.30);
  --accent-glow:rgba(5,150,105,0.40);
  --accent-grad:linear-gradient(135deg,#059669,#34d399);
  /* legacy compat */
  --accent-ch:5,150,105;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(19,22,31,0.52);
  --header-shine:rgba(255,255,255,0.06);
  --modal-bg:rgba(19,22,31,0.45);
  --modal-shine:rgba(255,255,255,0.08);
  --shadow:0 1px 4px rgba(0,0,0,0.36),0 1px 2px rgba(0,0,0,0.22);
  --shadow-lg:0 4px 20px rgba(0,0,0,0.42),0 2px 8px rgba(0,0,0,0.26);
  --shadow-xl:0 12px 40px rgba(0,0,0,0.50),0 4px 16px rgba(0,0,0,0.30);
  --panel-bg:rgba(0,0,0,0.15);
  --panel-border:rgba(255,255,255,0.04);
  --panel-inset:inset 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Amber / light ── */
.theme-amber{
  --bg:#f7f8fc;      --bg2:#eef0f7;
  --surface:#ffffff; --surface2:#f3f4fa; --surface3:#e8eaf3;
  --border:#e0e3ef;  --border2:#c8ccdf;
  --text:#0d1225;    --text2:#44506e;    --text3:#44506e;
  --accent:#d97706;  --accent2:#b45309;
  --accent-bg:rgba(217,119,6,0.08);
  --accent-border:rgba(217,119,6,0.26);
  --accent-glow:rgba(217,119,6,0.38);
  --accent-grad:linear-gradient(135deg,#d97706,#f59e0b);
  /* legacy compat */
  --accent-ch:217,119,6;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(247,248,252,0.48);
  --header-shine:rgba(255,255,255,0.70);
  --modal-bg:rgba(247,248,252,0.40);
  --modal-shine:rgba(255,255,255,0.80);
  --shadow:0 1px 3px rgba(13,18,37,0.07),0 1px 2px rgba(13,18,37,0.04);
  --shadow-lg:0 4px 16px rgba(13,18,37,0.09),0 2px 6px rgba(13,18,37,0.05);
  --shadow-xl:0 12px 40px rgba(13,18,37,0.14),0 4px 16px rgba(13,18,37,0.08);
  --panel-bg:rgba(0,0,0,0.025);
  --panel-border:rgba(0,0,0,0.06);
  --panel-inset:inset 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Amber / dark ── */
.dark.theme-amber{
  --bg:#100e08;      --bg2:#161209;
  --surface:#1d1810; --surface2:#231e14; --surface3:#2a2418;
  --border:#332c1a;  --border2:#3f3620;
  --text:#f0e8d0;    --text2:#8c7b54;    --text3:#8c7b54;
  --accent:#f59e0b;  --accent2:#fbbf24;
  --accent-bg:rgba(245,158,11,0.12);
  --accent-border:rgba(245,158,11,0.32);
  --accent-glow:rgba(245,158,11,0.45);
  --accent-grad:linear-gradient(135deg,#d97706,#fbbf24);
  /* legacy compat */
  --accent-ch:245,158,11;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(16,14,8,0.52);
  --header-shine:rgba(255,255,255,0.06);
  --modal-bg:rgba(16,14,8,0.45);
  --modal-shine:rgba(255,255,255,0.08);
  --shadow:0 1px 4px rgba(0,0,0,0.45),0 1px 2px rgba(0,0,0,0.30);
  --shadow-lg:0 4px 20px rgba(0,0,0,0.50),0 2px 8px rgba(0,0,0,0.32);
  --shadow-xl:0 12px 40px rgba(0,0,0,0.58),0 4px 16px rgba(0,0,0,0.38);
  --panel-bg:rgba(0,0,0,0.15);
  --panel-border:rgba(255,255,255,0.04);
  --panel-inset:inset 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Rose / light ── */
.theme-rose{
  --bg:#faf9f7;      --bg2:#f3f1ee;
  --surface:#ffffff; --surface2:#f6f4f1; --surface3:#ede9e4;
  --border:#e5e0d8;  --border2:#cfc9be;
  --text:#1a1714;    --text2:#574f46;    --text3:#574f46;
  --accent:#e11d48;  --accent2:#be123c;
  --accent-bg:rgba(225,29,72,0.07);
  --accent-border:rgba(225,29,72,0.24);
  --accent-glow:rgba(225,29,72,0.34);
  --accent-grad:linear-gradient(135deg,#e11d48,#fb7185);
  /* legacy compat */
  --accent-ch:225,29,72;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(250,249,247,0.48);
  --header-shine:rgba(255,255,255,0.70);
  --modal-bg:rgba(250,249,247,0.40);
  --modal-shine:rgba(255,255,255,0.80);
  --shadow:0 1px 2px rgba(26,23,20,0.06),0 1px 3px rgba(26,23,20,0.04);
  --shadow-lg:0 4px 14px rgba(26,23,20,0.09),0 2px 5px rgba(26,23,20,0.05);
  --shadow-xl:0 12px 40px rgba(26,23,20,0.14),0 4px 16px rgba(26,23,20,0.08);
  --panel-bg:rgba(0,0,0,0.025);
  --panel-border:rgba(0,0,0,0.06);
  --panel-inset:inset 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Sapphire / light ── */
.theme-sapphire{
  --bg:#f7f9fc;      --bg2:#eef2f8;
  --surface:#ffffff; --surface2:#f2f5fb; --surface3:#e8edf5;
  --border:#dde3ef;  --border2:#c8d0e3;
  --text:#0d1526;    --text2:#3d4e6b;    --text3:#3d4e6b;
  --accent:#2563eb;  --accent2:#1d4ed8;
  --accent-bg:rgba(37,99,235,0.08);
  --accent-border:rgba(37,99,235,0.24);
  --accent-glow:rgba(37,99,235,0.35);
  --accent-grad:linear-gradient(135deg,#2563eb,#3b82f6);
  --accent-ch:37,99,235;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(247,249,252,0.48);
  --header-shine:rgba(255,255,255,0.70);
  --modal-bg:rgba(247,249,252,0.40);
  --modal-shine:rgba(255,255,255,0.80);
  --shadow:0 1px 3px rgba(13,21,38,0.06),0 1px 2px rgba(13,21,38,0.04);
  --shadow-lg:0 4px 16px rgba(13,21,38,0.09),0 2px 6px rgba(13,21,38,0.05);
  --shadow-xl:0 12px 40px rgba(13,21,38,0.14),0 4px 16px rgba(13,21,38,0.08);
  --panel-bg:rgba(0,0,0,0.025);
  --panel-border:rgba(0,0,0,0.06);
  --panel-inset:inset 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Sapphire / dark ── */
.dark.theme-sapphire{
  --bg:#0c101a;      --bg2:#111622;
  --surface:#171e2e; --surface2:#1e2739; --surface3:#263044;
  --border:#2d3a52;  --border2:#384a68;
  --text:#e2e9f8;    --text2:#7080a8;    --text3:#7080a8;
  --accent:#3b82f6;  --accent2:#60a5fa;
  --accent-bg:rgba(59,130,246,0.12);
  --accent-border:rgba(59,130,246,0.30);
  --accent-glow:rgba(59,130,246,0.42);
  --accent-grad:linear-gradient(135deg,#2563eb,#60a5fa);
  --accent-ch:59,130,246;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(12,16,26,0.52);
  --header-shine:rgba(255,255,255,0.06);
  --modal-bg:rgba(12,16,26,0.45);
  --modal-shine:rgba(255,255,255,0.08);
  --shadow:0 1px 4px rgba(0,0,0,0.36),0 1px 2px rgba(0,0,0,0.22);
  --shadow-lg:0 4px 20px rgba(0,0,0,0.42),0 2px 8px rgba(0,0,0,0.26);
  --shadow-xl:0 12px 40px rgba(0,0,0,0.50),0 4px 16px rgba(0,0,0,0.30);
  --panel-bg:rgba(0,0,0,0.15);
  --panel-border:rgba(255,255,255,0.04);
  --panel-inset:inset 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Violet / light ── */
.theme-violet{
  --bg:#f8f7fc;      --bg2:#f0eef9;
  --surface:#ffffff; --surface2:#f4f2fb; --surface3:#ebe8f5;
  --border:#e0daf0;  --border2:#ccc4e6;
  --text:#120d26;    --text2:#4a3d6b;    --text3:#4a3d6b;
  --accent:#7c3aed;  --accent2:#6d28d9;
  --accent-bg:rgba(124,58,237,0.08);
  --accent-border:rgba(124,58,237,0.24);
  --accent-glow:rgba(124,58,237,0.35);
  --accent-grad:linear-gradient(135deg,#7c3aed,#a78bfa);
  --accent-ch:124,58,237;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(248,247,252,0.48);
  --header-shine:rgba(255,255,255,0.70);
  --modal-bg:rgba(248,247,252,0.40);
  --modal-shine:rgba(255,255,255,0.80);
  --shadow:0 1px 3px rgba(18,13,38,0.06),0 1px 2px rgba(18,13,38,0.04);
  --shadow-lg:0 4px 16px rgba(18,13,38,0.09),0 2px 6px rgba(18,13,38,0.05);
  --shadow-xl:0 12px 40px rgba(18,13,38,0.14),0 4px 16px rgba(18,13,38,0.08);
  --panel-bg:rgba(0,0,0,0.025);
  --panel-border:rgba(0,0,0,0.06);
  --panel-inset:inset 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Violet / dark ── */
.dark.theme-violet{
  --bg:#0d0c18;      --bg2:#131122;
  --surface:#1a1830; --surface2:#20203a; --surface3:#282644;
  --border:#322e52;  --border2:#403c68;
  --text:#eae6f8;    --text2:#7a70a8;    --text3:#7a70a8;
  --accent:#8b5cf6;  --accent2:#c084fc;
  --accent-bg:rgba(139,92,246,0.12);
  --accent-border:rgba(139,92,246,0.30);
  --accent-glow:rgba(139,92,246,0.45);
  --accent-grad:linear-gradient(135deg,#7c3aed,#c084fc);
  --accent-ch:139,92,246;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(13,12,24,0.52);
  --header-shine:rgba(255,255,255,0.06);
  --modal-bg:rgba(13,12,24,0.45);
  --modal-shine:rgba(255,255,255,0.08);
  --shadow:0 1px 4px rgba(0,0,0,0.38),0 1px 2px rgba(0,0,0,0.24);
  --shadow-lg:0 4px 20px rgba(0,0,0,0.44),0 2px 8px rgba(0,0,0,0.26);
  --shadow-xl:0 12px 40px rgba(0,0,0,0.52),0 4px 16px rgba(0,0,0,0.32);
  --panel-bg:rgba(0,0,0,0.15);
  --panel-border:rgba(255,255,255,0.04);
  --panel-inset:inset 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Synthwave / dark only ── */
.dark.theme-synthwave{
  --bg:#08040f;      --bg2:#0e0818;
  --surface:#130d20; --surface2:#1a1128; --surface3:#231730;
  --border:#2e1f42;  --border2:#3d2858;
  --text:#f0e8ff;    --text2:#9070b8;    --text3:#9070b8;
  --accent:#d946ef;  --accent2:#e879f9;
  --accent-bg:rgba(217,70,239,0.12);
  --accent-border:rgba(217,70,239,0.32);
  --accent-glow:rgba(217,70,239,0.50);
  --accent-grad:linear-gradient(135deg,#9333ea,#d946ef);
  --accent-ch:217,70,239;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(8,4,15,0.52);
  --header-shine:rgba(217,70,239,0.08);
  --modal-bg:rgba(8,4,15,0.45);
  --modal-shine:rgba(217,70,239,0.10);
  --shadow:0 1px 4px rgba(0,0,0,0.50),0 1px 2px rgba(0,0,0,0.35);
  --shadow-lg:0 4px 20px rgba(0,0,0,0.55),0 2px 8px rgba(0,0,0,0.38);
  --shadow-xl:0 12px 40px rgba(0,0,0,0.65),0 4px 16px rgba(0,0,0,0.42);
  --panel-bg:rgba(0,0,0,0.20);
  --panel-border:rgba(217,70,239,0.08);
  --panel-inset:inset 0 1px 3px rgba(0,0,0,0.25);
}

/* ── Terminal / dark only ── */
.dark.theme-terminal{
  --bg:#020602;      --bg2:#050d05;
  --surface:#091209; --surface2:#0e190e; --surface3:#131f13;
  --border:#182818;  --border2:#204020;
  --text:#d0f0d0;    --text2:#5a8a5a;    --text3:#5a8a5a;
  --accent:#00e676;  --accent2:#69ff99;
  --accent-bg:rgba(0,230,118,0.10);
  --accent-border:rgba(0,230,118,0.28);
  --accent-glow:rgba(0,230,118,0.45);
  --accent-grad:linear-gradient(135deg,#00b248,#00e676);
  --accent-ch:0,230,118;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(2,6,2,0.52);
  --header-shine:rgba(0,230,118,0.06);
  --modal-bg:rgba(2,6,2,0.45);
  --modal-shine:rgba(0,230,118,0.06);
  --shadow:0 1px 4px rgba(0,0,0,0.50),0 1px 2px rgba(0,0,0,0.35);
  --shadow-lg:0 4px 20px rgba(0,0,0,0.55),0 2px 8px rgba(0,0,0,0.38);
  --shadow-xl:0 12px 40px rgba(0,0,0,0.65),0 4px 16px rgba(0,0,0,0.42);
  --panel-bg:rgba(0,10,0,0.20);
  --panel-border:rgba(0,230,118,0.06);
  --panel-inset:inset 0 1px 3px rgba(0,0,0,0.25);
  --font-ui:'DM Mono','Fira Mono',monospace;
  --font-display:'DM Mono','Fira Mono',monospace;
}

/* ── Rose / dark ── */
.dark.theme-rose{
  --bg:#151210;      --bg2:#1c1814;
  --surface:#231e1a; --surface2:#2a2420; --surface3:#322b26;
  --border:#3a322c;  --border2:#4a4038;
  --text:#f0ece6;    --text2:#9a8f84;    --text3:#9a8f84;
  --accent:#fb7185;  --accent2:#fda4af;
  --accent-bg:rgba(251,113,133,0.11);
  --accent-border:rgba(251,113,133,0.30);
  --accent-glow:rgba(251,113,133,0.40);
  --accent-grad:linear-gradient(135deg,#e11d48,#fb7185);
  /* legacy compat */
  --accent-ch:251,113,133;
  --gradient-optimise:var(--accent-grad);
  --header-bg:rgba(21,18,16,0.52);
  --header-shine:rgba(255,255,255,0.06);
  --modal-bg:rgba(21,18,16,0.45);
  --modal-shine:rgba(255,255,255,0.08);
  --shadow:0 1px 4px rgba(0,0,0,0.38),0 1px 2px rgba(0,0,0,0.24);
  --shadow-lg:0 4px 18px rgba(0,0,0,0.44),0 2px 7px rgba(0,0,0,0.26);
  --shadow-xl:0 12px 40px rgba(0,0,0,0.52),0 4px 16px rgba(0,0,0,0.32);
  --panel-bg:rgba(0,0,0,0.15);
  --panel-border:rgba(255,255,255,0.04);
  --panel-inset:inset 0 1px 3px rgba(0,0,0,0.2);
}

/* ── NuPhy / light — keyboard grey + bold coral/teal/gold ── */
.theme-nuphy{
  --bg:#E8E8E8;      --bg2:#E0E0E0;
  --surface:#F4F4F4; --surface2:#ECECEC; --surface3:#E4E4E4;
  --border:#D0D0D0;  --border2:#BEBEBE;
  --text:#1C1C1C;    --text2:#6C6C6C;    --text3:#6C6C6C;
  --accent:#E05A3A;  --accent2:#C44828;
  --accent-bg:rgba(224,90,58,0.13);
  --accent-border:rgba(224,90,58,0.30);
  --accent-glow:rgba(224,90,58,0.40);
  --accent-grad:#E05A3A;
  --accent-ch:224,90,58;
  --gradient-optimise:#E05A3A;
  --gradient-success:#3DBFB8;
  /* semantic colour overrides — teal replaces emerald, gold replaces amber */
  --green:#3DBFB8;   --green-bg:rgba(61,191,184,0.10);   --green-ch:61,191,184;
  --amber:#F0B429;   --amber-bg:rgba(240,180,41,0.10);   --amber-ch:240,180,41;
  --green-confirmed:#2BA8A2;
  --spark-a:#E05A3A;
  --spark-b:#3DBFB8;
  --header-bg:rgba(232,232,232,0.62);
  --header-shine:rgba(255,255,255,0.55);
  --modal-bg:rgba(232,232,232,0.48);
  --modal-shine:rgba(255,255,255,0.75);
  --shadow:0 1px 3px rgba(28,28,28,0.09),0 1px 2px rgba(28,28,28,0.05);
  --shadow-lg:0 4px 16px rgba(28,28,28,0.12),0 2px 6px rgba(28,28,28,0.07);
  --shadow-xl:0 12px 40px rgba(28,28,28,0.18),0 4px 16px rgba(28,28,28,0.10);
  --panel-bg:rgba(0,0,0,0.03);
  --panel-border:rgba(0,0,0,0.07);
  --panel-inset:inset 0 1px 2px rgba(0,0,0,0.05);
  --overlay-bg:rgba(0,0,0,0.50);
  --overlay-backdrop:rgba(0,0,0,0.20);
  --surface-hover:rgba(0,0,0,0.03);
  --chart-grid:rgba(0,0,0,0.12);
  /* stat card tokens */
  --stat-hero-label:#8C8C8C;
  --stat-hero-value:#1C1C1C;
  --stat-hero-sub:#8C8C8C;
  --stat-hero-footer:#ABABAB;
  --stat-mini-bg:#F4F4F4;
  --stat-mini-border:#D8D8D8;
  --stat-mini-label:#8C8C8C;
  --stat-mini-value:#1C1C1C;
  --stat-ring-spend:rgba(61,191,184,0.06);
  --stat-ring-roas:rgba(224,90,58,0.06);
  --stat-ring-revenue:rgba(240,180,41,0.06);
  --stat-spend-accent:#3DBFB8;
  --stat-roas-accent:#E05A3A;
  --stat-revenue-accent:#F0B429;
}

/* ── NuPhy / dark — anthracite charcoal + same bold accents ── */
.dark.theme-nuphy{
  --bg:#1A1A1A;      --bg2:#202020;
  --surface:#262626; --surface2:#2E2E2E; --surface3:#363636;
  --border:#424242;  --border2:#505050;
  --text:#F0F0F0;    --text2:#8C8C8C;    --text3:#8C8C8C;
  --accent:#E05A3A;  --accent2:#F07050;
  --accent-bg:rgba(224,90,58,0.16);
  --accent-border:rgba(224,90,58,0.36);
  --accent-glow:rgba(224,90,58,0.48);
  --accent-grad:#E05A3A;
  --accent-ch:224,90,58;
  --gradient-optimise:#E05A3A;
  --gradient-success:#3DBFB8;
  /* semantic colour overrides */
  --green:#3DBFB8;   --green-bg:rgba(61,191,184,0.12);   --green-ch:61,191,184;
  --amber:#F0B429;   --amber-bg:rgba(240,180,41,0.12);   --amber-ch:240,180,41;
  --red:#F07060;     --red-bg:rgba(240,112,96,0.12);     --red-ch:240,112,96;
  --green-confirmed:#2BA8A2;
  --spark-a:#E05A3A;
  --spark-b:#3DBFB8;
  --header-bg:rgba(26,26,26,0.58);
  --header-shine:rgba(255,255,255,0.05);
  --modal-bg:rgba(26,26,26,0.50);
  --modal-shine:rgba(255,255,255,0.05);
  --shadow:0 1px 4px rgba(0,0,0,0.50),0 1px 2px rgba(0,0,0,0.32);
  --shadow-lg:0 4px 20px rgba(0,0,0,0.56),0 2px 8px rgba(0,0,0,0.38);
  --shadow-xl:0 12px 40px rgba(0,0,0,0.65),0 4px 16px rgba(0,0,0,0.42);
  --panel-bg:rgba(0,0,0,0.18);
  --panel-border:rgba(255,255,255,0.05);
  --panel-inset:inset 0 1px 3px rgba(0,0,0,0.22);
  --overlay-bg:rgba(0,0,0,0.65);
  --overlay-backdrop:rgba(0,0,0,0.32);
  --surface-hover:rgba(255,255,255,0.03);
  --chart-grid:rgba(255,255,255,0.16);
  /* stat card tokens */
  --stat-hero-label:rgba(255,255,255,0.38);
  --stat-hero-value:#F0F0F0;
  --stat-hero-sub:rgba(255,255,255,0.38);
  --stat-hero-footer:rgba(255,255,255,0.22);
  --stat-mini-bg:#1A1A1A;
  --stat-mini-border:#2E2E2E;
  --stat-mini-label:#5E5E5E;
  --stat-mini-value:#E8E8E8;
  --stat-ring-spend:rgba(61,191,184,0.12);
  --stat-ring-roas:rgba(224,90,58,0.12);
  --stat-ring-revenue:rgba(240,180,41,0.12);
  --stat-spend-accent:#3DBFB8;
  --stat-roas-accent:#E05A3A;
  --stat-revenue-accent:#F0B429;
}

/* ── Moss / light — olive + sage + stone ── */
.theme-moss {
  --bg:#f7f5ee; --bg2:#eee9de; --surface:#ffffff; --surface2:#f5f2e8; --surface3:#ebe5d8;
  --border:#e1dacb; --border2:#c7bea9; --text:#1b1a15; --text2:#5d5b4d; --text3:#5d5b4d;
  --accent:#4a5e1c; --accent2:#6f8a36; --accent-bg:rgba(74,94,28,0.08); --accent-border:rgba(74,94,28,0.24); --accent-glow:rgba(111,138,54,0.34); --accent-grad:linear-gradient(135deg, #4a5e1c, #6f8a36);
  --shadow:0 1px 2px rgba(27,26,21,0.06), 0 1px 3px rgba(27,26,21,0.04); --shadow-lg:0 4px 14px rgba(27,26,21,0.09), 0 2px 5px rgba(27,26,21,0.05); --shadow-xl:0 12px 40px rgba(27,26,21,0.14), 0 4px 16px rgba(27,26,21,0.08);
  --header-bg:rgba(247,245,238,0.60); --header-shine:rgba(255,255,255,0.70); --modal-bg:rgba(247,245,238,0.40);
}

/* ── Moss / dark — deep forest + sage ── */
.dark.theme-moss {
  --bg:#12130f; --bg2:#191b14; --surface:#21241b; --surface2:#292d22; --surface3:#323728;
  --border:#3a402d; --border2:#4d563d; --text:#f2eee3; --text2:#a49e87; --text3:#a49e87;
  --accent:#aabe73; --accent2:#d6e6a3; --accent-bg:rgba(170,190,115,0.12); --accent-border:rgba(170,190,115,0.30); --accent-glow:rgba(214,230,163,0.40); --accent-grad:linear-gradient(135deg, #8fa45e, #d6e6a3);
  --shadow:0 1px 4px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.25); --shadow-lg:0 4px 18px rgba(0,0,0,0.46), 0 2px 7px rgba(0,0,0,0.28); --shadow-xl:0 12px 40px rgba(0,0,0,0.54), 0 4px 16px rgba(0,0,0,0.34);
  --header-bg:rgba(18,19,15,0.65); --header-shine:rgba(255,255,255,0.06); --modal-bg:rgba(18,19,15,0.45);
}

/* ── Solaris / light — citron + lemon + graphite ── */
.theme-solaris {
  --bg:#fcfbf3; --bg2:#f3efd9; --surface:#ffffff; --surface2:#f8f5e8; --surface3:#ede8cf;
  --border:#e4ddb8; --border2:#cdc488; --text:#18170f; --text2:#5f5b3f; --text3:#5f5b3f;
  --accent:#6b7a0e; --accent2:#8fa018; --accent-bg:rgba(107,122,14,0.09); --accent-border:rgba(107,122,14,0.26); --accent-glow:rgba(143,160,24,0.34); --accent-grad:linear-gradient(135deg, #6b7a0e, #a0bb22);
  --shadow:0 1px 3px rgba(24,23,15,0.06), 0 1px 2px rgba(24,23,15,0.04); --shadow-lg:0 4px 16px rgba(24,23,15,0.09), 0 2px 6px rgba(24,23,15,0.05); --shadow-xl:0 12px 40px rgba(24,23,15,0.14), 0 4px 16px rgba(24,23,15,0.08);
  --header-bg:rgba(252,251,243,0.60); --header-shine:rgba(255,255,255,0.70); --modal-bg:rgba(252,251,243,0.40);
}

/* ── Solaris / dark — deep graphite + citron ── */
.dark.theme-solaris {
  --bg:#12130c; --bg2:#181a11; --surface:#202317; --surface2:#282c1d; --surface3:#313724;
  --border:#3c4328; --border2:#525d34; --text:#f7f5e8; --text2:#aca67f; --text3:#aca67f;
  --accent:#d4ea4d; --accent2:#f1f8a6; --accent-bg:rgba(212,234,77,0.12); --accent-border:rgba(212,234,77,0.30); --accent-glow:rgba(241,248,166,0.42); --accent-grad:linear-gradient(135deg, #c2de2f, #f1f8a6);
  --shadow:0 1px 4px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.25); --shadow-lg:0 4px 18px rgba(0,0,0,0.46), 0 2px 7px rgba(0,0,0,0.28); --shadow-xl:0 12px 40px rgba(0,0,0,0.54), 0 4px 16px rgba(0,0,0,0.34);
  --header-bg:rgba(18,19,12,0.65); --header-shine:rgba(255,255,255,0.06); --modal-bg:rgba(18,19,12,0.45);
}

/* ── Oyster / light — pearl + limestone + pewter-mauve ── */
.theme-oyster {
  --bg:#f7f5f2; --bg2:#ede8e2; --surface:#ffffff; --surface2:#f5f1ec; --surface3:#ebe5dd;
  --border:#e1d9d1; --border2:#c9beb5; --text:#1b1714; --text2:#5f5650; --text3:#5f5650;
  --accent:#8c7b86; --accent2:#b8aab4; --accent-bg:rgba(140,123,134,0.08); --accent-border:rgba(140,123,134,0.24); --accent-glow:rgba(184,170,180,0.34); --accent-grad:linear-gradient(135deg, #8c7b86, #b8aab4);
  --shadow:0 1px 2px rgba(27,23,20,0.06), 0 1px 3px rgba(27,23,20,0.04); --shadow-lg:0 4px 14px rgba(27,23,20,0.09), 0 2px 5px rgba(27,23,20,0.05); --shadow-xl:0 12px 40px rgba(27,23,20,0.14), 0 4px 16px rgba(27,23,20,0.08);
  --header-bg:rgba(247,245,242,0.60); --header-shine:rgba(255,255,255,0.70); --modal-bg:rgba(247,245,242,0.40);
}

/* ── Oyster / dark — deep warm black + pewter-mauve ── */
.dark.theme-oyster {
  --bg:#12100f; --bg2:#191614; --surface:#211d1b; --surface2:#292422; --surface3:#322c29;
  --border:#3b342f; --border2:#514842; --text:#f1ece7; --text2:#a79b92; --text3:#a79b92;
  --accent:#c3b5be; --accent2:#e0d3da; --accent-bg:rgba(195,181,190,0.12); --accent-border:rgba(195,181,190,0.30); --accent-glow:rgba(224,211,218,0.40); --accent-grad:linear-gradient(135deg, #a896a1, #e0d3da);
  --shadow:0 1px 4px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.25); --shadow-lg:0 4px 18px rgba(0,0,0,0.46), 0 2px 7px rgba(0,0,0,0.28); --shadow-xl:0 12px 40px rgba(0,0,0,0.54), 0 4px 16px rgba(0,0,0,0.34);
  --header-bg:rgba(18,16,15,0.65); --header-shine:rgba(255,255,255,0.06); --modal-bg:rgba(18,16,15,0.45);
}

/* ── Graphite / light — matte stone + smoked silver ── */
.theme-graphite {
  --bg:#f6f5f3; --bg2:#eeece8; --surface:#ffffff; --surface2:#f6f4f1; --surface3:#ece8e2;
  --border:#e2ddd6; --border2:#c9c1b7; --text:#181513; --text2:#5b554e; --text3:#5b554e;
  --accent:#5f6b7a; --accent2:#a6afbc; --accent-bg:rgba(95,107,122,0.08); --accent-border:rgba(95,107,122,0.22); --accent-glow:rgba(166,175,188,0.34); --accent-grad:linear-gradient(135deg, #5f6b7a, #a6afbc);
  --shadow:0 1px 2px rgba(24,21,19,0.06), 0 1px 3px rgba(24,21,19,0.04); --shadow-lg:0 4px 14px rgba(24,21,19,0.09), 0 2px 5px rgba(24,21,19,0.05); --shadow-xl:0 12px 40px rgba(24,21,19,0.14), 0 4px 16px rgba(24,21,19,0.08);
  --header-bg:rgba(246,245,243,0.60); --header-shine:rgba(255,255,255,0.70); --modal-bg:rgba(246,245,243,0.40);
}

/* ── Graphite / dark — near-black + cool silver ── */
.dark.theme-graphite {
  --bg:#101113; --bg2:#16181b; --surface:#1d2025; --surface2:#252931; --surface3:#2e333d;
  --border:#383e4a; --border2:#4c5563; --text:#ece8e2; --text2:#9a9388; --text3:#9a9388;
  --accent:#c0c8d4; --accent2:#e7ecf3; --accent-bg:rgba(192,200,212,0.12); --accent-border:rgba(192,200,212,0.30); --accent-glow:rgba(231,236,243,0.40); --accent-grad:linear-gradient(135deg, #9ea9b9, #e7ecf3);
  --shadow:0 1px 4px rgba(0,0,0,0.38), 0 1px 2px rgba(0,0,0,0.24); --shadow-lg:0 4px 18px rgba(0,0,0,0.44), 0 2px 7px rgba(0,0,0,0.26); --shadow-xl:0 12px 40px rgba(0,0,0,0.52), 0 4px 16px rgba(0,0,0,0.32);
  --header-bg:rgba(16,17,19,0.65); --header-shine:rgba(255,255,255,0.06); --modal-bg:rgba(16,17,19,0.45);
}

/* ── Bordeaux / light — cabernet + parchment ── */
.theme-bordeaux {
  --bg:#fbf6f4; --bg2:#f3e9e6; --surface:#ffffff; --surface2:#f7f0ee; --surface3:#eee4e1;
  --border:#e6d8d2; --border2:#cdb8af; --text:#201514; --text2:#624d4a; --text3:#624d4a;
  --accent:#7c2d3a; --accent2:#b55b72; --accent-bg:rgba(124,45,58,0.07); --accent-border:rgba(124,45,58,0.24); --accent-glow:rgba(181,91,114,0.34); --accent-grad:linear-gradient(135deg, #7c2d3a, #c76b84);
  --shadow:0 1px 2px rgba(32,21,20,0.06), 0 1px 3px rgba(32,21,20,0.04); --shadow-lg:0 4px 14px rgba(32,21,20,0.09), 0 2px 5px rgba(32,21,20,0.05); --shadow-xl:0 12px 40px rgba(32,21,20,0.14), 0 4px 16px rgba(32,21,20,0.08);
  --header-bg:rgba(251,246,244,0.60); --header-shine:rgba(255,255,255,0.70); --modal-bg:rgba(251,246,244,0.40);
}

/* ── Bordeaux / dark — deep burgundy + rose ── */
.dark.theme-bordeaux {
  --bg:#130c0e; --bg2:#1a1114; --surface:#21171b; --surface2:#281c21; --surface3:#312228;
  --border:#3b2a31; --border2:#523843; --text:#f4e8e3; --text2:#a88d89; --text3:#a88d89;
  --accent:#d16b87; --accent2:#f0b4c4; --accent-bg:rgba(209,107,135,0.11); --accent-border:rgba(209,107,135,0.30); --accent-glow:rgba(240,180,196,0.40); --accent-grad:linear-gradient(135deg, #b84e6b, #f0b4c4);
  --shadow:0 1px 4px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.25); --shadow-lg:0 4px 18px rgba(0,0,0,0.46), 0 2px 7px rgba(0,0,0,0.28); --shadow-xl:0 12px 40px rgba(0,0,0,0.54), 0 4px 16px rgba(0,0,0,0.34);
  --header-bg:rgba(19,12,14,0.65); --header-shine:rgba(255,255,255,0.06); --modal-bg:rgba(19,12,14,0.45);
}

/* ── Lagoon / light — sea glass + cyan ── */
.theme-lagoon {
  --bg:#f1fbfc; --bg2:#e3f6f8; --surface:#ffffff; --surface2:#effafa; --surface3:#e1f2f4;
  --border:#d4e9ec; --border2:#add5db; --text:#0f1c22; --text2:#48626b; --text3:#48626b;
  --accent:#06b6d4; --accent2:#14b8a6; --accent-bg:rgba(6,182,212,0.08); --accent-border:rgba(6,182,212,0.24); --accent-glow:rgba(20,184,166,0.36); --accent-grad:linear-gradient(135deg, #06b6d4, #2dd4bf);
  --shadow:0 1px 3px rgba(15,28,34,0.06), 0 1px 2px rgba(15,28,34,0.04); --shadow-lg:0 4px 16px rgba(15,28,34,0.09), 0 2px 6px rgba(15,28,34,0.05); --shadow-xl:0 12px 40px rgba(15,28,34,0.14), 0 4px 16px rgba(15,28,34,0.08);
  --header-bg:rgba(241,251,252,0.60); --header-shine:rgba(255,255,255,0.70); --modal-bg:rgba(241,251,252,0.40);
}

/* ── Lagoon / dark — deep teal-black + bright cyan ── */
.dark.theme-lagoon {
  --bg:#08171b; --bg2:#0d2026; --surface:#122930; --surface2:#16333c; --surface3:#1c3d47;
  --border:#24505c; --border2:#2e6674; --text:#e7fafc; --text2:#82b4bc; --text3:#82b4bc;
  --accent:#22d3ee; --accent2:#5eead4; --accent-bg:rgba(34,211,238,0.12); --accent-border:rgba(34,211,238,0.30); --accent-glow:rgba(94,234,212,0.42); --accent-grad:linear-gradient(135deg, #22d3ee, #5eead4);
  --shadow:0 1px 4px rgba(0,0,0,0.38), 0 1px 2px rgba(0,0,0,0.24); --shadow-lg:0 4px 18px rgba(0,0,0,0.44), 0 2px 7px rgba(0,0,0,0.26); --shadow-xl:0 12px 40px rgba(0,0,0,0.52), 0 4px 16px rgba(0,0,0,0.32);
  --header-bg:rgba(8,23,27,0.65); --header-shine:rgba(255,255,255,0.06); --modal-bg:rgba(8,23,27,0.45);
}

/* ── Orchid / light — lilac + magenta ── */
.theme-orchid {
  --bg:#fbf7ff; --bg2:#f2ecfa; --surface:#ffffff; --surface2:#f7f1fc; --surface3:#eee5f7;
  --border:#e5daf0; --border2:#ccb8e0; --text:#1e1527; --text2:#62506f; --text3:#62506f;
  --accent:#8b5cf6; --accent2:#d946ef; --accent-bg:rgba(139,92,246,0.08); --accent-border:rgba(139,92,246,0.24); --accent-glow:rgba(217,70,239,0.34); --accent-grad:linear-gradient(135deg, #8b5cf6, #d946ef);
  --shadow:0 1px 2px rgba(30,21,39,0.06), 0 1px 3px rgba(30,21,39,0.04); --shadow-lg:0 4px 14px rgba(30,21,39,0.09), 0 2px 5px rgba(30,21,39,0.05); --shadow-xl:0 12px 40px rgba(30,21,39,0.14), 0 4px 16px rgba(30,21,39,0.08);
  --header-bg:rgba(251,247,255,0.60); --header-shine:rgba(255,255,255,0.70); --modal-bg:rgba(251,247,255,0.40);
}

/* ── Orchid / dark — deep purple + lavender ── */
.dark.theme-orchid {
  --bg:#140f1c; --bg2:#1a1425; --surface:#221b2f; --surface2:#2a2140; --surface3:#32294c;
  --border:#3b3157; --border2:#51436f; --text:#f4ecff; --text2:#ab96c2; --text3:#ab96c2;
  --accent:#a78bfa; --accent2:#f0abfc; --accent-bg:rgba(167,139,250,0.12); --accent-border:rgba(167,139,250,0.30); --accent-glow:rgba(240,171,252,0.42); --accent-grad:linear-gradient(135deg, #a78bfa, #f0abfc);
  --shadow:0 1px 4px rgba(0,0,0,0.38), 0 1px 2px rgba(0,0,0,0.24); --shadow-lg:0 4px 18px rgba(0,0,0,0.44), 0 2px 7px rgba(0,0,0,0.26); --shadow-xl:0 12px 40px rgba(0,0,0,0.52), 0 4px 16px rgba(0,0,0,0.32);
  --header-bg:rgba(20,15,28,0.65); --header-shine:rgba(255,255,255,0.06); --modal-bg:rgba(20,15,28,0.45);
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL TRANSITIONS — two-tier system
   ════════════════════════════════════════════════════════════════ */

/* Slow crossfade — bg/border/color only (NOT transform) */
*,*::before,*::after{
  transition:
    background-color 0.32s cubic-bezier(0.4,0,0.2,1),
    border-color     0.32s cubic-bezier(0.4,0,0.2,1),
    color            0.32s cubic-bezier(0.4,0,0.2,1),
    box-shadow       0.32s cubic-bezier(0.4,0,0.2,1);
}

/* ── Light/dark mode crossfade (View Transition API) ──
   Overrides per-element transition timings so the entire page
   fades as a single unit — no more stepped/layered frames.
   Falls back to the per-element transitions above in unsupported browsers. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: ease;
    /* Prevent the default mix-blend-mode that can wash out dark mode */
    mix-blend-mode: normal;
  }
}

/* Interactive elements — must feel snappy */
.btn,.nav-item,.nav-icon-btn,.flyout-item,
.pcard,.stat-card,.nav-toggle,
/* legacy classes (active until step 4 HTML update) */
.nav-collapse-btn,.metric-pill,.portfolio-pill,.group-pill,.assign-item,
.campaign-row,.portfolio-card,.modal,.modal-overlay,
.toast,.bar-fill,.alloc-badge{
  transition:
    background-color 0.15s ease,
    border-color     0.15s ease,
    color            0.15s ease,
    box-shadow       0.20s ease,
    transform        0.15s ease !important;
}

/* Width transitions for bars/badges (longer, deliberate) */
.pcard-chevron,.bar-fill,.alloc-badge{
  transition:
    background-color 0.15s ease,
    border-color     0.15s ease,
    color            0.15s ease,
    width 0.7s cubic-bezier(0.22,1,0.36,1),
    opacity 0.15s ease;
}

html{overflow-x:hidden}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);min-height:100vh;font-size:13px;line-height:1.5}
::selection{background:var(--accent-bg);color:var(--text)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ── HEADER ── */
header{
  background:color-mix(in srgb,var(--header-bg) 98%,var(--bg) 2%);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  padding:0 16px;gap:10px;
  display:flex;align-items:center;
  height:56px;position:fixed;top:0;left:224px;right:0;z-index:200;
  transition:left 0.45s cubic-bezier(0.34,1.18,0.64,1) !important;
}
body.nav-collapsed header{left:0}
header::after{
  content:none;
}
.header-cluster{
  display:flex;align-items:center;gap:6px;min-width:0;
}
.header-cluster:empty{display:none}
.header-cluster-status{margin-right:2px}
.header-cluster-tools{gap:4px}
.header-control{
  height:var(--control-size);
  min-height:var(--control-size);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 10px;border:none;border-radius:10px;
  background:transparent;color:var(--text2);
  font-family:var(--font-ui);font-size:12px;font-weight:600;
  letter-spacing:0.01em;cursor:pointer;white-space:nowrap;
  user-select:none;line-height:1;
}
.header-control:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface2));color:var(--text)}
.header-control.open,
.header-control.active,
.header-control[aria-pressed='true']{
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  color:var(--accent2);
}
.header-control:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);
}
.header-control svg{flex-shrink:0}
.header-icon-btn{
  width:var(--control-size);
  padding:0;
  flex-shrink:0;
}
/* ── Settings sync indicator ── */
.daterange-sync-wrap{position:relative;display:inline-flex;align-items:center}
.settings-sync-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--amber);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 16%,transparent);
  animation:syncPulse 1.5s ease-in-out infinite;
  position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);
  pointer-events:none;
}
@keyframes syncPulse{
  0%,100%{opacity:1}
  50%{opacity:0.35}
}
/* ── ROASt logo lockup ── */
.logo-lockup{display:flex;align-items:center;flex-shrink:0}
.logo-wordmark{
  font-family:'Cabinet Grotesk',sans-serif;font-size:28px;font-weight:900;
  letter-spacing:-0.03em;line-height:1;display:flex;align-items:baseline;flex-shrink:0;
}
.logo-roas{color:var(--text)}
.logo-t{color:var(--accent)}
.logo-divider{width:2px;height:24px;background:var(--text);opacity:0.15;flex-shrink:0;margin:0 14px}
.logo-tagline{display:flex;flex-direction:column;gap:2px}
.logo-tagline-top{
  font-family:'Cabinet Grotesk',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:-0.01em;color:var(--text);line-height:1.25;white-space:nowrap;
}
.logo-tagline-top em{font-style:normal;color:var(--accent)}
.logo-tagline-url{
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text3);opacity:0.4;
}
.logo-badge{margin-left:0;display:flex;align-items:center;flex-shrink:0}
.logo-badge-inner{
  border:1.5px solid var(--text);opacity:0.45;
  padding:3px 10px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--text);
  white-space:nowrap;
}
/* .client-switcher-pill kept for Settings → ClientManagementPanel */
.client-switcher-pill{
  flex-shrink:0;
  padding:4px 8px;border-radius:999px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text2);font-size:11px;font-weight:700;
  text-transform:capitalize;
}
.client-switcher-pill.demo{
  background:rgba(var(--amber-ch),0.12);
  border-color:rgba(var(--amber-ch),0.28);
  color:var(--amber);
}
.header-right{display:flex;align-items:center;gap:10px}

/* ── Trial banner ──────────────────────────────────────────────────────── */
.trial-banner{
  display:inline-flex;align-items:center;
  height:28px;padding:0 11px;border-radius:999px;
  font-family:var(--font-ui);font-size:11px;font-weight:600;
  letter-spacing:0.01em;
  white-space:nowrap;flex-shrink:0;
  cursor:pointer;
  transition:background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.trial-banner:hover{transform:translateY(-1px)}
.trial-banner:active{transform:translateY(0)}
.trial-banner--amber{
  background:color-mix(in srgb,var(--amber) 12%,transparent);
  color:var(--amber);
  border:1px solid color-mix(in srgb,var(--amber) 22%,transparent);
}
.trial-banner--red{
  background:color-mix(in srgb,var(--red) 12%,transparent);
  color:var(--red);
  border:1px solid color-mix(in srgb,var(--red) 22%,transparent);
}

/* ── Notification bell ──────────────────────────────────────────────────── */
.notif-bell-wrap{position:relative;flex-shrink:0}
.notif-bell{
  position:relative;
  color:var(--text2);
}
.notif-bell.active{color:var(--accent2)}
.notif-badge{
  position:absolute;top:1px;right:1px;
  min-width:15px;height:15px;border-radius:999px;padding:0 4px;
  background:var(--red);color:#fff;
  font-size:9px;font-weight:700;line-height:15px;text-align:center;
  pointer-events:none;
  box-shadow:0 0 0 2px var(--bg);
}

/* ── Notification center panel ──────────────────────────────────────────── */
.nc-panel{
  position:fixed;
  top:60px;right:16px;
  width:360px;max-height:480px;
  display:flex;flex-direction:column;
  z-index:300;
  animation:headerPopoverIn 0.15s ease;
}
.header-popover,
.client-dropdown-popover,
.user-popover,
.nc-panel{
  background:var(--modal-bg);
  border:1px solid var(--border2);
  border-radius:14px;
  box-shadow:var(--shadow-xl);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.header-popover::before,
.client-dropdown-popover::before,
.user-popover::before,
.nc-panel::before{
  content:'';
  position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
  pointer-events:none;
}
/* ── Header popover shared backdrop ───────────────────────────────────────── */
body.header-popover-open::after{
  content:'';position:fixed;inset:0;z-index:290;
  background:rgba(0,0,0,0.10);
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
  pointer-events:none;
  animation:headerBackdropIn 0.15s ease;
}
@keyframes headerBackdropIn{from{opacity:0}to{opacity:1}}

.nc-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.nc-title{font-size:13px;font-weight:700;color:var(--text)}
.nc-mark-all-read{
  font-size:12px;color:var(--accent);background:none;border:none;
  cursor:pointer;padding:0;font-weight:500;
}
.nc-mark-all-read:hover{color:var(--accent2)}
.nc-body{
  flex:1;overflow-y:auto;
  scrollbar-width:none;
}
.nc-body::-webkit-scrollbar{display:none}
.nc-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:40px 20px;
  color:var(--text3);font-size:13px;
}
.nc-item{
  position:relative;
  padding:12px 40px 12px 14px;
  border-left:2px solid var(--border2);
  border-bottom:1px solid var(--border);
  cursor:default;
  transition:background 0.1s;
}
.nc-item:last-child{border-bottom:none}
.nc-item:hover{background:var(--surface2)}
.nc-item--unread{background:color-mix(in srgb,var(--accent) 4%,transparent);cursor:pointer}
.nc-item--unread:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.nc-item-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.nc-item-title{font-size:12px;font-weight:600;color:var(--text);line-height:1.35}
.nc-item-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);flex-shrink:0;
}
.nc-item-meta{display:flex;align-items:center;gap:6px}
.nc-item-time{font-size:11px;color:var(--text3)}
.nc-item-dismiss{
  position:absolute;top:10px;right:10px;
  width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;
  color:var(--text3);opacity:0;transition:opacity 0.15s,background 0.15s;
}
.nc-item:hover .nc-item-dismiss{opacity:1}
.nc-item-dismiss:hover{background:var(--surface3);color:var(--text)}
.nc-footer{
  border-top:1px solid var(--border);
  padding:10px 16px;
  flex-shrink:0;
}
.nc-footer-link{
  font-size:12px;color:var(--text3);background:none;border:none;
  cursor:pointer;padding:0;font-weight:500;
}
.nc-footer-link:hover{color:var(--accent)}

/* ── Notification settings (SettingsTab) ────────────────────────────────── */
.notif-settings-section{padding:0 0 8px}
.notif-settings-desc{
  font-size:13px;color:var(--text3);margin-bottom:16px;
  max-width:600px;line-height:1.5;
}
.notif-settings-table{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;
}
.notif-settings-thead{
  display:grid;
  grid-template-columns:1fr 80px;
  padding:8px 16px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.05em;
}
.notif-settings-row{
  display:grid;
  grid-template-columns:1fr 80px;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.notif-settings-row:last-child{border-bottom:none}
.notif-settings-row:hover{background:var(--surface2)}
.notif-settings-row-label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.notif-settings-row-desc{font-size:12px;color:var(--text3);line-height:1.4}
.notif-settings-col-channel{display:flex;align-items:center;justify-content:center}

/* Toggle switch (notifications settings) */
.notif-toggle{
  width:34px;height:20px;border-radius:999px;
  background:var(--surface3);border:1px solid var(--border2);
  cursor:pointer;position:relative;transition:background 0.2s,border-color 0.2s;
  padding:0;flex-shrink:0;
}
.notif-toggle.on{
  background:var(--accent);
  border-color:var(--accent);
}
.notif-toggle:disabled{opacity:0.5;cursor:default}
.notif-toggle-thumb{
  position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:50%;
  background:#fff;transition:transform 0.2s cubic-bezier(0.34,1.18,0.64,1);
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.notif-toggle.on .notif-toggle-thumb{transform:translateX(14px)}

/* ── Slack channel management (notif-channels-*) ─────────────────────── */
.notif-channels-wrap{
  margin-bottom:24px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;
}
.notif-channels-header{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  background:var(--surface2);
  border-bottom:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--text);
}
.notif-channels-subdesc{
  font-size:12px;color:var(--text3);line-height:1.5;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.notif-channels-list{border-bottom:1px solid var(--border)}
.notif-channel-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;
  border-bottom:1px solid var(--border);
}
.notif-channel-row:last-child{border-bottom:none}
.notif-channel-info{
  flex:1;min-width:0;
  display:flex;align-items:baseline;gap:10px;
}
.notif-channel-label{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.notif-channel-url{
  font-size:11px;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.notif-channel-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.notif-channel-btn{
  font-size:12px;font-weight:500;
  padding:4px 10px;border-radius:6px;
  background:var(--surface2);border:1px solid var(--border);
  color:var(--text);cursor:pointer;transition:background 0.15s;
}
.notif-channel-btn:hover:not(:disabled){background:var(--surface3)}
.notif-channel-btn:disabled{opacity:0.5;cursor:default}
.notif-channel-btn--danger{color:var(--red)}
.notif-channel-btn--danger:hover:not(:disabled){background:color-mix(in srgb,var(--red) 8%,transparent)}
.notif-channel-test-badge{
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;
}
.notif-channel-test-badge--ok{
  background:color-mix(in srgb,var(--green) 15%,transparent);
  color:var(--green);
}
.notif-channel-test-badge--err{
  background:color-mix(in srgb,var(--red) 12%,transparent);
  color:var(--red);
}
.notif-channel-add{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;flex-wrap:wrap;
}
.notif-channel-input{
  height:32px;font-size:13px;padding:0 10px;
  border-radius:7px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);
  min-width:130px;flex-shrink:0;
  transition:border-color 0.15s;
}
.notif-channel-input:focus{outline:none;border-color:var(--accent)}
.notif-channel-input--url{flex:1;min-width:260px}
.notif-channel-save-btn{white-space:nowrap;flex-shrink:0}
.notif-channel-error{
  font-size:12px;color:var(--red);
  padding:4px 16px 10px;
}

/* ── Identity zone — client dropdown + user avatar, hard right ─────────── */
.header-identity{
  display:flex;align-items:center;gap:4px;
  padding-left:10px;
  border-left:1px solid color-mix(in srgb,var(--border) 75%,transparent);
  margin-left:2px;
  flex-shrink:0;
}

/* ── Client status dot ──────────────────────────────────────────────────── */
.client-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--green);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 18%,transparent);
}
.client-dot.demo{
  background:var(--amber);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 18%,transparent);
}

/* ── Client dropdown ────────────────────────────────────────────────────── */
.client-dropdown{position:relative;flex-shrink:0}
.client-dropdown-trigger{
  display:flex;align-items:center;gap:7px;
  padding:0 10px;border-radius:10px;
  color:var(--text);
  font-size:12px;font-weight:600;font-family:var(--font-ui);
  white-space:nowrap;
}
.client-dropdown-trigger:disabled{opacity:0.7}
.client-dropdown-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:152px;
}
.client-dropdown-demo-badge{
  font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--amber);padding:2px 5px;
  background:color-mix(in srgb,var(--amber) 10%,transparent);
  border-radius:999px;flex-shrink:0;
}
.client-dropdown-chevron{
  color:var(--text3);flex-shrink:0;
  transition:transform 0.18s ease;
}
.client-dropdown-trigger.open .client-dropdown-chevron{transform:rotate(180deg)}

/* Client dropdown popover */
.client-dropdown-popover{
  position:absolute;top:calc(100% + 6px);right:0;z-index:500;
  min-width:210px;max-width:290px;
  padding:6px;
  animation:headerPopoverIn 0.14s cubic-bezier(0.34,1.18,0.64,1);
}
.client-dropdown-item{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:9px 10px;border-radius:10px;border:none;
  background:transparent;color:var(--text);
  font-size:12px;font-weight:500;font-family:var(--font-ui);
  cursor:pointer;text-align:left;
  transition:background 0.1s ease;
}
.client-dropdown-item:hover{background:var(--surface2)}
.client-dropdown-item.active{
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-weight:600;
}
.client-dropdown-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-dropdown-item-meta{display:flex;align-items:center;gap:4px;flex-shrink:0}
.client-dropdown-item-badge{
  font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
  padding:2px 5px;border-radius:999px;
  background:var(--surface2);color:var(--text3);border:1px solid var(--border);
}
.client-dropdown-item-badge.demo{
  background:color-mix(in srgb,var(--amber) 11%,transparent);
  color:var(--amber);border-color:color-mix(in srgb,var(--amber) 24%,transparent);
}
.client-dropdown-check{color:var(--accent);flex-shrink:0}

/* ── User avatar button ─────────────────────────────────────────────────── */
.user-avatar-wrap{position:relative;flex-shrink:0}
.user-avatar{
  width:var(--control-size);height:var(--control-size);border-radius:50%;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:none;
  color:var(--accent2);
  font-size:11px;font-weight:800;font-family:var(--font-ui);letter-spacing:0.03em;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:box-shadow 0.15s ease,background 0.15s ease,color 0.15s ease;
}
.user-avatar:hover,.user-avatar.open{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent);
  background:color-mix(in srgb,var(--accent) 18%,transparent);
}

/* User popover */
.user-popover{
  position:absolute;top:calc(100% + 8px);right:0;z-index:500;
  width:260px;
  overflow:hidden;
  animation:headerPopoverIn 0.14s cubic-bezier(0.34,1.18,0.64,1);
}
.user-popover-header{
  display:flex;align-items:center;gap:11px;
  padding:14px 14px 8px;
}
.user-popover-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:none;
  color:var(--accent2);
  font-size:12px;font-weight:800;font-family:var(--font-ui);
  display:flex;align-items:center;justify-content:center;
}
.user-popover-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.user-popover-name{
  font-size:13px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.user-popover-email{
  font-size:11px;color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.user-popover-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:2px 14px 12px;
}
.user-popover-role-badge{
  display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:999px;
  background:var(--surface2);border:1px solid var(--border);
  font-size:10px;font-weight:700;color:var(--text2);text-transform:capitalize;
}
.user-popover-role-badge.super{
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  border-color:color-mix(in srgb,var(--accent) 26%,transparent);
  color:var(--accent);
}
.user-popover-client-row{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text2);
}
.user-popover-client-name{font-weight:500}
.user-popover-divider{height:1px;background:var(--border);margin:2px 0}
.user-popover-items{padding:5px}
.user-popover-item{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:10px;border:none;
  background:transparent;color:var(--text);
  font-size:12px;font-weight:500;font-family:var(--font-ui);
  cursor:pointer;text-align:left;text-decoration:none;
  transition:background 0.1s ease;
}
.user-popover-item:hover{background:var(--surface2)}
.user-popover-item.danger{color:var(--red)}
.user-popover-item.danger:hover{background:var(--red-bg)}
.user-popover-item svg{color:var(--text3);flex-shrink:0}
.user-popover-item.danger svg{color:var(--red)}

@keyframes headerPopoverIn{
  from{opacity:0;transform:scale(0.96) translateY(-4px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* Nav toggle row (inside sidebar expanded state — collapse button) */
/* Nav header area — branding + collapse button (Notion-style full-height nav) */
.nav-header-area{
  height:36px;flex-shrink:0;
  display:flex;align-items:center;
  padding:0 14px;gap:8px;
  opacity:1;transition:opacity 0.15s ease !important;
}
.nav-sidebar.collapsed .nav-header-area{opacity:0;pointer-events:none}
.nav-logo-wordmark{
  font-family:var(--font-display);font-size:22px;font-weight:900;
  letter-spacing:-0.03em;line-height:1;
}

/* Logo lockup always visible — slides with header */
.logo-lockup{
  opacity:1;pointer-events:all;
}

@media (max-width: 1200px){
  .client-dropdown-name{max-width:110px}
}

@media (max-width: 960px){
  .client-dropdown-demo-badge{display:none}
  .header-identity{margin-left:4px;padding-left:8px}
}

.nav-toggle-row{
  display:flex;align-items:center;justify-content:flex-end;
  padding:8px 10px;border-bottom:1px solid var(--border);
  flex-shrink:0;min-height:44px;
}
.nav-sidebar-toggle{
  width:28px;height:28px;border-radius:8px;
  background:transparent;border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text3);font-size:13px;
  flex-shrink:0;transition:background 0.15s,color 0.15s,border-color 0.15s;
}
.nav-sidebar-toggle:hover{background:var(--surface3);color:var(--text2)}
/* Expand toggle (inside icon-view in collapsed state) */
.nav-icon-toggle{
  display:flex;align-items:center;justify-content:center;
  width:44px;cursor:pointer;
}

/* ── Nav Help/Tour button ── */
.nav-help-row{
  margin-top:auto;padding:12px 8px 10px;
  border-top:1px solid var(--border);
}
.nav-help-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 10px;border-radius:8px;border:none;
  background:transparent;cursor:pointer;
  font-family:var(--font-ui);font-size:12px;font-weight:500;
  color:var(--text3);transition:background 0.15s,color 0.15s;
}
.nav-help-btn:hover{background:var(--surface3);color:var(--text2)}
.nav-help-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid currentColor;font-size:11px;font-weight:700;
  flex-shrink:0;
}
.nav-help-label{white-space:nowrap}

/* Account pill (kept from old design) */
.account-pill{
  display:flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--border2);
  padding:5px 12px 5px 8px;border-radius:20px;font-size:11px;color:var(--text2);
}
.live-dot{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 6px var(--green);animation:glow 2s infinite}
@keyframes glow{0%,100%{opacity:1;box-shadow:0 0 6px var(--green)}50%{opacity:0.6;box-shadow:0 0 2px var(--green)}}

/* ── APPEARANCE PICKER ── */
.appearance-picker{position:relative;flex-shrink:0}
.appearance-trigger{position:relative}
.appearance-current{
  position:absolute;top:6px;left:6px;
  width:7px;height:7px;border-radius:50%;
  box-shadow:0 0 0 2px var(--bg);
}
.appearance-popover{
  position:absolute;top:calc(100% + 8px);right:0;z-index:500;
  width:304px;padding:14px;
  animation:headerPopoverIn 0.16s cubic-bezier(0.34,1.18,0.64,1);
}
.appearance-popover-head{
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border);
}
.appearance-popover-title{
  font-size:13px;font-weight:700;color:var(--text);line-height:1.2;
}
.appearance-popover-sub{
  margin-top:4px;font-size:11px;color:var(--text3);
}
.appearance-section + .appearance-section{margin-top:14px}
.appearance-section-label{
  margin-bottom:8px;font-size:10px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text3);
}
.appearance-mode-seg{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
}
.appearance-mode-btn{
  height:34px;display:flex;align-items:center;justify-content:center;gap:6px;
  border:none;border-radius:10px;background:var(--surface2);color:var(--text2);
  font-family:var(--font-ui);font-size:12px;font-weight:600;cursor:pointer;
}
.appearance-mode-btn:hover:not(:disabled){background:var(--surface3);color:var(--text)}
.appearance-mode-btn.active{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent2);
}
.appearance-mode-btn:disabled{opacity:0.45;cursor:not-allowed}
.appearance-note{
  margin-top:8px;font-size:11px;line-height:1.45;color:var(--text3);
}
.appearance-theme-list{
  display:flex;flex-direction:column;gap:2px;
}
.appearance-theme-option{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:7px 10px;border:none;border-radius:10px;
  background:transparent;color:var(--text);
  text-align:left;cursor:pointer;
}
.appearance-theme-option:hover{background:var(--surface2)}
.appearance-theme-option.active{
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
.appearance-theme-swatch{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--border) 80%,transparent);
}
.appearance-theme-copy{
  display:flex;flex-direction:row;align-items:center;gap:6px;min-width:0;flex:1;
}
.appearance-theme-name{
  font-size:12px;font-weight:600;color:var(--text);
}
.appearance-theme-meta{
  font-size:10px;color:var(--text3);
}
.appearance-theme-check{color:var(--accent2);flex-shrink:0}

/* ════════════════════════════════════════════════════════════════
   LEFT NAV SIDEBAR
   ════════════════════════════════════════════════════════════════ */

.nav-sidebar{
  position:fixed;left:12px;top:12px;bottom:12px;width:200px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--bg2)) 0%,var(--bg2) 40%);
  border:1px solid var(--border);border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,0.10),0 1px 6px rgba(0,0,0,0.06);
  z-index:201;display:flex;flex-direction:column;
  transition:width 0.45s cubic-bezier(0.34,1.18,0.64,1),
             top 0.35s cubic-bezier(0.34,1.18,0.64,1) !important;
  overflow:visible; /* CRITICAL — allows flyout to escape the sidebar */
}
.nav-sidebar.collapsed{
  width:52px;top:68px;z-index:100;
}

/* Expanded labels hide when collapsed */
.nav-item-label{display:flex;align-items:center;gap:7px;overflow:hidden;opacity:1}
.nav-sidebar.collapsed .nav-item-label{opacity:0;pointer-events:none;transition:opacity 0.15s ease !important}

/* Collapse button (inside sidebar top bar — legacy until step 4) */
.nav-sidebar-top{
  display:flex;justify-content:flex-end;align-items:center;
  padding:10px;
  flex-shrink:0;min-height:44px;
}
.nav-collapse-btn{
  width:26px;height:26px;border-radius:6px;flex-shrink:0;
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text3);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.nav-collapse-btn:hover{border-color:var(--accent);color:var(--text);background:var(--surface2)}
.nav-sidebar.collapsed .nav-collapse-btn{transform:rotate(180deg)}

/* Nav section wrap — height animated by springAnimate() */
.nav-items-wrap{overflow:hidden}
.nav-section.collapsed-section .nav-items-wrap{height:0}

/* Nav section header padding */
.nav-section{padding-top:8px}

/* Nav items */
.nav-items{display:flex;flex-direction:column;padding:8px 0;gap:1px}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 14px;margin:1px 4px;
  font-size:12px;font-weight:500;color:var(--text2);
  cursor:pointer;white-space:nowrap;
  border-radius:8px;position:relative;
  user-select:none;
}
.nav-item:hover{color:var(--text);background:var(--surface3)}
.nav-item.active{
  color:var(--accent2);font-weight:600;
}
/* Sliding nav highlight — positioned by JS, background + bar owned here */
#nav-slide-indicator{
  position:absolute;top:0;left:4px;right:4px;
  border-radius:8px;background:var(--accent-bg);
  pointer-events:none;will-change:transform;
  transition:transform 0.3s cubic-bezier(0.34,1.18,0.64,1),height 0.3s cubic-bezier(0.34,1.18,0.64,1),opacity 0.15s ease;
}
#nav-slide-indicator::before{
  content:'';position:absolute;
  left:-4px;top:5px;bottom:5px;
  width:3px;border-radius:0 2px 2px 0;
  background:var(--accent);
}
.nav-sidebar.collapsed #nav-slide-indicator{display:none}
.nav-item-icon{font-size:13px;flex-shrink:0;width:15px;display:flex;align-items:center;justify-content:center}
/* Nav icon — fixed width so labels align regardless of symbol width */
.nav-icon{width:16px;flex-shrink:0;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:transform 0.2s ease}
.nav-item:hover .nav-icon:not(.nav-icon-flume){transform:scale(1.22);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.flyout-icon:not(.nav-icon-flume){transition:transform 0.2s ease}
.flyout-item:hover .flyout-icon:not(.nav-icon-flume){transform:scale(1.22);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.tab-badge{
  background:var(--surface2);color:var(--text3);
  padding:1px 6px;border-radius:10px;font-size:10px;
}
.nav-item.active .tab-badge{background:var(--accent-bg);color:var(--accent2)}

/* ── NuPhy — solid nav active block + teal hover ── */
.theme-nuphy .nav-item:hover{background:rgba(61,191,184,0.18);color:var(--text)}
.theme-nuphy #nav-slide-indicator{background:var(--accent)}
.theme-nuphy #nav-slide-indicator::before{background:rgba(255,255,255,0.28)}
.theme-nuphy .nav-item.active{color:#fff}
.theme-nuphy .nav-item.active .tab-badge{background:rgba(0,0,0,0.20);color:#fff}

/* Collapsed icon tooltip */
.nav-sidebar.collapsed .nav-item{position:relative}
.nav-sidebar.collapsed .nav-item::after{
  content:attr(data-label);
  display:none;
  position:absolute;
  left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:var(--surface);color:var(--text);
  padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;
  white-space:nowrap;border:1px solid var(--border2);
  box-shadow:var(--shadow-lg);pointer-events:none;z-index:500;
}
.nav-sidebar.collapsed .nav-item:hover::after{display:block}

/* ── NEW sidebar elements — CSS ready, HTML added in step 4 ── */

/* Nav section structure */
.nav-section-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px 3px;cursor:pointer;border-radius:6px;margin:0 4px;
  user-select:none;
}
.nav-section-header:hover{background:var(--surface3)}
.nav-section-label{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.09em;color:var(--text3);
}
.nav-section-chevron{
  color:var(--text3);font-size:20px;
  transition:transform 0.5s cubic-bezier(0.34,1.72,0.64,1) !important;
}
.nav-section.collapsed-section .nav-section-chevron{transform:rotate(-90deg)}
.nav-section.active-section .nav-section-label{color:var(--accent2)}
.nav-section.active-section .nav-section-chevron{color:var(--accent)}

/* Staggered item reveal */
.nav-items-clip .nav-item:nth-child(1){transition-delay:0.04s}
.nav-items-clip .nav-item:nth-child(2){transition-delay:0.08s}
.nav-items-clip .nav-item:nth-child(3){transition-delay:0.12s}
.nav-section.collapsed-section .nav-items-clip .nav-item{transition-delay:0s !important}

/* Expanded / collapsed views */
.nav-expanded{
  display:flex;flex-direction:column;
  flex:1;min-height:0;position:relative;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;
  opacity:1;transition:opacity 0.2s ease !important;
}
.nav-expanded:hover{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text3) 25%,transparent) transparent}
.nav-sidebar.collapsed .nav-expanded{opacity:0;pointer-events:none}
.nav-icon-view{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:4px 0;opacity:0;pointer-events:none;
  transition:opacity 0.2s ease !important;
  position:absolute;top:0;left:0;right:0;
}
.nav-sidebar.collapsed .nav-icon-view{opacity:1;pointer-events:all}

/* Section icon button */
.nav-section-icon{
  position:relative;width:44px;
  display:flex;flex-direction:column;align-items:center;
}
.nav-icon-btn{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text3);font-size:15px;position:relative;
}
.nav-icon-btn:hover{background:var(--surface3);color:var(--text2)}
.nav-icon-btn.active{background:var(--accent-bg);color:var(--accent)}
.nav-icon-btn.active::before{
  content:'';position:absolute;
  left:-8px;top:8px;bottom:8px;
  width:3px;border-radius:0 2px 2px 0;background:var(--accent);
}
.nav-icon-divider{width:24px;height:1px;background:var(--border);margin:2px auto}

/* Flyout panel */
.flyout{
  position:absolute;
  left:calc(100% + 8px);top:0;
  min-width:160px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--surface)) 0%,var(--surface) 50%);
  border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-xl);
  padding:6px;z-index:300;
  opacity:0;pointer-events:none;
  transform:translateX(-10px) scale(0.97);
  transform-origin:left center;
  transition:
    opacity   0.22s cubic-bezier(0.22,1,0.36,1),
    transform 0.38s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.nav-section-icon.open .flyout{
  opacity:1;pointer-events:all;
  transform:translateX(0) scale(1);
}
.flyout-label{
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.10em;
  color:var(--text3);padding:4px 8px 6px;
}
.flyout-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;font-size:12px;font-weight:500;
  color:var(--text2);border-radius:8px;
  cursor:pointer;position:relative;white-space:nowrap;
}
.flyout-item:hover{background:var(--surface2);color:var(--text)}
.flyout-item.active{background:var(--accent-bg);color:var(--accent2);font-weight:600}
.flyout-item.active::before{
  content:'';position:absolute;
  left:-6px;top:6px;bottom:6px;
  width:3px;border-radius:0 2px 2px 0;background:var(--accent);
}
.flyout-icon{width:14px;text-align:center;font-size:12px;flex-shrink:0}

/* ════════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ════════════════════════════════════════════════════════════════ */

main{
  padding:28px 32px;
  padding-top:calc(56px + 28px); /* header height + gap */
  margin-left:224px;
  transition:margin-left 0.45s cubic-bezier(0.34,1.18,0.64,1) !important;
}
body.nav-collapsed main{margin-left:76px}
#react-root{display:contents}
.panel{display:none}
.panel.active{display:block;animation:panelIn 0.22s cubic-bezier(0.22,1,0.36,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Tab switch fade-out: keeps panel visible while opacity transitions to 0 */
.panel.panel-switching-out{display:block !important;opacity:0 !important;animation:none !important;transition:opacity 0.1s ease !important}

/* ── PAGE HEADER ── */
.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px}
.page-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--text);letter-spacing:-0.03em;line-height:1}
.page-sub{font-size:13px;color:var(--text2);margin-top:3px}

/* ── TOAST ── */
.toast{
  position:fixed;top:68px;left:50%;
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border2);
  color:var(--green);padding:10px 16px;
  border-radius:10px;font-size:12px;
  box-shadow:var(--shadow-xl);z-index:9999;
  transform:translateX(-50%) translateY(-8px);opacity:0;
  transition:all 0.22s cubic-bezier(0.22,1,0.36,1) !important;
  pointer-events:none;max-width:520px;white-space:normal;text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.success .toast-icon{color:var(--green)}
.toast.info .toast-icon{color:var(--accent2)}
.toast.warning .toast-icon{color:var(--amber)}
.toast-icon{font-size:14px;flex-shrink:0}

/* ── EMPTY STATES ── */
.empty-state{text-align:center;padding:52px 24px;color:var(--text3)}
.empty-icon{font-size:36px;margin-bottom:14px;opacity:0.5}
.empty-title{font-family:var(--font-display);font-size:18px;color:var(--text2);margin-bottom:6px}
.empty-sub{font-size:12px;line-height:1.6}

/* ── STAT CARDS ── */
/* ── Stat grid — flex for expand/compact animation ── */
.stat-grid{
  display:flex;align-items:stretch;flex-wrap:wrap;
  gap:14px;margin-bottom:24px;
}
/* Shared: entry animation + flex transition */
.stat-card{
  position:relative;
  flex-grow:1;flex-shrink:1;flex-basis:0%;min-width:0;
  opacity:0;transform:translateY(12px);
  animation:card-in 0.45s cubic-bezier(0.22,1,0.36,1) forwards;
  transition:box-shadow 0.15s;
}
.stat-card:nth-child(2){animation-delay:0.05s}
.stat-card:nth-child(3){animation-delay:0.12s}
.stat-card:nth-child(4){animation-delay:0.19s}
.stat-card:nth-child(5){animation-delay:0.26s}
@keyframes card-in{to{opacity:1;transform:translateY(0)}}

/* ── Hero card (Monthly Budget) ── */
.stat-hero{
  flex-grow:1.6;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,var(--stat-hero-bg)) 0%,var(--stat-hero-bg) 45%);
  border:1px solid var(--stat-hero-border);
  border-radius:14px;padding:28px 26px;
  box-shadow:0 4px 24px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04);
}
.stat-hero:hover{box-shadow:0 6px 28px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.06)}
.stat-hero-stripe{display:none}
.stat-hero-glow{
  position:absolute;top:-60px;right:-60px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--accent) 14%, transparent) 0%,transparent 70%);
  pointer-events:none;
}
.stat-hero .stat-label{
  font-family:var(--font-ui);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.09em;
  color:var(--stat-hero-label);margin-bottom:10px;
}
.stat-hero .stat-value{
  font-family:var(--font-mono);font-size:52px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1;
  color:var(--stat-hero-value);margin-bottom:8px;
}
.stat-hero-subtitle{
  font-family:var(--font-ui);font-size:13px;
  color:var(--stat-hero-sub);margin-bottom:14px;
}
.stat-hero-spark-wrap{display:none}

/* ── Mini cards (metric graph cards) ── */
.stat-mini{
  background:linear-gradient(180deg,color-mix(in srgb,var(--metric-accent, var(--accent)) 5%,var(--surface)) 0%,var(--surface) 45%);
  border:1px solid var(--border);
  border-radius:14px;padding:18px 18px 14px;
  box-shadow:0 4px 24px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.04);
  cursor:pointer;
  transition:box-shadow 0.15s,transform 0.15s;
  display:flex;flex-direction:column;
}
.stat-mini:hover{box-shadow:0 6px 28px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.06);transform:translateY(-1px)}

/* ── Expand/compact resting states (spring drives all animated props) ── */
.stat-mini.stat-expanded{flex-grow:3;cursor:default;padding-bottom:22px}
.stat-mini.stat-expanded:hover{transform:none}
.stat-mini.stat-compacted{flex-grow:0.5;overflow:hidden}
.stat-mini.stat-compacted:hover{transform:translateY(-1px)}
.stat-mini.stat-compacted .stat-value{font-size:16px}
.stat-mini.stat-compacted .stat-delta{opacity:0;pointer-events:none}
.stat-mini.stat-compacted .stat-chart-container{flex:0 0 0px;height:0;margin-top:0;opacity:0;pointer-events:none}
.stat-mini.stat-compacted .stat-metric-btn{opacity:0;pointer-events:none}

/* ── Metric label row ── */
.stat-metric-row{
  display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-shrink:0;
}
.stat-mini .stat-label{
  font-family:var(--font-ui);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.09em;
  color:var(--text3);margin-bottom:0;
}
.stat-metric-btn{
  background:none;border:none;color:var(--text3);cursor:pointer;
  padding:2px;border-radius:4px;display:flex;align-items:center;
  transition:color 0.12s,background 0.12s;flex-shrink:0;
}
.stat-metric-btn:hover{color:var(--text);background:var(--surface2)}
.stat-mini .stat-value{
  font-family:var(--font-mono);font-size:24px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1;
  color:var(--text);margin-bottom:8px;
}
/* Delta — pill badge, colour from --metric-accent */
.stat-delta{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  padding:2px 7px;border-radius:999px;
  color:var(--metric-accent, var(--accent));
  background:color-mix(in srgb, var(--metric-accent, var(--accent)) 12%, transparent);
  margin-bottom:8px;
}

/* ── Metric dropdown (portal) ── */
.stat-metric-dropdown{
  z-index:600;min-width:148px;padding:6px;
  display:flex;flex-direction:column;gap:1px;
  position:relative;
  background:var(--modal-bg);border:1px solid var(--border2);
  border-radius:14px;box-shadow:var(--shadow-xl);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:headerPopoverIn 0.14s cubic-bezier(0.34,1.18,0.64,1);
}
.stat-metric-dropdown::before{
  content:'';
  position:absolute;top:0;left:14px;right:14px;height:1px;z-index:1;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent), transparent);
  pointer-events:none;
}
.stat-metric-opt{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:7px;cursor:pointer;
  border:none;background:none;width:100%;text-align:left;
  font-size:12px;font-family:var(--font-ui);
  color:var(--text2);transition:background 0.1s,color 0.1s;
}
.stat-metric-opt:hover{background:var(--surface2);color:var(--text)}
.stat-metric-opt.active{color:var(--text);font-weight:600}
.stat-metric-opt-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── Expanded detail row (prior period + daily avg) ── */
.stat-expanded-detail{
  display:flex;align-items:center;gap:8px;
  margin-bottom:4px;flex-shrink:0;
  animation:statDetailIn 0.25s ease both;
}
@keyframes statDetailIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.stat-detail-item{display:flex;align-items:baseline;gap:4px}
.stat-detail-label{font-family:var(--font-ui);font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3)}
.stat-detail-value{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums}
.stat-detail-sep{width:1px;height:12px;background:var(--border);flex-shrink:0}

/* ── Graph card chart area ── */
.stat-chart-container{
  position:relative;flex:1 1 0;min-height:0;width:100%;cursor:crosshair;margin-top:6px;overflow:visible;
}
/* Campaign stat grid has no hero card to set row height — give chart a fixed height */
.cam-stat-grid .stat-chart-container{flex:none;height:80px}
.cam-stat-grid .stat-expanded .stat-chart-container{flex:1 1 0;height:auto;min-height:20px}
.stat-chart-container svg{width:100%;height:100%;overflow:visible;display:block}
.stat-crosshair{position:absolute;top:0;bottom:0;width:1px;background:var(--border2);pointer-events:none;opacity:0;transition:opacity 0.15s}
.stat-hover-dot{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--surface);border:2.5px solid var(--metric-accent, var(--border2));
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity 0.15s;
}
.stat-hover-date{position:absolute;bottom:-24px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:3px 8px;border-radius:5px;font-family:var(--font-mono);font-size:10px;font-weight:500;pointer-events:none;opacity:0;transition:opacity 0.15s;white-space:nowrap;z-index:5}

/* ── Date axis labels (expanded cards) ── */
.stat-axis-row{
  position:relative;height:16px;margin-top:2px;
  pointer-events:none;flex-shrink:0;
}
.stat-axis-label{
  position:absolute;top:0;
  font-family:var(--font-mono);font-size:9px;color:var(--text3);
  transform:translateX(-50%);white-space:nowrap;
}
.stat-axis-label:first-child{transform:none}
.stat-axis-label:last-child{transform:none}

/* ── Pacing bar (inside hero card) ── */
.stat-pacing{margin-top:12px}
.stat-pace-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.stat-pace-indicator{display:flex;align-items:center;gap:6px}
.stat-pace-label{font-family:var(--font-mono);font-size:11px;color:var(--stat-hero-sub)}
.stat-pace-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.stat-pace-fill{height:100%;border-radius:2px;width:0;transition:width 0.6s cubic-bezier(0.22,1,0.36,1)}
.stat-pace-fill.on-track{background:var(--green)}
.stat-pace-fill.slightly-under,.stat-pace-fill.slightly-over{background:var(--amber)}
.stat-pace-fill.underpacing,.stat-pace-fill.overpacing{background:var(--red)}

/* ═══════════════════════════════════════════════════════════════════════════
   CLIENT OVERVIEW MODAL  (.cov-*)
   Blurred overlay shown after login when user has >1 real client.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.cov-overlay{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:var(--overlay-bg);
  backdrop-filter:blur(8px);
  transition:opacity 0.25s ease;
}

/* ── Modal shell ── */
.cov-modal{
  width:min(860px, calc(100% - 48px));
  max-height:calc(100dvh - 80px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  padding:36px 32px 28px;
  /* pre-animation state (React inline style overrides to final) */
  transform:translateY(12px) scale(0.98);
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease;
}

/* ── Greeting ── */
.cov-greeting{
  font-family:var(--font-display);font-size:24px;font-weight:800;
  letter-spacing:-0.03em;color:var(--text);line-height:1.2;
  margin-bottom:4px;
}
.cov-subtitle{
  font-size:14px;color:var(--text2);margin-bottom:24px;
}
.cov-empty{
  color:var(--text3);font-size:14px;padding:24px 0;text-align:center;
}

/* ── Table grid — 6 columns ── */
.cov-table-header,
.cov-card{
  display:grid;
  grid-template-columns:1fr 90px 80px 110px 70px 100px 64px;
  align-items:center;
  gap:8px;
}
.cov-table-header{
  padding:0 16px 10px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.cov-table-header .cov-col{
  font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--text3);
}

/* ── Card row ── */
.cov-cards{display:flex;flex-direction:column}
.cov-card{
  padding:12px 16px;
  background:transparent;
  border:none;border-bottom:1px solid var(--border);
  border-radius:0;
  cursor:pointer;text-align:left;width:100%;
  transition:background 0.12s;
}
.cov-card:last-child{border-bottom:none}
.cov-card:hover{background:var(--surface2)}
.cov-card.active{background:color-mix(in srgb,var(--accent) 5%,transparent)}

/* ── Column: Client (avatar + name) ── */
.cov-col-client{
  display:flex;align-items:center;gap:10px;min-width:0;
}
.cov-card-avatar{
  flex-shrink:0;
  width:32px;height:32px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);
  font-family:var(--font-display);font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:-0.02em;
}
.cov-card-info{min-width:0}
.cov-card-name{
  font-size:13px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cov-card-subtitle{
  font-size:11px;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── Column: Platforms (logo icons) ── */
.cov-col-platforms{display:flex;align-items:center;justify-content:center}
.cov-platform-logos{display:flex;align-items:center;gap:6px}

/* ── Column: Portfolios (number) ── */
.cov-col-portfolios{
  font-size:13px;font-weight:500;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:center;
}

/* ── Column: Pacing (pills) ── */
.cov-col-pacing{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}

/* ── Column: Errors ── */
.cov-col-errors{display:flex;align-items:center;justify-content:center}

/* ── Column: Last run ── */
.cov-col-lastrun{
  font-size:11px;color:var(--text2);text-align:center;
}
.cov-col-health{display:flex;align-items:center;justify-content:center}
.cov-health-badge{
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:2px 8px;border-radius:6px;
}
.cov-health-a{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.cov-health-b{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.cov-health-c{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}
.cov-health-d{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.cov-health-f{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}

/* ── Dash placeholder ── */
.cov-cell-dash{color:var(--text3);font-size:12px}

/* ── Attention flag pills ── */
.cov-flag{
  display:inline-flex;align-items:center;
  padding:2px 6px;border-radius:4px;
  font-size:10px;font-weight:600;
  white-space:nowrap;line-height:1.4;
}
.cov-flag--red{
  background:color-mix(in srgb,var(--red) 12%,transparent);
  color:var(--red);
}
.cov-flag--amber{
  background:color-mix(in srgb,var(--amber) 12%,transparent);
  color:var(--amber);
}
.cov-flag--green{
  background:color-mix(in srgb,var(--green) 12%,transparent);
  color:var(--green);
}
.cov-flag--grey{
  background:color-mix(in srgb,var(--text3) 12%,transparent);
  color:var(--text3);
}

/* ── Loading state (shown during client switch) ── */
.cov-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 0 32px;gap:16px;
  animation:covFadeIn 0.25s ease;
}
@keyframes covFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.cov-loading-spinner{
  width:28px;height:28px;border-radius:50%;
  border:2.5px solid var(--border);
  border-top-color:var(--accent);
  animation:covSpin 0.7s linear infinite;
}
@keyframes covSpin{to{transform:rotate(360deg)}}
.cov-loading-text{
  font-size:13px;font-weight:500;color:var(--text2);
}

/* ── Client dropdown additions ── */
.client-dropdown-divider{
  height:1px;background:var(--border);margin:4px 0;
}
.client-dropdown-overview{
  color:var(--text2);
  display:flex;align-items:center;gap:8px;
}
.client-dropdown-overview svg{
  flex-shrink:0;color:var(--text3);
}