/* ═══════════════════════════════════════════════════════════════════
   Nexus Dashboard — Proofwork design system
   Aesthetic: proof-green accent · IBM Plex Sans + Plex-Mono-for-DATA · calm depth
   Grid: 8px base · tokens mirror the-circuit/design-kit/tokens.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── Self-hosted brand fonts ──────────────────────────────────────────
   IBM Plex, replacing Inter + JetBrains Mono. One superfamily rather than two
   unrelated designs, real tabular figures for the data columns, and OFL 1.1 so
   it ships in the extension bundle rather than phoning a CDN.
   Three weights, not four: 700 reads as a template hero, and 500 with tight
   tracking carries a heading perfectly well. Net 6 files where there were 7. */
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-mono-600.woff2") format("woff2"); }

/* ── Reset + base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: #0a0a0e;
  color: #e0e0ec;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 13px -> 14px with the family swap. Plex's x-height is smaller than Inter's,
     so the 9-11px muted labels would read lighter at the same nominal size even
     though the contrast ratios are unchanged. This restores the apparent size. */
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

::selection { background: rgba(74, 222, 128, 0.3); }
/* Keyboard operability: a clear focus ring on every focusable element, and on
   the clickable <div>/<a> cards the dashboard builds (many aren't real buttons
   yet — give them a visible focus state so keyboard users can see where they
   are). WCAG 2.4.7. */
:focus-visible { outline: 2px solid #4ADE80; outline-offset: 2px; border-radius: 3px; }
[role="button"]:focus-visible, [tabindex]:focus-visible, a:focus-visible,
button:focus-visible, .card:focus-visible { outline: 2px solid #4ADE80; outline-offset: 2px; }

/* Respect users who ask for less motion (vestibular safety, WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.app { display: flex; flex-direction: column; height: 100vh; }

/* ── Design tokens ───────────────────────────────────────────────── */
:root {
  /* PROOFWORK — mirrors design-kit/tokens.css (proof-green accent, neutral ink). */
  --bg-0: #08090B;
  --bg-1: #0E1014;
  --bg-2: #14171C;
  --bg-3: #1B1F26;
  --border: #1E222A;
  --border-active: #4ADE80;
  --text-1: #ECEEF2;
  --text-2: #a8acb6;
  /* text-3/4 raised for the 9-11px muted labels they carry: the old #606074
     (3.3:1) and #404054 (2:1) failed AA badly.
     MEASURED, not asserted - the note that stood here claimed BOTH cleared AA,
     and text-4 never did. #6c7080 was 4.05:1 on --bg-0, under the 4.5:1 small
     text floor, which was the one number that mattered. #7d8191 measures
     --bg-0 5.14 / --bg-1 4.92 / --bg-2 4.64 / --bg-3 4.27, so AA passes on the
     three surfaces these labels sit on. On --bg-3 it reaches only 4.27 and
     clears just the 3:1 large-text floor.
     An earlier version of this note excused that by claiming --bg-3 carries dots
     and borders rather than small text. That was wrong - a sweep found 10px mono
     labels and a status pill sitting on --bg-3 in exactly that combination, and
     they were moved to --text-3 (5.05:1). So the rule is: --text-4 is NOT for
     text on --bg-3; use --text-3 there. Stays a clear tier below --text-3
     (6.09:1 on --bg-0). */
  --text-3: #8a8e9a;
  --text-4: #7d8191;
  --accent: #4ADE80;
  --accent-hover: #6EE79B;
  /* Ink for text sitting ON the accent. White on #4ADE80 measures 1.74:1,
     which fails WCAG AA (4.5:1) on the product's PRIMARY action; this is
     10.86:1. The accent is a light green - it needs dark text, not white. */
  --accent-ink: #04140b;
  --accent-soft: rgba(74, 222, 128, 0.12);
  --green: #4ADE80;
  --green-soft: rgba(74, 222, 128, 0.12);
  --red: #F87171;
  --red-soft: rgba(248, 113, 113, 0.12);
  --yellow: #FBBF24;
  --yellow-soft: rgba(251, 191, 36, 0.12);
  --blue: #60A5FA;
  --blue-soft: rgba(96, 165, 250, 0.12);
  /* SHAPE — four values, and none in the 6-16px band that every generated UI
     defaults to. Sharper rather than rounder: rounder reads consumer-app, and
     this product's stated language is hairlines and tabular numbers.
       --radius-sm  controls: buttons, inputs, chips, badges, tags, code
       --radius-md  containers: cards, panels, popovers, menus, toasts
       --radius-lg  kept as an alias of md so existing call sites need no edit
       --radius-full status dots and avatars ONLY, never a pill button */
  /* Softened 2026-08-22 from 2/4/4 to match the marketing site's new direction.
     The old scale existed to dodge a banned 6-16px band; that ban is gone.
     Still tighter than the marketing site: this is a dense operator tool and
     rounder reads consumer-app, so controls stay at 6 while containers go to 10.
     --radius-lg is no longer an alias of md; it is the modal/drawer step. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --transition: 120ms ease-out;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Reconciliation aliases — the dashboard.js inline styles drifted to these
     literal hexes; expose them as tokens so future code can reference the
     intended value and a theme change stays single-source. (The bulk codemod
     of existing inline literals is deferred; these document the mapping.)
       inline #13131a / #1a1a22  → card surface
       inline #2a2a38            → hairline border on inline cards
       inline #6aa9ff            → link blue
       inline #4ade80 / #22c55e  → success green
       inline #fca5a5 / #f87171  → danger text */
  --bg-card: var(--bg-2);        /* was #13131a (drifted) */
  --border-soft: var(--border);  /* was #242832 (drifted) */
  --link: var(--blue);           /* was #6aa9ff → #60A5FA */
  --success: var(--green);
  --danger: var(--red);          /* was #fca5a5 → #F87171 */
  /* The hover border for an interactive card. This one was NOT a drifted
     fallback like the four above — it was a live literal, `#3a3a4e`, assigned
     from JS in four files, so every hoverable card in the product brightened to
     a colour that existed in no token and no stylesheet. #3a3a4e is also the
     wrong hue: it sits at H240 against a neutral ramp built on H216. */
  /* Two border weights, because one was never enough. --border is the hairline
     that separates same-family surfaces; against --bg-2 it is 1.13:1, which is
     deliberately near-invisible. --border-strong is the edge you are meant to
     SEE - 1.38:1 on the same fill. Code kept reaching for a literal #333 (1.42:1)
     because the set had no name for that, so 17 borders drifted off-token purely
     for lack of a word.
     --border-hover is the same value and stays for hover state; the split is
     about intent, not colour, so they can diverge later without a sweep. */
  --border-strong: #2C313B;
  --border-hover: var(--border-strong);
  /* Semantic status spine — ONE color language across Proof, Accounts and the
     topbar pulse: green = working/proven · amber = blocked/needs-you ·
     red = failing/logged-out · neutral = idle. New status UI must use these
     (they alias the base palette so a theme change stays single-source). */
  --status-ok: var(--green);
  --status-ok-soft: var(--green-soft);
  --status-warn: var(--yellow);
  --status-warn-soft: var(--yellow-soft);
  --status-bad: var(--red);
  --status-bad-soft: var(--red-soft);
  --status-idle: #7c8190;
}

/* ── Top bar ─────────────────────────────────────────────────────── */
.topbar {
  height: 48px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 20px; }
.logo {
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(135deg, var(--accent), #6EE79B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
.section-title { color: var(--text-3); font-size: 13px; font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  transition: all var(--transition);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-4);
  transition: all var(--transition);
}
.status-pill.online .status-dot { background: var(--green); box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
.status-pill.offline .status-dot { background: var(--red); }
.status-pill.online { border-color: rgba(52, 211, 153, 0.2); color: var(--text-2); }
.status-pill.offline { border-color: rgba(248, 113, 113, 0.2); color: var(--text-2); }

.icon-btn {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.icon-btn:hover { background: var(--bg-2); color: var(--text-1); border-color: var(--border); }

/* ── Persistent header actions: Search / Inbox / + New ─────────────── */
.topbar-action {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

/* System pulse chip — the instrument-panel heartbeat in the topbar. */
.topbar-pulse { margin-left: 10px; font-family: var(--font-mono); font-size: 11px; }
.topbar-pulse-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--status-idle); flex: none;
  transition: background var(--transition), box-shadow var(--transition);
}
.topbar-action:hover { background: var(--bg-3, var(--bg-2)); color: var(--text-1); border-color: var(--text-4); }
.topbar-action.primary {
  background: var(--accent, #4ADE80);
  border-color: var(--accent, #4ADE80);
  color: #fff;
}
/* The #6b5aee fallbacks here were the last of the purple template this theme
   was recoloured from: a green button that turned PURPLE on hover. */
.topbar-action.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.topbar-action-icon { font-size: 13px; line-height: 1; }
.topbar-action-label { line-height: 1; }
.topbar-action-kbd {
  font-size: 10px;
  padding: 2px 5px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-4);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-left: 2px;
}
.topbar-action-arrow { font-size: 9px; opacity: 0.7; }
.topbar-badge {
  background: var(--red, #f87171);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  min-width: 16px;
  text-align: center;
  line-height: 1.3;
}

.topbar-account-wrap { position: relative; }
.topbar-account-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-4, #52525b);
  flex-shrink: 0;
}
.topbar-account-dot.online  { background: var(--green, #10b981); }
.topbar-account-dot.warning { background: var(--yellow, #eab308); }
.topbar-account-dot.offline { background: var(--red, #f87171); }
.topbar-account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 2px);
  min-width: 260px;
  max-height: 480px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 4px;
  z-index: 100;
}
.topbar-account-menu-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-4, #52525b);
  padding: 8px 12px 4px;
}
.topbar-account-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-1);
}
.topbar-account-menu-item:hover { background: var(--bg-3, var(--bg-2)); }
.topbar-account-menu-item.active { background: var(--bg-3, var(--bg-2)); font-weight: 600; }
.topbar-account-menu-item-platform {
  font-size: 11px;
  color: var(--text-3, #71717a);
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.topbar-account-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.topbar-new-wrap { position: relative; }
.topbar-new-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 2px);
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 4px;
  z-index: 100;
}
.topbar-new-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--transition);
}
.topbar-new-menu-item:hover { background: var(--bg-2); color: var(--text-1); }
.topbar-new-menu-item .menu-icon { font-size: 14px; width: 18px; text-align: center; }
.topbar-new-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
.topbar-new-menu-section {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  padding: 6px 12px 2px;
  font-weight: 700;
}

/* Hide labels on narrow viewports */
@media (max-width: 1100px) {
  .topbar-action-label, .topbar-action-kbd { display: none; }
  .topbar-action { padding: 0 8px; }
}

/* ── Layout ──────────────────────────────────────────────────────── */
.main { display: flex; flex: 1; min-height: 0; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  width: 220px;
  background: var(--bg-0);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  flex-shrink: 0;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
}
.sidebar-section { margin-bottom: 8px; }
.sidebar-section-secondary {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.sidebar-section-secondary.collapsed .sidebar-nav { display: none; }
.sidebar-group-label {
  padding: 0 16px 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  font-weight: 600;
  cursor: default;
}
.sidebar-group-label.clickable { cursor: pointer; }
.sidebar-group-label.clickable:hover { color: var(--text-3); }
.sidebar-group-label .collapse-arrow {
  display: inline-block;
  font-size: 8px;
  margin-left: 4px;
  transition: transform var(--transition);
}
.sidebar-section-secondary.collapsed .collapse-arrow { transform: rotate(-90deg); }

/* ── Section header (Hub / Intelligence / Platforms / System) ─────── */
.sidebar-section-header {
  padding: 14px 16px 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-4);
  font-weight: 700;
  -webkit-user-select: none;
  user-select: none;
}
.sidebar-section-header:first-child { padding-top: 6px; }
.sidebar-section + .sidebar-section-header,
.sidebar-platform + .sidebar-section-header { padding-top: 16px; border-top: 1px solid var(--border); margin-top: 8px; }
.sidebar-system { margin-top: auto; border-top: 1px solid var(--border); padding-top: 4px; }

/* Tutorial progress dots */
.tutorial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-1);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}
.tutorial-dot:hover { border-color: var(--accent); }
.tutorial-dot.visited { background: var(--accent-soft); border-color: var(--accent); }
.tutorial-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
}

.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: var(--text-3);
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  border-radius: 0;
  position: relative;
  transition: all var(--transition);
}
.nav-item:hover { background: var(--bg-2); color: var(--text-2); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--text-1);
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.nav-icon { font-size: 14px; width: 18px; text-align: center; opacity: 0.8; }
.nav-label { flex: 1; font-weight: 450; }
.nav-badge {
  font-size: 10px;
  min-width: 18px;
  text-align: center;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--bg-3);
  color: var(--text-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nav-badge.hot { background: var(--red-soft); color: var(--red); }
.nav-item-tg { font-size: 12px; }
.nav-item-tg .nav-label::after {
  content: " \2197";
  font-size: 10px;
  opacity: 0.3;
}
.sidebar-loading { padding: 20px 14px; color: var(--text-4); font-size: 12px; }

/* ── Platform sections (dynamic sidebar) ────────────────────────── */
.sidebar-platform { margin-bottom: 2px; }
.platform-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color var(--transition);
}
.platform-header:hover { color: var(--text-2); }
.platform-header .platform-name {
  flex: 1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  font-weight: 600;
}
.platform-header .platform-badge {
  font-size: 9px;
  color: var(--text-4);
  font-weight: 500;
}
.platform-header .platform-arrow {
  font-size: 8px;
  color: var(--text-4);
  transition: transform var(--transition);
}
.sidebar-platform.collapsed .platform-arrow { transform: rotate(-90deg); }
.sidebar-platform.collapsed .platform-features { display: none; }
.sidebar-platform.collapsed .platform-sep { display: none; }
.sidebar-platform.locked .platform-header { opacity: 0.45; }
.sidebar-platform.locked .platform-features { display: none; }

/* ── V2 IA: beta pill + Platform Power Tools ────────────────────── */
.sidebar-beta-pill {
  margin: 0 16px 12px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  background: var(--accent-soft, rgba(74, 222, 128, $1));
  color: var(--accent, #4ADE80);
  border: 1px solid var(--accent, #4ADE80);
  border-radius: 4px;
  cursor: help;
}
.sidebar-power-tools {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.power-tools-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-user-select: none;
  user-select: none;
}
.power-tools-header:hover { color: var(--text-3); }
.power-tools-arrow {
  display: inline-block;
  font-size: 8px;
  transition: transform var(--transition);
}
.sidebar-power-tools.collapsed .power-tools-arrow { transform: rotate(-90deg); }
.sidebar-power-tools.collapsed .power-tools-body { display: none; }

.platform-accounts {
  padding: 2px 0;
}
.account-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px 4px 20px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-3);
  transition: background var(--transition);
  text-decoration: none;
  min-height: 26px;
}
.account-row:hover { background: var(--bg-2); color: var(--text-2); }
.account-row.active { background: var(--accent-soft); color: var(--text-1); }
.account-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.account-dot.green { background: var(--green); }
.account-dot.yellow { background: var(--yellow); }
.account-dot.red { background: var(--red); }
.account-dot.gray { background: var(--text-4); }
.account-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 450; }
.account-detail { font-size: 9px; color: var(--text-4); white-space: nowrap; font-family: var(--font-mono); }

.platform-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 16px;
}
.platform-features .nav-item { padding: 6px 16px 6px 20px; font-size: 12px; }
.platform-features .nav-icon { font-size: 12px; width: 16px; }

.nav-item-connect {
  padding: 6px 16px 6px 20px;
  font-size: 11px;
  color: var(--text-4);
  cursor: pointer;
  border-left: 2px dashed var(--border);
  margin-left: 14px;
  transition: all var(--transition);
  text-decoration: none;
  display: block;
}
.nav-item-connect:hover { color: var(--accent); border-left-color: var(--accent); }

.sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}

/* ── Content ─────────────────────────────────────────────────────── */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 80px;
  min-width: 0;
}

/* ── Icons (dashboard-icons.js) ──────────────────────────────────────
   ONE class, not 56. Per-icon classes would add 56 names to the surface
   check-css-classes.js has to track and buy nothing: the mark sizes off the
   current font-size and inherits colour, so a status hue on the parent flows
   straight into it. -0.125em is the optical baseline nudge that stops an icon
   sitting a hair high next to its label. */
.i { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
/* Button busy state — replaces the "⏳ " prefix withProgress() used to splice
   into textContent (which also destroyed any child nodes the button had). */
.btn.is-busy, button.is-busy { opacity: 0.6; pointer-events: none; position: relative; }
.btn.is-busy::after, button.is-busy::after {
  content: "···";
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  margin-left: 6px;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}

/* ── Loading + skeletons ─────────────────────────────────────────── */
.loading { color: var(--text-4); text-align: center; padding: 64px 0; font-size: 13px; }
/* A flat surface that breathes, not a sweeping highlight. The sweep was a
   3-stop linear-gradient, and gradients are out; an opacity pulse reads as
   "loading" just as clearly, costs one property instead of three, and composites
   on the GPU. `prefers-reduced-motion` already pins every animation to a single
   frame at :40, so this degrades to a plain block for anyone who asks. */
.skeleton {
  background: var(--bg-2);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.w-60 { width: 60%; }
.skeleton-text.w-40 { width: 40%; }
.skeleton-text.w-80 { width: 80%; }
.skeleton-stat { height: 40px; width: 100%; margin-bottom: 8px; }
.skeleton-row { height: 44px; width: 100%; margin-bottom: 2px; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ── Empty states ────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-4);
}
.empty-state-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.4; }
.empty-state-title { font-size: 15px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.empty-state-hint { font-size: 12px; line-height: 1.6; max-width: 360px; margin: 0 auto; }

/* ── Page headers ────────────────────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
}
.page-title { font-size: 20px; font-weight: 600; color: var(--text-1); letter-spacing: -0.01em; }
.page-subtitle { color: var(--text-3); font-size: 12px; margin-top: 4px; }

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 12px;
}

/* uiCard()'s surface. This lived as an inline style string inside dashboard.js,
   which meant the .ui-card class it also applied styled NOTHING: every card in
   the product carried a class the stylesheet had never heard of, and the only
   rule that mentioned .ui-card was in the print block. A theme change could not
   reach any of them.

   The inline string also carried three drifted fallbacks — `var(--bg-card,#13131a)`,
   `var(--border-soft,#2a2a38)`, `var(--radius-lg,10px)` — whose defaults were the
   pre-token values, including a 10px radius that is off a 2/4/4/9999 scale. They
   were inert only for as long as the tokens keep existing. */
.ui-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  /* md, not lg. Containers are 10px and lg (14px) is the modal/drawer step; this
     pointed at lg back when the two were aliases of the same 4px. */
  border-radius: var(--radius-md);
  padding: 14px;
}
.ui-card-interactive {
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
/* :hover, not two JS listeners. The listeners it replaces also fought the
   element's own inline style, which is why they had to write a literal back. */
.ui-card-interactive:hover {
  border-color: var(--border-hover);
}
.ui-card-interactive:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.card-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card-subtitle { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }

/* ── Stats grid ──────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  margin-bottom: 4px;
  font-weight: 600;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-sub { font-size: 11px; color: var(--text-3); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ── Funnel (home hero) ──────────────────────────────────────────── */
.funnel {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
}
.funnel-stage {
  flex: 1;
  text-align: center;
  padding: 20px 8px 16px;
  position: relative;
  transition: background var(--transition);
}
.funnel-stage:hover { background: var(--bg-2); }
.funnel-stage:not(:last-child)::after {
  content: "\203A";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-4);
  z-index: 1;
}
.funnel-count {
  font-size: 24px;
  font-weight: 700;
  display: block;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.funnel-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-top: 4px;
  display: block;
}
.funnel-bar {
  height: 3px;
  margin-top: 10px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
}
.funnel-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s ease-out;
}

/* ── Tabs ─────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab {
  padding: 8px 16px;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 450;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
  font-family: inherit;
}
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--text-1); border-bottom-color: var(--accent); }
.tab-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 10px;
  background: var(--bg-3);
  color: var(--text-3);
}

/* ── Filter row ──────────────────────────────────────────────────── */
.filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-input, .filter-select {
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: inherit;
  transition: border-color var(--transition);
}
.filter-input:focus, .filter-select:focus {
  outline: none;
  border-color: var(--accent);
}
.filter-input { flex: 1; min-width: 200px; }
.filter-input::placeholder { color: var(--text-4); }

/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.table thead { position: sticky; top: 0; z-index: 2; }
.table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-4);
  font-weight: 600;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border);
  cursor: default;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.table th.sortable { cursor: pointer; }
.table th.sortable:hover { color: var(--text-2); }
.table th .sort-arrow { font-size: 10px; margin-left: 2px; opacity: 0.4; }
.table th.sorted .sort-arrow { opacity: 1; color: var(--accent); }
.table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(28, 28, 38, 0.5);
  color: var(--text-2);
  vertical-align: middle;
}
.table tbody tr {
  transition: background var(--transition);
  position: relative;
}
.table tbody tr {
  border-left: 2px solid transparent;
}
.table tbody tr:hover {
  background: var(--bg-2);
  cursor: pointer;
  border-left-color: var(--accent);
}
.table tbody tr:last-child td { border-bottom: none; }
.table td .primary-cell { color: var(--text-1); font-weight: 500; }
.table td .secondary-cell { color: var(--text-3); font-size: 11px; }
.table td .mono { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

/* Row actions — visible on hover */
.row-actions { opacity: 0; transition: opacity var(--transition); display: flex; gap: 4px; }
.table tbody tr:hover .row-actions { opacity: 1; }

/* ── CRM: smart views, score bars, engagement, filters ─────────── */
.smart-views {
  display: flex;
  gap: 6px;
  padding: 0 0 12px;
  overflow-x: auto;
  /* Hide scrollbar — three vendors covered:
     • scrollbar-width: Firefox, Chrome 121+, modern Edge
     • -ms-overflow-style: legacy IE / pre-Chromium Edge
     • ::-webkit-scrollbar (below): older Chrome, Safari, iOS Safari */
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: wrap;
}
.smart-views::-webkit-scrollbar { display: none; }
.smart-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  font-family: inherit;
}
.smart-view-chip:hover { border-color: rgba(74,222,128,0.3); color: var(--text-2); background: var(--bg-2); }
.smart-view-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.score-bar-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 60px;
}
.score-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-3);
  overflow: hidden;
  flex-shrink: 0;
}
.score-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.2s;
}
.score-bar-fill.score-low { background: var(--text-4); }
.score-bar-fill.score-mid { background: var(--yellow); }
.score-bar-fill.score-high { background: var(--blue); }
.score-bar-fill.score-hot { background: var(--green); }
.score-num { font-size: 11px; font-family: var(--font-mono); color: var(--text-3); min-width: 18px; }

.target-star { color: var(--yellow); margin-right: 4px; font-size: 11px; }

.engagement-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-family: var(--font-mono);
}
.engagement-mini .eng-item { display: inline-flex; align-items: center; gap: 2px; }
.engagement-mini .eng-item.active { color: var(--text-2); }
.engagement-mini .eng-item.zero { color: var(--text-4); opacity: 0.5; }
.engagement-mini .eng-label { font-size: 9px; font-weight: 600; text-transform: uppercase; }

.filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 8px;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 500;
}
.filter-pill-x {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  font-family: inherit;
  opacity: 0.7;
  transition: opacity var(--transition);
}
.filter-pill-x:hover { opacity: 1; }

.tag-autocomplete {
  position: relative;
  flex: 0 0 auto;
}
.tag-autocomplete .filter-input { width: 160px; min-width: 120px; }
.tag-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 50;
  margin-top: 4px;
}
.tag-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--transition);
}
.tag-dropdown-item:hover { background: var(--bg-2); }
.tag-dropdown-item .tag-count { color: var(--text-4); font-size: 10px; font-family: var(--font-mono); }

.tag-removable {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-3);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
}
.tag-remove-btn {
  background: none;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  font-family: inherit;
  transition: color var(--transition);
}
.tag-remove-btn:hover { color: var(--red); }

.inline-stage-picker {
  position: absolute;
  z-index: 50;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  min-width: 200px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(28,28,38,0.3);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  background: var(--bg-2);
}
.activity-body { flex: 1; min-width: 0; }
.activity-text { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.activity-contact {
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.activity-contact:hover { text-decoration: underline; }
.activity-time { font-size: 10px; color: var(--text-4); margin-top: 2px; font-family: var(--font-mono); }

.target-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.target-toggle input[type="checkbox"] {
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
  cursor: pointer;
}

/* ── Badges / status ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-yellow { background: var(--yellow-soft); color: var(--yellow); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-gray { background: var(--bg-3); color: var(--text-3); }
.badge-purple { background: var(--accent-soft); color: var(--accent); }

/* Status dot + label pattern (Linear style) */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.status-dot-inline {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot-inline.green { background: var(--green); }
.status-dot-inline.yellow { background: var(--yellow); }
.status-dot-inline.red { background: var(--red); }
.status-dot-inline.blue { background: var(--blue); }
.status-dot-inline.gray { background: var(--text-4); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
/* The same gradient-and-glow treatment as the marketing site's CTA, in the
   app's green rather than the parent cyan: brand architecture keeps Growth
   green, and the dashboard is the Growth Terminal's arm. */
.btn-primary {
  color: var(--accent-ink);
  background-image: linear-gradient(135deg, #6EE79B 0%, #4ADE80 46%, #35b667 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 6px 18px -8px rgba(74, 222, 128, 0.5);
  transition: filter var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 10px 24px -10px rgba(74, 222, 128, 0.62);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-3); color: var(--text-1); border-color: rgba(74,222,128,0.3); }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-danger:hover { background: rgba(248,113,113,0.2); }
.btn-tiny { padding: 3px 8px; font-size: 10px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Applied by JS but never defined, so these rendered as unstyled browser
   defaults on the dark body. Surfaced by tools/check-css-classes.js; the
   remaining 77 are baselined rather than swept (CLAUDE.md rule 7). */
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-2); color: var(--text-1); }

/* .pill — 18 uses across 7 scripts, the single most-applied undefined class.
   A neutral, slightly softer sibling of .badge. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

/* Form controls built by el("input"|"select"|"textarea", …) with a bare
   .input / .nx-input class. Element-level styling (the pattern the reference
   repo uses) is deliberately avoided here — this stylesheet is shared with
   surfaces that rely on native control rendering. */
.input,
.nx-input {
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  min-height: 30px;
}
.input:focus,
.nx-input:focus { outline: none; border-color: var(--accent); }
.nx-label {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 4px;
}

/* ── Wizard sections ─────────────────────────────────────────────── */
.wizard { max-width: 900px; }
.wizard-section {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 12px;
}
.wizard-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  margin-bottom: 12px;
  font-weight: 600;
}
.wizard-label { font-size: 12px; color: var(--text-3); margin-bottom: 4px; display: block; }
.wizard-value { font-size: 13px; color: var(--text-1); margin-bottom: 12px; }
.wizard-post {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 12px;
  max-height: 160px;
  overflow-y: auto;
}
.wizard-textarea {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  transition: border-color var(--transition);
}
.wizard-textarea:focus { outline: none; border-color: var(--accent); }
.wizard-input {
  width: 100%;
  background: var(--bg-0);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--transition);
}
.wizard-input:focus { outline: none; border-color: var(--accent); }
.wizard-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ── Campaign Wizard (Phase 1 IA) ────────────────────────────────── */
.wizard-steps {
  display: flex;
  gap: 8px;
  margin: 16px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.wizard-step-dot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-4);
  font-size: 12px;
}
.wizard-step-dot.active { background: var(--accent-soft, rgba(74, 222, 128, $1)); border-color: var(--accent); color: var(--accent); }
.wizard-step-dot.done { color: var(--green, #4ade80); border-color: var(--green, #4ade80); }
.wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-1);
  font-size: 10px;
  font-weight: 700;
}
.wizard-step-dot.active .wizard-step-num { background: var(--accent); color: var(--accent-ink); }
.wizard-step-dot.done .wizard-step-num { background: var(--green, #4ade80); color: #fff; }
.wizard-step-label { font-weight: 600; }

.wizard-prefill-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent-soft, rgba(74, 222, 128, $1));
  border: 1px solid var(--accent, #4ADE80);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-2);
}
.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}

.wizard-step-body { animation: wizard-fade 200ms ease; }
@keyframes wizard-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.wizard-intent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.wizard-intent-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 4px);
  padding: 14px;
  cursor: pointer;
  transition: all var(--transition);
}
.wizard-intent-card:hover { border-color: var(--accent); }
.wizard-intent-card.selected { background: var(--accent-soft, rgba(74, 222, 128, $1)); border-color: var(--accent); }
.wizard-intent-icon { font-size: 24px; margin-bottom: 6px; }
.wizard-intent-label { font-weight: 700; font-size: 14px; color: var(--text-1); }
.wizard-intent-desc { font-size: 11px; color: var(--text-3); margin-top: 4px; line-height: 1.4; }

.wizard-template-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.wizard-template-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.wizard-template-card:hover { background: var(--bg-2); border-color: var(--accent); }
.wizard-template-card.selected { border-color: var(--accent); background: var(--accent-soft, rgba(74, 222, 128, $1)); }
.wizard-template-icon { font-size: 22px; flex-shrink: 0; }
.wizard-template-body { flex: 1; min-width: 0; }
.wizard-template-title { font-weight: 600; font-size: 13px; color: var(--text-1); display: flex; align-items: center; gap: 6px; }
.wizard-template-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.wizard-template-tag {
  font-size: 9px;
  padding: 1px 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wizard-template-pill {
  font-size: 9px;
  padding: 2px 6px;
  margin-left: 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.wizard-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.wizard-field { display: flex; flex-direction: column; }

.wizard-summary {
  margin-top: 20px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.wizard-summary-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-4); font-weight: 700; margin-bottom: 10px; }
.wizard-summary-row { display: flex; gap: 12px; padding: 4px 0; font-size: 12px; }
.wizard-summary-label { min-width: 70px; color: var(--text-3); }

.wizard-hint { padding: 16px; color: var(--text-4); font-size: 12px; text-align: center; background: var(--bg-2); border-radius: var(--radius-sm); }

/* ── Operations Center (Phase 2 IA) ─────────────────────────────── */
.operations-center { max-width: 1200px; }
.op-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
/* Inline label (e.g., "Type", "Platform") prefixing each filter row.
   Lets users instantly distinguish the type and platform chip rows. */
.op-filter-row-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  font-weight: 700;
  margin-right: 4px;
  min-width: 56px;
}
/* "Recently Used" bucket gets a slightly different feel — accent-tinted header
   so the user spots their muscle-memory ops without parsing the label. */
.op-bucket-recent .op-bucket-header { color: var(--accent, #4ADE80); border-bottom-color: var(--accent, #4ADE80); }
/* Pinned bucket gets a warmer accent so users distinguish it from Recently Used. */
.op-bucket-pinned .op-bucket-header { color: var(--yellow, #fbbf24); border-bottom-color: var(--yellow, #fbbf24); }

/* Pin star — overlaid in the top-right corner of each card. Default empty
   star, fills + tints yellow when pinned. Click event bubbles are stopped at
   the JS level so it doesn't trigger the card's own onclick. */
.op-card { position: relative; }  /* anchor for absolute pin button */
.op-card-pin {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--text-4);
  border-radius: 4px;
  transition: all var(--transition);
  padding: 0;
}
.op-card-pin:hover { background: var(--bg-2); color: var(--yellow, #fbbf24); }
.op-card-pin.pinned { color: var(--yellow, #fbbf24); }

/* "Ran X ago" footer. Subtle, only present when telemetry has a launch event
   for this op — keeps clean cards uncluttered when there's nothing to show. */
.op-card-lastrun {
  font-size: 10px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* View-mode toggle in the page header. Pair of icon buttons; active one is
   accent-tinted. Subtle so the search box stays the visual anchor. */
.op-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: flex-start;
}
.op-view-btn {
  width: 30px;
  height: 30px;
  background: var(--bg-2);
  border: none;
  color: var(--text-4);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.op-view-btn:hover { color: var(--text-2); }
.op-view-btn.active {
  background: var(--accent-soft, rgba(74, 222, 128, $1));
  color: var(--accent, #4ADE80);
}

/* List view — single column, denser cards. Same op-card markup just laid out
   horizontally (icon | titles+desc | tags+platforms+lastrun). */
.op-grid--list { grid-template-columns: 1fr; }
.op-grid--list .op-card {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}
.op-grid--list .op-card-header { flex: 1; gap: 12px; }
.op-grid--list .op-card-tags,
.op-grid--list .op-platforms { flex-shrink: 0; }
.op-grid--list .op-card-lastrun { flex-shrink: 0; margin-top: 0; padding-left: 8px; border-left: 1px solid var(--border); }
.op-grid--list .op-card-desc { font-size: 11px; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }

/* "● N running" badge — top-right of card (between pin star and corner).
   Green dot + count tells the user this op already has live workflows so they
   don't accidentally double-launch. */
.op-card-running {
  position: absolute;
  top: 8px;
  right: 36px;            /* clear of the pin star at right: 8px */
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  background: rgba(74, 222, 128, 0.12);
  color: var(--green, #4ade80);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 4px;
  line-height: 1.4;
}
/* Subtle accent border on cards with active workflows so they pop in the grid. */
.op-card--active { border-color: rgba(74, 222, 128, 0.4); }
.op-card--active:hover { border-color: var(--green, #4ade80); }

/* Needs-setup state — card is dimmed and click navigates to Accounts instead
   of the launch flow. The "Connect →" footer makes the recovery action obvious
   without having to go discover it mid-wizard. */
.op-card--needs-setup {
  opacity: 0.6;
  background: var(--bg-1);
}
.op-card--needs-setup:hover { opacity: 0.85; border-color: var(--border); transform: none; }
.op-card-needs-setup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-left: 3px solid var(--yellow, #fbbf24);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-3);
}
.op-card-needs-setup .btn-link {
  color: var(--yellow, #fbbf24);
  font-size: 11px;
  font-weight: 600;
}

/* Auto-skipped account pill — appears at top of Configure step when there
   was only one account to choose, so we silently picked it. Compact, accent-
   tinted, with a "change" link that takes the user back to step 1. */
.op-auto-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 16px;
  background: var(--accent-soft, rgba(74, 222, 128, $1));
  border: 1px solid var(--accent, #4ADE80);
  border-radius: var(--radius-full);
  color: var(--accent, #4ADE80);
  font-size: 12px;
  font-weight: 500;
}
.op-auto-account-pill .btn-link {
  color: var(--accent, #4ADE80);
  font-size: 11px;
  margin-left: 4px;
}
.op-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.op-filter-chip:hover { color: var(--text-1); border-color: var(--text-4); }
.op-filter-chip.active {
  background: var(--accent-soft, rgba(74, 222, 128, $1));
  border-color: var(--accent, #4ADE80);
  color: var(--accent, #4ADE80);
}
.op-filter-chip.op-filter-clear { color: var(--red); border-color: var(--red); background: transparent; }

.op-search-input {
  width: 100%;
  max-width: 480px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-size: 13px;
  margin-bottom: 20px;
  transition: border-color var(--transition);
}
.op-search-input:focus { outline: none; border-color: var(--accent); }

.op-bucket { margin-bottom: 28px; }
.op-bucket-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.op-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 4px);
  padding: 14px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.op-card:hover, .op-card:focus-visible {
  border-color: var(--accent);
  background: var(--bg-1);
  outline: none;
  transform: translateY(-1px);
}
.op-card-header { display: flex; gap: 10px; align-items: flex-start; }
.op-card-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.op-card-titles { flex: 1; min-width: 0; }
.op-card-label { font-weight: 600; font-size: 13px; color: var(--text-1); }
.op-card-desc { font-size: 11px; color: var(--text-3); line-height: 1.4; margin-top: 3px; }
.op-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.op-tag {
  font-size: 9px;
  padding: 2px 6px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.op-tag-multi-account   { color: #4ADE80; border-color: rgba(74, 222, 128, $1); }
.op-tag-passive         { color: #4ade80; border-color: rgba(74, 222, 128, 0.3); }
.op-tag-single-platform { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); }
.op-tag-multi-step      { color: #60a5fa; border-color: rgba(96, 165, 250, 0.3); }
.op-tag-cross-platform  { color: #f472b6; border-color: rgba(244, 114, 182, 0.3); }

.op-platforms { display: flex; flex-wrap: wrap; gap: 4px; }
.op-platform-pill {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-1);
  border-radius: 3px;
  color: var(--text-3);
}

.op-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.op-empty-icon { font-size: 32px; opacity: 0.5; }

/* AccountPicker */
.op-account-picker { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.op-account-section {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.op-account-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.op-account-platform-name { font-weight: 600; font-size: 12px; color: var(--text-1); }
.op-account-count { font-size: 10px; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.05em; }
.op-account-empty { font-size: 12px; color: var(--text-4); padding: 8px 0; }
.op-account-empty a { color: var(--accent); text-decoration: none; }
.op-account-empty a:hover { text-decoration: underline; }
.op-account-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.op-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
}
.op-account-chip:hover { border-color: var(--accent); color: var(--text-1); }
.op-account-chip.selected {
  background: var(--accent-soft, rgba(74, 222, 128, $1));
  border-color: var(--accent);
  color: var(--accent);
}
.op-account-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-4);
}
.op-account-dot.green { background: var(--green, #4ade80); }
.op-account-dot.yellow { background: var(--yellow, #fbbf24); }
.op-account-dot.red { background: var(--red, #f87171); }
.op-account-dot.gray { background: var(--text-4); }
.op-account-chip-label { line-height: 1; }

.char-counter {
  font-size: 10px;
  color: var(--text-4);
  text-align: right;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.char-counter.over { color: var(--red); }

/* ── Toggles ─────────────────────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(28,28,38,0.4);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: 12px; color: var(--text-2); }
.toggle {
  width: 36px; height: 20px;
  background: var(--bg-3);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  transition: left var(--transition);
}
.toggle.on { background: var(--green); }
.toggle.on::after { left: 18px; }

/* ── Drawer ──────────────────────────────────────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: none;
  z-index: 100;
  transition: opacity 0.2s;
}
.drawer-backdrop.show { display: block; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 90vw;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 101;
}
.drawer.show { transform: translateX(0); }
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  font-size: 13px;
  color: var(--text-2);
}
.drawer-body h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  margin: 20px 0 8px;
  font-weight: 600;
}
.drawer-body h4:first-child { margin-top: 0; }
.field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(28,28,38,0.3);
  gap: 12px;
}
.field-row:last-child { border-bottom: none; }
.field-label { color: var(--text-4); font-size: 11px; flex-shrink: 0; }
.field-value { color: var(--text-1); font-size: 12px; text-align: right; overflow-wrap: anywhere; }

/* ── Toast ────────────────────────────────────────────────────────── */
.toast-region {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.toast {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 12px;
  pointer-events: auto;
  animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.toast.ok { background: rgba(52, 211, 153, 0.15); color: var(--green); border: 1px solid rgba(52,211,153,0.2); }
.toast.err { background: rgba(248, 113, 113, 0.15); color: var(--red); border: 1px solid rgba(248,113,113,0.2); }
.toast.info { background: rgba(96, 165, 250, 0.15); color: var(--blue); border: 1px solid rgba(96,165,250,0.2); }
.toast-dismiss {
  background: none; border: none; color: inherit; cursor: pointer;
  opacity: 0.5; font-size: 14px; padding: 0 2px; margin-left: auto;
}
.toast-dismiss:hover { opacity: 1; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Pagination ──────────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-3);
}
.pagination-controls { display: flex; gap: 4px; align-items: center; }
.pagination-page {
  min-width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
}
.pagination-page:hover { background: var(--bg-2); color: var(--text-1); }
.pagination-page.active { background: var(--accent-soft); color: var(--accent); border-color: rgba(74,222,128,0.3); }

/* ── Alert card ──────────────────────────────────────────────────── */
.alert-card {
  background: var(--accent-soft);
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.alert-card.warning { background: var(--yellow-soft); border-color: rgba(251,191,36,0.2); }
.alert-card.error { background: var(--red-soft); border-color: rgba(248,113,113,0.2); }
.alert-card.success { background: var(--green-soft); border-color: rgba(52,211,153,0.2); }
.alert-card-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text-1); }
.alert-card-body { font-size: 12px; line-height: 1.6; color: var(--text-2); }

/* ── Channel health bars (home) ──────────────────────────────────── */
.channel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(28,28,38,0.3);
}
.channel-row:last-child { border-bottom: none; }
.channel-icon { width: 20px; text-align: center; flex-shrink: 0; font-size: 12px; }
.channel-name { width: 180px; font-size: 12px; color: var(--text-2); flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-bar { flex: 1; height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.channel-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease-out; }
.channel-bar-fill.healthy { background: var(--green); }
.channel-bar-fill.degraded { background: var(--yellow); }
.channel-bar-fill.down { background: var(--red); }
.channel-detail { font-size: 10px; color: var(--text-4); width: 120px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ── Safety-net for the <button class="card"> antipattern ──────────
   Buttons inherit browser-default text color (varies by OS, often near-black)
   instead of the theme's text color. Any historical/future use of `<button>`
   with the `card` class would otherwise render unreadable on the dark theme.
   This single rule protects the whole codebase. */
button.card {
  color: var(--text-1);
  font-family: inherit;
  text-align: left;
}

/* ── Action card (Competitor routines, Platform Operations, Group Ops) ──
   Reusable polished card-style button. Use anywhere a clickable card needs to
   show: icon · title · description · optional "+" affordance. Replaces the
   older inline-styled <button class="card"> grids.

   Markup contract:
     <button class="action-card">
       <div class="action-card-icon">📌</div>
       <div class="action-card-body">
         <div class="action-card-title">Title</div>
         <div class="action-card-desc">One-line description</div>
       </div>
       <div class="action-card-cta">+</div>   (optional)
     </button>
*/
/* Grid container — both names supported (the older one is kept as an alias
   for code that hasn't been migrated to .action-card-grid yet). */
.action-card-grid,
.routine-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.action-card,
.routine-template-card {
  color: var(--text-1);
  font-family: inherit;
  text-align: left;

  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 4px);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.action-card:hover,
.routine-template-card:hover {
  background: var(--bg-1);
  border-color: var(--accent, #4ADE80);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.action-card:hover .action-card-cta,
.routine-template-card:hover .routine-template-card-cta {
  color: var(--accent, #4ADE80);
  transform: scale(1.15);
}
.action-card:focus-visible,
.routine-template-card:focus-visible {
  outline: 2px solid var(--accent, #4ADE80);
  outline-offset: 2px;
}

/* Icon in its own subtle badge — prevents emoji overlap with title text and
   gives each card a clear visual anchor. */
.action-card-icon,
.routine-template-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.action-card:hover .action-card-icon,
.routine-template-card:hover .routine-template-card-icon {
  border-color: var(--accent, #4ADE80);
  background: var(--accent-soft, rgba(74, 222, 128, $1));
}

.action-card-body,
.routine-template-card-body { min-width: 0; }

.action-card-title,
.routine-template-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.action-card-desc,
.routine-template-card-desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.4;
}
.action-card-meta {
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--font-mono);
  margin-top: 4px;
}
.action-card-cta,
.routine-template-card-cta {
  font-size: 16px;
  color: var(--text-4);
  font-weight: 300;
  text-align: center;
  transition: all var(--transition);
  align-self: center;
}

/* ── Utility ─────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.muted { color: var(--text-3); }
.small { font-size: 11px; }
.row { display: flex; gap: 8px; align-items: center; }
.grow { flex: 1; }
.mono { font-family: var(--font-mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Scrollbars ──────────────────────────────────────────────────── */
.sidebar::-webkit-scrollbar,
.content::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.wizard-post::-webkit-scrollbar {
  width: 6px;
}
.sidebar::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb,
.wizard-post::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--text-4);
}
.sidebar::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.drawer-body::-webkit-scrollbar-track,
.wizard-post::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { width: 56px; }
  .sidebar .nav-label,
  .sidebar .nav-badge,
  .sidebar .sidebar-group-label,
  .sidebar .collapse-arrow { display: none; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .nav-icon { width: auto; font-size: 16px; }
  .content { padding: 20px 16px 60px; }
}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .funnel { flex-wrap: wrap; }
  .funnel-stage { min-width: 80px; }
  .table-wrap { overflow-x: auto; }
  .drawer { width: 100%; max-width: none; }
}

/* ── Keyboard shortcut overlay ───────────────────────────────────── */
.kbd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 300;
  align-items: center;
  justify-content: center;
}
.kbd-overlay.show { display: flex; }
.kbd-box {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 400px;
  width: 100%;
}
.kbd-box h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 16px;
}
.kbd-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
}
.kbd-key {
  font-family: var(--font-mono);
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* Live Map — pulsing dot for "running now" cron jobs */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.4); }
}

/* ── Command palette (Cmd/Ctrl+K) ────────────────────────────────── */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cmdk-overlay[hidden] { display: none; }
.cmdk-panel {
  width: 600px;
  max-width: 92vw;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cmdkIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmdkIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.cmdk-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  font-size: 15px;
  font-family: inherit;
  padding: 16px 20px;
  outline: none;
}
.cmdk-input::placeholder { color: var(--text-4); }
.cmdk-results {
  max-height: 56vh;
  overflow-y: auto;
  padding: 6px 0;
}
.cmdk-section-label {
  padding: 8px 16px 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-4);
  font-weight: 600;
}
.cmdk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--transition);
}
.cmdk-row:hover,
.cmdk-row.active {
  background: var(--bg-2);
  border-left-color: var(--accent);
}
.cmdk-row .cmdk-icon {
  width: 22px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}
.cmdk-row .cmdk-text { flex: 1; min-width: 0; }
.cmdk-row .cmdk-label {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-row .cmdk-sublabel {
  color: var(--text-3);
  font-size: 11px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-row .cmdk-meta {
  font-size: 10px;
  color: var(--text-4);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.cmdk-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--text-4);
  font-size: 12px;
}
.cmdk-footer {
  display: flex;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-0);
}
.cmdk-hint {
  font-size: 10px;
  color: var(--text-4);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cmdk-key {
  font-family: var(--font-mono);
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* Clickable company link inside contact rows — opens company drawer.
   Anchor uses no href so it doesn't navigate; click handler is delegated. */
.company-link {
  color: var(--text-1);
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color var(--transition), color var(--transition);
}
.company-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Keyboard row selection (j/k navigation in CRM tables) */
.table tbody tr.row-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

/* Undo toast — extends .toast with a button and a hairline progress bar */
.toast .toast-undo {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.toast .toast-undo:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.toast.with-undo {
  position: relative;
  overflow: hidden;
  padding-bottom: 12px;
}
.toast .toast-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  transform-origin: left center;
  animation: toastProgress linear forwards;
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   V3 sidebar (compact, Vercel/Linear hybrid) + context bar
   Activated by ._navIaV3 flag in chrome.storage.local — see buildV3Sidebar
   ═══════════════════════════════════════════════════════════════════ */

.sidebar.sidebar-v3 {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

/* Beta pill — small, neutral, less attention-grabbing than v2's */
.sidebar.sidebar-v3 .sidebar-beta-pill {
  margin: 6px 12px 10px;
  padding: 4px 8px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-align: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Primary nav: 5 items always visible. Each gets a thin colored stripe
   on its left edge when active so the user instantly sees "where am I". */
.sidebar.sidebar-v3 .sidebar-nav-primary { padding: 0 8px; }
.sidebar.sidebar-v3 .nav-item-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin: 1px 0;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  position: relative;
  transition: background 120ms, color 120ms;
}
.sidebar.sidebar-v3 .nav-item-primary:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
.sidebar.sidebar-v3 .nav-item-primary.active {
  background: var(--bg-2);
  color: var(--text-1);
  font-weight: 600;
}
.sidebar.sidebar-v3 .nav-item-primary.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.sidebar.sidebar-v3 .nav-item-primary[data-section="today"].active::before    { background: #3b82f6; }
.sidebar.sidebar-v3 .nav-item-primary[data-section="inbox"].active::before    { background: #ec4899; }
.sidebar.sidebar-v3 .nav-item-primary[data-section="pipeline"].active::before { background: #a855f7; }
.sidebar.sidebar-v3 .nav-item-primary[data-section="work"].active::before     { background: #eab308; }
.sidebar.sidebar-v3 .nav-item-primary[data-section="intel"].active::before    { background: #10b981; }
.sidebar.sidebar-v3 .nav-item-primary .nav-icon { font-size: 16px; line-height: 1; }
.sidebar.sidebar-v3 .nav-item-primary .nav-label { flex: 1; }
.sidebar.sidebar-v3 .nav-item-primary .nav-badge {
  font-size: 10px;
  background: var(--red);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}
/* Shortcut hint — small monospace digit aligned right. Surfaces the
   Cmd/Ctrl+1..5 shortcut so users discover it on first scan. */
.sidebar.sidebar-v3 .nav-item-primary .nav-kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  color: var(--text-3, #71717a);
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  margin-left: auto;
  opacity: 0.6;
  transition: opacity 120ms;
}
.sidebar.sidebar-v3 .nav-item-primary:hover .nav-kbd { opacity: 1; }
.sidebar.sidebar-v3 .nav-item-primary.active .nav-kbd {
  background: var(--bg-3);
  color: var(--text-2);
  opacity: 1;
}

/* Context pane: section header + child list. Subtle background separator
   so it's visually distinct from primary without being heavy. */
.sidebar.sidebar-v3 .sidebar-section-context {
  margin-top: 8px;
  padding: 4px 0 8px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  animation: v3-context-fade-in 180ms ease-out;
}
@keyframes v3-context-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sidebar.sidebar-v3 .sidebar-context-header {
  padding: 10px 16px 4px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
}
.sidebar.sidebar-v3 .sidebar-nav-context { padding: 0 8px; }
/* Sub-group header within a section's context pane (Run / Build / Measure …) */
.sidebar.sidebar-v3 .sidebar-context-subheader {
  padding: 10px 8px 3px;
  font-size: 9px;
  letter-spacing: 0.07em;
  color: var(--text-4);
  text-transform: uppercase;
  font-weight: 600;
}
.sidebar.sidebar-v3 .sidebar-context-subheader:first-child { padding-top: 2px; }
.sidebar.sidebar-v3 .nav-item-child {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 22px;
  margin: 1px 0;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background 100ms, color 100ms;
}
.sidebar.sidebar-v3 .nav-item-child:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
.sidebar.sidebar-v3 .nav-item-child.active {
  background: var(--bg-3);
  color: var(--text-1);
  font-weight: 500;
}
.sidebar.sidebar-v3 .nav-item-child .nav-icon { font-size: 13px; opacity: 0.75; }

/* Footer: sits at bottom, rarely-used utility links collapsed by default */
.sidebar.sidebar-v3 .sidebar-section-footer {
  padding: 6px 8px 10px;
  border-top: 1px solid var(--border);
}
.sidebar.sidebar-v3 .nav-item-footer-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sidebar.sidebar-v3 .nav-item-footer-toggle:hover { background: var(--bg-2); color: var(--text-2); }
.sidebar.sidebar-v3 .sidebar-section-footer .nav-item {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 5px;
  color: var(--text-2);
}
.sidebar.sidebar-v3 .sidebar-section-footer .nav-item:hover { background: var(--bg-2); color: var(--text-1); }
.sidebar.sidebar-v3 .sidebar-section-footer .nav-item.active { background: var(--bg-2); color: var(--text-1); }

/* Spacer to push footer to bottom — flex:1 element rendered between
   context pane and footer. No styling needed; the flex layout does the work. */

/* ── Context bar (top of content area when an account is selected) ── */
.context-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  margin: 0 0 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 2px;
  font-size: 12px;
  color: var(--text-1);
  animation: v3-context-fade-in 200ms ease-out;
}
.context-bar-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #10b981);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.context-bar-label { font-weight: 600; }
.context-bar-platform {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.context-bar-spacer { flex: 1; }
.context-bar-clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.context-bar-clear:hover { background: var(--bg-3); color: var(--text-1); }

/* ── Account picker menu — improvements on top of the inline styles ── */
.topbar-account-menu .topbar-account-menu-item {
  transition: background 100ms;
}
.topbar-account-menu .topbar-account-menu-item:active {
  background: var(--bg-3);
  transform: scale(0.99);
}

/* ── Phase 34b — n8n-style canvas editor ─────────────────────── */

.canvas-editor {
  position: relative;
  contain: strict;
}

.canvas-editor-inner {
  /* The pan/zoom transform happens here; let it bleed past viewport so
     dragging beyond the visible area still works. */
}

.canvas-node {
  transition: border-color 120ms, box-shadow 120ms;
  z-index: 2;
}
.canvas-node:hover {
  border-color: #6a7aaa !important;
  box-shadow: 0 0 0 2px rgba(106, 122, 170, 0.15);
}
.canvas-node:active {
  cursor: grabbing !important;
}

/* Running pulse — applied while Execute is in flight.
   Implemented as a sibling ::after ring that scales + fades, so the only
   animated properties are transform + opacity (composite-only, no paint). */
.canvas-node-running {
  border-color: #faaa5a !important;
  position: relative;
}
.canvas-node-running::after {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border: 2px solid rgba(250, 170, 90, 0.6);
  border-radius: 4px;
  pointer-events: none;
  transform-origin: center;
  /* Promote to GPU layer so the animated transform + opacity stay composite-only */
  will-change: transform, opacity;
  animation: canvas-pulse-ring 1.2s ease-out infinite;
}
@keyframes canvas-pulse-ring {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.06); opacity: 0; }
}

.canvas-toolbar button {
  /* Inherit btn styles; tighter padding for the toolbar */
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Canvas-side drawer (sidebar library / config panel) — used by Phase 34b.2+ */
.canvas-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: #0c0c0c;
  border-left: 1px solid #222;
  z-index: 20;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 200ms ease-out;
}
.canvas-drawer.open {
  transform: translateX(0);
}
.canvas-drawer-header {
  position: sticky;
  top: 0;
  background: #0c0c0c;
  border-bottom: 1px solid #222;
  padding: 12px 16px;
  z-index: 1;
}
.canvas-drawer-body {
  padding: 12px 16px;
}

/* Canvas + Add node FAB */
.canvas-fab {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
}

/* Sticky notes (Phase 34b.5) */
.canvas-sticky {
  transition: transform 80ms;
}
.canvas-sticky:hover .canvas-sticky-header {
  opacity: 1 !important;
}
.canvas-sticky-body:focus {
  background: rgba(255, 255, 255, 0.04);
}

/* ── LinkedIn Activity view (Phase 3 of LI overhaul) ───────────────── */
.li-activity-view { display: flex; flex-direction: column; gap: 12px; }

.li-activity-header {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.li-activity-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.li-activity-status-pill { font-size: 14px; }
.li-activity-status-text { font-weight: 600; }
.li-activity-sessions { font-size: 13px; }

.li-activity-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.li-activity-tile {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  padding: 8px 10px;
  text-align: center;
}
.li-activity-tile-ok { border-color: rgba(80,200,120,0.3); }
.li-activity-tile-fail { border-color: rgba(220,80,80,0.3); }
.li-activity-tile-skip { border-color: rgba(180,180,180,0.2); }
.li-activity-tile-value { font-size: 20px; font-weight: 700; }
.li-activity-tile-label { font-size: 11px; opacity: 0.7; }

.li-activity-top-errors { font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.li-activity-error-chip {
  display: inline-block;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(220,80,80,0.15);
  color: rgba(255,200,200,0.95);
  margin-left: 6px;
}

.li-activity-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  padding: 4px 0;
}
.li-activity-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: inherit;
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 12px;
  cursor: pointer;
}
.li-activity-chip.active {
  background: rgba(100,150,255,0.18);
  border-color: rgba(100,150,255,0.4);
}

.li-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.li-activity-row {
  display: grid;
  grid-template-columns: 70px 24px 1fr 60px 100px auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  background: rgba(255,255,255,0.015);
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
  font-family: ui-monospace, "SFMono-Regular", monospace;
}
.li-activity-row:hover { background: rgba(255,255,255,0.05); }
.li-activity-row-fail { background: rgba(220,80,80,0.06); }
.li-activity-row-fail:hover { background: rgba(220,80,80,0.12); }
.li-activity-row-skip { opacity: 0.7; }
.li-activity-time { opacity: 0.6; }
.li-activity-icon { text-align: center; }
.li-activity-action { font-weight: 600; }
.li-activity-status { font-size: 11px; letter-spacing: 0.5px; opacity: 0.8; }
.li-activity-source { font-size: 11px; }
.li-activity-detail { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.li-activity-drawer-dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 13px; }
.li-activity-drawer-dl dt { opacity: 0.6; font-weight: 500; }
.li-activity-drawer-dl dd { margin: 0; word-break: break-word; }
.li-activity-drawer-pre {
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

/* ── Print: clean A4 client report ────────────────────────────────────
   "Download PDF" on the Client report calls window.print(). Hide the app
   chrome (topbar / sidebar / toasts / in-page controls) and expand the
   content so the browser print dialog produces a shareable PDF. Force exact
   colors so the branded bars/badges survive the print pipeline. */
@media print {
  /* Hide the app chrome + in-page controls; keep the report itself. */
  .topbar, #sidebar, #toast-region, .ui-modal-backdrop,
  .report-controls { display: none !important; }
  .app, .main, .content, #content-wrap, #content {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    margin: 0 !important;
  }
  #content { padding: 0 8px !important; }
  /* Keep the designed dark theme so the inline light text + colored bars
     stay legible (a forced-white page would hide them). Force exact colors
     so backgrounds/bars/badges survive the print pipeline. */
  .card, .ui-card, .stat-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  @page { margin: 12mm; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Carrying the marketing site's treatment into the app, 2026-08-22.

   The same idea as landing/ocb.css: a container is a glass surface with a 1px
   border and a top bevel, not a flat fill. Restraint is heavier here than on the
   marketing site on purpose. This is a tool people keep open all day, so there is
   no ambient glow, no gradient type and no parallax; depth comes from the bevel
   and the border alone, which costs nothing to read past.
   ═══════════════════════════════════════════════════════════════════════════ */

/* An inset 0 1px 0 shadow has no blur, so it is a hairline catching the top edge
   rather than a shadow. It is what makes a flat fill read as a surface. */
.card,
.ui-card,
.stat-card {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.032) 0%,
    rgba(255, 255, 255, 0.008) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* The topbar sits above everything and should read that way. */
.topbar {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Modals and the drawer are the app's foreground: heavier glass, and a real
   shadow now that blurred shadows are permitted again. */
.modal,
.modal-content,
.drawer {
  border-radius: var(--radius-lg);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.012) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 32px 70px -30px rgba(0, 0, 0, 0.75);
}
.drawer-backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.52);
}

/* Nav items get the same rounding as everything else; they were square. */
.nav-item,
.sidebar a {
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-primary:hover {
    transform: none;
  }
}
