/* IBVC Command Center — Brand Tokens */
:root {
  --bg-primary: #0B090A;
  --bg-card: #161A1D;
  --bg-elevated: #1E2328;
  --bg-hover: #252A2F;
  --text-primary: #F5F3F4;
  --text-secondary: #B1A7A6;
  --text-muted: #6B6B6B;
  --accent-red: #A4161A;
  --accent-red-light: #E5383B;
  --accent-blue: #007BFF;
  --accent-green: #34C759;
  --accent-yellow: #FFD60A;
  --accent-orange: #FF9F0A;
  --border: #2A2A2A;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --shadow: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.5);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* === TOPBAR === */
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.topbar-left { display: flex; align-items: baseline; gap: 10px; }
.logo { font-size: 20px; font-weight: 700; letter-spacing: 2px; color: var(--text-primary); }
.logo-sub { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.5px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.beast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); transition: background 0.3s; }
.beast-dot.online { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }
.beast-dot.offline { background: var(--accent-red-light); box-shadow: 0 0 6px var(--accent-red-light); }
.beast-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.beast-status { font-size: 12px; color: var(--text-muted); }
/* === PULSE BAR === */
.pulse-bar { display: flex; align-items: center; justify-content: center; gap: 0; padding: 14px 24px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.pulse-item { display: flex; align-items: center; gap: 8px; padding: 0 24px; }
.pulse-divider { width: 1px; height: 24px; background: var(--border); }
.pulse-icon { font-size: 16px; }
.pulse-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.pulse-value { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.pulse-delta { font-size: 12px; font-weight: 600; }
.pulse-delta.up { color: var(--accent-green); }
.pulse-delta.down { color: var(--accent-red-light); }
.pulse-delta.neutral { color: var(--text-muted); }
/* === PANELS === */
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.panel-header h2 { font-size: 15px; font-weight: 600; letter-spacing: 0.3px; }
.panel-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.panel-body { padding: 0; max-height: 480px; overflow-y: auto; }
.panel-loading { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* === DEALS GRID === */
.deals-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; padding: 16px 24px; }
/* === DEAL STATUS GROUP === */
.deal-group { border-bottom: 1px solid var(--border); }
.deal-group:last-child { border-bottom: none; }
.deal-group-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: var(--bg-elevated); }
.deal-group-name { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.deal-group-count { font-size: 11px; color: var(--text-muted); }
/* === DEAL CARD === */
.deal-card { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid rgba(42,42,42,0.5); cursor: pointer; transition: background 0.15s; text-decoration: none; color: inherit; }
.deal-card:hover { background: var(--bg-hover); }
.deal-card:last-child { border-bottom: none; }
.deal-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.deal-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.deal-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 12px; }
.deal-touch { font-size: 12px; font-weight: 600; white-space: nowrap; padding: 2px 8px; border-radius: var(--radius-sm); }
.deal-touch.stale { color: var(--accent-red-light); background: rgba(164,22,26,0.15); }
.deal-touch.warm { color: var(--accent-orange); background: rgba(255,159,10,0.15); }
.deal-touch.fresh { color: var(--accent-green); background: rgba(52,199,89,0.15); }
/* === BEAST PANEL === */
.beast-panel { padding: 0 24px 16px; }
.beast-models { display: flex; gap: 12px; padding: 12px 20px; flex-wrap: wrap; }
.model-chip { font-size: 11px; padding: 4px 10px; border-radius: 20px; background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); }
.model-chip.active { border-color: var(--accent-green); color: var(--accent-green); }
.beast-actions { display: flex; gap: 8px; padding: 0 20px 16px; flex-wrap: wrap; }
.beast-jobs { padding: 0; }
/* === JOB ROW === */
.job-row { display: grid; grid-template-columns: 1fr 80px 80px 1fr; gap: 8px; padding: 8px 20px; font-size: 12px; border-bottom: 1px solid rgba(42,42,42,0.5); align-items: center; }
.job-row:last-child { border-bottom: none; }
.job-type { font-weight: 600; color: var(--text-primary); }
.job-status { font-weight: 500; }
.job-status.done { color: var(--accent-green); }
.job-status.failed { color: var(--accent-red-light); }
.job-status.running { color: var(--accent-blue); }
.job-duration { color: var(--text-muted); font-family: var(--font-mono); }
.job-result { color: var(--text-secondary); }
/* === BOTTOM GRID === */
.bottom-grid { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 24px 24px; }
/* === CONNECTOR ROW === */
.connector-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid rgba(42,42,42,0.5); }
.connector-row:last-child { border-bottom: none; }
.connector-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.connector-dot { width: 6px; height: 6px; border-radius: 50%; }
.connector-dot.green { background: var(--accent-green); }
.connector-dot.yellow { background: var(--accent-yellow); }
.connector-dot.red { background: var(--accent-red-light); }
.connector-last { font-size: 12px; color: var(--text-muted); }
/* (Event Feed styles live in styles.css — single source of truth.) */
/* === SCROLLBAR === */
.panel-body::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* === AGENT CARDS === */
/* Use min(100%, 380px) so the column never demands more width than its container —
   on narrow screens the card just becomes 100% wide instead of overflowing. */
.agents-section { padding: 0 24px 16px; }
.agent-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; padding: 16px 20px; }
.agent-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 20px 16px;       /* no top padding — banner extends to the top edge */
  transition: border-color 0.2s, box-shadow 0.2s;
  /* flex column lets .agent-report use margin-top:auto to sit at the bottom
     so the report line is always vertically aligned across agent cards. */
  display: flex;
  flex-direction: column;
  /* keep the banner clipped to the card's rounded corners */
  overflow: hidden;
}
.agent-card:hover { border-color: var(--accent-blue); }
.agent-card.is-running { border-color: var(--accent-blue); box-shadow: 0 0 0 1px rgba(0,123,255,0.15); }

/* ── Hero: short banner image with overlay bar (name+badge left, Run right) ── */
.agent-hero { display: flex; flex-direction: column; margin-bottom: 14px; }

/* Banner: full-width image extending past the card's horizontal padding to its rounded edges.
   Shorter (5:2) so the name + Run overlay sits low and content below has room to breathe. */
.agent-banner {
  position: relative;
  margin: 0 -20px;
  aspect-ratio: 5 / 2;          /* shorter than the previous 3:2 hero */
  background: var(--bg-card);
  overflow: hidden;
}
.agent-banner-img {
  width: 100%; height: 100%;
  /* `cover` preserves aspect (no stretch), fills the banner, crops the
     overflow at the bottom only — top-anchored so the subject's head/top of
     the composition is always visible (matters for portrait-style banners
     like Acquisitions Assistant where faces sit near the top). */
  object-fit: cover;
  object-position: center top;
  display: block;
}
.agent-banner-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,123,255,0.20), rgba(164,22,26,0.20));
  font-size: 48px; line-height: 1;
}

/* Dark gradient overlay (bottom-up) so the name + Run row stays legible over any image */
.agent-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;         /* image stays clickable for collapse */
}
.agent-banner-info, .agent-banner-actions { pointer-events: auto; }  /* but children accept events */

.agent-banner-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.agent-banner-name {
  font-size: 18px; font-weight: 700; letter-spacing: 0.2px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0;
}
/* Status badge re-tinted to be legible over the gradient */
.agent-banner-info .agent-status-badge {
  background: rgba(255,255,255,0.18);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
}

/* Run / Stop button on the banner — frosted glass */
.agent-banner-actions { flex-shrink: 0; }
.agent-banner-actions .btn-agent-run,
.agent-banner-actions .btn-agent-stop {
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.agent-banner-actions .btn-agent-run:hover {
  background: var(--accent-green);
  border-color: var(--accent-green);
}
.agent-banner-actions .btn-agent-stop {
  background: rgba(229,56,59,0.75);
  border-color: rgba(255,255,255,0.3);
}
.agent-banner-actions .btn-agent-stop:hover { background: var(--accent-red-light); }
.agent-banner-actions .btn-agent-run[disabled] {
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.55);
  cursor: not-allowed;
}
.agent-status-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px;
}
.agent-status-badge.status-live { background: rgba(52,199,89,0.15); color: var(--accent-green); }
.agent-status-badge.status-in-progress { background: rgba(0,123,255,0.15); color: var(--accent-blue); }
.agent-status-badge.status-paused { background: rgba(255,214,10,0.15); color: var(--accent-yellow); }

/* (Old circular .agent-avatar was replaced by the full-width .agent-banner above.) */

/* ── Feature grid ── */
/* Vertical cards (icon on top, name below) — fits 4–6 per row instead of 2–3,
   makes the icon the primary visual, and keeps each card narrow + scannable. */
.feat-grid {
  display: grid;
  /* Wider min (was 96px) so feature names fit on clean lines instead of
     breaking mid-word in cramped boxes. Cards still grow with content; the
     overflow-wrap on .feat-name guarantees nothing ever clips off-card. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: 8px;
}
.feat-grid-empty { color: var(--text-muted); font-size: 12px; padding: 6px 2px; }
.feat-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 8px 8px;
  cursor: pointer; user-select: none;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  min-height: 76px;
  /* CRITICAL: lets the grid column be the authority on width.
     Without this, a long feature name would expand the column past its 1fr share. */
  min-width: 0;
  overflow: hidden;
  text-align: center;
}
.feat-card:hover { border-color: var(--accent-blue); background: var(--bg-hover); }
.feat-card:active { transform: scale(0.99); }
.feat-card.feat-disabled { cursor: not-allowed; opacity: 0.55; }
.feat-card.feat-disabled:hover { border-color: var(--border); background: var(--bg-card); }
.feat-card:has(.feat-check:checked) {
  border-color: var(--accent-green);
  background: rgba(52,199,89,0.06);
}
.feat-card.feat-frozen { opacity: 0.55; text-decoration: line-through; }
.feat-card.feat-wip .feat-name { color: var(--accent-blue); }
.feat-card.feat-testing .feat-name { color: var(--accent-yellow); }

.feat-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--text-secondary);  /* drives SVG stroke color */
}
/* Notion-uploaded images: keep border-radius so cropped photos look polished;
   no background since we dropped the chip box. */
.feat-icon.icon-img { object-fit: cover; border-radius: 8px; }
.feat-icon.icon-emoji { font-size: 28px; line-height: 1; }
.feat-icon.icon-svg svg { width: 26px; height: 26px; display: block; }

/* Color the SVG icon based on the parent card's state */
.feat-card:has(.feat-check:checked) .feat-icon.icon-svg     { color: var(--accent-green); background: rgba(52,199,89,0.10); }
.feat-card.feat-disabled .feat-icon.icon-svg,
.feat-card.feat-frozen .feat-icon.icon-svg                  { color: var(--text-muted); }
.feat-card.feat-wip .feat-icon.icon-svg                     { color: var(--accent-blue); }
.feat-card.feat-testing .feat-icon.icon-svg                 { color: var(--accent-yellow); }
.feat-card.step-done .feat-icon.icon-svg                    { color: var(--accent-green); }
.feat-card.step-running .feat-icon.icon-svg                 { color: var(--accent-blue); }

.feat-name {
  font-size: 11px; font-weight: 700; color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 0; width: 100%;
  overflow-wrap: anywhere;   /* long words wrap inside the card instead of stretching it */
  hyphens: auto;
}

/* Hide the native checkbox but keep it accessible (keyboard / screen reader). */
.feat-check {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Selection state is signalled entirely by the card's green border + tinted bg
   (see :has(.feat-check:checked) rule above) — no corner indicator. */
.feat-card:focus-within { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* In-chain state on feature cards */
.feat-card.step-done    { border-color: var(--accent-green); background: rgba(52,199,89,0.08); }
.feat-card.step-running { border-color: var(--accent-blue);  background: rgba(0,123,255,0.08); animation: blink 1.4s infinite; }
.feat-card.step-pending { opacity: 0.7; }
.feat-card .step-dot { position: absolute; top: 6px; right: 8px; font-size: 11px; }

/* ── Performance Report — quiet single-line link, bottom-aligned ──
   The dashed separator is drawn as a ::before so we can keep `margin-top: auto`
   (which pins the link to the bottom of the flex card so reports align across
   grid columns) while still guaranteeing a constant 14px gap above the line.
   Visual stack: feature grid → [auto-stretch space] → 14px → dashed line → 14px → content. */
.agent-report {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: auto;
  padding: 28px 0 0;
  position: relative;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11px;
  line-height: 1.35;
  min-width: 0;
  transition: color 0.15s;
}
.agent-report::before {
  content: "";
  position: absolute;
  inset: 14px 0 auto 0;        /* top: 14px from top of .agent-report; full-width */
  border-top: 1px dashed var(--border);
}
.agent-report:hover { color: var(--text-primary); }
.agent-report:hover .agent-report-text { text-decoration: underline; }
.agent-report-icon { flex-shrink: 0; font-size: 11px; opacity: 0.7; }
.agent-report-text {
  flex: 1; min-width: 0;
  font-weight: 500;
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agent-report-date {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted);
}
.agent-card.collapsed > .agent-report { display: none; }
/* Progress dots */
.step-dot { font-size: 10px; margin-right: 2px; }
.step-dot.done { color: var(--accent-green); }
.step-dot.running { color: var(--accent-blue); animation: blink 1s infinite; }
.step-dot.pending { color: var(--text-muted); }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* Progress bar */
.agent-progress {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 0 0; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.progress-step {
  font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 4px;
  transition: all 0.4s ease;
}
.progress-step.done {
  background: rgba(52,199,89,0.15); color: var(--accent-green);
  animation: step-done-fade 0.45s ease-out;
}
.progress-step.running {
  background: rgba(0,123,255,0.22); color: var(--accent-blue);
  animation: step-running-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(0,123,255,0.25);
}
.progress-step.pending { color: var(--text-muted); opacity: 0.55; }
.progress-arrow {
  color: var(--text-muted); font-size: 11px;
  transition: color 0.4s ease;
}
/* When the step BEFORE an arrow is done, color the arrow green to show the
   handover visually. */
.progress-step.done + .progress-arrow { color: var(--accent-green); }
.progress-step.running + .progress-arrow { color: var(--accent-blue); }
@keyframes step-running-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,123,255,0); transform: scale(1); }
  50%      { box-shadow: 0 0 18px rgba(0,123,255,0.45); transform: scale(1.04); }
}
@keyframes step-done-fade {
  from { background: rgba(0,123,255,0.22); color: var(--accent-blue); transform: scale(1.04); }
  to   { background: rgba(52,199,89,0.15); color: var(--accent-green); transform: scale(1); }
}
/* Per-agent multi-DB controls (DB / Status / County) live inside
   .agent-banner-actions, immediately left of the Run/Stop button. They share
   the frosted-glass styling of the banner buttons so the whole right-side
   cluster reads as one toolbar. */
.agent-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.agent-db-select,
.agent-status-select,
.agent-county-input,
.agent-tags-input {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  height: 32px;            /* match Run button height (--font 13 + padding 6px) */
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.45);
  color: #fff;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: border-color 0.15s, background 0.15s;
}
.agent-db-select,
.agent-status-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* white chevron so it reads on the dark glass */
  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='%23ffffff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-color: rgba(0,0,0,0.45);  /* re-state since background-image overrides shorthand */
  padding-right: 24px;
}
.agent-db-select:hover,
.agent-status-select:hover,
.agent-county-input:hover,
.agent-tags-input:hover {
  border-color: rgba(255,255,255,0.55);
  background-color: rgba(0,0,0,0.6);
}
.agent-db-select:focus,
.agent-status-select:focus,
.agent-county-input:focus,
.agent-tags-input:focus {
  outline: none;
  border-color: var(--accent-blue);
}
.agent-county-input { font-weight: 400; width: 130px; }
.agent-tags-input   { font-weight: 400; width: 90px; }
.agent-county-input::placeholder,
.agent-tags-input::placeholder { color: rgba(255,255,255,0.55); }
/* Tighten dropdowns when the banner gets narrow (multiple cards per row) */
@media (max-width: 480px) {
  .agent-county-input { width: 100px; }
  .agent-tags-input { width: 76px; }
  .agent-db-select, .agent-status-select, .agent-county-input, .agent-tags-input { font-size: 11px; padding: 5px 8px; }
}

/* Mobile / narrow banner: three stacked rows —
     row 1: name + status badge
     row 2: DB / Status / County controls (left-aligned, fill width)
     row 3: Run button (full-width CTA)
   Banner image switches from aspect-ratio (5:2 = too short on mobile, content
   overflows) to a min-height so it expands to fit all three rows of overlay.
   All controls AND the Run button stay 32px so the toolbar reads as one
   coherent height across both desktop and mobile. */
@media (max-width: 640px) {
  .agent-banner {
    aspect-ratio: auto;
    /* Fixed height (not min-height) so every agent card has an identical
       banner regardless of how much overlay content (controls, Run) it has.
       220px fits the tallest case: name + 3 controls + full-width Run row. */
    height: 220px;
  }
  /* Image centering is now the same `center center` on desktop and mobile —
     handled by the base .agent-banner-img rule. */

  .agent-banner-overlay {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    /* Overlay horizontal padding bumped from 16px → 20px to match
       .agent-card's content padding. This way the controls + full-width Run
       button sit on the SAME horizontal inset as the FEATURES grid below
       (instead of stretching ~8px wider into the banner's negative-margin
       overhang, which read as the button overflowing the card). */
    padding-left: 20px;
    padding-right: 20px;
  }
  .agent-banner-info { flex: 0 0 auto; }
  .agent-banner-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }
  .agent-banner-actions > * { max-width: 100%; min-width: 0; }
  /* On mobile, switch Run/Stop from inline-flex → block so width: 100% behaves
     predictably across Safari/iOS (inline-flex + width:100% can be ignored on
     WebKit). flex-basis 100% guarantees the wrap onto its own row. !important
     defeats any conflicting rule. */
  .agent-banner-actions .btn-agent-run,
  .agent-banner-actions .btn-agent-stop {
    display: block !important;
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 30px;            /* height 32px - 2px border = 30px content */
    text-align: center;
  }
}
/* Run/Stop buttons on agent cards.
   height:32px + box-sizing:border-box keeps the buttons EXACTLY the same
   height as the DB/Status/County controls so the toolbar reads as one row. */
.btn-agent-run, .btn-agent-stop {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  height: 32px; box-sizing: border-box;
  padding: 0 16px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s; border: 1px solid var(--border);
}
.btn-agent-run { background: var(--bg-card); color: var(--accent-green); border-color: var(--accent-green); }
.btn-agent-run:hover { background: var(--accent-green); color: var(--bg-primary); }
.btn-agent-stop {
  background: rgba(164,22,26,0.15); color: var(--accent-red-light);
  border-color: var(--accent-red-light); animation: pulse-border 2s infinite;
}
.btn-agent-stop:hover { background: var(--accent-red-light); color: var(--text-primary); }
@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,56,59,0.4); }
  50% { box-shadow: 0 0 8px 2px rgba(229,56,59,0.3); }
}
/* Tools toggle + buttons */
.beast-tools-toggle {
  padding: 8px 20px; font-size: 12px; color: var(--text-muted);
  cursor: pointer; user-select: none;
}
.beast-tools-toggle:hover { color: var(--text-secondary); }
.beast-tools { display: flex; gap: 8px; padding: 0 20px 16px; flex-wrap: wrap; }
.btn-tool {
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  padding: 5px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: transparent;
  color: var(--text-secondary); cursor: pointer; transition: all 0.15s;
}
.btn-tool:hover { background: var(--bg-elevated); color: var(--text-primary); }
.btn-tool.running { background: var(--accent-blue); border-color: var(--accent-blue); color: white; }
.btn-coming-soon { opacity: 0.4; cursor: not-allowed; border-style: dashed; }
/* === RESPONSIVE === */

/* Half-desktop sweet spot (1024–1200px): keep grid but drop deals to 2 cols
   with Automations spanning the full width on row 2. */
@media (max-width: 1200px) {
  .deals-grid { grid-template-columns: 1fr 1fr; }
  .deals-grid > #automations-connectors { grid-column: 1 / -1; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Quick Entry form (CFO inline finance entry — INCOME / EXPENSES / PAYOUTS)
   The tile shows inside .feat-grid like the other features but uses a
   <button> element and a different open/close visual state. The form below
   the grid is hidden by default; toggling it open uses the [hidden] attribute.
   ────────────────────────────────────────────────────────────────────────── */
.feat-card.feat-form {
  border-style: dashed;
  font: inherit;
  color: inherit;
}
.feat-card.feat-form.feat-form-open {
  border-style: solid;
  border-color: var(--accent-blue);
  background: rgba(0,123,255,0.06);
}
.feat-card.feat-form .feat-icon { color: var(--accent-blue); }

.quick-entry {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.quick-entry[hidden] { display: none; }
.qe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qe-field { display: grid; gap: 4px; min-width: 0; }
/* `.qe-field { display:grid }` has the same specificity as the UA's
   `[hidden] { display:none }` rule and is declared later, so it overrides
   the HTML hidden attribute. Restore the expected behavior explicitly so
   PAYOUTS selection actually hides both conditional dropdowns. */
.qe-field[hidden], .quick-entry[hidden] { display: none; }
.qe-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.quick-entry input[type=number],
.quick-entry input[type=text],
.quick-entry input[type=date],
.quick-entry select {
  background: var(--bg-input, #11151c);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.quick-entry input:focus,
.quick-entry select:focus {
  outline: none;
  border-color: var(--accent-blue);
}
.qe-db-group {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}
.qe-db-group legend.qe-label { padding: 0 6px; }
.qe-radio {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.qe-actions { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.qe-submit { min-width: 160px; }
.qe-status { font-size: 12px; color: var(--text-muted); }
.qe-status.qe-ok      { color: var(--accent-green); }
.qe-status.qe-err     { color: var(--accent-red, #ff6b6b); }
.qe-status.qe-pending { color: var(--accent-yellow); }
.qe-status a { color: inherit; text-decoration: underline; }

.qe-radio-ico { font-size: 14px; margin-right: 2px; }

/* Asset Values form rows — same input/label rhythm as Financial Entry. */
.av-fields { display: grid; gap: 8px; }
.av-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 10px; }
.av-row .qe-label { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-primary); }
.av-loading { color: var(--text-muted); font-size: 12px; padding: 4px 2px; }

@media (max-width: 520px) {
  .qe-row { grid-template-columns: 1fr; }
  .qe-actions { flex-direction: column; align-items: stretch; }
  .qe-submit, .av-submit { width: 100%; }
  /* Date field default rendering on iOS Safari ignores width:100% unless the
     input is block-displayed. Without this it overflows the card. */
  .quick-entry input[type=date] { display: block; width: 100%; box-sizing: border-box; }
  .av-row { grid-template-columns: 1fr; gap: 4px; }
}

/* iPad + mobile (≤ 1024px): three horizontal-scroll carousels.

   We DON'T flatten the Agents panel — its outer shell is part of the visual
   identity. Pipelines & Deals are top-level sections with cards directly
   inside; Agents has its panel wrapper around the agent-cards row. Each
   container keeps its own existing padding (matching desktop) and just
   switches display to flex+overflow-x. Simple, predictable, no variables. */
@media (max-width: 1024px) {

  /* The three flex containers. Each keeps its own padding (Pipelines: 16/24,
     Deals: 16/24, agent-cards: 16/20 — same as desktop). Display switches
     from grid to flex; horizontal overflow becomes the scroll mechanic. */
  .pipelines,
  .deals-grid,
  .agent-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 20px;   /* snap to ~the visible gutter */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;      /* don't trigger the browser back-swipe */
    scrollbar-width: none;               /* Firefox */
    grid-template-columns: none;         /* defuse desktop grid rules */
  }
  .pipelines::-webkit-scrollbar,
  .deals-grid::-webkit-scrollbar,
  .agent-cards::-webkit-scrollbar { display: none; }

  /* Each card occupies 88% of the container's content area; next card peeks ~12%. */
  .pipelines > .pipeline,
  .deals-grid > .panel,
  .agent-cards > .agent-card {
    flex: 0 0 88%;
    scroll-snap-align: start;
    grid-column: auto !important;       /* defuse Automations' full-width rule */
  }
}

/* Small phones (≤ 768px): tighten side padding so cards get more screen real
   estate, with a slightly bigger peek for the swipe affordance. */
@media (max-width: 768px) {
  .bottom-grid { grid-template-columns: 1fr; }
  .pulse-bar { flex-wrap: wrap; gap: 8px; }
  .pulse-divider { display: none; }
  .pipelines     { padding: 16px 16px; }
  .deals-grid    { padding: 16px 16px; }
  .agents-section { padding: 0 16px 16px; }
  .agent-cards   { padding: 16px 16px; }
  .pipelines > .pipeline,
  .deals-grid > .panel,
  .agent-cards > .agent-card { flex: 0 0 90%; }
}
/* === LIGHT MODE === */
@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #F5F5F7; --bg-card: #FFFFFF; --bg-elevated: #F0F0F2; --bg-hover: #E8E8ED;
    --text-primary: #1D1D1F; --text-secondary: #6E6E73; --text-muted: #AEAEB2;
    --accent-red: #A4161A; --accent-red-light: #D70015; --accent-blue: #0071E3;
    --accent-green: #248A3D; --accent-yellow: #B25000; --accent-orange: #C93400;
    --border: #D2D2D7; --shadow: 0 1px 3px rgba(0,0,0,0.08); --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
  }
  .topbar { border-bottom-color: var(--border); background: var(--bg-card); }
  .pulse-bar { background: var(--bg-card); border-bottom-color: var(--border); }
  .panel { box-shadow: var(--shadow); border-color: var(--border); }
}
[data-theme="light"] {
  --bg-primary: #F5F5F7; --bg-card: #FFFFFF; --bg-elevated: #F0F0F2; --bg-hover: #E8E8ED;
  --text-primary: #1D1D1F; --text-secondary: #6E6E73; --text-muted: #AEAEB2;
  --accent-red: #A4161A; --accent-red-light: #D70015; --accent-blue: #0071E3;
  --accent-green: #248A3D; --accent-yellow: #B25000; --accent-orange: #C93400;
  --border: #D2D2D7; --shadow: 0 1px 3px rgba(0,0,0,0.08); --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
}
[data-theme="light"] .topbar { border-bottom-color: var(--border); background: var(--bg-card); }
[data-theme="light"] .pulse-bar { background: var(--bg-card); border-bottom-color: var(--border); }

/* ── Mobile tweaks for Agents section (≤520px wide) ──
   This block runs IN ADDITION to the ≤640px rule above (CSS cascades by
   source order). Anything here overrides the 640px block, so be careful
   when changing widths/paddings — keep them consistent with the 640px rule
   so the banner overlay's controls don't overflow the card edges. */
@media (max-width: 520px) {
  .agents-section { padding: 0 12px 12px !important; }
  .agent-cards { padding: 12px; gap: 12px; }
  .agent-card { padding: 0 14px 12px; }
  /* Banner: keep the negative margin matched to the card's 14px padding so
     the banner reaches the card edges. Do NOT re-set aspect-ratio here —
     the ≤640px rule's `aspect-ratio: auto; min-height: 220px` is what lets
     the three-row overlay fit. */
  .agent-banner { margin: 0 -14px; }
  /* Overlay padding here MUST match the card's 14px content padding so the
     full-width Run button sits exactly within the card content area. */
  .agent-banner-overlay { padding-top: 10px; padding-bottom: 10px; padding-left: 14px; padding-right: 14px; }
  .agent-banner-name { font-size: 16px; }
  .agent-banner-placeholder { font-size: 40px; }
  .agent-hero { margin-bottom: 10px; }
  .agent-hero-name { font-size: 15px; }
  /* Run button: keep height 32px from base rule (matches the controls).
     Reducing horizontal padding only. */
  .btn-agent-run, .btn-agent-stop { padding: 0 12px; font-size: 12px; }
  .feat-grid { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }  /* fixed equal 2-col on phones */
  .feat-card { padding: 8px 10px; min-height: 52px; }
  .feat-icon { width: 38px; height: 38px; }
  .feat-icon.icon-emoji { font-size: 20px; }
  .feat-icon.icon-svg svg { width: 20px; height: 20px; }
  .feat-name { font-size: 10px; }
}