/* ── 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;

  /* ── 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:linear-gradient(135deg,#f0f1ff 0%,#f5f0ff 50%,#f0fff8 100%);
  --stat-hero-border:#e0e4ef;
  --stat-hero-label:#9aa0b4;
  --stat-hero-value:#0f1623;
  --stat-hero-sub:#8a93a8;
  --stat-hero-footer:#b0b8cc;
  --stat-spark-stroke:rgba(99,102,241,0.7);
  --stat-spark-fill:rgba(99,102,241,0.18);
  --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:linear-gradient(135deg,#0f1629 0%,#1a1040 50%,#0f2620 100%);
  --stat-hero-border:rgba(99,102,241,0.2);
  --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:rgba(129,140,248,0.85);
  --stat-spark-fill:rgba(99,102,241,0.35);
  --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 — 6 blocks  (3 themes × 2 modes)
   ════════════════════════════════════════════════════════════════ */

/* ── 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.90);
  --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.92);
  --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.90);
  --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.94);
  --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.90);
  --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);
}

/* ── 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.92);
  --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);
}

/* ════════════════════════════════════════════════════════════════
   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);
}

/* 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,
.sidebar,.sidebar-backdrop,.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;
}

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:var(--header-bg);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  padding:0 20px;gap:12px;
  display:flex;align-items:center;
  height:56px;position:fixed;top:0;left:0;right:0;z-index:200;
}
/* ── 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;
}
.header-right{display:flex;align-items:center;gap:10px}

/* Nav toggle row (inside sidebar expanded state — collapse button) */
.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:1px solid var(--border2);
  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);border-color:var(--accent)}
/* Expand toggle (inside icon-view in collapsed state) */
.nav-icon-toggle{
  display:flex;align-items:center;justify-content:center;
  width:44px;cursor:pointer;
}

/* 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)}}

/* ── THEME PICKER ── */
.theme-picker{
  display:flex;align-items:center;gap:0;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:20px;padding:5px 12px;
  font-size:11px;font-weight:500;color:var(--text2);
  cursor:pointer;user-select:none;
  margin-right:-4px;
  transition:background 0.15s,color 0.15s;
}
.theme-picker:hover{background:var(--surface3);color:var(--text)}
.theme-picker svg{margin-right:6px;flex-shrink:0}
.theme-picker-text{white-space:nowrap}
.theme-dot-wrap{
  width:0;overflow:hidden;flex-shrink:0;
  margin-right:0;
  transition:width 0.22s cubic-bezier(0.34,1.56,0.64,1),
             margin-right 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.theme-picker.expanded .theme-dot-wrap{
  width:14px;
  margin-right:6px;
}
.theme-dot{
  width:14px;height:14px;border-radius:50%;display:block;
  opacity:0;
  transform:translateX(-8px) scale(0.6);
  transition:opacity 0.22s cubic-bezier(0.34,1.56,0.64,1),
             transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
}
.theme-picker.expanded .theme-dot{
  opacity:1;
  transform:translateX(0) scale(1);
}

/* ── MODE TOGGLE (updated for .dark class toggle) ── */
.mode-toggle{
  display:flex;align-items:center;gap:6px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:20px;padding:5px 12px;
  font-size:11px;font-weight:500;color:var(--text2);
  cursor:pointer;user-select:none;
}
.mode-toggle:hover{background:var(--surface3);color:var(--text)}
/* Keep old track/thumb for until step 3 replaces HTML */
.mode-toggle-track{
  width:28px;height:16px;
  background:var(--surface3);
  border-radius:8px;position:relative;
  border:1px solid var(--border2);
  flex-shrink:0;
}
.dark .mode-toggle-track{background:var(--accent);border-color:var(--accent)}
.mode-toggle-thumb{
  position:absolute;top:2px;left:2px;
  width:10px;height:10px;border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.dark .mode-toggle-thumb{transform:translateX(12px)}
.mode-toggle-label{font-size:11px;color:var(--text2);white-space:nowrap}

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

.nav-sidebar{
  position:fixed;left:0;top:56px;bottom:0;width:200px;
  background:var(--bg2);border-right:1px solid var(--border);
  z-index:100;display:flex;flex-direction:column;
  transition:width 0.45s cubic-bezier(0.34,1.18,0.64,1) !important;
  overflow:visible; /* CRITICAL — allows flyout to escape the sidebar */
}
.nav-sidebar.collapsed{width:52px}

/* 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;border-bottom:1px solid var(--border);
  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;left:4px;right:4px;
  border-radius:8px;background:var(--accent-bg);
  pointer-events:none;
  transition:top 0.18s cubic-bezier(0.4,0,0.2,1),height 0.18s cubic-bezier(0.4,0,0.2,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}
.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)}

/* 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{overflow:hidden;opacity:1;transition:opacity 0.2s ease !important}
.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 0}

/* Flyout panel */
.flyout{
  position:absolute;
  left:calc(100% + 8px);top:0;
  min-width:160px;
  background:var(--surface);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:200px;
  transition:margin-left 0.45s cubic-bezier(0.34,1.18,0.64,1) !important;
}
body.nav-collapsed main{margin-left:52px}
.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)}}

/* ── 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{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:14px;margin-bottom:24px;
}
/* Shared: entry animation */
.stat-card{
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(12px);
  animation:card-in 0.45s cubic-bezier(0.22,1,0.36,1) forwards;
}
.stat-card:nth-child(1){animation-delay:0.05s}
.stat-card:nth-child(2){animation-delay:0.12s}
.stat-card:nth-child(3){animation-delay:0.19s}
.stat-card:nth-child(4){animation-delay:0.26s}
@keyframes card-in{to{opacity:1;transform:translateY(0)}}

/* ── Hero card (Monthly Budget) ── */
.stat-hero{
  background:var(--stat-hero-bg);
  border:1px solid var(--stat-hero-border);
  border-radius:20px;padding:28px 26px;
  box-shadow:var(--shadow-lg);
}
.stat-hero:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.stat-hero-stripe{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#6366f1,#818cf8);
  border-radius:20px 20px 0 0;
}
.stat-hero-glow{
  position:absolute;top:-60px;right:-60px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,0.2) 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-display);font-size:52px;font-weight:800;
  letter-spacing:-0.04em;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 (Spend, ROAS, Revenue) ── */
.stat-mini{
  background:var(--stat-mini-bg);
  border:1px solid var(--stat-mini-border);
  border-radius:18px;padding:22px 20px;
  box-shadow:var(--shadow);
}
.stat-mini:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-mini-stripe{
  position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:18px 18px 0 0;
}
.stat-mini-spend .stat-mini-stripe{background:linear-gradient(90deg,#0284c7,#38bdf8)}
.stat-mini-roas   .stat-mini-stripe{background:linear-gradient(90deg,#059669,#34d399)}
.stat-mini-revenue .stat-mini-stripe{background:linear-gradient(90deg,#d97706,#fbbf24)}
.stat-mini-ring{
  position:absolute;bottom:-20px;right:-20px;
  width:120px;height:120px;border-radius:50%;
  pointer-events:none;
}
.stat-mini-spend   .stat-mini-ring{background:var(--stat-ring-spend)}
.stat-mini-roas    .stat-mini-ring{background:var(--stat-ring-roas)}
.stat-mini-revenue .stat-mini-ring{background:var(--stat-ring-revenue)}
.stat-mini .stat-label{
  font-family:var(--font-ui);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:0.09em;
  color:var(--stat-mini-label);margin-bottom:10px;
}
.stat-mini .stat-value{
  font-family:var(--font-display);font-size:28px;font-weight:800;
  letter-spacing:-0.04em;line-height:1;
  color:var(--stat-mini-value);margin-bottom:8px;
}
/* Delta — colour matches card accent, not up/down direction */
.stat-delta{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'JetBrains Mono',var(--font-mono);font-size:11px;font-weight:500;
  margin-bottom:12px;
}
.stat-mini-spend   .stat-delta{color:var(--stat-spend-accent)}
.stat-mini-roas    .stat-delta{color:var(--stat-roas-accent)}
.stat-mini-revenue .stat-delta{color:var(--stat-revenue-accent)}
.stat-mini-spark-wrap{display:block;width:100%;line-height:0}

/* ── 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:'JetBrains Mono',var(--font-mono);font-size:11px;color:var(--stat-hero-sub)}
.stat-pace-track{height:4px;background:rgba(99,102,241,0.15);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)}