/* === bundle-base.css === */
/* Generated 2026-06-22 20:27 — DO NOT EDIT DIRECTLY */

/* --- jarvis.css --- */
/* ============================================================
   ATLAS — Brokerage Command Center · North Star CSS v1.0
   Target: 1920×1080 full-screen, no scroll, matches mockup.
   ============================================================ */

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:           #0f1114;          /* V4: lifted from #080c14 */
  --bg2:          #0a0f1a;
  --bg3:          #0d1420;
  --panel:        #0b1120;
  --panel2:       #0f1628;
  --border:       rgba(0,214,255,0.12);
  --border2:      rgba(0,214,255,0.07);

  /* V4 premium accent tokens */
  --champagne:      var(--gold);
  --champagne-soft: rgba(214,169,79,.18);

  /* V5 surface/line/ink aliases (command palette + future panels) */
  --surface:    var(--panel);
  --surface-2:  var(--panel2);
  --surface-3:  var(--bg3);
  --line:       var(--border2);
  --line-strong: var(--border);
  --ink:        var(--text);
  --soft:       var(--text-dim);
  --muted:      var(--text-muted);
  --accent:       #00d6ff;
  --accent-rgb:   0, 214, 255;
  --accent2:      #9c5cff;
  --accent2-rgb:  156,92,255;
  --good:         #3affad;
  --good-rgb:     58,255,173;
  --warn:         #ffb648;
  --bad:          #ff5b3a;
  --text:         #e8f4ff;
  /* WCAG AA contrast fix (T23): dim .50→.56, muted .30→.46 (kept in sync with
     jarvis.css source; north_star_final :root below is the live default-dark override). */
  --text-dim:     rgba(232,244,255,0.56);
  --text-muted:   rgba(232,244,255,0.46);
  --mono:        "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;
  --display:     "Inter", "Segoe UI Variable", system-ui, sans-serif;
  --sans:        "Inter", "Segoe UI Variable", system-ui, sans-serif;

  /* V5 font aliases (command palette + future panels use these names) */
  --font-ui:      var(--sans);
  --font-display: var(--display);
  --font-mono:    var(--mono);
  --rad:          6px;

  /* ── DESIGN VOCABULARY — expanded tokens (Wave 9-W81, 2026-06-10) ──
     Additive only. Scales formalize values already in use across the
     ATLAS CSS so future panels share one vocabulary. Existing color /
     font / --rad tokens above are unchanged. Adopt incrementally. */

  /* SPACING — dense command-center rhythm (2→20px, matches in-use clusters) */
  --spacing-0:    0;
  --spacing-px:   1px;
  --spacing-1:    2px;
  --spacing-2:    4px;
  --spacing-3:    6px;
  --spacing-4:    8px;
  --spacing-5:    10px;
  --spacing-6:    12px;
  --spacing-7:    16px;
  --spacing-8:    20px;
  --spacing-9:    28px;

  /* MOTION — durations + the established easings */
  --motion-instant:  0.1s;
  --motion-fast:     0.15s;
  --motion-base:     0.2s;
  --motion-slow:     0.28s;
  --motion-slower:   0.5s;
  --motion-ease:           cubic-bezier(0.16, 1, 0.3, 1); /* signature expo-out, already used 6× */
  --motion-ease-out:       ease-out;
  --motion-ease-in-out:    ease-in-out;
  --motion-ease-linear:    linear;
  --motion-ui:       var(--motion-fast) var(--motion-ease); /* default interactive transition */

  /* TYPOGRAPHY — scale, weight, leading, tracking (sizes mirror in-use 6.5→28px) */
  --typography-size-2xs:   6.5px;
  --typography-size-xs:    7.5px;
  --typography-size-sm:    8.5px;
  --typography-size-md:    9px;
  --typography-size-lg:    11px;
  --typography-size-xl:    14px;
  --typography-size-2xl:   18px;
  --typography-size-3xl:   22px;
  --typography-size-4xl:   28px;
  --typography-weight-regular:   400;
  --typography-weight-medium:    500;
  --typography-weight-semibold:  600;
  --typography-weight-bold:      700;
  --typography-weight-heavy:     800;
  --typography-weight-black:     900;
  --typography-leading-none:     1;
  --typography-leading-tight:    1.2;
  --typography-leading-snug:     1.35;
  --typography-leading-normal:   1.5;
  --typography-leading-relaxed:  1.6;
  --typography-tracking-tight:   0.04em;
  --typography-tracking-normal:  0.08em;
  --typography-tracking-wide:    0.1em;
  --typography-tracking-wider:   0.14em;
  --typography-tracking-widest:  0.18em;
  --typography-family-display:   var(--display);
  --typography-family-sans:      var(--sans);
  --typography-family-mono:      var(--mono);

  /* DEPTH — elevation ladder + signature accent glow (dark-theme values) */
  --depth-0:        none;
  --depth-1:        0 1px 2px rgba(0,0,0,0.40);
  --depth-2:        0 2px 6px rgba(0,0,0,0.45);
  --depth-3:        0 6px 18px rgba(0,0,0,0.55);
  --depth-4:        0 12px 32px rgba(0,0,0,0.60);
  --depth-glow-sm:  0 0 5px rgba(var(--accent-rgb),0.50);
  --depth-glow-md:  0 0 12px rgba(var(--accent-rgb),0.45);
  --depth-glow-lg:  0 0 18px rgba(var(--accent-rgb),0.55);
  --depth-glow-good: 0 0 6px rgba(var(--good-rgb),0.60);
  --depth-inset:    inset 0 0 10px rgba(var(--accent-rgb),0.15);
  /* text-base: alias to --text for components that need explicit primary body text color */
  --text-base:      var(--text);
}
:root[data-theme="light"] {
  --bg: #f6f3ed; --bg2: #e4eaf5; --bg3: #d8e2f0;  /* V4: warm cream bg */
  --panel: #ffffff; --panel2: #f5f8fd;
  --border: rgba(0,80,160,0.14); --border2: rgba(0,80,160,0.08);
  /* WCAG AA contrast fix (T23): dim .55→.62, muted .32→.60 (kept in sync with jarvis.css). */
  --text: #0f1e35; --text-dim: rgba(15,30,53,0.62); --text-muted: rgba(15,30,53,0.60);
  --champagne: var(--gold);
  --champagne-soft: #fbf0d8;
  /* DEPTH — light-theme elevation: soft neutral shadows, not heavy black (Wave 9-W81) */
  --depth-1: 0 1px 2px rgba(15,30,53,0.08);
  --depth-2: 0 2px 6px rgba(15,30,53,0.10);
  --depth-3: 0 6px 18px rgba(15,30,53,0.12);
  --depth-4: 0 12px 32px rgba(15,30,53,0.16);
}

/* ── BASE ───────────────────────────────────────────────────── */
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--mono); }

/* ── FRAME ──────────────────────────────────────────────────── */
.frame {
  display: grid;
  grid-template-columns: 188px 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════ */
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  height: 56px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 15px; font-weight: 900; color: #000;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(var(--accent-rgb),.4);
}
.sb-text { flex: 1; min-width: 0; }
.sb-org {
  font-family: var(--display); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-sub {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em;
  color: var(--accent); text-transform: uppercase; white-space: nowrap;
}
.org-switcher { display: none !important; }

/* Nav */
.sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 5px 0; scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.rail-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 11px;
  color: var(--text-dim);
  border-left: 2px solid transparent;
  transition: all .14s;
}
.rail-item:hover { color: var(--text); background: rgba(var(--accent-rgb),.06); border-left-color: rgba(var(--accent-rgb),.3); }
.rail-item.active { color: var(--accent); background: rgba(var(--accent-rgb),.1); border-left-color: var(--accent); }

.ri-svg { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; }
.ri-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ri-label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1;
}
.ri-sub {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.07em;
  color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-item.active .ri-sub { color: rgba(var(--accent-rgb),.65); }

/* Sidebar footer */
.sidebar-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 8px 10px 6px;
}
.sb-user {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none; text-align: left; padding: 4px 2px;
}
.sb-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name {
  display: block; font-family: var(--display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.09em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-role {
  display: block; font-family: var(--mono); font-size: 7.5px;
  color: var(--text-dim); letter-spacing: 0.09em;
}
.sb-user-pill {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.09em;
  color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.3);
  border-radius: 3px; padding: 1px 4px; white-space: nowrap;
}
.sb-health {
  display: flex; align-items: center; gap: 5px; padding: 3px 2px;
}
.sb-h-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.sb-h-val { font-family: var(--mono); font-size: 8px; color: var(--good); letter-spacing: 0.1em; }
.sb-h-meta { font-family: var(--mono); font-size: 7px; color: var(--text-muted); }
.sb-clock { padding: 4px 2px 2px; }
.sb-clock-date {
  display: flex; gap: 5px;
  font-family: var(--mono); font-size: 7.5px; color: var(--text-dim);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.sb-clock-time { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.sb-time {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.04em;
  text-shadow: 0 0 14px rgba(var(--accent-rgb),.5);
}
.sb-meridian { display: flex; flex-direction: column; gap: 1px; }
.sb-ampm, .sb-sec { font-family: var(--mono); font-size: 8px; color: var(--text-dim); letter-spacing: 0.08em; }

/* ════════════════════════════════════════════════════════════
   MAIN COLUMN
   ════════════════════════════════════════════════════════════ */
.main-col {
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden; min-width: 0;
}

/* ── STATUSBAR ──────────────────────────────────────────────── */
header#statusbar.statusbar {
  height: 56px; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.status-left { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.status-left .topbtn-status { display: none !important; }

.rail-toggle {
  background: transparent; border: 1px solid var(--border);
  color: var(--accent); width: 26px; height: 26px; border-radius: 4px;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.rail-toggle:hover { background: rgba(var(--accent-rgb),.1); }

.status-center {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-width: 0;
}
.greeting-headline {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: 0.22em; color: var(--accent);
  text-shadow: 0 0 20px rgba(var(--accent-rgb),.5);
  white-space: nowrap; line-height: 1.1;
}
.greeting-subline {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em;
  color: var(--text-dim); white-space: nowrap;
}

.status-right {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
/* Hide legacy elements from header */
.status-jarvis { display: none !important; }
.status-right .voice-ai-active { display: none !important; }
.status-right .state-label { display: none !important; }
/* .status-right .theme-toggle hide rule removed 2026-05-29 — toggle is no longer legacy, it's the visible affordance for T-key shortcut */
.status-brand, .quick-stats, .status-dot, #conn-label, #conn-meta { display: none !important; }

/* Action buttons */
.sa-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 0 9px; height: 30px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 5px; color: var(--text-dim);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; transition: all .14s;
}
.sa-btn:hover { border-color: rgba(var(--accent-rgb),.4); color: var(--accent); }
.sa-btn svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; }
.notif-badge {
  background: var(--bad); color: #fff; border-radius: 8px;
  font-size: 7.5px; font-weight: 700; padding: 1px 4px; min-width: 14px; text-align: center;
}
.sa-btn-status { gap: 6px; }
.sa-status-icon { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.8; flex-shrink: 0; }
.sa-status-text { display: flex; flex-direction: column; }
.sa-status-label { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; color: var(--text-dim); }
.sa-status-value { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.09em; color: var(--good); }
.sa-btn-globe { width: 30px; height: 30px; padding: 0; border-radius: 50%; justify-content: center; }

/* ── CANVAS ─────────────────────────────────────────────────── */
.canvas {
  flex: 1; display: flex; flex-direction: column;
  gap: 5px; padding: 6px 7px; overflow: hidden; min-height: 0;
}

/* ════════════════════════════════════════════════════════════
   KPI STRIP
   ════════════════════════════════════════════════════════════ */
.kpi-strip {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 5px; height: 96px; flex-shrink: 0;
}
.kpi-tile {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 9px 11px 6px;
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden; position: relative;
}
.kpi-head { display: flex; align-items: center; }
.kpi-label { font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase; }
.kpi-row { display: flex; align-items: baseline; gap: 5px; }
.kpi-number { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--text); line-height: 1; }
.kpi-delta { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--good); }
.kpi-delta.down { color: var(--bad); }
.kpi-spark { flex: 1; width: 100%; min-height: 14px; }
.kpi-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.kpi-spark-fill { opacity: .35; }
.kpi-compare { font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); white-space: nowrap; }
.kpi-tile-donut .kpi-donut-grid {
  display: grid; grid-template-columns: auto auto 1fr;
  gap: 5px; align-items: center; flex: 1; min-height: 0;
}
.kpi-donut-num { display: flex; flex-direction: column; gap: 2px; }
.kpi-donut-svg { width: 46px; height: 46px; }
.kpi-donut-legend { display: flex; flex-direction: column; gap: 3px; }
.kpi-donut-legend li { display: flex; align-items: center; gap: 4px; }
.lg-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.lg-lab { font-family: var(--mono); font-size: 7.5px; color: var(--text-dim); letter-spacing: 0.06em; flex: 1; }
.lg-val { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--text); }

/* ── OpenAI Ads tile (KPI strip, 7th) — 2x2 mini-stat grid (2026-06-01) ── */
.kpi-tile-ads .kpi-ads-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px;
  flex: 1; min-height: 0; align-content: center; margin-top: 1px;
}
.kpi-ads-stat { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.kpi-ads-val { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.1; }
.kpi-ads-lab { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }

/* ── Roadmap / Punch List panel (calendar-col) (2026-06-01) ── */
.side-roadmap { margin-top: 8px; display: flex; flex-direction: column; min-height: 0; }
.roadmap-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; max-height: 132px; }
.roadmap-row { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: start; padding: 3px 0; border-bottom: 1px solid var(--border2); }
.roadmap-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.roadmap-title { font-family: var(--mono); font-size: 8px; color: var(--text-dim); line-height: 1.25; }
.roadmap-note { font-family: var(--mono); font-size: 6.5px; color: var(--text-muted); letter-spacing: 0.04em; }
.roadmap-empty { font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); padding: 4px 0; }
.roadmap-badge {
  font-family: var(--mono); font-size: 6px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 5px; border-radius: 4px; white-space: nowrap; text-transform: uppercase;
  border: 1px solid var(--border); margin-top: 1px;
}
.roadmap-badge-live        { color: var(--good); border-color: rgba(var(--good-rgb),.4); background: rgba(var(--good-rgb),.08); }
.roadmap-badge-in_progress { color: var(--warn); border-color: rgba(255,182,72,.4); background: rgba(255,182,72,.08); }
.roadmap-badge-planned     { color: var(--accent); border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.08); }
.roadmap-badge-blocked     { color: var(--bad); border-color: rgba(255,91,58,.4); background: rgba(255,91,58,.08); }

/* ════════════════════════════════════════════════════════════
   MIDDLE ROW
   ════════════════════════════════════════════════════════════ */
.middle-row {
  flex: 1; display: grid;
  grid-template-columns: 244px 1fr 240px;
  gap: 5px; min-height: 0;
}

/* Panel header shared */
.panel-h {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.panel-h-lab {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; flex: 1;
}
.panel-h-real, .panel-h-meta { font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); letter-spacing: 0.09em; }
.panel-h-link { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.09em; color: var(--accent); }
.panel-h-link-green { color: var(--good); }

/* Alerts */
.alerts-col {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 10px 11px;
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.alerts-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.15) transparent; }
.alert-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 6px; padding: 5px 0;
  border-bottom: 1px solid var(--border2); align-items: flex-start;
}
.alert-ic { font-size: 12px; line-height: 1.4; }
.alert-body { min-width: 0; }
.alert-title { font-family: var(--mono); font-size: 9px; color: var(--text); line-height: 1.3; }
.alert-meta { font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); }
.alert-time { font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); white-space: nowrap; }
.alert-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 0; }
.alert-empty-ic { font-size: 18px; opacity: .4; }
.alert-empty-msg { font-family: var(--mono); font-size: 8.5px; color: var(--text-muted); text-align: center; }
.alerts-view-all {
  margin-top: 7px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.13em;
  color: var(--accent); background: rgba(var(--accent-rgb),.08);
  border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 4px;
  padding: 5px 9px; text-transform: uppercase; flex-shrink: 0;
}

/* Globe hero */
.hud-hero.earth-hero {
  background: radial-gradient(ellipse at 50% 50%, #0e2244 0%, #080c14 75%);
  border: 1px solid var(--border); border-radius: var(--rad);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* ── CLAW3D VIRTUAL OFFICE EMBED (2026-06-09) ───────────────────────
   iframe fills the tile as background layer (z:2 — above earth-stage z:1).
   Overlay HUD elements (.eh-stat, .eh-label, .eh-voice-mount) float at z:8-10.
   pointer-events:none on overlays lets clicks reach the 3D office.
   Fallback: .claw3d-offline on #hud-hero hides iframe, reveals globe animation.
   Light + dark themes: iframe is transparent to background; both themes work.
   NOTE: virtualoffice.reoshq.com needs `frame-ancestors` CSP header — see
   Scheduled/outputs/claw3d_atlas_embed_2026-06-09.md for the Caddy directive.
   ──────────────────────────────────────────────────────────────────── */
.claw3d-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
  z-index: 2;           /* above .earth-stage (z:1), below .eh-stat (z:10) */
  pointer-events: auto; /* Claw3D receives mouse/touch input */
  border-radius: inherit; /* match tile border-radius */
}

/* Fallback: hide iframe, reveal existing earth animation */
.hud-hero.claw3d-offline .claw3d-frame { display: none !important; }

/* Overlay elements: pass clicks through to iframe beneath */
.hud-hero .eh-stat,
.hud-hero .eh-label,
.hud-hero .eh-voice-mount { pointer-events: none; }

/* Light theme: keep existing override — iframe is transparent to bg */
:root[data-theme="light"] .hud-hero.earth-hero .claw3d-frame { opacity: 1; }

.eh-stat { position: absolute; z-index: 10; }
.eh-stat-tl { top: 14px; left: 16px; }
.eh-stat-tr { top: 14px; right: 16px; text-align: right; }
.eh-stat-bl { bottom: 14px; left: 16px; }
.eh-stat-br { bottom: 14px; right: 16px; text-align: right; }
.ehs-lab { display: block; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.16em; color: var(--text-muted); text-transform: uppercase; }
.ehs-val { display: block; font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--text); line-height: 1; }
.ehs-val-cyan { color: var(--good); }
.ehs-sub { display: block; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; }
.earth-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.eh-earth {
  width: 52%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(ellipse at 30% 30%, #1e4a90 0%, #0a2560 35%, #050f2a 75%);
  box-shadow: inset -18px -18px 36px rgba(0,0,0,.8), inset 10px 10px 32px rgba(0,80,200,.25), 0 0 50px rgba(0,80,200,.35), 0 0 100px rgba(0,40,150,.18);
  flex-shrink: 0;
}
.eh-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb),.16);
  top: 50%; left: 50%;
}
.eh-ring-r1 { width: 60%; height: 60%; transform: translate(-50%,-50%); animation: ring-spin 20s linear infinite; }
.eh-ring-r2 { width: 72%; height: 40%; transform: translate(-50%,-50%) rotateX(70deg); animation: ring-spin 16s linear infinite reverse; }
.eh-ring-r3 { width: 84%; height: 50%; transform: translate(-50%,-50%) rotateX(60deg); animation: ring-spin 24s linear infinite; }
@keyframes ring-spin { from{transform:translate(-50%,-50%) rotateZ(0deg)} to{transform:translate(-50%,-50%) rotateZ(360deg)} }
.eh-particles { position: absolute; inset: 0; pointer-events: none; }
.eh-label { position: absolute; text-align: center; z-index: 10; pointer-events: none; }
.eh-title {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: 0.2em; color: var(--accent);
  text-shadow: 0 0 28px rgba(var(--accent-rgb),.65); margin: 0 0 2px;
}
.eh-subtitle { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; margin: 0 0 6px; }
.eh-sync { display: flex; align-items: center; gap: 5px; justify-content: center; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.12em; color: var(--good); }
.eh-sync-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--good); animation: blink 1.3s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.eh-voice-mount { position: absolute; z-index: 8; }
.orb-wrap { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.orb-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),.2); animation: orb-expand 2.5s ease-out infinite; }
.orb-ring.r2 { inset: -6px; animation-delay: .6s; }
.orb-ring.r3 { inset: -12px; animation-delay: 1.2s; }
.orb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(var(--accent-rgb),.5), rgba(var(--accent-rgb),.1)); border: 1px solid rgba(var(--accent-rgb),.4); cursor: pointer; }
@keyframes orb-expand { 0%{opacity:.8;transform:scale(1)} 100%{opacity:0;transform:scale(1.5)} }
.constellation, .hero-org-badge, .hero-settings-btn, .dock-transcript, .cn-core, .cn-node, .cn-lines { display: none !important; }

/* Calendar column */
.calendar-col {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 10px 11px;
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.cal-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.12) transparent; }
.cal-row { display: flex; align-items: flex-start; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--border2); }
.cal-time { font-family: var(--mono); font-size: 8.5px; color: var(--accent); width: 44px; flex-shrink: 0; padding-top: 2px; }
.cal-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 7px; font-weight: 700; color: #fff; flex-shrink: 0; }
.cal-body { flex: 1; min-width: 0; }
.cal-title { display: block; font-family: var(--mono); font-size: 9px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-meta { display: block; font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); }
.cal-empty { display: flex; gap: 6px; align-items: center; padding: 12px 0; }
.cal-empty-ic { opacity: .4; }
.cal-empty-msg { font-family: var(--mono); font-size: 8.5px; color: var(--text-muted); }
.side-integ { flex-shrink: 0; border-top: 1px solid var(--border); margin-top: 7px; padding-top: 7px; }
.side-integ .panel-h { margin-bottom: 5px; padding-bottom: 5px; }
.side-integ .panel-h-lab { font-size: 7.5px; }
.integ-list { display: flex; flex-direction: column; gap: 3px; }
.integ-list li { display: flex; align-items: center; gap: 6px; }
.integ-ic { width: 16px; height: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; flex-shrink: 0; }
.integ-ic-cyan{background:#00acc1} .integ-ic-purple{background:#7c4dff} .integ-ic-blue{background:#4285f4}
.integ-ic-red{background:#ea4335} .integ-ic-green{background:#34a853} .integ-ic-pink{background:#e91e63}
.integ-ic-amber{background:#ff8f00} .integ-ic-orange{background:#ff6d00}
.integ-name { font-family: var(--mono); font-size: 8px; color: var(--text); flex: 1; }
.integ-stat { font-family: var(--mono); font-size: 7.5px; color: var(--good); }
.integ-net { display: none; }
.integ-split { display: block; }

/* ════════════════════════════════════════════════════════════
   OPS ROW
   ════════════════════════════════════════════════════════════ */
.ops-row {
  display: grid; grid-template-columns: 210px 1fr 195px;
  gap: 5px; height: 164px; flex-shrink: 0;
}
.ops-agents-legacy { display: none !important; }

.ops-intel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 10px 11px;
  display: flex; flex-direction: column; overflow: hidden;
}
.intel-tag { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; flex-shrink: 0; }
.intel-spark { color: var(--accent); font-size: 11px; }
.intel-tag-lab { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; color: var(--accent); }
.intel-body { font-family: var(--mono); font-size: 9px; color: var(--text); line-height: 1.5; flex: 1; }
.intel-btn {
  margin-top: 7px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.13em;
  color: var(--accent); background: rgba(var(--accent-rgb),.08);
  border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 4px;
  padding: 4px 8px; text-transform: uppercase; flex-shrink: 0;
}

.ops-agents.agents-grid {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 9px 11px;
  display: flex; flex-direction: column; overflow: hidden;
}
.agents-cards {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 5px; flex: 1; min-height: 0;
}
.agent-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 3px 5px; gap: 2px;
  background: rgba(var(--accent-rgb),.04);
  border: 1px solid rgba(var(--accent-rgb),.12);
  border-radius: 7px; overflow: hidden; transition: all .18s;
}
.agent-card:hover { background: rgba(var(--accent-rgb),.1); border-color: rgba(var(--accent-rgb),.28); }
.agent-icon-wrap { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(var(--accent-rgb),.22); background: rgba(var(--accent-rgb),.1); flex-shrink: 0; }
.agent-img { width: 100%; height: 100%; object-fit: cover; }
.agent-name { font-family: var(--mono); font-size: 7.5px; font-weight: 700; letter-spacing: 0.07em; color: var(--text); text-align: center; text-transform: uppercase; line-height: 1.1; }
.agent-name-2 { color: var(--accent); }
.agent-role { font-family: var(--mono); font-size: 6.5px; color: var(--text-muted); text-align: center; }
.agent-tasks { font-family: var(--mono); font-size: 7.5px; color: var(--text-dim); }
.agent-tasks-num { color: var(--accent); font-weight: 700; }
.agent-base { display: none; }
.agents-foot {
  display: flex; align-items: center; gap: 7px;
  padding-top: 5px; border-top: 1px solid var(--border2);
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.09em; color: var(--text-dim);
  flex-shrink: 0;
}
.af-dot { width: 5px; height: 5px; border-radius: 50%; }
.af-dot-green { background: var(--good); box-shadow: 0 0 5px var(--good); }
.agents-manage { margin-left: auto; color: var(--accent); }

.ops-integrations {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 10px 11px;
  display: flex; flex-direction: column; overflow: hidden;
}
.ops-integrations .integ-list { flex: 1; overflow-y: auto; gap: 4px; }
.ops-integrations .integ-ic { width: 18px; height: 18px; font-size: 9px; }
.ops-integrations .integ-name { font-size: 8.5px; }

/* ════════════════════════════════════════════════════════════
   BOTTOM ROW
   ════════════════════════════════════════════════════════════ */
.bottom-row {
  display: grid;
  grid-template-columns: 174px minmax(160px, 1fr) 148px 152px 196px 176px;
  gap: 5px; height: 174px; flex-shrink: 0;
}
.bp-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 9px 11px;
  display: flex; flex-direction: column; overflow: hidden;
}

/* Tasks overview */
.bp-tasks-content { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: center; flex: 1; min-height: 0; }
.bp-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bp-donut-svg { width: 64px; height: 64px; }
.bp-donut-total { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); text-align: center; line-height: 1; }
.bp-donut-sub { font-family: var(--mono); font-size: 6.5px; color: var(--text-muted); text-align: center; letter-spacing: 0.09em; }
.bp-task-list { display: flex; flex-direction: column; gap: 4px; }
.bp-task-list li { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 8px; }
.bp-task-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.bp-task-lab { flex: 1; color: var(--text-dim); }
.bp-task-val { color: var(--text); font-weight: 600; }
.bp-view-all {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.11em;
  color: var(--accent); background: rgba(var(--accent-rgb),.08);
  border: 1px solid rgba(var(--accent-rgb),.2); border-radius: 4px;
  padding: 4px 7px; text-transform: uppercase; margin-top: 5px; flex-shrink: 0;
}

/* Pipeline */
.bp-pipeline .pipeline-stages {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 4px; flex: 1; min-height: 0;
}
.pp-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 5px 3px; background: rgba(255,255,255,.025); border-radius: 4px;
  border-bottom: 2px solid var(--st, var(--accent));
}
.pp-lab { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.09em; color: var(--text-muted); text-align: center; text-transform: uppercase; line-height: 1.2; }
.pp-num { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--st, var(--accent)); }
.pp-val { font-family: var(--mono); font-size: 7px; color: var(--text-dim); }
.pipeline-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-top: 1px solid var(--border); padding-top: 5px; flex-shrink: 0; margin-top: 4px; }
.pps-lab { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.09em; color: var(--text-muted); text-transform: uppercase; }
.pps-row { display: flex; align-items: baseline; gap: 4px; }
.pps-val { font-family: var(--display); font-size: 13px; font-weight: 700; }
.pps-val-cyan{color:var(--accent)} .pps-val-green{color:var(--good)}
.pps-delta { font-family: var(--mono); font-size: 8px; color: var(--good); }
.pps-meta { font-family: var(--mono); font-size: 6.5px; color: var(--text-muted); }

/* Deals / Team shared table */
.bp-table { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.1) transparent; }
.bp-tr { display: grid; gap: 5px; padding: 4px 0; border-bottom: 1px solid var(--border2); align-items: center; }
.bp-tr-deals { grid-template-columns: 1fr auto auto; }
.bp-tr-team  { grid-template-columns: auto 1fr auto auto; }
.bp-td-main { font-family: var(--mono); font-size: 8.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-td-sub  { font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); text-align: right; white-space: nowrap; }
.bp-td-val  { font-family: var(--mono); font-size: 8px; color: var(--good); font-weight: 600; text-align: right; white-space: nowrap; }
.bp-td-avatar { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 7px; font-weight: 700; color: #fff; flex-shrink: 0; }

/* Goals */
.goals-list { display: flex; flex-direction: column; gap: 9px; flex: 1; overflow: hidden; }
.goal-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 3px; }
.goal-lab { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.09em; color: var(--text-dim); text-transform: uppercase; }
.goal-num { font-family: var(--mono); font-size: 7.5px; color: var(--text-dim); }
.goal-tot { color: var(--text-muted); }
.goal-bar { height: 5px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; margin-bottom: 2px; }
.goal-bar-fill { height: 100%; border-radius: 3px; transition: width .8s ease; }
.goal-pct { font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); text-align: right; }

/* Period toggle */
.period-toggle { display: flex; gap: 3px; padding: 4px 0 6px; }
.pt-btn { flex: 1; padding: 3px 0; border: 1px solid rgba(255,255,255,.1); background: transparent; border-radius: 3px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--text-dim); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s; }
.pt-btn:hover { background: rgba(255,255,255,.06); color: var(--text-base); }
.pt-btn.active { background: rgba(0,210,255,.15); border-color: rgba(0,210,255,.5); color: #00d2ff; }
[data-theme="light"] .pt-btn { border-color: rgba(0,0,0,.12); color: var(--text-dim); }
[data-theme="light"] .pt-btn.active { background: rgba(0,140,200,.12); border-color: #008cc8; color: #0070a8; }

/* Under-contract deal list (pipeline inline) */
.uc-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 3px; }

/* Deals Under Contract dedicated panel */
.bp-uc-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.15) transparent; }
.bp-uc-item { display: flex; flex-direction: column; gap: 2px; padding: 5px 7px;
  background: rgba(58,255,173,.06); border-left: 2px solid #3affad; border-radius: 2px; }
.bp-uc-addr { font-family: var(--mono); font-size: 8.5px; color: var(--text-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-uc-meta { font-family: var(--mono); font-size: 7px; color: var(--text-muted); }
.bp-uc-empty { font-family: var(--mono); font-size: 8.5px; color: var(--text-muted); padding: 8px 6px; text-align: center; }
[data-theme="light"] .bp-uc-item { background: rgba(0,160,100,.07); border-left-color: #00a064; }
.uc-deal { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px;
  background: rgba(58,255,173,.06); border-left: 2px solid #3affad; border-radius: 2px; }
.uc-name { font-family: var(--mono); font-size: 8.5px; color: var(--text-base); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.uc-date { font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); flex-shrink: 0; }
.uc-empty { font-family: var(--mono); font-size: 8px; color: var(--text-muted); padding: 4px 6px; }
[data-theme="light"] .uc-deal { background: rgba(0,160,100,.07); border-left-color: #00a064; }

/* ════════════════════════════════════════════════════════════
   QUICK ACTIONS FOOTER
   ════════════════════════════════════════════════════════════ */
.quick-bar {
  height: 60px; flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  background: var(--bg2); border-top: 1px solid var(--border);
}
.qb-label {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.12em;
  color: var(--text-muted); text-transform: uppercase; line-height: 1.4;
  flex-shrink: 0; padding-right: 6px; border-right: 1px solid var(--border);
}
.qb-actions { display: flex; align-items: center; gap: 3px; }
.qb-actions-left, .qb-actions-right { display: flex; align-items: center; gap: 3px; }
.qb-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 8px; min-width: 50px;
  background: transparent; border: 1px solid rgba(var(--accent-rgb),.14);
  border-radius: 5px; color: var(--text-dim); transition: all .13s;
}
.qb-btn:hover { border-color: rgba(var(--accent-rgb),.36); color: var(--accent); }
.qb-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.qb-btn span { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; }
.qb-voice-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 10px; }
.qbvc-title { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.13em; color: var(--accent); text-transform: uppercase; }
.qbvc-wave-row { display: flex; align-items: center; gap: 7px; }
.qbvc-wave-side { width: 55px; height: 12px; opacity: .55; }
.qb-voice-btn-big {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.14), transparent);
  border: 1px solid rgba(var(--accent-rgb),.3);
  display: flex; align-items: center; justify-content: center;
}
.qb-voice-btn-big svg { width: 13px; height: 13px; color: var(--accent); stroke: currentColor; fill: none; stroke-width: 1.8; }
.qbv-ring { position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),.18); animation: ring-expand 2.2s ease-out infinite; }
.qbv-ring-2 { inset: -10px; animation-delay: .5s; }
@keyframes ring-expand { 0%{opacity:.8;transform:scale(1)} 100%{opacity:0;transform:scale(1.4)} }
.qbvc-prompt { font-family: var(--mono); font-size: 7px; color: var(--text-muted); letter-spacing: 0.07em; }
.qb-sync-block { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; padding: 0 8px; }
.qbs-lab { font-family: var(--mono); font-size: 7px; letter-spacing: 0.11em; color: var(--text-muted); text-transform: uppercase; }
.qbs-stat { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 8px; color: var(--good); }
.qbs-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--good); animation: blink 1.3s ease-in-out infinite; }
.qbs-map { width: 48px; height: 16px; opacity: .5; }
.qb-voice, .h-left, .h-center, .h-right { display: none !important; }

/* ════════════════════════════════════════════════════════════
   STATES / FOCUS / MODALS
   ════════════════════════════════════════════════════════════ */
.focus { outline: 1px solid rgba(var(--accent-rgb),.45); outline-offset: 1px; }
.activating { animation: act-pulse .22s ease-out; }
@keyframes act-pulse { from{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)} to{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)} }
.corner-tr, .corner-bl { position: absolute; width: 10px; height: 10px; border: 1px solid var(--accent); opacity: .5; }
.corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }

#login-modal, #agent-modal, #shortcuts-overlay {
  position: fixed; inset: 0;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); backdrop-filter: blur(5px); z-index: 1000;
}
/* Gated by the .visible class app.js add/removes. Previously this was an
   unconditional `display:flex`, so #agent-modal rendered open on load and
   closeAgentModal() (which only drops .visible) couldn't hide it. !important
   keeps the class contract authoritative over any stale inline display:none
   left by the legacy ESC/login failsafe handlers. */
#login-modal.visible, #agent-modal.visible, #shortcuts-overlay.visible { display: flex !important; }
#login-modal:not(.visible), #agent-modal:not(.visible), #shortcuts-overlay:not(.visible) { display: none !important; }
.login-card, .agent-modal-card, .shortcuts-card {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 28px 32px; min-width: 340px;
}
.login-card h3, .shortcuts-card h3 { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 8px; }
.login-sub { font-family: var(--mono); font-size: 9px; color: var(--text-dim); margin-bottom: 18px; }
.login-grid { display: flex; flex-direction: column; gap: 8px; }
.login-btn { background: rgba(var(--accent-rgb),.06); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; text-align: left; cursor: pointer; transition: all .14s; }
.login-btn:hover { border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.12); }
.lb-name { font-family: var(--display); font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: 0.09em; }
.lb-email { font-family: var(--mono); font-size: 8.5px; color: var(--text-dim); }
.lb-access { font-family: var(--mono); font-size: 8px; color: var(--accent); margin-top: 2px; }
.login-foot { font-family: var(--mono); font-size: 8px; color: var(--text-muted); margin-top: 14px; text-align: center; }
.agent-modal-card { min-width: 300px; max-width: 420px; position: relative; }
.am-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.am-icon { font-size: 22px; }
.am-name { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); }
.am-desc { font-family: var(--mono); font-size: 9.5px; color: var(--text); line-height: 1.6; }
.am-foot { font-family: var(--mono); font-size: 8px; color: var(--text-muted); margin-top: 12px; text-align: center; padding-top: 10px; border-top: 1px solid var(--border); }
.am-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 18px; color: var(--text-dim); cursor: pointer; }
.sc-grid { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.sc-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border2); }
.sc-row .label { font-family: var(--mono); font-size: 9px; color: var(--text-dim); }
.sc-row .keys { display: flex; gap: 4px; }
kbd { font-family: var(--mono); font-size: 9px; background: var(--panel); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; color: var(--accent); }
.sc-hint { font-family: var(--mono); font-size: 8px; color: var(--text-muted); text-align: center; }
/* Keep the shortcuts card inside the viewport on short/narrow screens — the
   card scrolls internally (allowed for inner panels); the outer 1080 frame
   never does. min-width collapses on phones so it can't overflow the width. */
.shortcuts-card { max-height: 86vh; overflow-y: auto; }
@media (max-width: 600px) { .shortcuts-card { min-width: 0; width: calc(100vw - 32px); padding: 22px 20px; } }

/* ════════════════════════════════════════════════════════════
   UTILITY
   ════════════════════════════════════════════════════════════ */
.tag { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; padding: 2px 5px; border-radius: 3px; }
.tag.live { background: rgba(var(--good-rgb),.15); color: var(--good); border: 1px solid rgba(var(--good-rgb),.3); }
.tag.stub { background: rgba(255,184,72,.12); color: var(--warn); border: 1px solid rgba(255,184,72,.25); }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot.good{background:var(--good)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.empty { font-family: var(--mono); font-size: 9px; color: var(--text-muted); padding: 8px 0; }
.check { color: var(--good); margin-left: 5px; }
.err { font-family: var(--mono); font-size: 9px; color: var(--bad); padding: 4px 0; }
.section-h { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; color: var(--text-muted); text-transform: uppercase; padding: 6px 0 3px; }
.cta { font-family: var(--mono); font-size: 8.5px; color: var(--accent); }
.row { display: flex; align-items: center; gap: 7px; padding: 4px 0; border-bottom: 1px solid var(--border2); font-family: var(--mono); font-size: 9px; color: var(--text); }
.meta { font-family: var(--mono); font-size: 7.5px; color: var(--text-muted); }
.task-row.done { opacity: .45; text-decoration: line-through; }
.task-checkbox { cursor: pointer; }
.quick-add-task { padding-top: 6px; }
.quick-add-input { width: 100%; background: rgba(var(--accent-rgb),.05); border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px; font-family: var(--mono); font-size: 9px; color: var(--text); }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.2); border-radius: 2px; }
.body { display: none; }

/* ── NORTH STAR PATCH v60 — class aliases for new HTML ──────── */
.sa-badge { background: var(--bad); color: #fff; border-radius: 8px; font-size: 7.5px; font-weight: 700; padding: 1px 4px; min-width: 14px; text-align: center; }
.sa-status { gap: 6px; }
.sa-status-stack { display: flex; flex-direction: column; gap: 1px; }
.sa-globe { width: 30px; height: 30px; padding: 0; border-radius: 50%; justify-content: center; }

/* Table header rows */
.bp-tr-head { border-bottom: 1px solid rgba(var(--accent-rgb),.2) !important; padding-bottom: 3px !important; margin-bottom: 2px; }
.bp-tr-head span { font-family: var(--mono); font-size: 7px; letter-spacing: 0.09em; color: var(--text-muted); text-transform: uppercase; }

/* Deals table cell classes */
.bp-td-addr { font-family: var(--mono); font-size: 8px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-td-date { font-family: var(--mono); font-size: 7.5px; color: var(--text-dim); text-align: right; white-space: nowrap; }
.bp-td-price { font-family: var(--mono); font-size: 8px; color: var(--good); font-weight: 600; text-align: right; white-space: nowrap; }

/* Team avatar classes */
.bp-avatar { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 8px; font-weight: 700; color: #fff; flex-shrink: 0; }
.bp-av-1 { background: rgba(var(--accent-rgb),.35); }
.bp-av-2 { background: rgba(156,92,255,.35); }
.bp-tr-team span:not(.bp-avatar) { font-family: var(--mono); font-size: 8px; color: var(--text-dim); }
.bp-tr-team b, .bp-tr-team span:nth-child(3), .bp-tr-team span:nth-child(4) { font-family: var(--mono); font-size: 8px; color: var(--text); font-weight: 600; text-align: right; }

/* bp-task-list inline text */
.bp-task-list li span:not(.lg-dot) { font-family: var(--mono); font-size: 8px; color: var(--text-dim); flex: 1; }
.bp-task-list li b { font-family: var(--mono); font-size: 8px; color: var(--text); font-weight: 600; margin-left: auto; }
#panel-health, #panel-quickactions, #panel-user, #panel-showings { display: none !important; }
/* panel-tasks is now the visible Tasks Overview card — un-hide it */
article#panel-tasks.bp-card.bp-tasks { display: flex !important; }

:root[data-theme="light"] .sb-time { text-shadow: none; }
:root[data-theme="light"] .greeting-headline { text-shadow: none; color: #0050a0; }
:root[data-theme="light"] .hud-hero.earth-hero { background: radial-gradient(ellipse at 50% 50%, #cce0ff 0%, #e8f0fb 75%); }

/* ════════════════════════════════════════════════════════════
   NORTH STAR VISUAL OVERHAUL — v61
   ════════════════════════════════════════════════════════════ */

/* ── 1. HEADER: absolute-center the greeting ──────────────── */
header#statusbar.statusbar { position: relative !important; }
.status-center {
  position: absolute !important; left: 50%; top: 50%;
  transform: translate(-50%,-50%) !important;
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none; width: max-content;
}
.greeting-headline {
  font-size: 22px !important; letter-spacing: 0.28em !important;
  text-shadow: 0 0 30px rgba(var(--accent-rgb),.7), 0 0 60px rgba(var(--accent-rgb),.3) !important;
}
.greeting-subline { font-size: 9px !important; letter-spacing: 0.2em !important; }

/* SA status button: tighter, show green value clearly */
.sa-status { padding: 0 10px !important; gap: 5px !important; }
.sa-status-label { display: block; font-size: 7px !important; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase; }
.sa-status-value { display: block; font-size: 8px !important; color: var(--good) !important; letter-spacing: 0.1em; font-weight: 600; }
.sa-badge { background: var(--bad); color:#fff; border-radius: 9px; font-size: 7px; font-weight: 700; padding: 1px 4px; min-width: 14px; text-align: center; }

/* ── 2. SIDEBAR: N-logo box style ─────────────────────────── */
.sb-logo {
  width: 34px !important; height: 34px !important; border-radius: 8px !important;
  background: rgba(var(--accent-rgb),.15) !important;
  border: 1.5px solid rgba(var(--accent-rgb),.45) !important;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.35) !important;
  display: flex !important; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 18px; font-weight: 700;
  color: var(--accent) !important; flex-shrink: 0;
}
.sb-logo::after { content: 'N'; }
.sb-org { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; }
.sb-sub { font-size: 7.5px !important; letter-spacing: 0.16em !important; }

/* ── 3. GLOBE: fix ring animations + brighter orb ─────────── */
.eh-earth {
  width: 58% !important;
  background: radial-gradient(ellipse at 32% 28%,#3a78e8 0%,#1850d0 18%,#0a2860 48%,#040d20 80%) !important;
  box-shadow:
    inset -24px -24px 48px rgba(0,0,0,.92),
    inset 14px 14px 44px rgba(40,110,240,.55),
    0 0 80px rgba(0,100,240,.75),
    0 0 150px rgba(0,60,200,.45),
    0 0 260px rgba(0,40,160,.2) !important;
}
.eh-ring {
  border-width: 1.5px !important;
  border-color: rgba(var(--accent-rgb),.5) !important;
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.3), inset 0 0 10px rgba(var(--accent-rgb),.08) !important;
}
.eh-ring-r1 {
  width: 70% !important; height: 70% !important;
  border-color: rgba(var(--accent-rgb),.65) !important;
  animation: ns-ring-flat 18s linear infinite !important;
}
.eh-ring-r2 {
  width: 84% !important; height: 42% !important;
  animation: ns-ring-tilt70 14s linear infinite reverse !important;
}
.eh-ring-r3 {
  width: 98% !important; height: 54% !important;
  border-color: rgba(var(--accent-rgb),.3) !important;
  animation: ns-ring-tilt55 22s linear infinite !important;
}
@keyframes ns-ring-flat {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes ns-ring-tilt70 {
  from { transform: translate(-50%,-50%) rotateX(72deg) rotateZ(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(72deg) rotateZ(360deg); }
}
@keyframes ns-ring-tilt55 {
  from { transform: translate(-50%,-50%) rotateX(58deg) rotateZ(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(58deg) rotateZ(360deg); }
}
.ehs-val { font-size: 30px !important; }
.eh-title { font-size: 20px !important; letter-spacing: 0.25em !important; }

/* ── 4. AGENT CARDS: glowing base + icon glow ─────────────── */
.agent-base {
  display: block !important;
  height: 2px; width: 80%; margin-top: auto; flex-shrink: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.9), 0 0 24px rgba(var(--accent-rgb),.4) !important;
  border-radius: 1px; opacity: .85;
}
.agent-icon-wrap {
  border: 1.5px solid rgba(var(--accent-rgb),.45) !important;
  box-shadow: 0 0 16px rgba(var(--accent-rgb),.4), inset 0 0 10px rgba(var(--accent-rgb),.12) !important;
  width: 42px !important; height: 42px !important;
}
.agent-card {
  border-color: rgba(var(--accent-rgb),.2) !important;
  box-shadow: inset 0 -10px 20px rgba(var(--accent-rgb),.07), 0 0 0 0 transparent !important;
}

/* ── 5. ALERTS: colored left-border card style ─────────────── */
.alerts-list { gap: 5px !important; }
.alert-item {
  border-radius: 5px;
  border: 1px solid var(--border2);
  border-left: 3px solid var(--accent) !important;
  padding: 6px 8px;
  background: rgba(255,255,255,.025);
  display: flex; flex-direction: column; gap: 2px;
}
.alert-item.high, .alert-item[data-severity="high"] { border-left-color: var(--bad) !important; }
.alert-item.med, .alert-item[data-severity="medium"] { border-left-color: var(--warn) !important; }
.alert-item.low, .alert-item[data-severity="low"] { border-left-color: var(--good) !important; }

/* ── 6. FOOTER: show QUICK ACTIONS label, bigger voice center ── */
.qb-label {
  display: flex !important; flex-direction: column; align-items: center;
  gap: 1px; padding-right: 8px; border-right: 1px solid var(--border);
  font-size: 7.5px !important; letter-spacing: 0.13em !important;
  color: var(--text-dim) !important; white-space: nowrap;
}
.qb-voice-btn-big {
  width: 40px !important; height: 40px !important;
  box-shadow: 0 0 20px rgba(var(--accent-rgb),.5), 0 0 40px rgba(var(--accent-rgb),.2) !important;
}
.qb-voice-btn-big svg { width: 16px !important; height: 16px !important; }
.qbvc-wave-side { width: 75px !important; height: 18px !important; opacity: .65 !important; }
.qbvc-title { font-size: 8px !important; letter-spacing: 0.18em !important; }
.qbvc-prompt { font-size: 7.5px !important; color: var(--text-dim) !important; }
.qb-btn { min-width: 60px !important; }
.qb-btn svg { width: 14px !important; height: 14px !important; }
.qb-btn span { font-size: 7px !important; }

/* ════════════════════════════════════════════════════════════
   NORTH STAR ROUND 2 — v61 DETAIL PASS
   ════════════════════════════════════════════════════════════ */

/* KPI: bigger dominant numbers */
.kpi-number { font-size: 27px !important; line-height: 1 !important; }
.kpi-tile { padding: 8px 10px 4px !important; }
.kpi-label { font-size: 7.5px !important; letter-spacing: 0.14em !important; }
.kpi-delta { font-size: 9.5px !important; }
.kpi-compare { font-size: 7px !important; }

/* Earth/Globe: perspective + brighter rings */
.earth-stage { perspective: 900px !important; }
.eh-ring { transform-style: preserve-3d; }
.eh-earth {
  box-shadow:
    inset -26px -26px 52px rgba(0,0,0,.95),
    inset 16px 16px 48px rgba(50,130,255,.6),
    0 0 90px rgba(0,110,255,.85),
    0 0 180px rgba(0,70,220,.5),
    0 0 300px rgba(0,40,160,.22) !important;
}

/* Ops row: 2-col (intel + agents, no integrations) */
.ops-row { grid-template-columns: 200px 1fr !important; }
.ops-integrations { display: none !important; }

/* Agent cards: per-agent signature colors */
.agent-card[data-agent="listings"]    .agent-icon-wrap { border-color:#9c5cff !important; box-shadow:0 0 18px rgba(156,92,255,.65),inset 0 0 10px rgba(156,92,255,.15) !important; }
.agent-card[data-agent="listings"]    .agent-base { background:linear-gradient(90deg,transparent,#9c5cff,transparent) !important; box-shadow:0 0 14px rgba(156,92,255,1) !important; }
.agent-card[data-agent="transactions"].agent-icon-wrap { border-color:#00e5ff !important; box-shadow:0 0 18px rgba(0,229,255,.65),inset 0 0 10px rgba(0,229,255,.15) !important; }
.agent-card[data-agent="transactions"].agent-base { background:linear-gradient(90deg,transparent,#00e5ff,transparent) !important; box-shadow:0 0 14px rgba(0,229,255,1) !important; }
.agent-card[data-agent="sales"]       .agent-icon-wrap { border-color:#5b9eff !important; box-shadow:0 0 18px rgba(91,158,255,.65),inset 0 0 10px rgba(91,158,255,.15) !important; }
.agent-card[data-agent="sales"]       .agent-base { background:linear-gradient(90deg,transparent,#5b9eff,transparent) !important; box-shadow:0 0 14px rgba(91,158,255,1) !important; }
.agent-card[data-agent="marketing"]   .agent-icon-wrap { border-color:#ff9966 !important; box-shadow:0 0 18px rgba(255,153,102,.65),inset 0 0 10px rgba(255,153,102,.15) !important; }
.agent-card[data-agent="marketing"]   .agent-base { background:linear-gradient(90deg,transparent,#ff9966,transparent) !important; box-shadow:0 0 14px rgba(255,153,102,1) !important; }
.agent-card[data-agent="client-care"] .agent-icon-wrap { border-color:#fb7185 !important; box-shadow:0 0 18px rgba(251,113,133,.65),inset 0 0 10px rgba(251,113,133,.15) !important; }
.agent-card[data-agent="client-care"] .agent-base { background:linear-gradient(90deg,transparent,#fb7185,transparent) !important; box-shadow:0 0 14px rgba(251,113,133,1) !important; }
.agent-card[data-agent="operations"]  .agent-icon-wrap { border-color:#3affad !important; box-shadow:0 0 18px rgba(58,255,173,.65),inset 0 0 10px rgba(58,255,173,.15) !important; }
.agent-card[data-agent="operations"]  .agent-base { background:linear-gradient(90deg,transparent,#3affad,transparent) !important; box-shadow:0 0 14px rgba(58,255,173,1) !important; }

/* Agent card: make portrait fill card top */
.agent-icon-wrap { width: 46px !important; height: 46px !important; border-radius: 50% !important; }
.agent-name { font-size: 8px !important; letter-spacing: 0.09em !important; }
.agent-role { font-size: 7px !important; }
.agent-tasks { font-size: 8px !important; }

/* Tasks donut: constrain SVG by targeting the element directly (app.js adds no class) */
.bp-donut-wrap {
  position: relative !important; width: 76px !important; height: 76px !important;
  flex-shrink: 0 !important; overflow: hidden !important;
}
.bp-donut-wrap svg,
.bp-donut-svg {
  width: 76px !important; height: 76px !important;
  position: absolute !important; top: 0 !important; left: 0 !important;
}
.bp-donut-total {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) !important;
  font-size: 20px !important; font-weight: 700 !important;
  text-shadow: 0 0 14px rgba(var(--accent-rgb),.6);
  pointer-events: none; z-index: 1;
}
.bp-tasks-content { grid-template-columns: 86px 1fr !important; }
.bp-task-list { gap: 5px !important; }
.bp-task-list li { gap: 5px !important; font-size: 8.5px !important; }

/* Pipeline: taller numbers */
.pp-num { font-size: 19px !important; }
.pp-lab { font-size: 7px !important; }

/* Goals: match mockup bar style */
.goal-bar { height: 6px !important; border-radius: 3px !important; }
.goal-bar-fill { transition: width 1s ease !important; }
.goal-lab { font-size: 8px !important; letter-spacing: 0.1em !important; }
.goal-num { font-size: 8px !important; }

/* Sidebar clock: larger, bolder */
.sb-time { font-size: 28px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-shadow: 0 0 16px rgba(var(--accent-rgb),.7) !important; }
.sb-ampm { font-size: 10px !important; font-weight: 600 !important; }
.sb-sec { font-size: 10px !important; color: var(--text-muted) !important; }
.sb-date-day { font-size: 11px !important; font-weight: 600 !important; }
.sb-date-dow { font-size: 8.5px !important; }

/* Sidebar user card: more prominent */
.sb-user { padding: 6px 8px !important; }
.sb-user-avatar { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: rgba(var(--accent-rgb),.18) !important; border: 1.5px solid rgba(var(--accent-rgb),.4) !important; font-size: 12px !important; }
.sb-user-name { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; }
.sb-user-role { font-size: 8px !important; }
.sb-user-pill { font-size: 7px !important; padding: 2px 6px !important; letter-spacing: 0.1em !important; }

/* Panel headers: crisper */
.panel-h-lab { font-size: 9px !important; letter-spacing: 0.17em !important; font-weight: 600 !important; }
.panel-h-link { font-size: 7.5px !important; }
.panel-h-meta { font-size: 7.5px !important; }

/* Calendar: slightly more compact rows */
.cal-title { font-size: 8.5px !important; }
.cal-meta { font-size: 7px !important; }
.cal-time { font-size: 8px !important; width: 40px !important; }

/* Integrations: right side status dots */
.integ-list-mini li { gap: 5px !important; }
.integ-stat { font-size: 7px !important; }
.integ-name { font-size: 7.5px !important; }

/* Alerts col: more compact */
.alerts-view-all { font-size: 7.5px !important; padding: 4px 8px !important; margin-top: 6px !important; }

/* Globe corner stats: bigger values */
.ehs-val { font-size: 28px !important; }
.ehs-lab { font-size: 7px !important; letter-spacing: 0.18em !important; }
.ehs-sub { font-size: 7px !important; letter-spacing: 0.14em !important; }

/* Earth label: center text larger */
.eh-title { font-size: 19px !important; letter-spacing: 0.28em !important; margin-bottom: 3px !important; }
.eh-subtitle { font-size: 8px !important; letter-spacing: 0.22em !important; margin-bottom: 8px !important; }
.eh-sync { font-size: 8px !important; letter-spacing: 0.14em !important; }

/* Bottom row: bp-card headers match mockup */
.bp-card .panel-h { border-color: rgba(var(--accent-rgb),.18) !important; }

/* SA buttons: header right side spacing */
.status-right { gap: 4px !important; }
.sa-btn { height: 32px !important; }

/* Sidebar nav: tighten spacing */
.sidebar-nav { gap: 1px !important; }
.rail-item { padding: 5px 10px !important; gap: 8px !important; }
.ri-label { font-size: 10.5px !important; letter-spacing: 0.18em !important; }
.ri-sub { font-size: 8px !important; letter-spacing: 0.12em !important; }

/* ════════════════════════════════════════════════════════════
   NORTH STAR POLISH — v66
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   NORTH STAR PREMIUM POLISH — v67
   ════════════════════════════════════════════════════════════ */

/* Widen sidebar for readable labels */
.frame { grid-template-columns: 215px 1fr !important; }

/* ── GLOBE HERO: full atmospheric treatment ──────────────── */
.hud-hero.earth-hero {
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%,
      rgba(0,80,200,.28) 0%,
      rgba(0,40,120,.18) 40%,
      transparent 75%),
    var(--bg) !important;
  position: relative;
}
.hud-hero.earth-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 52%,
    rgba(0,100,255,.12) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.earth-stage { z-index: 1; }
.eh-earth {
  box-shadow:
    inset -28px -28px 60px rgba(0,0,0,.95),
    inset 18px 18px 52px rgba(40,120,255,.65),
    0 0 120px rgba(0,120,255,.9),
    0 0 240px rgba(0,80,220,.55),
    0 0 400px rgba(0,50,180,.28) !important;
}
/* Rings — brighter, more neon */
.eh-ring {
  border-width: 2px !important;
  filter: drop-shadow(0 0 6px rgba(0,229,255,.7)) !important;
}
.eh-ring-r1 { border-color: rgba(0,229,255,.8) !important; }
.eh-ring-r2 { border-color: rgba(156,92,255,.65) !important; filter: drop-shadow(0 0 6px rgba(156,92,255,.7)) !important; }
.eh-ring-r3 { border-color: rgba(0,229,255,.45) !important; }
/* Center text: make it pop */
.eh-title {
  font-size: 22px !important; letter-spacing: 0.3em !important;
  text-shadow: 0 0 30px rgba(0,229,255,.9), 0 0 60px rgba(0,229,255,.4) !important;
}
.eh-subtitle {
  font-size: 9px !important; letter-spacing: 0.28em !important;
  color: var(--good) !important;
  text-shadow: 0 0 14px rgba(var(--good-rgb),.7) !important;
}

/* ── AGENT CARDS: premium glowing orb style ──────────────── */
/* Remove emoji hack from v66 */
.agent-icon-wrap::after { content: none !important; display: none !important; }
.agent-img { display: none !important; }

/* Base orb: holographic sphere look */
.agent-icon-wrap {
  width: 54px !important; height: 54px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 38% 32%,
    rgba(255,255,255,.25) 0%,
    rgba(100,180,255,.15) 30%,
    rgba(0,20,80,.85) 75%) !important;
}

/* Card: per-agent color tint from bottom + border glow */
.agent-card {
  padding: 10px 5px 7px !important;
  border-radius: 10px !important;
  transition: transform .18s, box-shadow .18s !important;
}
.agent-card:hover { transform: translateY(-2px) !important; }

/* Per-agent 3D sphere + card color tint */

/* LISTINGS — violet/purple */
.agent-card[data-agent="listings"] .agent-icon-wrap {
  border: 1.5px solid rgba(156,92,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(156,92,255,.15), 0 0 20px rgba(156,92,255,.7), 0 0 50px rgba(156,92,255,.3) !important;
}
.agent-card[data-agent="listings"] .agent-icon-svg {
  stroke: #9c5cff;
  filter: drop-shadow(0 0 5px #9c5cff) drop-shadow(0 0 12px rgba(156,92,255,.6));
}
.agent-card[data-agent="listings"] {
  background: linear-gradient(180deg, rgba(156,92,255,.04) 0%, rgba(156,92,255,.18) 100%) !important;
  border-color: rgba(156,92,255,.32) !important;
}

/* TRANSACTIONS — cyan */
.agent-card[data-agent="transactions"] .agent-icon-wrap {
  border: 1.5px solid rgba(0,229,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.15), 0 0 20px rgba(0,229,255,.7), 0 0 50px rgba(0,229,255,.3) !important;
}
.agent-card[data-agent="transactions"] .agent-icon-svg {
  stroke: #00e5ff;
  filter: drop-shadow(0 0 5px #00e5ff) drop-shadow(0 0 12px rgba(0,229,255,.6));
}
.agent-card[data-agent="transactions"] {
  background: linear-gradient(180deg, rgba(0,229,255,.04) 0%, rgba(0,229,255,.18) 100%) !important;
  border-color: rgba(0,229,255,.32) !important;
}

/* SALES — blue */
.agent-card[data-agent="sales"] .agent-icon-wrap {
  border: 1.5px solid rgba(91,158,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(91,158,255,.15), 0 0 20px rgba(91,158,255,.7), 0 0 50px rgba(91,158,255,.3) !important;
}
.agent-card[data-agent="sales"] .agent-icon-svg {
  stroke: #5b9eff;
  filter: drop-shadow(0 0 5px #5b9eff) drop-shadow(0 0 12px rgba(91,158,255,.6));
}
.agent-card[data-agent="sales"] {
  background: linear-gradient(180deg, rgba(91,158,255,.04) 0%, rgba(91,158,255,.18) 100%) !important;
  border-color: rgba(91,158,255,.32) !important;
}

/* MARKETING — orange */
.agent-card[data-agent="marketing"] .agent-icon-wrap {
  border: 1.5px solid rgba(255,153,102,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,153,102,.15), 0 0 20px rgba(255,153,102,.7), 0 0 50px rgba(255,153,102,.3) !important;
}
.agent-card[data-agent="marketing"] .agent-icon-svg {
  stroke: #ff9966;
  filter: drop-shadow(0 0 5px #ff9966) drop-shadow(0 0 12px rgba(255,153,102,.6));
}
.agent-card[data-agent="marketing"] {
  background: linear-gradient(180deg, rgba(255,153,102,.04) 0%, rgba(255,153,102,.18) 100%) !important;
  border-color: rgba(255,153,102,.32) !important;
}

/* CLIENT CARE — pink/rose */
.agent-card[data-agent="client-care"] .agent-icon-wrap {
  border: 1.5px solid rgba(251,113,133,.55) !important;
  box-shadow: 0 0 0 3px rgba(251,113,133,.15), 0 0 20px rgba(251,113,133,.7), 0 0 50px rgba(251,113,133,.3) !important;
}
.agent-card[data-agent="client-care"] .agent-icon-svg {
  stroke: #fb7185;
  filter: drop-shadow(0 0 5px #fb7185) drop-shadow(0 0 12px rgba(251,113,133,.6));
}
.agent-card[data-agent="client-care"] {
  background: linear-gradient(180deg, rgba(251,113,133,.04) 0%, rgba(251,113,133,.18) 100%) !important;
  border-color: rgba(251,113,133,.32) !important;
}

/* OPERATIONS — green */
.agent-card[data-agent="operations"] .agent-icon-wrap {
  border: 1.5px solid rgba(58,255,173,.55) !important;
  box-shadow: 0 0 0 3px rgba(58,255,173,.15), 0 0 20px rgba(58,255,173,.7), 0 0 50px rgba(58,255,173,.3) !important;
}
.agent-card[data-agent="operations"] .agent-icon-svg {
  stroke: #3affad;
  filter: drop-shadow(0 0 5px #3affad) drop-shadow(0 0 12px rgba(58,255,173,.6));
}
.agent-card[data-agent="operations"] {
  background: linear-gradient(180deg, rgba(58,255,173,.04) 0%, rgba(58,255,173,.18) 100%) !important;
  border-color: rgba(58,255,173,.32) !important;
}

/* Agent base glow line */
.agent-base { height: 2px !important; width: 85% !important; opacity: .9 !important; }

/* Agent icon wrap: holographic display panel */
.agent-icon-wrap {
  position: relative !important;
  width: 60px !important; height: 60px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  /* Reset to dark transparent — icon SVG provides the visual */
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0%, rgba(0,5,20,.85) 100%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: visible !important;
}

/* Remove specular sphere highlight */
.agent-icon-wrap::before { display: none !important; }

/* Neon department icon SVG */
.agent-icon-svg {
  width: 28px; height: 28px;
  flex-shrink: 0;
  stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  fill: none;
}

/* Hide any injected initials */
.agent-initial { display: none !important; }

/* Agent text styling */
.agent-name   { font-size: 8.5px !important; letter-spacing: 0.12em !important; font-weight: 700 !important; }
.agent-name-2 { font-size: 8px !important; letter-spacing: 0.1em !important; opacity: .75; }
.agent-role   { font-size: 7px !important; opacity: .6; }
.agent-tasks  { font-size: 9px !important; margin-top: 2px !important; }
.agent-tasks-num { font-size: 14px !important; font-weight: 700 !important; line-height: 1; }

/* Ops-row agent section header */
.ops-agents .panel-h-lab { font-size: 10px !important; }

/* ── PIPELINE: stronger stage box look ──────────────────────── */
.pp-stage {
  background: rgba(var(--accent-rgb),.04) !important;
  border: 1px solid rgba(var(--accent-rgb),.1) !important;
  border-bottom: 2px solid var(--st, var(--accent)) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 -8px 20px rgba(0,0,0,.18),
              0 0 12px rgba(var(--accent-rgb),.04) !important;
  padding: 8px 6px 6px !important;
}
/* Inherit stage color to each column's tint */
.pp-stage[style*="00e5ff"] { background: rgba(0,229,255,.05) !important; border-color: rgba(0,229,255,.18) !important; }
.pp-stage[style*="9c5cff"] { background: rgba(156,92,255,.05) !important; border-color: rgba(156,92,255,.18) !important; }
.pp-stage[style*="ff9966"] { background: rgba(255,153,102,.05) !important; border-color: rgba(255,153,102,.18) !important; }
.pp-stage[style*="ff5b3a"] { background: rgba(255,91,58,.05) !important; border-color: rgba(255,91,58,.18) !important; }
.pp-stage[style*="3affad"] { background: rgba(58,255,173,.05) !important; border-color: rgba(58,255,173,.18) !important; }

.pp-lab { font-size: 7.5px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; }
.pp-num { font-size: 22px !important; font-weight: 700 !important; }
.pp-val { font-size: 8px !important; font-weight: 600 !important; }

/* Pipeline stats footer */
.pps-val  { font-size: 15px !important; }
.pps-lab  { font-size: 7px !important; }

/* ── DEALS CLOSING SOON: bigger, more readable ──────────────── */
.bp-td-addr  { font-size: 9px !important; font-weight: 600 !important; color: var(--text) !important; }
.bp-td-date  { font-size: 8.5px !important; color: var(--accent) !important; font-weight: 600 !important; }
.bp-td-price { font-size: 9px !important; font-weight: 700 !important; }
.bp-tr { padding: 5px 0 !important; }
.bp-tr-head span { font-size: 7.5px !important; letter-spacing: 0.1em !important; color: var(--text-muted) !important; }

/* ── TEAM ACTIVITY: more readable ───────────────────────────── */
.bp-tr-team span:not(.bp-avatar) { font-size: 8.5px !important; color: var(--text-dim) !important; }
.bp-tr-team b, .bp-tr-team span:nth-child(3), .bp-tr-team span:nth-child(4) { font-size: 9px !important; color: var(--text) !important; }

/* ── KPI SPARKLINE: dots at each data point ─────────────────── */
.kpi-spark circle { filter: drop-shadow(0 0 3px var(--accent)); }

/* ── GOALS PROGRESS: bigger text ────────────────────────────── */
.goal-lab { font-size: 8.5px !important; }
.goal-num { font-size: 8.5px !important; }
.goal-pct { font-size: 8.5px !important; }
.goal-bar { height: 7px !important; }

/* ── PIPELINE STAGE: funnel bar layout ───────────────────── */
.pp-stage {
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 6px 4px 5px !important;
  gap: 0 !important;
  position: relative;
}
.pp-lab {
  font-size: 7px !important; letter-spacing: 0.1em !important;
  text-align: center !important;
  position: absolute; top: 6px; left: 0; right: 0;
  color: var(--text-muted) !important;
}
/* Funnel bar injected by demo script */
.pp-bar-area {
  width: 90%; height: 54px;
  display: flex; align-items: flex-end; justify-content: center;
  margin: 20px auto 4px; flex-shrink: 0;
}
.pp-bar-fill {
  width: 100%; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, var(--st, var(--accent)) 100%);
  box-shadow: 0 0 16px var(--st, rgba(var(--accent-rgb),.6)),
              0 0 32px rgba(0,0,0,.3);
  min-height: 5px;
  transition: height .9s cubic-bezier(.2,.8,.3,1);
}
.pp-num { font-size: 20px !important; font-weight: 700 !important; margin-top: 3px !important; line-height: 1 !important; }
.pp-val { font-size: 7.5px !important; color: var(--text-dim) !important; margin-top: 2px !important; }

/* KPI numbers — taller, more dominant */
.kpi-number { font-size: 26px !important; }
.kpi-label  { font-size: 8.5px !important; }
.kpi-delta  { font-size: 11px !important; }

/* Agent icon circles — bigger, stronger glow base */
.agent-icon-wrap { width: 52px !important; height: 52px !important; }
.agent-card { padding: 9px 4px 6px !important; }
.agent-name { font-size: 8.5px !important; }
.agent-tasks { font-size: 9px !important; }

/* Emoji ::after rules — disabled, SVGs used instead */
.agent-card[data-agent="listings"]     .agent-icon-wrap::after,
.agent-card[data-agent="transactions"] .agent-icon-wrap::after,
.agent-card[data-agent="sales"]        .agent-icon-wrap::after,
.agent-card[data-agent="marketing"]    .agent-icon-wrap::after,
.agent-card[data-agent="client-care"]  .agent-icon-wrap::after,
.agent-card[data-agent="operations"]   .agent-icon-wrap::after,
.agent-icon-wrap::after { content: none !important; display: none !important; }
.agent-img { display: none !important; }

/* Ops-row: slightly taller to give agents room */
.ops-row { height: 178px !important; }

/* Bottom row: slightly taller */
.bottom-row { height: 182px !important; }

/* KPI strip: taller for the bigger numbers */
.kpi-strip { height: 102px !important; }

/* Globe: stronger outer glow */
.earth-stage { perspective: 1100px !important; }
.eh-earth {
  box-shadow:
    inset -28px -28px 56px rgba(0,0,0,.94),
    inset 16px 16px 48px rgba(40,110,240,.6),
    0 0 100px rgba(0,100,240,.85),
    0 0 200px rgba(0,60,200,.5),
    0 0 320px rgba(0,40,160,.25) !important;
}

/* Sidebar brand area: ensure no overflow */
.sidebar-brand { padding: 0 14px !important; }
.sb-org { font-size: 11px !important; }
.sb-sub { font-size: 8px !important; }

/* ── Sales-progress rows (app.js Listings/Buyers/Sellers/Closings) ── */
.st-prog-row {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0; flex-shrink: 0;
}
.st-prog-label {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em;
  color: var(--text-dim); text-transform: uppercase; width: 50px; flex-shrink: 0;
}
.st-prog-track {
  flex: 1; height: 5px; background: rgba(255,255,255,.06);
  border-radius: 3px; overflow: hidden;
}
.st-prog-fill {
  height: 100%; border-radius: 3px;
  background: var(--sp-color, var(--accent));
  box-shadow: 0 0 6px var(--sp-color, rgba(var(--accent-rgb),.6));
  transition: width .9s ease;
}
.st-prog-val {
  font-family: var(--mono); font-size: 8px; color: var(--text-dim);
  width: 22px; text-align: right; flex-shrink: 0;
}

/* ── st-card stats block (app.js) ── */
.st-card-block { display: flex; gap: 6px; margin-bottom: 6px; flex-shrink: 0; }
.st-card { background: rgba(var(--accent-rgb),.06); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; flex: 1; }
.st-card-l { font-family: var(--mono); font-size: 7px; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
.st-card-v { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--accent); }

/* ── Pipeline stage: vertical funnel layout ── */
.bp-pipeline .pipeline-stages {
  display: flex; flex-direction: column;
  gap: 3px; flex: 1; min-height: 0; align-items: stretch;
}
.pp-stage { height: auto; box-sizing: border-box; }

/* ════════════════════════════════════════════════════════════
   NORTH STAR v73 — Colored Sphere Agent Icons + Pillar Polish
   ════════════════════════════════════════════════════════════ */

/* Agent icon-wrap: sized for sphere look, clip inner glow */
.agent-icon-wrap {
  width: 62px !important; height: 62px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  position: relative !important;
}

/* SVG icon: larger, thicker, white so it reads on colored sphere */
.agent-icon-svg {
  width: 32px !important; height: 32px !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important; stroke-linejoin: round !important;
  fill: rgba(255,255,255,.12) !important;
  position: relative; z-index: 2;
}

/* ── Per-agent colored sphere backgrounds ── */

/* LISTINGS — violet */
.agent-card[data-agent="listings"] .agent-icon-wrap {
  background: radial-gradient(circle at 40% 33%,
    rgba(230,195,255,.9) 0%, rgba(160,90,255,.75) 32%,
    rgba(80,20,160,.65) 62%, rgba(12,3,30,.95) 100%) !important;
  border: 1.5px solid rgba(200,150,255,.8) !important;
  box-shadow: 0 0 0 4px rgba(156,92,255,.2), 0 0 28px rgba(156,92,255,.95), 0 0 70px rgba(156,92,255,.45) !important;
}
.agent-card[data-agent="listings"] .agent-icon-svg {
  stroke: rgba(255,255,255,.95) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,255,255,.5)) !important;
}

/* TRANSACTIONS — cyan */
.agent-card[data-agent="transactions"] .agent-icon-wrap {
  background: radial-gradient(circle at 40% 33%,
    rgba(180,245,255,.9) 0%, rgba(0,205,245,.75) 32%,
    rgba(0,80,130,.65) 62%, rgba(0,12,28,.95) 100%) !important;
  border: 1.5px solid rgba(100,235,255,.8) !important;
  box-shadow: 0 0 0 4px rgba(0,229,255,.2), 0 0 28px rgba(0,229,255,.95), 0 0 70px rgba(0,229,255,.45) !important;
}
.agent-card[data-agent="transactions"] .agent-icon-svg {
  stroke: rgba(255,255,255,.95) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,255,255,.5)) !important;
}

/* SALES — electric blue */
.agent-card[data-agent="sales"] .agent-icon-wrap {
  background: radial-gradient(circle at 40% 33%,
    rgba(185,215,255,.9) 0%, rgba(60,130,255,.75) 32%,
    rgba(20,55,170,.65) 62%, rgba(3,8,35,.95) 100%) !important;
  border: 1.5px solid rgba(130,185,255,.8) !important;
  box-shadow: 0 0 0 4px rgba(91,158,255,.2), 0 0 28px rgba(91,158,255,.95), 0 0 70px rgba(91,158,255,.45) !important;
}
.agent-card[data-agent="sales"] .agent-icon-svg {
  stroke: rgba(255,255,255,.95) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,255,255,.5)) !important;
}

/* MARKETING — amber/orange */
.agent-card[data-agent="marketing"] .agent-icon-wrap {
  background: radial-gradient(circle at 40% 33%,
    rgba(255,225,165,.9) 0%, rgba(255,145,55,.75) 32%,
    rgba(160,60,8,.65) 62%, rgba(28,8,0,.95) 100%) !important;
  border: 1.5px solid rgba(255,195,100,.8) !important;
  box-shadow: 0 0 0 4px rgba(255,153,102,.2), 0 0 28px rgba(255,153,102,.95), 0 0 70px rgba(255,153,102,.45) !important;
}
.agent-card[data-agent="marketing"] .agent-icon-svg {
  stroke: rgba(255,255,255,.95) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,255,255,.5)) !important;
}

/* CLIENT CARE — rose/pink */
.agent-card[data-agent="client-care"] .agent-icon-wrap {
  background: radial-gradient(circle at 40% 33%,
    rgba(255,205,215,.9) 0%, rgba(255,85,115,.75) 32%,
    rgba(160,18,48,.65) 62%, rgba(28,3,10,.95) 100%) !important;
  border: 1.5px solid rgba(255,145,165,.8) !important;
  box-shadow: 0 0 0 4px rgba(251,113,133,.2), 0 0 28px rgba(251,113,133,.95), 0 0 70px rgba(251,113,133,.45) !important;
}
.agent-card[data-agent="client-care"] .agent-icon-svg {
  stroke: rgba(255,255,255,.95) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,255,255,.5)) !important;
}

/* OPERATIONS — emerald */
.agent-card[data-agent="operations"] .agent-icon-wrap {
  background: radial-gradient(circle at 40% 33%,
    rgba(180,255,225,.9) 0%, rgba(28,225,145,.75) 32%,
    rgba(0,100,58,.65) 62%, rgba(0,14,8,.95) 100%) !important;
  border: 1.5px solid rgba(100,255,185,.8) !important;
  box-shadow: 0 0 0 4px rgba(58,255,173,.2), 0 0 28px rgba(58,255,173,.95), 0 0 70px rgba(58,255,173,.45) !important;
}
.agent-card[data-agent="operations"] .agent-icon-svg {
  stroke: rgba(255,255,255,.95) !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,255,255,.5)) !important;
}

/* Agent cards: more spacious layout */
.agent-card {
  padding: 10px 6px 8px !important;
  gap: 5px !important;
  align-items: center !important;
}
.agent-name { font-size: 9px !important; letter-spacing: 0.13em !important; font-weight: 700 !important; }
.agent-tasks-num { font-size: 15px !important; font-weight: 700 !important; }

/* ── SALES PIPELINE: per-stage colors via data attr ── */
.pp-stage[data-stage="new-leads"]       { --st: #00d6ff; }
.pp-stage[data-stage="contacted"]       { --st: #9c5cff; }
.pp-stage[data-stage="showing"]         { --st: #5b9eff; }
.pp-stage[data-stage="offer"]           { --st: #ffb648; }
.pp-stage[data-stage="under-contract"]  { --st: #3affad; }

.pp-bar-fill {
  background: linear-gradient(180deg,
    rgba(255,255,255,.35) 0%,
    var(--st, var(--accent)) 60%,
    rgba(0,0,0,.3) 100%) !important;
  box-shadow: 0 0 18px var(--st, rgba(var(--accent-rgb),.7)),
              inset 0 0 8px rgba(255,255,255,.12) !important;
}
.pp-bar-area { height: 60px !important; }

/* ── DEALS CLOSING SOON: improve table readability ── */
.bp-deals-table { font-size: 8.5px !important; }
.bp-td-addr { font-size: 9.5px !important; color: var(--text) !important; font-weight: 600 !important; }
.bp-td-price { font-size: 10px !important; font-weight: 700 !important; color: var(--good) !important; }
.bp-td-date  { font-size: 8.5px !important; color: var(--accent) !important; }
.bp-tr { border-bottom: 1px solid var(--border2) !important; }
/* Deals urgency row coloring */
.bp-tr-deals.row-urgent { border-left: 2px solid var(--bad) !important; padding-left: 4px !important; }
.bp-tr-deals.row-urgent .bp-td-date { color: var(--bad) !important; font-weight: 700 !important; }
.bp-tr-deals.row-urgent .bp-td-addr { color: var(--bad) !important; }
.bp-tr-deals.row-warn   { border-left: 2px solid var(--warn) !important; padding-left: 4px !important; }
.bp-tr-deals.row-warn .bp-td-date   { color: var(--warn) !important; font-weight: 700 !important; }
.bp-tr-deals.row-ok     { border-left: 2px solid var(--good) !important; padding-left: 4px !important; }

/* ── TEAM ACTIVITY: activity feed ── */
.ta-feed { list-style: none; margin: 4px 0 0; padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ta-feed-row { display: grid; grid-template-columns: 7px 1fr auto; gap: 4px; align-items: start; padding: 3px 0; border-bottom: 1px solid var(--border2); }
.ta-feed-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; background: var(--text-muted); }
.ta-feed-dot.ok   { background: var(--good); }
.ta-feed-dot.warn { background: var(--warn); }
.ta-feed-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ta-feed-action { font-family: var(--mono); font-size: 7.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-feed-who { font-family: var(--mono); font-size: 7px; color: var(--accent); font-weight: 700; text-transform: uppercase; }
.ta-feed-ts { font-family: var(--mono); font-size: 7px; color: var(--text-muted); white-space: nowrap; }

/* ── SEO INTELLIGENCE panel ── */
.bp-seo .seo-section-h { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; margin: 3px 0 2px; }
.seo-kw-table { display: flex; flex-direction: column; }
.seo-kw-row { display: grid; grid-template-columns: 1fr auto auto; gap: 4px; align-items: center; padding: 2px 0; border-bottom: 1px solid var(--border2); }
.seo-kw-row.seo-kw-head span { font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.09em; color: var(--text-muted); text-transform: uppercase; }
.seo-kw-q      { font-family: var(--mono); font-size: 7.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-kw-clicks { font-family: var(--mono); font-size: 8px; color: var(--good); font-weight: 700; text-align: right; white-space: nowrap; }
.seo-kw-pos    { font-family: var(--mono); font-size: 8px; color: var(--accent); text-align: right; white-space: nowrap; min-width: 24px; }
.seo-stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; margin-top: 4px; }
.seo-stat-block { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; background: rgba(var(--accent-rgb),.06); border-radius: 4px; border: 1px solid var(--border2); }
.seo-stat-val { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--text); line-height: 1; }
.seo-stat-lab { font-family: var(--mono); font-size: 6px; color: var(--text-muted); letter-spacing: 0.07em; text-align: center; margin-top: 2px; }
.seo-stat-delta { font-family: var(--mono); font-size: 7px; font-weight: 700; margin-top: 1px; }
.seo-stat-delta.pos { color: var(--good); }
.seo-stat-delta.neg { color: var(--bad); }
.seo-stat-delta.neu { color: var(--text-muted); }

/* ── SYSTEM INTELLIGENCE: AI Insight panel polish ── */
.si-insight-text { font-size: 9.5px !important; line-height: 1.6 !important; color: var(--text-dim) !important; }
.si-insight-cta  { font-size: 8px !important; }

/* ── TEAM ACTIVITY: bolder agent name ── */
.ta-agent-name { font-size: 9.5px !important; font-weight: 700 !important; color: var(--text) !important; }
.ta-deal-addr  { font-size: 8.5px !important; color: var(--text-dim) !important; }
.ta-deal-val   { font-size: 9px !important; color: var(--good) !important; font-weight: 600 !important; }

/* ── KPI STRIP: crisper numbers ── */
.kpi-number { font-size: 28px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; }
.kpi-label  { font-size: 7.5px !important; letter-spacing: 0.16em !important; }

/* ── GOALS PANEL: bar height + label refinement ── */
.goal-bar  { height: 8px !important; border-radius: 4px !important; }
.goal-bar-fill { box-shadow: 0 0 6px rgba(var(--accent-rgb),.5) !important; }

/* ── INTEGRATIONS: connected dots brighter ── */
.integ-dot[data-status="connected"],
.integ-dot.connected {
  background: var(--good) !important;
  box-shadow: 0 0 6px rgba(var(--good-rgb),.8) !important;
}

/* ════════════════════════════════════════════════════════════
   NORTH STAR v74 — Voice Command Center Premium Overhaul
   ════════════════════════════════════════════════════════════ */

/* ── BAR CONTAINER ── */
.quick-bar {
  height: 76px !important;
  background:
    linear-gradient(180deg, rgba(0,30,65,.55) 0%, rgba(4,10,22,1) 100%),
    var(--bg2) !important;
  border-top: 1px solid rgba(0,214,255,.4) !important;
  box-shadow:
    0 -1px 0 rgba(0,214,255,.06),
    0 -12px 40px rgba(0,214,255,.07),
    inset 0 1px 0 rgba(0,214,255,.15) !important;
  padding: 0 14px !important;
  gap: 10px !important;
}

/* ── QUICK ACTION BUTTONS ── */
.qb-btn {
  flex-direction: column !important;
  align-items: center !important;
  padding: 6px 11px !important;
  min-width: 66px !important;
  background: rgba(0,214,255,.05) !important;
  border: 1px solid rgba(0,214,255,.2) !important;
  border-radius: 8px !important;
  color: var(--text-dim) !important;
  gap: 4px !important;
  transition: all .16s ease !important;
  height: 56px !important;
}
.qb-btn:hover {
  background: rgba(0,214,255,.12) !important;
  border-color: rgba(0,214,255,.5) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 14px rgba(0,214,255,.28), inset 0 0 8px rgba(0,214,255,.06) !important;
  transform: translateY(-2px) !important;
}
.qb-btn svg { width: 16px !important; height: 16px !important; stroke-width: 1.7 !important; }
.qb-btn span { font-size: 7px !important; letter-spacing: 0.13em !important; font-weight: 600 !important; white-space: nowrap !important; }

/* ── QUICK ACTIONS LABEL ── */
.qb-label {
  font-size: 7px !important;
  letter-spacing: 0.16em !important;
  color: var(--text-muted) !important;
  padding-right: 10px !important;
  border-right: 1px solid var(--border) !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  height: 56px !important;
}

/* ── VOICE CENTER CONTAINER ── */
.qb-voice-center {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 20px !important;
}

/* ── VOICE CENTER TITLE ── */
.qbvc-title {
  font-size: 8.5px !important;
  letter-spacing: 0.3em !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-shadow: 0 0 16px rgba(var(--accent-rgb),.75), 0 0 32px rgba(var(--accent-rgb),.3) !important;
  text-transform: uppercase !important;
}

/* ── WAVE ROW: eq bars + mic ── */
.qbvc-wave-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
}

/* ── ANIMATED EQUALIZER BARS ── */
.qbvc-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 28px;
  width: 130px;
  flex-shrink: 0;
}
.qbvc-eq-bars span {
  display: block;
  flex: 1;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg,
    rgba(0,229,255,1) 0%,
    rgba(0,160,230,.55) 60%,
    rgba(0,80,160,.25) 100%);
  box-shadow: 0 0 5px rgba(0,229,255,.55), 0 -2px 6px rgba(0,229,255,.3);
  animation: vcc-eq var(--spd,.65s) ease-in-out infinite alternate;
}
@keyframes vcc-eq {
  from { height: var(--lo,3px); opacity: .45; }
  to   { height: var(--hi,20px); opacity: 1; }
}

/* Left: short at left edge → tall near mic */
.qbvc-eq-left span:nth-child(1)  { --lo:2px;  --hi:5px;  --spd:.52s; animation-delay:.00s }
.qbvc-eq-left span:nth-child(2)  { --lo:3px;  --hi:8px;  --spd:.61s; animation-delay:.09s }
.qbvc-eq-left span:nth-child(3)  { --lo:3px;  --hi:11px; --spd:.57s; animation-delay:.04s }
.qbvc-eq-left span:nth-child(4)  { --lo:4px;  --hi:14px; --spd:.68s; animation-delay:.13s }
.qbvc-eq-left span:nth-child(5)  { --lo:5px;  --hi:18px; --spd:.63s; animation-delay:.07s }
.qbvc-eq-left span:nth-child(6)  { --lo:7px;  --hi:22px; --spd:.71s; animation-delay:.16s }
.qbvc-eq-left span:nth-child(7)  { --lo:9px;  --hi:26px; --spd:.59s; animation-delay:.02s }
.qbvc-eq-left span:nth-child(8)  { --lo:11px; --hi:28px; --spd:.66s; animation-delay:.11s }
.qbvc-eq-left span:nth-child(9)  { --lo:9px;  --hi:24px; --spd:.73s; animation-delay:.18s }
.qbvc-eq-left span:nth-child(10) { --lo:7px;  --hi:20px; --spd:.60s; animation-delay:.06s }
.qbvc-eq-left span:nth-child(11) { --lo:5px;  --hi:15px; --spd:.67s; animation-delay:.14s }
.qbvc-eq-left span:nth-child(12) { --lo:4px;  --hi:11px; --spd:.56s; animation-delay:.05s }

/* Right: mirror — tall near mic → short at right edge */
.qbvc-eq-right span:nth-child(1)  { --lo:4px;  --hi:11px; --spd:.58s; animation-delay:.05s }
.qbvc-eq-right span:nth-child(2)  { --lo:5px;  --hi:15px; --spd:.66s; animation-delay:.12s }
.qbvc-eq-right span:nth-child(3)  { --lo:7px;  --hi:20px; --spd:.62s; animation-delay:.08s }
.qbvc-eq-right span:nth-child(4)  { --lo:9px;  --hi:24px; --spd:.70s; animation-delay:.01s }
.qbvc-eq-right span:nth-child(5)  { --lo:11px; --hi:28px; --spd:.64s; animation-delay:.10s }
.qbvc-eq-right span:nth-child(6)  { --lo:9px;  --hi:26px; --spd:.72s; animation-delay:.17s }
.qbvc-eq-right span:nth-child(7)  { --lo:7px;  --hi:22px; --spd:.57s; animation-delay:.03s }
.qbvc-eq-right span:nth-child(8)  { --lo:5px;  --hi:18px; --spd:.68s; animation-delay:.15s }
.qbvc-eq-right span:nth-child(9)  { --lo:4px;  --hi:14px; --spd:.63s; animation-delay:.09s }
.qbvc-eq-right span:nth-child(10) { --lo:3px;  --hi:11px; --spd:.71s; animation-delay:.13s }
.qbvc-eq-right span:nth-child(11) { --lo:3px;  --hi:8px;  --spd:.55s; animation-delay:.07s }
.qbvc-eq-right span:nth-child(12) { --lo:2px;  --hi:5px;  --spd:.62s; animation-delay:.16s }

/* ── MICROPHONE BUTTON ── */
.qb-voice-btn-big {
  position: relative !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 38% 34%,
    rgba(0,229,255,.45) 0%,
    rgba(0,130,210,.38) 38%,
    rgba(0,40,100,.88) 72%,
    rgba(0,10,30,.97) 100%) !important;
  border: 1.5px solid rgba(0,229,255,.7) !important;
  box-shadow:
    0 0 0 5px rgba(0,229,255,.1),
    0 0 22px rgba(0,229,255,.9),
    0 0 55px rgba(0,229,255,.45),
    inset 0 0 18px rgba(0,229,255,.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: box-shadow .2s, transform .15s !important;
}
.qb-voice-btn-big:hover {
  transform: scale(1.07) !important;
  box-shadow:
    0 0 0 7px rgba(0,229,255,.18),
    0 0 32px rgba(0,229,255,1),
    0 0 80px rgba(0,229,255,.6),
    inset 0 0 24px rgba(0,229,255,.2) !important;
}
.qbv-core-big svg {
  width: 22px !important;
  height: 22px !important;
  stroke: rgba(255,255,255,.97) !important;
  stroke-width: 1.8 !important;
  filter: drop-shadow(0 0 7px rgba(0,229,255,.9)) !important;
}

/* Pulsing rings */
.qbv-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,229,255,.4) !important;
  pointer-events: none !important;
  animation: vcc-ring 2.5s ease-out infinite !important;
}
.qbv-ring:nth-child(1) { inset: -8px !important;  animation-delay: 0s !important; }
.qbv-ring:nth-child(2) { inset: -16px !important; animation-delay: .75s !important; border-color: rgba(0,229,255,.22) !important; }
@keyframes vcc-ring {
  0%   { opacity: .85; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.55); }
}

/* ── PROMPT TEXT ── */
.qbvc-prompt {
  font-size: 7.5px !important;
  letter-spacing: 0.09em !important;
  color: rgba(0,214,255,.58) !important;
  font-style: italic !important;
  margin-top: 1px !important;
}

/* ════════════════════════════════════════════════════════════
   NORTH STAR v76 — Footer Exact Mockup Rebuild
   ════════════════════════════════════════════════════════════ */

/* ── QUICK BAR: new layout ── */
.quick-bar {
  height: 84px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 16px 0 10px !important;
  background:
    linear-gradient(180deg, rgba(0,25,55,.6) 0%, rgba(3,9,20,1) 100%),
    var(--bg2) !important;
  border-top: 1px solid rgba(0,214,255,.45) !important;
  box-shadow: 0 -1px 0 rgba(0,214,255,.08),
              0 -14px 40px rgba(0,214,255,.07),
              inset 0 1px 0 rgba(0,214,255,.18) !important;
  flex-shrink: 0 !important;
}

/* Hide old structures that were replaced */
.qb-label,
.qb-actions-left,
.qb-actions-right,
.qb-voice-center { display: none !important; }

/* ── 8-BUTTON ROW ── */
.qb-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
  padding-right: 8px !important;
  border-right: 1px solid rgba(0,214,255,.14) !important;
  height: 70px !important;
}

/* Quick action button */
.qb-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 5px 9px !important;
  min-width: 58px !important;
  height: 62px !important;
  background: rgba(0,214,255,.04) !important;
  border: 1px solid rgba(0,214,255,.16) !important;
  border-radius: 7px !important;
  color: var(--text-dim) !important;
  transition: all .15s ease !important;
  cursor: pointer !important;
}
.qb-btn:hover {
  background: rgba(0,214,255,.11) !important;
  border-color: rgba(0,214,255,.45) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 12px rgba(0,214,255,.22), inset 0 0 8px rgba(0,214,255,.05) !important;
  transform: translateY(-2px) !important;
}
.qb-btn svg { width: 16px !important; height: 16px !important; stroke-width: 1.7 !important; flex-shrink: 0 !important; }
.qb-btn span { font-size: 6.5px !important; letter-spacing: 0.12em !important; font-weight: 600 !important; white-space: nowrap !important; line-height: 1 !important; }

/* ── HOLOGRAPHIC ORB ── */
.qb-holo-orb-wrap {
  width: 84px !important;
  height: 84px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  filter: drop-shadow(0 0 18px rgba(0,229,255,.85)) drop-shadow(0 0 40px rgba(0,229,255,.4)) !important;
}
.qb-holo-svg {
  width: 84px !important;
  height: 84px !important;
  animation: holo-orb-pulse 3s ease-in-out infinite !important;
}
@keyframes holo-orb-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25) drop-shadow(0 0 6px rgba(0,229,255,.5)); }
}
/* Orbit ring rotation via CSS */
.qb-holo-svg ellipse:nth-child(5) { animation: ring-rot-a 6s linear infinite; transform-origin: 45px 45px; }
.qb-holo-svg ellipse:nth-child(6) { animation: ring-rot-b 9s linear infinite; transform-origin: 45px 45px; }
@keyframes ring-rot-a {
  from { transform: rotate(55deg); }
  to   { transform: rotate(415deg); }
}
@keyframes ring-rot-b {
  from { transform: rotate(-55deg); }
  to   { transform: rotate(-415deg); }
}

/* ── FLOW ARROWS ── */
.qb-flow-arrows {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}
.qb-arr {
  font-size: 14px !important;
  color: rgba(0,229,255,.55) !important;
  animation: arr-fade 1.4s ease-in-out infinite !important;
  line-height: 1 !important;
}
.qb-arr:nth-child(1) { animation-delay: 0s !important; }
.qb-arr:nth-child(2) { animation-delay: .25s !important; }
.qb-arr:nth-child(3) { animation-delay: .5s !important; }
@keyframes arr-fade {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

/* ── VOICE SECTION ── */
.qb-voice-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  min-width: 160px !important;
  max-width: 200px !important;
  flex-shrink: 0 !important;
}
.qbvc-title {
  font-family: var(--mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  text-shadow: 0 0 14px rgba(var(--accent-rgb),.7) !important;
  text-transform: uppercase !important;
}
.qbvc-prompt {
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.06em !important;
  color: rgba(0,214,255,.55) !important;
  font-style: italic !important;
}
.qbvc-waveform {
  width: 140px !important;
  height: 18px !important;
}

/* ── MIC BUTTON ── */
.qb-mic-btn {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 38% 34%,
    rgba(0,229,255,.42) 0%,
    rgba(0,120,200,.35) 40%,
    rgba(0,30,80,.9) 75%,
    rgba(0,8,25,.98) 100%) !important;
  border: 1.5px solid rgba(0,229,255,.65) !important;
  box-shadow:
    0 0 0 4px rgba(0,229,255,.1),
    0 0 20px rgba(0,229,255,.9),
    0 0 50px rgba(0,229,255,.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: box-shadow .2s, transform .15s !important;
}
.qb-mic-btn:hover {
  transform: scale(1.08) !important;
  box-shadow:
    0 0 0 6px rgba(0,229,255,.18),
    0 0 28px rgba(0,229,255,1),
    0 0 70px rgba(0,229,255,.55) !important;
}
.qb-mic-btn .qbv-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,229,255,.4) !important;
  pointer-events: none !important;
  animation: vcc-ring 2.5s ease-out infinite !important;
}
.qb-mic-btn .qbv-ring:nth-child(1) { inset: -7px !important; animation-delay: 0s !important; }
.qb-mic-btn .qbv-ring:nth-child(2) { inset: -14px !important; animation-delay: .75s !important; border-color: rgba(0,229,255,.2) !important; }
.qb-mic-btn .qbv-core-big svg {
  width: 19px !important; height: 19px !important;
  stroke: rgba(255,255,255,.97) !important;
  filter: drop-shadow(0 0 6px rgba(0,229,255,.85)) !important;
}

/* ── DATA SYNC PANEL ── */
.qb-sync-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
  padding-left: 8px !important;
  border-left: 1px solid rgba(0,214,255,.14) !important;
  margin-left: auto !important;
}
.qbs-lab {
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.16em !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}
.qbs-stat {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  color: var(--good) !important;
  letter-spacing: 0.1em !important;
  text-shadow: 0 0 10px rgba(var(--good-rgb),.6) !important;
}
.qbs-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--good) !important;
  box-shadow: 0 0 8px rgba(var(--good-rgb),.9) !important;
  animation: blink 1.3s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}
.qbs-map { width: 72px !important; height: 28px !important; }

/* ── AGENT ICON WRAP: larger for humanoid figure ── */
.agent-icon-wrap {
  width: 68px !important;
  height: 68px !important;
  overflow: hidden !important;
  position: relative !important;
}
.agent-icon-svg {
  width: 60px !important;
  height: 60px !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   NORTH STAR v77 — Agent Avatar: holographic sweep + richer SVG
   ════════════════════════════════════════════════════════════ */

/* Holographic sweep line — white band that scrolls top→bottom */
.agent-icon-wrap::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; top: 0 !important;
  height: 14px !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.22) 45%,
    rgba(255,255,255,0.30) 50%,
    rgba(255,255,255,0.22) 55%,
    transparent 100%) !important;
  animation: holo-sweep 3.8s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
  border-radius: 50% !important;
}
@keyframes holo-sweep {
  0%   { transform: translateY(-14px); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 0.7; }
  100% { transform: translateY(76px);  opacity: 0; }
}
/* Stagger sweep per agent so they don't all flash together */
.agent-card:nth-child(1) .agent-icon-wrap::after { animation-delay: 0s; }
.agent-card:nth-child(2) .agent-icon-wrap::after { animation-delay: 0.6s; }
.agent-card:nth-child(3) .agent-icon-wrap::after { animation-delay: 1.2s; }
.agent-card:nth-child(4) .agent-icon-wrap::after { animation-delay: 1.8s; }
.agent-card:nth-child(5) .agent-icon-wrap::after { animation-delay: 2.4s; }
.agent-card:nth-child(6) .agent-icon-wrap::after { animation-delay: 3.0s; }

/* ══════════════════════════════════════════════════════════════════
   PHASE B ROW — Today's Showings + Active Listings
   ══════════════════════════════════════════════════════════════════ */

.phase-b-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 12px 10px;
}

/* Showings panel */
.bp-showings { display: flex; flex-direction: column; gap: 6px; }
.bp-listings { display: flex; flex-direction: column; gap: 6px; }

/* Next-Showing Banner */
.next-showing-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: linear-gradient(90deg, rgba(0,212,255,0.12) 0%, rgba(0,212,255,0.04) 100%);
  border-left: 2px solid var(--accent, #00d4ff);
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.nsb-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent, #00d4ff);
  white-space: nowrap;
}
.nsb-time {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.nsb-addr {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Section header row */
.section-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
  padding: 2px 0 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}
.sh-src {
  margin-left: auto;
  font-size: 8px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
}

/* Showing rows */
.showing-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.showing-row:last-child { border-bottom: none; }
.showing-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent, #00d4ff);
  white-space: nowrap;
  min-width: 42px;
  padding-top: 1px;
}
.showing-info { flex: 1; overflow: hidden; }
.showing-addr {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.showing-agent, .showing-loc {
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.showing-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
  align-self: center;
  background: rgba(58,255,173,0.15);
  color: #3affad;
}
.showing-badge[data-status="confirmed"] { background: rgba(58,255,173,0.15); color: #3affad; }
.showing-badge[data-status="pending"]   { background: rgba(255,182,72,0.15);  color: #ffb648; }
.showing-badge[data-status="cancelled"] { background: rgba(255,91,58,0.15);   color: #ff5b3a; }
.showing-badge[data-status="showing"]   { background: rgba(0,212,255,0.15);   color: #00d4ff; }

/* Listing cards */
.listing-card {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.listing-card:last-child { border-bottom: none; }
.lc-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lc-addr {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-open {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.15s;
}
.lc-open:hover { color: var(--accent, #00d4ff); }
.lc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.lc-price {
  font-size: 12px;
  font-weight: 700;
  color: #3affad;
}
.lc-detail {
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}
.lc-modified {
  font-size: 9px;
  color: rgba(255,255,255,0.3);
  margin-top: 2px;
}

/* Connect CTA (shown when service not yet connected) */
.phase-b-connect {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border: 1px dashed rgba(255,255,255,0.1);
}
.pbc-icon {
  font-size: 22px;
  opacity: 0.35;
  line-height: 1;
}
.pbc-text {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* Responsive: stack on narrow viewports */
@media (max-width: 1200px) {
  .phase-b-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   DEPARTMENTS + LISTINGS DRILL-DOWNS (2026-05-30)
   Status pills on agent cards + two floating modals. Themed entirely via the
   CSS custom properties so light + dark both work with zero extra rules.
   ════════════════════════════════════════════════════════════════════════ */

/* ── status pill (on agent cards + in dept modal) ── */
.agent-card { position: relative; }
.agent-pill {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-muted, rgba(150,150,150,.5));
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.agent-card > .agent-pill { position: absolute; top: 7px; right: 7px; z-index: 2; }
.agent-pill-green  { background: var(--good); box-shadow: 0 0 6px var(--good); border-color: var(--good); }
.agent-pill-yellow { background: var(--warn); box-shadow: 0 0 6px var(--warn); border-color: var(--warn); }
.agent-pill-grey   { background: var(--text-dim); box-shadow: none; border-color: var(--border); opacity: .7; }

/* ── floating modal shell (independent of the #agent-modal .visible quirk) ── */
.atlas-modal {
  position: fixed; inset: 0; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); backdrop-filter: blur(5px); z-index: 1100;
  /* display toggled inline by app.js (none ⇄ flex) */
}
.atlas-modal-card {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px 26px; position: relative;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.atlas-modal-card.am-wide { width: min(720px, 92vw); max-height: 84vh; display: flex; flex-direction: column; }
.atlas-modal-card .am-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.atlas-modal-card .am-name { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); }
.am-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; color: var(--text-dim); margin-left: auto; }
.atlas-modal-body { overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),.18) transparent; padding-right: 4px; }
.atlas-modal-body::-webkit-scrollbar { width: 6px; }
.atlas-modal-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb),.18); border-radius: 3px; }

/* ── departments overview rows ── */
.dept-row {
  border: 1px solid var(--border); border-radius: 7px; margin-bottom: 7px;
  background: rgba(var(--accent-rgb),.03); overflow: hidden;
}
.dept-row-head { display: flex; align-items: center; gap: 14px; padding: 9px 12px; cursor: pointer; transition: background .12s; }
.dept-row-head:hover { background: rgba(var(--accent-rgb),.07); }
.dept-row-left { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.dept-name { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--text); }
.dept-row-meta { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.dept-head  { font-family: var(--mono); font-size: 8.5px; color: var(--text-dim); }
.dept-head b { color: var(--text); }
.dept-count { font-family: var(--mono); font-size: 8.5px; color: var(--accent); white-space: nowrap; }
.dept-last  { font-family: var(--mono); font-size: 8px; color: var(--text-dim); min-width: 74px; text-align: right; }
.dept-detail { display: none; padding: 4px 14px 12px 33px; border-top: 1px solid var(--border); }
.dept-row.expanded .dept-detail { display: block; }
.dept-note { font-family: var(--mono); font-size: 8.5px; color: var(--text-dim); font-style: italic; margin: 8px 0 6px; }
.dept-subs { display: flex; flex-direction: column; gap: 4px; }
.dept-sub-item { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 9px; }
.dsi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-dim); }
.dept-sub-shipped     .dsi-dot { background: var(--good); box-shadow: 0 0 5px var(--good); }
.dept-sub-in_progress .dsi-dot { background: var(--warn); box-shadow: 0 0 5px var(--warn); }
.dept-sub-pending     .dsi-dot { background: var(--text-dim); }
.dsi-name { color: var(--text); flex: 1; }
.dsi-stat { color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; font-size: 7.5px; }
.dept-sub-shipped     .dsi-stat { color: var(--good); }
.dept-sub-in_progress .dsi-stat { color: var(--warn); }
.dept-subs-empty { font-family: var(--mono); font-size: 8.5px; color: var(--text-dim); }

/* ── listings pipeline modal ── */
.lp-counts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px;
}
.lp-count {
  border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px;
  background: rgba(var(--accent-rgb),.04); text-align: center;
}
.lp-count-num { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--accent); line-height: 1.05; }
.lp-count-num.lp-empty { color: var(--text-dim); }
.lp-count-lab { font-family: var(--mono); font-size: 7.5px; letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; margin-top: 3px; }
.lp-rows-h { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 6px; }
.lp-rows-h span:first-child { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.lp-rows-src { font-family: var(--mono); font-size: 7.5px; color: var(--text-dim); }
.lp-loading, .lp-empty-note { font-family: var(--mono); font-size: 9px; color: var(--text-dim); padding: 14px 6px; line-height: 1.6; }
.lp-empty-note .pbc-icon { color: var(--accent); margin-right: 4px; }
.lp-table { display: flex; flex-direction: column; }
.lp-tr { display: grid; grid-template-columns: minmax(120px,1.6fr) .8fr .5fr .9fr .7fr .8fr .8fr 1fr; gap: 6px; padding: 5px 4px; border-bottom: 1px solid var(--border); }
.lp-th { position: sticky; top: 0; background: var(--bg3); }
.lp-th .lp-cell { font-size: 7.5px; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.lp-cell { font-family: var(--mono); font-size: 8.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-addr { color: var(--text); }
.lp-open-link { cursor: pointer; background: none; border: none; }

/* ════════════════════════════════════════════════════════════════════
   MARKETING VIEW (Floor 4 — dual-surface mirror)  ·  added 2026-06-01
   Paid Ads (4 channels) · SEO · Blog · Social · Listing Launch.
   Every colour is a theme var → light + dark both work unchanged.
   ════════════════════════════════════════════════════════════════════ */
.atlas-modal-card.am-xwide { width: min(1120px, 95vw); max-height: 88vh; display: flex; flex-direction: column; }
.mk-loading { font-family: var(--mono); font-size: 9px; color: var(--text-dim); padding: 24px 6px; }

/* section scaffolding */
.mk-section { margin-bottom: 15px; }
.mk-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.mk-sec-lab { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--text); text-transform: uppercase; }
.mk-sec-meta { display: flex; align-items: center; gap: 9px; }
.mk-sec-sub { font-family: var(--mono); font-size: 8px; color: var(--text-dim); letter-spacing: .06em; }
.mk-sec-pill { font-family: var(--mono); font-size: 7px; letter-spacing: .12em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); }
.mk-sec-pill.mk-live { color: var(--good); border-color: rgba(var(--accent-rgb),.4); }
.mk-sec-pill.mk-idle { color: var(--text-dim); }

/* paid ads — 4 channel cards */
.mk-ads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mk-ad-card { border: 1px solid var(--border); border-radius: 9px; padding: 12px 13px; background: rgba(var(--accent-rgb),.04); position: relative; overflow: hidden; transition: transform .14s, border-color .14s, background .14s; }
.mk-ad-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mk-ch, var(--accent)); opacity: .85; }
.mk-ad-card:hover { transform: translateY(-2px); border-color: var(--mk-ch, var(--accent)); background: rgba(var(--accent-rgb),.07); }
.mk-ad-openai   { --mk-ch: #19c37d; }
.mk-ad-google   { --mk-ch: #4285f4; }
.mk-ad-facebook { --mk-ch: #1877f2; }
.mk-ad-bing     { --mk-ch: #1ba1a8; }
.mk-ad-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mk-ad-badge { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 11px; color: #fff; background: var(--mk-ch, var(--accent)); box-shadow: 0 0 10px -2px var(--mk-ch, var(--accent)); }
.mk-ad-name { font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--text); flex: 1; }
.mk-dot { width: 7px; height: 7px; border-radius: 50%; }
.mk-dot-live { background: var(--good); box-shadow: 0 0 6px var(--good); }
.mk-dot-idle { background: var(--text-dim); }
.mk-ad-id { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 3px; }
.mk-ad-id-lab { font-family: var(--mono); font-size: 7px; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; }
.mk-ad-id-val { font-family: var(--mono); font-size: 8px; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ad-id-val.mk-pending { color: var(--warn); letter-spacing: .08em; }
.mk-ad-acct { font-family: var(--mono); font-size: 7.5px; color: var(--text-dim); margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ad-mets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.mk-met { border: 1px solid var(--border); border-radius: 6px; padding: 6px 7px; text-align: center; background: var(--bg3); }
.mk-met-v { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--accent); line-height: 1; }
.mk-met-v.mk-empty { color: var(--text-dim); }
.mk-met-l { font-family: var(--mono); font-size: 6.5px; letter-spacing: .1em; color: var(--text-dim); margin-top: 3px; text-transform: uppercase; }

/* bottom 2×2 grid: SEO · Blog · Social · Launch */
.mk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-card { border: 1px solid var(--border); border-radius: 9px; padding: 13px 15px; background: rgba(var(--accent-rgb),.03); }
.mk-sub { margin-top: 10px; }
.mk-sub-h { font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; margin-bottom: 5px; }
.mk-empty-note { font-family: var(--mono); font-size: 8.5px; color: var(--text-dim); line-height: 1.5; padding: 6px 0; }
.mk-empty-ic { color: var(--accent); margin-right: 4px; }

/* rank + AI-mention rows */
.mk-rank-row, .mk-mention-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.mk-rank-kw { font-family: var(--mono); font-size: 9px; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rank-pos { font-family: var(--display); font-size: 11px; font-weight: 700; color: var(--accent); }
.mk-rank-delta { font-family: var(--mono); font-size: 8px; min-width: 34px; text-align: right; color: var(--text-dim); }
.mk-rank-delta.mk-up { color: var(--good); }
.mk-rank-delta.mk-down { color: #ff6b78; }
.mk-mention-eng { font-family: var(--mono); font-size: 9px; color: var(--text); flex: 1; }
.mk-mention-cnt { font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--accent); }

/* list rows (blog / social / launch) */
.mk-list { display: flex; flex-direction: column; }
.mk-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.mk-list-main { font-family: var(--mono); font-size: 9px; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-tag { font-family: var(--mono); font-size: 6.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.mk-tag-published, .mk-tag-live, .mk-tag-ready, .mk-tag-sent { color: var(--good); border-color: rgba(var(--accent-rgb),.3); }
.mk-tag-draft, .mk-tag-queued, .mk-tag-scheduled, .mk-tag-review { color: var(--warn); }
.mk-social-left { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mk-social-when { font-family: var(--mono); font-size: 7.5px; color: var(--accent); letter-spacing: .04em; }
.mk-social-cap { font-family: var(--mono); font-size: 8.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-chan { font-family: var(--mono); font-size: 6.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════════════
   PHASE F REPAIR PART 2 — Issue A · Statusbar layout (fixed A4 2026-06-22)
   The statusbar has 4 children but only 2 are in normal flow: .status-left and
   .status-right. .status-center (greeting) is position:absolute (centered
   overlay, v61 rule below) and .status-jarvis is display:none. A 4-column grid
   left the right-side action buttons stranded in the 1fr column instead of
   anchoring to the right edge. The correct template for the two in-flow items
   is 2 columns: left in 1fr (flush-left), right in auto (flush-right). The
   absolute-centered greeting overlays on top.
   Selector: header#statusbar.statusbar (id + class) + !important beats @media.
   ═══════════════════════════════════════════════════════════════════════ */
header#statusbar.statusbar {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  overflow: hidden;
  align-items: center;
}

/* Phase F Repair — Sidebar nav rail-item layout */
.sidebar-nav .rail-item .ri-svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.35));
}
.sidebar-nav .rail-item .ri-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1; line-height: 1.1;
}
.sidebar-nav .rail-item .ri-label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.20em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-nav .rail-item .ri-sub {
  font-family: var(--sans); font-size: 9px; opacity: 0.55;
  text-transform: uppercase; letter-spacing: 0.12em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Phase F Repair — Sidebar group rows (fixed A4 2026-06-22)
   .rail-group is an expandable <button> parent (DEALS, etc). It carries the
   same .ri-svg + .ri-text children as a .rail-item <a> but did NOT share the
   .rail-item flex layout, and the trailing .rail-chev had no rule — so group
   labels misaligned against item labels and the chevron sat next to the label
   instead of flush-right. These rules align .rail-group to .rail-item and
   right-anchor the chevron. Kept in jarvis.css (single stylesheet, G4). */
.sidebar-nav .rail-group {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 11px;
  width: 100%;
  background: transparent; border: 0;
  border-left: 2px solid transparent;
  color: var(--text-dim);
  font: inherit; text-align: left; cursor: pointer;
  transition: all .14s;
}
.sidebar-nav .rail-group:hover {
  color: var(--text); background: rgba(var(--accent-rgb),.06);
  border-left-color: rgba(var(--accent-rgb),.3);
}
.sidebar-nav .rail-group[aria-expanded="true"] {
  color: var(--accent); border-left-color: var(--accent);
}
.sidebar-nav .rail-chev {
  width: 12px; height: 12px; flex-shrink: 0; margin-left: auto;
  stroke: currentColor; opacity: .6;
  transition: transform .16s ease;
}
.sidebar-nav .rail-group[aria-expanded="true"] .rail-chev { transform: rotate(180deg); }

/* ── Error boundary: panel unavailable state ────────────────── */
.panel-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80px;
  gap: 4px;
}
.panel-unavailable span {
  font-size: 24px;
  color: var(--muted);
}
.panel-unavailable small {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .03em;
}

/* ── Quick-stats chip states ─────────────────────────────────── */
/* .fail  = fetch error / offline  (chip-offline visual = chip-bad) */
/* .warn  = degraded / partial     */
/* .cold  = not connected yet      */
.qs-chip.fail,
.chip-offline {
  background: rgba(255,91,58,.15);
  color: var(--bad);
}
.qs-chip.warn {
  background: rgba(255,191,0,.12);
  color: var(--warn);
}
.qs-chip.cold {
  opacity: 0.55;
}


/* === ATLAS V5 First-Paint Entry Animations (2026-06-22) ==================
   Staggered "coming alive" effect on initial page load.
   JS (app.js runEntryAnimation) adds .atlas-entered with per-element delay.
   animation-fill-mode: forwards keeps the final state — no re-trigger.
========================================================================== */
@keyframes atlas-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes atlas-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* All stagger targets start invisible */
.atlas-entry { opacity: 0; }

/* JS adds .atlas-entered to trigger each panel with its stagger delay */
.atlas-entered {
  animation: atlas-fade-up 420ms cubic-bezier(.4,0,.2,1) forwards;
}

/* KPI strip: fade-in only (no vertical shift — it lives in flow) */
.kpi-strip.atlas-entered,
.kpi-row.atlas-entered {
  animation: atlas-fade-in 320ms ease forwards;
}

/* ════════════════════════════════════════════════════════════
   WCAG AA — PLACEHOLDER CONTRAST (T23, 2026-06-22)
   Browser-default placeholder (~54% of input text color) drifts below
   4.5:1 on the dark input backgrounds. Pin every input/textarea placeholder
   to var(--text-dim) — passes both themes. #cmd-input sets its own.
   ──────────────────────────────────────────────────────────── */
input::placeholder,
textarea::placeholder {
  color: var(--text-dim);
  opacity: 1; /* Firefox lowers placeholder opacity by default — undo it */
}

/* --- north_star_final.css --- */
/* =============================================================
   NORTH STAR FINAL — Single source of truth visual override
   Loads after jarvis.css v79. Matches atlas_mockup_north_star.png.
   ============================================================= */

/* ── 0. CSS VARIABLE OVERRIDES ─────────────────────────────────── */
:root {
  --bg:         #04080f !important;
  --bg2:        #060b18 !important;
  --bg3:        #080e1e !important;
  --panel:      #060a18 !important;
  --border:     rgba(0,190,255,.11) !important;
  --border2:    rgba(0,190,255,.06) !important;
  --text:       #d8eeff !important;
  --text-dim:   #8ab0d0 !important;
  /* WCAG AA contrast fix (T23): #4d7a9c (~4.1:1 on --bg2 #060b18) → #5e8aac (~4.7:1).
     This north_star_final :root override is the LIVE default-dark muted token. */
  --text-muted: #5e8aac !important;
  --accent:     #00d6ff !important;
  --accent-rgb: 0,214,255 !important;
  --accent2:    #9c5cff !important;
  --accent2-rgb:156,92,255 !important;
  --good:       #3affad !important;
  --good-rgb:   58,255,173 !important;
  --warn:       #ffb848 !important;
  --bad:        #ff4a6a !important;
  --rad:        8px !important;
}

/* ── 0b. DEAD-SPACE ROWS — hide until data wired ───────────────── */
.phase-b-row { display: none !important; }

/* ── 1. FRAME / LAYOUT ──────────────────────────────────────────── */
html, body {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  background: #04080f !important;
}
.frame {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  grid-template-columns: 215px 1fr !important;
  background: radial-gradient(ellipse 130% 80% at 60% 40%,
    rgba(0,55,150,.08) 0%,
    rgba(0,25,70,.04) 45%,
    #04080f 80%) !important;
}
.main-col { overflow: hidden !important; height: 100% !important; display: flex; flex-direction: column; }
.canvas   { overflow: hidden !important; flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 6px 7px; }

/* ── 2. STATUS BAR ──────────────────────────────────────────────── */
header#statusbar {
  background: rgba(4,8,20,.96) !important;
  border-bottom: 1px solid rgba(0,185,255,.1) !important;
  height: 56px !important;
  flex-shrink: 0 !important;
}

/* Chips: stacked label / value */
.sa-btn {
  height: 36px !important;
  min-width: 64px !important;
  padding: 3px 10px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border-radius: 6px !important;
  background: rgba(0,15,40,.65) !important;
  border: 1px solid rgba(0,185,255,.18) !important;
  display: flex !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.sa-btn:hover {
  border-color: rgba(0,210,255,.46) !important;
  box-shadow: 0 0 14px rgba(0,190,255,.16) !important;
}
.sa-status-label {
  font-size: 6px !important;
  letter-spacing: 0.15em !important;
  color: rgba(100,160,210,.65) !important;
  text-transform: uppercase !important;
  display: block !important;
  line-height: 1.4 !important;
}
.sa-status-value {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #3affad !important;
  text-shadow: 0 0 9px rgba(58,255,173,.45) !important;
  letter-spacing: 0.04em !important;
  display: block !important;
  line-height: 1.2 !important;
}

/* Greeting: BIG, absolute-centered, glowing */
.status-center {
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  transform: translate(-50%,-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: none !important;
  width: max-content !important;
}
.greeting-headline {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3em !important;
  color: #00d6ff !important;
  text-shadow:
    0 0 20px rgba(0,214,255,.9),
    0 0 45px rgba(0,185,255,.5),
    0 0 90px rgba(0,130,220,.22) !important;
  line-height: 1 !important;
}
.greeting-subline {
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  color: rgba(100,170,220,.55) !important;
  margin-top: 2px !important;
}

/* ── 3. SIDEBAR ─────────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #050a1d 0%, #040816 100%) !important;
  border-right: 1px solid rgba(0,185,255,.09) !important;
}
.sb-logo {
  width: 34px !important; height: 34px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg,
    rgba(0,185,255,.22) 0%,
    rgba(120,55,210,.16) 100%) !important;
  border: 1.5px solid rgba(0,200,255,.42) !important;
  box-shadow: 0 0 14px rgba(0,180,255,.28) !important;
  display: flex !important; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 18px; font-weight: 700;
  color: #00d6ff !important; flex-shrink: 0;
}
.sb-logo::after { content: 'N'; }
.sb-org  { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.13em !important; }
.sb-sub  { font-size: 7.5px !important; letter-spacing: 0.16em !important; color: rgba(100,165,215,.6) !important; }

.rail-item { border-radius: 0 6px 6px 0 !important; transition: all .14s !important; }
.rail-item:hover { background: rgba(0,185,255,.05) !important; transform: translateX(1px) !important; }
.rail-item.active {
  background: linear-gradient(90deg,
    rgba(0,185,255,.16) 0%,
    rgba(0,185,255,.04) 100%) !important;
  box-shadow: inset 3px 0 0 #00d6ff !important;
}
.rail-item.active .ri-label {
  color: #00d6ff !important;
  text-shadow: 0 0 10px rgba(0,214,255,.4) !important;
}
.ri-label { font-size: 10.5px !important; letter-spacing: 0.17em !important; }
.ri-sub   { font-size: 8px !important; color: rgba(100,160,210,.55) !important; }
.ri-ic    { font-size: 13px !important; width: 18px !important; text-align: center !important; }

/* Sidebar clock */
.sb-time {
  font-size: 30px !important; font-weight: 700 !important;
  color: #00d6ff !important;
  text-shadow: 0 0 22px rgba(0,210,255,.62) !important;
  letter-spacing: 0.03em !important;
}
.sb-ampm { font-size: 11px !important; font-weight: 600 !important; }
.sb-sec  { font-size: 10px !important; color: rgba(0,185,255,.5) !important; }
.sb-date-day { font-size: 11px !important; font-weight: 600 !important; }
.sb-date-dow { font-size: 8.5px !important; color: rgba(100,160,210,.6) !important; }

/* User card */
.sb-user-avatar {
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  background: rgba(0,185,255,.18) !important;
  border: 1.5px solid rgba(0,200,255,.4) !important;
  font-size: 12px !important;
}
.sb-user-name { font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.1em !important; }
.sb-user-role { font-size: 8px !important; color: rgba(100,165,215,.6) !important; }
.sb-user-pill { font-size: 7px !important; padding: 2px 6px !important; letter-spacing: 0.1em !important; }

/* ── 4. KPI STRIP ───────────────────────────────────────────────── */
.kpi-strip { height: 96px !important; flex-shrink: 0 !important; }

.kpi-tile {
  background: linear-gradient(180deg,
    rgba(0,100,200,.07) 0%,
    rgba(4,9,22,.97) 100%) !important;
  border: 1px solid rgba(0,185,255,.13) !important;
  border-radius: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 8px 11px 5px !important;
}
/* Top cyan hairline */
.kpi-tile::before {
  content: '' !important;
  position: absolute !important; inset: 0 0 auto 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,210,255,.42) 25%,
    rgba(0,228,255,.92) 50%,
    rgba(0,210,255,.42) 75%,
    transparent 100%) !important;
  pointer-events: none !important; z-index: 2 !important;
}
/* Bottom ambient glow */
.kpi-tile::after {
  content: '' !important;
  position: absolute !important; inset: auto 0 0 0 !important;
  height: 50% !important;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(0,175,255,.07) 0%, transparent 70%) !important;
  pointer-events: none !important; z-index: 0 !important;
}
.kpi-label {
  font-size: 7.5px !important; letter-spacing: 0.17em !important;
  color: rgba(100,165,215,.68) !important;
  font-weight: 600 !important; text-transform: uppercase !important;
  position: relative !important; z-index: 1 !important;
}
.kpi-number {
  font-size: 28px !important; font-weight: 700 !important;
  line-height: 1 !important; letter-spacing: -0.01em !important;
  color: #daeeff !important;
  text-shadow: 0 0 18px rgba(0,185,255,.38) !important;
  position: relative !important; z-index: 1 !important;
}
.kpi-delta {
  font-size: 9px !important; font-weight: 700 !important;
  padding: 1px 5px !important; border-radius: 3px !important;
  background: rgba(58,255,173,.12) !important;
  border: 1px solid rgba(58,255,173,.28) !important;
  color: #3affad !important;
  position: relative !important; z-index: 1 !important;
}
.kpi-delta.down {
  background: rgba(255,74,106,.12) !important;
  border-color: rgba(255,74,106,.28) !important;
  color: #ff4a6a !important;
}
.kpi-compare { font-size: 7px !important; color: rgba(90,150,195,.45) !important; }
.kpi-spark-line {
  stroke-width: 1.5 !important;
  filter: drop-shadow(0 0 3px rgba(0,210,255,.55)) !important;
}

/* ── 5. MIDDLE ROW (flex:1 to dominate) ────────────────────────── */
.middle-row {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  grid-template-columns: 268px 1fr 264px !important;
  gap: 5px !important;
}

/* ── 6. GLOBE / HUD HERO — THE CENTERPIECE ─────────────────────── */
.hud-hero.earth-hero {
  background:
    radial-gradient(ellipse 100% 105% at 50% 52%,
      rgba(0,85,235,.42) 0%,
      rgba(0,58,175,.24) 22%,
      rgba(0,28,95,.13)  48%,
      transparent 74%),
    radial-gradient(ellipse 65% 74% at 50% 50%,
      rgba(0,48,145,.28) 0%,
      transparent 56%),
    #040812 !important;
  border: 1px solid rgba(0,185,255,.15) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
/* Outer halo pulse ring */
.hud-hero.earth-hero::after {
  content: '' !important;
  position: absolute !important;
  width: 112% !important; height: 112% !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(130,65,255,.24) !important;
  box-shadow:
    0 0 50px rgba(130,65,255,.15),
    0 0 110px rgba(0,100,255,.07),
    inset 0 0 90px rgba(0,65,185,.05) !important;
  pointer-events: none !important; z-index: 0 !important;
  animation: ns-halo 7s ease-in-out infinite !important;
}
@keyframes ns-halo {
  0%,100% { opacity: .6;  transform: translate(-50%,-50%) scale(1);    }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.035);}
}
.earth-stage { z-index: 1 !important; perspective: 900px !important; }

/* The globe sphere */
.eh-earth {
  width: 64% !important;
  background:
    radial-gradient(ellipse at 30% 28%,
      #72b8ff 0%,
      #3278ee 13%,
      #1040c8 30%,
      #061a6e 60%,
      #020a28 88%) !important;
  box-shadow:
    inset -30px -30px 64px rgba(0,0,0,.96),
    inset 20px 20px 54px rgba(60,150,255,.70),
    0 0 110px rgba(0,140,255,1),
    0 0 220px rgba(0,100,230,.75),
    0 0 400px rgba(0,65,195,.42),
    0 0 650px rgba(0,35,165,.18) !important;
  animation: ns-breathe 8s ease-in-out infinite !important;
}
@keyframes ns-breathe {
  0%,100% { filter: brightness(1);    }
  50%      { filter: brightness(1.14); }
}
/* Orbital rings */
.eh-ring { border-width: 1.5px !important; transform-style: preserve-3d !important; }
.eh-ring-r1 {
  border-color: rgba(0,225,255,.82) !important;
  filter: drop-shadow(0 0 7px rgba(0,225,255,.88)) !important;
  width: 70% !important; height: 70% !important;
  animation: ns-ring-flat 18s linear infinite !important;
}
.eh-ring-r2 {
  border-color: rgba(148,68,255,.72) !important;
  filter: drop-shadow(0 0 7px rgba(148,68,255,.85)) !important;
  width: 84% !important; height: 42% !important;
  animation: ns-ring-tilt70 14s linear infinite reverse !important;
}
.eh-ring-r3 {
  border-color: rgba(0,200,255,.42) !important;
  filter: drop-shadow(0 0 5px rgba(0,200,255,.55)) !important;
  width: 98% !important; height: 54% !important;
  animation: ns-ring-tilt55 22s linear infinite !important;
}
@keyframes ns-ring-flat {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes ns-ring-tilt70 {
  from { transform: translate(-50%,-50%) rotateX(72deg) rotateZ(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(72deg) rotateZ(360deg); }
}
@keyframes ns-ring-tilt55 {
  from { transform: translate(-50%,-50%) rotateX(58deg) rotateZ(0deg); }
  to   { transform: translate(-50%,-50%) rotateX(58deg) rotateZ(360deg); }
}

/* Globe center text */
.eh-title {
  font-size: 21px !important; font-weight: 800 !important;
  letter-spacing: 0.3em !important; color: #00d6ff !important;
  text-shadow:
    0 0 22px rgba(0,214,255,.95),
    0 0 50px rgba(0,185,255,.55),
    0 0 100px rgba(0,120,230,.25) !important;
  margin: 0 0 3px !important;
}
.eh-subtitle {
  font-size: 8.5px !important; letter-spacing: 0.28em !important;
  color: #3affad !important;
  text-shadow: 0 0 14px rgba(58,255,173,.65) !important;
  margin: 0 0 7px !important;
}
.eh-sync     { color: #3affad !important; font-size: 7.5px !important; letter-spacing: 0.12em !important; }
.eh-sync-dot {
  background: #3affad !important;
  box-shadow: 0 0 8px #3affad, 0 0 18px rgba(58,255,173,.5) !important;
}
/* Corner stat values */
.ehs-val {
  font-size: 30px !important; font-weight: 800 !important; line-height: 1 !important;
  text-shadow: 0 0 20px rgba(0,185,255,.48) !important;
}
.ehs-val.ehs-val-cyan { color: #3affad !important; text-shadow: 0 0 20px rgba(58,255,173,.5) !important; }
.ehs-lab { font-size: 6.5px !important; letter-spacing: 0.2em !important; color: rgba(90,160,215,.6) !important; }
.ehs-sub { font-size: 6.5px !important; letter-spacing: 0.14em !important; color: #00d6ff !important; }

/* Voice orb */
.orb {
  background: radial-gradient(circle at 34% 34%,
    rgba(0,214,255,.55), rgba(0,100,200,.12)) !important;
  border-color: rgba(0,214,255,.5) !important;
  box-shadow: 0 0 16px rgba(0,214,255,.45), 0 0 32px rgba(0,140,200,.22) !important;
}
.orb-ring { border-color: rgba(0,214,255,.22) !important; }

/* ── 7. SHARED PANEL HEADER ────────────────────────────────────── */
.panel-h {
  position: relative !important;
  padding-left: 10px !important;
  border-bottom: 1px solid rgba(0,185,255,.13) !important;
  padding-bottom: 7px !important;
  margin-bottom: 7px !important;
}
.panel-h::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 2px !important; bottom: 5px !important;
  width: 2px !important;
  background: linear-gradient(180deg, #00d6ff, transparent) !important;
  border-radius: 1px !important; opacity: .85 !important;
}
.panel-h-lab {
  font-size: 9.5px !important; letter-spacing: 0.18em !important;
  font-weight: 700 !important; color: #00d6ff !important;
  font-family: var(--display) !important;
}
.panel-h-real {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 2px 6px !important; border-radius: 3px !important;
  background: rgba(58,255,173,.12) !important; color: #3affad !important;
  border: 1px solid rgba(58,255,173,.26) !important;
  font-size: 7px !important; letter-spacing: 0.14em !important;
}
.panel-h-real::before {
  content: '' !important; width: 5px !important; height: 5px !important;
  border-radius: 50% !important; background: #3affad !important;
  box-shadow: 0 0 6px #3affad !important;
  animation: blink 1.4s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}
.panel-h-meta {
  padding: 2px 6px !important; border-radius: 3px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(0,185,255,.1) !important;
  font-size: 7px !important; letter-spacing: 0.10em !important;
}
.panel-h-link { font-size: 7px !important; letter-spacing: 0.10em !important; color: #00d6ff !important; opacity: .7 !important; }
.panel-h-link:hover { opacity: 1 !important; }

/* ── 8. ALERTS COLUMN ───────────────────────────────────────────── */
.alerts-col {
  background: rgba(4,8,24,.92) !important;
  border: 1px solid rgba(0,185,255,.11) !important;
  border-radius: 8px !important;
}
.alerts-list { gap: 4px !important; }
/* Severity-color left-border cards */
.alert-item {
  border-left: 3px solid #00d6ff !important;
  border-radius: 5px !important;
  padding: 6px 8px !important;
  background: rgba(0,180,255,.03) !important;
  margin-bottom: 3px !important;
  transition: background .14s !important;
}
.alert-item.high, .alert-item[data-severity="high"] {
  border-left-color: #ff4a6a !important;
  background: rgba(255,74,106,.04) !important;
}
.alert-item.med, .alert-item[data-severity="medium"] {
  border-left-color: #ffb848 !important;
  background: rgba(255,184,72,.04) !important;
}
.alert-item.low, .alert-item[data-severity="low"] {
  border-left-color: #3affad !important;
  background: rgba(58,255,173,.04) !important;
}
.alert-row[data-kind="high"]   { border-left: 3px solid #ff4a6a !important; background: rgba(255,74,106,.04) !important; border-radius: 4px !important; }
.alert-row[data-kind="medium"] { border-left: 3px solid #ffb848 !important; background: rgba(255,184,72,.04) !important; border-radius: 4px !important; }
.alert-row[data-kind="low"]    { border-left: 3px solid #3affad !important; background: rgba(58,255,173,.04) !important; border-radius: 4px !important; }
.alert-title { font-size: 9px !important; color: #cce0f8 !important; line-height: 1.35 !important; font-weight: 600 !important; }
.alert-meta  { font-size: 7.5px !important; color: rgba(90,150,200,.6) !important; }
.alert-time  { font-size: 7px !important; color: rgba(90,150,200,.55) !important; }
.alerts-view-all {
  font-size: 7.5px !important; padding: 4px 8px !important; margin-top: 6px !important;
  background: rgba(0,185,255,.08) !important;
  border: 1px solid rgba(0,185,255,.2) !important;
  color: #00d6ff !important;
}

/* ── 9. CALENDAR COLUMN ─────────────────────────────────────────── */
.calendar-col {
  background: rgba(4,8,24,.92) !important;
  border: 1px solid rgba(0,185,255,.11) !important;
  border-radius: 8px !important;
}
/* Wave 17 — cal-list scrollable for 7 upcoming events */
#cal-list { max-height: 230px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,185,255,.25) transparent; }
#cal-list::-webkit-scrollbar { width: 3px; }
#cal-list::-webkit-scrollbar-thumb { background: rgba(0,185,255,.3); border-radius: 2px; }
.cal-time  { color: #00d6ff !important; font-size: 8px !important; width: 40px !important; }
.cal-title { font-size: 9px !important; color: #cce0f8 !important; }
.cal-meta  { font-size: 7px !important; color: rgba(90,155,200,.6) !important; }
.cal-row {
  padding: 5px 0 !important;
  border-bottom: 1px solid rgba(0,145,200,.08) !important;
  transition: background .13s !important;
}
.cal-row:hover { background: rgba(0,185,255,.04) !important; border-radius: 3px !important; }
.cal-avatar { width: 22px !important; height: 22px !important; }

/* Integrations mini list inside calendar col — un-hide + style */
.side-integ {
  display: block !important;
  border-top: 1px solid rgba(0,185,255,.1) !important;
  margin-top: 6px !important; padding-top: 6px !important;
}
.integ-list-mini { gap: 3px !important; }
.integ-name { font-size: 7.5px !important; color: #9ac8e8 !important; }
.integ-stat { font-size: 7px !important; color: #3affad !important; text-shadow: 0 0 6px rgba(58,255,173,.3) !important; }
.integ-ic { width: 16px !important; height: 16px !important; font-size: 8px !important; border-radius: 3px !important; }
/* Hide the SVG network diagram to save vertical space */
.integ-net { display: none !important; }
.integ-split { flex-direction: column !important; }

/* System intel compact — inside alerts-col */
.alerts-intel {
  margin-top: 8px !important;
  border-top: 1px solid rgba(0,185,255,.1) !important;
  padding-top: 7px !important;
}
.alerts-intel .intel-tag {
  display: flex !important; align-items: center !important; gap: 4px !important;
  margin-bottom: 4px !important;
}
.alerts-intel .intel-spark { color: #00d6ff !important; font-size: 9px !important; }
.alerts-intel .intel-tag-lab { font-size: 7px !important; letter-spacing: 0.14em !important; color: rgba(100,170,215,.7) !important; }
.alerts-intel .intel-body { font-size: 8px !important; line-height: 1.5 !important; color: #aac8e8 !important; margin: 0 0 5px !important; }
.alerts-intel .intel-btn {
  font-size: 7px !important; padding: 3px 7px !important;
  background: rgba(0,185,255,.08) !important;
  border: 1px solid rgba(0,185,255,.2) !important;
  color: #00d6ff !important;
}

/* ── 10. OPS ROW — agents full-width per North Star ────────────── */
.ops-row {
  grid-template-columns: 1fr !important;
  height: 218px !important;
  flex-shrink: 0 !important;
}
/* Hide flanking panels — their info surfaces in middle-row columns */
.ops-intel       { display: none !important; }
.ops-integrations{ display: none !important; }

.ops-agents.agents-grid {
  background: rgba(4,8,24,.92) !important;
  border: 1px solid rgba(0,185,255,.11) !important;
  border-radius: 8px !important;
}
.agents-cards { gap: 10px !important; }

/* ── 11. AGENT CARDS ────────────────────────────────────────────── */
.agent-card {
  padding: 12px 6px 10px !important; gap: 4px !important;
  border-radius: 10px !important;
  background: rgba(0,20,55,.5) !important;
  border: 1px solid rgba(0,185,255,.12) !important;
  transition: transform .18s, box-shadow .18s !important;
}
.agent-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.5) !important;
}

/* Icon wrap: 76px circle matching North Star mockup */
.agent-icon-wrap {
  width: 76px !important; height: 76px !important;
  border-radius: 50% !important; flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Blurred halo behind each orb */
.agent-icon-wrap::before {
  content: '' !important;
  position: absolute !important; inset: -4px !important;
  border-radius: 50% !important; background: inherit !important;
  filter: blur(10px) !important; opacity: .42 !important; z-index: -1 !important;
}

/* ── Per-agent colored 3D spheres ── */
.agent-card[data-agent="listings"] .agent-icon-wrap {
  background: radial-gradient(circle at 32% 28%, #e8b8ff 0%, #9050e8 42%, #3a0e80 78%, #180438 100%) !important;
  border: 1.5px solid rgba(178,100,255,.7) !important;
  box-shadow: 0 0 28px rgba(156,92,255,.95), 0 0 58px rgba(156,92,255,.5), 0 0 95px rgba(156,92,255,.2) !important;
}
.agent-card[data-agent="listings"] {
  background: linear-gradient(180deg, rgba(145,65,255,.07), rgba(80,20,160,.14)) !important;
  border-color: rgba(156,92,255,.28) !important;
}
.agent-card[data-agent="listings"] .agent-base {
  background: linear-gradient(90deg, transparent, #9c5cff, transparent) !important;
  box-shadow: 0 0 18px rgba(156,92,255,1), 0 0 38px rgba(156,92,255,.5) !important;
}

.agent-card[data-agent="transactions"] .agent-icon-wrap {
  background: radial-gradient(circle at 32% 28%, #90f8ff 0%, #00c8e8 42%, #003850 78%, #001620 100%) !important;
  border: 1.5px solid rgba(0,229,255,.7) !important;
  box-shadow: 0 0 28px rgba(0,229,255,.95), 0 0 58px rgba(0,229,255,.5), 0 0 95px rgba(0,229,255,.2) !important;
}
.agent-card[data-agent="transactions"] {
  background: linear-gradient(180deg, rgba(0,205,255,.09), rgba(0,80,160,.18)) !important;
  border-color: rgba(0,229,255,.32) !important;
}
.agent-card[data-agent="transactions"] .agent-base {
  background: linear-gradient(90deg, transparent, #00e5ff, transparent) !important;
  box-shadow: 0 0 18px rgba(0,229,255,1), 0 0 38px rgba(0,229,255,.5) !important;
}

.agent-card[data-agent="sales"] .agent-icon-wrap {
  background: radial-gradient(circle at 32% 28%, #ffe8a0 0%, #ffac48 42%, #7a3e00 78%, #301400 100%) !important;
  border: 1.5px solid rgba(255,182,72,.7) !important;
  box-shadow: 0 0 28px rgba(255,182,72,.95), 0 0 58px rgba(255,182,72,.5), 0 0 95px rgba(255,182,72,.2) !important;
}
.agent-card[data-agent="sales"] {
  background: linear-gradient(180deg, rgba(255,165,40,.09), rgba(160,80,0,.18)) !important;
  border-color: rgba(255,182,72,.32) !important;
}
.agent-card[data-agent="sales"] .agent-base {
  background: linear-gradient(90deg, transparent, #ffb848, transparent) !important;
  box-shadow: 0 0 18px rgba(255,184,72,1), 0 0 38px rgba(255,184,72,.5) !important;
}

.agent-card[data-agent="marketing"] .agent-icon-wrap {
  background: radial-gradient(circle at 32% 28%, #ffd0b0 0%, #ff8040 42%, #622000 78%, #280c00 100%) !important;
  border: 1.5px solid rgba(255,125,58,.7) !important;
  box-shadow: 0 0 28px rgba(255,125,58,.95), 0 0 58px rgba(255,125,58,.5), 0 0 95px rgba(255,125,58,.2) !important;
}
.agent-card[data-agent="marketing"] {
  background: linear-gradient(180deg, rgba(255,125,58,.09), rgba(160,50,0,.18)) !important;
  border-color: rgba(255,125,58,.32) !important;
}
.agent-card[data-agent="marketing"] .agent-base {
  background: linear-gradient(90deg, transparent, #ff7d3a, transparent) !important;
  box-shadow: 0 0 18px rgba(255,125,58,1), 0 0 38px rgba(255,125,58,.5) !important;
}

.agent-card[data-agent="client-care"] .agent-icon-wrap {
  background: radial-gradient(circle at 32% 28%, #ffccd4 0%, #f84060 42%, #620018 78%, #280008 100%) !important;
  border: 1.5px solid rgba(251,80,102,.7) !important;
  box-shadow: 0 0 28px rgba(251,80,102,.95), 0 0 58px rgba(251,80,102,.5), 0 0 95px rgba(251,80,102,.2) !important;
}
.agent-card[data-agent="client-care"] {
  background: linear-gradient(180deg, rgba(251,80,102,.09), rgba(160,20,50,.18)) !important;
  border-color: rgba(251,80,102,.32) !important;
}
.agent-card[data-agent="client-care"] .agent-base {
  background: linear-gradient(90deg, transparent, #fb5066, transparent) !important;
  box-shadow: 0 0 18px rgba(251,80,102,1), 0 0 38px rgba(251,80,102,.5) !important;
}

.agent-card[data-agent="operations"] .agent-icon-wrap {
  background: radial-gradient(circle at 32% 28%, #a0ffe0 0%, #18cc80 42%, #034830 78%, #011c10 100%) !important;
  border: 1.5px solid rgba(58,255,173,.7) !important;
  box-shadow: 0 0 28px rgba(58,255,173,.95), 0 0 58px rgba(58,255,173,.5), 0 0 95px rgba(58,255,173,.2) !important;
}
.agent-card[data-agent="operations"] {
  background: linear-gradient(180deg, rgba(58,255,173,.09), rgba(0,120,60,.18)) !important;
  border-color: rgba(58,255,173,.32) !important;
}
.agent-card[data-agent="operations"] .agent-base {
  background: linear-gradient(90deg, transparent, #3affad, transparent) !important;
  box-shadow: 0 0 18px rgba(58,255,173,1), 0 0 38px rgba(58,255,173,.5) !important;
}

/* Base glow line (shared) */
.agent-base {
  display: block !important; height: 2px !important; width: 84% !important;
  border-radius: 1px !important; opacity: 1 !important;
  margin-top: auto !important; flex-shrink: 0 !important;
}
.agent-img {
  display: block !important;
  width: 100% !important; height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  position: relative !important; z-index: 1 !important;
  transform: scale(1.35) !important;
}
/* Specular gloss — simulates glass-sphere light at top-left */
.agent-icon-wrap::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  width: 36% !important; height: 36% !important;
  top: 9% !important; left: 11% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(255,255,255,.74) 0%,
    rgba(255,255,255,.18) 52%,
    transparent 100%) !important;
  filter: blur(1.5px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Text */
.agent-name     { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.14em !important; color: #e2f0ff !important; text-align: center !important; line-height: 1.25 !important; }
.agent-name-2   { font-size: 8.5px !important; letter-spacing: 0.10em !important; opacity: .75 !important; color: #b0d0ee !important; }
.agent-role     { font-size: 8px !important; color: rgba(130,185,225,.7) !important; text-align: center !important; letter-spacing: 0.08em !important; }
.agent-tasks    { font-size: 8px !important; letter-spacing: 0.10em !important; color: rgba(120,175,215,.6) !important; }
.agent-tasks-num{ font-size: 24px !important; font-weight: 800 !important; line-height: 1 !important; color: #00d6ff !important; text-shadow: 0 0 14px rgba(0,210,255,.6) !important; }
.agent-icon-svg { display: none !important; }
.agent-initial { display: none !important; }

/* Footer bar */
.agents-foot { border-top-color: rgba(0,185,255,.1) !important; }
.af-dot-green { background: #3affad !important; box-shadow: 0 0 7px #3affad !important; }

/* ── 12. BOTTOM ROW ─────────────────────────────────────────────── */
.bottom-row { height: 174px !important; flex-shrink: 0 !important; }

.bp-card {
  background: linear-gradient(160deg,
    rgba(0,120,240,.08) 0%, rgba(0,40,100,.1) 35%, rgba(4,9,22,.98) 100%) !important;
  border: 1px solid rgba(0,185,255,.16) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(0,185,255,.10),
    inset 0 -1px 0 rgba(0,100,200,.06),
    0 4px 16px rgba(0,0,0,.45) !important;
}

/* Tasks donut */
.bp-donut-total {
  font-size: 22px !important; font-weight: 800 !important; color: #fff !important;
  text-shadow: 0 0 16px rgba(0,200,255,.55) !important;
}
.bp-donut-sub { color: rgba(90,155,200,.55) !important; font-size: 7px !important; }
.bp-task-dot  { box-shadow: 0 0 6px currentColor !important; }
.bp-task-lab  { color: rgba(120,175,215,.7) !important; }
.bp-task-val  { color: #daeeff !important; }
.bp-view-all  {
  font-size: 7.5px !important; padding: 4px 7px !important;
  background: rgba(0,185,255,.08) !important;
  border: 1px solid rgba(0,185,255,.2) !important;
  color: #00d6ff !important;
}

/* Pipeline — vertical funnel layout */
/* Override the higher-specificity jarvis.css selector too */
.bp-pipeline .pipeline-stages,
.pipeline-stages {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
  padding: 5px 7px !important;
  min-height: 0 !important;
  align-items: stretch !important;
  grid-template-columns: none !important;
}

.pp-stage {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 0 6px 0 8px !important;
  border-left: 3px solid var(--st) !important;
  border-bottom: none !important;
  border-radius: 0 4px 4px 0 !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
  background: rgba(4,10,28,.7) !important;
  box-shadow: none !important;
  transform: none !important;
  gap: 0 !important;
  transition: background .12s !important;
}
.pp-stage:hover {
  background: rgba(0,20,52,.85) !important;
  transform: none !important;
  border-left-width: 4px !important;
}

/* Proportional funnel fill bar — narrows each stage to show conversion drop */
.pp-stage::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: var(--fill, 50%) !important;
  background: linear-gradient(90deg, rgba(255,255,255,.07) 0%, transparent 100%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Default proportions — JS can set inline --fill for real data */
.pp-stage[data-stage="new-leads"]      { --fill: 100%; }
.pp-stage[data-stage="contacted"]      { --fill: 66%; }
.pp-stage[data-stage="showing"]        { --fill: 42%; }
.pp-stage[data-stage="offer"]          { --fill: 22%; }
.pp-stage[data-stage="under-contract"] { --fill: 10%; }

.pp-lab {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 !important;
  width: auto !important;
  text-align: left !important;
  font-size: 7px !important;
  font-weight: 600 !important;
  letter-spacing: 0.11em !important;
  color: rgba(160,205,235,.78) !important;
  line-height: 1.2 !important;
}

.pp-num {
  position: relative !important;
  z-index: 1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #e8f4ff !important;
  text-shadow: 0 0 8px rgba(255,255,255,.3) !important;
  min-width: 24px !important;
  text-align: right !important;
  margin-left: 4px !important;
}

.pp-val { display: none !important; }

/* Pipeline stats — compact 2-metric strip matching North Star */
.pipeline-stats {
  display: flex !important;
  flex-direction: row !important;
  flex-shrink: 0 !important;
  gap: 4px !important;
  padding: 3px 7px 4px !important;
  border-top: 1px solid rgba(0,185,255,.08) !important;
  min-height: 0 !important;
}
.pipeline-stats > * {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.pps-val-cyan  { color: #00d6ff !important; }
.pps-val-green { color: #3affad !important; }
.pps-lab {
  font-size: 5px !important;
  color: rgba(90,155,200,.55) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}
.pps-row { display: flex !important; align-items: baseline !important; gap: 3px !important; }
.pps-val { font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; }
.pps-meta { font-size: 5px !important; color: rgba(90,155,200,.45) !important; line-height: 1.2 !important; }
.pps-delta { font-size: 5.5px !important; }

/* Bottom row: matched to North Star mockup proportions */
.bottom-row {
  grid-template-columns: 155px 185px minmax(200px, 1fr) minmax(190px, 1fr) 185px 175px !important;
  gap: 4px !important;
}

/* Panel header overrides — brighter, more legible */
.panel-h {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  padding: 6px 8px 5px !important;
  border-bottom: 1px solid rgba(0,185,255,.10) !important;
  min-height: 0 !important;
}
.panel-h-lab {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: rgba(0,210,255,.85) !important;
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.panel-h-link {
  font-size: 7px !important;
  color: rgba(0,185,255,.5) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.panel-h-meta {
  font-size: 7px !important;
  color: rgba(90,155,200,.5) !important;
  font-weight: 400 !important;
}

/* Pipeline funnel: stage number bigger + more visible */
.pp-num {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #e8f8ff !important;
  text-shadow: 0 0 10px rgba(0,200,255,.45) !important;
  min-width: 28px !important;
}
.pp-lab {
  font-size: 7px !important;
  color: rgba(160,210,235,.85) !important;
}

/* Goals bars — heavier labels + value display */
.goal-lab {
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: rgba(160,210,240,.85) !important;
}
.goal-pct {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #00d6ff !important;
  text-shadow: 0 0 10px rgba(0,200,255,.5) !important;
  min-width: 34px !important;
  text-align: right !important;
}
.goal-num {
  font-size: 7px !important;
  color: rgba(100,170,215,.65) !important;
}
.goal-bar {
  height: 9px !important;
  border-radius: 5px !important;
  background: rgba(0,185,255,.08) !important;
  border: 1px solid rgba(0,185,255,.1) !important;
  flex: 1 !important;
  min-width: 6px !important;
  overflow: hidden !important;
}
.goal-bar-fill {
  height: 100% !important;
  border-radius: 5px !important;
  box-shadow: 0 0 8px currentColor !important;
  transition: width .6s ease !important;
}

/* Deals table — urgency row colors */
.row-urgent .bp-td-date { color: #ff5b3a !important; font-weight: 700 !important; }
.row-warn   .bp-td-date { color: #ffb648 !important; font-weight: 600 !important; }
.row-ok     .bp-td-date { color: rgba(100,200,160,.8) !important; }
.bp-td-addr { font-size: 8.5px !important; color: #c8e4f8 !important; }
.bp-td-price { font-size: 9px !important; font-weight: 700 !important; color: #3affad !important; text-shadow: 0 0 8px rgba(58,255,173,.4) !important; }

/* Goals: bar + percentage INLINE (matching North Star layout) */
.goals-list { gap: 5px !important; padding: 4px 8px 5px !important; }
.goal-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 6px !important;
  row-gap: 2px !important;
}
.goal-meta {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
}
.goal-bar {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
}
.goal-pct {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #00d6ff !important;
  text-shadow: 0 0 8px rgba(0,200,255,.5) !important;
  text-align: right !important;
  min-width: 32px !important;
  line-height: 1 !important;
  align-self: center !important;
}
.goal-lab {
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: rgba(150,205,240,.85) !important;
}
.goal-num { font-size: 7px !important; color: rgba(100,165,215,.6) !important; }

/* Panel header: tighter to save vertical space */
.panel-h {
  padding: 4px 8px 4px !important;
  min-height: 0 !important;
}
.panel-h-lab {
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  color: rgba(0,210,255,.9) !important;
}

/* Deals table: proper column sizing + row padding */
.bp-tr-deals { grid-template-columns: 1fr 46px 72px !important; gap: 4px !important; }
.bp-tr { padding: 4px 6px !important; }
.bp-tr-head { padding: 3px 6px !important; font-size: 6.5px !important; color: rgba(90,155,200,.5) !important; letter-spacing: 0.12em !important; }
.bp-td-addr { font-size: 8px !important; color: #c0ddf5 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.bp-td-date { font-size: 7.5px !important; text-align: center !important; }
.bp-td-price { font-size: 9px !important; font-weight: 700 !important; color: #3affad !important; text-shadow: 0 0 7px rgba(58,255,173,.4) !important; text-align: right !important; }

/* Pipeline "UNDER CONTRACT" — single line, slightly smaller */
.pp-stage[data-stage="under-contract"] .pp-lab { font-size: 6.5px !important; white-space: nowrap !important; }

/* Team avatar: match NS styling */
.bp-avatar { width: 22px !important; height: 22px !important; font-size: 9px !important; font-weight: 700 !important; }
.bp-av-1 { background: rgba(0,185,255,.3) !important; border: 1px solid rgba(0,185,255,.5) !important; }
.bp-av-2 { background: rgba(156,92,255,.3) !important; border: 1px solid rgba(156,92,255,.5) !important; }
.bp-tr-team { grid-template-columns: 24px 1fr auto auto !important; gap: 5px !important; }

/* Team activity feed rows */
.ta-feed-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 5px !important;
  padding: 3px 0 !important;
  border-bottom: 1px solid rgba(0,185,255,.06) !important;
}
.ta-feed-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-top: 3px !important; }
.ta-feed-dot.ok   { background: #3affad !important; box-shadow: 0 0 5px #3affad !important; }
.ta-feed-dot.warn { background: #ffb648 !important; box-shadow: 0 0 5px #ffb648 !important; }
.ta-feed-who   { font-size: 8px !important; font-weight: 700 !important; color: #00d6ff !important; }
.ta-feed-action { font-size: 7.5px !important; color: rgba(180,215,240,.7) !important; display: block !important; }
.ta-feed-ts    { font-size: 6.5px !important; color: rgba(90,155,200,.5) !important; flex-shrink: 0 !important; margin-left: auto !important; }

/* Tables */
.bp-td-main, .bp-td-addr { font-size: 9px !important; color: #cce2fa !important; font-weight: 600 !important; }
.bp-td-sub  { color: rgba(90,155,200,.6) !important; }
.bp-td-val, .bp-td-price { color: #3affad !important; font-weight: 700 !important; }
.bp-td-date { color: #00d6ff !important; font-weight: 600 !important; }
.bp-tr { border-bottom-color: rgba(0,145,200,.08) !important; padding: 5px 0 !important; }
.bp-tr-head span { color: rgba(90,155,200,.6) !important; font-size: 7.5px !important; letter-spacing: 0.1em !important; }

/* Team avatars */
.bp-td-avatar { box-shadow: 0 0 8px rgba(0,185,255,.25) !important; }

/* Goals */
.goal-bar {
  height: 9px !important;
  background: rgba(0,90,180,.18) !important; border-radius: 4px !important;
  border: 1px solid rgba(0,185,255,.1) !important;
}
.goal-bar-fill {
  background: linear-gradient(90deg, #00d6ff, #9c5cff) !important;
  box-shadow: 0 0 10px rgba(0,185,255,.45) !important; border-radius: 4px !important;
  min-width: 6px !important;
}
.goal-lab { color: #9abcde !important; font-size: 8.5px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; }
.goal-num { color: #9abcde !important; font-size: 8.5px !important; }
.goal-pct { color: #00d6ff !important; font-size: 9px !important; font-weight: 700 !important; }

/* ── 13. QUICK BAR FOOTER ───────────────────────────────────────── */
.quick-bar {
  background: rgba(4,8,20,.97) !important;
  border-top: 1px solid rgba(0,185,255,.1) !important;
  height: 60px !important; flex-shrink: 0 !important;
}
.qb-voice-btn-big {
  width: 42px !important; height: 42px !important;
  background: radial-gradient(circle,
    rgba(0,214,255,.2), rgba(0,80,180,.06)) !important;
  border: 1px solid rgba(0,214,255,.42) !important;
  box-shadow: 0 0 22px rgba(0,214,255,.42), 0 0 44px rgba(0,150,200,.2) !important;
}
.qbvc-title  { color: #00d6ff !important; letter-spacing: 0.18em !important; font-size: 8px !important; }
.qbvc-prompt { color: rgba(100,165,215,.55) !important; font-size: 7.5px !important; }
.qb-btn {
  border-color: rgba(0,185,255,.16) !important;
  color: rgba(110,175,215,.7) !important; min-width: 58px !important;
}
.qb-btn:hover { border-color: rgba(0,210,255,.42) !important; color: #00d6ff !important; }
.qbs-dot  { background: #3affad !important; box-shadow: 0 0 7px #3affad !important; }
.qbs-stat { color: #3affad !important; }
.qb-label { font-size: 7.5px !important; color: rgba(100,165,215,.55) !important; }

/* ── 14. UTILITY / TAGS ─────────────────────────────────────────── */
.tag.live {
  background: rgba(58,255,173,.12) !important;
  border: 1px solid rgba(58,255,173,.3) !important;
  color: #3affad !important; font-size: 7px !important; letter-spacing: 0.12em !important;
}
.tag.stub {
  background: rgba(255,184,72,.12) !important;
  border: 1px solid rgba(255,184,72,.26) !important;
  color: #ffb848 !important;
}
.dot.good { background: #3affad !important; box-shadow: 0 0 5px #3affad !important; }
.dot.warn { background: #ffb848 !important; }
.dot.bad  { background: #ff4a6a !important; }

/* ── 15. SCROLLBAR THEMING ──────────────────────────────────────── */
::-webkit-scrollbar { width: 3px !important; height: 3px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
  background: rgba(0,185,255,.2) !important; border-radius: 2px !important;
}

/* ── 16. LIGHT THEME SAFETY ─────────────────────────────────────── */
:root[data-theme="light"] .hud-hero.earth-hero {
  background: radial-gradient(ellipse at 50% 50%, #b8d8ff 0%, #dceeff 75%) !important;
}
:root[data-theme="light"] .greeting-headline {
  color: #003590 !important; text-shadow: none !important;
}
:root[data-theme="light"] .kpi-tile::before {
  background: linear-gradient(90deg, transparent, rgba(0,80,200,.4), transparent) !important;
}
:root[data-theme="light"] .goal-bar-fill {
  background: linear-gradient(90deg, #0060cc, #6030b0) !important;
}
:root[data-theme="light"] .agent-card[data-agent="listings"] .agent-icon-wrap,
:root[data-theme="light"] .agent-card[data-agent="transactions"] .agent-icon-wrap,
:root[data-theme="light"] .agent-card[data-agent="sales"] .agent-icon-wrap,
:root[data-theme="light"] .agent-card[data-agent="marketing"] .agent-icon-wrap,
:root[data-theme="light"] .agent-card[data-agent="client-care"] .agent-icon-wrap,
:root[data-theme="light"] .agent-card[data-agent="operations"] .agent-icon-wrap {
  opacity: .85 !important;
}

/* ── v20 NORTH STAR FIDELITY PASS ───────────────────────────────── */

/* Panel header labels — fix truncation + "(MAY)" badge hidden from label */
.panel-h-lab {
  font-size: 7px !important;
  letter-spacing: 0.09em !important;
}
.panel-h-lab .panel-h-meta {
  display: none !important;
}

/* Pipeline fill bars — colored per stage (more visible than white .07) */
.pp-stage::before {
  background: linear-gradient(90deg, rgba(0,185,255,.14) 0%, transparent 75%) !important;
}
.pp-stage[data-stage="new-leads"]::before {
  background: linear-gradient(90deg, rgba(0,210,255,.22) 0%, transparent 80%) !important;
}
.pp-stage[data-stage="contacted"]::before {
  background: linear-gradient(90deg, rgba(0,185,255,.18) 0%, transparent 80%) !important;
}
.pp-stage[data-stage="showing"]::before {
  background: linear-gradient(90deg, rgba(130,80,255,.18) 0%, transparent 80%) !important;
}
.pp-stage[data-stage="offer"]::before {
  background: linear-gradient(90deg, rgba(255,184,72,.17) 0%, transparent 80%) !important;
}
.pp-stage[data-stage="under-contract"]::before {
  background: linear-gradient(90deg, rgba(58,255,173,.17) 0%, transparent 80%) !important;
}

/* Pipeline numbers — bigger, brighter */
.pp-num {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: #f0f8ff !important;
  text-shadow: 0 0 12px rgba(0,210,255,.5) !important;
  min-width: 30px !important;
}

/* Goals bar — taller + stronger glow + gradient fill */
.goal-bar {
  height: 10px !important;
  border-radius: 5px !important;
}
.goal-bar-fill {
  background: linear-gradient(90deg, #00d6ff 0%, #9c5cff 100%) !important;
  box-shadow: 0 0 14px rgba(0,200,255,.65), 0 0 5px rgba(0,200,255,.4) !important;
  border-radius: 5px !important;
}

/* Goals percentage — prominent inline display */
.goal-pct {
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #00d6ff !important;
  text-shadow: 0 0 14px rgba(0,185,255,.75) !important;
  min-width: 36px !important;
}

/* Goals label — slightly larger + brighter */
.goal-lab {
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  color: rgba(165,215,245,.9) !important;
}
.goal-num {
  font-size: 7px !important;
  color: rgba(100,165,215,.65) !important;
}

/* Task list items — clear label/value hierarchy */
.bp-task-lab {
  font-size: 6.5px !important;
  letter-spacing: 0.07em !important;
  color: rgba(120,178,215,.65) !important;
  flex: 1 !important;
}
.bp-task-val {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #daeeff !important;
  text-shadow: 0 0 8px rgba(0,180,255,.3) !important;
  min-width: 20px !important;
  text-align: right !important;
}

/* Deals table — urgency left border on rows */
.bp-deals-table .row-urgent,
.bp-table .row-urgent,
.row-urgent {
  border-left: 2px solid #ff5b3a !important;
  padding-left: 5px !important;
}
.bp-deals-table .row-warn,
.bp-table .row-warn,
.row-warn {
  border-left: 2px solid #ffb648 !important;
  padding-left: 5px !important;
}

/* Team activity feed — stronger name contrast */
.ta-feed-who {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #00d6ff !important;
  text-shadow: 0 0 8px rgba(0,185,255,.4) !important;
}
.ta-feed-action {
  font-size: 7.5px !important;
  color: rgba(185,220,245,.72) !important;
  line-height: 1.35 !important;
}
.ta-feed-ts {
  font-size: 6.5px !important;
  color: rgba(80,140,190,.5) !important;
}

/* SEO Intelligence — keyword rank items */
.bp-seo-rank { font-size: 8px !important; font-weight: 700 !important; color: #3affad !important; }
.bp-seo-kw   { font-size: 7.5px !important; color: #c0ddf5 !important; }
.bp-seo-meta { font-size: 6.5px !important; color: rgba(90,155,200,.55) !important; }

/* Pipeline stage label — slightly brighter */
.pp-lab {
  font-size: 7px !important;
  color: rgba(165,215,240,.88) !important;
  letter-spacing: 0.08em !important;
}

/* Bottom-row panel headers — hide links + left accent to give labels full width */
.bottom-row .panel-h-link { display: none !important; }
.bottom-row .panel-h::before { display: none !important; }
.bottom-row .panel-h { padding-left: 8px !important; }
/* Panel header real-time badge — keep but make subtle */
.bottom-row .panel-h-real { font-size: 6px !important; padding: 1px 4px !important; }

/* ── v21 NORTH STAR FIDELITY PASS ───────────────────────────────── */

/* Alerts: cap at 3 items + compact each item to ~38px */
.alerts-list .alert-item:nth-child(n+4) { display: none !important; }
.alert-item {
  padding: 5px 7px !important;
  margin-bottom: 2px !important;
}
.alert-title { font-size: 8px !important; line-height: 1.3 !important; }
.alert-meta  { font-size: 6.5px !important; line-height: 1.2 !important; }
.alert-time  { font-size: 6px !important; }
/* Alert item inner elements — tighter line spacing */
.alert-row { padding: 4px 6px !important; }

/* Pipeline stage numbers — colored per stage accent */
.pp-stage[data-stage="new-leads"]      .pp-num { color: #00d6ff !important; text-shadow: 0 0 12px rgba(0,210,255,.7) !important; }
.pp-stage[data-stage="contacted"]      .pp-num { color: #62b8ff !important; text-shadow: 0 0 12px rgba(80,170,255,.6) !important; }
.pp-stage[data-stage="showing"]        .pp-num { color: #c080ff !important; text-shadow: 0 0 12px rgba(160,80,255,.6) !important; }
.pp-stage[data-stage="offer"]          .pp-num { color: #ffb848 !important; text-shadow: 0 0 12px rgba(255,180,60,.6) !important; }
.pp-stage[data-stage="under-contract"] .pp-num { color: #3affad !important; text-shadow: 0 0 12px rgba(58,255,173,.6) !important; }

/* Agent role subtitles — more readable */
.agent-role {
  font-size: 7.5px !important;
  color: rgba(130,190,230,.72) !important;
  letter-spacing: 0.04em !important;
}
.agent-name-2 {
  font-size: 8px !important;
  color: rgba(200,230,255,.85) !important;
  letter-spacing: 0.1em !important;
}
.agent-tasks {
  font-size: 8px !important;
  color: rgba(100,175,215,.6) !important;
}
.agent-tasks b, .agent-tasks-num {
  color: #00d6ff !important;
  font-weight: 800 !important;
}

/* Side integrations — styled as colorful metric dots matching NS */
.integ-list-mini .bp-tr, .integ-row {
  padding: 3px 0 !important;
  border-bottom: 1px solid rgba(0,145,200,.07) !important;
}
.integ-name { font-size: 8px !important; color: #bcd8f0 !important; font-weight: 600 !important; }
.integ-stat { font-size: 8px !important; font-weight: 700 !important; }
.integ-ic {
  width: 18px !important; height: 18px !important;
  border-radius: 4px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}

/* AI Insight block — more visible */
.alerts-intel {
  background: rgba(0,185,255,.04) !important;
  border: 1px solid rgba(0,185,255,.12) !important;
  border-radius: 6px !important;
  padding: 7px 9px !important;
  margin-top: 6px !important;
}
.alerts-intel .intel-tag-lab {
  font-size: 7.5px !important;
  color: rgba(0,210,255,.85) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}
.alerts-intel .intel-body {
  font-size: 8.5px !important;
  color: rgba(185,225,250,.82) !important;
  line-height: 1.5 !important;
}
.alerts-intel .intel-spark {
  font-size: 11px !important;
  color: #00d6ff !important;
  text-shadow: 0 0 8px rgba(0,185,255,.6) !important;
}

/* ── v22 NORTH STAR FIDELITY PASS ───────────────────────────────── */

/* Team activity table — feed-style visual treatment */
.bp-tr-team {
  align-items: center !important;
  padding: 4px 6px !important;
  border-bottom: 1px solid rgba(0,145,200,.08) !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 3px 3px 0 !important;
  transition: border-color .12s, background .12s !important;
}
.bp-tr-team:hover {
  background: rgba(0,185,255,.04) !important;
}
/* First team member (primary) gets a cyan accent */
.bp-tr-team:first-child { border-left-color: #00d6ff !important; }
.bp-tr-team:nth-child(2) { border-left-color: #9c5cff !important; }
/* Avatar circles — more prominent */
.bp-avatar {
  width: 24px !important; height: 24px !important;
  font-size: 9.5px !important; font-weight: 800 !important;
  border-radius: 50% !important;
}
.bp-av-1 {
  background: linear-gradient(135deg, rgba(0,185,255,.35), rgba(0,100,200,.4)) !important;
  border: 1.5px solid rgba(0,185,255,.6) !important;
  box-shadow: 0 0 8px rgba(0,185,255,.3) !important;
}
.bp-av-2 {
  background: linear-gradient(135deg, rgba(156,92,255,.35), rgba(100,30,200,.4)) !important;
  border: 1.5px solid rgba(156,92,255,.6) !important;
  box-shadow: 0 0 8px rgba(156,92,255,.3) !important;
}
/* Team member name */
.bp-td-main {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #d0eaff !important;
}
/* Team header row */
.bp-tr-head {
  padding: 2px 6px !important;
  border-bottom: 1px solid rgba(0,145,200,.12) !important;
}

/* Agent cards — deeper glass + stronger glow ring */
.agent-card {
  background: linear-gradient(160deg,
    rgba(0,30,70,.6) 0%,
    rgba(0,15,40,.75) 60%,
    rgba(2,6,18,.9) 100%) !important;
  border: 1px solid rgba(0,185,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(0,185,255,.08),
              0 6px 20px rgba(0,0,0,.55) !important;
}
/* Agent card bottom reflection line */
.agent-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 10% !important; right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,185,255,.2), transparent) !important;
}
.agent-card { position: relative !important; }

/* Agent status dot (bottom of card) — keep small but vivid */
.agent-base {
  height: 2px !important;
  border-radius: 1px !important;
  margin: 3px 10px 0 !important;
}

/* KPI tile hover glow — stronger */
.kpi-tile:hover .kpi-val {
  text-shadow: 0 0 18px rgba(0,200,255,.7) !important;
}

/* Right column calendar — events more compact + readable */
.cal-time { font-size: 8.5px !important; color: #00d6ff !important; min-width: 36px !important; }
.cal-title { font-size: 9px !important; color: #cce0f8 !important; font-weight: 600 !important; }
.cal-meta  { font-size: 7px !important; color: rgba(90,155,200,.6) !important; }
.cal-row   { padding: 4px 0 !important; }

/* Side integrations — brighter metric display */
.integ-name { font-size: 8px !important; color: rgba(190,225,250,.85) !important; font-weight: 600 !important; }
.integ-stat { font-size: 8.5px !important; font-weight: 800 !important; }
.integ-ic   { font-size: 9px !important; }

/* Sidebar user card — polish */
.sb-user-name { font-size: 10px !important; color: #d0eaff !important; font-weight: 700 !important; }
.sb-user-role { font-size: 7px !important; color: rgba(100,165,215,.65) !important; }
.sb-avatar    { width: 32px !important; height: 32px !important; }

/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME — full surface + text + accent re-theme (added 2026-05-31)
   Fixes the pre-existing bug: north_star's `:root { --bg/--text/... !important }`
   block had NO [data-theme="light"] counterpart, so its !important values beat
   jarvis.css's (non-!important) light palette and the dashboard stayed dark in
   both modes. This block re-lights (a) the core vars — which re-lights every
   var-driven element jarvis.css owns (dept rows, command center, transcript),
   (b) north_star's hardcoded dark surfaces, (c) its hardcoded light-blue/white
   text that would be invisible on a cream base.
   Palette: cream/ivory base · deep-forest accent · warm-gold highlight (GPR brand).
   No hardcoded personalized strings — surfaces only. Voice orb/ring/transcript
   IDs + handlers untouched (this is color only). Frame stays 1080px (no layout).
   ════════════════════════════════════════════════════════════════════ */

/* (a) CORE VARS — !important + higher specificity beats north_star's :root */
:root[data-theme="light"] {
  --bg:         #f6f1e7 !important;
  --bg2:        #efe8d9 !important;
  --bg3:        #e7dcc8 !important;
  --panel:      #fffdf9 !important;
  --panel2:     #f3ecdd !important;
  --border:     rgba(36,66,50,.16) !important;
  --border2:    rgba(36,66,50,.09) !important;
  --text:       #1c2b22 !important;
  --text-dim:   rgba(28,43,34,.58) !important;
  /* WCAG AA contrast fix (T23): .36 (~1.8:1 on cream --panel #fffdf9) → .64 (~4.6:1).
     This light-theme override is the LIVE light muted token. */
  --text-muted: rgba(28,43,34,.64) !important;
  --accent:     #1f6f4f !important;   /* deep forest */
  --accent-rgb: 31,111,79 !important;
  --accent2:    #a87a1f !important;   /* warm gold */
  --accent2-rgb:168,122,31 !important;
  --good:       #178a52 !important;
  --good-rgb:   23,138,82 !important;
  --warn:       #b8741a !important;
  --bad:        #c43d4f !important;
}

/* (b) FRAME / STRUCTURAL SURFACES */
html[data-theme="light"], [data-theme="light"] body { background: #f6f1e7 !important; }
[data-theme="light"] .frame {
  background: radial-gradient(ellipse 130% 80% at 60% 40%,
    rgba(31,111,79,.06) 0%, rgba(168,122,31,.04) 45%, #f6f1e7 80%) !important;
}
[data-theme="light"] header#statusbar {
  background: rgba(255,253,249,.96) !important;
  border-bottom: 1px solid rgba(36,66,50,.14) !important;
}
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #fffdf9 0%, #f3ecdd 100%) !important;
  border-right: 1px solid rgba(36,66,50,.12) !important;
}
[data-theme="light"] .quick-bar {
  background: rgba(255,253,249,.97) !important;
  border-top: 1px solid rgba(36,66,50,.14) !important;
}

/* Status-bar chips + greeting */
[data-theme="light"] .sa-btn {
  background: rgba(31,111,79,.06) !important;
  border: 1px solid rgba(36,66,50,.16) !important;
}
[data-theme="light"] .sa-btn:hover {
  border-color: rgba(31,111,79,.42) !important;
  box-shadow: 0 0 12px rgba(31,111,79,.14) !important;
}
[data-theme="light"] .sa-status-label { color: rgba(28,43,34,.5) !important; }
[data-theme="light"] .sa-status-value { color: #178a52 !important; text-shadow: none !important; }
[data-theme="light"] .greeting-headline { color: #1a5a40 !important; text-shadow: none !important; }
[data-theme="light"] .greeting-subline  { color: rgba(28,43,34,.5) !important; }

/* Sidebar internals */
[data-theme="light"] .sb-logo {
  background: linear-gradient(135deg, rgba(31,111,79,.16) 0%, rgba(168,122,31,.12) 100%) !important;
  border: 1.5px solid rgba(31,111,79,.4) !important;
  box-shadow: 0 0 10px rgba(31,111,79,.2) !important;
  color: #1f6f4f !important;
}
[data-theme="light"] .sb-sub,
[data-theme="light"] .ri-sub,
[data-theme="light"] .sb-date-dow { color: rgba(28,43,34,.55) !important; }
[data-theme="light"] .rail-item:hover { background: rgba(31,111,79,.06) !important; }
[data-theme="light"] .rail-item.active {
  background: linear-gradient(90deg, rgba(31,111,79,.14) 0%, rgba(31,111,79,.03) 100%) !important;
  box-shadow: inset 3px 0 0 #1f6f4f !important;
}
[data-theme="light"] .rail-item.active .ri-label { color: #1a5a40 !important; text-shadow: none !important; }
[data-theme="light"] .sb-time { color: #1f6f4f !important; text-shadow: none !important; }
[data-theme="light"] .sb-sec  { color: rgba(31,111,79,.6) !important; }
[data-theme="light"] .sb-user-avatar {
  background: rgba(31,111,79,.16) !important;
  border: 1.5px solid rgba(31,111,79,.4) !important;
}
[data-theme="light"] .sb-user-name { color: #21302a !important; }

/* KPI strip */
[data-theme="light"] .kpi-tile {
  background: linear-gradient(180deg, rgba(31,111,79,.05) 0%, #fffdf9 100%) !important;
  border: 1px solid rgba(36,66,50,.14) !important;
}
[data-theme="light"] .kpi-tile::before {
  background: linear-gradient(90deg, transparent 0%, rgba(31,111,79,.45) 25%,
    rgba(168,122,31,.7) 50%, rgba(31,111,79,.45) 75%, transparent 100%) !important;
}
[data-theme="light"] .kpi-number { color: #1c2b22 !important; text-shadow: none !important; }
[data-theme="light"] .kpi-label  { color: rgba(28,43,34,.6) !important; }
[data-theme="light"] .kpi-compare { color: rgba(28,43,34,.45) !important; }

/* Shared panel header */
[data-theme="light"] .panel-h { border-bottom: 1px solid rgba(36,66,50,.14) !important; }
[data-theme="light"] .panel-h::before { background: linear-gradient(180deg, #1f6f4f, transparent) !important; }
[data-theme="light"] .panel-h-lab  { color: #1a5a40 !important; }
[data-theme="light"] .panel-h-link { color: #1f6f4f !important; }
[data-theme="light"] .panel-h-real {
  background: rgba(23,138,82,.12) !important; color: #178a52 !important;
  border: 1px solid rgba(23,138,82,.3) !important;
}
[data-theme="light"] .panel-h-real::before { background: #178a52 !important; box-shadow: 0 0 6px #178a52 !important; }
[data-theme="light"] .panel-h-meta {
  background: rgba(36,66,50,.05) !important; border: 1px solid rgba(36,66,50,.12) !important;
}

/* Middle-row panels */
[data-theme="light"] .alerts-col,
[data-theme="light"] .calendar-col,
[data-theme="light"] .ops-agents.agents-grid {
  background: #fffdf9 !important;
  border: 1px solid rgba(36,66,50,.14) !important;
}
[data-theme="light"] .alert-item { background: rgba(31,111,79,.04) !important; border-left-color: #1f6f4f !important; }
[data-theme="light"] .alert-title { color: #21302a !important; }
[data-theme="light"] .alert-meta, [data-theme="light"] .alert-time { color: rgba(28,43,34,.5) !important; }
[data-theme="light"] .cal-time  { color: #1f6f4f !important; }
[data-theme="light"] .cal-title { color: #21302a !important; }
[data-theme="light"] .cal-meta  { color: rgba(28,43,34,.55) !important; }
[data-theme="light"] .cal-row { border-bottom: 1px solid rgba(36,66,50,.08) !important; }
[data-theme="light"] .cal-row:hover { background: rgba(31,111,79,.05) !important; }
[data-theme="light"] .integ-name { color: #34463b !important; }
[data-theme="light"] .integ-stat { color: #178a52 !important; text-shadow: none !important; }
[data-theme="light"] .side-integ { border-top: 1px solid rgba(36,66,50,.12) !important; }

/* "view all" / pill buttons */
[data-theme="light"] .alerts-view-all,
[data-theme="light"] .alerts-intel .intel-btn,
[data-theme="light"] .bp-view-all {
  background: rgba(31,111,79,.08) !important;
  border: 1px solid rgba(31,111,79,.25) !important;
  color: #1f6f4f !important;
}

/* AI Insight block */
[data-theme="light"] .alerts-intel {
  background: rgba(31,111,79,.04) !important; border: 1px solid rgba(31,111,79,.14) !important;
}
[data-theme="light"] .alerts-intel .intel-tag-lab { color: #1a5a40 !important; }
[data-theme="light"] .alerts-intel .intel-body   { color: #34463b !important; }
[data-theme="light"] .alerts-intel .intel-spark  { color: #1f6f4f !important; text-shadow: none !important; }

/* Agent / department cards */
[data-theme="light"] .agent-card {
  background: linear-gradient(160deg, rgba(31,111,79,.06) 0%, rgba(168,122,31,.05) 60%, #fffdf9 100%) !important;
  border: 1px solid rgba(36,66,50,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 18px rgba(40,55,45,.1) !important;
}
[data-theme="light"] .agent-card::after { background: linear-gradient(90deg, transparent, rgba(31,111,79,.2), transparent) !important; }
[data-theme="light"] .agent-role    { color: rgba(28,43,34,.62) !important; }
[data-theme="light"] .agent-name-2  { color: #21302a !important; }
[data-theme="light"] .agent-tasks   { color: rgba(28,43,34,.55) !important; }
[data-theme="light"] .agent-tasks b,
[data-theme="light"] .agent-tasks-num { color: #1f6f4f !important; text-shadow: none !important; }

/* Bottom row — donut / tasks / team / goals / pipeline / seo */
[data-theme="light"] .bp-card {
  background: linear-gradient(160deg, rgba(31,111,79,.06) 0%, rgba(168,122,31,.05) 35%, #fffdf9 100%) !important;
  border: 1px solid rgba(36,66,50,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(40,55,45,.1) !important;
}
[data-theme="light"] .bp-donut-total { color: #1c2b22 !important; text-shadow: none !important; }
[data-theme="light"] .bp-donut-sub  { color: rgba(28,43,34,.5) !important; }
[data-theme="light"] .bp-task-lab   { color: rgba(28,43,34,.6) !important; }
[data-theme="light"] .bp-task-val   { color: #1c2b22 !important; text-shadow: none !important; }
[data-theme="light"] .bp-td-main    { color: #21302a !important; }
[data-theme="light"] .bp-td-date    { color: #1f6f4f !important; }
[data-theme="light"] .bp-tr-team:first-child { border-left-color: #1f6f4f !important; }
[data-theme="light"] .bp-tr, [data-theme="light"] .bp-tr-team, [data-theme="light"] .bp-tr-head { border-bottom-color: rgba(36,66,50,.1) !important; }
[data-theme="light"] .bp-tr-team:hover { background: rgba(31,111,79,.05) !important; }
[data-theme="light"] .bp-av-1 {
  background: linear-gradient(135deg, rgba(31,111,79,.3), rgba(31,111,79,.45)) !important;
  border: 1.5px solid rgba(31,111,79,.5) !important;
  box-shadow: 0 0 8px rgba(31,111,79,.25) !important;
}
[data-theme="light"] .goal-bar { background: rgba(36,66,50,.1) !important; }
[data-theme="light"] .goal-bar-fill {
  background: linear-gradient(90deg, #1f6f4f 0%, #a87a1f 100%) !important;
  box-shadow: 0 0 10px rgba(31,111,79,.4) !important;
}
[data-theme="light"] .goal-pct { color: #1f6f4f !important; text-shadow: none !important; }
[data-theme="light"] .goal-lab { color: rgba(28,43,34,.7) !important; }
[data-theme="light"] .goal-num { color: rgba(28,43,34,.55) !important; }
[data-theme="light"] .ta-feed-who    { color: #1f6f4f !important; text-shadow: none !important; }
[data-theme="light"] .ta-feed-action { color: #34463b !important; }
[data-theme="light"] .ta-feed-ts     { color: rgba(28,43,34,.45) !important; }
[data-theme="light"] .bp-seo-rank { color: #178a52 !important; }
[data-theme="light"] .bp-seo-kw   { color: #34463b !important; }
[data-theme="light"] .bp-seo-meta { color: rgba(28,43,34,.5) !important; }

/* Pipeline funnel */
[data-theme="light"] .pp-stage { background: rgba(31,111,79,.05) !important; }
[data-theme="light"] .pp-stage:hover { background: rgba(31,111,79,.1) !important; }
[data-theme="light"] .pp-lab { color: rgba(28,43,34,.72) !important; }
[data-theme="light"] .pp-num { color: #1c2b22 !important; text-shadow: none !important; }
[data-theme="light"] .pp-stage[data-stage="new-leads"]      .pp-num { color: #1f6f4f !important; text-shadow: none !important; }
[data-theme="light"] .pp-stage[data-stage="contacted"]      .pp-num { color: #2f6b9e !important; text-shadow: none !important; }
[data-theme="light"] .pp-stage[data-stage="showing"]        .pp-num { color: #7a3fb0 !important; text-shadow: none !important; }
[data-theme="light"] .pp-stage[data-stage="offer"]          .pp-num { color: #a87a1f !important; text-shadow: none !important; }
[data-theme="light"] .pp-stage[data-stage="under-contract"] .pp-num { color: #178a52 !important; text-shadow: none !important; }
[data-theme="light"] .pipeline-stats { border-top: 1px solid rgba(36,66,50,.1) !important; }
[data-theme="light"] .pps-val-cyan  { color: #1f6f4f !important; }
[data-theme="light"] .pps-val-green { color: #178a52 !important; }
[data-theme="light"] .pps-lab { color: rgba(28,43,34,.55) !important; }

/* Voice command center (quick-bar) — orb glow softened, IDs/handlers untouched */
[data-theme="light"] .qb-voice-btn-big {
  background: radial-gradient(circle, rgba(31,111,79,.2), rgba(168,122,31,.06)) !important;
  border: 1px solid rgba(31,111,79,.42) !important;
  box-shadow: 0 0 18px rgba(31,111,79,.3), 0 0 36px rgba(168,122,31,.14) !important;
}
[data-theme="light"] .qbvc-title  { color: #1f6f4f !important; }
[data-theme="light"] .qbvc-prompt { color: rgba(28,43,34,.55) !important; }
[data-theme="light"] .qb-btn { border-color: rgba(36,66,50,.18) !important; color: rgba(28,43,34,.7) !important; }
[data-theme="light"] .qb-btn:hover { border-color: rgba(31,111,79,.42) !important; color: #1f6f4f !important; }
[data-theme="light"] .qbs-stat { color: #178a52 !important; }
[data-theme="light"] .qb-label { color: rgba(28,43,34,.55) !important; }

/* HUD hero centerpiece — warm cream stage; globe stays the focal feature */
[data-theme="light"] .hud-hero.earth-hero {
  background: radial-gradient(ellipse at 50% 50%, #e8dcc4 0%, #f6f1e7 75%) !important;
  border: 1px solid rgba(36,66,50,.14) !important;
}
[data-theme="light"] .eh-earth {
  box-shadow:
    inset -30px -30px 64px rgba(0,0,0,.5),
    inset 20px 20px 54px rgba(120,180,255,.6),
    0 0 90px rgba(31,90,140,.3),
    0 0 200px rgba(31,90,140,.14) !important;
}
[data-theme="light"] .ehs-sub { color: #1f6f4f !important; }

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(31,111,79,.25) !important; }

/* ════════════════════════════════════════════════════════════════════════
   W419 (2026-06-16) — Overview lower-row legibility + rebalance.
   Bryan flagged the bottom row as unreadable at 100% zoom (5–9px fonts) and
   UNDER CONTRACT as a huge empty panel. Appended LAST so these rules win the
   !important cascade over this file's earlier duplicate .bottom-row / .goal-* /
   .pp-* / .ta-* / .pps-* rules (lines ~712,860,911,986,1015,1060,1193,1257).
   CSS-only: data bindings, multi-tenant config, and voice handlers untouched.
   Both themes inherit (font-size is theme-agnostic; the existing
   [data-theme="light"] colour rules still apply).
   NOTE: the "broken math" 2/3=25% was a 7px MISREAD of 2/8=25% (correct) —
   fixed here by legibility, not by changing any calculation.
   ════════════════════════════════════════════════════════════════════════ */

/* — Rebalance the grid. Old widths inverted usefulness: empty UNDER CONTRACT
     (486px) + sparse TEAM (486px) ate ~972px while the 4 dense panels were
     crushed to ≤185px. New fr tracks (visual L→R order set via `order`):
     Tasks · Sales Pipeline · SEO · Goals · Team · Under-Contract(narrow). — */
.bottom-row {
  height: 192px !important;
  grid-template-columns: 1.35fr 2.05fr 1.9fr 1.85fr 1.5fr 0.92fr !important;
  gap: 10px !important;
  align-items: stretch !important;
}
#panel-tasks          { order: 1 !important; }
#panel-pipeline       { order: 2 !important; }
#panel-seo            { order: 3 !important; }
#panel-sales-progress { order: 4 !important; }
#panel-atlas-activity { order: 5 !important; }
#panel-deals          { order: 6 !important; }

/* — Legibility floor (panel headers + links + meta) — */
.bottom-row .panel-h-lab  { font-size: 11px !important; letter-spacing: .04em !important; }
.bottom-row .panel-h-meta { font-size: 9px !important; }
.bottom-row .panel-h-real { font-size: 9px !important; }
.bottom-row .panel-h-link { font-size: 8.5px !important; }

/* Tasks Progress */
.bp-task-list li   { font-size: 10.5px !important; }
.bp-task-list li b { font-size: 11px !important; }
.bp-task-list li span:not(.lg-dot) { white-space: nowrap !important; }

/* Sales Pipeline (vertical funnel) — wider column now fits full labels */
.bottom-row .pp-lab { font-size: 10px !important; letter-spacing: .06em !important; white-space: nowrap !important; }
.bottom-row .pp-stage[data-stage="under-contract"] .pp-lab { font-size: 10px !important; }
.bottom-row .pp-num { font-size: 17px !important; }
.bottom-row .pps-lab   { font-size: 9px !important; line-height: 1.2 !important; white-space: normal !important; }
.bottom-row .pps-val   { font-size: 13px !important; }
.bottom-row .pps-meta  { font-size: 8.5px !important; }
.bottom-row .pps-delta { font-size: 8.5px !important; }

/* SEO Intelligence — tighten row rhythm so 4 keywords + stats fit 192px */
.bottom-row .bp-seo        { gap: 3px !important; }
.bottom-row .seo-section-h { font-size: 9px !important; margin: 1px 0 !important; }
.bottom-row .seo-kw-row    { font-size: 10.5px !important; padding-top: 1px !important; padding-bottom: 1px !important; line-height: 1.15 !important; }
.bottom-row .seo-kw-q      { font-size: 10.5px !important; }
.bottom-row .seo-kw-clicks,
.bottom-row .seo-kw-pos    { font-size: 10px !important; }
.bottom-row .seo-stat-val  { font-size: 15px !important; }
.bottom-row .seo-stat-lab  { font-size: 8px !important; }
.bottom-row .seo-stat-delta{ font-size: 8.5px !important; }

/* Goals Progress — makes the "/ 8" denominator legible (the perceived-bug fix) */
.bottom-row .goal-lab { font-size: 11px !important; }
.bottom-row .goal-num { font-size: 11px !important; }
.bottom-row .goal-pct { font-size: 15px !important; }
.bottom-row .pt-btn   { font-size: 9px !important; }

/* Team Activity */
.bottom-row .ta-feed-who    { font-size: 11px !important; }
.bottom-row .ta-feed-action { font-size: 10px !important; }
.bottom-row .ta-feed-ts     { font-size: 9px !important; }
.bottom-row .bp-tr-team span { font-size: 9.5px !important; }

/* Under Contract — compact narrow tile (empty most of the time; July starts hot).
   When deals exist the JS-rendered list stacks compactly; when empty, a centred
   em-dash + honest caption (no fabricated closing date — payload has none). */
#panel-deals .panel-h-lab { white-space: normal !important; line-height: 1.05 !important; }
#panel-deals .bp-uc-list {
  display: flex !important; flex-direction: column !important;
  gap: 5px !important; justify-content: center !important; height: 100% !important;
}
#panel-deals .bp-uc-empty {
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  height: 100% !important; gap: 7px !important; text-align: center !important;
  font-size: 9px !important; letter-spacing: .04em !important;
  color: rgba(120,170,210,.55) !important;
}
#panel-deals .bp-uc-empty::before {
  content: "—" !important; font-size: 30px !important; line-height: 1 !important;
  color: rgba(120,170,210,.4) !important;
}
#panel-deals .bp-uc-item .bp-uc-addr { font-size: 10.5px !important; line-height: 1.2 !important; }
#panel-deals .bp-uc-item .bp-uc-meta { font-size: 9px !important; }
[data-theme="light"] #panel-deals .bp-uc-empty { color: rgba(28,43,34,.5) !important; }
[data-theme="light"] #panel-deals .bp-uc-empty::before { color: rgba(28,43,34,.35) !important; }

/* ════════════════════════════════════════════════════════════════════════
   W424 (2026-06-16) — 5-tab Apple-style IA: grouped rail + new views.
   All colors via var(--*) tokens → both themes. Active view fills .canvas as a
   flex child with an internal-scroll body → the 1080 no-scroll frame is preserved.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Primary tab groups (DEALS / PEOPLE / OPERATIONS / WORKSPACE) ── */
.rail-group{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:7px 11px; background:transparent; border:0; border-left:2px solid transparent;
  color:var(--text); font:inherit; text-align:left; cursor:pointer; transition:all .14s;
}
.rail-group:hover{ background:rgba(var(--accent-rgb),.06); border-left-color:rgba(var(--accent-rgb),.3); }
.rail-group .ri-svg{ width:15px; height:15px; flex-shrink:0; stroke:currentColor; }
.rail-group .ri-label{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.rail-group .ri-sub{ font-family:var(--mono); font-size:8px; letter-spacing:.07em; color:var(--text-muted); }
.rail-group.group-active{ border-left-color:var(--accent); background:rgba(var(--accent-rgb),.08); }
.rail-group.group-active .ri-label{ color:var(--accent); }
.rail-chev{ width:13px; height:13px; flex-shrink:0; stroke:currentColor; opacity:.45; transition:transform .2s; margin-left:auto; }
.rail-group.open .rail-chev{ transform:rotate(90deg); opacity:.85; }

/* ── Sub-tabs (accordion reveal) ── */
.rail-sub{ display:flex; flex-direction:column; max-height:0; overflow:hidden; transition:max-height .24s ease; }
.rail-sub.open{ max-height:360px; }
.rail-subitem{ padding:5px 10px 5px 30px !important; }
.rail-subitem .ri-svg{ width:13px !important; height:13px !important; opacity:.7; }
.rail-subitem .ri-label{ font-size:9.5px !important; font-weight:500 !important; letter-spacing:.04em !important; text-transform:none !important; }
.rail-subitem.active .ri-svg{ opacity:1; }
.rail-external{ display:flex; align-items:center; gap:9px; padding:5px 10px 5px 30px; color:var(--text-dim); border-left:2px solid transparent; transition:all .14s; cursor:pointer; }
.rail-external:hover{ color:var(--text); background:rgba(var(--accent-rgb),.06); border-left-color:rgba(var(--accent-rgb),.3); }
.rail-external .ri-svg{ width:13px; height:13px; opacity:.7; stroke:currentColor; flex-shrink:0; }
.rail-external .ri-label{ font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.04em; }
.rail-ext-ico{ width:11px; height:11px; margin-left:auto; opacity:.5; stroke:currentColor; }
.sidebar-collapsed .rail-chev, .sidebar-collapsed .rail-sub{ display:none; }

/* ── New views: page frame (preserves no-scroll) ── */
/* Global hide: existing views each had a per-#id `.view-off{display:none}` rule;
   the new W424 views need this catch-all so off-views don't stack. */
.atlas-view.view-off{ display:none !important; }
.w424-view:not(.view-off){ display:flex; flex-direction:column; flex:1; min-height:0; }
.w424-page{ flex:1; min-height:0; display:flex; flex-direction:column; }
.w424-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:2px 4px 10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.w424-title{ font-family:var(--display,var(--mono)); font-size:20px; font-weight:800; letter-spacing:.04em; color:var(--text); margin:0; }
.w424-sub{ font-family:var(--mono); font-size:10.5px; color:var(--text-muted); letter-spacing:.03em; margin:3px 0 0; }
.w424-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.w424-pill{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--text-dim); background:var(--panel2); border:1px solid var(--border); border-radius:999px; padding:4px 10px; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; }
.w424-pill-build{ color:#ffb648; border-color:rgba(255,182,72,.35); background:rgba(255,182,72,.08); }
.w424-body{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px 4px 6px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; }
.w424-body::-webkit-scrollbar{ width:8px; }
.w424-body::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.w424-note{ font-family:var(--mono); font-size:10px; line-height:1.5; color:var(--text-dim); background:rgba(var(--accent-rgb),.05); border:1px solid rgba(var(--accent-rgb),.16); border-left:3px solid var(--accent); border-radius:6px; padding:9px 12px; }

/* ── Cards + grids ── */
.w424-grid{ display:grid; gap:12px; }
.w424-grid-2{ grid-template-columns:1fr 1fr; }
.w424-grid-3{ grid-template-columns:repeat(3,1fr); }
.w424-grid-4{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.w424-card{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 16px; min-width:0; }
.w424-card-h{ font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.14em; color:var(--text-dim); text-transform:uppercase; margin-bottom:10px; }
.w424-empty{ font-family:var(--mono); font-size:10.5px; color:var(--text-muted); padding:14px 4px; text-align:center; }
.w424-stat{ display:flex; flex-direction:column; gap:4px; }
.w424-stat-lab{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--text-muted); text-transform:uppercase; }
.w424-stat-num{ font-family:var(--display,var(--mono)); font-size:28px; font-weight:800; color:var(--text); line-height:1; }
.w424-stat-meta{ font-family:var(--mono); font-size:8.5px; color:var(--text-muted); }
.w424-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; background:var(--text-muted); }
.w424-dot.is-ok{ background:#3affad; box-shadow:0 0 6px rgba(58,255,173,.6); }
.w424-dot.is-warn{ background:#ffb648; box-shadow:0 0 6px rgba(255,182,72,.5); }

/* ── Documents cabinet ── */
.w424-folder{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; transition:border-color .14s, transform .14s; }
.w424-folder:hover{ border-color:rgba(var(--accent-rgb),.4); transform:translateY(-2px); }
.w424-folder-ico{ font-size:26px; line-height:1; }
.w424-folder-name{ font-family:var(--mono); font-size:10px; font-weight:600; color:var(--text); }
.w424-folder-meta{ font-family:var(--mono); font-size:9px; color:var(--text-muted); }

/* ── Tasks kanban (scaffold) ── */
.w424-kanban{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; flex:1; min-height:0; }
.w424-col{ background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:0; }
.w424-col-h{ font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--text-dim); display:flex; justify-content:space-between; }
.w424-col-n{ color:var(--text-muted); }
.w424-col-body{ flex:1; overflow-y:auto; }

/* ── Integrations connector rows ── */
.w424-conn{ display:flex; flex-direction:column; gap:8px; }
.w424-conn-row{ display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:11px 14px; }
.w424-conn-ico{ font-size:16px; }
.w424-conn-main{ flex:1; min-width:0; }
.w424-conn-name{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--text); }
.w424-conn-sub{ font-family:var(--mono); font-size:9px; color:var(--text-muted); }
.w424-conn-state{ display:flex; align-items:center; gap:7px; }
.w424-conn-ts{ font-family:var(--mono); font-size:8.5px; color:var(--text-muted); }

/* ── Settings ── */
.w424-setrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border2); font-family:var(--mono); font-size:10.5px; color:var(--text-dim); }
.w424-setrow:last-child{ border-bottom:0; }
.w424-set-hint{ color:var(--text-muted); font-size:9.5px; }
.w424-setrow kbd{ background:var(--panel2); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:9px; font-family:var(--mono); }
.w424-seg{ display:inline-flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.w424-seg-btn{ background:transparent; border:0; color:var(--text-dim); font-family:var(--mono); font-size:10px; padding:4px 12px; cursor:pointer; }
.w424-seg-btn.is-on{ background:var(--accent); color:#03121b; font-weight:700; }

/* ── AI Agent Team org chart ── */
.ag-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.ag-dept{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.ag-dept-head{ display:flex; align-items:center; gap:9px; padding-bottom:8px; border-bottom:1px solid var(--border2); }
.ag-dept-titles{ flex:1; min-width:0; }
.ag-dept-name{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text); text-transform:uppercase; }
.ag-dept-lead{ font-family:var(--mono); font-size:9px; color:var(--text-muted); }
.ag-dept-count{ font-family:var(--display,var(--mono)); font-size:16px; font-weight:800; color:var(--accent); }
.ag-subs{ display:flex; flex-direction:column; gap:5px; }
.ag-sub{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; color:var(--text-dim); }
.ag-sub-name{ flex:1; min-width:0; color:var(--text); }
.ag-sub-note{ width:100%; font-size:8.5px; color:var(--text-muted); }
.ag-empty{ padding:6px 0 !important; text-align:left !important; }

/* ── TODAY hero: "Enter Virtual Office" click affordance (floats above Claw3D iframe) ── */
.hero-vo-cta{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:12;
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.5);
  color:var(--accent); font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:all .16s;
}
.hero-vo-cta:hover{ background:rgba(var(--accent-rgb),.26); box-shadow:0 0 18px rgba(var(--accent-rgb),.35); transform:translateX(-50%) translateY(-2px); }
.hero-vo-cta svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }
.hero-vo-cta svg:first-child{ stroke-width:1.6; }

/* --- brand-theme.css --- */
/* ============================================================
   ATLAS — Per-tenant brand theming (Wave 9-W82, 2026-06-10)
   Loads LAST so brand vars + logo rules win. Additive + revertible:
   remove this <link> and js/brand-theme.js to fully revert. The colour
   theming itself is done with INLINE custom props on <html> by
   js/brand-theme.js (overrides both :root and [data-theme="light"]);
   this file only handles the logo-image swap + its monogram fallback.
   ============================================================ */

/* When a tenant config supplies a real brand_logo_url, brand-theme.js sets
   the element background-image + .has-brand-logo. Hide the emoji glyph
   underneath so the logo reads cleanly. No logo configured → this class is
   never added → the emoji/monogram set by renderIdentity() stands (we never
   fabricate a logo image — data-integrity). */
.sb-logo.has-brand-logo,
#hero-icon.has-brand-logo {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent;
  text-shadow: none;
}