:root {
  --bg: #0d0d0d;
  --panel: #161616;
  --panel-alt: #1e1e1e;
  --panel-raised: #1a1a1a;
  --border: #2a2a2a;
  --border-strong: #3a3a3a;
  --text: #f5f5f5;
  --text-muted: #a3a3a3;
  --text-dim: #6e6e6e;

  --gold: #c9a84c;
  --gold-light: #ddc06f;
  --gold-dim: rgba(201, 168, 76, 0.14);
  --gold-border: rgba(201, 168, 76, 0.45);

  --tier1: #5b8def;
  --tier2: #a78bfa;
  --tier3: var(--gold);

  --good: #4ade80;
  --good-bg: rgba(74, 222, 128, 0.14);
  --bad: #f87171;
  --bad-bg: rgba(248, 113, 113, 0.14);
  --warn: #f59e0b;
  --warn-bg: rgba(245, 158, 11, 0.14);
  --neutral-bg: rgba(255, 255, 255, 0.07);

  --info: #38bdf8;
  --on-bad: #1a0d0d;
  --bad-hover: #f45c5c;
  --btn-hover-bg: #262626;
  --code-bg: #060606;
  --code-text: #d4d4d4;
  --overlay: rgba(0, 0, 0, 0.65);
  --shadow-color: rgba(0, 0, 0, 0.35);
  --shadow-color-strong: rgba(0, 0, 0, 0.5);
  --ambient-opacity: 0.18;
  color-scheme: dark;

  --ease: 150ms ease;
}

/* ---------------------------------------------------------------------
   Light theme. Same tokens, warm-neutral surfaces and darkened brand/
   semantic colours so text keeps its contrast on white (the dark theme's
   pale gold and neon green would be unreadable here). Selected by
   <html data-theme="light">, set by theme.js from the user's Light / Dark /
   System preference. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f2ec;
  --panel: #ffffff;
  --panel-alt: #f6f4ee;
  --panel-raised: #ffffff;
  --border: #e3dfd3;
  --border-strong: #cdc7b5;
  --text: #1c1a14;
  --text-muted: #55514a;
  --text-dim: #6a655a;

  --gold: #b8912c;
  --gold-light: #8a6a12;
  --gold-dim: rgba(184, 145, 44, 0.14);
  --gold-border: rgba(160, 124, 30, 0.5);

  --tier1: #2e5fd1;
  --tier2: #6d3fe0;

  --good: #15803d;
  --good-bg: rgba(21, 128, 61, 0.10);
  --bad: #c62828;
  --bad-bg: rgba(198, 40, 40, 0.09);
  --warn: #b45309;
  --warn-bg: rgba(180, 83, 9, 0.10);
  --neutral-bg: rgba(0, 0, 0, 0.05);

  --info: #0369a1;
  --on-bad: #ffffff;
  --bad-hover: #a11f1f;
  --btn-hover-bg: #efece2;
  --code-bg: #f1eee4;
  --code-text: #2b2820;
  --overlay: rgba(30, 26, 15, 0.45);
  --shadow-color: rgba(60, 50, 20, 0.14);
  --shadow-color-strong: rgba(60, 50, 20, 0.24);
  --ambient-opacity: 0.12;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }

body {
  margin: 0;
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-light); }

::selection { background: var(--gold-dim); color: var(--text); }

/* Scrollbars — dark-themed, not the default light OS scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-border); }

.current-user-box { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
#current-user-name { font-weight: 600; color: var(--text); padding: 0 4px; }

.btn {
  border: 1px solid var(--border-strong);
  background: var(--panel-alt);
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
  line-height: 1.3;
  color: var(--text);
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.btn:hover { background: var(--btn-hover-bg); border-color: var(--gold-border); transform: scale(1.02); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--gold); color: #0d0d0d; border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-light); box-shadow: 0 0 0 3px var(--gold-dim); }
.btn-danger { background: transparent; color: var(--bad); border-color: rgba(248,113,113,0.35); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn-small { padding: 4px 10px; font-size: 12px; }

.pill { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }

.filter-bar {
  display: flex;
  gap: 10px;
  padding: 10px 24px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-bar input, .filter-bar select {
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  font-size: 13px;
  background: var(--panel-alt);
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--ease);
}
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--gold-border); }
.filter-bar input::placeholder { color: var(--text-dim); }
.filter-group { display: flex; gap: 4px; }
.tier-btn {
  border: 1px solid var(--border-strong);
  background: var(--panel-alt);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.tier-btn:hover { color: var(--text); }
.tier-btn.active { background: var(--gold-dim); color: var(--gold-light); border-color: var(--gold-border); }

/* Prospecting Tool — Overview / All Leads tabs, same switcher pattern as
   Library's Clients/Playbook tabs (shares .filter-group/.tier-btn). */
.prospects-tabs { margin: 14px 24px 0; }
#prospects-overview-view { padding: 0 24px 24px; }
#prospects-overview-view .dashboard-stats-row { margin-top: 14px; }

/* Section B (Find New Leads) and Section C (Export & Import) — each its
   own clearly separated card, not just visually-distinct sub-regions of
   one block. */
.prospects-section-card {
  margin-top: 20px; padding: 18px 20px; background: var(--panel-alt);
  border: 1px solid var(--border); border-radius: 10px;
}
.prospects-section-card h3 { margin: 0 0 8px; font-size: 15px; color: var(--text); }
.prospects-section-desc { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.5; max-width: 640px; }

.lead-search-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lead-search-chip {
  display: inline-block; padding: 7px 12px; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 8px; font-size: 12.5px; color: var(--text-muted); font-style: italic;
}

.lead-search-howto { margin-top: 14px; font-size: 12.5px; }
.lead-search-howto summary {
  cursor: pointer; color: var(--gold-light); font-weight: 600; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.lead-search-howto summary::-webkit-details-marker { display: none; }
.lead-search-howto summary::before { content: "\25b8"; transition: transform 150ms ease; display: inline-block; }
.lead-search-howto[open] summary::before { transform: rotate(90deg); }
.lead-search-howto ol { margin: 10px 0 0; padding-left: 20px; color: var(--text-muted); line-height: 1.7; }

.csv-export-row { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.csv-export-row select {
  padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 13px;
  background: var(--panel); color: var(--text); font-family: inherit;
}

.import-stepper { display: flex; flex-wrap: wrap; gap: 14px; }
.import-step { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); flex: 1 1 220px; }
.import-step strong { color: var(--text); }
.import-step-num {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%; background: var(--gold-dim); color: var(--gold-light);
  font-weight: 700; font-size: 12px;
}

.chat-panel {
  margin: 14px 0 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  max-height: 360px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  max-height: 280px;
}
.chat-bubble {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 85%;
}
.chat-bubble-user {
  align-self: flex-end;
  background: var(--gold-dim);
  color: var(--gold-light);
}
.chat-bubble-assistant {
  align-self: flex-start;
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--border);
}
.chat-bubble button { margin-top: 6px; display: inline-block; }
.chat-input-form {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}
.chat-input-form input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  font-size: 13px;
  background: var(--panel-alt);
  color: var(--text);
  font-family: inherit;
}
.chat-input-form input:focus { outline: none; border-color: var(--gold-border); }
.chat-input-form input::placeholder { color: var(--text-dim); }

main { padding: 16px 24px 60px; }

.tier-section { margin-bottom: 28px; }
.tier-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}
.tier-dot { width: 10px; height: 10px; border-radius: 50%; }
.tier1-dot { background: var(--tier1); }
.tier2-dot { background: var(--tier2); }
.tier3-dot { background: var(--tier3); box-shadow: 0 0 6px var(--gold-dim); }

table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { background: var(--panel-raised); font-weight: 700; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
tbody tr { cursor: pointer; transition: background var(--ease); }
tbody tr:hover { background: var(--panel-alt); }
tbody tr:last-child td { border-bottom: none; }

.score-badge { font-weight: 700; padding: 2px 9px; border-radius: 10px; display: inline-block; min-width: 34px; text-align: center; }
.score-high { background: var(--good-bg); color: var(--good); }
.score-mid { background: var(--warn-bg); color: var(--warn); }
.score-low { background: var(--bad-bg); color: var(--bad); }
.score-none { background: var(--neutral-bg); color: var(--text-dim); }

.status-badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.status-New { background: rgba(91,141,239,0.14); color: var(--tier1); }
.status-Contacted { background: rgba(56,189,248,0.14); color: var(--info); }
.status-ZoomBooked { background: var(--gold-dim); color: var(--gold-light); }
.status-ClosedWon { background: var(--good-bg); color: var(--good); }
.status-ClosedLost { background: var(--bad-bg); color: var(--bad); }
.status-Dead { background: var(--neutral-bg); color: var(--text-dim); }

.empty-note { color: var(--text-dim); padding: 12px; font-style: italic; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 30px 16px; overflow-y: auto; z-index: 100;
  backdrop-filter: blur(2px);
}
.modal-overlay.hidden { display: none; }
.modal {
  background: var(--panel-raised); border: 1px solid var(--border); border-radius: 10px; padding: 24px 28px 28px;
  max-width: 520px; width: 100%; position: relative; box-shadow: 0 20px 60px var(--shadow-color-strong);
  animation: modalIn 160ms ease;
}
.modal-large { max-width: 780px; }
.modal-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  font-size: 22px; cursor: pointer; color: var(--text-muted); transition: color var(--ease);
}
.modal-close:hover { color: var(--gold-light); }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

form label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
form label input, form label select, form label textarea {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  border: 1px solid var(--border-strong); border-radius: 5px; font-size: 13px; font-family: inherit;
  background: var(--panel-alt); color: var(--text); transition: border-color var(--ease);
}
form label input:focus, form label select:focus, form label textarea:focus { outline: none; border-color: var(--gold-border); }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.checkbox-label input { width: auto; margin: 0; }

/* Detail view */
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; padding-right: 24px; }
.detail-header h2 { margin: 0 0 4px; font-size: 19px; }
.detail-meta { color: var(--text-muted); font-size: 13px; }
.detail-score-box { text-align: center; }
.detail-score-box .score-big { font-size: 30px; font-weight: 800; color: var(--gold-light); }
.detail-score-box .score-max { font-size: 13px; color: var(--text-dim); }

.tab-bar { display: flex; gap: 4px; margin: 16px 0 12px; border-bottom: 1px solid var(--border); }
.tab-btn { border: none; background: none; padding: 8px 12px; cursor: pointer; font-size: 13px; font-family: inherit; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; transition: color var(--ease), border-color var(--ease); }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--gold-light); border-bottom-color: var(--gold); }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 140ms ease; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.category-row { margin-bottom: 14px; }
.category-row .cat-header { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 4px; }
.evidence-list { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; }
.evidence-list li { margin-bottom: 2px; }

.excluded-banner { background: var(--bad-bg); color: var(--bad); padding: 12px; border-radius: 6px; font-weight: 600; margin-bottom: 12px; border: 1px solid rgba(248,113,113,0.25); }
.flag-banner { background: var(--warn-bg); color: var(--warn); padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; border: 1px solid rgba(245,158,11,0.25); }

.opener-box { background: var(--panel-alt); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 6px; padding: 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 12px; }
.field-grid label { font-size: 12px; }

.manual-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); gap: 10px; }
.manual-row:last-child { border-bottom: none; }
.tri-btn-group { display: flex; gap: 4px; }
.tri-btn { padding: 4px 10px; font-size: 12px; font-family: inherit; border: 1px solid var(--border-strong); background: var(--panel-alt); color: var(--text-muted); border-radius: 4px; cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease); }
.tri-btn:hover { color: var(--text); }
.tri-btn.selected-yes { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.tri-btn.selected-no { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.tri-btn.selected-unknown { background: var(--neutral-bg); color: var(--text-muted); }

.note-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.note-item .note-date { color: var(--text-dim); font-size: 11px; }

.history-item { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }

.link-list { display: flex; flex-direction: column; gap: 6px; }
.link-list a { font-size: 13px; color: var(--gold-light); }

.small-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.small-form input, .small-form textarea { flex: 1; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 13px; background: var(--panel-alt); color: var(--text); font-family: inherit; }
.small-form input:focus, .small-form textarea:focus { outline: none; border-color: var(--gold-border); }

.raw-json { background: var(--code-bg); color: var(--code-text); padding: 10px; border-radius: 6px; font-size: 11px; overflow-x: auto; max-height: 300px; white-space: pre-wrap; border: 1px solid var(--border); font-family: "SF Mono", Consolas, monospace; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel-raised); border: 1px solid var(--gold-border); color: var(--text); padding: 10px 18px; border-radius: 6px;
  font-size: 13px; z-index: 200; box-shadow: 0 8px 24px var(--shadow-color-strong);
  animation: toastIn 160ms ease;
}
.toast.hidden { display: none; }
.toast.error { border-color: rgba(248,113,113,0.4); }

@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.status-select { padding: 4px 8px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--panel-alt); color: var(--text); font-size: 12px; font-family: inherit; transition: border-color var(--ease); }
.status-select:focus { outline: none; border-color: var(--gold-border); }

/* Nav — base .nav-btn rule is shared by every sidebar item; app.js keys
   off this class name (and the .active class it toggles) regardless of
   layout, so it stays even though the visual home for it is now a
   vertical sidebar row instead of a horizontal topbar tab. */
.nav-btn {
  border: none; background: none; padding: 7px 14px; border-radius: 5px; cursor: pointer;
  font-size: 13px; font-family: inherit; font-weight: 600; color: var(--text-muted);
  position: relative; transition: color 180ms ease, background 180ms ease;
}
.nav-btn::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--gold-light); border-radius: 2px; opacity: 0; transform: scaleX(0.6);
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.nav-btn:hover { color: var(--text); }
.nav-btn:hover::after { opacity: 0.55; transform: scaleX(1); }
.nav-btn.active { color: var(--gold-light); background: var(--gold-dim); }
.nav-btn.active::after { opacity: 1; transform: scaleX(1); }
.nav-btn.active:hover::after { box-shadow: 0 0 6px 1px var(--gold-border); }
.view.hidden { display: none; }

/* -------------------------------------------------------- Sidebar shell
   GHL-style left sidebar, replacing the old horizontal topbar entirely.
   .sidebar is pinned to the viewport (position: fixed) and .main-area is
   shifted right by exactly its width via margin-left — deliberately NOT
   a flex row on <body>, since that would make .main-area's document
   flow height depend on the sidebar and complicate the collapse
   transition. Every position:fixed overlay elsewhere (modals, toast)
   keeps positioning against the full viewport as before, since neither
   this nor .main-area sets position/transform on itself. */
.app-shell { display: block; }

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 100;
  transition: width 200ms ease; overflow-x: hidden;
}
.sidebar-header {
  display: flex; align-items: center; gap: 10px; padding: 18px 16px 16px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; overflow: hidden;
}
.sidebar-logo-mark { height: 28px; width: auto; flex-shrink: 0; }
.sidebar-logo-text {
  font-weight: 600; letter-spacing: 2px; font-size: 10px; color: var(--text-muted);
  white-space: nowrap;
}

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 8px; text-align: left; white-space: nowrap; }
.sidebar-nav-btn::after { left: 0; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
.sidebar-nav-icon { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; line-height: 1; }
.sidebar-nav-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav-lock { font-size: 11px; opacity: 0.6; flex-shrink: 0; margin-left: -4px; }
.nav-btn.nav-locked { color: var(--text-dim); }
.nav-btn.nav-locked .sidebar-nav-icon { opacity: 0.55; }

.sidebar-footer { border-top: 1px solid var(--border); padding: 12px; flex-shrink: 0; }
.current-user-box button.btn-small { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sidebar-icon-only { display: none; }
.sidebar-collapse-btn {
  width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel-alt); color: var(--text-muted); cursor: pointer; font-size: 13px;
  font-family: inherit; transition: color var(--ease), border-color var(--ease);
}
.sidebar-collapse-btn:hover { color: var(--gold-light); border-color: var(--gold-border); }

.main-area { margin-left: 240px; min-height: 100vh; transition: margin-left 200ms ease; }

.page-floating-action { position: fixed; top: 16px; right: 24px; z-index: 40; }

/* Collapsed state — persisted via localStorage, toggled on <body> so it
   survives a full page render without needing per-element JS state. */
body.sidebar-collapsed .sidebar { width: 64px; }
body.sidebar-collapsed .main-area { margin-left: 64px; }
body.sidebar-collapsed .sidebar-logo-text,
body.sidebar-collapsed .sidebar-nav-label,
body.sidebar-collapsed .sidebar-nav-lock,
body.sidebar-collapsed .sidebar-label-text { display: none; }
body.sidebar-collapsed .sidebar-icon-only { display: inline; }
body.sidebar-collapsed .sidebar-nav-btn { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
body.sidebar-collapsed .sidebar-header { justify-content: center; padding-left: 8px; padding-right: 8px; }

/* Narrow screens — icon-only by default regardless of the collapsed
   preference, same reasoning as GHL's own responsive sidebar; the
   collapse toggle is hidden since there's nothing left for it to do. */
@media (max-width: 900px) {
  .sidebar { width: 64px; }
  .main-area { margin-left: 64px; }
  .sidebar-logo-text, .sidebar-nav-label, .sidebar-nav-lock, .sidebar-label-text { display: none; }
  .sidebar-icon-only { display: inline; }
  .sidebar-nav-btn { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  .sidebar-header { justify-content: center; padding-left: 8px; padding-right: 8px; }
  .sidebar-collapse-btn { display: none; }
  /* Fixed top-right positioning collides with page content once the
     content column is this narrow (the icon-only sidebar still eats
     64px) — drop into normal document flow above the view instead. */
  .page-floating-action { position: static; display: block; width: calc(100% - 32px); margin: 16px 16px 0; }
}

/* Library */
#view-library { display: flex; flex-direction: column; height: 100vh; }
.library-tabs { flex-shrink: 0; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
#library-clients-view, #library-playbook-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.library-quick-send {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 24px; background: var(--panel); border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted);
}
.library-quick-send select {
  padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 5px;
  font-size: 13px; background: var(--panel-alt); color: var(--text); font-family: inherit;
  max-width: 280px;
}
.library-layout { display: flex; gap: 0; flex: 1; min-height: 0; }
.library-sidebar { width: 240px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--panel); padding: 16px; overflow-y: auto; }
.library-sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.library-sidebar-header h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.folder-list { display: flex; flex-direction: column; gap: 2px; }
.folder-item { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-muted); transition: background var(--ease), color var(--ease); }
.folder-item:hover { background: var(--panel-alt); color: var(--text); }
.folder-item.active { background: var(--gold-dim); color: var(--gold-light); }
.folder-item .count { color: var(--text-dim); font-size: 12px; }
.folder-item.active .count { color: var(--gold-light); opacity: 0.7; }

.library-main { flex: 1; padding: 20px 24px; overflow-y: auto; }
.library-folder-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.library-folder-actions { display: flex; gap: 8px; align-items: center; }
.file-upload-btn { cursor: pointer; }

.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.library-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.library-card:hover { border-color: var(--gold-border); box-shadow: 0 0 0 1px var(--gold-border), 0 8px 20px var(--shadow-color); transform: translateY(-1px); }
.library-card-thumb { width: 100%; height: 130px; object-fit: cover; cursor: pointer; display: block; background: var(--panel-alt); }
.library-card-pdf { width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; text-decoration: none; background: var(--panel-alt); text-align: center; padding: 8px; transition: color var(--ease); }
.library-card-pdf:hover { color: var(--gold-light); }
.library-card-body { padding: 8px 10px; }
.library-card-caption { font-size: 12px; border: none; width: 100%; background: none; padding: 2px 0; font-family: inherit; color: var(--text); }
.library-card-caption:focus { outline: none; }
.library-card-caption::placeholder { color: var(--text-dim); }
.library-card-caption-readonly { font-size: 12px; margin: 2px 0; color: var(--text-muted); }
.library-card-meta { font-size: 11px; color: var(--text-dim); display: flex; justify-content: space-between; margin-top: 4px; }
.library-card-meta a { color: var(--text-dim); transition: color var(--ease); }
.library-card-meta a:hover { color: var(--gold-light); }
.library-card-delete { background: none; border: none; cursor: pointer; color: var(--bad); font-size: 11px; font-family: inherit; padding: 0; }
.library-card-send { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 11px; font-family: inherit; padding: 0; transition: color var(--ease); }
.library-card-send:hover { color: var(--gold-light); }

.send-to-item-label { color: var(--text-muted); font-size: 13px; margin-top: -8px; }
.send-to-staff-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; max-height: 220px; overflow-y: auto; }

.upload-progress { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }

.lightbox-content { max-width: 90vw; max-height: 90vh; position: relative; animation: modalIn 160ms ease; }
.lightbox-content img { max-width: 90vw; max-height: 80vh; display: block; border-radius: 6px; border: 1px solid var(--border); }
.lightbox-caption { color: var(--text-muted); margin-top: 8px; font-size: 13px; }

/* AI Summary */
.ai-banner {
  background: var(--panel-alt); border: 1px dashed var(--gold-border); color: var(--text-muted);
  padding: 8px 12px; border-radius: 6px; font-size: 12px; letter-spacing: 0.2px;
}
.ai-banner::before { content: "AI"; display: inline-block; background: var(--gold-dim); color: var(--gold-light); font-weight: 800; font-size: 10px; padding: 1px 5px; border-radius: 4px; margin-right: 8px; }

.tab-pane h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); margin: 18px 0 6px; }
.tab-pane h3:first-of-type { margin-top: 14px; }

.ai-angles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 4px; }
.ai-angle-card {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; transition: border-color var(--ease);
}
.ai-angle-card:hover { border-color: var(--gold-border); }
.ai-angle-header { display: flex; justify-content: space-between; align-items: center; }
.ai-angle-label { font-weight: 700; font-size: 12px; color: var(--text); }
.ai-strength { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; letter-spacing: 0.3px; }
.ai-strength-strong { background: var(--good-bg); color: var(--good); }
.ai-strength-moderate { background: var(--warn-bg); color: var(--warn); }
.ai-strength-weak { background: var(--bad-bg); color: var(--bad); }
.ai-angle-text { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 0; flex: 1; }

/* Home dashboard */
#view-home { position: relative; overflow: hidden; }

/* Ambient background — Home only, deliberately not shared app-wide so
   every other page stays clean/cheap. Only `transform` is animated (the
   blur is computed once and left alone), so this stays on the GPU
   compositor instead of forcing a repaint every frame. */
.dashboard-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dashboard-ambient-shape {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--ambient-opacity);
  background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
  will-change: transform;
}
.shape-1 { width: 620px; height: 620px; top: -180px; left: -120px; animation: ambientDrift1 42s ease-in-out infinite; }
.shape-2 { width: 500px; height: 500px; top: 35%; right: -160px; animation: ambientDrift2 52s ease-in-out infinite; }
.shape-3 { width: 460px; height: 460px; bottom: -140px; left: 28%; animation: ambientDrift3 47s ease-in-out infinite; }

@keyframes ambientDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 60px) scale(1.1); }
}
@keyframes ambientDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 30px) scale(0.95); }
}
@keyframes ambientDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -40px) scale(1.05); }
}

.dashboard-layout { position: relative; z-index: 1; padding: 24px; max-width: 1400px; margin: 0 auto; }
.dashboard-header { margin-bottom: 20px; }
.dashboard-header h1 { margin: 0; font-size: 22px; }

/* Section grouping — same small-caps label + divider treatment already
   used for sidebar section headers elsewhere in the app, so each zone
   of the dashboard reads as a distinct group rather than one continuous
   grid of boxes. */
.dashboard-section { margin-bottom: 32px; }
.dashboard-section-label {
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim);
}
.dashboard-summary-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.dashboard-summary-section { flex: 1 1 280px; margin-bottom: 0; }

/* Whole-card click targets (Today's Tasks / Onboarding / Prospecting
   Tool) — same .dashboard-card look, just with a small non-interactive
   arrow hint instead of a separate nested button, since the entire card
   is the click target now. */
.dashboard-card-arrow { color: var(--text-dim); font-size: 14px; transition: color 200ms ease, transform 200ms ease; }
.dashboard-card:hover .dashboard-card-arrow { color: var(--gold-light); transform: translateX(2px); }

/* Your CRM — the single most-used daily link, so it gets a warmer,
   slightly more energetic treatment than a plain card: a gold tint at
   rest and a soft glow added to the usual hover lift. */
.dashboard-crm-card { background: var(--gold-dim); border-color: var(--gold-border); }
.dashboard-crm-card:hover { box-shadow: 0 6px 16px var(--shadow-color), 0 0 0 1px var(--gold-border), 0 0 22px rgba(201,168,76,0.25); }

/* This Week For You / Team Pulse */
.dashboard-week-summary-card { display: flex; flex-direction: column; gap: 14px; }
.dashboard-week-summary-stats { display: flex; gap: 28px; }
.dashboard-week-summary-stat { display: flex; flex-direction: column; }
.dashboard-week-summary-stat .n { font-size: 24px; font-weight: 800; color: var(--gold-light); line-height: 1.2; }
.dashboard-week-summary-stat .label { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.dashboard-team-pulse-body { display: flex; align-items: center; gap: 12px; }
.dashboard-team-pulse-crown { font-size: 28px; line-height: 1; }
.dashboard-team-pulse-body strong { font-size: 15px; color: var(--text); }
.dashboard-team-pulse-body .label { font-size: 12px; color: var(--text-dim); }
.dashboard-team-pulse-body .label span { color: var(--gold-light); font-weight: 700; }
.dashboard-section-link {
  align-self: flex-start; background: none; border: none; padding: 0; margin: 0;
  color: var(--gold-light); font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.dashboard-section-link:hover { text-decoration: underline; }

/* My Activity (Stage 3 of staff KPI tracking) — reuses .dashboard-layout/
   .dashboard-stats-row/.dashboard-grid/.dashboard-card so it looks like
   part of the same app rather than a bolted-on page. */
.activity-layout { padding: 24px; max-width: 1400px; margin: 0 auto; }
.activity-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.activity-header h1 { margin: 0; font-size: 22px; }
.activity-header-controls { display: flex; align-items: center; gap: 14px; }
.activity-range-label { font-size: 13px; color: var(--text-muted); }
.activity-explainer {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 20px;
}
.activity-explainer p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.activity-explainer p + p { margin-top: 6px; }
.activity-explainer strong { color: var(--text); font-weight: 700; }

/* Bar-style breakdown rows (Calls by Outcome / Appointments by Status /
   My Pipeline) — a proportional bar under each label+count so the
   breakdown reads at a glance instead of requiring every number to be
   read individually. */
.activity-breakdown-row { padding: 7px 0; border-bottom: 1px solid var(--border); }
.activity-breakdown-row:last-child { border-bottom: none; }
.activity-breakdown-row-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; margin-bottom: 5px;
}
.activity-breakdown-row-top .label { color: var(--text-muted); text-transform: capitalize; }
.activity-breakdown-row-top .n { font-weight: 700; color: var(--text); }
.activity-breakdown-bar-track { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.activity-breakdown-bar-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width 400ms ease; }

/* Stat card colour-coding + trend delta + target progress (My Activity
   overhaul). Sentiment classes are a fixed background/border tint per
   metric's own nature (calls/held/closed etc. are tracked-up-is-good;
   no-shows is tracked-down-is-good) — independent of which direction
   any single period's delta happens to move. */
.dashboard-stat-tile.sentiment-positive { background: var(--good-bg); border-color: rgba(74, 222, 128, 0.28); }
.dashboard-stat-tile.sentiment-negative { background: var(--bad-bg); border-color: rgba(248, 113, 113, 0.28); }
.stat-delta { font-size: 11px; margin-top: 7px; font-weight: 700; }
.stat-delta.good { color: var(--good); }
.stat-delta.bad { color: var(--bad); }
.stat-delta.neutral { color: var(--text-dim); font-weight: 500; }
.stat-target { margin-top: 10px; }
.stat-target-bar-track { height: 5px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.stat-target-bar-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width 400ms ease; }
.stat-target-bar-fill.target-met { background: var(--good); }
.stat-target-label { font-size: 10px; color: var(--text-dim); margin-top: 4px; }

/* My Activity feed — a plain chronological list, deliberately NOT
   reusing .scene-activity-item/.scene-activity-track (that one's built
   for the Home dashboard's small auto-scrolling marquee; this list can
   run to ~30 real rows and should just sit still and be readable). */
.my-activity-feed { display: flex; flex-direction: column; }
.my-activity-feed-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.my-activity-feed-item:last-child { border-bottom: none; }
.my-activity-feed-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.my-activity-feed-item .dot.prospect_status { background: var(--tier1); }
.my-activity-feed-item .dot.checklist { background: var(--good); }
.my-activity-feed-item .dot.report { background: var(--gold); }
.my-activity-feed-item .dot.call { background: var(--tier2); }
.my-activity-feed-item .dot.appointment { background: var(--warn); }
.my-activity-feed-item .text { flex: 1; color: var(--text-muted); line-height: 1.4; }
.my-activity-feed-item .when { flex-shrink: 0; font-size: 11px; color: var(--text-dim); white-space: nowrap; }

/* Team Activity (Stage 4) — admin-only roll-up table */
.table-scroll { overflow-x: auto; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--gold-light); }
th.sortable .sort-arrow { color: var(--gold-light); margin-left: 4px; }
#team-activity-tbody td:not(:first-child) { font-weight: 700; }
.team-activity-name-row { display: flex; align-items: center; gap: 8px; }
.team-activity-role-badge {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 8px; background: var(--gold-dim); color: var(--gold-light);
}

/* Stage 5 (Part B) — target status dots, flag toggle, Targets/Leaderboard */
.metric-cell { display: flex; align-items: center; gap: 6px; }
.metric-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.metric-status-dot.green { background: var(--good); }
.metric-status-dot.amber { background: var(--warn); }
.metric-status-dot.red { background: var(--bad); }

.flag-toggle {
  border: none; background: none; cursor: pointer; font-size: 14px; padding: 0 2px;
  opacity: 0.35; filter: grayscale(1); transition: opacity var(--ease), filter var(--ease);
}
.flag-toggle:hover { opacity: 0.7; }
.flag-toggle.flagged { opacity: 1; filter: none; }

#targets-tbody input[type="number"] {
  width: 70px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 5px 8px; font-size: 13px;
}
#targets-tbody input[type="number"]:focus { border-color: var(--gold-border); outline: none; }

.leaderboard-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--panel-alt); font-size: 13px;
}
.leaderboard-row:first-child { border-radius: 8px 8px 0 0; }
.leaderboard-row:last-child { border-bottom: none; border-radius: 0 0 8px 8px; }
.leaderboard-rank { font-weight: 800; color: var(--gold-light); width: 24px; text-align: center; }
.leaderboard-name { flex: 1; }
.leaderboard-count { font-weight: 700; }

@keyframes dashboardFadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dashboard-stats-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.dashboard-stat-tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; flex: 1; min-width: 180px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  animation: dashboardFadeInUp 300ms ease both;
}
.dashboard-stat-tile:hover { transform: translateY(-3px); border-color: var(--gold-border); box-shadow: 0 6px 16px var(--shadow-color), 0 0 0 1px var(--gold-border); }
.dashboard-stat-tile:nth-child(1) { animation-delay: 0ms; }
.dashboard-stat-tile:nth-child(2) { animation-delay: 60ms; }
.dashboard-stat-tile:nth-child(3) { animation-delay: 120ms; }
.dashboard-stat-tile:nth-child(4) { animation-delay: 180ms; }
.dashboard-stat-value { font-size: 26px; font-weight: 800; color: var(--gold-light); line-height: 1.2; }
.dashboard-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.dashboard-card {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  animation: dashboardFadeInUp 350ms ease both; animation-delay: 260ms;
}
.dashboard-card:hover { transform: translateY(-3px); border-color: var(--gold-border); box-shadow: 0 6px 16px var(--shadow-color), 0 0 0 1px var(--gold-border); }
.dashboard-link-card { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.dashboard-card:nth-child(2) { animation-delay: 320ms; }
.dashboard-card:nth-child(3) { animation-delay: 380ms; }
.dashboard-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.dashboard-card-header h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }

.dashboard-onboarding-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 6px;
  font-size: 13px; transition: background 180ms ease;
}
.dashboard-onboarding-item:hover { background: var(--panel); }
.dashboard-onboarding-item .name { flex-shrink: 0; width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-onboarding-item .progress-bar-track { flex: 1; margin: 0; }
.dashboard-onboarding-item .pct { flex-shrink: 0; width: 34px; text-align: right; color: var(--text-dim); font-size: 11px; }

.dashboard-more-note { font-size: 11px; color: var(--text-dim); margin-top: 8px; text-align: center; }

/* ---------------------------------------------------------- Home scene
   Growth section: Goal + MRR boxes on the left, mascot confined to its
   own grid column on the right so its idle drift can never reach into
   (or block clicks on) the boxes. Was a 2x2 grid before Recent Activity
   and the Senzo Systems link moved out into their own sections —
   .scene-boxes now just holds these two, which still lays out cleanly
   as a single row. */
.dashboard-scene { position: relative; display: grid; grid-template-columns: 1fr 300px; gap: 20px; min-height: 280px; }

.scene-boxes { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 16px; }

.scene-box {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  cursor: pointer; text-decoration: none; color: inherit; display: block;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  animation: dashboardFadeInUp 350ms ease both; animation-delay: 260ms;
}
.scene-box:hover { transform: translateY(-3px); border-color: var(--gold-border); box-shadow: 0 6px 16px var(--shadow-color), 0 0 0 1px var(--gold-border); }
.scene-box:active { transform: translateY(-1px) scale(0.97); box-shadow: 0 2px 6px var(--shadow-color); transition-duration: 80ms; }
.scene-box-header { margin-bottom: 12px; }
.scene-box-header h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }

/* 90-day goal */
.scene-goal-line { margin-bottom: 12px; }
.scene-goal-line:last-child { margin-bottom: 0; }
.scene-goal-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.scene-goal-label strong { color: var(--text); }
.scene-goal-days { font-size: 12px; color: var(--gold-light); margin-top: 10px; text-align: center; }

/* MRR growth chart */
.scene-mrr-chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.scene-mrr-total { font-size: 20px; font-weight: 800; color: var(--gold-light); margin-top: 8px; }
.scene-mrr-sub { font-size: 11px; color: var(--text-dim); }

/* Quick link (Your CRM / Senzo Systems) */
.scene-link-body { display: flex; flex-direction: column; gap: 4px; }
.scene-link-url { font-size: 18px; font-weight: 700; color: var(--gold-light); }
.scene-link-sub { font-size: 12px; color: var(--text-dim); }

/* Mascot — confined to its own 300px grid column (see .dashboard-scene
   above) so its drift range can never reach the boxes to the left.
   Three nested layers because idle drift, cursor tilt, and the hover
   pop each animate `transform` independently — stacking them on one
   element would mean the last write wins instead of composing. */
.scene-mascot-zone { position: relative; pointer-events: none; }
.mascot-drift {
  position: absolute; right: 0; bottom: 0; width: 100%; max-width: 260px;
  animation: mascotWalk 13s ease-in-out infinite; will-change: transform;
}
@keyframes mascotWalk {
  0%   { transform: translate(-14px, 0); }
  25%  { transform: translate(0, -10px); }
  50%  { transform: translate(14px, 0); }
  75%  { transform: translate(0, -10px); }
  100% { transform: translate(-14px, 0); }
}
.mascot-tilt { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: bottom center; will-change: transform; }
.mascot-img {
  display: block; width: 100%; height: auto; pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 12px 20px var(--shadow-color-strong));
}
.mascot-img:hover { animation: mascotHoverPop 500ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mascotHoverPop {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.14) rotate(-5deg); }
  55%  { transform: scale(0.96) rotate(4deg); }
  80%  { transform: scale(1.05) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@media (max-width: 900px) {
  .dashboard-scene { grid-template-columns: 1fr; min-height: 0; }
  .scene-mascot-zone { display: none; }
}
@media (max-width: 640px) {
  .scene-boxes { grid-template-columns: 1fr; }
}

/* Planner */
.planner-layout { display: flex; height: 100vh; }

.planner-sidebar { width: 310px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--panel); padding: 22px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; }
.planner-sidebar-section {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  transition: border-color var(--ease);
}
.planner-sidebar-header { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.planner-sidebar-header h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.planner-date-label { font-size: 12px; color: var(--text-muted); }
.planner-info-box-text { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); }

.planner-summary-list { display: flex; flex-direction: column; gap: 8px; }
.planner-summary-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--border); font-size: 12px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.planner-summary-item:hover { border-color: var(--gold-border); box-shadow: 0 0 0 1px var(--gold-border); background: var(--panel-alt); }
.planner-summary-item .time { color: var(--gold-light); font-weight: 700; flex-shrink: 0; width: 88px; font-size: 11px; }
.planner-summary-item.completed .text { text-decoration: line-through; color: var(--text-dim); }
.planner-summary-item.pushed .text { text-decoration: line-through; color: var(--text-dim); }

.planner-main { flex: 1; padding: 22px 28px; overflow-y: auto; }
.planner-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.planner-nav { display: flex; align-items: center; gap: 8px; }
.planner-nav strong { font-size: 14px; margin-left: 4px; }
.planner-range { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); }
.planner-range label { display: flex; align-items: center; gap: 6px; }
.planner-range select { background: var(--panel-alt); color: var(--text); border: 1px solid var(--border-strong); border-radius: 5px; padding: 4px 6px; font-family: inherit; }

.planner-timeline { display: flex; flex-direction: column; gap: 12px; }
.planner-hour-row {
  display: flex; border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  min-height: 68px; overflow: hidden; transition: background var(--ease), border-color var(--ease);
}
.planner-hour-label {
  width: 152px; flex-shrink: 0; padding: 18px 16px; font-size: 12px; color: var(--text-dim); font-weight: 600; line-height: 1.6;
  border-right: 1px solid var(--border);
}
.planner-hour-content {
  flex: 1; padding: 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
}
.planner-hour-content:hover { background: var(--panel-alt); }
.planner-hour-row.current-hour { background: var(--gold-dim); border-color: var(--gold-border); }
.planner-hour-row.current-hour .planner-hour-label { color: var(--gold-light); border-right-color: var(--gold-border); }
.planner-hour-row.upcoming-hour { background: var(--warn-bg); }
.planner-hour-row.upcoming-hour .planner-hour-label { color: var(--warn); }

.planner-task-item {
  display: flex; align-items: center; gap: 10px; background: var(--panel-raised); border: 1px solid var(--border);
  border-radius: 8px; padding: 11px 14px; font-size: 13px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.planner-task-item:hover { border-color: var(--gold-border); box-shadow: 0 0 0 1px var(--gold-border), 0 4px 14px var(--shadow-color); }
.planner-task-item input[type="checkbox"] { flex-shrink: 0; cursor: pointer; width: 16px; height: 16px; }
.planner-task-item .text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--ease); }
.planner-task-item.completed .text { text-decoration: line-through; color: var(--text-dim); }
.planner-task-item.pushed { opacity: 0.65; }
.planner-task-item.pushed .text { text-decoration: line-through; color: var(--text-dim); }
.planner-task-item .pushed-tag { font-size: 10px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; flex-shrink: 0; }
.planner-task-actions { display: flex; gap: 6px; flex-shrink: 0; opacity: 0.6; transition: opacity var(--ease); }
.planner-task-item:hover .planner-task-actions, .planner-task-item:focus-within .planner-task-actions { opacity: 1; }
.planner-task-actions button {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: var(--panel-alt); border: 1px solid var(--border-strong); color: var(--text-muted);
  font-size: 11px; font-weight: 700; font-family: inherit; padding: 6px 10px; border-radius: 6px; cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.planner-task-actions button:hover { color: var(--gold-light); border-color: var(--gold-border); background: var(--gold-dim); box-shadow: 0 0 0 3px var(--gold-dim); }
.planner-task-actions button.danger:hover { color: var(--bad); border-color: rgba(248,113,113,0.4); background: var(--bad-bg); box-shadow: 0 0 0 3px var(--bad-bg); }
.planner-add-hint { font-size: 11px; color: var(--text-dim); font-style: italic; }

/* Onboarding */
.client-grid { padding: 20px 24px 60px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.client-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px;
  cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.client-card:hover { border-color: var(--gold-border); box-shadow: 0 0 0 1px var(--gold-border), 0 8px 20px var(--shadow-color); transform: translateY(-1px); }
.client-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.client-card-header h3 { margin: 0; font-size: 15px; }
.package-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 8px; letter-spacing: 0.3px; white-space: nowrap; }
.package-badge.pkg-starter { background: rgba(91,141,239,0.14); color: var(--tier1); }
.package-badge.pkg-fullstack { background: var(--gold-dim); color: var(--gold-light); }
.package-badge.pkg-custom { background: rgba(167,139,250,0.14); color: var(--tier2); }
.client-card-contact { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.client-card-mrr { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.client-card-mrr strong { color: var(--gold-light); }

.progress-bar-track { background: var(--panel-alt); border-radius: 6px; height: 6px; overflow: hidden; margin-bottom: 4px; }
.progress-bar-fill { background: var(--gold); height: 100%; transition: width 200ms ease; }
.progress-bar-label { font-size: 11px; color: var(--text-dim); }

.client-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; padding-right: 24px; }
.client-detail-header h2 { margin: 0 0 4px; }
.client-financials { display: flex; gap: 20px; margin: 14px 0; flex-wrap: wrap; }
.client-financial-stat { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; }
.client-financial-stat .label { font-size: 10px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.4px; }
.client-financial-stat .value { font-size: 16px; font-weight: 700; color: var(--gold-light); }

.checklist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px; }
.checklist-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; border-radius: 5px; }
.checklist-item:hover { background: var(--panel-alt); }
.checklist-item input { cursor: pointer; flex-shrink: 0; }
.checklist-item.completed .checklist-text { text-decoration: line-through; color: var(--text-dim); }

.checklist-section { margin-bottom: 18px; }
.checklist-section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.checklist-section-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold-light); opacity: 0.85; }
.checklist-section-count { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.progress-bar-track-thin { height: 3px; margin-bottom: 8px; }

.client-assets-upload { margin-bottom: 12px; }
.client-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

/* Onboarding form CSV + parsed summary */
.onboarding-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 10px 0 16px; }
.onboarding-field { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.onboarding-field.wide { grid-column: 1 / -1; }
.onboarding-field-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); margin-bottom: 3px; }
.onboarding-field-value { font-size: 13px; color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.onboarding-field-value.empty { color: var(--text-dim); font-style: italic; }
.onboarding-csv-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }

/* Lovable prompt */
.lovable-prompt-section { margin-top: 16px; }
.lovable-prompt-box { margin-top: 12px; }
.lovable-prompt-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.lovable-prompt-text {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow-y: auto; font-family: inherit; color: var(--text); margin: 0 0 10px;
}
.lovable-prompt-actions { display: flex; gap: 8px; align-items: center; }

/* Reporting */
.report-card-logo { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--panel-alt); border: 1px solid var(--border); flex-shrink: 0; }
.report-card-nologo { width: 44px; height: 44px; border-radius: 8px; background: var(--panel-alt); border: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text-dim); text-align: center; }
.report-card-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.report-card-names h3 { margin: 0; font-size: 14px; }
.report-card-names .contact { font-size: 11px; color: var(--text-muted); }

.report-counters { display: flex; gap: 8px; margin-bottom: 10px; }
.report-counter { flex: 1; text-align: center; padding: 6px 4px; border-radius: 6px; font-size: 11px; background: var(--panel-alt); border: 1px solid var(--border); }
.report-counter .n { display: block; font-weight: 800; font-size: 15px; }
.report-counter.rc-good { color: var(--good); } .report-counter.rc-good .n { color: var(--good); }
.report-counter.rc-warn { color: var(--warn); } .report-counter.rc-warn .n { color: var(--warn); }
.report-counter.rc-bad { color: var(--bad); } .report-counter.rc-bad .n { color: var(--bad); }
.report-counter.rc-neutral { color: var(--text-dim); } .report-counter.rc-neutral .n { color: var(--text-dim); }

.report-card-financials { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.report-card-financials strong { color: var(--gold-light); display: block; font-size: 13px; }
.report-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-dim); margin-bottom: 12px; }

.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; }
.stat-tile { background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 8px; text-align: center; }
.stat-tile .label { font-size: 10px; text-transform: uppercase; color: var(--text-dim); letter-spacing: 0.3px; }
.stat-tile .value { font-size: 15px; font-weight: 700; color: var(--gold-light); margin-top: 2px; }
.stat-tile .delta { font-size: 10px; margin-top: 2px; font-weight: 700; }
.stat-tile .delta.up { color: var(--good); }
.stat-tile .delta.down { color: var(--bad); }

.compare-output { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.compare-chip { font-size: 11px; padding: 4px 8px; border-radius: 6px; background: var(--panel-alt); border: 1px solid var(--border); }
.compare-chip.up { color: var(--good); border-color: rgba(74,222,128,0.3); }
.compare-chip.down { color: var(--bad); border-color: rgba(248,113,113,0.3); }

.report-history-item { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; background: var(--panel-alt); }
.report-history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.report-history-dates { font-weight: 700; font-size: 13px; }
.report-notes-block { font-size: 13px; color: var(--text-muted); margin-top: 8px; white-space: pre-wrap; }
.internal-notes-block { font-size: 13px; margin-top: 8px; white-space: pre-wrap; background: var(--bad-bg); border: 1px solid rgba(248,113,113,0.3); border-radius: 6px; padding: 8px; }

.report-type-toggle { display: flex; gap: 6px; margin-bottom: 14px; }
.report-type-badge { font-size: 9px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 7px; border-radius: 8px; background: var(--panel-alt); color: var(--text-dim); border: 1px solid var(--border); }
.report-type-badge.rt-system { background: rgba(91,141,239,0.14); color: var(--tier1); border-color: transparent; }
.report-type-badge.rt-ad { background: var(--gold-dim); color: var(--gold-light); border-color: transparent; }
.report-card-latest { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.internal-notes-label { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--bad); letter-spacing: 0.4px; margin-bottom: 4px; }

.toggle-history-btn { background: none; border: none; color: var(--gold-light); cursor: pointer; font-size: 12px; font-weight: 600; padding: 0; margin: 12px 0; }

/* Onboarding <-> Planner link */
.planner-onboarding-list { display: flex; flex-direction: column; gap: 10px; }
.onboarding-card {
  background: var(--panel); border: 1px solid var(--gold-border); border-radius: 10px; padding: 14px;
  cursor: grab; font-size: 12px; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.onboarding-card:hover { box-shadow: 0 0 0 1px var(--gold-border), 0 6px 18px var(--shadow-color); transform: translateY(-1px); }
.onboarding-card:active { cursor: grabbing; }
.onboarding-card-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.onboarding-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.4px; color: var(--gold-light); background: var(--gold-dim); padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.onboarding-card-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.onboarding-chevron {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  background: var(--panel-alt); border: 1px solid var(--border-strong); color: var(--text-muted);
  cursor: pointer; font-size: 11px; font-weight: 700; font-family: inherit; padding: 6px 10px; border-radius: 6px;
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.onboarding-chevron:hover { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold-light); box-shadow: 0 0 0 3px var(--gold-dim); }
.onboarding-chevron .chevron-arrow { display: inline-block; font-size: 9px; transition: transform var(--ease); }
.onboarding-chevron.expanded .chevron-arrow { transform: rotate(90deg); }
.onboarding-chevron.expanded { color: var(--gold-light); border-color: var(--gold-border); }

.onboarding-card-progress { font-size: 10px; color: var(--text-dim); margin-top: 8px; }
/* Grid-rows trick for a smooth expand/collapse without measuring heights
   in JS: animating 1fr <-> 0fr on the outer grid track is cheap (no
   layout thrash) and works for arbitrary/variable content height. The
   inner wrapper is what actually gets clipped via overflow:hidden. */
.onboarding-subitems {
  display: grid; grid-template-rows: 1fr; margin-top: 10px;
  transition: grid-template-rows 200ms ease, margin-top 200ms ease, opacity 200ms ease;
  opacity: 1;
}
.onboarding-subitems.hidden-list { grid-template-rows: 0fr; margin-top: 0; opacity: 0; }
.onboarding-subitems-inner { overflow: hidden; display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.onboarding-subitem { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 6px 8px; border-radius: 6px; cursor: grab; transition: background var(--ease); }
.onboarding-subitem:hover { background: var(--panel-alt); }
.onboarding-subitem input { cursor: pointer; flex-shrink: 0; }
.onboarding-subitem.completed span { text-decoration: line-through; color: var(--text-dim); }

/* Timeline-placed onboarding items */
.planner-onboarding-block {
  border: 1px solid var(--gold-border); background: var(--gold-dim); border-radius: 8px; padding: 12px 14px;
  font-size: 12px; cursor: grab; transition: border-color var(--ease), box-shadow var(--ease);
}
.planner-onboarding-block:hover { box-shadow: 0 0 0 1px var(--gold-border), 0 4px 14px var(--shadow-color); }
.planner-onboarding-block .onboarding-card-header { margin-bottom: 4px; }

.planner-hour-content.drag-over { background: var(--gold-dim); outline: 2px dashed var(--gold-border); outline-offset: -2px; }
.planner-task-item[draggable="true"], .onboarding-card[draggable="true"], .onboarding-subitem[draggable="true"] { cursor: grab; }

/* Task tag pill */
.task-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-dim); background: var(--panel-alt); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; text-transform: uppercase; flex-shrink: 0; }
.planner-summary-item .task-tag { margin-left: 4px; }

/* Unplace control — distinct from delete (which uses .danger); gold on
   hover like every other non-destructive action, never red, since
   unplacing something is reversible and shouldn't read as dangerous. */
.unplace-btn {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: var(--panel-alt); border: 1px solid var(--border-strong); color: var(--text-muted);
  cursor: pointer; font-size: 11px; font-weight: 700; font-family: inherit; padding: 6px 10px; border-radius: 6px;
  margin-left: auto; transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.unplace-btn:hover { color: var(--gold-light); border-color: var(--gold-border); background: var(--gold-dim); box-shadow: 0 0 0 3px var(--gold-dim); }

/* Custom task input — sidebar */
.custom-task-form { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.custom-task-form input { padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 12px; font-family: inherit; background: var(--panel); color: var(--text); transition: border-color var(--ease); }
.custom-task-form input:focus { outline: none; border-color: var(--gold-border); }
.custom-task-form-row { display: flex; gap: 8px; }
.custom-task-form-row input { flex: 1; min-width: 0; }

/* Unscheduled tray */
.planner-unscheduled-tray { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.planner-unscheduled-tray.hidden { display: none; }
.planner-unscheduled-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-dim); margin-bottom: 12px; }
.planner-unscheduled-header span { text-transform: none; font-weight: 400; }
.planner-unscheduled-list { display: flex; flex-direction: column; gap: 8px; }

/* Prospects widget */
/* .prospects-widget's own card-level hover (lift+glow) comes from the
   shared .dashboard-card rule — it carries both classes now that the
   widget lives on the Home dashboard. */
.prospects-widget-stat { font-size: 13px; margin-bottom: 10px; }
.prospects-widget-stat .n { font-weight: 800; color: var(--gold-light); font-size: 16px; }
.prospects-widget-top { display: flex; align-items: center; gap: 8px; font-size: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.prospects-widget-top:hover { border-color: var(--gold-border); box-shadow: 0 0 0 1px var(--gold-border); background: var(--panel-alt); }
.prospects-widget-top .name { font-weight: 600; }

/* Blocking delete-confirmation modal */
.delete-warning { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
.delete-warning-severe {
  color: var(--bad); background: var(--bad-bg); border: 1px solid rgba(248,113,113,0.35);
  border-radius: 6px; padding: 10px 12px; font-weight: 600;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.btn-danger-solid { background: var(--bad); color: var(--on-bad); border-color: var(--bad); font-weight: 700; }
.btn-danger-solid:hover { background: var(--bad-hover); border-color: var(--bad-hover); }
.btn-danger-solid:disabled { background: var(--bad-bg); color: var(--text-dim); border-color: var(--border); font-weight: 400; cursor: not-allowed; }

/* Block management */
.blocks-manage-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.block-manage-item {
  display: flex; align-items: center; gap: 8px; background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px;
}
.block-manage-item input[type="text"], .block-manage-item input[type="time"] {
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: 5px; padding: 5px 7px;
  font-size: 13px; color: var(--text); font-family: inherit;
}
.block-manage-item .block-name-input { flex: 1; min-width: 0; }
.block-reorder-btns { display: flex; flex-direction: column; gap: 1px; }
.block-reorder-btns button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 10px; padding: 0 4px; line-height: 1.2; }
.block-reorder-btns button:hover { color: var(--gold-light); }
.block-reorder-btns button:disabled { opacity: 0.25; cursor: default; }
.block-edit-row { display: flex; gap: 8px; align-items: center; }
.block-edit-row input { flex: 1; }

/* Admin panel */
.admin-staff-list { display: flex; flex-direction: column; gap: 12px; }
.admin-staff-row {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px;
  transition: border-color var(--ease);
}
.admin-staff-row.inactive { opacity: 0.55; }
.admin-staff-row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.admin-staff-name { font-weight: 700; font-size: 14px; }
.admin-staff-email { font-size: 12px; color: var(--text-muted); }
.admin-staff-badges { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.admin-staff-status-badge { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 8px; }
.admin-staff-status-badge.active { background: var(--good-bg); color: var(--good); }
.admin-staff-status-badge.inactive { background: var(--bad-bg); color: var(--bad); }
.admin-staff-status-badge.pending { background: var(--warn-bg); color: var(--warn); }
.admin-staff-status-badge.deleted { background: var(--neutral-bg); color: var(--text-dim); }
.admin-staff-actions { display: flex; gap: 8px; flex-shrink: 0; }
.admin-staff-title-row { margin-bottom: 12px; }
.admin-staff-title-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.admin-staff-title-row input {
  font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text);
  padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--panel-alt); font-family: inherit; max-width: 240px;
}
.admin-permissions-grid { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.admin-permission-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--panel-alt); border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 10px; cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
.admin-permission-toggle input { cursor: pointer; }
.admin-permission-toggle.on { color: var(--gold-light); border-color: var(--gold-border); background: var(--gold-dim); }

/* ------------------------------------------------------------ Avatars
   Profile picture when one's uploaded, initials otherwise. Sized by
   modifier, never by the image's own dimensions (object-fit: cover crops
   any aspect ratio to the circle). */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: var(--gold-dim); color: var(--gold-light); border: 1px solid var(--gold-border);
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.3px; user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 22px; height: 22px; font-size: 9px; }
.avatar-lg { width: 88px; height: 88px; font-size: 28px; }
.avatar-with-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

.current-user-identity { display: flex; align-items: center; gap: 10px; padding: 2px 4px; min-width: 0; }
.current-user-identity #current-user-name { padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer-nav { margin-bottom: 2px; }
body.sidebar-collapsed .current-user-identity { justify-content: center; padding: 2px 0; }
@media (max-width: 900px) {
  .current-user-identity { justify-content: center; padding: 2px 0; }
}

/* ---------------------------------------------------------- Settings page */
.settings-layout { padding: 24px; max-width: 760px; margin: 0 auto; }
.settings-card {
  margin-top: 18px; padding: 20px 22px; background: var(--panel-alt);
  border: 1px solid var(--border); border-radius: 12px;
}
.settings-card h3 { margin: 0 0 6px; font-size: 16px; }
.settings-card h4 {
  margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid var(--border);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim);
}
.settings-desc { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 620px; }
.settings-hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.settings-optional { font-weight: 400; color: var(--text-dim); }
.settings-readonly-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; font-size: 13px; color: var(--text-muted);
}
.settings-readonly-row strong { color: var(--text); text-align: right; word-break: break-all; }
.settings-profile-row { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.settings-avatar-actions { display: flex; flex-direction: column; gap: 8px; }
.settings-button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-inline-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.settings-inline-form label { flex: 1 1 240px; margin-bottom: 0; }
.settings-card > form + a.btn, .settings-inline-form + a.btn { margin-top: 12px; }

.settings-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.settings-status-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 3px 10px; border-radius: 10px;
}
.settings-status-badge.on { background: var(--good-bg); color: var(--good); }
.settings-status-badge.off { background: var(--neutral-bg); color: var(--text-dim); }

.settings-panel { margin-top: 16px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.settings-steps { margin: 0 0 12px; padding-left: 20px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
/* A QR code has to be dark-on-white to scan, in either theme. */
.settings-qr { display: inline-block; background: #ffffff; padding: 10px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; }
.settings-qr img { display: block; width: 180px; height: 180px; }
.settings-card code {
  font-family: "SF Mono", Consolas, monospace; font-size: 12px; color: var(--text);
  background: var(--neutral-bg); padding: 2px 6px; border-radius: 4px; word-break: break-all;
}
.settings-panel .settings-inline-form { margin-top: 14px; }
.settings-warning {
  margin: 0 0 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--text);
  background: var(--warn-bg); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 8px;
}
.settings-recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.settings-recovery-codes code { text-align: center; padding: 8px; font-size: 14px; letter-spacing: 1px; }

.settings-choice-group { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.settings-choice {
  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-muted);
  padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.settings-choice:hover { color: var(--text); border-color: var(--gold-border); }
.settings-choice.active { background: var(--gold-dim); color: var(--gold-light); border-color: var(--gold-border); }
#settings-theme-hint { margin-top: 10px; }

@media (max-width: 640px) {
  .settings-layout { padding: 16px; }
  .settings-card { padding: 16px; }
  .settings-profile-row { flex-direction: column; align-items: flex-start; }
  .settings-readonly-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .settings-readonly-row strong { text-align: left; }
}

.team-activity-realname { font-weight: 400; font-size: 11px; color: var(--text-dim); }

/* Light theme: --gold-light is a dark gold (for text), so a hover that
   reuses it as a *background* would go muddy — use a brighter gold there. */
html[data-theme="light"] .btn-primary:hover { background: #cfa73f; }

/* ------------------------------------------------------------ Team chat
   Fills exactly one viewport: header and composer stay put, only the
   message list scrolls (so "scroll up for history" and "stick to the
   bottom" are about one element, not the whole page). 100dvh keeps the
   composer above mobile browsers' collapsing toolbars. */
#view-chat { height: 100vh; height: 100dvh; }
.team-chat-layout {
  position: relative; height: 100%; display: flex; flex-direction: column;
  max-width: 1000px; margin: 0 auto; padding: 18px 24px 14px;
}
.team-chat-header { flex-shrink: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.team-chat-header h1 { margin: 0; font-size: 20px; }
.team-chat-hash { color: var(--text-dim); margin-right: 2px; }
.team-chat-subtitle { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }

.team-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 0; overscroll-behavior: contain; }
.team-chat-history-status { text-align: center; font-size: 12px; color: var(--text-dim); padding: 6px 0; min-height: 26px; }
.team-chat-empty { text-align: center; color: var(--text-dim); font-style: italic; padding: 40px 12px; }

.team-chat-day {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim);
}
.team-chat-day::before, .team-chat-day::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.team-chat-msg {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px;
  padding: 5px 10px; border-radius: 8px; transition: background var(--ease);
}
.team-chat-msg:hover { background: var(--neutral-bg); }
.team-chat-msg:not(.continued) { margin-top: 6px; }
.team-chat-msg .avatar { width: 36px; height: 36px; font-size: 13px; margin-top: 2px; }
.team-chat-gutter-time {
  font-size: 10px; color: var(--text-dim); text-align: right; padding-top: 3px;
  opacity: 0; transition: opacity var(--ease); white-space: nowrap;
}
.team-chat-msg:hover .team-chat-gutter-time { opacity: 1; }
.team-chat-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; }
.team-chat-name { font-weight: 700; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.team-chat-msg.mine .team-chat-name { color: var(--gold-light); }
.team-chat-role {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 6px; background: var(--gold-dim); color: var(--gold-light);
}
.team-chat-time { font-size: 11px; color: var(--text-dim); }
.team-chat-body {
  font-size: 14px; line-height: 1.5; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.team-chat-msg.pending .team-chat-body { opacity: 0.55; }
.team-chat-status { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.team-chat-msg.failed .team-chat-status { color: var(--bad); }
.team-chat-retry {
  background: none; border: none; padding: 0; margin-left: 6px; font: inherit; font-weight: 700;
  color: var(--bad); text-decoration: underline; cursor: pointer;
}

.team-chat-jump {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 5;
  border: 1px solid var(--gold-border); background: var(--panel-raised); color: var(--gold-light);
  padding: 6px 14px; border-radius: 16px; font: 600 12px/1.2 inherit; font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 14px var(--shadow-color);
}
.team-chat-jump:hover { background: var(--gold-dim); }

.team-chat-composer {
  flex-shrink: 0; display: flex; align-items: flex-end; gap: 8px; margin-top: 8px;
  padding: 8px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 10px;
  transition: border-color var(--ease);
}
.team-chat-composer:focus-within { border-color: var(--gold-border); }
.team-chat-composer textarea {
  flex: 1; min-width: 0; resize: none; border: none; outline: none; background: transparent;
  color: var(--text); font: 14px/1.45 inherit; font-family: inherit; padding: 6px 4px;
  max-height: 160px; overflow-y: auto;
}
.team-chat-composer textarea::placeholder { color: var(--text-dim); }
.team-chat-composer .btn { flex-shrink: 0; }
.team-chat-composer .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.team-chat-composer-hint {
  flex-shrink: 0; display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--text-dim); padding: 5px 4px 0;
}
.team-chat-composer-hint kbd {
  font-family: inherit; font-size: 10px; padding: 0 4px; border: 1px solid var(--border-strong); border-radius: 3px;
}
#team-chat-counter.near-limit { color: var(--warn); font-weight: 600; }

@media (max-width: 640px) {
  .team-chat-layout { padding: 12px 10px 10px; }
  .team-chat-msg { grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; padding: 4px 6px; }
  .team-chat-msg .avatar { width: 30px; height: 30px; font-size: 11px; }
  .team-chat-composer-hint > span:first-child { display: none; } /* no hardware keyboard to hint about */
}

/* Delete-your-own-message: revealed on hover/focus like the Planner task
   actions; always faintly visible on touch screens, which have no hover.
   It sits right after the message text (not pinned to the row's far edge),
   so on a wide monitor it appears where you're looking — a short message's
   row can be ~950px wide. Long text wraps and the button stays at its end.
   Negative vertical margin keeps a 22px button from making own-message
   rows taller than everyone else's (the text line is ~21px). */
.team-chat-line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.team-chat-line .team-chat-body { min-width: 0; }
.team-chat-delete {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; margin: -1px 0; padding: 0; border-radius: 6px; cursor: pointer;
  background: var(--panel-alt); border: 1px solid var(--border-strong); color: var(--text-muted);
  opacity: 0; transition: opacity var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
}
.team-chat-msg:hover .team-chat-delete, .team-chat-delete:focus-visible { opacity: 1; }
.team-chat-delete:hover { color: var(--bad); border-color: rgba(248, 113, 113, 0.4); background: var(--bad-bg); }
@media (hover: none) { .team-chat-delete { opacity: 0.55; } }
.team-chat-deleted { color: var(--text-dim); font-style: italic; }

/* "A new version is live" bar — shown when the server's build id stops
   matching the one this page loaded with. Top of the screen, not the
   bottom: at the bottom it sat on top of the chat message box. */
.update-banner {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 250;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px; border-radius: 10px; font-size: 13px; color: var(--text);
  background: var(--panel-raised); border: 1px solid var(--gold-border); box-shadow: 0 8px 24px var(--shadow-color-strong);
}
.update-banner .btn { flex-shrink: 0; }

/* ---------------------------------------------------------- Website Builder */
.wb-layout { max-width: 920px; }
.wb-layout label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.wb-layout label input[type="text"], .wb-layout label textarea, .wb-field input, .wb-field textarea {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  border: 1px solid var(--border-strong); border-radius: 5px; font-size: 13px; font-family: inherit;
  background: var(--panel); color: var(--text); transition: border-color var(--ease);
}
.wb-field textarea, .wb-layout label textarea { resize: vertical; line-height: 1.5; }
.wb-field input:focus-visible, .wb-field textarea:focus-visible, .wb-layout label textarea:focus-visible {
  outline: 2px solid var(--gold-border); outline-offset: 1px; border-color: var(--gold-border);
}
.wb-file-label input[type="file"] { display: block; margin-top: 6px; font-size: 13px; color: var(--text-muted); max-width: 100%; }
.wb-slide { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px 4px; margin: 0 0 14px; min-width: 0; }
.wb-slide legend { padding: 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); }
.wb-field { margin-bottom: 12px; min-width: 0; }
.wb-field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wb-field-label label { margin: 0; }
.wb-required { color: var(--bad); }
.wb-field-note { min-height: 0; font-size: 12px; color: var(--warn); margin-top: 3px; }
.wb-field-note:empty { display: none; }
.wb-field-blocking input, .wb-field-blocking textarea { border-color: var(--bad); }
.wb-field-blocking .wb-field-note { color: var(--bad); }
.wb-chip {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.wb-chip-ok { background: var(--good-bg); color: var(--good); }
.wb-chip-missing { background: var(--bad-bg); color: var(--bad); }
.wb-chip-check { background: var(--warn-bg); color: var(--warn); }
.wb-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-page-chip { font-size: 12px; padding: 4px 10px; border-radius: 14px; background: var(--neutral-bg); color: var(--text); border: 1px solid var(--border); }
.wb-page-chip em { font-style: normal; color: var(--text-dim); }
.wb-logo-preview { margin: -4px 0 14px; padding: 10px; display: inline-block; background: #ffffff; border: 1px solid var(--border); border-radius: 8px; }
.wb-logo-preview img { display: block; max-height: 60px; width: auto; max-width: 240px; }
.wb-problems { margin: 4px 0 12px; padding: 10px 12px; font-size: 13px; color: var(--text); background: var(--bad-bg); border: 1px solid rgba(248, 113, 113, 0.35); border-radius: 8px; }
.wb-problems ul { margin: 6px 0 0; padding-left: 18px; }
.wb-generate-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.wb-generate-row .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.wb-build { padding: 14px 0; border-top: 1px solid var(--border); }
.wb-build:first-child { border-top: none; padding-top: 4px; }
.wb-build-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wb-build-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.wb-build-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-build-meta { margin-top: 4px; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.wb-url { font-family: "SF Mono", Consolas, monospace; font-size: 11px; }
.wb-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 3px 10px; border-radius: 10px; }
.wb-status-generating { background: var(--gold-dim); color: var(--gold-light); }
.wb-status-preview_ready { background: var(--good-bg); color: var(--good); }
.wb-status-failed { background: var(--bad-bg); color: var(--bad); }
.wb-build-stage { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.wb-spinner {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--gold-dim); border-top-color: var(--gold); animation: wb-spin 0.9s linear infinite;
}
@keyframes wb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wb-spinner { animation: none; } }
.wb-build-error { margin-top: 8px; font-size: 13px; color: var(--bad); line-height: 1.5; }
.wb-quality { margin-top: 10px; font-size: 13px; }
.wb-quality summary { cursor: pointer; color: var(--good); font-weight: 600; }
.wb-quality summary.wb-quality-failed { color: var(--bad); }
.wb-quality-body { margin-top: 8px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); overflow-wrap: anywhere; }
.wb-quality-body h5 { margin: 12px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); }
.wb-quality-body ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.wb-quality-body code { font-size: 11px; }
@media (max-width: 640px) {
  .wb-slide { padding: 10px 10px 2px; }
}
.wb-cost { color: var(--text-muted); font-weight: 600; }
.wb-costs summary { color: var(--text-muted); }
.wb-usage { width: 100%; font-size: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wb-usage th, .wb-usage td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.wb-usage th:first-child, .wb-usage td:first-child { text-align: left; }
.wb-usage-total td { font-weight: 700; color: var(--text); border-bottom: none; }

/* ------------------------------------------- Lead archive / Search History */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lead-check-cell { width: 34px; text-align: center; padding-left: 8px !important; padding-right: 4px !important; }
.lead-check { width: 18px; height: 18px; margin: 0; accent-color: var(--gold); cursor: pointer; vertical-align: middle; }
.lead-actions-cell { white-space: nowrap; text-align: right; }
.lead-actions-cell .btn + .btn { margin-left: 6px; }
.leads-table tr.is-archived td, .lm-table tr.is-archived td { color: var(--text-muted); }
.lead-bulk-bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 12px; padding: 10px 12px; background: var(--panel-raised); border: 1px solid var(--gold-border);
  border-radius: 10px; box-shadow: 0 6px 18px var(--shadow-color);
}
.lead-bulk-count { font-size: 13px; font-weight: 700; color: var(--text); margin-right: auto; }
.lm-bulk-bar { position: static; box-shadow: none; border-color: var(--border); }
.archived-badge {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 9px; background: var(--neutral-bg); color: var(--text-muted);
  border: 1px solid var(--border-strong); vertical-align: middle;
}
.archived-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 10px 0; padding: 10px 12px; font-size: 13px; color: var(--text-muted);
  background: var(--neutral-bg); border: 1px solid var(--border-strong); border-radius: 8px;
}
.add-duplicate-warning {
  margin: 4px 0 12px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--text);
  background: var(--warn-bg); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 8px;
}
.add-duplicate-warning ul { margin: 6px 0; padding-left: 18px; }

.history-subtitle { margin: 4px 0 16px; font-size: 13px; color: var(--text-muted); }
.history-batch { margin-bottom: 10px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 10px; }
.history-batch-head {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 14px 16px; min-height: 44px;
  background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px;
}
.history-batch-head:hover { background: var(--neutral-bg); }
.history-batch-head:focus-visible { outline: 2px solid var(--gold-border); outline-offset: 2px; }
.history-chevron { flex-shrink: 0; margin-top: 2px; color: var(--text-dim); transition: transform var(--ease); }
.history-batch-head[aria-expanded="true"] .history-chevron { transform: rotate(90deg); }
.history-batch-summary { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.history-batch-title { font-size: 14px; color: var(--text); }
.history-owner { font-size: 12px; font-weight: 600; color: var(--gold-light); margin-left: 4px; }
.history-date { font-size: 12px; color: var(--text-dim); margin-left: 6px; }
.history-running { font-size: 11px; font-weight: 700; color: var(--gold-light); }
.history-failed { font-size: 11px; font-weight: 700; color: var(--bad); }
.history-prompt { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.history-prompt-missing { color: var(--text-dim); font-style: italic; }
.history-followup { color: var(--text-muted); }
.history-counts, .history-breakdown { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.history-batch-body { padding: 0 16px 14px; }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }

.lm-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.lm-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 130px; }
.lm-filters select, .lm-filters input {
  padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 5px; font: inherit; font-size: 13px;
  background: var(--panel-alt); color: var(--text); min-height: 36px;
}
.lm-filters .lm-search { flex: 1 1 200px; }
.lm-duplicates { margin-top: 16px; font-size: 13px; color: var(--text-muted); }
.lm-duplicates summary { cursor: pointer; font-weight: 600; color: var(--text); }
.lm-duplicates ul { padding-left: 18px; line-height: 1.7; }
#delete-leads-summary ul { margin: 6px 0; padding-left: 18px; }

@media (max-width: 640px) {
  .lead-check { width: 22px; height: 22px; }
  .history-batch-head { padding: 12px; }
  .history-batch-body { padding: 0 12px 12px; }
  .lm-filters label { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
  .lead-bulk-bar .btn { min-height: 40px; }
}
/* Same side spacing as All Leads' <main> and the Overview tab. */
#prospects-history-view { padding: 4px 24px 60px; }
#leads-bulk-bar { margin: 6px 24px 0; }
#delete-leads-modal label:not(.checkbox-label) { display: block; margin: 12px 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
#delete-leads-modal label:not(.checkbox-label) input {
  display: block; width: 100%; margin-top: 6px; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--panel-alt); color: var(--text);
}
#delete-leads-modal .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
/* Wide tables scroll inside .table-scroll on phones instead of crushing columns. */
.lm-table { min-width: 720px; }
.history-table { min-width: 640px; }

/* ------------------------------------------------------------- outreach */
#view-outreach .prospects-tabs { margin-bottom: 14px; }
.or-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 12px 16px; margin-bottom: 18px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel); font-size: 13px;
}
.or-banner:empty { display: none; }
.or-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--text-dim); }
.or-banner-on { border-color: rgba(74, 222, 128, 0.35); }
.or-banner-on .or-dot { background: var(--good); box-shadow: 0 0 0 4px var(--good-bg); }
.or-banner-off .or-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.or-banner-main strong { color: var(--text); margin-right: 4px; }
.or-banner-main { color: var(--text-muted); }
.or-banner-limits { margin-left: auto; color: var(--gold-light); font-weight: 600; }
.or-banner-limits em { color: var(--text-muted); font-style: normal; font-weight: 400; }
.or-stats .dashboard-stat-tile { min-width: 130px; padding: 12px 16px; }
.or-stats .dashboard-stat-value { font-size: 22px; }

.or-form { display: flex; flex-direction: column; gap: 10px; }
.or-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); flex: 1; }
.or-form input, .or-form select, .or-form textarea,
.or-settings input[type=time], .or-settings input[type=number], .or-status-select {
  background: var(--panel-alt); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
}
.or-form textarea { resize: vertical; }
.or-form input:focus, .or-form select:focus, .or-form textarea:focus, .or-settings input:focus {
  outline: none; border-color: var(--gold-border); box-shadow: 0 0 0 3px var(--gold-dim);
}
.or-form-row { display: flex; gap: 10px; align-items: flex-end; }
.or-form-row > .btn { flex: 0 0 auto; }
#outreach-bulk-area { flex: 1; }

.or-filter-bar { margin: 6px 0 12px; overflow-x: auto; }
.or-chip-row { flex-wrap: nowrap; }
.or-chip-row .tier-btn { white-space: nowrap; }

.or-group-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.or-group-card {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.or-group-card.or-status-joined { border-left-color: var(--good); }
.or-group-card.or-status-pending { border-left-color: var(--warn); }
.or-group-card.or-status-to_join { border-left-color: var(--gold); }
.or-group-card.or-status-rejected, .or-group-card.or-status-left { border-left-color: var(--bad); opacity: 0.75; }
.or-group-card.or-editing { border-color: var(--gold-border); border-left-color: var(--gold); }
.or-group-top { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.or-group-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.or-group-title a { color: var(--text); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.or-group-title a:hover { color: var(--gold-light); }
.or-status-select { width: auto; flex: 0 0 auto; padding: 6px 8px; font-size: 13px; }
.or-group-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; }
.or-muted { color: var(--text-muted); font-size: 12px; }
.or-rules { margin: 0; font-size: 12px; color: var(--text-muted); background: var(--panel-alt); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; }
.or-group-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.or-spacer { flex: 1; }
.or-pill-good, .or-pill-allowed { background: var(--good-bg); color: var(--good); }
.or-pill-specific_days { background: var(--gold-dim); color: var(--gold-light); }
.or-pill-not_allowed { background: var(--bad-bg); color: var(--bad); }
.or-pill-unknown { background: var(--warn-bg); color: var(--warn); }

.or-settings { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.or-switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--border); cursor: pointer;
}
.or-switch-row:first-of-type { border-top: 0; padding-top: 4px; }
.or-switch-row strong { color: var(--text); }
.or-switch-row span { display: flex; flex-direction: column; gap: 3px; }
.or-switch-row small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.or-switch {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 13px;
  background: var(--border-strong); position: relative; cursor: pointer; transition: background 150ms ease; margin: 0;
}
.or-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text); transition: transform 150ms ease;
}
.or-switch:checked { background: var(--gold); }
.or-switch:checked::after { transform: translateX(20px); background: #0d0d0d; }
.or-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.or-switch:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.or-times { margin-top: 6px; }
.or-times label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); flex: 1; }
.or-limits-grid { display: grid; grid-template-columns: 1fr 90px 90px; gap: 8px 12px; align-items: center; font-size: 14px; margin-bottom: 6px; }
.or-col-head { font-size: 12px; color: var(--gold-light); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.or-save-row { display: flex; justify-content: flex-end; }
.or-admin-note { color: var(--text-muted); font-size: 13px; margin: 0; }

@media (max-width: 640px) {
  .or-banner-limits { margin-left: 0; width: 100%; }
  .or-group-list { grid-template-columns: 1fr; }
  .or-form-row { flex-direction: column; align-items: stretch; }
  .or-limits-grid { grid-template-columns: 1fr 70px 70px; font-size: 13px; }
  .or-save-row .btn { width: 100%; }
  .or-stats .dashboard-stat-tile { min-width: calc(50% - 7px); flex: 1 1 calc(50% - 7px); }
}

/* outreach stage 2 */
.or-tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--gold); color: #0d0d0d; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.or-plan-head { margin-bottom: 14px; }
.or-plan-head.or-plan-done { border-color: var(--border); }
.or-plan-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.or-plan-title h3 { margin: 0; }
.or-plan-pill { background: var(--neutral-bg); color: var(--text-muted); }
.or-plan-pill-draft { background: var(--gold-dim); color: var(--gold-light); }
.or-plan-pill-approved, .or-plan-pill-running { background: var(--good-bg); color: var(--good); }
.or-plan-pill-paused { background: var(--warn-bg); color: var(--warn); }
.or-plan-tally { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--text-muted); margin: 4px 0 14px; }
.or-plan-tally strong { color: var(--gold-light); font-size: 18px; margin-right: 2px; }
.or-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.or-run-summary { white-space: pre-wrap; font-size: 13px; background: var(--panel-alt); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.or-run-warning { background: var(--bad-bg); color: var(--bad); border: 1px solid rgba(248,113,113,0.35); }
.or-notes { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); border: 1px solid rgba(245,158,11,0.3); }
.or-notes p { margin: 4px 0; font-size: 13px; color: var(--text); line-height: 1.45; }
.or-plan-section { margin-bottom: 22px; }
.or-section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-light); margin: 0 0 10px; }
.or-section-title .or-muted { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.or-item-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.or-item { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.or-item-sent { border-color: rgba(74, 222, 128, 0.35); }
.or-item-failed { border-color: rgba(248, 113, 113, 0.45); }
.or-item-skipped { opacity: 0.7; }
.or-item-removed { flex-direction: row; justify-content: space-between; padding: 8px 14px; opacity: 0.5; font-size: 13px; text-decoration: line-through; }
.or-item-name { color: var(--text); font-weight: 700; }
.or-status-pill { flex: 0 0 auto; }
.or-item-pill-planned { background: var(--neutral-bg); color: var(--text-muted); }
.or-item-pill-sent { background: var(--good-bg); color: var(--good); }
.or-item-pill-failed { background: var(--bad-bg); color: var(--bad); }
.or-item-pill-skipped { background: var(--warn-bg); color: var(--warn); }
.or-style-pill { background: var(--gold-dim); color: var(--gold-light); }
.or-message { background: var(--panel-alt); border-radius: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; color: var(--text); }
.or-message-post { max-height: 180px; overflow: auto; font-size: 13px; }
.or-message-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 4px; white-space: normal; }
.or-flag { background: var(--warn-bg); color: var(--warn); }
.or-group-card.or-status-suggested { border-left-color: var(--info); }
.or-review-card { border-color: rgba(56, 189, 248, 0.35); }
.or-review-card .or-group-list { margin-top: 4px; }
.or-summary { margin: 0; font-size: 13px; color: var(--text); line-height: 1.45; }
.or-fit { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.or-fit-good { background: var(--good-bg); color: var(--good); }
.or-fit-mid { background: var(--gold-dim); color: var(--gold-light); }
.or-fit-low { background: var(--bad-bg); color: var(--bad); }
.or-new-post summary { list-style: none; display: inline-block; cursor: pointer; }
.or-new-post summary::-webkit-details-marker { display: none; }
.or-new-post[open] summary { margin-bottom: 12px; }
.or-post-off { opacity: 0.55; }
.or-inline-switch { flex: 0 0 auto; }
@media (max-width: 640px) {
  .or-item-list { grid-template-columns: 1fr; }
  .or-plan-actions .btn { flex: 1 1 auto; }
}

/* outreach stage 3: agent mission control */
.or-mc-hero {
  --mc: var(--text-dim);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  padding: 24px 26px; margin-bottom: 16px; border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--mc) 16%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: 1px solid color-mix(in srgb, var(--mc) 35%, var(--border));
}
.or-mc-run { --mc: var(--good); }
.or-mc-ready, .or-mc-done { --mc: var(--gold); }
.or-mc-wait { --mc: var(--info); }
.or-mc-off, .or-mc-idle { --mc: var(--text-dim); }
.or-mc-bad { --mc: var(--bad); }
.or-mc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.or-mc-head h2 { margin: 6px 0 4px; font-size: 26px; line-height: 1.15; color: var(--text); }
.or-mc-head p { margin: 0 0 12px; color: var(--text-muted); font-size: 14px; line-height: 1.45; max-width: 640px; white-space: pre-wrap; }
.or-mc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.or-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--neutral-bg); color: var(--text-muted); border: 1px solid var(--border); }
.or-live { font-size: 10px; letter-spacing: 0.12em; padding: 1px 7px; border-radius: 4px; background: var(--good-bg); color: var(--good); animation: orBlink 1.6s ease-in-out infinite; }
@keyframes orBlink { 50% { opacity: 0.45; } }
.or-mc-countdown { text-align: right; display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.or-mc-countdown strong { font-size: 30px; font-weight: 800; color: var(--gold-light); line-height: 1.1; font-variant-numeric: tabular-nums; }
.or-mc-countdown small { color: var(--text-muted); font-size: 12px; }

.or-orb { --mc: var(--text-dim); position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.or-orb-run { --mc: var(--good); } .or-orb-ready, .or-orb-done { --mc: var(--gold); }
.or-orb-wait { --mc: var(--info); } .or-orb-bad { --mc: var(--bad); }
.or-orb i { position: absolute; inset: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, var(--mc) 45%, color-mix(in srgb, var(--mc) 40%, #000) 100%); box-shadow: 0 0 24px color-mix(in srgb, var(--mc) 60%, transparent); }
.or-orb span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--mc) 50%, transparent); opacity: 0.5; }
.or-orb span:nth-child(2) { inset: 10px; opacity: 0.35; }
.or-orb span:nth-child(3) { inset: 18px; opacity: 0.25; }
.or-orb-run span { animation: orPulse 2.4s ease-out infinite; }
.or-orb-run span:nth-child(2) { animation-delay: 0.8s; }
.or-orb-run span:nth-child(3) { animation-delay: 1.6s; }
.or-orb-run i { animation: orBreathe 2.4s ease-in-out infinite; }
.or-orb-bad i { animation: orBreathe 1.2s ease-in-out infinite; }
@keyframes orPulse { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes orBreathe { 50% { transform: scale(0.9); filter: brightness(1.25); } }

.or-mc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 16px; }
.or-mc-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.or-rings { display: flex; justify-content: space-around; gap: 12px; flex-wrap: wrap; }
.or-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; }
.or-ring svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.or-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.or-ring-track { stroke: var(--panel-alt); }
.or-ring-plan { stroke: var(--gold-dim); }
.or-ring-fill { stroke: var(--gold); transition: stroke-dashoffset 600ms ease; }
.or-ring-num { position: absolute; top: 30px; left: 0; right: 0; text-align: center; font-variant-numeric: tabular-nums; }
.or-ring-num strong { font-size: 22px; color: var(--text); }
.or-ring-num span { font-size: 13px; color: var(--text-muted); }
.or-ring-label { font-size: 12px; color: var(--text-muted); text-align: center; }
.or-week { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.or-week-tile { background: var(--panel-alt); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.or-week-tile strong { font-size: 20px; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.or-week-tile span { font-size: 11px; color: var(--text-muted); }
.or-week-note { grid-column: 1 / -1; margin: 2px 0 0; }

.or-feed { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.or-ev { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 9px 2px; border-top: 1px solid var(--border); font-size: 14px; }
.or-ev:first-child { border-top: 0; }
.or-ev-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--neutral-bg); color: var(--text-muted); }
.or-ev-msg { color: var(--text); line-height: 1.4; }
.or-ev time { font-size: 12px; color: var(--text-dim); white-space: nowrap; padding-top: 3px; }
.or-ev-join .or-ev-icon, .or-ev-post .or-ev-icon, .or-ev-dm .or-ev-icon, .or-ev-run_finished .or-ev-icon, .or-ev-plan_approved .or-ev-icon { background: var(--good-bg); color: var(--good); }
.or-ev-group_found .or-ev-icon, .or-ev-page_found .or-ev-icon { background: rgba(56,189,248,0.14); color: var(--info); }
.or-ev-run_started .or-ev-icon, .or-ev-plan_built .or-ev-icon { background: var(--gold-dim); color: var(--gold-light); }
.or-ev-warning .or-ev-icon, .or-ev-error .or-ev-icon { background: var(--bad-bg); color: var(--bad); }
.or-ev-warning .or-ev-msg { color: var(--bad); font-weight: 600; }

.or-subhead { margin: 16px 0 4px; font-size: 13px; color: var(--text); }
.or-tight { margin-bottom: 8px; }
.or-areas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.or-area { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-alt); overflow: hidden; }
.or-area.on { border-color: var(--gold-border); background: var(--gold-dim); }
.or-area button { background: none; border: 0; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; padding: 5px 10px; }
.or-area.on .or-area-toggle { color: var(--gold-light); font-weight: 600; }
.or-area-x { padding: 5px 9px 5px 2px !important; font-size: 15px !important; }
.or-area-x:hover { color: var(--bad) !important; }
#or-area-new { background: var(--panel-alt); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; flex: 1; }
.or-settings select { background: var(--panel-alt); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; width: 100%; }
.or-settings input[type=url] { background: var(--panel-alt); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; width: 100%; box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  .or-orb span, .or-orb i, .or-live { animation: none !important; }
}
@media (max-width: 900px) {
  .or-mc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .or-mc-hero { grid-template-columns: auto 1fr; padding: 18px; gap: 14px 16px; }
  .or-orb { width: 64px; height: 64px; }
  .or-orb i { inset: 18px; }
  .or-mc-head h2 { font-size: 21px; }
  .or-mc-countdown { grid-column: 1 / -1; text-align: left; flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .or-mc-countdown strong { font-size: 24px; }
  .or-week { grid-template-columns: repeat(2, 1fr); }
  .or-ring { width: 92px; }
  .or-ring svg { width: 80px; height: 80px; }
  .or-ring-num { top: 25px; }
}
#outreach-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
#outreach-tabs::-webkit-scrollbar { display: none; }
#outreach-tabs .tier-btn { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 640px) { .or-mc-hero { align-items: start; } }

/* connected accounts */
.or-accounts-card { margin-bottom: 16px; }
.or-accounts-card .or-section-title .or-muted { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.or-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.or-acct {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; text-decoration: none;
  background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
  transition: border-color 150ms ease, transform 150ms ease;
}
.or-acct:hover { border-color: var(--gold-border); transform: translateY(-1px); }
.or-acct:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.or-acct-icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  color: var(--gold-light); background: var(--gold-dim); border: 1px solid var(--gold-border);
}
.or-acct-soon .or-acct-icon { color: var(--text-muted); background: var(--neutral-bg); border-color: var(--border); }
.or-acct-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.or-acct-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.or-acct-line { font-size: 13px; color: var(--text-muted); }
.or-acct-line strong { color: var(--text); }
.or-acct-when { font-size: 11px; color: var(--text-dim); }
.or-acct-open { font-size: 12px; color: var(--gold-light); white-space: nowrap; }
.or-acct-ok { border-color: rgba(74, 222, 128, 0.35); }
.or-acct-bad { border-color: rgba(248, 113, 113, 0.45); }
.or-acct-bad .or-acct-line { color: var(--bad); }
.or-acct-soon { opacity: 0.7; }
.or-soon { background: var(--neutral-bg); color: var(--text-muted); font-size: 10px; }

.or-acct-logo { flex: 0 0 auto; width: 42px; height: 42px; object-fit: contain; border-radius: 8px; }
.or-acct-soon .or-acct-logo { filter: grayscale(0.6); opacity: 0.8; }