/* ─────────────────────────────────────────────────────────────────────────
   Ortus Outreach — Bugatti-inspired Command Deck
   Rules: pure #000/#fff/#999, no cards, no shadows, no gradients,
          no accent colors (except gold on Start CTA label),
          sculptural display type weight 400, mono caps UI labels,
          transparent pill buttons, radii 0 or 9999 only,
          hover = opacity shift only.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Canvas */
  --bg: #0a0a0a;
  --bg-soft: rgba(255, 255, 255, 0.03);
  --ink: #fafafa;
  --gray: #999999;
  --hairline: rgba(255, 255, 255, 0.15);
  --hairline-soft: rgba(255, 255, 255, 0.06);

  /* Functional-only */
  --green: #3fb950;
  --red: #f85149;
  /* Monitoring accent — matches the dashboard monitoring card's blue.
     Brightened for legibility now that it's used for text (mode chip),
     not just the pulsing dot. Light theme darkens it for contrast. */
  --blue: #6ea3d4;

  /* Gold — used ONLY on the primary Start CTA label */
  --gold: #F7BE68;

  /* Type */
  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --mono: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout */
  --sidebar-w: 260px;
  --rightpane-w: 360px;
  /* v2.59: sticky bottom runbar was removed (parallel-campaigns Phase 6.3).
     The action cluster now lives inside the Live Status section. Keep the
     variable at 0 so the main/right-pane bottom padding collapses. */
  --runbar-h: 0px;

  /* v2.61: Mode-picker card surfaces (dark) */
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-bg-hover: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.18);
  --card-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  --card-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.55);
  --gold-tint-bg: rgba(247, 190, 104, 0.10);
  --gold-tint-shadow: rgba(247, 190, 104, 0.15);
}

body.theme-light {
  --bg: #fafafa;
  --bg-soft: #faf9f7;
  --ink: #0a0a0a;
  --gray: #999999;
  --hairline: rgba(0, 0, 0, 0.15);
  --hairline-soft: rgba(0, 0, 0, 0.06);
  --blue: #3a6ea5;

  /* v2.61: Mode-picker card surfaces (light) */
  --card-bg: #ffffff;
  --card-bg-hover: #fbfaf6;
  --card-border: rgba(0, 0, 0, 0.18);
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
  --card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.16);
  --gold-tint-bg: rgba(247, 190, 104, 0.16);
  --gold-tint-shadow: rgba(247, 190, 104, 0.22);
}

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

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────────
   App shell
   ───────────────────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rightpane-w);
  min-height: 100vh;
}
/* Responsive rules for .app and .right-pane live AFTER the .right-pane
   base rule (around line ~260) so they actually win source-order cascade.
   Do NOT add right-pane hide rules here — they get overridden. */

/* ─────────────────────────────────────────────────────────────────────────
   Sidebar
   ───────────────────────────────────────────────────────────────────────── */
.sidebar {
  border-right: 1px solid var(--hairline);
  padding: 0;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sidebar-brand {
  padding: 32px 28px 32px;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
}
.sidebar-wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.sidebar-wordmark em { font-style: normal; color: var(--ink); }
.sidebar-sub {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 14px;
}

/* v2.73 — in-app update pill. Hidden unless a newer GitHub release exists.
   Uses the same gold-tint emphasis as the active nav item so it reads as
   "actionable" without competing with the Start CTA. */
.update-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold-tint-bg);
  border: 1px solid var(--gold);
  border-radius: 9999px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.update-pill:hover { opacity: 0.8; }
.update-pill:disabled { cursor: default; opacity: 0.6; }
.update-pill .update-pill-arrow { color: var(--gold); font-weight: 700; }

/* Muted variant — the "Check for updates" button shown when already current.
   Monochrome (no gold) so it doesn't compete with a real update prompt. */
.update-pill.update-pill-muted {
  background: transparent;
  border-color: var(--hairline);
  color: var(--gray);
}
.update-pill.update-pill-muted:hover { opacity: 1; color: var(--ink); border-color: var(--ink); }

/* Download progress under the button. */
.update-status { margin-top: 8px; }
.update-bar {
  height: 3px;
  background: var(--hairline);
  border-radius: 9999px;
  overflow: hidden;
}
.update-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width 0.3s ease;
}
.update-status-text {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.update-detail { margin-top: 6px; }
.update-detail-btn {
  font-size: 0.72rem;
  background: none;
  border: none;
  color: var(--gray);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.update-log-pre {
  max-height: 160px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 0.68rem;
  white-space: pre-wrap;
  color: var(--ink);
  background: rgba(127,127,127,0.12);
  padding: 6px;
  margin-top: 4px;
}

/* v2.76 — per-Past-campaign monitoring on/off chip. */
/* Matches the compact STOPPED EARLY badge (.pa-stopped) so the row's pills are
   visually consistent. */
.mon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 9px;
  box-sizing: border-box;
  width: 168px;          /* fixed so every action pill is the same size */
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 9999px;
  border: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.mon-chip:hover { opacity: 0.75; }
.mon-chip:disabled { cursor: default; opacity: 0.6; }
/* On = actively reopening browsers → gold-tint emphasis so it stands out. */
.mon-chip.is-on { color: var(--ink); border-color: var(--gold); background: var(--gold-tint-bg); }
/* Off = muted. */
.mon-chip.is-off { color: var(--gray); }
/* Solo = a one-off check action; neutral ink outline. */
.mon-chip.is-solo { color: var(--ink); border-color: var(--hairline); }
.mon-chip.is-solo:hover { border-color: var(--ink); opacity: 1; }
/* Stop-solo = halt the running solo check; red to read as a stop action. */
.mon-chip.is-stop-solo { color: var(--red); border-color: var(--red); }
.mon-chip.is-stop-solo:hover { background: rgba(248, 81, 73, 0.08); opacity: 1; }

/* v2.59.12 — nav restyled to the card language: container holds the horizontal
   inset (12px) so each item is an inset rounded row; items are buttons/cards
   with a clear hover surface; the active step gets the selected-card treatment
   (gold-tint fill + gold hairline + bold). 12px container + 16px item padding =
   the same 28px text inset as the rest of the sidebar, so alignment is kept. */
.sidebar-nav { padding: 24px 12px; flex: 1; }
.nav-section-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 18px 16px 8px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  background: none;
  width: 100%; box-sizing: border-box; text-align: left;
  font-weight: 400;
  opacity: 0.78;
}
.nav-item:hover { opacity: 1; background: var(--hairline-soft); }
.nav-item.active {
  opacity: 1;
  background: var(--gold-tint-bg);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
}
.nav-num {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--gray);
  width: 24px;
  letter-spacing: 0;
  line-height: 1;
}
.nav-item.active .nav-num { color: var(--gold); }

/* Theme toggle — two mono pills */
.theme-toggle-group { padding: 0 28px 20px; }
.theme-toggle-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
}
.theme-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.theme-toggle button {
  background: transparent;
  border: 1px solid var(--hairline);
  cursor: pointer;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: 9999px;
  transition: opacity 0.15s;
  opacity: 0.55;
  font-weight: 400;
}
.theme-toggle button:hover { opacity: 1; }
.theme-toggle button.active { opacity: 1; border-color: var(--ink); }

/* Edit labels toggle (mirrors theme toggle) */
.edit-toggle-group { padding: 0 28px 20px; }
.edit-toggle-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
}
.edit-toggle { display: flex; flex-wrap: wrap; gap: 6px; }
.edit-toggle button {
  background: transparent;
  border: 1px solid var(--hairline);
  cursor: pointer;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: 9999px;
  transition: opacity 0.15s;
  opacity: 0.7;
  font-weight: 400;
  flex: 1;
  min-width: 0;
}
.edit-toggle button:hover { opacity: 1; border-color: var(--ink); }
#edit-btn-save { color: var(--gold); border-color: var(--gold) !important; opacity: 1; }

/* Edit mode — highlight editable elements with dashed gold outline + pencil cue */
body.edit-mode [data-edit] {
  outline: 1px dashed var(--gold);
  outline-offset: 4px;
  cursor: text;
  position: relative;
  transition: background 0.15s;
}
body.edit-mode [data-edit]:hover { background: rgba(247, 190, 104, 0.08); }
body.edit-mode [data-edit]:focus {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
  background: rgba(247, 190, 104, 0.12);
}
body.edit-mode [data-edit]::after {
  content: '✎';
  position: absolute;
  top: -4px;
  right: -18px;
  color: var(--gold);
  font-size: 0.7rem;
  pointer-events: none;
  opacity: 0.7;
}
body.edit-mode .section-toggle .caret { opacity: 0.4; }

.sidebar-footer {
  padding: 20px 28px;
  border-top: 1px solid var(--hairline);
}
.user-chip {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  line-height: 1.8;
}
.user-chip strong { color: var(--ink); font-weight: 400; display: block; }
.sidebar-signout { margin-top: 14px; width: 100%; justify-content: center; padding: 10px 0; font-size: 0.6rem; letter-spacing: 0.2em; }

/* ─────────────────────────────────────────────────────────────────────────
   Main
   ───────────────────────────────────────────────────────────────────────── */
.main {
  padding: 28px 56px calc(var(--runbar-h) + 32px) 56px;
  overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   Right pane — command-center status panels (desktop only)
   ─────────────────────────────────────────────────────────────────────────
   HIDDEN 2026-05-27: the v0.3 dashboard provides equivalent info (Active card,
   Monitoring, Calendar, Past), so the right-pane is redundant. Kept in markup
   so JS that targets #right-pane / .rp-* doesn't error; just not displayed.
   To restore: set body[data-show-right-pane="true"] and the @media block
   below will take over visibility.
*/
.right-pane {
  border-left: 1px solid var(--hairline);
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  padding: 32px 0 calc(var(--runbar-h) + 32px) 0;
  display: none; /* was: flex */
}
/* Grid is always 2-column now (right-pane hidden). Was previously responsive. */
.app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) !important; }
/* Opt-in restoration path (set body[data-show-right-pane="true"] to bring it back) */
body[data-show-right-pane="true"] .right-pane { display: flex; flex-direction: column; }
body[data-show-right-pane="true"] .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rightpane-w) !important; }
.rp-section {
  padding: 24px 28px;
  border-bottom: 1px solid var(--hairline);
}
.rp-section:last-child { border-bottom: none; }
.rp-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 14px;
}
.rp-status-line {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.rp-dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--gray); display: inline-block;
  flex-shrink: 0;
}
.rp-dot.running { background: var(--green); }
.rp-sub {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 10px;
  line-height: 1.6;
}

.rp-passover-group { margin-bottom: 14px; }
.rp-passover-group:last-child { margin-bottom: 0; }
.rp-passover-name {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px;
}
.rp-passover-state {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-transform: uppercase;
}
.rp-passover-state.active { color: var(--green); }
.rp-passover-state.closed { color: var(--gray); }
.rp-passover-detail {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 4px;
}

.rp-schedule-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.rp-schedule-time {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 6px;
}
.rp-none {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}

.rp-feed { flex: 1; overflow-y: auto; padding: 0 28px 24px; }
.rp-feed-title {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 24px 0 14px;
  border-top: 1px solid var(--hairline);
}
.rp-feed-item {
  display: grid; grid-template-columns: 52px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.rp-feed-item:last-child { border-bottom: none; }
.rp-feed-time {
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.rp-feed-text { line-height: 1.5; }
.rp-feed-text.success { color: var(--green); }
.rp-feed-text.error { color: var(--red); }

.rp-selected-count {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--hairline);
}
.page-header-title { min-width: 0; }
.page-header .subtitle { margin-top: 6px; }

/* Preset pill in the run-bar — opens a popover upward with list + actions */
.preset-pill { position: relative; display: inline-flex; }
.preset-pill-btn {
  display: inline-flex; align-items: center; gap: 8px;
}
.preset-pill-count {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  color: var(--gray);
  line-height: 1.4;
}
.preset-pill-caret { color: var(--gray); font-size: 0.72rem; }

.preset-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  min-width: 320px;
  max-height: 70vh; overflow-y: auto;
  border: 1px solid var(--hairline);
  background: var(--bg);
  padding: 8px 0;
  box-shadow: 0 -8px 28px rgba(0,0,0,0.55);
  z-index: 1000;
}
body.theme-light .preset-popover { box-shadow: 0 -8px 28px rgba(0,0,0,0.12); }
/* Inline variant — pill sits next to the campaign name input (top of the
   wizard), so the popover opens DOWNWARD and hangs off the pill's left edge. */
.preset-pill--inline .preset-popover {
  bottom: auto; top: calc(100% + 10px);
  right: auto; left: 0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}
body.theme-light .preset-pill--inline .preset-popover { box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
.preset-pill--inline .preset-pill-btn { white-space: nowrap; }
.preset-pop-label {
  padding: 10px 20px 6px;
  font-family: var(--mono); font-size: 0.54rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray);
}
.preset-pop-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.preset-pop-item:hover { background: rgba(255,255,255,0.04); }
body.theme-light .preset-pop-item:hover { background: rgba(0,0,0,0.04); }
.preset-pop-item .preset-pop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-pop-item .preset-pop-tag {
  color: var(--gray); font-size: 0.55rem; white-space: nowrap;
}
/* v2.57.7: delete X is always faintly visible (runbar-clarity sketch
   §2 variant A). Was opacity:0 by default → hover row to reveal, which
   made the affordance feel non-existent. Now default 0.45, full opacity
   on its own hover. */
.preset-pop-item .preset-pop-delete {
  opacity: 0.45; border: none; background: transparent; color: var(--red);
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.18em;
  cursor: pointer; padding: 2px 6px;
  transition: opacity 0.15s;
}
.preset-pop-item:hover .preset-pop-delete { opacity: 0.75; }
.preset-pop-item .preset-pop-delete:hover { opacity: 1; }
.preset-pop-dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--green); display: inline-block; margin-right: 10px;
  vertical-align: middle;
}
.preset-pop-divider {
  height: 1px; background: var(--hairline); margin: 6px 0;
}
.preset-pop-empty {
  padding: 10px 20px; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray);
  font-style: italic;
}
.preset-pop-action {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  border-top: 1px solid var(--hairline);
  margin-top: 6px;
}
.preset-pop-action:hover { color: var(--gold); }
.preset-pop-caret { color: var(--gray); }

/* Greeting top-bar (Sketch C) */
.greeting-wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.greeting-subtitle {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Compact stats recap at top-right of header (replaces old overview-hero) */
.header-stats {
  display: flex;
  align-items: stretch;
  margin-top: 6px;
  flex-shrink: 0;
}
.header-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 18px;
  border-left: 1px solid var(--hairline);
  white-space: nowrap;
}
.header-stat:first-child { border-left: none; padding-left: 0; }
.header-stat .k {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
.header-stat .v {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.header-stat .v.small {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-top: 4px;
}
.header-stat .v.warn { color: #f2a03d; }
.header-stat .v.err { color: var(--red); }
.header-stat .v.err:empty,
.header-stat .v.err:is(:not(:empty):is([data-zero])) { color: var(--ink); }
@media (max-width: 900px) {
  .page-header { flex-direction: column; }
  .header-stats { margin-top: 24px; flex-wrap: wrap; }
}
.page-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}
h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 4.2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 8px;
}
h1 span { color: var(--ink); font-style: normal; font-weight: 400; }
h1 small {
  font-family: var(--mono);
  font-size: 0.7rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  opacity: 1 !important;
  font-weight: 400 !important;
  vertical-align: middle;
  margin-left: 16px !important;
}
.subtitle {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Overview hero — 4 big-number stat columns at the top
   ───────────────────────────────────────────────────────────────────────── */
.overview-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 56px;
}
.hero-stat {
  padding: 32px 28px;
  border-right: 1px solid var(--hairline);
}
.hero-stat:last-child { border-right: none; }
.hero-stat-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 14px;
}
.hero-stat-value {
  font-family: var(--display);
  font-weight: 400;
  font-size: 4rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.hero-stat-value.small {
  font-size: 1.1rem;
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-stat-value.err { color: var(--red); }
.hero-stat-sub {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 12px;
}
.hero-stat-sub.active { color: var(--green); }

/* ─────────────────────────────────────────────────────────────────────────
   Sections — no cards; hairline dividers + vertical rhythm only
   ───────────────────────────────────────────────────────────────────────── */
.section {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(247, 190, 104, 0.35);
  border-radius: 0;
  padding: 48px 0 0 0;
  margin-bottom: 56px;
}
.section:first-of-type { border-top: none; padding-top: 0; }
/* Template sub-sections belong to the same "4." block — no gold divider, tighter spacing */
.section.tpl-section {
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
  margin-bottom: 28px;
}

.section h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.section h2 small {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 400;
  margin-left: 12px;
  vertical-align: middle;
}

/* Labels (form labels, section labels): mono caps */
label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
  font-weight: 400;
}

/* Inputs: no card, hairline bottom border only */
input[type="text"], input[type="number"], input[type="time"], textarea, select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 12px 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.95rem;
  margin-bottom: 24px;
  transition: opacity 0.15s;
  font-weight: 400;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--gray); opacity: 0.6; }
textarea { resize: vertical; min-height: 72px; font-family: var(--body); }
select {
  cursor: pointer; padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
  appearance: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Presets (big shortcuts)
   ───────────────────────────────────────────────────────────────────────── */
.preset-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 12px;
}
.my-identity-row { margin-bottom: 8px; }
.my-identity-label {
  display: block;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gray);
  margin-bottom: 6px;
}
.my-identity-hint {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em;
  text-transform: none; color: var(--gray);
  margin-left: 6px; opacity: 0.85;
}
.my-identity-row input {
  width: 100%; max-width: 360px;
}
.preset {
  background: transparent; border: 1px solid var(--hairline); cursor: pointer;
  padding: 18px 22px; text-align: left; transition: opacity 0.15s;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  font-family: inherit; color: inherit;
  border-radius: 0;
}
.preset:hover { opacity: 0.75; }
.preset.active { border-color: var(--ink); }
.preset-title {
  font-family: var(--display); font-size: 1.3rem; line-height: 1;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink);
  font-weight: 400;
}
.preset-desc {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray); margin-top: 4px;
}
.preset-count {
  font-family: var(--display); font-size: 2.2rem; line-height: 1;
  color: var(--gray); font-weight: 400;
}
.preset.active .preset-count { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────────────
   v2.62 (variant C): Section 3 — slim summary bar + browse card.
   Consolidates the 3 preset cells + Match Name input into one segmented
   card, then wraps the browse panel (toolbar + chips + grid) in a single
   card with internal hairline subdivisions.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Credit-passover banner (v2.112.10, Window C) ── */
/* Gold-bordered, gold-tint banner at the top of section 3: explanation on the
   left, two countdown blocks (Monthly OP/InMail/SN, Weekly CC) on the right.
   The day count + Active/Closed state are populated by renderPassoverBanner(). */
.acct-banner {
  display:flex; align-items:stretch; gap:0; overflow:hidden;
  border:1.5px solid var(--gold); border-radius:16px;
  background:var(--gold-tint-bg);
  margin:12px 0 16px;
}
.acct-banner-l { flex:1; padding:22px 26px; min-width:0; }
.acct-banner-h {
  font-family:var(--display); font-size:1.6rem; letter-spacing:0.04em;
  color:var(--ink); display:flex; align-items:center; gap:12px; margin-bottom:8px;
}
.acct-banner-h .ic { font-size:1.5rem; }
.acct-banner-sub {
  font-family:var(--body); font-size:0.92rem; color:var(--ink);
  line-height:1.55; max-width:640px;
}
.acct-banner-r { flex:none; display:flex; }
.acct-cd {
  width:190px; padding:22px 20px; display:flex; flex-direction:column;
  justify-content:center; gap:3px;
  border-left:1px solid rgba(247,190,104,0.4); background:var(--card-bg);
}
.acct-cd-t { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray); }
.acct-cd-n { font-family:var(--display); font-size:2.4rem; line-height:0.9; color:var(--ink); }
.acct-cd-s { font-family:var(--mono); font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray); }
.acct-cd-s.pass-on { color:var(--green); }
.acct-cd-s.pass-off { color:var(--gray); }
.acct-cd-s.pass-assigned { color:var(--blue); }
.acct-cd-w { font-family:var(--body); font-size:0.74rem; color:var(--gray); margin-top:3px; }

@media (max-width: 900px) {
  .acct-banner { flex-direction:column; }
  .acct-banner-r { flex-wrap:wrap; }
  .acct-cd { width:50%; border-left:none; border-top:1px solid rgba(247,190,104,0.4); }
}

/* ── Compact stat pills (v2.112.10, Window C) ── */
/* The .acct-summary-bar now lays out as a pill row (number + small uppercase
   label, active one gold-tinted). Buttons keep their ids + applyPreset()
   onclicks; only the classes/CSS changed. */
.acct-summary-bar.acct-pills {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  background:transparent; border:none; box-shadow:none; border-radius:0;
  padding:0; margin:0 0 16px;
}
.acct-summary-bar.acct-pills > *:not(:first-child) { border-left:none; }
.acct-summary-bar.acct-pills .acct-pill {
  display:flex !important; flex-direction:row; align-items:baseline; gap:9px;
  padding:11px 18px; border:1px solid var(--card-border); border-radius:9999px;
  background:var(--card-bg); cursor:pointer; text-align:left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.acct-summary-bar.acct-pills .acct-pill:hover { background:var(--hairline-soft); opacity:1; }
.acct-summary-bar.acct-pills .acct-pill.active {
  background:var(--gold-tint-bg); border:1px solid var(--gold); padding:11px 18px;
}
.acct-summary-bar.acct-pills .acct-pill .acct-pill-num {
  font-family:var(--display); font-size:1.3rem; font-weight:500;
  color:var(--ink); line-height:1; letter-spacing:0.01em;
}
.acct-summary-bar.acct-pills .acct-pill.active .acct-pill-num { color:var(--gold); }
.acct-summary-bar.acct-pills .acct-pill .acct-pill-lbl {
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.14em;
  text-transform:uppercase; font-weight:600; color:var(--gray); line-height:1;
}
.acct-summary-bar.acct-pills .acct-pill.active .acct-pill-lbl { color:var(--gray); }
/* Match-name block sits at the end of the pill row, pushed to its own line on
   narrow widths. Keeps #my-identifier + its label + Override link intact. */
.acct-summary-bar.acct-pills .acct-pill-match {
  flex:1 1 240px; min-width:220px; padding:0; margin:0;
  display:flex; flex-direction:column; gap:4px; justify-content:center;
}

.acct-summary-bar {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  align-items: stretch;
  padding: 10px 8px;
  margin-bottom: 8px;
  gap: 0;  /* visual separation comes from per-cell border-left below */
  margin-top: 12px;
}
/* Visual divider between cells via border-left on every non-first cell.
   Avoids inserting separator <div>s into the grid (which broke layout
   when the column count didn't match child count). */
.acct-summary-bar > *:not(:first-child) {
  border-left: 1px solid var(--hairline-soft);
}
.acct-sb-stat {
  background: transparent;
  border: none;  /* override .preset's border */
  border-radius: 10px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  /* Force flex vertical stack so .preset's grid-template-columns: 1fr auto
     doesn't push the number to the right column. */
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  grid-template-columns: 1fr;  /* belt-and-suspenders in case display: grid */
  transition: background 0.15s ease;
  min-width: 0;
}
.acct-sb-stat:hover { background: var(--hairline-soft); opacity: 1; }
.acct-sb-stat.active {
  background: var(--gold-tint-bg);
  border: 1.5px solid var(--gold);
  padding: 10.5px 14.5px;  /* compensate for 1.5px border so geometry stays equal */
  opacity: 1;
}
.acct-sb-stat-lbl {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--gray);
  line-height: 1.2;
}
.acct-sb-stat.active .acct-sb-stat-lbl { color: var(--ink); }
.acct-sb-stat-num {
  font-family: var(--display); font-size: 1.85rem; font-weight: 500;
  color: var(--ink); line-height: 1; letter-spacing: 0.01em;
  /* override the default .preset-count to fit the slim bar */
}
.acct-sb-stat.active .acct-sb-stat-num { color: var(--gold); }
.acct-sb-stat-desc {
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; color: var(--gray);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.acct-sb-match {
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center;
  min-width: 0;
  margin-bottom: 0;  /* override .my-identity-row's margin-bottom */
}
.acct-sb-match .acct-sb-match-lbl {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--gray);
  margin-bottom: 0;
  display: flex; align-items: center; gap: 10px;
}
.acct-sb-match input {
  width: 100%;
  max-width: none;  /* override .my-identity-row input max-width: 360px */
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  padding: 6px 0 4px;
  font-family: var(--mono); font-size: 1rem; font-weight: 500;
  outline: none;
}
.acct-sb-match input:focus { border-bottom-color: var(--ink); }
.acct-sb-match .identifier-toggle-link {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
  text-decoration: none; font-weight: 600;
  margin-left: auto;  /* push to right edge of the label flex row */
}

.acct-sb-hint {
  font-size: 0.72rem; color: var(--gray); padding: 0 22px 16px;
  line-height: 1.5; max-width: 720px;
}

@media (max-width: 900px) {
  .acct-summary-bar { grid-template-columns: 1fr 1fr; }
  .acct-summary-bar .acct-sb-divider { display: none; }
}

/* Browse card wrapper */
.browse-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-top: 8px;
}
.browse-card .browse-card-head {
  padding: 14px 22px;
  margin: 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-family: var(--display); font-size: 1.15rem; letter-spacing: 0.02em;
  font-weight: 500; color: var(--ink);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.browse-card .browse-card-head .caret { color: var(--gold); font-size: 0.9rem; }
.browse-card .browse-card-body { padding: 0; }

.browse-toolbar {
  display: flex; align-items: center; padding: 12px 18px; gap: 12px;
  border-bottom: 1px solid var(--hairline-soft);
  flex-wrap: wrap;
}
.browse-search { flex: 1; min-width: 200px; }
.browse-search input {
  width: 100%; padding: 9px 14px 9px 38px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: 9999px;
  font-family: var(--mono); font-size: 0.85rem; color: var(--ink);
  outline: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.browse-search input::placeholder { color: var(--gray-faint, #b8b8b6); }
.browse-search input:focus { border-color: var(--ink); background-color: var(--card-bg); }

.browse-icon-row { display: flex; gap: 4px; }
.browse-icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: 9999px;
  color: var(--ink); cursor: pointer; background: transparent;
  position: relative;  /* for refresh-soo progress overlay */
  overflow: hidden;
}
.browse-icon-btn:hover { border-color: var(--ink); background: var(--hairline-soft); }
.browse-icon-btn svg { width: 15px; height: 15px; }
.browse-icon-btn[disabled] { opacity: 0.6; cursor: wait; }
.browse-icon-btn.refresh-soo .refresh-soo-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
}
.browse-icon-btn.refresh-soo .refresh-soo-bar { display: block; height: 100%; background: var(--gold); }

.browse-secondary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; gap: 14px;
  border-bottom: 1px solid var(--hairline-soft);
}
/* v2.112.10: the big Credit-passover banner at the top of section 3 now owns
   this info, so the small in-toolbar mirror is hidden. renderPassoverBanner()
   still populates #passover-banner (harmless) — only display changes here. */
.browse-secondary .passover-banner { display: none; }
.browse-secondary .passover-banner-legacy {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline;
  margin: 0; padding: 0;
}
.browse-bulk-row { display: flex; gap: 6px; }
.bulk-pill {
  padding: 6px 12px;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  color: var(--ink); border: 1px solid var(--hairline);
  border-radius: 9999px; background: transparent; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bulk-pill:hover { border-color: var(--ink); background: var(--hairline-soft); }

/* Chips inside the new browse-toolbar — override the legacy .chip-row
   border-bottom/padding/margin so they sit tight in the toolbar */
.browse-toolbar .chip-row {
  padding: 0; border: none; margin: 0;
  flex-wrap: nowrap;
  gap: 4px;
}
.browse-toolbar .chip {
  padding: 6px 12px; font-size: 0.58rem; letter-spacing: 0.14em;
  background: transparent;
}
.browse-toolbar .chip.active { background: var(--ink); color: var(--bg); box-shadow: var(--card-shadow); }
/* The active toolbar chip has an --ink background, so its count must use --bg to
   stay legible — otherwise the number is the same color as its pill (invisible
   in both themes). */
.browse-toolbar .chip.active .count { color: var(--bg); border-left-color: var(--bg); }

/* Profile grid inside browse card: 6-col dense, compact items */
.browse-card .profile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px;
  padding: 12px 18px 18px;
  background: transparent; border: none;
  max-height: 480px;
  overflow-y: auto;
}
.browse-card .profile-item {
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  /* v2.59.9 — was hardcoded #fff: account cards were white with light text in
     dark mode (unreadable). var(--card-bg) inverts per theme. */
  background: var(--card-bg);
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
}
.browse-card .profile-item:hover { background: var(--card-bg-hover); border-color: var(--card-border); box-shadow: var(--card-shadow); opacity: 1; }
.browse-card .profile-item.selected { background: var(--card-bg-hover); border-color: var(--ink); }
.browse-card .profile-item .name { font-size: 0.74rem; line-height: 1.3; white-space: normal; word-break: break-all; }
/* v2.102.0: duplicate-email marker on the profile picker survivor card. */
/* v2.160.138 — GoLogin workspace tag. Only rendered on accounts belonging to
   a DIFFERENT GoLogin workspace than the signed-in operator's (Linked Velocity
   vs Ortus). Neutral slate, not amber: this is not a warning about the account,
   it is a statement about who owns it. */
.ws-flag { display: inline-block; font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; border: 1px solid rgba(100,116,139,0.45); border-radius: 9999px; padding: 0 6px; margin-left: 6px; white-space: nowrap; vertical-align: middle; cursor: help; }
.dup-flag { display: inline-block; font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; color: #d97706; border: 1px solid rgba(217,119,6,0.45); border-radius: 9999px; padding: 0 6px; margin-left: 6px; white-space: nowrap; vertical-align: middle; cursor: help; }
/* v2.102.0: SoO-restricted account — blocked from selection, greyed + red flag. */
.restricted-flag { display: inline-block; font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; color: #c0392b; border: 1px solid rgba(192,57,43,0.5); border-radius: 9999px; padding: 0 6px; margin-left: 6px; white-space: nowrap; vertical-align: middle; cursor: help; }
.profile-item.is-restricted { opacity: 0.5; }
.profile-item.is-restricted input[type="checkbox"] { cursor: not-allowed; }
.browse-card .profile-item .id { font-size: 0.56rem; margin-top: 3px; }
.browse-card .profile-item input[type="checkbox"] { margin-top: 2px; }

/* ── JT account tile (v2.112.10, Window C) ── */
/* Cleaned two-zone account picker tile: tinted stat zone (FREE/ASSIGNED/IN USE/
   BLOCKED) + detail zone (checkbox + email + single sentence-case sub line).
   Scoped to .browse-card .profile-item.jt so it overrides the base
   .browse-card .profile-item padding. CRITICAL: the email/sub set
   text-transform:none + letter-spacing:normal to defeat the global label{}
   rule (uppercase + 0.22em) — every tile is a <label>. margin:0 kills the
   label rule's margin-bottom; uniform min-height + single-line ellipsis. */
.browse-card .profile-item.jt {
  display:flex; align-items:stretch; gap:0; padding:0; margin:0; overflow:hidden;
  min-height:64px;
  border:1px solid var(--hairline); border-radius:10px; background:var(--card-bg);
  text-transform:none; letter-spacing:normal;
}
.browse-card .profile-item.jt:hover { background:var(--card-bg); border-color:var(--card-border); box-shadow:none; opacity:1; }
.browse-card .profile-item.jt.selected { border-color:var(--ink); background:var(--card-bg-hover); }
.browse-card .profile-item.jt.muted { opacity:0.5; }
/* In-use tiles are de-emphasised but the gold must still read clearly — a
   lighter dim than the heavy 0.5 used for blocked/NA so the yellow shows. */
.browse-card .profile-item.jt.muted-soft { opacity:0.82; }
.browse-card .profile-item.jt.is-restricted input[type="checkbox"] { cursor:not-allowed; }
.browse-card .profile-item.jt .jt-stat {
  width:108px; flex:none; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; padding:8px 6px;
}
.browse-card .profile-item.jt .jt-stat.s-free { background:rgba(63,185,80,0.10); }
.browse-card .profile-item.jt .jt-stat.s-assigned { background:rgba(58,110,165,0.12); }
.browse-card .profile-item.jt .jt-stat.s-inuse { background:rgba(247,190,104,0.24); }
.browse-card .profile-item.jt .jt-stat.s-stop { background:rgba(248,81,73,0.10); }
/* No SoO row — the tile's data can't be trusted, so it reads red rather than
   defaulting to a green FREE. The word is longer than the other states, so it
   wraps instead of overflowing the fixed 108px stat zone. */
.browse-card .profile-item.jt .jt-stat.s-nosoo { background:rgba(248,81,73,0.10); }
.browse-card .profile-item.jt .s-nosoo .jt-dot { background:var(--red); }
.browse-card .profile-item.jt .s-nosoo .jt-word { color:var(--red); font-size:0.82rem; text-align:center; line-height:1.15; }
.browse-card .profile-item.jt.is-nosoo .jt-email { color:var(--red); }
/* Blocked-but-fixable: the account's address is not on HubSpot's
   linkedin_1st_connections option list, so its people cannot be imported.
   AMBER, deliberately not red — s-nosoo above is red because no SoO email
   exists and nothing can be done about it. This one is one button press from
   working, and the colour is what tells those two apart at a glance. */
.browse-card .profile-item.jt .jt-stat.s-fixable { background:rgba(247,190,104,0.16); }
.browse-card .profile-item.jt .s-fixable .jt-dot { background:var(--gold); }
.browse-card .profile-item.jt .s-fixable .jt-word { color:var(--gold); font-size:0.82rem; text-align:center; line-height:1.15; }
.browse-card .profile-item.jt.is-fixable .jt-email { color:var(--gold); }
/* HS UNKNOWN is two words like NEEDS HS LIST — same wrap treatment. */
.browse-card .profile-item.jt .s-assigned .jt-word { font-size:0.82rem; text-align:center; line-height:1.15; }
/* (The .hs-fix "Add to the HubSpot list" button was removed — Check now adds
   missing accounts to the linkedin_1st_connections list automatically. The
   2026-08-18 picker-states sketch keeps its own copy of these styles.) */
.browse-card .profile-item.jt .jt-dot { width:9px; height:9px; border-radius:50%; }
.browse-card .profile-item.jt .s-free .jt-dot { background:var(--green); }
.browse-card .profile-item.jt .s-assigned .jt-dot { background:var(--blue); }
.browse-card .profile-item.jt .s-inuse .jt-dot { background:var(--gold); }
.browse-card .profile-item.jt .s-stop .jt-dot { background:var(--red); }
.browse-card .profile-item.jt .jt-word { font-family:var(--display); font-size:1.08rem; letter-spacing:0.06em; line-height:1; }
.browse-card .profile-item.jt .s-free .jt-word { color:var(--green); }
.browse-card .profile-item.jt .s-assigned .jt-word { color:var(--blue); }
.browse-card .profile-item.jt .s-inuse .jt-word { color:var(--gold); }
.browse-card .profile-item.jt .s-stop .jt-word { color:var(--red); }
.browse-card .profile-item.jt .jt-det {
  flex:1; min-width:0; padding:11px 15px;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
}
.browse-card .profile-item.jt .jt-top { display:flex; align-items:center; gap:10px; min-width:0; }
.browse-card .profile-item.jt .jt-top input { flex:none; margin:0; }
.browse-card .profile-item.jt .jt-email {
  font-family:var(--body); font-size:0.88rem; font-weight:500; color:var(--ink);
  text-transform:none; letter-spacing:normal; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.browse-card .profile-item.jt .jt-sub {
  font-family:var(--body); font-size:0.74rem; color:var(--gray);
  text-transform:none; letter-spacing:normal; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:30px;
}
.browse-card .profile-item.jt .jt-sub b { color:var(--ink); font-weight:600; }

/* Typed-in {sender first name} for an account the SoO can't name. Aligned to
   the sub line's 30px gutter so it sits under the email, not under the
   checkbox. Hairline + no radius, per the command-deck system. */
.browse-card .profile-item.jt .jt-name-row { padding:4px 8px 2px 30px; }
.browse-card .profile-item.jt .jt-name-input {
  width:100%; box-sizing:border-box;
  font-family:var(--body); font-size:0.74rem; font-weight:400;
  text-transform:none; letter-spacing:normal;
  color:var(--ink); background:transparent;
  border:1px solid var(--hairline); border-radius:0;
  padding:3px 6px;
}
.browse-card .profile-item.jt .jt-name-input::placeholder { color:var(--gray); opacity:0.8; }
.browse-card .profile-item.jt .jt-name-input:focus { outline:none; border-color:var(--ink); }

/* Variant C — per-channel breakdown tile (Message Campaign · Direct Messages ·
   InMail Only). Same shell + typography as the two-zone .jt tile; a slim accent
   stripe replaces the status word, and a clean 3-column channel row replaces the
   single sub line. Channel labels reuse the small-caps mono treatment; values use
   the body font (overriding the global label{} uppercase/spacing trap). */
.browse-card .profile-item.jt.jt-brk { padding:0; align-items:stretch; }
.browse-card .profile-item.jt.jt-brk .brk-accent {
  width:4px; align-self:stretch; flex:none; border-radius:9999px;
  margin:10px 0 10px 8px; background:var(--gray);
}
.browse-card .profile-item.jt.jt-brk .brk-accent.free { background:var(--green); }
.browse-card .profile-item.jt.jt-brk .brk-accent.busy { background:var(--gold); }
.browse-card .profile-item.jt.jt-brk .jt-det { padding:11px 15px; }
.browse-card .profile-item.jt.jt-brk .brk-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px; padding-left:30px;
}
.browse-card .profile-item.jt.jt-brk .brk-k {
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gray); margin:0; line-height:1.2;
}
.browse-card .profile-item.jt.jt-brk .brk-v {
  display:flex; align-items:center; gap:6px; margin-top:3px;
  font-family:var(--body); font-size:0.9rem; color:var(--ink);
  text-transform:none; letter-spacing:normal; line-height:1.3; min-width:0;
}
.browse-card .profile-item.jt.jt-brk .brk-vt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Email shrinks so it ellipsizes before the owner pill, which sits flush right. */
.browse-card .profile-item.jt.jt-brk .jt-top .jt-email { flex:1; min-width:0; }
.browse-card .profile-item.jt.jt-brk .asg-tag {
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:0.62rem; letter-spacing:0.04em; text-transform:none;
  color:var(--blue); border:1px solid var(--blue); border-radius:9999px; padding:2px 9px; line-height:1.4;
}
.browse-card .profile-item.jt.jt-brk .brk-vdot { width:8px; height:8px; border-radius:50%; flex:none; }
.browse-card .profile-item.jt .d-avail { background:var(--green); }
.browse-card .profile-item.jt .d-inuse { background:var(--gold); }
.browse-card .profile-item.jt .d-spent { background:var(--gray); }
.browse-card .profile-item.jt .d-na    { background:var(--red); }

/* Local browser tile inside the new browse card — compact full-width
   row: [checkbox] [Local Browser] [— your system Chrome…]. Name and
   description sit inline on the same baseline, so the row reads like
   one sentence instead of a two-line stat block. */
.browse-card .local-browser-host { padding: 12px 18px 0; margin: 0; }
.browse-card .local-browser-host .local-browser-tile {
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--card-bg);
  padding: 10px 14px;
  gap: 12px;
  align-items: center;
  grid-template-columns: auto 1fr;
}
/* Kill the .profile-item.local-browser::before bullet inside browse-card —
   the checkbox already signals selectability, the bullet just adds noise. */
.browse-card .local-browser-host .local-browser-tile::before { display: none; }

/* Body becomes a flex baseline row so name + description sit on one line.
   The first-name input row (.local-browser-name-row) wraps to its own line
   below via flex-basis: 100% when revealed. */
.browse-card .local-browser-host .local-browser-tile .local-browser-body {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
}
.browse-card .local-browser-host .local-browser-tile .name {
  font-family: var(--body);
  font-size: 0.92rem; font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0;
  flex-shrink: 0;
}
.browse-card .local-browser-host .local-browser-tile .name::after {
  content: " ·";
  color: var(--gray);
  margin-left: 4px;
}
.browse-card .local-browser-host .local-browser-tile .id {
  font-size: 0.78rem; color: var(--gray); line-height: 1.45;
  white-space: normal; letter-spacing: 0;
  text-transform: none;
  font-family: var(--body);
  font-weight: 400;
  flex: 1; min-width: 200px;
}
.browse-card .local-browser-host .local-browser-tile > input[type="checkbox"] {
  margin-top: 0;
  align-self: center;
}
/* First-name input row breaks to its own line when revealed */
.browse-card .local-browser-host .local-browser-tile .local-browser-name-row {
  flex-basis: 100%;
  margin-top: 6px;
}

@media (max-width: 1100px) {
  .browse-card .profile-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .browse-card .profile-grid { grid-template-columns: repeat(2, 1fr); }
  .browse-secondary { flex-direction: column; align-items: flex-start; }
}

/* Filter chips */
.chip-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 16px 0; border-bottom: 1px solid var(--hairline);
  margin-bottom: 18px;
}
.chip {
  padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 9999px;
  background: transparent; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray); cursor: pointer; font-weight: 400;
  display: flex; align-items: center; gap: 8px;
  transition: opacity 0.15s;
}
.chip:hover { color: var(--ink); }
.chip.active { color: var(--ink); border-color: var(--ink); }
.chip .count {
  color: var(--gray); font-size: 0.54rem;
  padding-left: 6px; border-left: 1px solid var(--hairline);
}
.chip.active .count { color: var(--ink); border-left-color: var(--ink); }

/* Per-card status bar — 3-segment default, 4-segment when .status-bar-4 */
.status-bar {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px;
  margin-top: 8px; height: 4px;
}
.status-bar.status-bar-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.status-seg { height: 100%; background: var(--hairline); border-radius: 2px; }
.status-seg.avail, .status-seg.available { background: var(--green); }
.status-seg.in-use, .status-seg.used { background: var(--gold); }
.status-seg.na { background: var(--red); opacity: 0.5; }
.status-legend {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray); margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Profile grid — no cards, just 1px hairline boxes
   ───────────────────────────────────────────────────────────────────────── */
.profile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px; margin-bottom: 8px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--hairline);
  background: var(--hairline-soft);
}
.profile-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--bg); border: none;
  cursor: pointer; transition: opacity 0.15s;
  min-width: 0;
}
.profile-item:hover { opacity: 0.7; }
.profile-item.selected { background: var(--hairline-soft); }
.profile-item.selected::before {
  content: ''; width: 4px; height: 4px; background: var(--ink);
  border-radius: 9999px; margin-right: 6px; flex-shrink: 0;
}
.profile-item input[type="checkbox"] { accent-color: var(--ink); width: 14px; height: 14px; flex-shrink: 0; }
.profile-item > div { min-width: 0; }
.profile-item .name {
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-item .id {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.1em; color: var(--gray); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.selected-panel {
  margin-top: 24px; padding: 20px 0 0 0;
  border: none; border-top: 1px solid var(--hairline);
  background: transparent; border-radius: 0;
}
.selected-panel h3 {
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 16px; font-weight: 400;
}
.selected-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.selected-item:last-child { border-bottom: none; }
.selected-item .order {
  width: 28px; height: 28px; border-radius: 9999px;
  border: 1px solid var(--hairline); background: transparent;
  color: var(--ink);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.selected-item .name { font-size: 0.88rem; color: var(--ink); flex: 1; }
.btn-remove {
  background: none; border: none; color: var(--ink); font-size: 1.1rem;
  cursor: pointer; padding: 2px 8px; opacity: 0.5; transition: opacity 0.15s;
}
.btn-remove:hover { opacity: 1; }

/* Account queue (live status) — vertical table form. Each row shows the
   profile name, a status pill (Running/Done/Waiting/Parked/Warning), and
   a detail line when we have a reason. Old .queue-item pill styles are gone. */
.account-queue {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hairline);
  margin-bottom: 20px;
}
.queue-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto minmax(0, 1.4fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.queue-row-actions { display: flex; gap: 6px; align-items: center; }
.queue-row-btn {
  background: var(--ink);
  color: var(--paper, #fff);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.queue-row-btn:hover { opacity: 0.85; }
.queue-row-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.queue-row-btn--ghost:hover { border-color: var(--ink); opacity: 1; }
.queue-row-num {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--gray);
  text-align: right;
}
.queue-row-name {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.queue-row.is-done .queue-row-name {
  color: var(--gray);
  text-decoration: line-through;
}
.queue-row-status {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  color: var(--gray);
  white-space: nowrap;
}
.queue-row.is-running .queue-row-status { color: var(--ink); border-color: var(--ink); }
.queue-row.is-parked  .queue-row-status { color: #c0392b; border-color: rgba(192, 57, 43, 0.45); }
.queue-row.is-warning .queue-row-status { color: #b9770e; border-color: rgba(185, 119, 14, 0.45); }

/* v2.14.x chip taxonomy — 10 distinct chips, one per state. Visual weight
   carries urgency: white=active, dim-dashed=clean terminal, amber=action,
   red=parked. See toggleAccountQueueLegend() for the operator-facing glossary. */
.queue-row.chip-queued    .queue-row-status { color: var(--gray); border-color: var(--hairline); }
.queue-row.chip-sending   .queue-row-status { color: var(--ink);  border-color: var(--ink); }
.queue-row.chip-batch     .queue-row-status { color: var(--gray); border-color: var(--hairline); border-style: dashed; }
.queue-row.chip-bulk-done .queue-row-status { color: var(--gray); border-color: var(--hairline); border-style: dashed; }
.queue-row.chip-li-invites .queue-row-status { color: var(--ink); border-color: var(--hairline); }
.queue-row.chip-li-inmail  .queue-row-status { color: var(--ink); border-color: var(--hairline); }
.queue-row.chip-needs-login  .queue-row-status { color: #b9770e; border-color: rgba(185, 119, 14, 0.55); }
.queue-row.chip-rate-limited .queue-row-status { color: #b9770e; border-color: rgba(185, 119, 14, 0.55); }
.queue-row.chip-parked    .queue-row-status { color: #c0392b; border-color: rgba(192, 57, 43, 0.5); }
.queue-row.chip-cooling   .queue-row-status { color: var(--gold); border-color: var(--gold); }

.queue-row.chip-batch .queue-row-name,
.queue-row.chip-bulk-done .queue-row-name { color: var(--gray); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Queue header + legend popover (? icon next to "Account queue" title) */
.account-queue-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 10px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}
.queue-help-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  color: var(--gray);
  font-size: 0.65rem;
  cursor: pointer;
  background: transparent;
  padding: 0; line-height: 1;
}
.queue-help-ico:hover { color: var(--ink); border-color: var(--ink); }
.account-queue-legend {
  border: 1px solid var(--hairline);
  margin: 0 14px 14px;
  padding: 14px 18px;
}
.legend-group { margin-top: 14px; }
.legend-group:first-child { margin-top: 0; }
.legend-group-title {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  border-bottom: 1px solid var(--hairline-soft);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.legend-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: center;
  padding: 5px 0;
}
.legend-row + .legend-row { border-top: 1px solid var(--hairline-soft); }
.legend-chip {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  color: var(--gray);
  white-space: nowrap;
  justify-self: start;
}
.legend-chip.chip-sending   { color: var(--ink); border-color: var(--ink); }
.legend-chip.chip-batch     { color: var(--gray); border-style: dashed; }
.legend-chip.chip-bulk-done { color: var(--gray); border-style: dashed; }
.legend-chip.chip-li-invites,
.legend-chip.chip-li-inmail { color: var(--ink); border-color: var(--hairline); }
.legend-chip.chip-needs-login,
.legend-chip.chip-rate-limited { color: #b9770e; border-color: rgba(185, 119, 14, 0.55); }
.legend-chip.chip-parked    { color: #c0392b; border-color: rgba(192, 57, 43, 0.5); }
.legend-chip.chip-cooling   { color: var(--gold); border-color: var(--gold); }
.legend-desc { font-size: 0.7rem; color: var(--gray); line-height: 1.4; }

.queue-row-detail {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--gray);
  text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   Buttons — transparent pill, 1px white border, 9999 radius, mono caps
   ───────────────────────────────────────────────────────────────────────── */
.btn-row { display: flex; gap: 12px; justify-content: flex-start; margin: 24px 0; }
.btn {
  padding: 12px 24px;
  border: 1px solid var(--ink);
  border-radius: 9999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  /* v2.57.7: labels never wrap. Without this, the runbar's tight strip
     pushed "Start Campaign" and "Force restart" onto two lines. */
  white-space: nowrap;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover { opacity: 0.6; }
.btn:active { opacity: 0.4; transform: translateY(1px); }
.btn:disabled { opacity: 0.25; cursor: not-allowed; transform: none; }

.btn-secondary { border-color: var(--hairline); color: var(--ink); }
.btn-secondary:hover { opacity: 0.6; border-color: var(--ink); }

/* Campaign Name — hero-pill card matching Sections 2 / 4 / 6 */
.section.campaign-name-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 20px 24px 18px;
  margin-bottom: 28px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.section.campaign-name-section:hover {
  box-shadow: var(--card-shadow-hover);
}
.section.campaign-name-section h2 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px 0;
}
.campaign-name-row { display: flex; align-items: center; gap: 16px; }
.campaign-name-row > input {
  flex: 1;
  margin-bottom: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 6px 0 8px;
  outline: none;
  transition: border-bottom-color 0.18s ease;
}
.campaign-name-row > input::placeholder {
  color: var(--gray);
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.campaign-name-row > input:focus { border-bottom-color: var(--ink); }
.campaign-name-row > input.has-warning { border-bottom-color: var(--red); }
.campaign-name-warn {
  font-family: var(--mono); font-size: 0.62rem; color: var(--red);
  letter-spacing: 0.06em; margin-top: 4px;
}
.campaign-name-row > .btn { margin-bottom: 4px; white-space: nowrap; }

/* Start CTA — transparent pill with 1px white border + GOLD label (the only gold in the UI) */
.btn-start {
  color: var(--gold);
  border-color: var(--ink);
  background: transparent;
  font-weight: 400;
}
.btn-start:hover { opacity: 0.7; }

/* Stop */
.btn-stop { background: var(--red); color: #fff; border-color: var(--red); font-weight: 500; }
.btn-stop:hover { opacity: 0.85; }
.btn-stop:disabled { background: transparent; color: var(--red); opacity: 0.45; }

/* Light mode — fill the CTAs for strong contrast on the off-white background */
body.theme-light .btn-start {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}
body.theme-light .btn-start:hover { opacity: 0.9; background: #000; }

body.theme-light .btn-stop {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  font-weight: 500;
}
body.theme-light .btn-stop:hover { opacity: 0.9; }

.btn-sm { padding: 8px 16px; font-size: 0.62rem; }
.btn-xs { padding: 6px 12px; font-size: 0.55rem; }

/* Pause matches Stop's filled-pill prominence so the two read as a paired
   action set, but uses a neutral grey fill (vs Stop's red) to distinguish
   "freeze" from "abort". */
.btn-pause {
  background: var(--ink);
  color: var(--paper, #fff);
  border-color: var(--ink);
  font-weight: 500;
}
.btn-pause:hover { opacity: 0.85; }
.btn-pause:disabled { background: transparent; color: var(--ink); opacity: 0.45; }

/* Run bar actions row — v2.57.7: now organised into labeled groups
   (Run / View / Recovery / Configs) with thin vertical separators
   between groups. The last group has margin-left:auto so it floats
   to the far right. See public/sketches/runbar-clarity-v1.html. */
.run-bar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
}
.run-bar-actions .preset-pill { margin-left: 0; }

/* v2.57.7: two-line status slot — campaign name on top, status text
   below. Name line collapses to 0 height when empty (idle state) so the
   row reads as a single line of "Idle". */
.run-status-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.run-status-name {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: 0.02em;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-status-name:empty { display: none; }
.run-status-text {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Grouped button clusters with thin separators between groups.
   v2.57.7 spacing tweak — pulls status leftward and the action cluster
   rightward; Recovery group gets extra left padding so it doesn't
   crowd the View button. */
.runbar-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  position: relative;
}
.runbar-group + .runbar-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: var(--hairline);
}
.runbar-group--first { padding-left: 36px; }
.runbar-group--recovery { padding-left: 26px; }
.runbar-group--last {
  padding-right: 0;
  margin-left: auto;
}
.runbar-group-label {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  margin-right: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Stats (live status)
   ───────────────────────────────────────────────────────────────────────── */
.status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0; margin-bottom: 24px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.stat-card {
  background: transparent; border: none; border-radius: 0;
  border-right: 1px solid var(--hairline);
  padding: 24px 20px;
}
.stat-card:last-child { border-right: none; }
.stat-card .label {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 12px;
}
.stat-card .value {
  font-family: var(--display); font-weight: 400; font-size: 2.6rem;
  line-height: 1; color: var(--ink); letter-spacing: 0.01em;
}
.stat-card .value.running { color: var(--ink); }
.stat-card .value.stopped { color: var(--gray); }

/* Log */
.log-panel {
  background: transparent;
  border: 1px solid var(--hairline); border-radius: 0;
  padding: 16px 20px; max-height: 420px; overflow-y: auto;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.7;
  letter-spacing: 0.02em;
}
.log-panel .entry { padding: 2px 0; color: var(--gray); }
.log-panel .entry.success { color: var(--green); }
.log-panel .entry.error { color: var(--red); }
.log-panel .entry.warn { color: var(--ink); opacity: 0.8; }
.log-panel .entry.info { color: var(--ink); }

/* Progress bar — 1px white line */
.progress-bar {
  width: 100%; height: 1px; background: var(--hairline);
  margin-bottom: 24px; overflow: hidden;
}
.progress-bar .fill {
  height: 100%; background: var(--ink);
  transition: width 0.5s ease;
}

/* ─────────────────────────────────────────────────────────────────────────
   Sheet preview
   ───────────────────────────────────────────────────────────────────────── */
.preview-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 12px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.preview-table th, .preview-table td {
  padding: 12px 16px; border: none; text-align: left;
  border-bottom: 1px solid var(--hairline-soft);
}
.preview-table th {
  background: transparent; color: var(--gray); font-weight: 400;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.preview-table td {
  color: var(--ink); max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   v2.62: Variant-C wiring — Primary Person + Cadence mini-cards (2-up)
   and the Sheet hero card. Uses the radio-card token system for the
   surfaces, with a gold-tint banner for the LinkedIn URL Column mapping
   so the load-bearing decision gets visual weight.
   ───────────────────────────────────────────────────────────────────────── */

/* Two-up row holding Primary Person + Cadence (CC+IC mode) OR
   Sender-column picker + Intro person name (IC mode). Visibility is toggled
   by onModeChange in app.js — the row itself flips display:none when no
   children apply so the grid gap doesn't show as an empty band. */
.intro-config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
  align-items: start;
}
/* v2.91: each grid cell is now a flex column holding two stacked cards.
   Stacking inside the column (instead of relying on grid row alignment)
   removes the big gap a short card used to leave above the next row. */
.intro-config-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* The left column of the IC variant holds two mutually-exclusive states
   (empty vs filled) — both stack here so the grid column only ever has
   one visible card. */
.ic-extras-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* When .ic-empty / .ic-filled live inside .intro-config-card, neutralize
   their default borders/paddings so the card chrome is the only frame. */
.intro-config-card.ic-empty {
  border-style: dashed;
  text-align: center;
  padding: 22px 22px;
}
.intro-config-card.ic-filled {
  padding-top: 18px;
  border-top: 1px solid var(--card-border);  /* match outer border, not hairline */
}
.intro-config-card.ic-filled > .ic-row {
  display: block;  /* override the default 220px/1fr grid */
  margin-bottom: 0;
}
/* Wide select used for the sender-column picker inside the IC mini-card */
.intro-config-select-wide {
  width: 100%;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: var(--body); font-size: 0.95rem; color: var(--ink); font-weight: 500;
  outline: none; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23999' stroke-width='1.5' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.intro-config-select-wide:focus { border-color: var(--ink); }

.intro-config-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 18px 22px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.intro-config-eyebrow {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--ink);
  margin-bottom: 14px;
}
.intro-config-field { margin-bottom: 4px; }
.intro-config-field:last-child { margin-bottom: 0; }
.intro-config-label {
  display: block;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 500; color: var(--gray);
  margin-bottom: 4px;
}
.intro-config-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink); padding: 8px 0;
  font-family: var(--body); font-size: 1rem; font-weight: 500; outline: none;
}
.intro-config-input:focus { border-bottom-color: var(--ink); }

/* Primary-person name recall (2026-08-27). Anchored under the name field, which
   is an underline-only input, so the panel is the only boxed thing here — it
   reads as a list hanging off the field rather than a second control. */
.pp-recall {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  background: #0d0d0d; border: 1px solid var(--hairline);
  border-radius: 0 0 9px 9px; overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}
.pp-recall[hidden] { display: none; }
.pp-recall-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 12px; cursor: pointer; border-top: 1px solid var(--hairline-soft);
}
.pp-recall-item:first-child { border-top: none; }
.pp-recall-item.on, .pp-recall-item:hover { background: rgba(255,255,255,.06); }
.pp-recall-name { font-size: .92rem; font-weight: 500; }
.pp-recall-name mark { background: none; color: var(--gold); border-bottom: 1px solid var(--gold); }
.pp-recall-url {
  font-family: var(--mono); font-size: .74rem; color: var(--gray);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 58%;
}
.pp-recall-filled { color: var(--green); font-size: .78rem; margin-top: 6px; }
.intro-config-input::placeholder { color: var(--gray-faint, #b8b8b6); font-weight: 400; }
/* v2.104 — primary URL hard-lock: red underline + inline error when the pasted
   value isn't a real personal /in/ profile link. Clears the moment it's valid. */
.intro-config-input--invalid,
.intro-config-input--invalid:focus { border-bottom-color: var(--red, #f85149); }
.intro-config-error {
  font-size: 0.82rem; color: var(--red, #f85149); margin-top: 6px; line-height: 1.5;
  font-weight: 500;
}
.intro-config-hint {
  /* v2.59.8 — bumped 0.74→0.82rem for legibility of explanatory copy. */
  font-size: 0.82rem; color: var(--gray); margin-top: 6px; line-height: 1.5;
}
.intro-config-hint code {
  font-family: ui-monospace, monospace; font-size: 0.7rem;
  background: var(--hairline-soft); padding: 1px 5px; border-radius: 3px;
}
.intro-config-inline {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--hairline);
}
.intro-config-prefix { font-size: 1rem; color: var(--ink); font-weight: 500; line-height: 1.45; }
.intro-config-select {
  background: transparent; border: none; color: var(--ink);
  font-family: var(--body); font-size: 1rem; font-weight: 500; line-height: 1.45;
  outline: none; cursor: pointer; margin: 0;
  padding: 0 22px 0 0;  /* room for chevron on the right */
  vertical-align: baseline;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

@media (max-width: 800px) {
  .intro-config-row { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   v2.154.1: Primary Manifest — replaces the old 4-card primary-config layout
   (primary-person-block + follow-up-block + auto-accept-block +
   check-cadence-block spread across the 2-up .intro-config-row grid above)
   with ONE panel: two identity fields, a plain-English readback of what will
   happen, and a collapsible "Customize" drawer holding the same real
   controls. Ported from public/sketches/2026-07-10-primary-config-overhaul-DE.html
   (variant D, "The Manifest") — scoped here under #primary-manifest instead
   of the sketch's disposable .ovD demo-variant class. Classnames are kept
   identical to the sketch (ov-panel / ov-eyebrow / ov-idgrid / auto-box /
   auto-head / auto-title / auto-edit / auto-nudge / auto-lines / al / tick /
   tok / cust / pc-cloud) — none collide with existing rules elsewhere in
   this file (the only near-misses, .off and .k, are always compound-scoped
   there: .schedule-toggle.off, .header-stat .k / .scrape-stat .k — so a bare
   .al.off / a selector scoped under #primary-manifest can't cross-match).
   One real collision: the sketch's bare .fu-line duplicates the existing
   unstyled .fu-line marker on the live-campaign monitor hero's queued-batch
   banner (index.html "queued · sent together in one batch") — if a future
   readback line needs that same dim-when-cloud treatment, use
   .manifest-fu-line instead, not .fu-line.
   The readback lines (#manifest-readback), the STANDARD/CUSTOMIZED word
   (#manifest-state), the drawer's open/close (#manifest-drawer[hidden]),
   and the cloud notice copy (#manifest-cloud-notice) are populated/toggled
   by app.js — this is markup + CSS only, so the .open state below is dead
   until that JS lands.
   ───────────────────────────────────────────────────────────────────────── */
#primary-manifest.ov-panel {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 24px 28px;
  /* .intro-config-row is still `grid-template-columns: 1fr 1fr` (shared with
     #ic-extras elsewhere) — with only one child now, span both tracks so
     the panel takes the full row width instead of collapsing to one cell. */
  grid-column: 1 / -1;
}
#primary-manifest .ov-eyebrow {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--ink);
  margin: 0 0 16px;
}
/* Identity zone (#primary-person-block) — name + URL side by side instead
   of stacked, per sketch D's "identity grid". */
#primary-manifest .ov-idgrid {
  display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 8px 30px;
}
@media (max-width: 800px) {
  #primary-manifest .ov-idgrid { grid-template-columns: 1fr; }
}

#primary-manifest .auto-box { margin-top: 22px; border-top: 1px solid var(--hairline); padding-top: 16px; }
#primary-manifest .auto-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#primary-manifest .auto-title {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray);
}
#primary-manifest .auto-title b { color: var(--ink); }

/* Customize — deliberately loud (solid ink pill + icon) so operators actually
   discover the drawer; a ghost pill would get ignored. Flips to an outline
   "Done" look when #primary-manifest carries .open (app.js toggles the class
   + swaps the button label/icon on click). */
#primary-manifest .auto-edit {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  color: var(--bg); background: var(--ink); border: 1px solid var(--ink);
  border-radius: 9999px; padding: 9px 18px; cursor: pointer;
  transition: transform 0.12s, opacity 0.12s;
}
#primary-manifest .auto-edit:hover { transform: scale(1.04); }
#primary-manifest.open .auto-edit { background: transparent; color: var(--ink); font-weight: 500; }
#primary-manifest .auto-edit svg { flex: none; }

#primary-manifest .auto-nudge { font-size: 11px; color: var(--gray); margin-top: 10px; }
#primary-manifest .auto-nudge b { color: var(--ink); }

/* Readback lines — app.js renders these into #manifest-readback (.auto-lines) */
#primary-manifest .auto-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
#primary-manifest .al { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
#primary-manifest .al .tick { font-family: var(--mono); color: var(--green); flex: none; width: 14px; }
#primary-manifest .al.off { color: var(--gray); }
#primary-manifest .al.off .tick { color: var(--gray-faint, #b8b8b6); }
#primary-manifest .al b { font-weight: 600; }
#primary-manifest .al .tok { border-bottom: 1px dashed var(--hairline); }

/* Cloud-run notice — empty slot; app.js fills + reveals it from the real
   #cloud-run-checkbox state (gold edge = the one design-system accent). */
#primary-manifest .pc-cloud {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 10px 13px;
  border: 1px solid var(--hairline); border-left: 3px solid var(--gold); border-radius: 10px;
  background: var(--hairline-soft); font-size: 12.5px; line-height: 1.5; color: var(--gray);
}
#primary-manifest .pc-cloud b { color: var(--ink); }
/* author `display:flex` above beats the UA [hidden] rule — re-assert it. */
#primary-manifest .pc-cloud[hidden] { display: none; }

/* Customize drawer — holds the real controls, moved verbatim (same ids,
   classes, and handlers as the old 4-card layout; only the parent changed). */
#primary-manifest .cust {
  margin-top: 16px; border: 1px solid var(--hairline); border-radius: 12px;
  padding: 18px 20px; background: var(--hairline-soft);
}
/* Each moved control keeps its original classing (.intro-config-card for the
   former standalone cards, .intro-config-field for the former inline
   fields). Inside the drawer, strip the standalone-card chrome
   (border/shadow/radius/bg) and replace it with a plain row separator so
   five moved blocks read as one compact list instead of nested cards. */
#primary-manifest .cust > .intro-config-card,
#primary-manifest .cust > .intro-config-field {
  border: none; box-shadow: none; border-radius: 0; background: transparent;
  padding: 14px 0; margin: 0; border-bottom: 1px solid var(--hairline-soft);
}
#primary-manifest .cust > .intro-config-card:first-child,
#primary-manifest .cust > .intro-config-field:first-child { padding-top: 0; }
#primary-manifest .cust > .intro-config-card:last-child,
#primary-manifest .cust > .intro-config-field:last-child { border-bottom: 0; padding-bottom: 0; }

/* Sheet hero card — single card wrapping URL block, preview, and mapping */
.sheet-hero {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.sheet-hero-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--hairline-soft);
}
.sheet-hero-url-block { min-width: 0; }
.sheet-hero-url-label {
  display: block;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
.sheet-hero-url-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--hairline);
  font-family: ui-monospace, 'SF Mono', monospace; font-size: 0.85rem;
  color: var(--ink); padding: 6px 0; outline: none;
}
.sheet-hero-url-input:focus { border-bottom-color: var(--ink); }
.sheet-hero .sheet-tab-hint {
  font-size: 0.72rem; color: var(--gray); margin-top: 6px; line-height: 1.5;
}
.sheet-hero .sheet-tab-hint code {
  font-family: ui-monospace, monospace; font-size: 0.7rem;
  background: var(--hairline-soft); padding: 1px 5px; border-radius: 3px;
}
.sheet-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
.sheet-hero-btn {
  padding: 8px 16px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
}

/* Preview output container — when filled, becomes the table band */
.sheet-hero-preview { padding: 0; }
.sheet-hero-preview:not(.hidden) { padding: 16px 24px 8px; }
/* Row count line from previewSheet() — restyle the plain <p> it writes */
.sheet-hero-preview > p:first-child {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--gray);
  margin: 0 0 4px 0;
  display: flex; align-items: baseline; gap: 10px;
}
.sheet-hero-preview > p:first-child::before {
  content: attr(data-count);
  font-family: var(--display); font-size: 1.6rem; font-weight: 500;
  color: var(--ink); letter-spacing: 0.01em;
}
/* Preview table inside the hero card — tighter, denser, more presence */
.sheet-hero-preview .preview-table {
  margin-top: 8px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.98rem; /* v2.112.28: bumped for legibility (was 0.85rem) */
}
.sheet-hero-preview .preview-table th {
  background: var(--hairline-soft);
  padding: 10px 14px;
  font-size: 0.74rem; font-weight: 600; /* v2.112.28: was 0.58rem — headers were unreadable */
}
.sheet-hero-preview .preview-table td {
  padding: 11px 14px;
}

/* LinkedIn URL Column mapping — gold-tint banner (written by previewSheet
   as .ic-filled > .ic-row). Only when inside the sheet hero — global .ic-row
   uses elsewhere keep their existing styling. */
.sheet-hero-preview .ic-filled {
  margin: 14px 0 4px;
  padding: 14px 16px;
  background: var(--gold-tint-bg);
  border: 1px solid var(--gold);
  border-radius: 10px;
  border-top: 1px solid var(--gold);  /* override .ic-filled's top hairline */
}
.sheet-hero-preview .ic-filled .ic-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: center;
  margin-bottom: 0;
}
.sheet-hero-preview .ic-filled .ic-label-block .ic-label {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700; color: var(--ink);
  line-height: 1.3;
}
.sheet-hero-preview .ic-filled .ic-label-block .ic-sub {
  font-size: 0.74rem; color: var(--ink); opacity: 0.78; margin-top: 4px;
  line-height: 1.5;
}
.sheet-hero-preview .ic-filled .ic-label-block .ic-sub code {
  /* v2.59.8 — was hardcoded #fff → in dark mode the example URL was white
     text on white (invisible). Gold-tint surface reads in both themes. */
  background: var(--gold-tint-bg); border: 1px solid var(--gold);
  padding: 1px 5px; border-radius: 3px;
}
.sheet-hero-preview .ic-filled .ic-select {
  /* v2.59.8 — was hardcoded #fff (invisible dropdown text in dark mode). */
  background-color: var(--card-bg);
  border: 1px solid var(--gold);
  color: var(--ink);
  font-weight: 500;
  /* Use background-color above so the inherited .ic-select chevron is
     preserved. Override the chevron tint to gold for the gold-tint context. */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b69653' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

@media (max-width: 700px) {
  .sheet-hero-top { grid-template-columns: 1fr; }
  .sheet-hero-actions { width: 100%; }
  .sheet-hero-preview .ic-filled .ic-row { grid-template-columns: 1fr; }
}

/* ── Task 6: multi-tab lead-source picker ── */
.tabpick { margin-top: 0; border-top: 1px solid var(--hairline-soft); padding: 16px 24px 18px; background: var(--gold-tint-bg); }
.tabpick-head { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); margin-bottom: 10px; display:flex; align-items:center; gap:8px; }
.tabpick-head .dot { width:7px; height:7px; border-radius:9999px; background: var(--gold); flex-shrink:0; }
.tabpick select { width: 100%; font-family: var(--mono); font-size: 0.85rem; color: var(--ink);
  background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: 8px; padding: 11px 12px; }
.tabpick-preview { margin-top: 12px; border-top: 1px solid var(--hairline-soft); padding-top: 12px; }
.tabpick-cols { font-family: var(--mono); font-size: 0.78rem; color: var(--gray); margin-bottom: 8px; }
.tabpick-cols b { color: var(--green); }
table.mini { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.66rem; }
table.mini th { text-align: left; color: var(--gray); font-weight: 500; padding: 4px 8px; border-bottom: 1px solid var(--hairline); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.56rem; }
table.mini td { padding: 5px 8px; color: var(--ink); border-bottom: 1px solid var(--hairline-soft); }
.tabpick-ok { font-family: var(--mono); font-size: 0.78rem; color: var(--green); margin-top: 10px; }
/* ── Task 6: hard-stop launch block (red) ── */
.leadblock { padding: 14px 16px; background: rgba(248,81,73,0.08);
  border: 1px solid var(--red); border-left: 3px solid var(--red); border-radius: 8px; margin-top: 12px; }
.leadblock .lb-title { font-family: var(--mono); font-size: 0.74rem; color: var(--red); font-weight: 600; margin-bottom: 6px; }
.leadblock .lb-body { font-family: var(--mono); font-size: 0.66rem; color: var(--ink); line-height: 1.55; }
.leadblock code { background: var(--hairline-soft); padding: 1px 5px; border-radius: 4px; }
/* ── Task 6: rerun tab-change modal ── */
.modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 50; }
.modal-scrim.open { display: flex; }
.modal-card { width: 440px; max-width: 92vw; background: var(--card-bg); border: 1px solid var(--gold);
  border-radius: 12px; padding: 22px; box-shadow: var(--card-shadow-hover); }
.modal-card.solid { background: var(--bg); }
.modal-eyebrow { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.modal-title { font-family: var(--display); font-size: 1.25rem; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 10px; }
.modal-body { font-family: var(--mono); font-size: 0.74rem; color: var(--ink); line-height: 1.6; margin-bottom: 8px; }
.modal-body .from { color: var(--red); } .modal-body .to { color: var(--green); }
.modal-note { font-family: var(--mono); font-size: 0.64rem; color: var(--gray); margin-bottom: 18px; }
.modal-acts { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Launch feedback popup (Issues ⑤ + ①) — instant "Launching…" modal shown
   the moment Start is pressed. Reuses .modal-scrim/.modal-card; centered
   content + a spinner. z-index above other modals so it always wins on click. */
#launch-scrim { z-index: 120; }
#launch-scrim .modal-card { text-align: center; width: 380px; }
.launch-spinner { width: 34px; height: 34px; margin: 4px auto 16px; border-radius: 50%;
  border: 3px solid var(--hairline); border-top-color: var(--gold);
  animation: launch-spin 0.8s linear infinite; }
@keyframes launch-spin { to { transform: rotate(360deg); } }
.launch-sub { font-family: var(--mono); font-size: 0.66rem; color: var(--gray); line-height: 1.55; margin-top: 2px; }

.hidden { display: none; }

.note-hint {
  font-size: 0.86rem;
  color: var(--gray);
  margin-top: 6px;
  line-height: 1.4;
}

/* v2.119.19 — variant A: gold callout for the "you usually don't need a note"
   nudge. Shown only when the operator has typed into the note box (the .hidden
   toggle is driven by shouldShowNoteHint). .hidden must win over the callout
   display, hence the more-specific .note-hint-callout.hidden rule. */
.note-hint.note-hint-callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--gold-tint-bg);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 11px 13px;
  margin-top: 8px;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
}
.note-hint.note-hint-callout.hidden { display: none; }
.note-hint-callout .nh-ic { color: var(--gold); font-weight: 800; font-size: 1rem; line-height: 1.2; flex: 0 0 auto; }
.note-hint-callout .nh-tx b { color: var(--gold); }

/* Placeholder tags */
.placeholder-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px 0; }
.placeholder-tags .tag {
  display: inline-block; padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--hairline); border-radius: 9999px;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  transition: opacity 0.15s; user-select: none;
}
.placeholder-tags .tag:hover { opacity: 0.6; }

/* ─────────────────────────────────────────────────────────────────────────
   v2.62: Section 5 (Message Templates) — variant A hero cards.
   Each template (Connection Note, Group Title, Intro Body, etc.) is a
   self-contained card with eyebrow + content + placeholder chips. The
   visible "Preview messages" CTA sits at the top of the section.
   ───────────────────────────────────────────────────────────────────────── */

.tpl-cta-row {
  display: flex; align-items: center; gap: 16px;
  margin: 12px 0 18px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}
.tpl-preview-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  /* v2.59.12 — outlined pill: transparent bg + var(--ink) text/border. This is
     theme-safe by construction (ink always contrasts the page in both themes),
     so it can't go white-on-white (dark) or black-text-on-black (light) like the
     inverted fill did. Hover fills with ink and flips text to bg. */
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 9999px;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.tpl-preview-btn:hover:not([disabled]) { background: var(--ink); color: var(--bg); }
.tpl-preview-btn[disabled] {
  background: var(--hairline-soft);
  color: var(--gray);
  border-color: var(--hairline);
  cursor: not-allowed;
}
.tpl-preview-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.tpl-cta-hint { font-size: 0.82rem; color: var(--gray); line-height: 1.5; } /* v2.59.8 — bumped 0.74→0.82 */

/* Each template sub-section becomes a hero card. Override the legacy
   .section.tpl-section's top hairline / padding so it reads as a card. */
.section.tpl-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 22px 26px;
  margin-bottom: 14px;
}
.section.tpl-section h2 {
  /* Override the big display h2 — templates use a mono eyebrow instead */
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.3;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.section.tpl-section h2 small {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 2px 8px;
  border-radius: 9999px;
  margin-left: 0;
}

/* Inputs and textareas inside template cards — soft-bg rounded blocks */
.section.tpl-section textarea,
.section.tpl-section input[type="text"] {
  width: 100%;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.55;
  outline: none;
  resize: vertical;
}
.section.tpl-section textarea:focus,
.section.tpl-section input[type="text"]:focus {
  border-color: var(--ink);
  background: var(--card-bg);
}
.section.tpl-section textarea::placeholder,
.section.tpl-section input[type="text"]::placeholder {
  color: var(--gray-faint, #b8b8b6);
}

/* Labels above inputs (Subject / Body in InMail + Open Profile) — small caps */
.section.tpl-section label {
  display: block;
  font-family: var(--mono); font-size: 0.55rem;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--gray);
  margin: 14px 0 6px;
}
.section.tpl-section label:first-of-type { margin-top: 0; }

/* Char counter (e.g. 142 / 300) — top-right of card */
.section.tpl-section #tpl-note-count {
  font-family: var(--mono); font-size: 0.7rem;
  color: var(--gray); margin-top: 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Placeholder chips inside template cards — tighter, gold-tint on hover */
.section.tpl-section .placeholder-tags {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
  gap: 6px;
}
.section.tpl-section .placeholder-tags::before {
  content: "Insert";
  display: inline-flex;
  align-items: center;
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600; color: var(--gray);
  margin-right: 4px;
}
.section.tpl-section .placeholder-tags .tag {
  font-family: ui-monospace, monospace;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  /* v2.59.8 — was hardcoded #fff: white pill + var(--ink) (near-white) text in
     dark mode = invisible. var(--card-bg) is a lifted surface in dark, white in
     light, so the chip reads in both. */
  background: var(--card-bg);
  border-color: var(--hairline);
  padding: 4px 10px;
}
/* v2.59.8 — light mode: white-on-white chips read as faint, so give them a
   stronger border + subtle fill ("even more visible in the light version"). */
body.theme-light .section.tpl-section .placeholder-tags .tag {
  background: #f1efe9;
  border-color: rgba(0, 0, 0, 0.28);
}
.section.tpl-section .placeholder-tags .tag:hover {
  background: var(--gold-tint-bg);
  border-color: var(--gold);
  opacity: 1;
}

/* Template controls */
.template-controls .template-bar { display: flex; gap: 12px; align-items: center; }
.template-controls .template-bar select { flex: 1; margin-bottom: 0; }
.template-controls .template-bar .btn { padding: 10px 18px; font-size: 0.62rem; white-space: nowrap; }
.btn-save-tpl { border-color: var(--ink) !important; color: var(--ink) !important; background: transparent !important; }

/* ─────────────────────────────────────────────────────────────────────────
   History
   ───────────────────────────────────────────────────────────────────────── */
.history-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;
}
.history-header h2 { margin-bottom: 0; }

.section-toggle { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 16px; }
.section-toggle .caret {
  display: inline-block; transition: transform 0.15s ease;
  font-size: 0.8em; color: var(--gray);
  line-height: 1;
}
.section.collapsible.collapsed .section-toggle .caret { transform: rotate(-90deg); }
.section.collapsible.collapsed .collapsible-body { display: none; }

/* Inner collapsible (e.g. accounts browser inside the Accounts section) */
.accounts-browser { margin-top: 0; }
.accounts-browser-toggle {
  font-family: var(--display); font-weight: 400; font-size: 1.2rem;
  line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.accounts-browser.collapsed .accounts-browser-toggle { margin-bottom: 0; }
.accounts-browser.collapsed .section-toggle .caret { transform: rotate(-90deg); }
.accounts-browser.collapsed .collapsible-body { display: none; }

.history-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
  border-top: 1px solid var(--hairline);
}
.history-table th, .history-table td {
  padding: 14px 16px; border: none; text-align: left;
  border-bottom: 1px solid var(--hairline-soft);
}
.history-table th {
  color: var(--gray); font-weight: 400;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: transparent;
  position: sticky; top: 0;
}
.history-table td { color: var(--ink); }
.history-table tbody tr { cursor: pointer; transition: opacity 0.15s; }
.history-table tbody tr:hover { opacity: 0.7; }
.history-table .success-count { color: var(--green); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.history-table .error-count { color: var(--red); font-family: var(--mono); font-variant-numeric: tabular-nums; }

.history-detail { display: none; background: var(--hairline-soft); }
.history-detail.expanded { display: table-row; }
.history-detail td { padding: 16px 20px; font-size: 0.78rem; color: var(--ink); border-bottom: 1px solid var(--hairline); }
.history-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.history-detail dt { color: var(--gray); font-weight: 400; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; }
.history-detail dd { color: var(--ink); margin: 0; }

.empty-state {
  color: var(--gray); font-size: 0.75rem;
  text-align: center; padding: 32px 0;
  font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────────────
   Schedules
   ───────────────────────────────────────────────────────────────────────── */
.schedule-form {
  background: transparent;
  border: 1px solid var(--hairline); border-radius: 0;
  padding: 24px; margin-bottom: 20px;
}
.schedule-item {
  display: flex; align-items: center; gap: 16px; padding: 16px 0;
  background: transparent; border: none;
  border-bottom: 1px solid var(--hairline-soft);
  border-radius: 0; margin-bottom: 0; transition: opacity 0.2s;
}
.schedule-item:hover { opacity: 0.7; }
.schedule-item .sched-info { flex: 1; }
.schedule-item .sched-name { font-size: 0.9rem; font-weight: 400; color: var(--ink); }
.schedule-item .sched-meta { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em; color: var(--gray); margin-top: 4px; text-transform: uppercase; }
.schedule-item .sched-actions { display: flex; gap: 10px; align-items: center; }

.schedule-toggle {
  width: 40px; height: 22px; border-radius: 9999px;
  border: 1px solid var(--hairline); background: transparent;
  cursor: pointer; transition: opacity 0.2s; position: relative;
}
.schedule-toggle.on { border-color: var(--ink); }
.schedule-toggle.off { border-color: var(--hairline); }
.schedule-toggle::after {
  content: ''; width: 14px; height: 14px; border-radius: 9999px;
  background: var(--ink); position: absolute; top: 3px; transition: left 0.2s;
}
.schedule-toggle.on::after { left: 21px; background: var(--ink); }
.schedule-toggle.off::after { left: 3px; background: var(--gray); }

/* Local Browser */
.profile-item.local-browser::before {
  content: ''; width: 4px; height: 4px; background: var(--ink);
  border-radius: 9999px; margin-right: 6px; flex-shrink: 0; opacity: 0.5;
}
.profile-item.local-browser .id { color: var(--ink); }

/* SoO badges — mono caps, no color */
.soo-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.soo-badge {
  font-family: var(--mono); font-size: 0.55rem;
  padding: 2px 8px; border-radius: 9999px;
  font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid var(--hairline);
  color: var(--ink); background: transparent;
}
.soo-badge.in-use { background: rgba(247, 190, 104, 0.16); color: var(--gold); border-color: var(--gold); }
.soo-badge.available { background: rgba(63, 185, 80, 0.16); color: var(--green); border-color: var(--green); }
.soo-badge.used { background: rgba(247, 190, 104, 0.10); color: var(--gold); border-color: var(--gold); }
.soo-badge.na { background: rgba(248, 81, 73, 0.14); color: var(--red); border-color: var(--red); }
.soo-user { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; color: var(--gray); margin-top: 2px; text-transform: uppercase; }

/* Passover (inline) */
.passover-banner {
  background: transparent;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-left: none; border-right: none;
  border-radius: 0;
  padding: 14px 0; margin-bottom: 16px;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
  display: flex; flex-wrap: wrap; gap: 6px 32px;
}
.passover-banner strong { color: var(--ink); font-weight: 400; }
.passover-banner strong.passover-active { color: var(--green); }

/* ── Header-stat Passover pills ────────────────────────────────────────────
   Two mini-pills (monthly + weekly) replace the single misleading ACTIVE word.
   One per passover window; state is encoded in the class. */
.header-stat .v.passover-pills {
  display: inline-flex; gap: 6px; align-items: center;
  /* Match the numeric stats' box height (font-size 1.5rem, line-height 1) and
     center the pills in it, so their center sits on the same line as the big
     numbers. Also drop the 4px padding-top inherited from .v.small, which was
     nudging the pills down out of alignment. */
  min-height: 1.5rem; padding-top: 0;
  font-size: 0.62rem; letter-spacing: 0.15em;
}
.passover-pill {
  display: inline-block; padding: 3px 8px;
  border: 1px solid var(--hairline); border-radius: 9999px;
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s;
}
.passover-pill.active { color: var(--green); border-color: var(--green); }
.passover-pill.closed { color: var(--gray); border-color: var(--hairline); }
/* v2.59.8 — light mode: the bright --green (#3fb950) and #999 gray read as faint
   on the light canvas at this small size. Use darker, higher-contrast tones and
   a hairline fill so the OP·IM·SN / CC pills are clearly visible. */
body.theme-light .passover-pill.active {
  color: #1c7a2e; border-color: #1c7a2e; background: rgba(63, 185, 80, 0.10);
}
body.theme-light .passover-pill.closed {
  color: #6a6a68; border-color: rgba(0, 0, 0, 0.25);
}

/* ── Right-pane SoO error pill ─────────────────────────────────────────────
   Surfaces when /api/soo-status returns a non-200 or an error payload. */
.rp-soo-error {
  margin-top: 14px; padding: 8px 10px;
  border: 1px solid var(--red); border-radius: 9999px;
  color: var(--red); font-family: var(--mono);
  font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-align: center;
  background: transparent;
}

/* ── "Refresh SoO" button with 10s progress bar ────────────────────────────
   Progress bar fills across the button's bottom edge during the fetch window.
   Starts at 0%, animates to 100% over 10s (the server-side timeout) while
   the button is disabled; snaps down on completion. */
.btn.refresh-soo { position: relative; overflow: hidden; }
.btn.refresh-soo[disabled] { opacity: 0.6; cursor: wait; }
.refresh-soo-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--hairline-soft);
  pointer-events: none;
}
.refresh-soo-bar {
  display: block; height: 100%; width: 0%;
  background: var(--ink);
}
body.theme-light .refresh-soo-bar { background: var(--ink); }

/* Day toggle checkboxes */
.day-toggle {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 12px; border-radius: 9999px;
  border: 1px solid var(--hairline); background: transparent;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); transition: opacity 0.15s;
}
.day-toggle:hover { opacity: 0.7; }
.day-toggle:has(input:checked) { color: var(--ink); border-color: var(--ink); }
.day-toggle input { display: none; }

/* Campaign summary (legacy) */
#campaign-summary {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
#campaign-summary #summary-stats { display: none; }

/* Steppers (settings section) */
.stepper-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--hairline);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin: 24px 0;
}
.stepper { background: var(--bg); padding: 28px 32px; }
.stepper-label {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray);
  margin-bottom: 14px; font-weight: 400;
}
.stepper-row { display: flex; align-items: center; gap: 20px; }
.stepper-input {
  flex: 1; width: auto !important; min-width: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: var(--display) !important;
  font-size: 4.4rem !important;
  line-height: 0.95 !important;
  color: var(--ink) !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0 !important;
  -moz-appearance: textfield;
}
.stepper-input:focus { outline: none; }
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.stepper-ctrl { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.step-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--hairline); background: transparent;
  color: var(--ink); font-family: var(--display); font-size: 1.2rem;
  cursor: pointer; border-radius: 9999px; line-height: 1;
  transition: opacity 0.15s;
  padding: 0;
}
.step-btn:hover { opacity: 0.6; border-color: var(--ink); }
.stepper-unit {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); margin-top: 14px;
}

/* Campaign hero summary */
.campaign-hero {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline);
  padding: 0 !important; margin: 24px 0 !important;
}
.hero-cell { background: var(--bg); padding: 24px 28px; }
.hero-k {
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray);
  margin-bottom: 12px;
}
.hero-v {
  font-family: var(--display); font-size: 2.8rem; line-height: 1;
  color: var(--ink); font-weight: 400; letter-spacing: 0.01em;
}
.hero-v.accent { color: var(--gold); }
.hero-sub {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray); margin-top: 10px;
}

/* Inline warnings */
.campaign-warnings-inline {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0 0;
  border-top: 1px solid var(--hairline);
  margin-top: 8px;
}
.campaign-warnings-inline .warn-line {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray); display: flex; gap: 10px; align-items: center;
}
.campaign-warnings-inline .warn-line::before {
  content: '⚠'; color: var(--gold);
}

#campaign-warnings {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--hairline) !important;
  padding: 12px 0 !important;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray) !important;
}

/* ── Run target ── */
/* Ported verbatim from public/sketches/2026-07-10-run-target-FGH.html
   (variant F, lines 62-73). #run-target sits directly above Section 1;
   tabs are inert until Task 2.3 wires setRunTarget(). */
.rt-tabs { display:flex; border:1px solid var(--hairline); border-radius:9999px; padding:4px; gap:4px; }
.rt-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 18px; border-radius:9999px;
  border:none; background:transparent; cursor:pointer; transition:background .15s, color .15s; }
.rt-tab .t { font-family:var(--mono); font-size:0.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gray); }
.rt-tab .s { font-size:10.5px; color:var(--gray); }
.rt-tab.on { background:var(--ink); }
.rt-tab.on .t { color:var(--bg); }
.rt-tab.on .s { color:var(--bg); opacity:.7; }  /* hardcoded white vanished on the light-on-dark selected tile */
.rt-tab:disabled, .rt-tab.rt-tab-disabled { opacity:.4; cursor:not-allowed; }
.rt-facts { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; padding:0 6px; }
.rt-fact { font-size:11px; color:var(--gray); display:flex; gap:6px; align-items:baseline; }
.rt-fact b { color:var(--ink); font-weight:600; }
.rt-fact .i { font-family:var(--mono); }

/* Launch note — filled in by Task 2.3 (setRunTarget) with local/cloud copy. */
.launch-run-note { margin-top:8px; font-size:12px; color:var(--gray); line-height:1.5; }
.launch-run-note b { color:var(--ink); }

/* ─────────────────────────────────────────────────────────────────────────
   Campaign Mode picker — v2.61 rounded radio-cards, gold pulse on active
   Scoped to .mode-grid so specificity (0,2,0) beats the
   `body[data-dashboard='v3'] button { font: inherit }` rule in
   dashboard-v0.3.css (which is 0,1,2).
   ───────────────────────────────────────────────────────────────────────── */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 32px;
}
.mode-grid .mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 22px 24px 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 160px;
}
.mode-grid .mode-card:hover {
  background: var(--card-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}
.mode-grid .mode-card.active {
  background: var(--gold-tint-bg);
  border-color: var(--gold);
  box-shadow: 0 0 0 1.5px var(--gold), 0 10px 28px var(--gold-tint-shadow);
  transform: translateY(-2px);
}
.mode-grid .mode-card.active:hover {
  box-shadow: 0 0 0 1.5px var(--gold), 0 14px 34px var(--gold-tint-shadow);
}

/* Pulsing gold dot indicator on selected card — pure CSS via pseudos */
.mode-grid .mode-card.active::before,
.mode-grid .mode-card.active::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
}
.mode-grid .mode-card.active::before {
  opacity: 0.7;
  animation: mode-card-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.mode-grid .mode-card.active::after {
  box-shadow: 0 0 8px 2px rgba(247, 190, 104, 0.55);
}
@keyframes mode-card-ping {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Disabled (coming-soon) */
.mode-grid .mode-card.is-coming-soon {
  cursor: not-allowed;
  opacity: 0.55;
  border-style: dashed;
  box-shadow: none;
}
.mode-grid .mode-card.is-coming-soon:hover {
  transform: none;
  background: var(--card-bg);
  box-shadow: none;
}
.mode-grid .mode-card.is-coming-soon::before,
.mode-grid .mode-card.is-coming-soon::after { display: none; }

.mode-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  border: 1px solid var(--hairline);
  padding: 4px 9px;
  border-radius: 9999px;
}

.mode-card-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-right: 28px; /* room for the pulse dot */
}
.mode-grid .mode-card.active .mode-card-title { color: var(--gold); }
.mode-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.82;
  line-height: 1.6;
}
.mode-card-bullets li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
}
.mode-card-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.7;
}
.mode-grid .mode-card.active .mode-card-bullets li::before { opacity: 1; }

@media (max-width: 960px) {
  .mode-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mode-grid { grid-template-columns: 1fr; }
  .mode-grid .mode-card { min-height: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Launch — big-number hero
   ───────────────────────────────────────────────────────────────────────── */
.launch-hero {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 48px;
  padding: 36px 32px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  margin-bottom: 32px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.launch-hero:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border);
}
.launch-number {
  font-family: var(--display);
  font-weight: 400;
  font-size: 10rem;
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.launch-caption {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 12px;
  line-height: 1.8;
}
.launch-caption strong { color: var(--ink); font-weight: 400; }
.launch-actions { display: flex; flex-direction: row; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.launch-actions .btn { padding: 12px 24px; font-size: 0.64rem; letter-spacing: 0.18em; flex: 0 0 auto; }

/* v2.61: 4-button launch column — Start a campaign / Queue it / Schedule it /
   Save as draft. Vertical stack within the 320px right column; all buttons
   equal width so nothing reads as orphaned. Start is the primary CTA, the
   other three are secondary actions. */
.launch-actions.launch-actions--four {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
}
.launch-actions.launch-actions--four .btn {
  width: 100%;
  /* v2.59.12 — bigger, bolder labels that fill the pill + full-contrast text
     on the secondary ("white") buttons (was 0.68rem / weight 400, reading thin
     and low-contrast). */
  padding: 16px 22px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
  justify-content: center;
}
.launch-actions.launch-actions--four .btn-secondary {
  color: var(--ink);
  border-color: var(--ink);
}
.launch-actions.launch-actions--four #btn-start {
  padding: 18px 20px;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  /* v2.59.12 — dark mode: a FILLED WHITE pill (var(--ink) is near-white in dark)
     with dark text — the inverse of light mode's filled-black pill. Scoped to the
     launch Start only (not the shared "+ New campaign" / resume buttons). */
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  font-weight: 700;
}
/* Light mode keeps the filled-black pill with the signature gold label. */
body.theme-light .launch-actions.launch-actions--four #btn-start {
  background: var(--ink);
  color: var(--gold);
  border-color: var(--ink);
}

.launch-right {
  display: flex; flex-direction: column; gap: 18px;
  align-items: stretch;
  min-width: 320px;
}
.launch-right .launch-mode-toggle { align-self: flex-end; }

/* v2.112.x: explains the disabled launch buttons when you're viewing the LIVE
   campaign (applyViewingActiveLock). Muted, right-aligned under the buttons. */
.launch-lock-hint {
  align-self: flex-end;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin-top: -8px;
}

/* Overlapping panel stage — Now and Schedule share the same grid cell. The
   cell auto-sizes to the taller panel, so there's no layout jump on switch. */
.launch-panel-stage {
  display: grid;
  grid-template-areas: 'stage';
}
.launch-panel {
  grid-area: stage;
  transition:
    opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.launch-panel.panel-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.launch-panel.panel-inactive {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Day picker — pill toggles instead of native checkboxes */
.schedule-inline-days .day-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.schedule-inline-days .day-row label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
  cursor: pointer;
  user-select: none;
  transition:
    color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.schedule-inline-days .day-row label:hover { color: var(--ink); border-color: var(--ink); }
.schedule-inline-days .day-row label:active { transform: translateY(1px); }
.schedule-inline-days .day-row label:has(input:checked) {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}
.schedule-inline-days .day-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

/* Launch mode toggle (Now / Schedule) */
.launch-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 4px;
  gap: 4px;
}
.launch-mode-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 20px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  border-radius: 9999px;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.launch-mode-btn:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.launch-mode-btn.active { background: var(--ink); color: var(--bg); }
.launch-mode-btn:hover:not(.active) { color: var(--ink); }

.launch-panel { margin-top: 28px; }
.schedule-inline-row {
  display: grid; grid-template-columns: 2fr 1fr; gap: 16px;
  margin-bottom: 18px;
}
.schedule-inline-days { margin-bottom: 18px; }
.schedule-days-label {
  display: block;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gray);
  margin-bottom: 8px;
}
.schedule-inline-days .day-row {
  display: flex; flex-wrap: wrap; gap: 14px;
}
.schedule-inline-days .day-row label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink);
  cursor: pointer;
}
.schedule-inline-days .day-row input[type="checkbox"] { accent-color: var(--gold); }
.schedule-note {
  margin-top: 12px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gray);
}

/* Templates header — h2 + "Do you want to add a note?" Yes/No toggle */
.templates-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.templates-header h2 { margin-bottom: 0; }
.templates-question {
  display: inline-flex; align-items: center; gap: 14px;
}
.templates-question .q-text {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gray);
}
.yesno-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 3px;
  gap: 2px;
}
.yesno-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 16px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  border-radius: 9999px;
  outline: none;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.yesno-btn.active { background: var(--ink); color: var(--bg); }
.yesno-btn:hover:not(.active) { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────────────
   Live Status action footer (formerly the sticky bottom runbar)

   v2.59 (parallel-campaigns Phase 6.3): the runbar was unsticky'd and
   embedded inside #nav-status as a section footer. Child IDs/classes
   inside (run-status, run-bar-actions, runbar-group*) are unchanged so
   initRunBarMirror() and enable/disable wiring keep working. The legacy
   .run-bar selector is preserved as a no-op safety net; new container
   uses .live-status-actions.
   ───────────────────────────────────────────────────────────────────────── */
.live-status-actions {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.run-bar {
  /* Legacy class — no-op since the element is no longer fixed-position. */
}
.run-status {
  display: flex; gap: 24px; align-items: center;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray);
}
.run-status .state-dot {
  width: 6px; height: 6px; border-radius: 9999px; background: var(--gray);
  display: inline-block;
}
.run-status.running .state-dot { background: var(--green); }
/* v2.13.14 — monitoring state: same green as running, plus glow ring + soft
   pulse so the operator notices the sticky bar is reporting live status. */
.run-status.monitoring .state-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.18);
  animation: cockpit-pulse 2.2s ease-in-out infinite;
}
.run-status.monitoring strong { color: var(--ink); }
.run-status strong { color: var(--ink); font-weight: 400; }
/* Monospace metadata appended after "Monitoring" in the sticky bar.
   Lower contrast than the headline so the eye lands on the status word
   first, then the timing detail. */
.run-bar-meta-mono {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-soft, var(--gray));
  margin-left: 6px;
}

/* Small screens */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--hairline); }
  .main { padding: 24px; }
  .run-bar { left: 0; padding: 12px 24px; }
  h1 { font-size: 2.6rem; }
  .launch-number { font-size: 5rem; }
  .overview-hero { grid-template-columns: repeat(2, 1fr); }
  .overview-hero .hero-stat:nth-child(2) { border-right: none; }
}

/* Server log */
#server-log-panel {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Inline-style overrides — neutralize hardcoded colors in HTML
   ───────────────────────────────────────────────────────────────────────── */
[style*="color:#8b949e"], [style*="color: #8b949e"],
[style*="color:#484f58"], [style*="color: #484f58"],
[style*="color:#c9d1d9"], [style*="color: #c9d1d9"],
[style*="color:#58a6ff"], [style*="color: #58a6ff"] { color: var(--gray) !important; }
[style*="color:#d29922"], [style*="color: #d29922"] { color: var(--ink) !important; opacity: 0.9; }
[style*="background:#161b22"], [style*="background: #161b22"],
[style*="background:#2d1b00"], [style*="background: #2d1b00"] { background: transparent !important; }
[style*="border:1px solid #30363d"], [style*="border:1px solid #d29922"] { border-color: var(--hairline) !important; }
[style*="accent-color:#58a6ff"], [style*="accent-color: #58a6ff"] { accent-color: var(--ink) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Prompt modal — Electron-safe replacement for window.prompt()
   Reuses .btn / .btn-secondary. Matches the monochrome command-deck look.
   ───────────────────────────────────────────────────────────────────────── */
.prompt-modal[hidden] { display: none; }
.prompt-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.prompt-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.prompt-modal__card {
  position: relative;
  width: min(420px, calc(100vw - 48px));
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 0;
}
.prompt-modal__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}
.prompt-modal__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 12px 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.95rem;
  margin-bottom: 20px;
  font-weight: 400;
}
.prompt-modal__input:focus { outline: none; border-bottom-color: var(--ink); }
.prompt-modal__actions {
  display: flex; flex-direction: row;
  gap: 12px; justify-content: flex-end;
}

/* FG Auto-Pilot schedule editor — day grid */
.fgsched-card { width: min(440px, calc(100vw - 48px)); border-radius: 14px; }
.fgsched-time { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--gray); margin: 0 0 16px; }
.fgsched-time b { color: var(--ink); }
.fgsched-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.fgsched-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: 9px; background: transparent; font-family: var(--mono); font-size: 12px; color: var(--ink); cursor: pointer; transition: border-color .1s, background .1s; }
.fgsched-cell:hover { border-color: var(--ink); }
.fgsched-cell.on { background: var(--green); border-color: var(--green); color: #04220b; font-weight: 600; }
.fgsched-sel { margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--gray); }
.fgsched-sel b { color: var(--ink); }

/* v2.61: Schedule modal — wider card to fit date/time/days form. */
.schedule-modal__card {
  width: min(720px, calc(100vw - 48px));
  padding: 40px 44px 36px;
}
.schedule-modal__title {
  font-family: var(--display);
  font-size: 2.8rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hairline-soft);
}
.schedule-modal__field {
  display: block;
  margin-bottom: 26px;
}
.schedule-modal__field-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.schedule-modal__optional {
  color: var(--gray);
  font-weight: 400;
  letter-spacing: 0.14em;
  opacity: 0.75;
  font-size: 0.78rem;
}
/* Scope input rules to .schedule-modal__card so specificity (0,2,0)
   beats `body[data-dashboard='v3'] input { font: inherit }` (0,1,2)
   in dashboard-v0.3.css — otherwise the inputs render at inherited
   14px instead of 1.4rem. Same gotcha that bit us on the throughput
   knobs and mode-card buttons. */
.schedule-modal__card .prompt-modal__input {
  font-size: 1.4rem;
  font-family: var(--body);
  padding: 16px 0;
  margin-bottom: 0;
  letter-spacing: 0.01em;
}
.schedule-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 6px;
}
.schedule-modal__row .schedule-modal__field { margin-bottom: 20px; }
.schedule-modal__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.schedule-modal__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 16px 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  user-select: none;
}
.schedule-modal__day input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
  margin: 0; padding: 0;
}
.schedule-modal__day:hover { border-color: var(--ink); color: var(--ink); }
.schedule-modal__day:has(input:checked) {
  background: var(--gold-tint-bg);
  border-color: var(--gold);
  color: var(--gold);
}
.schedule-modal__summary {
  margin: 22px 0 32px;
  padding: 20px 24px;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--bg-soft);
  border-left: 3px solid var(--gold);
}
.schedule-modal__card .prompt-modal__actions {
  gap: 14px;
}
.schedule-modal__card .prompt-modal__actions .btn {
  padding: 16px 32px;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
}

/* ─────────────────────────────────────────────────────────────────────────
   Preview Messages modal — reuses .prompt-modal layout, widens card + adds
   scrollable body, card-per-lead layout, char-count color states.
   ───────────────────────────────────────────────────────────────────────── */
.preview-modal__card {
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.preview-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--hairline);
}
.preview-modal__title {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.preview-modal__close {
  background: transparent; border: none; color: var(--gray);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  padding: 4px 8px;
}
.preview-modal__close:hover { color: var(--ink); }
.preview-modal__body {
  overflow-y: auto;
  padding: 16px 24px 24px;
}
.preview-modal__error {
  padding: 12px; margin-bottom: 12px;
  border: 1px solid var(--red); color: var(--red);
  font-size: 0.85rem;
}
.preview-modal__empty {
  padding: 24px 0; color: var(--gray);
  font-size: 0.9rem; text-align: center;
}
.preview-card {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.preview-card:last-child { border-bottom: none; }
.preview-card__lead { margin-bottom: 12px; font-size: 0.9rem; }
.preview-card__company { color: var(--gray); }
.preview-card__url {
  display: block; margin-top: 4px;
  color: var(--gray); font-size: 0.75rem; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.preview-card__url:hover { color: var(--ink); text-decoration: underline; }
.preview-card__field { margin-top: 10px; }
.preview-card__field-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.preview-card__field-name {
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gray);
}
.preview-card__count {
  font-family: var(--mono); font-size: 0.7rem; color: var(--gray);
}
.preview-card__count--over { color: var(--red); font-weight: 600; }
.preview-card__text {
  margin: 0; padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hairline);
  font-family: var(--body); font-size: 0.85rem;
  white-space: pre-wrap; word-break: break-word;
}
.preview-card__warnings {
  margin-top: 10px; padding: 8px 10px;
  border-left: 2px solid var(--red);
  background: rgba(248, 81, 73, 0.06);
}
.preview-card__warnings-title {
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--red); margin-bottom: 4px;
}
.preview-card__warnings ul { margin: 0; padding-left: 18px; font-size: 0.8rem; color: var(--ink); }

/* Phase 11.1 — Slow-mode banner (shown when throttle.active) */
/* Cloud engine unreachable — the board below is a stale snapshot. Same shape as
   #throttle-banner, hairline rule instead of the amber bar (the design system
   has no second accent), and `hidden` does the toggling. */
#cloud-offline-banner {
  margin: 8px 0;
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--red);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
}

#throttle-banner {
  margin: 8px 0;
  padding: 8px 12px;
  border-left: 3px solid #f2a03d;
  background: rgba(242, 160, 61, 0.08);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
  display: none;   /* JS toggles via style.display */
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 11.3 — Replies panel (Check DMs output)
   Monochrome command-deck styling, no colored backgrounds, no new fonts.
   ───────────────────────────────────────────────────────────────────────── */
.replies-status {
  margin-left: auto;
  font-size: 0.8rem;
  padding-right: 12px;
}
.replies-profile-section,
.replies-ambiguous-section {
  margin-bottom: 16px;
}
.replies-profile-header {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted, #888);
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--border, #2a2a2a);
  margin-bottom: 8px;
}
.reply-row {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border, #2a2a2a);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name meta"
    "snippet snippet";
  row-gap: 4px;
  column-gap: 12px;
}
.reply-row:last-child {
  border-bottom: none;
}
.reply-row--ambiguous {
  opacity: 0.75;
}
.reply-name {
  grid-area: name;
  font-weight: 600;
}
.reply-snippet {
  grid-area: snippet;
  font-size: 0.9rem;
  color: var(--ink-muted, #888);
  font-style: italic;
}
.reply-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
}
.reply-time {
  color: var(--ink-muted, #888);
  font-family: var(--mono);
}
.reply-open-thread {
  color: var(--ink, inherit);
  text-decoration: underline;
  font-size: 0.8rem;
}
.reply-open-thread:hover {
  text-decoration: none;
}
.replies-errors {
  padding: 8px 12px;
  border-left: 3px solid #c44;
  background: rgba(200, 68, 68, 0.06);
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.replies-footer {
  margin-top: 12px;
  font-size: 0.75rem;
  font-family: var(--mono);
  color: var(--ink-muted, #888);
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 2.8.9 — Stop confirmation modal + pause/resume toast.
   Monochrome, hairline borders, matches the command-deck aesthetic.
   ───────────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-fade-in 120ms ease-out;
}
.modal-backdrop.hidden { display: none; }

.modal-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  max-width: 480px;
  width: 100%;
  padding: 36px 40px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: modal-rise 160ms ease-out;
}
.modal-title {
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1;
}
.modal-body {
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--gray);
  line-height: 1.5;
  margin-bottom: 28px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.modal-actions .btn { min-width: 120px; }

.machine-choice-card { padding: 40px 44px 36px; }
.machine-choice-card .modal-body { max-width: 480px; margin-bottom: 24px; }
.machine-choice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px !important; }
.machine-choice-option {
  min-height: 72px; padding: 14px 18px; border: 1px solid var(--hairline);
  border-radius: 9999px; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.machine-choice-option:hover, .machine-choice-option:focus-visible {
  border-color: var(--ink); outline: none; background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.machine-choice-option.is-current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Task 7 — Start-time preflight prompt (runPreflightPrompt). Grey for a
   capped account (nothing to fix), red for a fixable one (proxy/needslogin —
   a human clears it in a minute). Same distinction the Waiting card makes. */
.pf-list { border-top: 1px solid var(--hairline); margin-bottom: 8px; }
.pf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: 0.74rem;
}
.pf-row .who { color: var(--ink); }
.pf-row .st { color: var(--gray); font-size: 0.68rem; letter-spacing: 0.04em; }
.pf-row.fixable .st { color: var(--red); }
.pf-note { font-size: 0.82rem !important; }

/* v2.100 — Reconnect & retry modal: auto-accept toggle + inline GoLogin picker. */
.revive-aa-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--hairline, rgba(250,250,249,0.12));
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--ink, #fafaf9);
}
.revive-aa-toggle input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.revive-picker-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b867a;
  margin-bottom: 8px;
}
.revive-picker-hint { font-size: 0.8rem; color: #8b867a; margin-top: 8px; }
.revive-picker-hint.err { color: #d98c5f; }
.revive-manual-note {
  margin-top: 12px;
  font-size: 0.82rem;
  color: #8b867a;
  line-height: 1.45;
}
.btn.is-disabled, .btn:disabled { opacity: 0.4; pointer-events: none; }

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Post-launch tips — modal (Variant A) + sidebar card (Variant B)
   ───────────────────────────────────────────────────────────────────────── */

/* Modal — wider than standard confirm modals to fit the tips list. */
.ptm-card { max-width: 560px; padding: 28px 32px 24px; }
.ptm-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.16em;
  color: var(--ink);
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.ptm-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
/* v2.58.x — alert variant: red border + red dot. Used by the IC preflight
   modal when the campaign cannot start. */
.ptm-pill.modal-pill--alert { border-color: var(--red); }
.ptm-pill.modal-pill--alert::before { background: var(--red); }

/* v2.58.x — IC sheet-mapping block (Section 2). Progressive disclosure:
   empty state until previewSheet runs, filled state after. */
.ic-empty {
  padding: 18px 20px;
  border: 1px dashed var(--hairline);
  text-align: center;
}
.ic-empty__icon { font-size: 1.4rem; opacity: 0.4; margin-bottom: 6px; }
.ic-empty__lead { font-size: 0.95rem; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.ic-empty__lead em { font-style: italic; }
.ic-empty__sub { font-size: 0.8rem; color: var(--gray); }

.ic-filled { padding-top: 18px; border-top: 1px solid var(--hairline); }
.ic-filled.hidden { display: none; }
.ic-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 18px;
}
.ic-row:last-child { margin-bottom: 0; }
.ic-label-block { padding-top: 9px; }
.ic-label {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.ic-sub { font-size: 0.82rem; color: var(--gray); line-height: 1.5; } /* v2.59.8 — bumped 0.7→0.82 */
.ic-sub code { font-family: var(--mono); font-size: 0.85em; background: rgba(0,0,0,0.05); padding: 1px 5px; }
.ic-select {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 0.9rem;
  /* v2.59.8 — was hardcoded `white`: in dark mode the placeholder/value text
     (var(--ink), near-white) was white-on-white. var(--card-bg) inverts. */
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.ic-select.is-detected { border-color: var(--ink); }
/* v2.59.8 — light mode: strengthen the dropdown border so it doesn't read as a
   faint near-white box on the light canvas. */
body.theme-light .ic-select { border-color: rgba(0, 0, 0, 0.3); }
.ic-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding-top: 4px; }
.ic-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--ink); }
.ic-check-label { font-size: 0.9rem; color: var(--ink); line-height: 1.4; }
.ic-check-hint { font-size: 0.82rem; color: var(--gray); margin-top: 3px; line-height: 1.5; } /* v2.59.8 — bumped 0.7→0.82 */
.ic-check-hint code { font-family: var(--mono); font-size: 0.85em; background: rgba(0,0,0,0.05); padding: 1px 5px; }
.ic-auto-detected {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-top: 6px;
}
.ic-auto-detected.hidden { display: none; }
.ic-auto-detected::before { content: '●'; font-size: 8px; }
@media (max-width: 600px) {
  .ic-row { grid-template-columns: 1fr; }
  .ic-label-block { padding-top: 0; }
}
.ptm-title { font-size: 1.6rem; margin-bottom: 18px; line-height: 1.05; }
.ptm-body { margin-bottom: 22px; }
.ptm-list { list-style: none; margin: 0; padding: 0; }
.ptm-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline-soft, rgba(255,255,255,0.06));
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink);
}
.ptm-list li:last-child { border-bottom: none; }
.ptm-list .ptm-icon { font-size: 0.95rem; }
.ptm-list code {
  background: rgba(255,255,255,0.06);
  padding: 0 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
}
.ptm-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px;
}
.ptm-silence {
  font-size: 0.78rem; color: var(--gray);
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.ptm-silence input { width: 14px; height: 14px; accent-color: var(--gold); cursor: pointer; }

/* Light-theme adjustments — modal body lines + code chips. */
body.theme-light .ptm-list li { color: var(--ink); border-bottom-color: rgba(0,0,0,0.08); }
body.theme-light .ptm-list code { background: rgba(0,0,0,0.05); }
body.theme-light .ptm-silence { color: var(--gray); }

/* Live Status 2-col grid (Q1=a layout). Cockpit + queue + log on the left,
   tips card on the right. Collapses to 1-col below 1100 px so the cockpit
   log doesn't get cramped on smaller laptops. */
.live-status-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items: start;
}
.live-status-main { min-width: 0; /* prevent grid blowout from long log lines */ }
.live-status-aside { min-width: 0; }
@media (max-width: 1100px) {
  .live-status-grid { grid-template-columns: 1fr; }
}

/* Sidebar tips card. Same monochrome treatment as the rest of the cockpit. */
.pts-card {
  background: var(--card, var(--bg));
  border: 1px solid var(--hairline);
  padding: 14px 16px;
}
.pts-card.hidden { display: none; }
.pts-head {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  margin-bottom: 10px;
}
.pts-caret {
  font-family: var(--display); font-size: 0.8rem;
  color: var(--gray);
  transition: transform 120ms ease-out;
  display: inline-block;
}
.pts-card.collapsed .pts-caret { transform: rotate(-90deg); }
.pts-title {
  font-family: var(--display); font-size: 0.72rem;
  letter-spacing: 0.14em; color: var(--ink);
}
.pts-body { transition: max-height 160ms ease-out; }
.pts-card.collapsed .pts-body { display: none; }
.pts-list { list-style: none; margin: 0; padding: 0; }
.pts-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline-soft, rgba(255,255,255,0.06));
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink);
}
.pts-list li:last-child { border-bottom: none; }
.pts-list .pts-icon { font-size: 0.85rem; }
body.theme-light .pts-list li { border-bottom-color: rgba(0,0,0,0.06); }

/* ─────────────────────────────────────────────────────────────────────────
   Onboarding tour — DOM spotlight + callout
   ───────────────────────────────────────────────────────────────────────── */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
}
.tour-overlay.hidden { display: none; }

/* The spotlight is a full-screen dark overlay with a clip-path that punches
   a hole around the current target rect. Updated each render. */
.tour-spotlight {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto; /* catches clicks outside the target — keeps focus */
  transition: clip-path 200ms ease-out;
}

/* Callout bubble — positioned absolutely by JS. */
.tour-callout {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--gold);
  padding: 18px 20px 16px;
  width: 320px;
  max-width: calc(100vw - 32px);
  z-index: 100000;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  animation: tour-rise 200ms ease-out;
}
.tour-callout .tour-step {
  font-family: var(--display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  margin-bottom: 8px;
}
.tour-callout .tour-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  color: var(--ink);
  line-height: 1.15;
}
.tour-callout .tour-body {
  font-size: 0.84rem;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 16px;
}
.tour-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tour-skip {
  font-size: 0.72rem;
  color: var(--gray);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--body, var(--mono));
  padding: 4px 0;
}
.tour-skip:hover { color: var(--ink); }
.tour-nav { display: flex; gap: 8px; }
.tour-btn {
  font-family: var(--display);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  padding: 7px 14px;
  cursor: pointer;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
}
.tour-btn:hover { border-color: var(--ink); }
.tour-btn.primary {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}
.tour-btn.primary:hover { background: #ffc878; }

@keyframes tour-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.theme-light .tour-callout { background: #fff; box-shadow: 0 14px 36px rgba(0,0,0,0.25); }
body.theme-light .tour-spotlight { background: rgba(0, 0, 0, 0.55); }

/* ─────────────────────────────────────────────────────────────────────────
   Sidebar Help popover (anchored to the Help nav button)
   ───────────────────────────────────────────────────────────────────────── */

.nav-help-wrapper { position: relative; }
.nav-item-help { width: 100%; }
/* Drops INSIDE the sidebar below the Help button. Anchoring outside the
   sidebar with `left: calc(100% + 8px)` doesn't work — the sidebar has
   `overflow-y: auto`, which (per CSS spec) forces the other axis to also
   clip, so a popover that extends past the sidebar's right edge gets
   invisibly hidden. Below-the-button stays inside the clip bounds. */
.help-popover {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(100% + 4px);
  background: var(--card, var(--bg));
  border: 1px solid var(--gold);
  z-index: 1000;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.help-popover.hidden { display: none; }
.help-popover-title {
  font-family: var(--display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: var(--gray);
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--hairline-soft, rgba(255,255,255,0.06));
}
.help-pop-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--hairline-soft, rgba(255,255,255,0.06));
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  font-family: inherit;
  width: 100%;
  text-decoration: none;
}
.help-pop-item:last-child { border-bottom: none; }
.help-pop-item:hover { background: rgba(247, 190, 104, 0.08); }
.help-pop-icon { font-size: 0.95rem; }

body.theme-light .help-popover { background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
body.theme-light .help-pop-item { color: var(--ink); }
body.theme-light .help-pop-item:hover { background: rgba(247, 190, 104, 0.12); }


/* Inline toast — bottom-center, auto-dismisses. Used for pause/resume hints. */
.campaign-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--ink);
  max-width: 520px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.campaign-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Status pill colors for the live status panel — paused/pausing variants. */
.value.paused  { color: var(--gold); }
.value.pausing { color: var(--gray); font-style: italic; }

/* ─────────────────────────────────────────────────────────────────────────
   Phase 2.8.12 — Live Cockpit panel.
   Concept B (circular ring + structured metadata). Sits at the top of the
   Live Status section. Driven by /api/campaign/status.currentAction +
   client-side 250ms tick for smooth countdown.
   ───────────────────────────────────────────────────────────────────────── */
.cockpit-panel {
  display: flex;
  flex-direction: column;
  padding: 24px 28px 20px;
  border: 1px solid var(--hairline);
  margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.cockpit-top {
  display: flex;
  align-items: center;
  gap: 32px;
}
.cockpit-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid var(--hairline);
  font-family: var(--mono, ui-monospace, monospace);
}
.cockpit-stat { display: flex; flex-direction: column; gap: 4px; }
.cockpit-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--gray);
  text-transform: uppercase;
}
.cockpit-stat-value {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cockpit-stat-of { color: var(--gray); font-family: var(--mono, ui-monospace, monospace); font-size: 0.7rem; letter-spacing: 0.06em; }
.cockpit-stat-bar {
  flex: 1;
  height: 3px;
  background: var(--hairline-soft);
  position: relative;
  overflow: hidden;
}
.cockpit-stat-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--gold);
  transition: width 0.5s linear;
}
.cockpit-ring {
  position: relative;
  width: 132px;
  height: 132px;
  flex-shrink: 0;
}
.cockpit-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.cockpit-ring-bg {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 4;
}
.cockpit-ring-fg {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s linear;
}
/* Indeterminate state — slowly rotating arc so user sees movement even
   when no countdown is active (loading a page, sending invitation, etc.) */
.cockpit-ring.indeterminate svg {
  animation: cockpit-spin 2.4s linear infinite;
}
.cockpit-ring.indeterminate .cockpit-ring-fg {
  stroke-dashoffset: 198 !important; /* ~30% arc visible */
  transition: none;
}
.cockpit-ring.paused .cockpit-ring-fg {
  stroke: var(--gray);
}
/* v2.13.14 — monitoring state: green dashed ring signals "watching". */
.cockpit-ring.monitoring .cockpit-ring-fg {
  stroke: var(--green);
  stroke-dasharray: 8 6;
}
@keyframes cockpit-spin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(270deg); }
}
.cockpit-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.cockpit-ring-num {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cockpit-ring-unit {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--gray);
  margin-top: 4px;
  text-transform: uppercase;
}
/* v2.14.x: tiny footer line inside the ring — shows window-left
   ("6d 23h") while the big number above is the live next-check
   countdown. Empty in idle/running/paused states. */
.cockpit-ring-footer {
  font-family: var(--display);
  font-size: 0.78rem;
  color: var(--gray);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  line-height: 1;
}
.cockpit-ring-footer:empty {
  display: none;
}
.cockpit-info {
  flex: 1;
  min-width: 0;
}
.cockpit-tag {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cockpit-pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray);
}
.cockpit-pulse-dot.live {
  background: var(--green);
  animation: cockpit-pulse 1.4s ease-in-out infinite;
}
.cockpit-pulse-dot.paused-dot {
  background: var(--gold);
}
/* v2.13.14 — monitoring state: green dot + soft glow ring. */
.cockpit-pulse-dot.monitoring {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(52, 168, 83, 0.18);
  animation: cockpit-pulse 2.2s ease-in-out infinite;
}
@keyframes cockpit-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}
.cockpit-action {
  font-family: var(--display);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--ink);
  word-break: break-word;
}
.cockpit-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  font-size: 0.82rem;
}
.cockpit-meta-label {
  color: var(--gray);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: center;
}
.cockpit-meta-value {
  color: var(--ink);
  word-break: break-word;
}

@media (max-width: 700px) {
  .cockpit-panel { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; }
  .cockpit-ring { align-self: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 2.8.14 — Alpha Throughput panel (replaces the old steppers in §4).
   Lives under nav-pace, but moved-in-DOM after nav-accounts so it sits
   immediately under "Select GoLogin Accounts".
   ───────────────────────────────────────────────────────────────────────── */
.alpha-throughput {
  border: 1px solid var(--hairline);
  padding: 32px 36px;
  background: linear-gradient(180deg, rgba(247,190,104,0.04), transparent);
  margin-bottom: 18px;
}
.alpha-headline {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline-soft);
}
.alpha-big {
  font-family: var(--display);
  font-size: 6.8rem;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.alpha-big-unit {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78rem;
  color: var(--gray);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 6px;
}
.alpha-eq {
  margin-left: auto;
  color: var(--gray);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.85rem;
  text-align: right;
  line-height: 1.7;
}
.alpha-eq b { color: var(--ink); font-weight: 500; }
.alpha-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 22px;
}
.alpha-knob-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.alpha-knob-sublabel {
  color: var(--gray);
  font-weight: 400;
  letter-spacing: 0.14em;
  opacity: 0.85;
}
.alpha-knob-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}
/* Scoped to .alpha-throughput so specificity (0,2,0) wins over
   `body[data-dashboard='v3'] input { font: inherit }` (0,1,2) in
   public/css/dashboard-v0.3.css line 51 — which was silently killing
   font-size on all inputs that had only a single-class selector. */
.alpha-throughput .alpha-knob-input {
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 6.4rem;
  line-height: 1;
  width: 150px;
  outline: none;
  font-variant-numeric: tabular-nums;
  padding: 0;
  letter-spacing: 0.01em;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.alpha-throughput .alpha-knob-input.alpha-pause-input { width: 100px; font-size: 4rem; }
.alpha-knob-input::-webkit-outer-spin-button,
.alpha-knob-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alpha-knob-input { -moz-appearance: textfield; }
.alpha-knob-suffix,
.alpha-pause-sep {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78rem;
  color: var(--gray);
  white-space: nowrap;
}
.step-col { display: flex; flex-direction: column; gap: 4px; }
.alpha-throughput .step-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--hairline); background: transparent;
  color: var(--ink); cursor: pointer; font-size: 0.85rem;
}
.alpha-throughput .step-btn:hover { border-color: var(--ink); }
.alpha-knob-help {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--gray);
  margin-top: 10px;
  line-height: 1.5;
}
/* Capacity forecast line (feature ⑥) — quiet mono metadata under the daily-limit
   knob. Amber (gold, the existing warn accent) when the projected run exceeds
   14 days, matching the list_vs_limit pre-flight lint threshold. */
.capacity-forecast {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--gray);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline-soft);
  line-height: 1.5;
}
.capacity-forecast b { color: var(--ink); font-weight: 500; }
.capacity-forecast.is-warn { color: var(--gold); }
.capacity-forecast.is-warn b { color: var(--gold); font-weight: 600; }
/* Phase 2.8.15: campaign-hero restyled when nested inside the throughput panel.
   Flows as the panel's bottom forecast row instead of a standalone boxed grid. */
.alpha-throughput .campaign-hero.alpha-forecast {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  border-radius: 0;
  margin: 24px 0 0 !important;
  padding: 22px 0 0 !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.alpha-throughput .campaign-hero.alpha-forecast .hero-cell {
  background: transparent;
  padding: 0 28px;
  border-left: 1px solid var(--hairline-soft);
}
.alpha-throughput .campaign-hero.alpha-forecast .hero-cell:first-child {
  padding-left: 0;
  border-left: 0;
}
.alpha-throughput .campaign-hero.alpha-forecast .hero-k {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}
.alpha-throughput .campaign-hero.alpha-forecast .hero-v {
  font-size: 2.2rem;
  font-variant-numeric: tabular-nums;
}
.alpha-throughput .campaign-hero.alpha-forecast .hero-sub {
  font-size: 0.62rem;
  margin-top: 6px;
  letter-spacing: 0.12em;
}

@media (max-width: 700px) {
  .alpha-throughput { padding: 22px 20px; }
  .alpha-headline { flex-direction: column; gap: 14px; }
  .alpha-eq { margin-left: 0; text-align: left; }
  .alpha-controls { grid-template-columns: 1fr; }
}

/* Phase 2.8.19 (A2) — section-status one-line summary, right-aligned in the h2 */
.section-summary {
  float: right;
  font-family: var(--body, 'Hanken Grotesk', sans-serif);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 400;
  line-height: 1.6;
  margin-left: 12px;
}
.section-summary:empty { display: none; }
.section-summary.done { color: var(--gray); }
.section-summary.empty { color: var(--gray); opacity: 0.55; }

/* Phase 2.8.19 (A3) — sidebar state glyph (✓ done · ▸ current · ◯ empty) */
.nav-glyph {
  float: right;
  font-size: 0.7rem;
  line-height: 1;
  margin-left: 8px;
  color: var(--gray);
  opacity: 0.55;
}
.nav-glyph.done    { color: var(--green); opacity: 1; }
.nav-glyph.current { color: var(--gold);  opacity: 1; }
.nav-glyph.empty   { color: var(--gray);  opacity: 0.55; }
.nav-glyph:empty   { display: none; }

/* Phase 2.8.19 (B2) — right-pane Status row demoted to non-live confirmation.
   Cockpit (inside Live Status section) is the single live-state authority. */
.rp-status-line.demoted {
  font-family: var(--body, 'Hanken Grotesk', sans-serif);
  font-size: 0.78rem;
  color: var(--gray);
}
.rp-status-line.demoted .rp-dot {
  opacity: 0.6;
}
.rp-status-line.demoted #rp-status-text {
  color: var(--gray);
  font-family: inherit;
}

/* Phase 2.8.19 (C2) — Override / Auto toggle next to "Match name" label */
.identifier-toggle-link {
  float: right;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
}
.identifier-toggle-link:hover {
  color: var(--ink);
}
#my-identifier[readonly] {
  opacity: 0.7;
  cursor: default;
}

/* Phase 2.8.19 (C4) — sidebar Notifications panel state rows */
.notif-state-rows { display: flex; flex-direction: column; gap: 6px; font-size: 0.7rem; }
.notif-row { display: flex; justify-content: space-between; align-items: center; }
.notif-row-k { color: var(--ink); }
.notif-row-v { color: var(--gray); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.6rem; }
.notif-row-v.ok   { color: var(--green); }
.notif-row-v.warn { color: var(--gray); }
.notif-row-v.bad  { color: var(--red); }
.notif-actions { display: flex; gap: 6px; margin-top: 4px; }

/* Bug 17: Sidebar tightened (Variant A) — inline actions + chips, less clutter. */
.sb-tight { padding: 0 28px 18px; display: flex; flex-direction: column; gap: 12px; }
.sb-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sb-line-k { font-size: 0.82rem; color: var(--ink); }
.sb-line-v { display: inline-flex; align-items: center; gap: 8px; }
/* v2.113 — pre-send identity safeguard toggle: its own hairline-separated
   block, bolder label, so it stands apart from the notification toggles. */
.sb-safeguard { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.sb-safeguard .sb-line-k { font-weight: 600; }
.sb-icon-btn {
  width: 24px; height: 24px; border: 1px solid var(--hairline); border-radius: 50%;
  background: transparent; color: var(--gray); cursor: pointer; font-size: 0.72rem;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  transition: border-color 0.12s, color 0.12s;
}
.sb-icon-btn:hover { border-color: var(--gold); color: var(--ink); }
.sb-link {
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
}
.sb-link:hover { opacity: 0.75; }
body.theme-light .sb-link { color: #6e520f; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--hairline); border-radius: 9999px; padding: 3px 9px;
}
.sb-chip-k { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.notif-pref-row { padding-top: 2px; }
.notif-pref-toggle { position: relative; display: inline-block; width: 28px; height: 16px; flex-shrink: 0; }
.notif-pref-toggle input { opacity: 0; width: 0; height: 0; }
.notif-pref-slider { position: absolute; cursor: pointer; inset: 0; background: var(--gray); border-radius: 16px; transition: background 0.15s; }
.notif-pref-slider::before { content: ''; position: absolute; height: 12px; width: 12px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 0.15s; }
.notif-pref-toggle input:checked + .notif-pref-slider { background: var(--green); }
.notif-pref-toggle input:checked + .notif-pref-slider::before { transform: translateX(12px); }

/* v2.91 — CC+IC config cards (auto-accept + automated first follow-up) */
.intro-config-newtag{display:inline-block;font:10px var(--display);letter-spacing:.12em;color:#0a0a0a;background:var(--gold);border-radius:9999px;padding:2px 8px;vertical-align:middle;margin-left:6px;}
.intro-config-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 8px;}
.intro-config-toggle-key{font-size:14px;}
.intro-config-gate{display:flex;gap:8px;align-items:flex-start;margin:6px 0 8px;padding:9px 11px;border:1px dashed var(--gold);border-radius:10px;background:var(--gold-tint-bg);font-size:12px;line-height:1.5;}
.intro-config-num{width:64px;border:1px solid var(--hairline);border-radius:8px;padding:7px;text-align:center;font-family:var(--mono);background:var(--card-bg);color:var(--ink);}

/* v2.94.x — Auto-accept source cards (Variant B) + single-select profile picker */
.aa-src-cards{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px;}
.aa-src-card{border:1px solid var(--hairline);border-radius:10px;padding:12px 14px;transition:border-color .15s ease, background .15s ease;}
.aa-src-card:has(input[type="radio"]:checked){border-color:var(--ink);background:var(--hairline-soft);}
.aa-src-head{display:flex;align-items:center;gap:10px;cursor:pointer;margin:0;}
.aa-src-head input[type="radio"]{accent-color:var(--ink);width:15px;height:15px;flex-shrink:0;}
.aa-src-title{font-size:.9rem;font-weight:600;color:var(--ink);}
.aa-src-desc{font-size:.76rem;color:var(--gray);margin:6px 0 0 25px;line-height:1.45;}
.aa-acct-search{width:calc(100% - 25px);margin:12px 0 8px 25px;font-family:var(--mono);font-size:.76rem;padding:7px 12px;border:1px solid var(--hairline);border-radius:9999px;background:var(--card-bg);color:var(--ink);outline:none;}
.aa-acct-search::placeholder{color:var(--gray);}
.aa-acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-left:25px;max-height:240px;overflow:auto;}
.aa-acct-row{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--hairline);border-radius:8px;padding:8px 10px;cursor:pointer;transition:opacity .15s ease, border-color .15s ease, background .15s ease;}
.aa-acct-row:hover{opacity:.8;}
.aa-acct-row.sel{border-color:var(--ink);background:var(--card-bg);}
.aa-acct-row input[type="radio"]{accent-color:var(--ink);width:13px;height:13px;margin-top:2px;flex-shrink:0;}
.aa-acct-row .body{min-width:0;flex:1;}
.aa-acct-row .name{font-size:.72rem;font-weight:500;color:var(--ink);word-break:break-all;}
.aa-acct-row .id{font-size:.54rem;color:var(--gray);font-family:ui-monospace,monospace;margin-top:2px;}
.aa-acct-empty{font-size:.72rem;color:var(--gray);padding:8px 4px;margin-left:25px;}
@media(max-width:1100px){.aa-acct-grid{grid-template-columns:1fr;}}

/* v2.94.x — read-only "acts as your primary — [name]" line on the auto-accept + follow-up cards */
.uses-primary{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:9px 11px;border:1px solid var(--hairline);border-radius:10px;background:var(--hairline-soft);font-size:.82rem;color:var(--ink);}
.uses-primary .dot{width:7px;height:7px;border-radius:9999px;background:var(--green);flex-shrink:0;}
.uses-primary .nm{font-weight:600;}
.uses-primary .edit{margin-left:auto;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);border:1px solid var(--hairline);border-radius:9999px;padding:5px 10px;white-space:nowrap;}
/* v2.94.x — Reload-SoO control inside the primary GoLogin picker (SoO can be down) */
.aa-soo-toolbar{display:flex;align-items:center;gap:10px;margin:0 0 8px;}
.aa-soo-reload{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;color:var(--gray);background:transparent;border:1px solid var(--hairline);border-radius:9999px;cursor:pointer;flex-shrink:0;transition:color .15s ease, border-color .15s ease, opacity .15s ease;}
.aa-soo-reload:hover{color:var(--ink);border-color:var(--ink);}
.aa-soo-reload:disabled{opacity:.5;cursor:default;}
.aa-soo-reload svg{display:block;}
.aa-soo-reload.spinning svg{animation:aa-soo-spin .8s linear infinite;transform-origin:50% 50%;}
@keyframes aa-soo-spin{to{transform:rotate(360deg);}}
.aa-soo-status{font-size:.7rem;color:var(--gray);}
.aa-soo-status.err{color:var(--red);}

/* Phase 2.8.20 (W1-B1) — right-pane Parked row (visible during runs) */
.rp-parked-line {
  font-family: var(--body, 'Hanken Grotesk', sans-serif);
  font-size: 0.78rem;
  color: var(--gray);
  letter-spacing: 0.04em;
}
.rp-parked-line.has-parked {
  color: var(--red);
}
.rp-parked-line:hover { opacity: 0.85; }
.rp-parked-detail {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  background: var(--hairline-soft, rgba(255,255,255,0.06));
  font-size: 0.66rem;
  color: var(--gray);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.rp-parked-detail .rp-parked-item { display: block; padding: 2px 0; }
.rp-parked-detail .rp-parked-item .rp-parked-name { color: var(--ink); }
.rp-parked-detail .rp-parked-item .rp-parked-reason {
  margin-left: 6px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Phase 2.8.22 (W2) — soft warnings surface */
.rp-warnings-line {
  font-family: var(--body, 'Hanken Grotesk', sans-serif);
  font-size: 0.78rem;
  color: var(--gray);
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-top: 2px;
}
.rp-warnings-line.has-warnings {
  color: var(--gray);
}
.rp-warnings-line:hover { opacity: 0.85; }
.rp-warnings-detail {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  background: var(--hairline-soft, rgba(255,255,255,0.06));
  font-size: 0.66rem;
  color: var(--gray);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.rp-warnings-detail .rp-warnings-item { display: block; padding: 2px 0; }
.rp-warnings-detail .rp-warnings-item .rp-warnings-name { color: var(--ink); }
.rp-warnings-detail .rp-warnings-item .rp-warnings-kind {
  margin-left: 6px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rp-warnings-detail .rp-warnings-item .rp-warnings-time {
  margin-left: 6px;
  color: var(--gray);
}

/* Phase 2.8.20 (W3-C2) — disk-low warning banner */
.disk-warning-banner {
  border: 1px solid var(--red);
  color: var(--red);
  font-family: var(--body, 'Hanken Grotesk', sans-serif);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  margin: 0 0 16px 0;
  background: transparent;
}


/* ─────────────────────────────────────────────────────────────────────────
   Dashboard view (route #/)
   ───────────────────────────────────────────────────────────────────────── */
.route-view { display: none; }
body.route-dashboard #dashboard-view,
body.route-connections #connections-view,
body.route-salesnav #salesnav-view,
body.route-replies #replies-view,
body.route-wizard #wizard-view { display: block; }

/* Hide the campaign+review sidebar nav while on the dashboard or connections
   route — those nav items only make sense inside the wizard. */
body.route-dashboard .sidebar-nav,
body.route-connections .sidebar-nav,
body.route-salesnav .sidebar-nav { display: none; }

/* ── Replies inbox (route #/replies) ─────────────────────────────────────────
   Same card treatment as the dashboard Replies card — hairline border, radius,
   gold left rule for interested rows. Monochrome; gold only on the interested
   rule + label chip. */
.replies-wrap {
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface, #fff);
  padding: 22px 24px; max-width: 900px;
}
.replies-head { display: flex; align-items: center; gap: 16px; }
.replies-head .tag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray); display: inline-flex; align-items: center; gap: 7px;
}
.replies-head .tag .dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--gold); display: inline-block; }
.replies-head .mark {
  margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--gray);
  text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; cursor: pointer;
}
.replies-head .mark:hover { color: var(--ink); }
.ai-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray);
}
.ai-toggle input { accent-color: var(--ink); cursor: pointer; }
.replies-title {
  font-family: var(--display); font-size: 2rem; line-height: 1; letter-spacing: 0.02em; margin: 12px 0 4px;
  color: var(--ink);
}
.replies-count-pill {
  font-size: 0.42em; vertical-align: middle; background: var(--gold); color: #1a1a1a;
  border-radius: 9999px; padding: 3px 11px; margin-left: 8px; font-family: var(--mono); letter-spacing: 0.06em;
}
.replies-sub { font-size: 0.78rem; color: var(--gray); margin: 0 0 16px; }
.replies-empty { font-family: var(--mono); font-size: 0.72rem; color: var(--gray); padding: 18px 2px; }
.replies-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.reply-item { border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; background: var(--surface, #fff); }
.reply-item.interested { border-left: 3px solid var(--gold); }
.reply-item.seen { opacity: 0.55; }
.reply-row1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.reply-row1 strong a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px;
}
.reply-when { font-size: 0.72rem; color: var(--gray); white-space: nowrap; }
.reply-sub { font-size: 0.72rem; color: var(--gray); margin: 2px 0 6px; }
.reply-sub strong { color: var(--ink); font-weight: 600; }
.reply-suspected {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red, #b4231f); margin-left: 6px;
}
.reply-msg { white-space: pre-wrap; font-size: 0.88rem; color: var(--ink); }
.reply-foot { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.reply-open, .reply-suggest {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 9999px; border: 1px solid var(--hairline); background: transparent;
  color: var(--ink); cursor: pointer; text-decoration: none;
}
.reply-open { margin-left: auto; }
.reply-open:hover, .reply-suggest:hover { border-color: var(--ink); }
.reply-suggest:disabled { opacity: 0.5; cursor: default; }

/* auto-assigned label chip — click to correct */
.lbl { position: relative; display: inline-block; }
.lbl-chip {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 9999px; border: 1px solid var(--hairline); background: var(--surface-2, #f7f7f6);
  color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.lbl-chip .ldot { width: 6px; height: 6px; border-radius: 9999px; background: var(--gray); display: inline-block; }
.lbl-chip.interested { border-color: var(--gold); background: rgba(201,168,74,0.08); }
.lbl-chip.interested .ldot { background: var(--gold); }
.lbl-chip.lowconf { border-style: dashed; }
/* manual corrections read as operator-set: solid ink dot. auto stays muted. */
.lbl-chip.manual .ldot { background: var(--ink); }
.lbl-chip:hover { border-color: var(--ink); }
.lbl-conf { font-size: 0.52rem; color: var(--gray); letter-spacing: 0.08em; }
.lbl-menu {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 168px; background: var(--surface, #fff);
  border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  padding: 6px; z-index: 35; display: none;
}
.lbl.open .lbl-menu { display: block; }
.lbl-item {
  display: block; width: 100%; padding: 8px 11px; border-radius: 8px; cursor: pointer;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray); background: transparent; border: none; text-align: left;
}
.lbl-item:hover { background: var(--surface-2, #f4f4f3); color: var(--ink); }
.replies-note { font-size: 0.72rem; color: var(--gray); margin-top: 16px; }

.reply-draft { margin-top: 10px; border-top: 1px dashed var(--hairline); padding-top: 10px; }
.reply-draft-label {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 6px;
}
.reply-draft-text { white-space: pre-wrap; font-size: 0.85rem; color: var(--ink); margin-bottom: 8px; }
.reply-draft-copy {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--ink); background: var(--ink);
  color: var(--bg, #fff); cursor: pointer;
}
.reply-draft-copy:hover { opacity: 0.85; }

.replies-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg, #fff);
  font-family: var(--mono); font-size: 0.7rem; padding: 10px 20px; border-radius: 9999px; opacity: 0;
  pointer-events: none; transition: opacity 0.2s; z-index: 100;
}
.replies-toast.show { opacity: 1; }

/* ── Connections (warm-reach) screen ───────────────────────────────────── */
.conn-stats { display: flex; gap: 56px; padding: 8px 0 4px; }
.conn-stat { display: flex; flex-direction: column; gap: 4px; }
.conn-stat-num {
  font-family: var(--display); font-weight: 400; font-size: 2rem;
  letter-spacing: 0.02em; color: var(--ink); line-height: 1;
}
.conn-stat-lbl {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gray);
}
.conn-cache {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  color: var(--gray); margin-top: 14px;
}
.conn-cache:empty { display: none; }

.conn-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 32px;
}
.conn-field { display: flex; flex-direction: column; }
.conn-actions { display: flex; gap: 16px; margin-top: 8px; }
.conn-error {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--red); margin-top: 16px;
}

.conn-results-summary {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--gray); margin-bottom: 14px;
}
.conn-results-summary b { color: var(--ink); font-weight: 500; }

.conn-table { width: 100%; }
.conn-row {
  display: grid;
  grid-template-columns: 38px 2fr 1.6fr 1.6fr 1.2fr 2fr;
  gap: 20px; align-items: center;
  padding: 12px 6px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}
.conn-row.conn-head {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gray); border-bottom: 1px solid var(--ink);
}
.conn-row .conn-name { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.02em; color: var(--ink); }
.conn-row .conn-cell { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn-row .conn-cell.conn-warm { white-space: normal; color: var(--ink); }
.conn-row input[type="checkbox"] { width: auto; margin: 0; }
.conn-empty {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--gray); padding: 24px 6px;
}

/* ── Connections v2 (team-connections-v2 sketch, monochrome) ───────────── */
.cx-lede {
  font-family: var(--mono); font-size: 0.82rem; color: var(--gray);
  max-width: 760px; margin: 2px 0 10px; line-height: 1.6;
}
.cx-section { margin-top: 8px; }
.cx-h2 {
  font-family: var(--display); font-weight: 400; font-size: 1.45rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
}
.cx-num {
  font-family: var(--mono); font-size: 0.72rem; color: var(--gray); letter-spacing: 0;
  border: 1px solid var(--card-border); border-radius: 9999px;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
}
.cx-stack { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.cx-cf .cx-lbl { display: flex; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.cx-cf label {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray);
}
.cx-opt { text-transform: none; letter-spacing: 0; color: var(--gray); }
.cx-box {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  background: var(--bg-soft); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 8px 12px; min-height: 44px; cursor: text;
  box-sizing: border-box;
}
.cx-chips { display: contents; }
.cx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink);
  border: 1px solid var(--card-border); border-radius: 9999px; padding: 4px 4px 4px 12px;
}
.cx-chip .lvl { color: var(--gray); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cx-chip .x {
  color: var(--gray); cursor: pointer; line-height: 1; font-size: 0.95rem;
  border: none; background: none; padding: 0 6px;
}
.cx-chip .x:hover { color: var(--ink); }
.cx-level {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray); background: none; border: 1px solid var(--card-border);
  border-radius: 9999px; padding: 5px 8px; cursor: pointer;
}
/* Defend against the app's global input styling (height/border/shadow/appearance)
   — the chip input must read as a borderless inline field inside the pill box. */
.cx-in {
  flex: 1 1 200px; min-width: 160px; width: auto; height: auto; margin: 0;
  border: none !important; background: none !important; outline: none; box-shadow: none !important;
  -webkit-appearance: none; appearance: none; line-height: 1.4;
  font-family: var(--mono); font-size: 0.82rem; color: var(--ink); padding: 5px 2px;
}
.cx-in::placeholder { color: var(--gray); }
.cx-hint { font-family: var(--mono); font-size: 0.6rem; color: var(--gray); margin: 6px 2px 0; line-height: 1.5; }
.cx-hint b { color: var(--ink); font-weight: 500; }
.cx-find-row { display: flex; align-items: center; gap: 18px; margin-top: 6px; flex-wrap: wrap; }
.cx-logic { font-family: var(--mono); font-size: 0.62rem; color: var(--gray); }
.cx-logic b { color: var(--ink); font-weight: 500; }

/* "How it works" guide strip (until first search). */
.cx-guide { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 2px; max-width: 760px; }
.cx-guide[hidden] { display: none; }
.cx-guide-step { display: flex; align-items: flex-start; gap: 12px; font-family: var(--mono); font-size: 0.7rem; color: var(--gray); line-height: 1.5; }
.cx-guide-step b { color: var(--ink); font-weight: 500; }
.cx-guide-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 9999px; border: 1px solid var(--card-border);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-size: 0.62rem;
}
.cx-source {
  font-family: var(--mono); font-size: 0.66rem; color: var(--gray);
  margin: 16px 2px 0; line-height: 1.6; max-width: 760px;
}
.cx-source b { color: var(--ink); font-weight: 500; }
.cx-source:empty { display: none; }

.cx-bar { display: flex; align-items: center; gap: 16px; margin: 0 0 10px; flex-wrap: wrap; }
.cx-selall { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.7rem; color: var(--ink); cursor: pointer; }
.cx-selall input { width: 15px; height: 15px; margin: 0; }
.cx-count { font-family: var(--mono); font-size: 0.72rem; color: var(--gray); }
.cx-count b { color: var(--ink); font-weight: 500; }
.cx-toggle { margin-left: auto; display: flex; border: 1px solid var(--card-border); border-radius: 9999px; overflow: hidden; }
.cx-toggle button {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray); background: none; border: none; padding: 8px 16px; cursor: pointer;
}
.cx-toggle button.active { background: var(--ink); color: var(--bg); }
.cx-guard { font-family: var(--mono); font-size: 0.62rem; color: var(--gray); margin: 0 2px 8px; }
.cx-guard b { color: var(--ink); font-weight: 500; }

.cx-row {
  display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 18px; align-items: center;
  padding: 14px 4px; border-bottom: 1px solid var(--hairline-soft);
}
.cx-row.dnc { opacity: 0.55; }
.cx-row input[type="checkbox"] { width: 15px; height: 15px; margin: 0; }
.cx-name { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.02em; color: var(--ink); line-height: 1.1; }
.cx-name .tag {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase;
  vertical-align: middle; margin-left: 9px; padding: 2px 8px; border-radius: 9999px;
  color: var(--gray); border: 1px solid var(--card-border);
}
.cx-role { font-family: var(--mono); font-size: 0.66rem; color: var(--gray); margin-top: 5px; }
.cx-role b { color: var(--ink); font-weight: 500; }
.cx-loc { font-family: var(--mono); font-size: 0.6rem; color: var(--gray); margin-top: 4px; }
.cx-warm { font-family: var(--mono); font-size: 0.64rem; text-align: right; line-height: 1.5; }
.cx-warm .lead { color: var(--ink); font-weight: 500; }
.cx-warm.cold .lead { color: var(--gray); font-weight: 400; }
.cx-warm .deg { color: var(--gray); font-size: 0.54rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cx-hs {
  font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray); text-decoration: none; display: inline-block; margin-top: 5px;
  border-bottom: 1px solid var(--hairline);
}
.cx-hs:hover { color: var(--ink); }

.cx-export {
  display: flex; align-items: center; gap: 16px; margin: 20px 0 4px; padding: 16px 18px;
  border: 1px solid var(--card-border); border-radius: 14px; background: var(--bg-soft);
}
/* author display rules beat the UA [hidden] rule — re-assert it for these. */
.cx-export[hidden], #cx-to-campaign-btn[hidden] { display: none !important; }
.cx-export-lbl { font-family: var(--mono); font-size: 0.74rem; color: var(--ink); }
.cx-export-lbl b { font-weight: 600; }
.cx-export-sub { font-family: var(--mono); font-size: 0.56rem; color: var(--gray); margin-top: 3px; }
.cx-spacer { margin-left: auto; }

/* Sheets-realistic export preview — cell bg + borders, like an actual Google Sheet. */
.gs-title { font-family: var(--mono); font-size: 0.66rem; color: var(--gray); margin-bottom: 10px; }
.gs-title b { color: var(--ink); }
.gs { background: #ffffff; border: 1px solid #c4c7c5; border-radius: 4px; overflow-x: auto; }
.gs table { width: 100%; border-collapse: collapse; font-family: Arial, 'Helvetica Neue', sans-serif; }
.gs th, .gs td { border: 1px solid #d9dcdf; padding: 6px 9px; font-size: 11px; color: #202124; text-align: left; white-space: nowrap; }
.gs th { background: #f1f3f4; font-weight: 600; color: #5f6368; }
.gs td.url { color: #1a73e8; }
.gs td.empty { background: #fafafa; color: #bdc1c6; }
.gs td.primary { background: #e8f0fe; color: #1a3a6b; font-weight: 600; }
.gs-note { font-family: var(--mono); font-size: 0.6rem; color: var(--gray); margin-top: 10px; line-height: 1.7; max-width: 760px; }
.gs-note b { color: var(--ink); }

/* Entry C — "Build from warm connections" card in the campaign Data step. */
.conn-source-block {
  border: 1px solid var(--card-border); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 16px; background: var(--bg-soft);
}
.conn-source-head { font-family: var(--display); font-size: 1.1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.conn-source-sub { font-family: var(--mono); font-size: 0.68rem; color: var(--gray); margin-top: 5px; line-height: 1.5; }
.conn-source-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.conn-source-hint { font-family: var(--mono); font-size: 0.58rem; color: var(--gray); margin-top: 12px; line-height: 1.7; }
.conn-source-hint b { color: var(--ink); font-weight: 500; }

/* Progress bar + "still working" indicator (Drive sync + HubSpot cache build). */
.conn-progress { margin: 16px 0 4px; max-width: 520px; }
.conn-progress[hidden] { display: none; }
.conn-progress-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.conn-progress-dot {
  width: 9px; height: 9px; border-radius: 9999px; background: var(--ink);
  animation: connPulse 1.1s ease-in-out infinite;
}
@keyframes connPulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
.conn-progress-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink); }
.conn-progress-pct { font-family: var(--mono); font-size: 0.66rem; color: var(--gray); margin-left: auto; }
.conn-progress-track { height: 4px; border-radius: 9999px; background: var(--hairline-soft); overflow: hidden; }
.conn-progress-fill { height: 100%; width: 0; background: var(--ink); border-radius: 9999px; transition: width 0.4s ease; }
.conn-progress.indeterminate .conn-progress-fill { width: 35% !important; animation: connSlide 1.3s ease-in-out infinite; }
@keyframes connSlide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
.conn-progress-quip { font-family: var(--mono); font-size: 0.64rem; color: var(--gray); margin-top: 9px; font-style: italic; }

.dashboard-header {
  padding: 24px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Wrap instead of overflowing to the right when the row is wide (e.g. an admin
     with the extra Conductor filter) — otherwise the "+ New campaign" button
     slides under the fixed CONSOLE lip and gets clipped. */
  flex-wrap: wrap;
}
.dashboard-new-btn { font-size: 0.7rem; padding: 8px 18px; }
.dashboard-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0;
}

.dashboard-section { margin-bottom: 40px; }
.dashboard-section-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

.campaign-list { display: flex; flex-direction: column; }

/* v2.11.5: past-campaigns search + collapse toggle */
.past-search-row { margin-bottom: 12px; }
.past-search-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.past-toggle-row {
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
}
.past-toggle-row[hidden] { display: none; }
.past-toggle-btn {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.past-toggle-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* v2.11.7: clickable past-campaign rows + endReason badge variants */
.campaign-row-clickable { cursor: pointer; }
.campaign-row-status.is-stopped { color: var(--gray); border-color: var(--hairline); }
.campaign-row-status.is-errored { color: #b00020; border-color: #b00020; }

/* Past-campaign details modal — read-only summary + Re-run CTA */
.past-campaign-modal-card {
  position: relative;
  max-width: 560px;
  width: 92%;
}
.past-campaign-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gray);
  cursor: pointer;
  padding: 4px 8px;
}
.past-campaign-modal-close:hover { color: var(--ink); }
.past-campaign-modal-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 16px;
}
.past-detail-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.85rem;
}
.past-detail-row:last-child { border-bottom: none; }
.past-detail-key {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}
.past-detail-val { color: var(--ink); word-break: break-word; }
.past-detail-val .campaign-row-status { font-size: 0.55rem; }

/* v2.11.8 + v2.11.9: per-row checkbox + delete-X. Hidden until the
   past-section enters .manage-mode (via the trash-icon toggle in the
   section header). Hiding via visibility:hidden + width:0 keeps the
   grid columns but collapses their visible footprint, so the row
   layout doesn't jump around when entering/exiting manage mode. */
.past-row-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
  visibility: hidden;
}
.past-section.manage-mode .past-row-checkbox {
  visibility: visible;
}
.past-row-delete {
  background: transparent;
  border: none;
  color: var(--gray);
  font-size: 1.25rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
  visibility: hidden;
}
.past-section.manage-mode .past-row-delete {
  visibility: visible;
}
.past-row-delete:hover {
  color: #b00020;
  background-color: rgba(176, 0, 32, 0.08);
}

/* Past section header: title + trash-icon toggle */
.past-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.past-section-header .dashboard-section-title {
  margin: 0;
  padding: 0;
  border: none;
}
.past-manage-toggle {
  background: transparent;
  border: 1px solid transparent;
  color: var(--gray);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.past-manage-toggle:hover {
  color: var(--ink);
  border-color: var(--hairline);
}
.past-manage-toggle.active {
  color: var(--ink);
  border-color: var(--ink);
  background-color: var(--hairline);
}

.past-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  margin-bottom: 8px;
  background: var(--hairline);
  border-radius: 4px;
}
/* v2.11.10: explicit override — display:flex above outranks the user-agent
   [hidden] { display:none } rule, so the bar would render at 0 selected
   despite bar.hidden=true. Targeted fix here keeps the rest of the codebase's
   `hidden` attribute usage working without touching unrelated elements. */
.past-bulk-bar[hidden] { display: none; }
.past-bulk-count {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.past-bulk-actions {
  display: flex;
  gap: 8px;
}

.undo-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--ink, #1a1a1a);
  color: #fafafa;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  z-index: 2000;
}
.undo-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.undo-toast[hidden] { display: none; }
.undo-toast-action {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fafafa;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.undo-toast-action:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

.campaign-row {
  display: grid;
  /* v2.11.8: checkbox + name + type + progress + status + X-button (6 cols) */
  grid-template-columns: auto 2fr 1.4fr 1.4fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline);
  font-family: inherit;
  color: inherit;
  background: transparent;
  border-top: 0; border-left: 0; border-right: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.campaign-row:hover { background-color: var(--hairline); }
.campaign-row:disabled { cursor: default; }
.campaign-row:disabled:hover { background-color: transparent; }

.campaign-row-name {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.campaign-row-type,
.campaign-row-progress {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
}
.campaign-row-status {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  color: var(--gray);
  white-space: nowrap;
  justify-self: end;
}
.campaign-row-status.is-running { color: var(--ink); border-color: var(--ink); }
.campaign-row-status.is-paused { color: var(--gray); }
.campaign-row-status.is-done { color: var(--gray); }

.dashboard-actions {
  padding: 24px 0 8px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: center;
}
.create-campaign-btn {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 28px;
}

.wizard-back-row { padding: 16px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.wizard-queue-banner {
  margin: 4px 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--border, #d4d4d4);
  border-radius: 6px;
  background: var(--bg-soft, #f7f7f5);
  font-size: 13px;
  color: var(--text-secondary, #555);
}
.wizard-queue-banner strong { color: var(--text-primary, #111); margin-right: 8px; }

/* Naming the replacement campaign, inside the cloud-edit banner. */
.cloud-edit-rename-label {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary, #777);
  margin: 0 0 5px;
}
#cloud-edit-new-name { width: 100%; font-family: var(--mono, monospace); font-size: 12.5px; }
.cloud-edit-swap {
  font-family: var(--mono, monospace);
  font-size: 12px;
  margin-top: 8px;
  color: var(--text-secondary, #555);
}
.cloud-edit-swap .old { text-decoration: line-through; opacity: .55; }

/* Apply / Cancel for an account-picker session, pinned to the top of §3 where
   the operator is actually ticking accounts. */
.acct-add-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--gold, #d4a24a);
  border-radius: 6px;
  background: var(--bg-soft, #f7f7f5);
  font-size: 13px;
}
.acct-add-bar-txt { flex: 1; min-width: 220px; color: var(--text-secondary, #555); }

/* Bulk-check status text: streams multi-line log output during a sweep,
   so we need newline rendering and a monospace-friendly block. */
.bulk-check-status-msg {
  white-space: pre-line;
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary, #555);
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
}

/* v2.14.x: in-flight bulk-check panel (Variant A — sketch at
   public/sketches/bulk-check-streaming.html). Stat strip + doing-line +
   progress bar. Shows for two scenarios:
     (a) manual BULK CHECK CONNECTIONS button — driven by the streaming
         poll in bulkCheckNow().
     (b) campaign in-batch bulk-check — driven by pollStatus() observing
         📡 log lines in campaign.logs.
   Hidden when no bulk-check activity in the last ~15s. */
.bulk-check-live {
  border: 1px solid var(--hairline);
  background: var(--bg-soft);
  padding: 16px 22px 18px;
  margin: 8px 0 14px;
}
.bulk-check-live[hidden] { display: none; }
.bulk-check-live__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hairline-soft);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.bulk-check-live__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--gray);
}
.bulk-check-live__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(247, 190, 104, 0.35);
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.bulk-check-live__pill--done {
  border-color: rgba(63, 185, 80, 0.35);
  color: var(--green);
}
.bulk-check-live__pill--done .bulk-check-live__pulse { animation: none; }
.bulk-check-live__pulse {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: currentColor;
  animation: bclpulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bclpulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
.bulk-check-live__stats {
  display: flex;
  gap: 44px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bulk-check-live__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 90px;
}
.bulk-check-live__num {
  font-family: var(--display);
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
}
.bulk-check-live__num--muted { color: var(--gray); }
.bulk-check-live__lbl {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--gray);
}
.bulk-check-live__doing {
  color: var(--gray);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: italic;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
}
.bulk-check-live__doing strong {
  color: var(--ink);
  font-weight: 500;
  font-style: normal;
}
.bulk-check-live__doing .bulk-check-live__pulse { color: var(--gold); }
.bulk-check-live__progress {
  height: 2px;
  background: rgba(255,255,255,0.06);
  margin-top: 14px;
  overflow: hidden;
}
.bulk-check-live__progress > span {
  display: block;
  height: 100%;
  background: var(--gold);
  width: 0%;
  transition: width 0.5s ease;
}

/* v2.14.x: graphical bulk-check result card. Replaces the long inline
   text line ("0 marked Connected, 8 marked Still Pending (of 120
   recent connections fetched) — 1 account(s) failed: …") with a
   cockpit-style numeric panel. Hairlines + monospace label + display
   font on the numbers; no accent colors, monochrome only — matches
   the Bugatti command-deck design language used elsewhere. */
.bulk-check-summary {
  border: 1px solid var(--hairline);
  background: var(--bg-soft);
  padding: 14px 18px 16px;
  margin: 8px 0 14px;
}
.bulk-check-summary[hidden] { display: none; }
.bulk-check-summary__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline-soft);
  margin-bottom: 12px;
}
.bulk-check-summary__label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--gray);
}
.bulk-check-summary__sub {
  font-size: 0.72rem;
  color: var(--gray);
  font-style: italic;
}
.bulk-check-summary__sub:empty { display: none; }
.bulk-check-summary__stats {
  display: flex;
  gap: 36px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.bulk-check-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}
.bulk-check-summary__num {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.bulk-check-summary__num--muted { color: var(--gray); }
.bulk-check-summary__lbl {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--gray);
}
.bulk-check-summary__notes {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--gray);
}
.bulk-check-summary__notes:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.bulk-check-summary__notes .note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.bulk-check-summary__notes .note .glyph {
  font-family: var(--mono);
  color: var(--gray);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.bulk-check-summary__notes .note .body { flex: 1; }
.bulk-check-summary__notes .note--warn .glyph { color: var(--red); }
.bulk-check-summary__notes .note--ok .glyph { color: var(--green); }

.back-link {
  background: transparent;
  border: none;
  color: var(--gray);
  cursor: pointer;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.back-link:hover { color: var(--ink); }

@media (max-width: 720px) {
  .campaign-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .campaign-row-status { justify-self: start; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Local Browser tile — separate from the GoLogin profile grid
   Sits above the accounts-browser. The first-name input only appears
   after the operator ticks the checkbox.
   ───────────────────────────────────────────────────────────────────────── */
.local-browser-host { margin: 8px 0 24px; }

.local-browser-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  background: transparent;
}
.local-browser-tile:hover { border-color: var(--gray); }
.local-browser-tile.selected { border-color: var(--ink); }

.local-browser-tile > input[type="checkbox"] {
  margin-top: 4px;
  width: 16px; height: 16px;
}

.local-browser-tile .local-browser-body { min-width: 0; }
.local-browser-tile .name {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.local-browser-tile .id {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--gray);
  text-transform: none;
}

.local-browser-name-row { margin-top: 12px; }
.local-browser-name-row[hidden] { display: none; }
.local-browser-name-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}
.local-browser-name-row input {
  width: 100%;
  max-width: 360px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Dashboard inline name edit
   ───────────────────────────────────────────────────────────────────────── */
.campaign-row-name-text {
  background: transparent;
  border: none;
  padding: 4px 6px;
  margin: -4px -6px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: text;
  border-radius: 0;
  transition: background-color 0.12s ease;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campaign-row-name-text:hover { background-color: var(--hairline); }
.campaign-row-name-text:focus-visible { outline: 1px dashed var(--gray); outline-offset: 2px; }
.campaign-row-name-text.is-empty {
  font-style: italic;
  color: var(--gray);
}

.campaign-row-name-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--ink);
  padding: 4px 6px;
  margin: -5px -7px;
  font: inherit;
  color: var(--ink);
  border-radius: 0;
  outline: none;
}
.campaign-row-name-input.save-failed { border-color: #c0392b; }

/* Sidebar "← Dashboard" item — sits above the Campaign section. Keeps the
   nav-item shape so spacing/alignment matches the section items below, but
   separated visually with a hairline so the operator reads it as escape,
   not as another step. */
.nav-item-back {
  margin-bottom: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.nav-item-back .nav-num {
  font-family: var(--mono);
}

/* ─────────────────────────────────────────────────────────────────────────
   Post Amplification (v3.0) — wide-table variant
   ───────────────────────────────────────────────────────────────────────── */
.pa-label {
  display: block;
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 8px;
}
.pa-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--hairline); color: var(--ink);
  padding: 10px 0; font-family: var(--body); font-size: 0.95rem;
  outline: none;
}
.pa-input::placeholder { color: var(--gray); }
.pa-helper {
  font-family: var(--body); font-size: 0.75rem;
  color: var(--gray); margin-top: 6px;
}
.pa-helper code {
  font-family: var(--mono); font-size: 0.7rem;
  color: var(--gray);
}

.pa-table {
  width: 100%; border: 1px solid var(--hairline); border-collapse: collapse;
}
.pa-table th {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray); font-weight: 400;
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--hairline-soft);
}
.pa-table td {
  padding: 14px;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: top;
}
.pa-table tr:last-child td { border-bottom: none; }
.pa-name { font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.pa-id {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; color: var(--gray); text-transform: uppercase;
  margin-top: 2px;
}
.pa-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body); font-size: 0.85rem; cursor: pointer;
}
.pa-toggle input { accent-color: var(--ink); width: 14px; height: 14px; }
.pa-comment {
  width: 100%; min-height: 56px; resize: vertical;
  background: var(--hairline-soft); border: 1px solid var(--hairline);
  color: var(--ink); padding: 10px;
  font-family: var(--body); font-size: 0.85rem;
  outline: none;
  transition: opacity 0.15s ease;
}
/* "comment off" — purely visual; the textarea remains usable and typing
   into it auto-enables Comment via setPostAmpComment(). */
.pa-comment.is-comment-off { opacity: 0.45; }
.pa-comment.is-comment-off::placeholder { color: var(--gray); font-style: italic; }
.pa-comment:focus { opacity: 1; border-color: var(--ink); }
.pa-suggest-row {
  display: flex; gap: 8px; margin-top: 6px; align-items: center;
  font-size: 0.72rem; color: var(--gray);
}
.pa-suggest-link {
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); cursor: pointer; background: none; border: none;
  padding: 0; text-decoration: underline; text-decoration-color: var(--hairline);
}
.pa-suggest-link:hover { text-decoration-color: var(--ink); }
.pa-suggest-link[disabled],
.pa-suggest-link.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Suggestions panel — rendered inline as a sibling of the suggest-row.
   No positioning gymnastics: when open it pushes the next row down. */
.pa-suggest-pop {
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--ink);
  max-height: 280px;
  overflow-y: auto;
}
.pa-suggest-pop-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 0.84rem;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.pa-suggest-pop-item:last-child { border-bottom: none; }
.pa-suggest-pop-item:hover { background: var(--hairline-soft); }
.pa-suggest-pop-tag {
  font-family: var(--mono); font-size: 0.55rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); flex-shrink: 0;
}

.pa-info-strip {
  margin-top: 24px; padding: 14px 16px;
  background: var(--hairline-soft);
  border-left: 2px solid var(--gold, #F7BE68);
  font-size: 0.8rem; color: var(--gray);
  line-height: 1.65;
}
.pa-info-strip strong { color: var(--ink); font-weight: 500; }

.pa-templates {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px dashed var(--hairline);
}
.pa-templates h3 {
  font-family: var(--mono); font-size: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 12px; font-weight: 400;
}
.pa-templates h3 span { color: var(--gray); }
.pa-templates ul { list-style: none; padding: 0; margin: 0; }
.pa-templates li {
  padding: 8px 0; border-bottom: 1px solid var(--hairline-soft);
  font-size: 0.85rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.pa-templates li:last-child { border-bottom: none; }
.pa-templates .pa-tpl-text {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink);
}
.pa-templates .pa-tpl-del {
  font-family: var(--mono); font-size: 0.65rem;
  color: var(--gray); cursor: pointer;
  background: none; border: none; padding: 4px 8px;
}
.pa-templates .pa-tpl-del:hover { color: var(--red); }

/* Sheet tab URL hint — green/neutral on entry, red-ish when the operator
   pasted a sheet URL that doesn't point at a specific tab. Non-blocking; the
   campaign still runs (and falls back to the first tab) if they ignore it. */
.sheet-tab-hint {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin: 6px 0 12px 0;
  line-height: 1.5;
}
.sheet-tab-hint code {
  font-family: var(--mono);
  background: var(--hairline);
  padding: 1px 4px;
  font-size: 0.95em;
}
.sheet-tab-hint.is-warning {
  color: #c0392b;
}
.sheet-tab-hint.is-warning code { background: rgba(192, 57, 43, 0.12); }

/* Advanced disclosure inside Section 4. Keeps the secondary knob (pause
   between leads) reachable without making it the first thing the operator
   sees. Closed by default. */
.alpha-advanced {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.alpha-advanced > summary {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 4px 0;
}
.alpha-advanced > summary::-webkit-details-marker { display: none; }
.alpha-advanced > summary::before {
  content: '+';
  display: inline-block;
  width: 14px;
  font-family: var(--mono);
  color: var(--gray);
}
.alpha-advanced[open] > summary::before { content: '−'; }
.alpha-advanced > summary:hover { color: var(--ink); }
.alpha-advanced-body { padding-top: 16px; }

/* Bottom-of-wizard back link — third return path (sidebar + top + here). The
   wizard is long enough that operators who scrolled to Launch shouldn't have
   to scroll back up or look left to escape. */
.wizard-bottom-actions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wizard-bottom-back {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
}

/* Edit button on dashboard rows — quick jump to the wizard for the
   active/past campaign. On Active rows (5 base cols: name, type, progress,
   status) the Edit pill is the 5th column. On Past rows (6 base cols:
   checkbox, name, type, progress, status, delete-X) the Edit pill slots in
   between status and delete-X for a 7-col layout — Edit comes before
   destructive delete by convention. */
.campaign-row--with-edit {
  grid-template-columns: 2fr 1.4fr 1.4fr auto auto;
}

/* v2.59.x — Queued rows are drag-to-reorder. 6 cols: handle, name, type,
   position, status, actions. Cursor is grab everywhere on the row so the
   handle isn't the only hit target — the whole row reacts. */
.campaign-row--queue {
  grid-template-columns: 28px 2fr 1.4fr 1.4fr auto auto;
  cursor: grab;
}
.campaign-row--queue.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
  background-color: var(--hairline);
}
.campaign-row--queue.is-drop-target-above {
  box-shadow: 0 -2px 0 0 var(--ink) inset;
}
.campaign-row--queue.is-drop-target-below {
  box-shadow: 0 2px 0 0 var(--ink) inset;
}
.qhandle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 18px;
  line-height: 1;
  user-select: none;
  cursor: grab;
}
.campaign-row--queue:hover .qhandle { color: var(--ink); }
.queue-hint {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
  background: var(--hairline-soft, rgba(0,0,0,0.03));
}
.queue-tab-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
  justify-content: flex-end;
}
.queue-run-next {
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--ink);
  border-radius: 9999px;
  padding: 8px 18px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.queue-run-next:hover { opacity: 0.9; }
.queue-run-next:disabled { opacity: 0.35; cursor: not-allowed; }
.campaign-row.past-section .campaign-row--with-edit,
.campaign-row--with-edit.campaign-row-clickable {
  /* 8 cols: checkbox, name, type, progress, status, Edit, Duplicate, delete-X */
  grid-template-columns: auto 2fr 1.4fr 1.4fr auto auto auto auto;
}
.campaign-row-edit {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--gray);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.campaign-row-edit:hover { border-color: var(--ink); color: var(--ink); }

/* v2.14.x: Resume button on stopped past-campaign rows — gold treatment
   (same rationale as Start CTA: Resume IS a Start). */
.campaign-row-edit.campaign-row-resume {
  color: var(--gold);
  border-color: var(--gold);
}
.campaign-row-edit.campaign-row-resume:hover {
  background: var(--gold);
  color: var(--bg);
}

/* v2.60.x: STOPPED chip becomes the resume action (variant F).
   The status pill keeps its label but adds "▸ RESUME" and turns gold
   to signal it's interactive. Click = one-shot resume, no modal.
   Applied only when endReason === 'stopped' && !fullStop && settings
   are present (see _buildPastRowHtml). Replaces the separate Resume
   pill so the row stays at 7 grid columns and the layout doesn't
   wrap. */
.campaign-row-status.is-stopped-action {
  color: var(--gold);
  border-color: var(--gold);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.campaign-row-status.is-stopped-action::after {
  content: "  \25B8  RESUME";
  margin-left: 6px;
}
.campaign-row-status.is-stopped-action:hover,
.campaign-row-status.is-stopped-action:focus-visible {
  background: var(--gold);
  color: var(--bg);
  outline: none;
}

/* Runbar Resume button — uses .btn-start's existing dark-pill base, but
   when added as a sibling we want it visually distinct from Start so the
   operator sees Resume as the primary path. Inherits gold-on-dark from
   btn-start; no extra styles needed unless we want to differentiate. */

/* Resume-choice modal "Cancel" link */
.modal-cancel-link {
  background: transparent;
  border: 0;
  color: var(--gray);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 8px;
}
.modal-cancel-link:hover { color: var(--ink); }

/* v2.14.x: Stop-choice modal (CC + Introduce Back only) — two side-by-side
   pills, no eyebrow, equal visual weight. The "Stop everything" pill turns
   red on hover; the "keep monitoring" pill stays neutral. */
.stop-choice-card {
  max-width: 580px;
  padding: 38px 40px 30px;
  position: relative;
}
.stop-choice-eyebrow {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}
.stop-choice-headline {
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.stop-choice-sub {
  font-size: 0.78rem;
  color: var(--gray);
  margin-bottom: 24px;
  line-height: 1.55;
}
.stop-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stop-choice-pill {
  border: 1px solid var(--hairline);
  padding: 16px 18px;
  cursor: pointer;
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  text-align: left;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  border-radius: 0;
}
.stop-choice-pill-headline {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 8px;
  color: var(--ink);
}
.stop-choice-pill-sub {
  font-size: 0.65rem;
  color: var(--gray);
  line-height: 1.45;
}
.stop-choice-pill.is-monitor:hover { border-color: var(--ink); }
.stop-choice-pill.is-stop:hover {
  border-color: #c0392b;
  color: #c0392b;
}
.stop-choice-pill.is-stop:hover .stop-choice-pill-headline { color: #c0392b; }
.stop-choice-cancel-row { text-align: center; margin-top: 16px; }

/* v2.14.x: Runbar Restore button — always visible, V2 (icon + label).
   Neutral hairline pill; goes to ink on hover. Vertical divider before
   it visually groups Restore apart from Start/Pause/Stop (lifecycle
   actions) as a recovery action. */
.run-bar-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--hairline);
  margin: 0 6px;
  align-self: center;
}
.btn-restore {
  background: transparent;
  color: var(--gray);
  border: 1px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-restore:hover { color: var(--ink); border-color: var(--ink); }
.ico-restore {
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
}

/* Restore confirmation modal — amber eyebrow signals "recovery action",
   amber CTA matches. Not red (Restore isn't destructive — state.processed
   survives). */
.restore-modal-card {
  max-width: 540px;
  padding: 38px 44px 30px;
  position: relative;
}
.restore-modal-eyebrow {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b9770e;
  margin-bottom: 8px;
}
.restore-modal-sub {
  font-size: 0.8rem;
  color: var(--gray);
  margin-bottom: 22px;
  line-height: 1.55;
}
.restore-modal-list {
  border: 1px solid var(--hairline);
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: 0.72rem;
  color: var(--ink);
  line-height: 1.65;
}
.restore-modal-list > div + div { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline-soft); }
.restore-li-key {
  color: var(--gray);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
  min-width: 86px;
  margin-right: 8px;
}
.btn-restore-cta {
  color: #b9770e;
  border: 1px solid rgba(185, 119, 14, 0.55);
  background: transparent;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-restore-cta:hover {
  background: #b9770e;
  color: var(--bg);
  border-color: #b9770e;
}
.campaign-row-actions { display: flex; gap: 8px; align-items: center; }
.campaign-row-edit--icon {
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1;
  padding: 4px 10px;
  min-width: 28px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Monitoring card (Schedules lane) — v2.14
   See public/sketches/monitoring-phase-sketch.html for visual reference
   ───────────────────────────────────────────────────────────────────────── */
.mon-card {
  border: 1px solid var(--hairline);
  background: var(--bg);
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: border-color 0.15s;
}
.mon-card.expanded { border-color: rgba(255, 255, 255, 0.28); }

.mon-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.mon-title {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.mon-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  border: 1px solid var(--green);
  border-radius: 2px;
  color: var(--green);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(-2px);
}
.mon-badge.ending-soon { border-color: var(--red); color: var(--red); }

.mon-next {
  color: var(--gray);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  margin-top: 6px;
}
.mon-next b { color: var(--ink); font-weight: 500; }

.mon-actions { display: flex; gap: 8px; margin-top: 12px; }
.mon-btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mon-btn:hover { border-color: var(--ink); }
.mon-btn:disabled { opacity: 0.4; cursor: default; }
.mon-btn.danger { color: var(--red); }
.mon-btn.danger:hover { border-color: var(--red); }
.mon-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink);
  cursor: pointer;
}
.mon-auto-hint {
  font-size: 0.72rem;
  color: var(--gray);
  margin-top: 6px;
}
.mon-btn-expand {
  background: transparent;
  color: var(--gray);
  border: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  padding: 4px 0;
}
.mon-btn-expand:hover { color: var(--ink); }

.mon-details {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
}
.mon-sub-label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}
.mon-accounts { margin-bottom: 18px; }
.mon-account-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.78rem;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-soft);
}
.mon-account-row:last-child { border-bottom: none; }
.mon-account-row .check-time { color: var(--gray); font-size: 0.72rem; }

.mon-counts {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.mon-count { font-size: 0.75rem; color: var(--gray); }
.mon-count b {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
  display: block;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.mon-count.intro b { color: var(--green); }
.mon-count.timeout b { color: var(--red); }

.mon-log {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline-soft);
  padding: 12px;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 0.72rem;
  max-height: 200px;
  overflow-y: auto;
  color: var(--gray);
  white-space: pre-wrap;
}

.preflight-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* Actions row */
.preflight-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-soft);
}

/* ──────────────────────────────────────────────────────────────────────
   Dashboard tabbed layout (v2.51) — REMOVED in v2.60 dashboard v0.3.
   The 7-tab structure no longer exists in markup; .dash-tab*, .dash-panel*,
   .dash-bulkstrip*, .dash-bulk-*, .dash-search*, .dash-selall*, .dash-check*,
   .dash-row-check*, .dash-row-sel, .dash-row-pill*, .dash-toolbar,
   .dash-panels, and @dash-slidedown were deleted. The .dash-dialog*
   rules below survive — they're reused by the wizard's "campaign is
   running" warning modal (showRunningEditWarning in app.js).
   ─────────────────────────────────────────────────────────────────── */

/* Confirmation dialog (now wizard "campaign is running" modal) */
.dash-dialog-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: dash-fadein 0.15s ease;
}
@keyframes dash-fadein { from { opacity: 0; } to { opacity: 1; } }
.dash-dialog {
  background: #0a0a0a;
  border: 1px solid var(--red, #f85149);
  padding: 28px 32px;
  max-width: 480px;
  width: 90%;
}
.dash-dialog h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--red, #f85149);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.dash-dialog p {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 16px;
}
.dash-dialog p b { color: var(--ink); }
.dash-dialog-preview {
  border: 1px solid var(--hairline-soft, rgba(255,255,255,0.06));
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 0.74rem;
  color: var(--gray);
  max-height: 140px;
  overflow: auto;
}
.dash-dialog-preview span { display: block; padding: 2px 0; }
.dash-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Drafts isolation (2026-05-27): editing-banner pinned to the top of the
 * wizard. Visible when an active draft id is set. Shows draft name +
 * autosave pip + launch CTA. Variant B from sketches.
 * ────────────────────────────────────────────────────────────────────────*/
.wiz-editing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  margin: 0 0 16px 0;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.025);
}
body.theme-light .wiz-editing-banner { background: rgba(0, 0, 0, 0.025); }

.wiz-editing-banner-left {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.wiz-editing-banner-lbl {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray);
  flex-shrink: 0;
}
.wiz-editing-banner-name {
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.wiz-editing-banner-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.wiz-save-pip {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wiz-save-pip::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--green);
}
/* OBSOLETE (kept for any legacy markup still referencing it). The launch
   action is now a menu, not a single button. See .wiz-launch-* below. */
.wiz-editing-launch {
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--ink);
  border-radius: 9999px;
  padding: 9px 22px;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.12s;
}
.wiz-editing-launch:hover { opacity: 0.85; }

/* ── Inline editing indicator — sits next to the BACK link as a small
   breadcrumb. Replaces the old #wiz-editing-banner (moved + slimmed down). */
.wiz-editing-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--gray);
  margin-left: 14px;
}
.wiz-editing-inline-sep { color: var(--gray-faint); }
.wiz-editing-inline-lbl {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  font-size: 0.56rem;
}
.wiz-editing-inline-name {
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.wiz-editing-inline-pip-sep { color: var(--gray-faint); }

/* ── Fixed launch rail pinned to viewport bottom ────────────────────────
   Spans the main column (right of sidebar). Position fixed (not sticky) so
   it survives scroll-context quirks inside #wizard-view. Menu opens upward.
   Body shifts wizard padding-bottom up via .has-launch-rail so the rail
   doesn't cover form content at the end of the form. */
.wiz-launch-rail {
  position: fixed;
  bottom: 18px;
  right: 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 30;
  pointer-events: none;
  background: transparent;
}
.wiz-launch-rail .wiz-launch-wrap { pointer-events: auto; }
body[data-show-right-pane="true"] .wiz-launch-rail { right: calc(var(--rightpane-w) + 24px); }
@media (max-width: 820px) {
  .wiz-launch-rail { right: 16px; bottom: 16px; }
}
/* When the rail is visible, give the wizard extra bottom padding so the
   final form content can scroll above the rail. JS toggles .has-launch-rail
   on <body> alongside the rail's display state. */
body.has-launch-rail #wizard-view { padding-bottom: 96px; }

/* ── Launch menu — trigger button + dropdown panel ──────────────────────
   Trigger is an outline button (NOT the gold Bugatti CTA — that's reserved
   for the actual Start action inside the menu). Click-outside closes the
   menu (wired in app.js). When inside the bottom rail the menu opens
   upward via the .opens-up modifier. */
.wiz-launch-wrap { position: relative; display: inline-block; }
.wiz-launch-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 11px 22px;
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.wiz-launch-trigger:hover {
  border-color: var(--ink);
  background: #1a1a16;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
}
body.theme-light .wiz-launch-trigger {
  background: #ffffff;
  border-color: rgba(0,0,0,0.18);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.22), 0 2px 6px -2px rgba(0,0,0,0.10);
}
body.theme-light .wiz-launch-trigger:hover { background: #fafaf9; border-color: var(--ink); }
.wiz-launch-trigger-chev { width: 14px; height: 14px; transition: transform 0.22s ease; color: var(--gray); }
.wiz-launch-trigger.is-open .wiz-launch-trigger-chev { transform: rotate(180deg); color: var(--ink); }
.wiz-launch-trigger.is-open { border-color: var(--ink); }

/* Draft context block: mode chip stacked above campaign name, sitting to
   the left of the "+ Launch options" CTA so the operator always sees
   what they're working on. Hidden until a draft is active. */
.wiz-launch-trigger-meta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
  max-width: 220px;
}
.wiz-launch-trigger-mode {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
}
.wiz-launch-trigger-name {
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bug 15: running-campaign control bar — same pill shell as the launch trigger,
   shown in its place once a campaign is live (Pause / Stop / Save as draft). */
.wiz-launch-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  padding: 9px 12px 9px 20px;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.35);
}
.wiz-launch-controls[hidden] { display: none; }
body.theme-light .wiz-launch-controls {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.22), 0 2px 6px -2px rgba(0, 0, 0, 0.10);
}
.wiz-launch-controls-meta {
  display: inline-flex; flex-direction: row; align-items: center;
  gap: 11px; line-height: 1.1; max-width: 280px;
  cursor: pointer; border-radius: 13px; padding: 5px 9px; margin: -5px -3px;
  background: transparent; border: none; text-align: left;
  transition: background 0.12s;
}
.wiz-launch-controls-meta:hover { background: var(--hairline-soft); }
.wiz-launch-controls-meta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wlc-meta-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.wlc-open-arrow {
  color: var(--gray); font-size: 0.95rem; flex: 0 0 auto;
  transition: color 0.12s, transform 0.12s;
}
.wiz-launch-controls-meta:hover .wlc-open-arrow { color: var(--ink); transform: translate(2px, -2px); }
.wiz-launch-controls-meta:hover .wiz-launch-controls-name { text-decoration: underline; text-underline-offset: 3px; }
.wiz-launch-controls-mode {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--green);
}
.wiz-launch-controls-name {
  font-family: var(--body); font-size: 1rem; font-weight: 600; color: var(--ink);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Monitoring phase — report it with a blue pulsing dot matching the dashboard
   monitoring card's accent, so "Monitoring" reads as live (and consistent
   with the blue monitoring treatment on the dashboard). */
.wiz-launch-controls.is-monitoring .wiz-launch-controls-name {
  display: inline-flex; align-items: center; gap: 8px;
}
.wiz-launch-controls.is-monitoring .wiz-launch-controls-name::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--blue); box-shadow: 0 0 0 3px rgba(74, 123, 184, 0.22);
  animation: cockpit-pulse 2.2s ease-in-out infinite;
}
/* During monitoring the mode chip turns blue too (was green for sending). */
.wiz-launch-controls.is-monitoring .wiz-launch-controls-mode { color: var(--blue); }
.wiz-launch-controls-divider { width: 1px; height: 26px; background: var(--hairline); }
.wiz-ctrl-btn {
  font-family: var(--body); font-size: 0.92rem; font-weight: 500;
  color: var(--ink); background: transparent;
  border: 1px solid var(--hairline); border-radius: 9999px;
  padding: 9px 18px; cursor: pointer; white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.wiz-ctrl-btn:hover { border-color: var(--ink); }
.wiz-ctrl-btn:disabled { opacity: 0.5; cursor: default; }
.wiz-ctrl-btn.danger { color: var(--red); border-color: rgba(248, 81, 73, 0.45); }
.wiz-ctrl-btn.danger:hover { border-color: var(--red); background: rgba(248, 81, 73, 0.08); }
body.theme-light .wiz-ctrl-btn { border-color: rgba(0, 0, 0, 0.2); }
.wiz-launch-trigger-divider {
  width: 1px;
  height: 26px;
  background: var(--hairline);
  margin: 0 4px;
}
.wiz-launch-trigger-cta { color: var(--ink); }

.wiz-launch-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 300px;
  background: #14140f; /* dark mode default — solid, never translucent */
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 14px 36px -8px rgba(0,0,0,0.55);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s, transform 0.16s;
}
body.theme-light .wiz-launch-menu {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.22);
  box-shadow:
    0 24px 60px -10px rgba(0,0,0,0.35),
    0 4px 12px -2px rgba(0,0,0,0.18);
}
.wiz-launch-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Menu opens UPWARD when in the bottom rail */
.wiz-launch-menu.opens-up {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateY(4px);
}
.wiz-launch-menu.opens-up.show { transform: translateY(0); }
.wiz-launch-menu-header {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 8px 14px 6px;
}
.wiz-launch-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.wiz-launch-menu-item:hover { background: rgba(255,255,255,0.06); }
body.theme-light .wiz-launch-menu-item:hover { background: rgba(0,0,0,0.04); }
.wiz-launch-menu-ic {
  width: 30px;
  height: 30px;
  border-radius: 9999px;
  border: 1px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--gray);
}
.wiz-launch-menu-ic.gold { border-color: var(--gold); color: var(--gold); }
.wiz-launch-menu-ic svg { width: 14px; height: 14px; }
.wiz-launch-menu-item:hover .wiz-launch-menu-ic { color: var(--ink); }
.wiz-launch-menu-item:hover .wiz-launch-menu-ic.gold { color: var(--gold); }
.wiz-launch-menu-item--danger { border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 12px; }
.wiz-launch-menu-item--danger:hover { background: rgba(248, 81, 73, 0.08); }
.wiz-launch-menu-item--danger:hover .wiz-launch-menu-ic,
.wiz-launch-menu-item--danger:hover .wiz-launch-menu-lbl { color: #c64a4a; }
.wiz-launch-menu-text { display: flex; flex-direction: column; gap: 2px; }
.wiz-launch-menu-lbl { font-size: 0.86rem; font-weight: 500; color: var(--ink); }
.wiz-launch-menu-hint { font-family: var(--mono); font-size: 0.66rem; color: var(--gray); }

/* ─────────────────────────────────────────────────────────────────────────
 * Resume-draft badge — variant F (small gold count on the New-campaign
 * button). Wrapper is position:relative so the badge anchors to the
 * button's top-right corner. Click the badge → resume; click the button
 * itself → fresh campaign. ───────────────────────────────────────────── */
.dashboard-new-wrap { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.resume-draft-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--gold);
  color: #1a1a1a;
  border: 2px solid var(--bg);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: transform 0.12s, background 0.12s;
}
.resume-draft-badge:hover { transform: scale(1.08); background: #d8b873; }
.resume-draft-badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────────────────
   Floating live console (2026-05-27 · v2 — right-edge lip + drawer)
   Replaces the bottom-left pill. Lip on the right edge expands into a
   right-rail drawer when clicked. Driven by renderLiveConsole(s) in app.js.
   ───────────────────────────────────────────────────────────────────────── */

.live-console {
  /* v2.59.26: full-height container so the drawer can slide in smoothly. The
     container itself is inert (pointer-events:none); the lip + drawer re-enable
     pointer events so the empty full-height area never blocks the page. */
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 60;
  font-family: var(--body);
  pointer-events: none;
  /* Permanently-dark surface — pin the dark tokens so the light theme doesn't
     render console text black-on-black. */
  --ink: #fafafa;
  --gray: #9a9a9a;
  --hairline: rgba(255, 255, 255, 0.18);
  --blue: #6ea3d4;
  --green: #3fb950;
  color: var(--ink);
}
.live-console[hidden] { display: none !important; }

/* ── Lip (collapsed, right-edge tab): blinking light + CONSOLE ─────────── */
.live-console__lip {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  pointer-events: auto;
  background: rgba(19, 19, 19, 0.95);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-right: none;
  border-radius: 9px 0 0 9px;
  padding: 32px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s, background 0.15s, opacity 0.2s ease;
}
.live-console.is-expanded .live-console__lip { opacity: 0; pointer-events: none; }
.live-console__lip:hover { border-color: var(--gold); background: rgba(28, 28, 28, 0.98); }

/* Status dot — lip + drawer head. Colour + blink driven by the root state class
   (lc-running = green, lc-monitoring = blue, lc-warn = amber). */
.live-console__dot, .live-console__hdot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 9999px;
  background: var(--gray);
  flex-shrink: 0;
}
.live-console.lc-running .live-console__dot,
.live-console.lc-running .live-console__hdot { background: var(--green); }
.live-console.lc-monitoring .live-console__dot,
.live-console.lc-monitoring .live-console__hdot { background: var(--blue); }
.live-console.lc-warn .live-console__dot,
.live-console.lc-warn .live-console__hdot { background: #d29922; }
.live-console.lc-running .live-console__dot {
  box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.55);
  animation: live-console-pulse-green 1.6s infinite;
}
.live-console.lc-monitoring .live-console__dot {
  box-shadow: 0 0 0 0 rgba(110, 163, 212, 0.55);
  animation: live-console-pulse-blue 1.6s infinite;
}
@keyframes live-console-pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(63, 185, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); }
}
@keyframes live-console-pulse-blue {
  0%   { box-shadow: 0 0 0 0 rgba(110, 163, 212, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(110, 163, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 163, 212, 0); }
}

.live-console__lip-lbl {
  font-family: var(--display);
  font-size: 0.84rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ── Drawer (expanded) — wider + smooth slide-in ──────────────────────── */
.live-console__drawer {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 660px;
  max-width: 94vw;
  background: rgba(11, 11, 11, 0.98);
  border-left: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.live-console.is-expanded .live-console__drawer {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Head: status + name + mode badge + close ─────────────────────────── */
.live-console__head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--hairline);
}
.live-console__head-text { flex: 1; min-width: 0; }
.live-console__status {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray);
}
.live-console.lc-running .live-console__status { color: var(--green); }
.live-console.lc-monitoring .live-console__status { color: var(--blue); }
.live-console__title {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 4px;
  color: var(--ink);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-console__badge {
  width: 42px; height: 42px; flex: 0 0 auto;
  border: 1px solid var(--hairline); border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.02em; color: var(--gray);
  overflow: hidden; white-space: nowrap; text-align: center; padding: 0 2px;
}

/* ── Mini dashboard card inside the drawer ────────────────────────────── */
.live-console__mini {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.live-console__mini::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gray);
}
.live-console.lc-running .live-console__mini::before { background: var(--green); }
.live-console.lc-monitoring .live-console__mini::before { background: var(--blue); }
.live-console__live { display: flex; align-items: center; gap: 12px; }
.live-console__live-ico { flex: 0 0 auto; width: 18px; text-align: center; font-size: 1rem; color: var(--gray); }
.live-console.lc-running .live-console__live-ico { color: var(--green); }
.live-console.lc-monitoring .live-console__live-ico { color: var(--blue); }
.live-console__live-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-console__live-l1 { font-size: 0.98rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.live-console__live-l2 {
  font-family: var(--mono); font-size: 0.76rem; color: var(--gray); letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-console__live-l2:empty { display: none; }
.live-console__live-big { margin-left: auto; text-align: right; flex: 0 0 auto; }
.live-console__live-n {
  display: block; font-family: var(--display); font-size: 1.9rem; line-height: 0.85;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.live-console__live-u {
  display: block; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gray); margin-top: 3px;
}
.live-console__live-u:empty { display: none; }
.live-console__mini-stats {
  font-family: var(--mono); font-size: 0.8rem; color: var(--gray);
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hairline-soft);
}
.live-console__mini-stats b { color: var(--ink); font-weight: 600; }
.live-console__ctl {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 9999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.live-console__ctl:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--ink); }

.live-console__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ── Cockpit row (Variant B): progress ring + stacked stats ─────────── */
.live-console__cockpit {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
}
.live-console__ring {
  width: 120px; height: 120px;
  flex: none;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  /* fill % set in JS (gold while running, blue while monitoring) */
  background: conic-gradient(var(--gold) 0 0%, rgba(255, 255, 255, 0.10) 0% 100%);
}
.live-console__ring-inner {
  width: 96px; height: 96px;
  border-radius: 9999px;
  background: rgba(11, 11, 11, 0.97);
  display: grid;
  place-items: center;
  text-align: center;
}
.live-console__ring-num {
  display: block;
  font-family: var(--display);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.live-console__ring-cap {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  margin-top: 5px;
}
.live-console__stats {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.live-console__stat { min-width: 0; }
.live-console__k {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 4px;
}
.live-console__v {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selected GoLogin account roster — left-aligned chips, acting account lit. */
.live-console__stat--accounts .live-console__accounts { margin-top: 2px; }
.live-console__accounts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--body);
  font-size: 0.74rem;
}
.live-console__acct {
  color: var(--gray);
  white-space: nowrap;
  border: 1px solid var(--hairline-soft);
  border-radius: 9999px;
  padding: 3px 11px;
}
.live-console__acct.is-active {
  color: var(--ink);
  border-color: var(--ink);
}
.live-console__acct.is-active::before {
  content: '▸ ';
  color: var(--green, #4caf50);
}

.live-console__log-label {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}
.live-console__log {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--gray);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--hairline-soft);
  border-radius: 5px;
  padding: 12px 14px;
  line-height: 1.7;
  max-height: 240px;
  overflow-y: auto;
}
.live-console__log-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-console__log-line.is-latest { color: var(--ink); }

.live-console__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-faint, var(--gray));
}
.live-console__dashboard-link {
  color: var(--gold);
  text-decoration: none;
}
.live-console__dashboard-link:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   v2.61 — Past section V3 expand pattern
   Single bordered frame; header (collapsed summary) stays at the top
   when the list expands beneath it. Gold chevron rotates on toggle.
   Scoped with body[data-dashboard='v3'] .past-frame so specificity beats
   the existing .past-collapsed rule in dashboard-v0.3.css.
   ───────────────────────────────────────────────────────────────────────── */
body[data-dashboard='v3'] .past-frame {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s;
}
body[data-dashboard='v3'] .past-frame:hover { border-color: var(--ink); }

body[data-dashboard='v3'] .past-frame .past-collapsed {
  /* Override standalone-card styling — the frame owns the border now. */
  border: 0;
  border-radius: 0;
  grid-template-columns: auto 1fr auto;
  background: transparent;
}
body[data-dashboard='v3'] .past-frame .past-collapsed:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: transparent;
}
body[data-dashboard='v3'].theme-dark .past-frame .past-collapsed:hover {
  background: rgba(255, 255, 255, 0.03);
}
body[data-dashboard='v3'].theme-light .past-frame .past-collapsed:hover {
  background: rgba(0, 0, 0, 0.025);
}

body[data-dashboard='v3'] .past-frame .past-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--gray);
  transition: transform 0.25s ease, color 0.15s;
  margin-left: 8px;
}
body[data-dashboard='v3'] .past-frame .past-chev::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
body[data-dashboard='v3'] .past-frame.is-expanded .past-chev {
  transform: rotate(90deg);
  color: var(--gold);
}

body[data-dashboard='v3'] .past-frame #pastList {
  display: none;
  border-top: 1px solid var(--hairline-soft);
}
body[data-dashboard='v3'] .past-frame.is-expanded #pastList {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   v2.61 — Throughput section V3
   Top headline (big number + equation rows) above two-column controls.
   All colors use existing tokens so light theme works automatically.
   ───────────────────────────────────────────────────────────────────────── */

/* Headline — repurposes existing .alpha-big / .alpha-big-unit / .alpha-eq
   tokens. Adds the new equation-row layout. */
.alpha-throughput .alpha-headline {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline-soft);
}
.alpha-headline-left { display: flex; flex-direction: column; min-width: 140px; }
.alpha-headline-eq {
  margin-left: auto;
  display: flex; flex-direction: column;
  gap: 10px;
  min-width: 280px;
}
.alpha-eq-row {
  display: grid;
  grid-template-columns: 90px auto 1fr;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline-soft);
}
.alpha-eq-row:last-child { border-bottom: 0; padding-bottom: 0; }
.alpha-eq-k {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}
.alpha-eq-v {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.alpha-eq-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gray);
  letter-spacing: 0.04em;
  text-align: right;
}

/* Two-column controls */
.alpha-controls.alpha-controls--two-col {
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 0;
}
.alpha-controls.alpha-controls--two-col > div + div {
  border-left: 1px solid var(--hairline-soft);
  padding-left: 36px;
}

/* ─────────────────────────────────────────────────────────────────────────
   v2.62: Section 4 (Throughput) — hero-pill card. Reuses the existing
   .alpha-throughput inner structure but wraps it in the card token system
   (white bg, soft shadow, 14px radius) matching the sheet hero pattern.
   ───────────────────────────────────────────────────────────────────────── */
.alpha-throughput {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 0;  /* internal sections handle their own padding */
  margin-bottom: 14px;
  margin-top: 12px;
}
.alpha-throughput .alpha-headline {
  padding: 22px 26px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.alpha-throughput .alpha-controls {
  padding: 22px 26px;
  margin-top: 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.alpha-throughput .alpha-controls.alpha-controls--two-col > div + div {
  padding-left: 26px;  /* match horizontal rhythm of outer card padding */
}
.alpha-throughput .alpha-advanced {
  padding: 0 26px;
}
.alpha-throughput .alpha-advanced > summary {
  padding: 14px 0;
}
.alpha-throughput .alpha-advanced[open] > summary {
  border-bottom: 1px solid var(--hairline-soft);
  margin-bottom: 0;
}
.alpha-throughput .alpha-advanced-body {
  padding: 18px 0 22px;
}

/* Unlock pill (shown when concurrency is locked at <2 accounts) */
.unlock-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 3px 9px;
  border: 1px solid var(--gold);
  background: transparent;
  border-radius: 9999px;
  margin-left: 10px;
  vertical-align: middle;
  /* v2.59.8 — removed opacity:0.7. On the light canvas the already-pale gold at
     70% opacity was barely legible ("UNLOCKS AT 2+ ACCOUNTS"). */
}
/* v2.59.8 — light mode: pale gold on white is low-contrast; darken text/border
   and add a gold-tint fill so the pill is clearly readable. */
body.theme-light .unlock-pill {
  color: #6e520f;
  border-color: #b9892b;
  background: var(--gold-tint-bg);
}
.alpha-concurrency.is-unlocked .unlock-pill { display: none; }

/* Locked state — dim everything in the row but keep it visible */
.alpha-concurrency:not(.is-unlocked) .alpha-knob-row > *:not(.alpha-toggle):not(.unlock-pill),
.alpha-concurrency:not(.is-unlocked) .alpha-knob-help {
  opacity: 0.35;
  pointer-events: none;
}
.alpha-concurrency:not(.is-unlocked) .alpha-toggle { opacity: 0.35; pointer-events: none; }

/* Toggle switch — replaces the old <label><input><span> inline checkbox */
.alpha-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 38px; height: 22px;
  margin-left: auto;
  cursor: pointer;
  flex-shrink: 0;
}
.alpha-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.alpha-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  transition: background 0.15s, border-color 0.15s;
}
.alpha-toggle-track::after {
  content: "";
  position: absolute;
  left: 2px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background: var(--gray);
  border-radius: 50%;
  transition: left 0.15s, background 0.15s;
}
.alpha-toggle input:checked + .alpha-toggle-track {
  background: rgba(247, 190, 104, 0.18);
  border-color: var(--gold);
}
.alpha-toggle input:checked + .alpha-toggle-track::after {
  left: 18px;
  background: var(--gold);
}
body.theme-light .alpha-toggle-track { background: rgba(0, 0, 0, 0.03); }
body.theme-light .alpha-toggle input:checked + .alpha-toggle-track {
  background: rgba(247, 190, 104, 0.22);
}

/* Advanced disclosure — full-width row, prominent label, big rotating chevron */
.alpha-throughput details.alpha-advanced {
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
}
.alpha-throughput details.alpha-advanced > summary {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  user-select: none;
  transition: color 0.15s;
  outline: none;
}
.alpha-throughput details.alpha-advanced > summary:focus-visible {
  outline: 1px dashed var(--gold);
  outline-offset: 4px;
}
.alpha-throughput details.alpha-advanced > summary:hover { color: var(--gold); }
.alpha-throughput details.alpha-advanced > summary::-webkit-details-marker { display: none; }
.alpha-throughput details.alpha-advanced > summary::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  margin-top: -4px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.alpha-throughput details.alpha-advanced[open] > summary::before {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.alpha-throughput details.alpha-advanced > summary::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline-soft);
  margin-left: 8px;
}
.alpha-throughput details.alpha-advanced > .alpha-advanced-body {
  margin-top: 4px;
  padding: 20px 0 8px;
  border-top: 1px solid var(--hairline-soft);
}

@media (max-width: 900px) {
  .alpha-controls.alpha-controls--two-col { grid-template-columns: 1fr; gap: 24px; }
  .alpha-controls.alpha-controls--two-col > div + div {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--hairline-soft); padding-top: 24px;
  }
  .alpha-throughput .alpha-headline { flex-direction: column; gap: 18px; }
  .alpha-headline-eq { margin-left: 0; min-width: 0; width: 100%; }
}

/* ── Sales Nav Scrape (2026-06) — command-deck panels for section 2b.
   Bordered hairline panels give the clear part-to-part contrast the rest of
   the app has; display-font block heads; monochrome (gold stays on Start CTA). */
.scrape-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 22px 24px;
  margin-top: 16px;
}

/* Stat header (Variant B) — live counts in elevated cards; Jobs highlighted
   like the Browse Accounts "ALL 399" panel. Accounts mirrors section 3. */
.scrape-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 4px;
}
.scrape-stat {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  padding: 16px 20px;
}
.scrape-stat.hi { border-color: var(--gold); background: var(--gold-tint-bg); }
.scrape-stat .k {
  font-family: var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gray);
}
.scrape-stat .v {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1;
  margin: 6px 0 3px;
  color: var(--ink);
}
.scrape-stat.hi .v { color: #c9962f; }
.scrape-stat .s {
  font-family: var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--gray);
}
.scrape-panel-head {
  font-family: var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--hairline-soft);
}
/* Field labels match .alpha-knob-label (:4500) — the Throughput card's
   treatment, which is the agreed ceiling for label type. The previous 12px
   gray inherited the global label rule's 0.22em tracking, which read as
   spaced-out and weak. The `· qualifier` half is .scrape-sublabel, mirroring
   .alpha-knob-sublabel (:4512). */
.scrape-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.scrape-sublabel { color: var(--gray); font-weight: 400; letter-spacing: 0.14em; opacity: 0.85; }
.scrape-hint { font-size: 12px; color: var(--gray); line-height: 1.5; }
/* The two-choice control is the kit's existing one — .theme-toggle button
   (:306), the DARK/LIGHT switch: separate hairline pills, dimmed until active,
   ink border when on. Replaces a black-filled capsule that belonged to no other
   surface in the app. `is-active` is kept as the state class because
   setScrapeInputMode() (app.js:3423) toggles it by id. */
.scrape-seg {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 6px;
  margin-bottom: 18px;
}
.scrape-seg-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  cursor: pointer;
  padding: 8px 20px;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 0.15s;
}
.scrape-seg-btn:hover { opacity: 1; }
.scrape-seg-btn.is-active { opacity: 1; border-color: var(--ink); }


/* ── v2.106.0 — Mandatory operator-identity gate ─────────────────────── */
.oe-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
}
.oe-input::placeholder { color: var(--gray); }
.oe-input:focus { outline: none; border-color: var(--gold); }

/* Sidebar "Operating as" chip — gold ring until an email is set. */
.operator-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin-bottom: 10px;
  padding: 8px 12px;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  cursor: pointer;
}
.operator-chip:hover { border-color: var(--gold); }
.operator-chip-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}
.operator-chip strong {
  font-size: 12px;
  color: var(--ink);
  word-break: break-all;
}
.operator-chip--unset {
  border-color: var(--gold);
  background: var(--gold-tint-bg);
}
.operator-chip--unset strong { color: var(--gold); }

/* v2.112: resume review panel */
.resume-review-head { font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--hairline, #2a2a2a); }
.resume-review-body { padding: 10px 0; }
.rr-group { margin-bottom: 12px; }
.rr-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--gray, #8a8a8a); margin-bottom: 4px; }
.rr-line { font-size: 13px; line-height: 1.6; }
.rr-warn { color: var(--gold, #F7BE68); }
.rr-sub { font-size: 11.5px; color: var(--gray, #8a8a8a); }
.resume-review-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* v2.112: paused account editor */
.acct-edit-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--hairline, #2a2a2a); font-size: 13px; }
.acct-edit-add { margin-top: 10px; }
.acct-swap-wrap { display: inline-flex; align-items: center; gap: 6px; }

/* v2.112: #5 account-selection guardrails (warn + override). Visual contract:
   public/sketches/guardrails-final.html. Amber #d97706 = caution (selectable). */
.profile-item.is-flagged { position: relative; padding-top: 28px; border-color: rgba(217,119,6,0.55); overflow: hidden; }
.profile-item.is-flagged::before { content: attr(data-warn); position: absolute; top: 0; left: 0; right: 0; background: #d97706; color: #fff; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; }
.passover-banner strong.passover-closed { color: #d97706; }
.guardrail-alert { display: flex; align-items: flex-start; gap: 11px; background: #fdf2e2; border: 1px solid #d97706; border-left-width: 4px; border-radius: 8px; padding: 12px 14px; margin: 12px 0; }
.guardrail-alert.hidden { display: none; }
.guardrail-alert .big { font-size: 1.25rem; line-height: 1; }
.guardrail-alert .txt { font-size: 0.85rem; color: #7c2d12; line-height: 1.5; }
.guardrail-alert .txt b { color: #9a3412; }
.guardrail-confirm { max-width: 560px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 20px 22px; }
.guardrail-confirm h3 { margin: 0 0 6px; }
.gc-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin-top: 14px; }
.gc-line { font-size: 0.85rem; line-height: 1.7; color: var(--ink); }
.gc-line .muted { color: var(--gray); }
.gc-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.btn.is-benched { opacity: 0.55; }

/* Primary detection — shared loud states (#7/#8) */
.prim { font-family: var(--mono); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.prim .dot { width: 7px; height: 7px; border-radius: 9999px; flex: none; }
.prim.connected { color: var(--green); } .prim.connected .dot { background: var(--green); }
.prim.pending   { color: #d97706; }      .prim.pending .dot   { background: #d97706; }
.prim.checking  { color: var(--blue); }  .prim.checking .dot  { background: var(--blue); animation: prim-pulse 1.1s ease-in-out infinite; }
.prim.unverified{ color: var(--gray); }  .prim.unverified .dot{ background: var(--gray); }
@keyframes prim-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.remember { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--hairline); border-radius: 9999px; padding: 1px 7px; }

/* Variant 3 — dedicated primary panel */
#primary-panel { border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.v3-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.v3-ava { width: 34px; height: 34px; border-radius: 9999px; flex: none; background: var(--gold-tint-bg); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 0.9rem; color: var(--ink); }
.v3-head .who { font-family: var(--mono); font-size: 0.78rem; color: var(--ink); }
.v3-head .who .lbl { color: var(--gray); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.52rem; display: block; margin-bottom: 2px; }
.v3-head .mode { margin-left: auto; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--hairline); border-radius: 9999px; padding: 4px 10px; }
.v3-item { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline-soft); font-family: var(--mono); }
.v3-item:last-child { border-bottom: none; }
.v3-item .led { width: 9px; height: 9px; border-radius: 9999px; }
.v3-item.s-connected .led { background: var(--green); } .v3-item.s-pending .led { background: #d97706; }
.v3-item.s-checking .led { background: var(--blue); animation: prim-pulse 1.1s ease-in-out infinite; } .v3-item.s-unverified .led { background: var(--gray); }
.v3-item .nm { font-size: 0.72rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-item .meta { font-size: 0.55rem; color: var(--gray); letter-spacing: 0.04em; margin-top: 2px; }
.v3-item .st { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; text-align: right; }
.v3-item.s-connected .st { color: var(--green); } .v3-item.s-pending .st { color: #d97706; }
.v3-item.s-checking .st { color: var(--blue); } .v3-item.s-unverified .st { color: var(--gray); }

/* Picker primary row (#8) — store-sourced, shown only in primary modes */
.pick-primary { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.pick-primary .dot { width: 7px; height: 7px; border-radius: 9999px; flex: none; }
.pick-primary.s-connected { color: var(--green); } .pick-primary.s-connected .dot { background: var(--green); }
.pick-primary.s-pending { color: #d97706; } .pick-primary.s-pending .dot { background: #d97706; }
.pick-primary.s-none { color: var(--gray); } .pick-primary.s-none .dot { background: var(--gray); opacity: 0.5; }

/* ── 429-aware pacing — B1 delay-danger disclaimer + B2 throttle toggle ── */
.delay-danger {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(248, 81, 73, 0.10);
  border: 2px solid var(--red);
  border-radius: 10px;
  display: none;
}
.delay-danger.show { display: block; }
.delay-danger .dd-top {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--red);
  margin-bottom: 6px;
}
.delay-danger .dd-top .x {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  border: 2px solid var(--red);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-family: var(--mono);
  flex: 0 0 auto;
}
.delay-danger .dd-body {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.55;
}
.delay-danger .dd-body b { color: var(--red); }

.throttle-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-soft);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.throttle-row .tr-text { flex: 1; }
.throttle-row .tr-label {
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 600;
}
.throttle-row .tr-help {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--gray);
  margin-top: 4px;
  line-height: 1.5;
}
.throttle-row .tr-help b { color: var(--ink); }

/* ── Follower Growth campaign (follower_growth) ─────────────────────────── */
.fg-lede { color: var(--gray); font-size: 13px; line-height: 1.6; margin: 0 0 20px; max-width: 720px; }
.fg-step { border-top: 1px solid var(--hairline); padding: 18px 0; }
.fg-step:first-of-type { border-top: none; padding-top: 0; }
.fg-step-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.fg-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--hairline); border-radius: 9999px; font-size: 11px; color: var(--gray); }
.fg-count { font-weight: 400; color: var(--gray); font-size: 12px; }
.fg-build-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.fg-field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.fg-field-grow { flex: 1 1 320px; }
.fg-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); }
.fg-select { height: 38px; padding: 0 10px; background: var(--bg-soft); color: var(--ink); border: 1px solid var(--hairline); border-radius: 0; font-size: 13px; }
.fg-budget { font-size: 12px; color: var(--gray); margin: 4px 0 14px; min-height: 18px; }
.fg-budget-num { color: var(--ink); font-weight: 700; font-size: 15px; margin: 0 4px; }
.fg-budget-label { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.fg-budget-sub { margin-left: 4px; }
.fg-actions { display: flex; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.btn-ghost { background: none; color: var(--ink); border: 1px solid var(--hairline); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost[hidden] { display: none !important; }
.fg-results-wrap { border: 1px solid var(--hairline); max-height: 360px; overflow: auto; }
.fg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fg-table th { position: sticky; top: 0; background: var(--bg-soft); text-align: left; padding: 8px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); border-bottom: 1px solid var(--hairline); }
.fg-table td { padding: 7px 10px; border-bottom: 1px solid var(--hairline-soft); color: var(--ink); }
.fg-table tr:last-child td { border-bottom: none; }
.fg-db-tabs { display: inline-flex; gap: 4px; margin-left: auto; }
.fg-db-tab { background: none; border: 1px solid var(--hairline); color: var(--gray); font-size: 11px; padding: 4px 10px; border-radius: 9999px; cursor: pointer; }
.fg-db-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fg-refresh { background: none; border: none; color: var(--gray); font-size: 15px; cursor: pointer; margin-left: 8px; }
.fg-refresh:hover { color: var(--ink); }
.fg-send-block { border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; margin: 14px 0 10px; }
.fg-send-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
/* Single-select GoLogin account chooser for FG sends (monochrome tiles + a
   credit pill coloured by this month's FG Budgets standing). */
.fg-acct-search { height: 36px; padding: 0 10px; margin: 6px 0; background: var(--bg-soft); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 0; font-size: 13px; font-family: var(--mono); width: 100%; max-width: 420px; display: block; }
/* Scrollable CC-style account grid so 400+ accounts aren't overwhelming. */
.fg-acct-browse { max-height: 320px; overflow-y: auto; margin: 4px 0; }
.fg-acct-card { cursor: pointer; }
/* Neutral status band for the Local Browser option (reuses the CC two-zone tile). */
.browse-card .profile-item.jt .jt-stat.s-local { background: var(--bg-soft); }
.browse-card .profile-item.jt .s-local .jt-dot { background: var(--gray); }
.browse-card .profile-item.jt .s-local .jt-word { color: var(--gray); }
.fg-acct-green { color: var(--green); }
.fg-acct-amber { color: var(--gold); }
.fg-acct-red { color: var(--red); }
.fg-send-status { font-size: 12px; color: var(--ink); margin: 8px 0; padding: 8px 10px; border: 1px solid var(--hairline-soft); border-radius: 8px; background: var(--bg-soft); }
.fg-send-phase { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--gray); margin-right: 10px; }
.fg-send-counts { color: var(--ink); }
.fg-send-note { margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--gold); }
.fg-manual { margin-top: 12px; }

/* ── Pre-flight linter overlay (spec 2026-07-07) ── */
#pf-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  align-items: flex-start; justify-content: center; z-index: 80; overflow-y: auto; padding: 48px 24px 64px; }
.pf-panel { box-sizing: border-box; width: 100%; max-width: 760px; background: var(--bg, #fff);
  border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22); padding: 36px 44px 30px; }
.pf-eyebrow { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 10px; }
.pf-title { font-family: var(--display); font-size: 2rem; letter-spacing: 0.03em; line-height: 1;
  color: var(--ink); margin: 0 0 10px; }
.pf-sub { font-family: var(--mono); font-size: 0.72rem; color: var(--gray); line-height: 1.6; margin-bottom: 8px; }
.pf-sub b { color: var(--ink); font-weight: 500; }
.pf-tally { display: flex; gap: 10px; margin: 18px 0 26px; flex-wrap: wrap; }
.pf-tally > span { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em;
  border: 1px solid var(--hairline); border-radius: 9999px; padding: 6px 14px; color: var(--gray); }
.pf-tally .t-block { color: var(--red); border-color: var(--red); }
.pf-tally .t-warn { color: var(--gold); border-color: var(--gold); }
.pf-tally .t-pass { color: var(--green); border-color: var(--green); }
.pf-group { border-top: 1px solid var(--hairline); padding: 20px 0 14px; }
.pf-group-head { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono);
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; padding-top: 4px; }
.pf-group-head .n { color: var(--gray); letter-spacing: 0.04em; }
.pf-blockers .pf-group-head { color: var(--red); }
.pf-warnings .pf-group-head { color: var(--gold); }
.pf-passed .pf-group-head { color: var(--green); cursor: pointer; user-select: none; }
.pf-passed .caret { display: inline-block; transition: transform 0.15s; }
.pf-passed.collapsed .caret { transform: rotate(-90deg); }
.pf-passed.collapsed .pf-rows { display: none; }
.pf-row { display: grid; grid-template-columns: 56px 160px 1fr; gap: 14px; align-items: baseline;
  padding: 14px 4px; border-bottom: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 0.85rem; }
.pf-rows .pf-row:last-child { border-bottom: none; }
.pf-row .rowno { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--gray); white-space: nowrap; }
.pf-blockers .pf-row .rowno { color: var(--red); }
.pf-warnings .pf-row .rowno { color: var(--gold); }
.pf-row .lead { font-size: 0.88rem; color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row .reason { font-size: 0.85rem; color: var(--gray); line-height: 1.5; }
.pf-passed .pf-row { grid-template-columns: 24px 1fr; }
.pf-passed .pf-row .rowno { color: var(--green); }
/* Sheet-level findings (rowIndex null) — "Sheet" label spans the row#+lead columns */
.pf-row.pf-sheet-level { grid-template-columns: 230px 1fr; }
.pf-row.pf-sheet-level .lead { display: none; }
.pf-actions { display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 22px; }
/* Every action sizes to its content and never shrinks into a neighbour; the
   long "Keep flagged…" button is allowed to take its own full row. */
.pf-actions > .btn { flex: 0 0 auto; white-space: nowrap; }
.pf-actions #pf-anyway { flex: 1 1 100%; }   /* long label → own row, full width */
.pf-actions .spacer { display: none; }        /* spacer no longer needed */
.pf-count-note { flex: 1 1 100%; }
.pf-count-note { font-family: var(--mono); font-size: 0.72rem; color: var(--gray); line-height: 1.6;
  width: 100%; margin-top: 12px; }
.pf-count-note b { color: var(--ink); font-weight: 500; }

/* ── Blocklist management panel (spec 2026-07-07) ── */
#bl-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  align-items: flex-start; justify-content: center; z-index: 82; overflow-y: auto; padding: 48px 24px 64px; }
.bl-panel { box-sizing: border-box; width: 100%; max-width: 700px; background: var(--bg, #fff);
  border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22); padding: 36px 44px 30px; }
.bl-eyebrow { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }
.bl-title { font-family: var(--display); font-size: 1.7rem; letter-spacing: 0.03em; color: var(--ink); margin: 0 0 8px; line-height: 1; }
.bl-sub { font-family: var(--mono); font-size: 0.66rem; color: var(--gray); line-height: 1.6; margin: 0 0 20px; }
.bl-sub b { color: var(--ink); font-weight: 500; }
.bl-row { display: grid; grid-template-columns: 190px 1fr 150px 70px; gap: 14px; align-items: baseline;
  padding: 14px 4px; border-bottom: 1px solid var(--hairline-soft); font-family: var(--mono); font-size: 0.85rem; }
.bl-entry { font-size: 0.88rem; font-weight: 600; color: var(--ink); word-break: break-all; }
.bl-kind { display: inline-block; font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); border: 1px solid var(--hairline); border-radius: 9999px; padding: 2px 7px;
  margin-right: 8px; vertical-align: middle; font-weight: 500; }
.bl-kind[data-kind="person"] { color: var(--ink); border-color: var(--ink); }
.wiz-bl-chip[data-kind="person"] { border-color: var(--ink); }
.bl-reason-cell { font-size: 0.85rem; color: var(--gray); }
.bl-meta { font-size: 0.72rem; color: var(--gray); }
.bl-remove { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray); background: transparent; border: 1px solid var(--hairline); border-radius: 9999px; padding: 4px 10px; cursor: pointer; }
.bl-remove:hover { color: var(--red); border-color: var(--red); }
.bl-add { display: grid; grid-template-columns: 190px 1fr auto; gap: 12px; margin-top: 18px; }
.bl-add input { box-sizing: border-box; width: 100%; background: transparent; border: 1px solid var(--hairline);
  color: var(--ink); font-family: var(--mono); font-size: 0.72rem; padding: 9px 12px; border-radius: 0; }
.bl-add input:focus { outline: none; border-color: var(--ink); }
.bl-note { font-family: var(--mono); font-size: 0.6rem; color: var(--gray); margin-top: 14px; line-height: 1.6; }
.bl-note b { color: var(--ink); font-weight: 500; }

/* ── Inline wizard blocklist (Section 2, under the sheet URL) ── */
.wiz-blocklist { margin-top: 18px; border-top: 1px solid var(--hairline-soft);
  /* match .sheet-hero-top's inner padding so the block aligns with the URL field above */
  padding: 16px 24px 20px; }
.wiz-blocklist-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 10px; }
.wiz-blocklist-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wiz-bl-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 0.85rem; color: var(--ink); border: 1px solid var(--hairline); border-radius: 9999px;
  padding: 4px 6px 4px 12px; }
.wiz-bl-x { font-family: var(--mono); font-size: 0.85rem; line-height: 1; color: var(--gray);
  background: transparent; border: none; cursor: pointer; padding: 2px 6px; border-radius: 9999px; }
.wiz-bl-x:hover { color: var(--red); }
.wiz-bl-empty { font-family: var(--mono); font-size: 0.85rem; color: var(--gray); }
.wiz-blocklist-add { display: flex; gap: 10px; align-items: center; max-width: 460px; }
.wiz-blocklist-add input { box-sizing: border-box; flex: 1; background: transparent;
  border: 1px solid var(--hairline); color: var(--ink); font-family: var(--mono);
  font-size: 0.85rem; padding: 8px 12px; border-radius: 0; }
.wiz-blocklist-add input:focus { outline: none; border-color: var(--ink); }
.wiz-blocklist-hint { font-family: var(--mono); font-size: 0.72rem; color: var(--gray);
  margin-top: 10px; line-height: 1.6; }

/* ── Campaign debrief overlay (campaign-debrief-A sketch) ── */
.sn-foot .mini.debrief { border-style: dashed; }
.sn-foot .mini.debrief:hover { border-color: var(--ink); border-style: solid; }
#db-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  align-items: flex-start; justify-content: center; z-index: 80; overflow-y: auto; padding: 44px 24px 72px; }
.db-panel { box-sizing: border-box; width: 100%; max-width: 780px; background: var(--bg, #fff);
  border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22); padding: 38px 46px 32px; }
.db-eyebrow { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 10px; }
.db-title { font-family: var(--display); font-size: 2.1rem; letter-spacing: 0.03em; line-height: 1;
  color: var(--ink); margin: 0 0 10px; }
.db-sub { font-family: var(--mono); font-size: 0.72rem; color: var(--gray); line-height: 1.7; margin-bottom: 26px; }
.db-sub b { color: var(--ink); font-weight: 500; }
.db-sec-head { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); margin: 0 0 14px; }
.db-sec { border-top: 1px solid var(--hairline); padding: 24px 0; }
/* totals — monochrome graded-fill idiom from the sketch's funnel */
.db-funnel { display: flex; align-items: stretch; gap: 0; }
.db-funnel .funnel-stage { flex: 1 1 0; min-width: 0; border: 1px solid var(--hairline); border-left: none; padding: 14px 16px; position: relative; }
.db-funnel .funnel-stage:first-child { border-left: 1px solid var(--hairline); }
.db-funnel .st-lbl { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.db-funnel .st-num { font-family: var(--display); font-size: 2rem; letter-spacing: 0.02em; color: var(--ink); line-height: 1.1; }
.db-funnel .st-drop { font-family: var(--mono); font-size: 0.58rem; color: var(--gray); margin-top: 3px; }
.db-funnel .st-drop b { color: var(--ink); font-weight: 500; }
.db-funnel .funnel-stage:nth-child(1) { background: rgba(0,0,0,0.05); }
.db-funnel .funnel-stage:nth-child(2) { background: rgba(0,0,0,0.035); }
.db-funnel .funnel-stage:nth-child(3) { background: rgba(0,0,0,0.02); }
.db-funnel .funnel-stage:nth-child(4) { background: transparent; }
/* parked-accounts table */
.db-table { width: 100%; border-collapse: collapse; font-family: var(--mono); }
.db-table th { text-align: left; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray); font-weight: 500; padding: 0 10px 10px 0; border-bottom: 1px solid var(--hairline); }
.db-table td { font-size: 0.74rem; color: var(--ink); padding: 12px 10px 12px 0;
  border-bottom: 1px solid var(--hairline-soft); }
.db-table td.num { font-weight: 500; }
.db-table td.dim { color: var(--gray); }
.db-table tr:last-child td { border-bottom: none; }
.db-park { font-size: 0.64rem; color: var(--gray); border: 1px dashed var(--hairline); border-radius: 9999px; padding: 3px 10px; white-space: nowrap; }
.db-park.gold { color: var(--gold); border-color: var(--gold); }
/* per-account table (Sent + end reason only — no invented accept/reply data) */
.db-table td.db-acc { color: var(--ink); }
.db-table td.db-num { font-weight: 500; text-align: right; width: 60px; }
.db-table td.db-reason { color: var(--gray); }
/* vs-your-last-N comparison — factual sent-count delta, monochrome (no green/red) */
.db-compare { font-family: var(--mono); font-size: 0.72rem; color: var(--ink); line-height: 1.7; }
.db-compare b { font-weight: 500; }
.db-delta { color: var(--gray); margin-left: 4px; }
/* skipped line + expandable rows */
.db-skipped { font-family: var(--mono); font-size: 0.72rem; color: var(--ink); line-height: 1.7; }
.db-skipped b { font-weight: 500; }
.db-skipped .why { color: var(--gray); }
.db-skipped a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; cursor: pointer; }
.db-skip-rows { display: none; margin-top: 14px; }
.db-skip-rows.open { display: block; }
/* template (collapsed, expandable) */
.db-tpl { border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 18px; cursor: pointer; }
.db-tpl .tpl-first { font-family: var(--mono); font-size: 0.72rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-tpl .tpl-more { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-top: 6px; }
.db-tpl .tpl-full { display: none; font-family: var(--mono); font-size: 0.72rem; color: var(--ink); line-height: 1.8; margin-top: 10px;
  border-top: 1px solid var(--hairline-soft); padding-top: 12px; white-space: pre-line; }
.db-tpl.open .tpl-first { white-space: normal; }
.db-tpl.open .tpl-full { display: block; }
/* errors list */
.db-errs { font-family: var(--mono); font-size: 0.72rem; color: var(--ink); line-height: 1.8; }
.db-errs .e-msg { color: var(--red); }
.db-empty { font-family: var(--mono); font-size: 0.72rem; color: var(--gray); }
.db-actions { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--hairline);
  margin-top: 4px; padding-top: 24px; }
.db-actions .spacer { flex: 1; }
.db-foot-note { font-family: var(--mono); font-size: 0.62rem; color: var(--gray); line-height: 1.6; margin-top: 14px; }

/* ── Team status (feature ⑩ — ADMIN-ONLY dashboard section, sketch team-status-A) ── */
#team-status-section { margin-top: 34px; }
.team-head { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 6px; }
.team-title { font-family: var(--display); font-size: 2rem; letter-spacing: 0.03em; color: var(--ink); line-height: 1; margin: 0; }
.team-admin-badge { border: 1px solid currentColor; border-radius: 9999px; padding: 2px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
.team-sub { font-family: var(--mono); font-size: 0.66rem; color: var(--gray); }
.team-refresh { margin-left: auto; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray); border: 1px solid var(--hairline); border-radius: 9999px; padding: 6px 14px; background: transparent; cursor: pointer; }
.team-refresh:hover { color: var(--ink); border-color: var(--ink); }
.team-card { border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg); padding: 22px 26px; margin-top: 18px; }
.team-table { width: 100%; border-collapse: collapse; font-family: var(--mono); }
.team-table th { text-align: left; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray); font-weight: 500; padding: 0 12px 12px 0; border-bottom: 1px solid var(--hairline); }
.team-table td { font-size: 0.74rem; color: var(--ink); padding: 15px 12px 15px 0; vertical-align: top;
  border-bottom: 1px solid var(--hairline-soft); }
.team-table tr:last-child td { border-bottom: none; }
.team-table tr.is-you td { background: rgba(127, 127, 127, 0.06); }
.team-table .op-name { font-weight: 500; white-space: nowrap; }
.team-table .op-you { font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  padding: 2px 8px; border-radius: 9999px; background: var(--ink); color: var(--bg); margin-left: 8px; }
.team-table .st-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hairline); border-radius: 9999px; padding: 5px 12px; white-space: nowrap; }
.team-table .st-pill .d { width: 7px; height: 7px; border-radius: 9999px; display: inline-block; }
.team-table .st-pill.run { color: var(--green); border-color: var(--green); }
.team-table .st-pill.run .d { background: var(--green); }
.team-table .st-pill.mon { color: var(--blue); border-color: var(--blue); }
.team-table .st-pill.mon .d { background: var(--blue); }
.team-table .st-pill.idle { color: var(--gray); }
.team-table .st-pill.idle .d { background: var(--gray); }
.team-table .sends { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.02em; line-height: 1; }
/* Today's-sends is the headline number; the cumulative Total is secondary — smaller + muted. */
.team-table .sends.total { font-size: 1.05rem; color: var(--gray); }
.team-table .camp-name { font-weight: 500; }
.team-table .camp-mode { color: var(--gray); font-size: 0.64rem; margin-top: 3px; }
.team-table .dim { color: var(--gray); }
.team-table .acct-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 220px; }
.team-table .acct-chip { font-size: 0.62rem; color: var(--ink); border: 1px solid var(--hairline); border-radius: 9999px;
  padding: 3px 10px; white-space: nowrap; }
.team-table .acct-chip.warn { color: var(--gold); border-color: var(--gold); }
.team-table .acct-more { font-size: 0.62rem; color: var(--gray); background: transparent; border: 1px dashed var(--hairline);
  border-radius: 9999px; padding: 3px 10px; white-space: nowrap; cursor: pointer; transition: color .12s, border-color .12s; }
.team-table .acct-more:hover { color: var(--ink); border-color: var(--ink); }
.team-table .time2 { white-space: nowrap; }
.team-table .time2 .local { display: block; font-size: 0.6rem; color: var(--gray); margin-top: 3px; }
.team-foot { font-family: var(--mono); font-size: 0.62rem; color: var(--gray); line-height: 1.7; margin-top: 18px; }

/* ── Account conflicts strip (sketch team-status-A, ported 1:1) ── */
.conf-strip { margin-top: 20px; border-radius: 12px; padding: 15px 20px; font-family: var(--mono); font-size: 0.72rem; line-height: 1.7; }
.conf-strip.ok { border: 1px solid var(--green); color: var(--green); }
.conf-strip.warn { border: 1px solid var(--gold); color: var(--ink); background: rgba(201,168,74,0.07); }
.conf-strip.warn b { color: var(--gold); }
.conf-strip .conf-head { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.conf-strip .conf-act { margin-left: 12px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--hairline); border-radius: 9999px; padding: 4px 12px; background: transparent; cursor: pointer; }
.conf-strip .conf-act:hover { border-color: var(--ink); }

/* ── Handshake lock ── */
/* Sketch: 2026-07-10-cloud-primary-handshake-lock.html, variant A. Honest
   subset only — no .spin/.doing (no in-progress signal from the engine,
   only accepted:true|false) and no .hs-sub (no accept-all; targeted accepts
   only). Ported for the inline lock panel in renderUnifiedStrip (Task 3.4). */
/* Task 3 — cloud monitoring badge + countdown on the strip (parity with the
   local mon-card). Monochrome: the badge is mono-uppercase, ENDING SOON just
   goes bolder/darker — no red, no new accent (Bugatti command-deck rules). */
.sn-mon{display:flex;align-items:baseline;gap:9px;margin:8px 0 0;font-size:12.5px;color:var(--gray);flex-wrap:wrap;}
.sn-mon-badge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.sn-mon-line b{color:var(--ink);font-weight:600;}
.sn-mon.ending .sn-mon-badge{color:var(--ink);font-weight:700;}
.sn-mon-ctl{display:inline-flex;align-items:center;gap:13px;margin-left:auto;}
/* Why a queued campaign hasn't started (queue-state.mjs). Same .sn-mon row plus
   a second line for the reassurance, so it reads as one block rather than two.
   Monochrome throughout: the three states differ in WORDS, not colour — the one
   an operator must act on (accounts) earns a hairline rule, nothing louder. */
/* Block, not the parent's flex row: the badge and the fact line share a line and
   wrap together, then the note falls beneath them as its own paragraph. */
.sn-queue{display:block;}
.sn-queue .sn-mon-badge{margin-right:9px;}
.sn-queue-note{display:block;margin-top:3px;font-size:11.5px;color:var(--gray);line-height:1.45;}
.sn-queue-accounts{border-left:1px solid var(--hairline);padding-left:11px;margin-left:-1px;}
.sn-queue-accounts .sn-mon-badge{font-weight:700;}
/* Command-deck styling: mono, hairline, ink — no native grey pill, no gold. */
.sn-mon-btn{-webkit-appearance:none;appearance:none;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;background:transparent;border:1px solid var(--hairline);border-radius:9999px;color:var(--ink);cursor:pointer;line-height:1;transition:border-color .12s ease;}
.sn-mon-btn:hover{border-color:var(--ink);}
.sn-mon-btn:disabled{opacity:.45;cursor:default;}
.sn-mon-auto{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);cursor:pointer;white-space:nowrap;user-select:none;}
.sn-mon-auto input{accent-color:var(--ink);width:13px;height:13px;margin:0;cursor:pointer;}
/* Cloud "Open" focus flash — a brief ink ring so the eye lands on the strip. */
.sn-flash{animation:snFlash 1.3s ease;}
@keyframes snFlash{0%,100%{box-shadow:none;}30%{box-shadow:0 0 0 2px var(--ink);}}

.hs-panel{border:1px solid var(--hairline);border-left:3px solid var(--gold);border-radius:12px;padding:15px 17px;margin:14px 0 0;background:var(--hairline-soft);}
.hs-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#8a6d1f;display:flex;align-items:center;gap:8px;margin:0 0 10px;}
.hs-eyebrow .lk{font-size:12px;line-height:1;}
.hs-eyebrow .cnt{margin-left:auto;color:var(--ink);font-weight:600;letter-spacing:.06em;}
.hs-head{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:500;line-height:1.4;}
/* Two-step handshake header. The wizard's single bar could not show that the
   primary's own accept pass is a separate, slower step, so the settle wait and
   the accept both read as a hang (operator, 2026-08-28). */
.phl-accept-all{display:flex;gap:11px;align-items:flex-start;margin:16px 0 0;padding:12px 13px;border:1px solid var(--hairline);border-radius:10px;background:var(--bg-soft);cursor:pointer;}
.phl-accept-all input{margin-top:2px;flex:none;}
.phl-accept-all b{display:block;font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--ink);}
.phl-accept-all em{display:block;font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--gray);line-height:1.55;margin-top:4px;text-transform:none;letter-spacing:0;}
.phl-accept-all:hover{border-color:var(--gold);}
.hs-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0;}
.hs-step{border:1px solid var(--hairline);border-radius:8px;padding:8px 10px;background:var(--card-bg);}  /* --card-bg, never #fff: a hardcoded white tile puts white text on white in dark mode. */
.hs-step .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);}
.hs-step .l{font-family:var(--mono);font-size:11px;color:var(--ink);font-weight:500;line-height:1.35;margin-top:3px;}
.hs-step.on{border-color:var(--gold);background:rgba(197,160,66,.10);}
.hs-step.on .n{color:#8a6d1f;}
.hs-step.on .n::after{content:' · now';}
.hs-step.did{border-color:rgba(47,125,71,.4);background:rgba(47,125,71,.06);}
.hs-step.did .n{color:#2f7d47;}
.hs-step.did .n::after{content:' · done';}
.hs-step.failed{border-color:var(--red);background:rgba(178,59,59,.06);}
.hs-step.failed .n{color:var(--red);}
.hs-step.failed .n::after{content:' · not here';}
.hs-panel.partial{border-left-color:var(--red);}
.hs-panel.partial .hs-eyebrow{color:var(--red);}
@media (max-width:520px){.hs-steps{grid-template-columns:1fr;}}
.hs-bar{height:5px;border-radius:9999px;background:#e7e3d4;margin:11px 0 0;overflow:hidden;}
.hs-bar i{display:block;height:100%;width:40%;background:var(--gold);transition:width .5s;}
.hs-expl{font-size:11.5px;color:var(--gray);line-height:1.6;margin:11px 0 0;}
.hs-expl b{color:var(--ink);font-weight:600;}
.hs-list{margin:12px 0 0;}
.hs-row{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;padding:7px 0;border-top:1px solid rgba(0,0,0,.06);}
.hs-row:first-child{border-top:0;}
.hs-row .ic{width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center;}
.hs-row .ic .dotwait{width:7px;height:7px;border-radius:9999px;background:var(--gray-faint,#c3c3c0);}
.hs-row .ic .chk{color:#2f7d47;font-size:13px;}
.hs-row .who{color:var(--ink);}
.hs-row .st{margin-left:auto;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);}
.hs-row.done .st{color:#2f7d47;}
.hs-keep{font-family:var(--mono);font-size:10.5px;color:#8a6d1f;margin:9px 0 0;display:flex;align-items:center;gap:7px;}

/* ── Operation Magellan (Connection DB → collect tab) ────────────────────────
   Reuses the account picker's .browse-card / .profile-grid / .profile-item.jt
   wholesale. These are only the bits that have no existing equivalent. */
.mg-selbar { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.mg-selbar-n { font-family: var(--display); font-size: 1.7rem; color: var(--ink); line-height: 1; }
.mg-selbar-t { font-family: var(--body); font-size: 0.8rem; color: var(--gray); }

.mg-steps { border: 1px solid var(--hairline); }
/* Failures grouped by cause — what happened, why, what to do about it. */
/* Detail under the account pills — what one selected account did, or why it
   failed. The raw error is the last line and is always present. */
#mg-acct-detail, #mg-blocked { border-top: 1px solid var(--hairline); margin-top: 12px; padding: 12px 0 2px; }
#mg-blocked .mg-det-h { color: var(--red); }
.mg-det-h { font-family: var(--body); font-size: 0.82rem; color: var(--ink); }
.mg-det-why { font-family: var(--body); font-size: 0.75rem; color: var(--gray); margin-top: 3px; line-height: 1.5; }
.mg-det-fix { font-family: var(--body); font-size: 0.75rem; color: var(--ink); margin-top: 5px; line-height: 1.5; }
.mg-det-raw { font-family: var(--mono); font-size: 0.58rem; color: var(--gray-faint, var(--gray)); margin-top: 8px; word-break: break-all; line-height: 1.6; }
#mg-log { max-height: 260px; overflow-y: auto; margin-top: 14px; }
.mg-step { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 15px 17px; border-top: 1px solid var(--hairline); }
.mg-step:first-child { border-top: none; }
.mg-step-h { font-family: var(--body); font-size: 0.85rem; color: var(--ink); }
.mg-step.idle .mg-step-h { color: var(--gray); }
.mg-step-s { font-family: var(--body); font-size: 0.74rem; color: var(--gray); margin-top: 4px; line-height: 1.5; }
.mg-step-r { font-family: var(--mono); font-size: 0.66rem; color: var(--ink); text-align: right; white-space: nowrap; line-height: 1.6; }
.mg-step.idle .mg-step-r { color: var(--gray); }

.mg-ledger { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline); }
.mg-led { padding: 16px 17px; border-left: 1px solid var(--hairline); }
.mg-led:first-child { border-left: none; }
.mg-led-n { font-family: var(--display); font-size: 2.2rem; line-height: 0.9; color: var(--ink); }
.mg-led-t { font-family: var(--body); font-size: 0.8rem; color: var(--ink); margin-top: 6px; }
.mg-led-s { font-family: var(--body); font-size: 0.72rem; color: var(--gray); margin-top: 3px; line-height: 1.45; }

.mg-confirm { border: 1px solid var(--hairline); padding: 18px; margin-top: 18px; }
.mg-confirm-t { font-family: var(--body); font-size: 0.8rem; color: var(--gray); line-height: 1.55; }
.mg-confirm-t b { color: var(--ink); }
.mg-confirm-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }

.mg-foot { font-family: var(--body); font-size: 0.74rem; color: var(--gray); margin-top: 14px; line-height: 1.65; max-width: 820px; }
.mg-foot b { color: var(--ink); }

/* Collection state, not campaign state — Magellan sends nothing. */
.jt-word.w-todo { color: var(--green); }
.jt-word.w-done { color: var(--gray); }
.profile-item.jt.is-done { opacity: 0.62; }

@media (max-width: 780px) {
  .mg-ledger { grid-template-columns: 1fr; }
  .mg-led { border-left: none; border-top: 1px solid var(--hairline); }
  .mg-led:first-child { border-top: none; }
}

/* ── Handover: which side a live campaign runs on ───────────────────────────
   Ported verbatim from public/sketches/2026-08-21-vm-local-handover.html
   (variant C, signed off). Tokens only — hairlines, mono type, radius 9999 on
   the pill. No new colour: gold stays reserved for the Start CTA. */
.wh { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
      border-top: 1px solid var(--hairline); }
.wh-lab { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--gray); }
.wh-seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 9999px; overflow: hidden; }
.wh-seg button { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
                 text-transform: uppercase; padding: 5px 14px; border: 0; background: transparent;
                 color: var(--gray); cursor: pointer; }
.wh-seg button.on { background: var(--ink); color: var(--bg); }
.wh-seg button.busy { color: var(--ink); }
.wh-seg button[disabled] { cursor: default; }
.wh-note { font-family: var(--mono); font-size: .7rem; color: var(--gray); margin-left: auto; }
.wh-warn { font-family: var(--mono); font-size: .7rem; color: var(--ink); margin-left: auto; }

/* Variant C's inline confirm strip — same hairline language. */
.wh-confirm { border-top: 1px solid var(--hairline); padding: 12px 14px;
              font-family: var(--mono); font-size: .74rem; line-height: 1.6; }
.wh-confirm b { font-weight: 600; }
.wh-confirm .row { display: flex; gap: 8px; margin-top: 10px; }
.wh-confirm button { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
                     text-transform: uppercase; padding: 6px 16px; border: 1px solid var(--hairline);
                     border-radius: 9999px; background: transparent; cursor: pointer; }
.wh-confirm button.go { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Runtime safety strip: deliberately large and persistent so a development
   Electron build can never be mistaken for the team production app. */
.engine-version-banner {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr) 1px minmax(190px, .8fr);
  align-items: stretch;
  gap: 20px;
  margin: 0 0 24px;
  padding: 18px 22px;
  border: 2px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 6px 0 0 var(--gray);
}
.engine-version-banner__flag,
.engine-version-banner__current,
.engine-version-banner__live {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.engine-version-banner__flag {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
}
.engine-version-banner__signal {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: currentColor;
}
.engine-version-banner__label {
  margin-bottom: 3px;
  color: var(--gray);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
}
.engine-version-banner strong {
  font-family: var(--display);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 400;
  letter-spacing: .025em;
  line-height: .9;
}
.engine-version-banner__url {
  overflow: hidden;
  margin-top: 6px;
  color: var(--gray);
  font-family: var(--mono);
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.engine-version-banner__divider { background: var(--hairline); }
.engine-version-banner__explanation {
  grid-column: 2 / -1;
  margin: -8px 0 0;
  color: var(--gray);
  font-size: .72rem;
}
.engine-version-banner.is-development {
  border-color: #b98a32;
  box-shadow: inset 6px 0 0 #b98a32;
}
.engine-version-banner.is-development .engine-version-banner__flag { color: #b98a32; }
.engine-version-banner.is-production {
  border-color: #3d8064;
  box-shadow: inset 6px 0 0 #3d8064;
}
.engine-version-banner.is-production .engine-version-banner__flag { color: #3d8064; }
.engine-version-banner.is-error {
  border-color: #a84d4d;
  box-shadow: inset 6px 0 0 #a84d4d;
}
.engine-version-banner.is-error .engine-version-banner__flag { color: #a84d4d; }
@media (max-width: 900px) {
  .engine-version-banner { grid-template-columns: 1fr 1fr; }
  .engine-version-banner__flag,
  .engine-version-banner__explanation { grid-column: 1 / -1; }
  .engine-version-banner__divider { display: none; }
  .engine-version-banner__explanation { margin-top: 0; }
}

/* Primary-handshake operational readout. This is intentionally terminal-like:
   it answers "what is it doing now?" without competing with the modal actions. */
.hs-wiz-now {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 10px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.hs-wiz-now-label,
.hs-wiz-elapsed {
  color: var(--gray);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
}
.hs-wiz-now-text {
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.45;
}
.hs-wiz-log {
  max-height: 132px;
  margin-top: 12px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  background: #151515;
  color: #d7d7d2;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  line-height: 1.6;
}
.hs-wiz-log-line + .hs-wiz-log-line { margin-top: 3px; }
/* Ortus Basics 1.0 — Settings: GoLogin workspace tokens.
   Scoped to #credentials-modal and written at high specificity on purpose: the
   app's global input styling (borderless, underlined, ~1rem) was winning for
   input[type=text], which is why the Name field rendered as a big underlined
   line next to a boxed token field. */
.settings-chip { margin-bottom: 8px; }

#credentials-modal .modal-card.cred-card { max-width: 520px; text-align: left; }
#credentials-modal .stop-choice-sub { margin-bottom: 4px; }

#credentials-modal .cred-row { margin-top: 14px; }
#credentials-modal .cred-label {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray);
}
#credentials-modal input.cred-input {
  width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; margin: 0;
  border: 1px solid var(--hairline) !important; border-radius: 7px !important;
  background: var(--surface, #fff) !important; color: var(--ink) !important;
  font-family: var(--mono) !important; font-size: 12px !important;
  line-height: 34px !important; letter-spacing: 0 !important;
  text-transform: none !important; outline: none; box-shadow: none !important;
}
#credentials-modal input.cred-input::placeholder {
  font-family: var(--mono); font-size: 11px; color: var(--gray);
  letter-spacing: 0; text-transform: none;
}
#credentials-modal input.cred-input:focus { border-color: var(--gold, #d4a24c) !important; }

#credentials-modal .cred-state {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
}
#credentials-modal .cred-state.is-set { color: #3fb950; }
#credentials-modal .cred-state.is-unset { color: var(--gray); }
#credentials-modal .cred-note { margin-top: 5px; font-size: 10.5px; color: var(--gray); }

#credentials-modal .cred-msg { margin-top: 14px; font-size: 12px; }
#credentials-modal .cred-msg.is-ok { color: #3fb950; }
#credentials-modal .cred-msg.is-bad { color: var(--red, #f85149); }

/* ── Other workspaces ─────────────────────────────────────────────────── */
#credentials-modal .cred-other {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline);
}
#credentials-modal .cred-other-head {
  margin: 0 0 4px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
}
#credentials-modal .cred-other-sub {
  margin: 0 0 10px; font-size: 11.5px; line-height: 1.45; color: var(--gray);
}
#credentials-modal .cred-other-empty {
  margin: 0 0 10px; padding: 9px 10px;
  border: 1px dashed var(--hairline); border-radius: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray);
}
#credentials-modal .cred-other-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 7px;
}
#credentials-modal .cred-other-name {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#credentials-modal .cred-other-del {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer; padding: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray);
}
#credentials-modal .cred-other-del:hover { color: var(--red, #f85149); }
#credentials-modal .cred-remove { margin-left: 10px; }
/* Push to engine is a deliberate, non-destructive action — don't hover red. */
#credentials-modal .cred-push { margin-left: 10px; color: var(--fg, #c9d1d9); }
#credentials-modal .cred-push:hover { color: var(--gold, #d4af37); }

/* Name | token | Add on one 34px line — the three used to be different heights. */
#credentials-modal .cred-other-add {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
  gap: 8px; align-items: center; margin-top: 4px;
}
#credentials-modal .cred-other-add button {
  height: 34px; padding: 0 16px; margin: 0; border-radius: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
}
#credentials-modal .stop-choice-cancel-row {
  margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end;
}
#credentials-modal .stop-choice-cancel-row button {
  height: 36px; padding: 0 18px; border-radius: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}

.account-paste { margin: 12px 0 16px; padding: 14px; border: 1px solid var(--hairline, #ccc); border-radius: 10px; }
.account-paste summary { cursor: pointer; font-weight: 600; }
.account-paste label { display: block; margin-top: 14px; }
.account-paste p { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.account-paste textarea { display: block; box-sizing: border-box; width: 100%; margin: 10px 0; padding: 10px; resize: vertical; font: inherit; background: transparent; color: inherit; border: 1px solid var(--hairline, #ccc); border-radius: 6px; }

/* Resume confirmation: give the full action label its own row. */
.resume-confirm-card .modal-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.resume-confirm-card .ac-ok {
  order: -1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 13px;
  letter-spacing: .12em;
  padding: 14px 18px;
}
.resume-confirm-card .ac-cancel {
  align-self: center;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: .12em;
}

/* Keep pre-flight decisions visible while expanded findings scroll. */
#pf-scrim { box-sizing: border-box; padding: 24px; }
#pf-scrim .pf-panel { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.pf-findings { overflow-y: auto; min-height: 80px; flex: 1 1 auto; }
#pf-scrim .pf-actions { flex: 0 0 auto; background: var(--bg, #fff); }
#pf-scrim .pf-actions > .btn { white-space: normal; max-width: 100%; }
#pf-scrim .pf-group { padding: 14px 0; }
#pf-scrim summary.pf-group-head { cursor: pointer; list-style: none; margin: 0; align-items: center; }
#pf-scrim summary.pf-group-head::-webkit-details-marker { display: none; }
.pf-expand-label { margin-left: auto; color: var(--gray); font-size: 11px; white-space: nowrap; }
.pf-expand-label::after { content: 'Expand ▾'; }
.pf-group[open] > summary .pf-expand-label::after { content: 'Collapse ▴'; }
#pf-scrim .pf-rows { margin-top: 12px; }
@media (max-height: 700px), (max-width: 600px) {
  #pf-scrim { padding: 12px; }
  #pf-scrim .pf-panel { max-height: calc(100dvh - 24px); padding: 20px; }
  #pf-scrim .pf-tally { margin: 12px 0; }
  #pf-scrim .pf-actions { gap: 8px; padding-top: 12px; }
  #pf-scrim .pf-count-note { font-size: 11px; margin-top: 4px; }
  #pf-scrim .pf-row { grid-template-columns: 50px 1fr; }
  #pf-scrim .pf-row .reason { grid-column: 1 / -1; }
}


.campaign-identifier { display: block; color: var(--gray); font: 11px var(--mono); overflow-wrap: anywhere; margin-top: 8px; user-select: text; }
.campaign-identifier[hidden] { display: none; }

#credentials-modal .cred-state.is-error, #credentials-modal .cred-error { color: var(--red, #c83030); }
#credentials-modal .cred-other-row { flex-wrap: wrap; }
#credentials-modal .cred-other-row .cred-error { flex-basis: 100%; }

/* Magellan import confirm — highlight the key action phrase ("adds you to their
   connection list"). Neutral fill (not gold — gold stays on the Start CTA). */
.mg-hl { background: var(--hairline); padding: 1px 5px; font-weight: 700; }

/* OP Magellan — "Import from CSV" panel (accounts not in GoLogin). */
.mg-csv { margin-top: 14px; border: 1px solid var(--hairline); background: var(--bg-soft); }
.mg-csv-summary {
  cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600;
  color: var(--ink); list-style: none; user-select: none;
}
.mg-csv-summary::-webkit-details-marker { display: none; }
.mg-csv-summary::before { content: '＋ '; color: var(--gold); font-weight: 700; }
.mg-csv[open] .mg-csv-summary::before { content: '－ '; }
.mg-csv-body { padding: 0 14px 14px; }
.mg-csv-hint { font-size: 12px; line-height: 1.5; opacity: 0.7; margin: 0 0 10px; }
/* "Don't have the extension?" helper — a nested disclosure with the install
   link + step-by-step, set apart from the hint above it. */
.mg-csv-help { margin: 0 0 12px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--card-bg); }
.mg-csv-help-summary { cursor: pointer; list-style: none; padding: 9px 12px; font-size: 12px; font-weight: 600; color: var(--ink); }
.mg-csv-help-summary::-webkit-details-marker { display: none; }
.mg-csv-help-summary::before { content: '＋ '; color: var(--gold); font-weight: 700; }
.mg-csv-help[open] .mg-csv-help-summary::before { content: '－ '; }
.mg-csv-help-body { padding: 2px 14px 12px; }
.mg-csv-help-get { margin: 2px 0 10px; font-size: 12px; }
.mg-csv-help-get a { color: var(--gold); font-weight: 600; text-decoration: none; }
.mg-csv-help-get a:hover { text-decoration: underline; }
.mg-csv-steps { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 12px; line-height: 1.5; opacity: 0.85; }
.mg-csv-steps li { padding-left: 2px; }
.mg-csv-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mg-csv-input {
  flex: 1 1 260px; min-width: 200px; padding: 8px 10px; font-size: 13px;
  color: var(--ink); background: var(--bg); border: 1px solid var(--hairline); border-radius: 0;
}
.mg-csv-input:focus { outline: none; border-color: var(--gold); }
.mg-csv-file { flex: 1 1 200px; font-size: 12px; color: var(--ink); opacity: 0.85; }
.mg-csv-btn { flex: 0 0 auto; }
.mg-csv-btn:disabled { opacity: 0.5; cursor: default; }
.mg-csv-status { font-size: 12px; margin: 10px 0 0; line-height: 1.5; }
.mg-csv-status.is-err { color: var(--red); }
/* Shown in place of "Collect connections" when the selection is CSV-only. */
.mg-csv-skip { font-size: 12px; line-height: 1.5; opacity: 0.75; align-self: center; }

/* ── Cloud engine toggle (Settings → Engine) ──────────────────────────────── */
#engine-chip.is-dev strong { color: var(--gold, #d4a24c); }
.engine-badge-row { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; flex-wrap: wrap; }
.engine-badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 9999px; white-space: nowrap;
}
.engine-badge.is-prod { color: #3fb950; border: 1px solid #3fb950; }
.engine-badge.is-dev  { color: var(--gold, #d4a24c); border: 1px solid var(--gold, #d4a24c); }
.engine-badge-url { font-family: var(--mono); font-size: 11px; color: var(--gray); overflow-wrap: anywhere; }
.engine-seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 9999px; overflow: hidden; margin: 4px 0 12px; }
.engine-seg-btn {
  border: none; background: transparent; padding: 7px 18px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--gray);
}
.engine-seg-btn.is-active { background: var(--ink); color: var(--surface, #fff); }
.engine-seg-btn:disabled { opacity: .5; cursor: default; }
#engine-modal .cred-row { margin-top: 12px; }

/* Detailed campaign status belongs exclusively to the opened campaign. */
body:not(.route-wizard) #nav-status,
body:not(.route-wizard) #active-card { display: none !important; }
/* Scoped under .preview-modal__body so these beat the v3 dashboard's
   `body[data-dashboard='v3'] button { color: inherit }` — that rule turned the
   Launch button black-on-black (operator screenshot, 2026-10-07). */
.preview-modal__body .prelaunch-button { border: 1.5px solid var(--ink); border-radius: 999px; padding: 10px 18px; background: transparent; color: var(--ink, #111); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; cursor: pointer; }
.preview-modal__body .prelaunch-button--confirm { background: var(--ink, #111); color: var(--bg, #fff); }
.preview-modal__body .prelaunch-button--confirm:hover { opacity: .88; }
/* Per-section preview: same outlined mono pill as the main Preview messages
   CTA (.tpl-preview-btn), just one size smaller so it sits under a heading. */
.template-preview-button {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 12px; padding: 7px 14px;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 9999px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.template-preview-button::before {
  content: ''; width: 14px; height: 14px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>") center / contain no-repeat;
}
.template-preview-button:hover { background: var(--ink); color: var(--bg, #fff); }
.template-preview-button:disabled { opacity: .55; cursor: wait; }
.campaign-warnings-inline[hidden] { display: none; }
/* The two check-now steps (scope, then where): one short title, a step
   counter, two rounded choices, a cancel link. Nothing else. */
#solo-check-modal .stop-choice-card, #check-where-modal .stop-choice-card { padding: 28px 28px 22px; max-width: 560px; }
#solo-check-modal .stop-choice-headline, #check-where-modal .stop-choice-headline { font-size: 1.5rem; margin: 0 0 4px; }
#solo-check-modal .stop-choice-sub, #check-where-modal .stop-choice-sub { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin: 0 0 16px; }
#solo-check-modal .stop-choice-pill, #check-where-modal .stop-choice-pill { border-radius: 12px; padding: 14px 16px; }
#solo-check-modal .stop-choice-pill-headline, #check-where-modal .stop-choice-pill-headline { font-family: var(--body); font-size: .95rem; font-weight: 650; letter-spacing: 0; margin-bottom: 4px; }
#solo-check-modal .stop-choice-pill-sub, #check-where-modal .stop-choice-pill-sub { font-family: var(--body); font-size: .8rem; color: var(--gray); line-height: 1.4; }
#solo-check-modal .stop-choice-cancel-row, #check-where-modal .stop-choice-cancel-row { margin-top: 12px; }
.stop-choice-pill.is-recommended { border-color: var(--ink); border-width: 2px; }
.stop-choice-pill:disabled { opacity: .45; cursor: not-allowed; }
.stop-choice-pill-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 9999px; background: var(--ink); color: var(--bg, #fff); font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; }
#preview-modal-body { color: var(--ink, #111); }

.campaign-run-history { margin: -8px 0 24px; padding: 12px 20px; border: 1px solid var(--hairline); border-radius: 12px; }
.campaign-run-history summary { cursor: pointer; color: var(--gray); }
.campaign-history-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--hairline); }
.campaign-history-warning { color:var(--gold); }

.campaign-history-actions { display:flex; flex-wrap:wrap; gap:12px; }
.campaign-history-delete { color:var(--red); }

.campaign-run-history { font-size: 13px; }
.campaign-history-row { padding: 8px 0; }
.campaign-history-actions { gap: 8px; }
.campaign-history-actions .btn {
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  min-height: 30px;
  line-height: 1.2;
}

/* Dedicated app settings: existing controls keep their IDs and saved values. */
body.route-app-settings #app-settings-view { display:block; }
body.route-app-settings .page-header,
body.route-app-settings .sidebar-nav { display:none; }
.sidebar-settings-link { margin-top:auto;padding:20px 12px;border-top:1px solid var(--hairline); }
.sidebar-settings-link .nav-item { width:100%; }
.app-settings-heading { margin:24px 0 32px; }
.app-settings-heading h1 { margin:24px 0 8px;font:48px var(--display); }
.app-settings-heading p,.settings-description { color:var(--gray);font-size:14px;line-height:1.6; }
.app-settings-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;padding-bottom:40px; }
.app-settings-card { padding:28px;border:1px solid var(--hairline);border-radius:18px;min-width:0; }
.app-settings-card h2 { font:600 20px var(--body);margin:0 0 12px; }
.app-settings-card .theme-toggle-group,.app-settings-card .sb-tight,.app-settings-card .sidebar-footer { padding:18px 0;margin:0;border:0; }
.app-settings-card .sb-line { padding:12px 0; }
.app-settings-card .sidebar-footer { display:grid;gap:12px; }
.app-settings-card .operator-chip { width:100%; }
.app-settings-card .sidebar-signout { width:auto;justify-self:start; }
.settings-explanations { margin:16px 0 0;font-size:13px;line-height:1.6; }
.settings-explanations dt { font-weight:600;margin-top:16px; }
.settings-explanations dd { color:var(--gray);margin:4px 0 0; }
.setting-help { display:inline-flex;position:relative;vertical-align:middle; }
.setting-help button { width:20px;height:20px;padding:0;border:1px solid var(--hairline);border-radius:50%;background:transparent;color:var(--gray);font:12px var(--body);letter-spacing:0;cursor:help; }
.setting-help [role=tooltip] { display:none;position:absolute;left:0;bottom:calc(100% + 8px);width:min(260px,60vw);padding:12px;border:1px solid var(--hairline);border-radius:10px;background:var(--bg);color:var(--ink);font:13px/1.5 var(--body);letter-spacing:normal;text-transform:none;z-index:50;box-shadow:var(--card-shadow); }
.setting-help:hover [role=tooltip],.setting-help:focus-within [role=tooltip] { display:block; }
@media(max-width:1100px) { .app-settings-grid { grid-template-columns:1fr; } }
.sidebar-main-nav { display:grid;gap:6px;padding:24px 12px 16px; }
.sidebar-main-nav .nav-item { width:100%;font-size:13px;letter-spacing:1px; }
.sidebar-main-nav .is-active { background:var(--ink);color:var(--bg);border-radius:10px; }
.sidebar #engine-version-banner { display:grid;grid-template-columns:1fr;gap:12px;margin:12px 18px;padding:16px;border-width:1px;border-radius:12px;width:auto; }
.sidebar #engine-version-banner .engine-version-banner__flag { font-size:10px;letter-spacing:1px;gap:7px; }
.sidebar #engine-version-banner .engine-version-banner__current,
.sidebar #engine-version-banner .engine-version-banner__live { min-width:0; }
.sidebar #engine-version-banner strong { font-size:30px;line-height:1.1; }
.sidebar #engine-version-banner .engine-version-banner__label { font-size:9px;letter-spacing:1px; }
.sidebar #engine-version-banner .engine-version-banner__url { font-size:10px;overflow-wrap:anywhere; }
.sidebar #engine-version-banner .engine-version-banner__divider { height:1px;width:100%;background:var(--hairline); }
.sidebar #engine-version-banner .engine-version-banner__explanation { font-size:11px;line-height:1.5;grid-column:auto;margin:0; }

/* Compact sidebar engine status; full endpoints remain available on hover. */
.sidebar #engine-version-banner { grid-template-columns:1fr 1fr;gap:8px 12px;margin:6px 18px 12px;padding:12px;border:1px solid var(--hairline);box-shadow:none;background:transparent;border-radius:8px; }
.sidebar #engine-version-banner .engine-version-banner__flag { grid-column:1 / -1;font-size:9px;letter-spacing:.7px;color:var(--gray); }
.sidebar #engine-version-banner .engine-version-banner__signal { width:6px;height:6px; }
.sidebar #engine-version-banner strong { font:600 15px/1.3 var(--body);letter-spacing:0; }
.sidebar #engine-version-banner .engine-version-banner__label { font-size:8px;letter-spacing:.7px; }
.sidebar #engine-version-banner .engine-version-banner__url,
.sidebar #engine-version-banner .engine-version-banner__divider,
.sidebar #engine-version-banner .engine-version-banner__explanation { display:none; }
.sidebar #engine-version-banner.is-error .engine-version-banner__explanation { display:block;grid-column:1 / -1;font-size:11px; }

.mature-ramp-chart { margin:8px 0 18px;padding:12px 14px;border:1px solid var(--hairline);border-radius:10px;background:var(--bg); }
.mature-ramp-chart__heading { display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;font:12px var(--body);margin-bottom:8px; }
.mature-ramp-chart__heading span { color:var(--gray);font-size:11px; }
.mature-ramp-chart svg { display:block;width:100%;height:104px; }
.mature-ramp-chart rect { fill:#b98a32; }
.mature-ramp-chart rect:hover { fill:var(--ink); }
.mature-ramp-chart text { fill:var(--gray);font:10px var(--body); }
.mature-stage-list { display:grid;gap:8px;margin:12px 0; }
.mature-stage.mature-stage--compact { padding:12px 14px;margin:0;border-radius:10px; }
.mature-stage.mature-stage--compact h3 { font:600 12px var(--body);margin:0 0 8px; }
.mature-stage--compact .mature-cold-row { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0; }
.mature-stage--compact .mature-field { margin:0;gap:5px;min-width:0; }
.mature-stage--compact .mature-field > span { font-size:9px;letter-spacing:.6px; }
.mature-stage--compact input[type=number] { width:100%;min-width:0;padding:8px 10px;font-size:13px;height:36px;box-sizing:border-box;background:var(--bg);color:var(--ink); }
.mature-stage--compact .mature-source-help { margin:10px 0 0;font-size:11px; }

/* Campaign steps belong to the editor; global navigation stays in place. */
.campaign-editor-nav { display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px;padding:12px;border:1px solid var(--hairline);border-radius:12px; }
.campaign-editor-nav > .nav-section-label { width:100%;padding:0 4px 6px; }
.campaign-editor-nav .nav-item { width:auto;font-size:11px;letter-spacing:.6px;padding:8px 10px; }
.campaign-editor-nav .nav-num { width:auto;font-size:13px; }
.campaign-editor-tools { width:100%;border-top:1px solid var(--hairline);padding-top:8px;margin-top:4px; }
.campaign-editor-tools summary { cursor:pointer;color:var(--gray);font:12px var(--body); }
.campaign-editor-tools .nav-section-label { padding:12px 10px 4px; }

.mature-pool-capacity { font:12px/1.5 var(--body);margin:10px 0 0;color:var(--gray); }
.mature-pool-capacity.is-warning { color:var(--ink);background:var(--gold-tint-bg);border-left:3px solid var(--gold);padding:8px 10px;border-radius:4px; }

/* Explicit feedback while live state is unresolved; never imply zero activity. */
.loading-notice { display:flex; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--hairline, #ded8ce); border-radius:12px; color:var(--fg, #34312c); background:var(--surface, #faf8f4); font-size:14px; line-height:1.5; }
.loading-notice strong { font-weight:500; }
.loading-notice-detail { display:block; margin-top:3px; font-size:12px; color:var(--gray, #777); }
.loading-notice-spinner { flex:none; width:18px; height:18px; border:2px solid #ded8ce; border-top-color:#997a48; border-radius:50%; animation:loading-notice-spin .8s linear infinite; }
@keyframes loading-notice-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-notice-spinner { animation:none; } }