/* Koino design tokens — aligned to koino.capital website (green + black, soft).
 *
 * Was: amber/blue-leaning oklch palette. Now: pure black surfaces, teal-green
 * primary (--a #00d4aa from koino.capital), purple secondary for status.
 * Token NAMES preserved so the rest of the app inherits automatically without
 * touching every component. */
:root {
  --bg-base: #16171b;
  --bg-elevated: #1b1d22;
  --bg-raised: #23262d;
  --bg-overlay: #2a2d35;
  --border-subtle: #2a2d35;
  --border-strong: #393d47;
  --text-primary: #f2efe8;
  --text-secondary: #c8c3b8;
  --text-tertiary: #9f988b;
  --text-quaternary: #736c62;

  --accent-money: #00a887;
  --accent-money-dim: rgba(0, 168, 135, 0.28);
  --accent-heat: #c58b2f;
  --accent-status: #7c5cff;
  --state-danger: #dc5b57;
  --state-warning: #c58b2f;
  --state-info: #4b7bec;

  --tier-bronze: #A97142;
  --tier-silver: #C0C0C8;
  --tier-gold: #D9A441;
  --tier-platinum: #E5E4E2;
  --tier-diamond: #B9F2FF;

  --row-h: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;

  --shadow-floating: 0 10px 30px rgba(0, 0, 0, 0.28), 0 18px 50px -20px rgba(0,0,0,0.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.4, 1.6, 0.4, 1);

  --dim-overlay: rgba(0,0,0,0.56);
}

html[data-theme="light"] {
  --bg-base:     #F6F1E8;
  --bg-elevated: #FBF8F3;
  --bg-raised:   #FFFFFF;
  --bg-overlay:  #EEE7DC;
  --border-subtle: #DDD3C4;
  --border-strong: #C6B7A3;
  --text-primary:   #181A1F;
  --text-secondary: #55504A;
  --text-tertiary:  #8A8377;
  --text-quaternary: #B4ADA1;
  --accent-money:     #007A66;
  --accent-money-dim: rgba(0, 122, 102, 0.12);
  --accent-heat:      #A8741F;
  --accent-status:    #1D1D22;
  --state-danger:     #B93F3B;
  --state-warning:    #A8741F;
  --state-info:       #4A5568;
  --shadow-floating: 0 4px 16px rgba(40, 28, 18, 0.08), 0 14px 32px -16px rgba(40, 28, 18, 0.16);
  --shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.60);
  --dim-overlay: rgba(40,28,18,0.34);
}

/* Personal accent presets. Components consume semantic tokens, so an accent
   changes the user's UI without changing the dark or warm-paper theme. */
html[data-accent="blue"]   { --accent-money:#38a8ff; --accent-money-dim:rgba(56,168,255,.4); --accent-status:#7c3aed; }
html[data-accent="violet"] { --accent-money:#a78bfa; --accent-money-dim:rgba(167,139,250,.4); --accent-status:#8b5cf6; }
html[data-accent="amber"]  { --accent-money:#f6b84b; --accent-money-dim:rgba(246,184,75,.4); --accent-status:#f59e0b; }
html[data-accent="rose"]   { --accent-money:#fb7185; --accent-money-dim:rgba(251,113,133,.4); --accent-status:#f43f5e; }
html[data-theme="light"][data-accent="blue"]   { --accent-money:#126fc2; }
html[data-theme="light"][data-accent="violet"] { --accent-money:#6d3cc9; }
html[data-theme="light"][data-accent="amber"]  { --accent-money:#a66000; }
html[data-theme="light"][data-accent="rose"]   { --accent-money:#bb3150; }

[data-density="compact"] {
  --row-h: 30px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
input, textarea { font-family: inherit; color: inherit; }

.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--font-mono); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* App shell */
.app {
  display: grid;
  grid-template-columns: 196px 1fr;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  transition: grid-template-columns 220ms var(--ease-out);
}
.app[data-mobile="on"] { grid-template-columns: 1fr; transition: none; }

/* Collapsed sidebar — column shrinks, all labels hide, icons stay. */
html[data-sidebar-collapsed="1"] .app                  { grid-template-columns: 60px 1fr; }
html[data-sidebar-collapsed="1"] .app[data-mobile="on"]{ grid-template-columns: 1fr; }

/* Sidebar */
.sidebar {
  background: var(--bg-base);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sb-brand {
  padding: 14px 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.sb-brand-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent-money), var(--accent-money-dim));
  display: grid; place-items: center;
  font-weight: 800; font-size: 12px; color: #051a10;
  font-family: var(--font-display);
}
.sb-brand-name { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; }
.sb-brand-meta { color: var(--text-tertiary); font-size: 11px; }

.sb-section {
  padding: 14px 8px 4px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-quaternary);
  font-weight: 500;
}
.sb-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 6px; }
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 450;
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
  text-align: left;
  width: 100%;
}
.sb-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sb-item.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-inset);
}
.sb-item .ic { width: 16px; height: 16px; opacity: 0.85; flex-shrink: 0; }
.sb-item .badge {
  margin-left: auto;
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sb-item.active .badge { background: var(--bg-overlay); }
.sb-item .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-quaternary);
}

.sb-spacer { flex: 1; }

.sb-user {
  border-top: 1px solid var(--border-subtle);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.55 0.13 280), oklch(0.40 0.10 250));
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #fff;
  flex-shrink: 0;
}
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name { font-size: 12.5px; font-weight: 500; }
.sb-user-role { font-size: 10.5px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }

/* Utility dock keeps secondary tools out of the primary workspace rail. */
.sb-utilities { padding: 0 8px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sb-utilities .sb-item { grid-column: 1 / -1; }
.sb-utility {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 32px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--text-secondary); font: inherit; font-size: 12px;
}
.sb-utility:hover, .sb-utility.active { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-raised); }
.sb-settings-fab {
  width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
  border: 1px solid var(--border-subtle); border-radius: 50%; color: var(--text-secondary);
  background: var(--bg-elevated); transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.sb-settings-fab:hover { color: var(--text-primary); background: var(--bg-raised); border-color: var(--border-strong); }

.role-switch {
  display: flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 2px;
  margin: 8px 12px;
}
.role-switch button {
  flex: 1;
  padding: 5px 8px;
  font-size: 11px;
  border-radius: 4px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.role-switch button.active {
  background: var(--bg-raised);
  color: var(--text-primary);
}

/* ── Sidebar collapse toggle ──────────────────────────────────────────────── */
/* Brand row wraps SidebarBrand + chevron button on one line. */
.sb-brand-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-subtle);
}
.sb-brand-row .sb-brand {
  flex: 1;
  border-bottom: none;
  min-width: 0;
}
.sb-collapse-toggle {
  width: 28px;
  flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--text-tertiary);
  border: none; background: none;
  cursor: pointer;
  margin-right: 4px;
  border-radius: var(--radius-sm, 4px);
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.sb-collapse-toggle:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* ── COLLAPSED MODE — sidebar at 60px, icon-only ──────────────────────────── */
/* Layout: each item centers its icon, all text/badges hide. The sidebar
   itself is the grid column (60px), so we don't set width on .sidebar. */
.sidebar[data-collapsed="1"] {
  align-items: stretch;
}
/* Brand: show the mark only, hide name/agency text, move chevron below mark. */
.sidebar[data-collapsed="1"] .sb-brand-row {
  flex-direction: column;
  align-items: center;
  padding: 6px 0 4px;
  gap: 4px;
}
.sidebar[data-collapsed="1"] .sb-brand {
  padding: 4px 0;
  border-bottom: none;
  justify-content: center;
}
.sidebar[data-collapsed="1"] .sb-brand > div:not(.sb-brand-mark) { display: none; }
.sidebar[data-collapsed="1"] .sb-collapse-toggle {
  width: 42px;
  height: 34px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text-primary);
}
/* Section labels become hairline dividers in collapsed mode. */
.sidebar[data-collapsed="1"] .sb-section {
  padding: 10px 12px 4px;
  font-size: 0;
  letter-spacing: 0;
}
.sidebar[data-collapsed="1"] .sb-section::before {
  content: "";
  display: block;
  border-top: 1px solid var(--border-subtle);
}
/* Nav rows: center icon, hide everything else. */
.sidebar[data-collapsed="1"] .sb-nav { padding: 0 8px; }
.sidebar[data-collapsed="1"] .sb-item {
  justify-content: center;
  padding: 8px 0;
  gap: 0;
}
.sidebar[data-collapsed="1"] .sb-item > span,
.sidebar[data-collapsed="1"] .sb-item > .badge,
.sidebar[data-collapsed="1"] .sb-item > .kbd {
  display: none;
}
/* Role-switch hides in collapsed mode (it's a power-user preview tool,
   not worth the vertical real estate). */
.sidebar[data-collapsed="1"] .role-switch { display: none; }
/* "Customize…" entry: icon only, italic span hides. */
.sidebar[data-collapsed="1"] .sb-item-composer > span { display: none; }
/* Bottom user row: avatar only, hide name + role + settings cog. */
.sidebar[data-collapsed="1"] .sb-user {
  justify-content: center;
  padding: 10px 0;
}
.sidebar[data-collapsed="1"] .sb-user-info,
.sidebar[data-collapsed="1"] .sb-user > .icon-btn,
.sidebar[data-collapsed="1"] .sb-user > .sb-settings-fab { display: none; }
.sidebar[data-collapsed="1"] .sb-utilities { display: block; padding: 0 8px 8px; }
.sidebar[data-collapsed="1"] .sb-utility { width: 100%; min-height: 34px; }
.sidebar[data-collapsed="1"] .sb-utility > span { display: none; }

/* Workspace */
.workspace {
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Liquid-glass topbar pill — floats just inside the workspace edge,
   no divider, slim, blurry. */
.topbar {
  position: sticky;
  top: 10px;
  z-index: 30;
  margin: 10px 14px 8px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px 0 14px;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-elevated) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in oklch, var(--border-subtle) 75%, transparent);
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--text-primary) 5%, transparent) inset,
    0 10px 28px -14px rgba(0,0,0,0.65),
    0 0 0 1px color-mix(in oklch, var(--text-primary) 2%, transparent);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
}
.crumbs .sep { color: var(--text-quaternary); display: inline-flex; opacity: 0.7; }
.crumbs .here { color: var(--text-primary); font-weight: 500; }
.topbar-spacer { flex: 1; }

/* Inside the pill, kill extra borders/backgrounds on action buttons so they
   feel native to the glass surface */
.topbar .cmdk-trigger {
  background: color-mix(in oklch, var(--bg-base) 50%, transparent);
  border: 1px solid color-mix(in oklch, var(--border-subtle) 60%, transparent);
  height: 28px;
}
.topbar .lb-pill, .topbar .icon-btn {
  background: transparent;
  border: 1px solid transparent;
}
.topbar .icon-btn:hover, .topbar .lb-pill:hover {
  background: color-mix(in oklch, var(--bg-base) 60%, transparent);
  border-color: color-mix(in oklch, var(--border-subtle) 60%, transparent);
}
.topbar .topbar-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--border-subtle) 60%, transparent);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 130ms, border-color 130ms, color 130ms;
}
.topbar .topbar-action:hover {
  background: color-mix(in oklch, var(--bg-base) 60%, transparent);
  border-color: color-mix(in oklch, var(--border-subtle) 90%, transparent);
  color: var(--text-primary);
}
.topbar .live-badge { margin-left: 6px; height: 22px; }
.topbar .aep-pill { background: color-mix(in oklch, var(--accent-heat) 18%, transparent); }

/* Liquid-glass OS selector (Auto Quoter Setup → install command) */
.os-glass-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(145deg,
    color-mix(in oklch, white 6%, transparent),
    color-mix(in oklch, white 1%, transparent));
  border: 1px solid color-mix(in oklch, white 8%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 10%, transparent),
    inset 0 -1px 0 color-mix(in oklch, black 25%, transparent),
    0 8px 24px color-mix(in oklch, black 30%, transparent);
}
.os-glass-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.os-glass-btn:hover {
  background: color-mix(in oklch, white 4%, transparent);
  color: var(--text-primary);
}
.os-glass-btn.is-active {
  background: linear-gradient(145deg,
    color-mix(in oklch, var(--accent-money) 28%, transparent),
    color-mix(in oklch, var(--accent-money) 12%, transparent));
  border-color: color-mix(in oklch, var(--accent-money) 45%, transparent);
  color: var(--text-primary);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 4px 12px color-mix(in oklch, var(--accent-money) 35%, transparent);
}
.os-glass-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.os-glass-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.os-glass-btn.is-active .os-glass-sub { color: color-mix(in oklch, var(--accent-money) 70%, var(--text-secondary)); }

/* Section sub-nav pill — for combining related pages within a screen */
.section-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin: 4px 0 14px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-elevated) 70%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid color-mix(in oklch, var(--border-subtle) 70%, transparent);
  font-size: 12px;
}
.section-pill > button {
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
}
.section-pill > button:hover { color: var(--text-primary); }
.section-pill > button.active {
  background: color-mix(in oklch, var(--text-primary) 8%, var(--bg-base));
  color: var(--text-primary);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--text-primary) 4%, transparent) inset, 0 1px 4px rgba(0,0,0,0.2);
}

/* The page is the only scrolling region. Keep content clear of the shell bar
   instead of letting the bar's glass/shadow paint over the first rows. */
.page > .page-pad { padding-top: 18px; }

/* When sidebar is collapsed (mobile), pull pill margins in */
@media (max-width: 820px) {
  .topbar { margin: 8px; padding: 0 8px; height: 38px; }
}

.cmdk-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  font-size: 12px;
  min-width: 200px;
}
.cmdk-trigger:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.cmdk-trigger .kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  background: var(--bg-raised);
  border-radius: 3px;
  margin-left: auto;
  color: var(--text-tertiary);
}

.lb-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.lb-pill .rank { color: var(--text-primary); font-weight: 600; }
.lb-pill .delta-up { color: var(--accent-money); display: flex; align-items: center; gap: 2px; }
.lb-pill .delta-dn { color: var(--state-danger); display: flex; align-items: center; gap: 2px; }
.lb-pill:hover { border-color: var(--border-strong); }

.aep-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: oklch(0.30 0.10 30);
  border: 1px solid oklch(0.45 0.18 30);
  border-radius: 20px;
  font-size: 11px;
  color: oklch(0.92 0.06 30);
  font-weight: 500;
}
.aep-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-heat);
  animation: pulse 1.6s var(--ease-out) infinite;
}

.icon-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}
.icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* Page area */
.page { flex: 1; overflow: auto; }
.page-pad { padding: 18px 22px 28px; max-width: 100%; }

.page-h {
  display: flex; align-items: flex-end; gap: 16px;
  margin-bottom: 16px;
}
.page-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}
.page-sub { color: var(--text-tertiary); font-size: 12.5px; margin-top: 2px; }

/* KPI cards */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  position: relative;
  overflow: hidden;
}
.kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 500;
}
.kpi-val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi-val.money { color: var(--text-primary); }
.kpi-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}
.kpi-meta .up { color: var(--accent-money); }
.kpi-meta .dn { color: var(--state-danger); }
.kpi-spark {
  position: absolute;
  right: 10px; top: 12px;
  width: 70px; height: 28px;
  opacity: 0.85;
}
.kpi.hero { grid-column: span 2; }
.kpi.hero .kpi-val { font-size: 56px; line-height: 1; margin-top: 10px; letter-spacing: -0.04em; }
.kpi.hero .kpi-spark { width: 130px; height: 56px; }

/* Vault is a scanning surface: keep resource counts compact so the
   library and course content remain in the first viewport. */
.vault-summary-grid .kpi {
  padding: 9px 11px 8px;
  border-radius: 8px;
}
.vault-summary-grid .kpi-val {
  font-size: 22px;
  margin-top: 3px;
}
.vault-summary-grid .kpi-meta {
  font-size: 10.5px;
  margin-top: 2px;
}
.vault-course-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--bg-raised);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.vault-course-card:hover {
  border-color: var(--accent-status);
  background: var(--bg-overlay);
}

.recruiting-setup-card {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 64px;
  padding: 10px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.recruiting-setup-card:hover,
.recruiting-setup-card[aria-pressed="true"] {
  border-color: var(--accent-status);
  background: var(--bg-overlay);
}

.connector-quick-access {
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-elevated);
}

/* Tier chip */
.tier {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 2px 7px 2px 5px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tier .gem {
  width: 7px; height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.tier-bronze { color: var(--tier-bronze); border-color: color-mix(in oklch, var(--tier-bronze) 35%, transparent); background: color-mix(in oklch, var(--tier-bronze) 10%, transparent); }
.tier-bronze .gem { background: var(--tier-bronze); }
.tier-silver { color: var(--tier-silver); border-color: color-mix(in oklch, var(--tier-silver) 30%, transparent); background: color-mix(in oklch, var(--tier-silver) 8%, transparent); }
.tier-silver .gem { background: var(--tier-silver); }
.tier-gold { color: var(--tier-gold); border-color: color-mix(in oklch, var(--tier-gold) 35%, transparent); background: color-mix(in oklch, var(--tier-gold) 10%, transparent); }
.tier-gold .gem { background: var(--tier-gold); }
.tier-platinum { color: var(--tier-platinum); border-color: color-mix(in oklch, var(--tier-platinum) 30%, transparent); background: color-mix(in oklch, var(--tier-platinum) 8%, transparent); }
.tier-platinum .gem { background: var(--tier-platinum); }
.tier-diamond { color: var(--tier-diamond); border-color: color-mix(in oklch, var(--tier-diamond) 35%, transparent); background: color-mix(in oklch, var(--tier-diamond) 10%, transparent); }
.tier-diamond .gem { background: var(--tier-diamond); }

/* Generic chips */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-raised);
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.chip-money { background: color-mix(in oklch, var(--accent-money) 15%, transparent); color: var(--accent-money); }
.chip-heat { background: color-mix(in oklch, var(--accent-heat) 15%, transparent); color: var(--accent-heat); }
.chip-status { background: color-mix(in oklch, var(--accent-status) 15%, transparent); color: var(--accent-status); }
.chip-info { background: color-mix(in oklch, var(--state-info) 15%, transparent); color: var(--state-info); }
.chip-danger { background: color-mix(in oklch, var(--state-danger) 15%, transparent); color: var(--state-danger); }

.dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-live { background: var(--accent-money); box-shadow: 0 0 0 0 var(--accent-money); animation: pulse 1.4s var(--ease-out) infinite; }
.dot-warn { background: var(--state-warning); }
.dot-danger { background: var(--state-danger); }
.dot-idle { background: var(--text-quaternary); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 6px transparent; opacity: 0.6; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* Cards / panels */
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 120ms var(--ease-out);
  /* Allow panels to shrink inside multi-column grids — without min-width:0
     a wide child (input, table row, long word) pushes the panel past its
     grid track and the rightmost neighbor clips. */
  min-width: 0;
}
.panel:hover { border-color: var(--border-strong); }
.panel-h {
  padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.panel-h h3 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.panel-h .meta { color: var(--text-tertiary); font-size: 11px; margin-left: auto; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  transition: background 120ms var(--ease-out);
}
.btn:hover { background: var(--bg-overlay); }
.btn-primary {
  background: var(--accent-money);
  color: #001a14;
  border-color: transparent;
  font-weight: 600;
}
.btn-primary:hover {
  background: #00ebbe;
  box-shadow: 0 4px 16px rgba(0, 212, 170, 0.18);
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* Pipeline list */
.list { display: flex; flex-direction: column; }
.list-h, .row {
  display: grid;
  align-items: center;
  height: var(--row-h);
  padding: 0 14px;
  font-size: 12.5px;
  border-bottom: 1px solid color-mix(in oklch, var(--border-subtle) 60%, transparent);
  gap: 10px;
}
.list-h {
  color: var(--text-tertiary);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  background: var(--bg-base);
}
.row { transition: background 100ms var(--ease-out); }
.row:hover { background: var(--bg-raised); }
.row.sel { background: color-mix(in oklch, var(--accent-money) 8%, var(--bg-raised)); }

.cell-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Make every cell in .list-h / .row able to shrink so a long string doesn't
   force its column to push neighbors out. Combine with .cell-truncate or
   inline `overflow:hidden;text-overflow:ellipsis;white-space:nowrap` on cells
   that should truncate. Without min-width:0 the implicit auto min-width
   (= content) means fixed-pixel sibling tracks overlap the flex tracks. */
.list-h > *, .row > * { min-width: 0; }

/* Opt-in "card mode" for any .list inside .list-responsive when the panel is
   narrow (≤900px). Each .row becomes a flex-wrap card; the .list-h is
   hidden because the labels live next to the values. Applied to settings
   tables (connectors vault, devices, agents) so they don't overlap below
   half-screen. Pages that want this just add className="list-responsive". */
.list-responsive .list-h, .list-responsive .row {
  /* Force shrinkable tracks even when inline gridTemplateColumns is rigid. */
  grid-template-columns: var(--list-cols, none);
}
.list-responsive { container-type: inline-size; }
@media (max-width: 900px) {
  .list-responsive .list-h { display: none; }
  .list-responsive .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px;
    row-gap: 8px;
    height: auto;
    min-height: var(--row-h);
    padding: 10px 14px;
    align-items: center;
  }
  .list-responsive .row > * {
    min-width: 0;
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
  }
  .list-responsive .row > *.list-actions {
    grid-column: 1 / -1;
    justify-content: flex-start !important;
    margin-left: 0;
  }
}
@container (max-width: 760px) {
  .list-responsive .list-h { display: none; }
  .list-responsive .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px;
    row-gap: 8px;
    height: auto;
    min-height: var(--row-h);
    padding: 10px 14px;
    align-items: center;
  }
  .list-responsive .row > * {
    min-width: 0;
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
  }
  .list-responsive .row > *.list-actions {
    grid-column: 1 / -1;
    justify-content: flex-start !important;
    margin-left: 0;
  }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

.avatar-xs {
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 600;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  color: #fff;
  font-family: var(--font-display);
}

/* AI rail */
.airail {
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.airail-h {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.airail-h .title { font-size: 12px; font-weight: 600; letter-spacing: -0.005em; }
.airail-h .meta { font-size: 10.5px; color: var(--text-tertiary); margin-left: auto; }
.airail-body { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.airail-foot { padding: 10px; border-top: 1px solid var(--border-subtle); }
.airail-input {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 12.5px;
  outline: none;
  color: var(--text-primary);
}
.airail-input:focus { border-color: var(--accent-money-dim); }

.ai-msg {
  display: flex; flex-direction: column; gap: 6px;
}
.ai-msg .who { font-size: 10.5px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.ai-msg .body { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.ai-msg.assistant .body { color: var(--text-primary); }
.ai-trace {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.ai-trace .step { display: flex; gap: 8px; align-items: center; }
.ai-trace .step .ok { color: var(--accent-money); }
.ai-trace .step .ms { margin-left: auto; }

.ai-artifact {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 12.5px;
}
.ai-artifact-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

/* Cmd K modal */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(8,10,12,0.55);
  backdrop-filter: blur(4px);
  display: grid; place-items: start center;
  padding-top: 12vh;
  z-index: 100;
  animation: fade 140ms var(--ease-out);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
  width: 560px; max-width: 92vw;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  animation: rise 160ms var(--ease-out);
}
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.cmdk-input {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 14px 16px;
  font-size: 14px;
  outline: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.cmdk-section { padding: 6px 0; }
.cmdk-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-quaternary);
  padding: 6px 14px;
  font-weight: 500;
}
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.cmdk-item.sel { background: var(--bg-raised); color: var(--text-primary); }
.cmdk-item .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); }

/* In-call overlay */
.incall {
  position: fixed; inset: 0;
  background: rgba(8,10,12,0.7);
  z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  animation: fade 160ms var(--ease-out);
}
.incall-card {
  width: 880px; max-width: 96vw;
  height: 600px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto 1fr;
  grid-auto-flow: row;
}

/* Card stack */
.cardstack {
  position: relative;
  width: 320px;
  height: 480px;
  margin: 0 auto;
}
.swipe-card {
  position: absolute;
  inset: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-floating);
}

/* Mobile frame */
.mobile-stage {
  display: grid; place-items: center;
  height: 100%;
  background: var(--bg-base);
}
.mobile-frame {
  width: 360px; height: 720px;
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-floating);
}
.m-statusbar {
  height: 36px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.m-content { flex: 1; overflow: auto; padding: 0 16px 12px; }
.m-tabbar {
  height: 60px;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
.m-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px;
  color: var(--text-tertiary);
}
.m-tab.active { color: var(--accent-money); }

/* Org tree */
.tree-svg { width: 100%; height: 100%; display: block; }
.tree-node circle { transition: all 200ms var(--ease-out); cursor: pointer; }

/* Coaching annotation, etc - reusable */
.divider { height: 1px; background: var(--border-subtle); margin: 12px 0; }

.scrollh { overflow-x: auto; }

/* Animation helpers */
.fade-in { animation: fade 200ms var(--ease-out); }
.rise-in { animation: rise 240ms var(--ease-out); }

/* selection */
::selection { background: color-mix(in oklch, var(--accent-money) 35%, transparent); color: var(--text-primary); }

/* ──────────────────────────────────────────────────────────────────────────
   Modal + form primitives (used by Pipeline filter, New-lead, Bulk-assign,
   In-call overlay)
   ────────────────────────────────────────────────────────────────────────── */
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-t { font-size: 13.5px; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }
.modal-body { padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.modal-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: flex-end; gap: 8px;
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-l { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; line-height: 1.25; overflow-wrap: normal; word-break: normal; }
.field-h { font-size: 11px; color: var(--text-quaternary); line-height: 1.3; overflow-wrap: normal; word-break: normal; }

/* Auto-wrap container for rows of fields. Drop-in replacement for
   `display: grid; gridTemplateColumns: 1fr 1fr 1fr` etc. — fields stay
   readable at full width and wrap to fewer columns inside narrow panels
   instead of clipping the rightmost input. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 6px;
  align-items: end;
}

.text-input {
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 120ms;
  /* Grid/flex children default to min-content sizing — without these two
     lines, a long placeholder like "+15125550199" pushes the cell wider
     than its column allocation and clips the next input (the bug Ian hit
     on the Carriers tab's ZIP field). */
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.text-input:focus { border-color: var(--accent-money); }
.text-input[type="range"] { padding: 0; background: transparent; border: 0; }
select.text-input { appearance: none; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* ── Client Book: scoped density overrides ──────────────────────────────
   Default `.kpi` runs 28px values + 14/16/12 padding which dominates the
   table-first surface of the book. Tighten only inside `.book-clients`
   so the global KPI strip on Today / P&L / etc. is untouched. */
.book-clients .kpi { padding: 8px 10px 7px; }
.book-clients .kpi-label { font-size: 9.5px; letter-spacing: 0.08em; }
.book-clients .kpi-val { font-size: 18px; margin-top: 2px; letter-spacing: -0.02em; }
.book-clients .kpi-meta { font-size: 10.5px; margin-top: 2px; }
/* Filter dropdowns: shrink-to-content instead of stretching the row.
   Search input takes remaining space. Heights aligned via the same
   compact padding. */
.book-clients .filter-search { flex: 1 1 220px; max-width: 320px; font-size: 12px; padding: 5px 9px; }
.book-clients select.text-input { width: auto; min-width: 0; font-size: 12px; padding: 5px 24px 5px 9px; background-position: calc(100% - 10px) 50%, calc(100% - 6px) 50%; }

.chip-danger { background: color-mix(in oklch, var(--state-danger) 14%, transparent); color: var(--state-danger); border-color: color-mix(in oklch, var(--state-danger) 30%, transparent); }

/* ── Quote tool: responsive grid helpers ────────────────────────────────── */
/* Two-column outer (profile | results) — wraps to single column when there
   isn't room. Uses container-query-style auto-fit so it adapts to the panel
   width, not the viewport. */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 14px;
}
/* Auto-fit field row — every field gets a sensible minimum width and the
   grid reflows when the card narrows. Used inside profile sections. */
.quote-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.quote-fields--narrow { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.quote-fields--wide   { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.quote-fields .field-wide { grid-column: span 2; }
@container (max-width: 380px) { .quote-fields .field-wide { grid-column: span 1; } }

/* Recommendation banner — visible "best pick + why" surface */
.quote-pick {
  background: color-mix(in oklch, var(--accent-money) 10%, var(--bg-elevated));
  border: 1px solid color-mix(in oklch, var(--accent-money) 35%, var(--border-subtle));
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
}
.quote-pick-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-money); font-weight: 600; }
.quote-pick-name { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.quote-pick-why { font-size: 11.5px; color: var(--text-secondary); line-height: 1.55; margin-top: 6px; }
.quote-pick-why .reason-row { display: flex; gap: 8px; margin-top: 4px; align-items: baseline; }
.quote-pick-why .reason-row .reason-tag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  background: color-mix(in oklch, var(--accent-money) 18%, transparent);
  color: var(--accent-money); padding: 2px 6px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
}
.quote-pick-price { font-size: 22px; font-weight: 700; color: var(--accent-money); text-align: right; line-height: 1; }
.quote-pick-class { font-size: 10.5px; color: var(--text-tertiary); margin-top: 4px; text-align: right; }
.quote-pick-source { font-size: 10px; color: var(--text-quaternary); margin-top: 8px; grid-column: 1 / -1; font-family: var(--font-mono, monospace); }

/* Carrier result row — wraps cleanly on narrow widths */
.quote-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  padding: 11px 13px;
  margin-bottom: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}
.quote-row.is-best {
  background: color-mix(in oklch, var(--accent-money) 8%, var(--bg-raised));
  border-color: color-mix(in oklch, var(--accent-money) 40%, transparent);
}
.quote-row.is-decline {
  border-color: color-mix(in oklch, var(--state-danger) 25%, transparent);
  opacity: 0.78;
}
.quote-row .qr-name { font-weight: 600; font-size: 13px; min-width: 0; }
.quote-row .qr-meta { font-size: 10.5px; color: var(--text-quaternary); margin-top: 2px; }
.quote-row .qr-reason { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; min-width: 0; }
.quote-row .qr-price { font-size: 16px; font-weight: 700; text-align: right; min-width: 110px; }
.quote-row .qr-price-best { color: var(--accent-money); }
.quote-row .qr-class { font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; text-align: right; }

@media (max-width: 720px) {
  .quote-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; }
  .quote-row .qr-price, .quote-row .qr-class { text-align: left; min-width: 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Responsive — let the desktop app fold gracefully onto phone widths
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .app { grid-template-columns: 220px 1fr !important; }
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .calls-grid, .team-grid, .org-grid, .tiering-grid, .rec-grid, .book-grid, .cards-2col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(-100%); transition: transform 200ms var(--ease-out); width: 240px; }
  .app[data-mobile-nav="open"] .sidebar { transform: translateX(0); }
  .app { grid-template-columns: 1fr !important; }
  .topbar .crumbs { display: none; }
  .topbar .cmdk-trigger span:not(.kbd) { display: none; }
  .topbar .cmdk-trigger { width: 32px; padding: 0; justify-content: center; }
  .topbar .lb-pill { display: none; }
  .page-pad { padding: 14px !important; }
  .page-h { flex-wrap: wrap; gap: 8px; }
  .kpi-row { grid-template-columns: 1fr 1fr !important; }
  .kpi.hero { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .kpi-row { grid-template-columns: 1fr !important; }
  .list-h, .row { font-size: 11.5px; }
  .modal { width: calc(100vw - 24px) !important; }
  .cmdk { width: calc(100vw - 24px); }
  .tweaks-panel { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Slide-out panel (lead detail, notifications)
   ────────────────────────────────────────────────────────────────────────── */
.slideout-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: var(--dim-overlay);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; justify-content: flex-end;
  animation: fade 160ms var(--ease-out);
}
.slideout {
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -20px 0 40px -20px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  animation: slidein 240ms var(--ease-out);
}
@keyframes slidein {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.slideout-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.slideout-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.slideout-foot {
  border-top: 1px solid var(--border-subtle);
  padding: 12px 14px;
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ──────────────────────────────────────────────────────────────────────────
   Spend congruency strip — under page header on Today / Queue
   ────────────────────────────────────────────────────────────────────────── */
.spend-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px;
  margin: -4px 0 12px;
  background: color-mix(in oklch, var(--accent-money) 4%, var(--bg-elevated));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 11.5px;
}
.spend-strip .spend-l { color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; }
.spend-strip .spend-v { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }
.spend-strip .spend-v.money { color: var(--accent-money); }
.spend-strip .spend-v.warn  { color: var(--state-warning); }
.spend-strip .spend-sep    { color: var(--text-quaternary); margin: 0 2px; }

/* keyboard helpers */
.kbd.mono { font-family: var(--font-mono); }

/* extra responsive — Settings + dispatch + queue + today + kanban grids fold */
@media (max-width: 1100px) {
  .settings-grid, .dispatch-grid, .queue-grid, .today-grid, .kanban-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 820px) {
  .slideout { width: 100vw; }
  .spend-strip { gap: 6px; padding: 6px 8px; }
}

/* P7 (2026-05-11) — Settings → Profile responsive grids. The form uses
   2 / 3 / 4 column layouts on desktop; collapse to single column below
   720px so fields stay legible on phones + small split-screens. */
@media (max-width: 720px) {
  .profile-grid-2,
  .profile-grid-3,
  .profile-grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Recruiting workbench — tab strip + multi-pane layouts
   ────────────────────────────────────────────────────────────────────────── */
.rec-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-bottom: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: fit-content;
}
.rec-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.rec-tab:hover { color: var(--text-secondary); }
.rec-tab.active {
  background: var(--bg-raised);
  color: var(--text-primary);
  font-weight: 500;
}
.rec-tab-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  background: var(--bg-overlay);
  color: var(--text-tertiary);
  border-radius: 8px;
  font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.rec-tab.active .rec-tab-n {
  background: var(--accent-money);
  color: oklch(0.18 0.005 260);
}

@media (max-width: 1100px) {
  .rec-detail-grid, .seq-grid { grid-template-columns: 1fr !important; }
  .convo-grid { grid-template-columns: 280px 1fr !important; }
  .convo-grid > *:nth-child(3) { display: none !important; }  /* hide profile pane on tablet */
}
@media (max-width: 820px) {
  .convo-grid { grid-template-columns: 1fr !important; height: auto !important; }
  .convo-grid > *:nth-child(1) { max-height: 220px; overflow-y: auto; }
  .rec-tabs { flex-wrap: wrap; }
}

/* Live / demo badge in topbar */
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
}
.live-badge .dot { width: 5px; height: 5px; border-radius: 50%; }
.live-badge.on  { color: var(--accent-money); background: color-mix(in oklch, var(--accent-money) 10%, transparent); border-color: color-mix(in oklch, var(--accent-money) 30%, transparent); }
.live-badge.on .dot { background: var(--accent-money); animation: pulseDot 2s ease-in-out infinite; }
.live-badge.off { color: var(--text-tertiary); }
.live-badge.off .dot { background: var(--text-quaternary); }
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.4); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Login screen
   ────────────────────────────────────────────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 20%, color-mix(in oklch, var(--accent-money) 6%, var(--bg-base)), var(--bg-base) 60%);
  padding: 20px;
  font-family: var(--font-ui);
}
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-floating);
}
.login-foot {
  position: fixed;
  bottom: 16px;
  font-size: 11px;
  color: var(--text-quaternary);
  letter-spacing: 0.04em;
}

/* AI rail typing dots */
.ai-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: aiDotPulse 1.2s ease-in-out infinite;
}
.ai-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiDotPulse {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%       { opacity: 1;   transform: translateY(-3px); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Toasts
   ────────────────────────────────────────────────────────────────────────── */
.toast-host {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 280px; max-width: 400px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-floating);
  font-size: 12.5px;
  animation: toastIn 200ms var(--ease-out);
}
.toast-success { border-left: 3px solid var(--accent-money); }
.toast-error    { border-left: 3px solid var(--state-danger); }
.toast-info     { border-left: 3px solid var(--state-info); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Skeleton loader */
.skel { display: inline-block; background: linear-gradient(90deg, var(--bg-raised) 0%, var(--bg-overlay) 50%, var(--bg-raised) 100%); background-size: 200% 100%; animation: skelShine 1.4s ease-in-out infinite; border-radius: 4px; }
.skel-line { height: 12px; }
@keyframes skelShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Empty state */
.empty-state { padding: 48px 24px; text-align: center; color: var(--text-tertiary); }
.empty-state-icon { display: inline-flex; padding: 10px; background: color-mix(in oklch, var(--accent-money) 8%, transparent); border-radius: 50%; }
.empty-state-title { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.empty-state-sub  { margin-top: 4px; font-size: 12.5px; max-width: 360px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* Onboarding tour */
.tour-overlay { position: fixed; bottom: 24px; right: 24px; z-index: 150; }
.tour-card    { width: 360px; padding: 18px; background: var(--bg-elevated); border: 1px solid var(--accent-money); border-radius: 12px; box-shadow: var(--shadow-floating); animation: tourPop 240ms var(--ease-out); }
@keyframes tourPop { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Autodial floating bar */
.autodial-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 80;
  width: min(880px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-elevated) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in oklch, var(--border-subtle) 75%, transparent);
  box-shadow:
    0 1px 0 color-mix(in oklch, var(--text-primary) 5%, transparent) inset,
    0 18px 40px -18px rgba(0,0,0,0.7);
  animation: rise 240ms var(--ease-out);
}

/* Training hub — when Coaching/Calls/Training panes render inside the
   Training shell, suppress their inner page-pad + page-header + dashboard
   sub-nav strip. Without this we stack two titles, pad twice, and surface
   manager-dashboard nav (Floor / NIGO / Dispatch) under a Training tab. */
.training-embed > .page-pad { padding: 0; }
.training-embed > .page-pad > .page-h:first-child { display: none; }
.training-embed > .page-pad > .section-pill { display: none; }
.training-embed > .page-pad > .kpi-row { margin-top: 0; }

/* coaching-embed (CoachingPane inside PageTraining): strip the duplicate
   page-pad + page-h title, but KEEP the SectionPill so the user always has
   a way back to Team Board / NIGO / Recruiting / Dispatch. The old class
   used .training-embed and hid this pill, trapping the user (bug fix 2026-05-16). */
.coaching-embed > .page-pad { padding: 0; }
.coaching-embed > .page-pad > .page-h:first-child { display: none; }
.coaching-embed > .page-pad > .kpi-row { margin-top: 0; }

.coaching-kpi-row {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
}
.coaching-kpi-row .kpi {
  padding: 10px 12px;
  container-type: inline-size;
}
.coaching-kpi-row .kpi-label {
  font-size: 10px;
  letter-spacing: 0.04em;
}
.coaching-kpi-row .kpi-val {
  font-size: clamp(18px, 3vw, 25px);
  font-size: clamp(18px, 12cqw, 25px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.coaching-kpi-row .kpi-meta {
  font-size: 10.5px;
  gap: 5px;
}
.coaching-shell-grid {
  align-items: start;
}
.coaching-card-grid {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coaching-card {
  min-width: 0;
  padding: 8px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.coaching-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 180px;
  min-width: 0;
}
.coaching-card-name {
  font-size: 11.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coaching-card-meta,
.coaching-card-impact {
  font-size: 10px;
  color: var(--text-tertiary);
}
.coaching-card-focus {
  margin-top: 0;
  color: var(--accent-status);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  flex: 1 1 200px;
  min-width: 0;
}
.coaching-card-evidence {
  margin-top: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
  flex: 2 1 300px;
  min-width: 0;
}
.coaching-card-actions {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.coaching-card-impact span {
  color: var(--accent-money);
}
.coaching-card-btn {
  min-height: 24px;
  padding: 3px 6px;
  font-size: 10px;
  white-space: nowrap;
}
.coaching-impact-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Training section pill — promote it to feel like a real horizontal tab strip */
.training-tabs.section-pill { margin: 4px 0 16px; padding: 4px; font-size: 13px; }
.training-tabs.section-pill > button { padding: 7px 16px; font-size: 13px; }

/* Skeleton shimmer — used by Shared.Skeleton */
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  @keyframes shimmer { 0%, 100% { background-position: 0 0; } }
}

/* ─── Global text-wrap discipline ─────────────────────────────────────── */
.panel, .kpi, .row, .list-h, .modal,
.os-glass-bar, .os-glass-btn,
.tier, .chip, .meta {
  min-width: 0;
}
.panel, .kpi, .row, .modal {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.panel pre, .panel code, .modal pre, .modal code {
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
}
.cell-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

/* CRM nested embed */
.crm-nested-recruiting > .page-pad { padding: 0; }
.crm-nested-recruiting > .page-pad > .page-h:first-child { display: none; }

/* Empty-state mono tag */
.koino-empty {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-quaternary);
  letter-spacing: 0.02em;
  font-weight: 400;
}
.koino-empty::before { content: "// "; opacity: 0.6; }

/* ============================================================
   Today Hero — gamified 3-band entry row
   Added 2026-06-16. Sits above the existing sub-tabs.
   ============================================================ */
.today-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 980px) {
  .today-hero { grid-template-columns: 1fr; gap: 10px; }
}
.today-band {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.today-band-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.today-band-head > span:first-of-type { color: var(--text-secondary); }
.today-band-meta { margin-left: auto; font-weight: 500; font-size: 10.5px; text-transform: none; letter-spacing: 0; color: var(--text-quaternary); }
.today-band-edit {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.today-band-edit:hover { background: var(--bg-overlay); color: var(--text-secondary); }

/* COMMIT band */
.commit-band.is-locked {
  background: color-mix(in oklch, var(--accent-money) 6%, var(--bg-raised));
  border-color: color-mix(in oklch, var(--accent-money) 30%, var(--border-subtle));
}
.commit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.commit-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-base, var(--bg-overlay));
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  min-width: 0;
}
.commit-cell-readonly { background: transparent; }
.commit-cell-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.commit-cell-input {
  background: transparent;
  border: none;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0;
  width: 100%;
  outline: none;
}
.commit-cell-input:disabled { color: var(--accent-money); cursor: default; }
.commit-cell-val { font-size: 18px; font-weight: 600; color: var(--text-primary); }
.commit-cell-sub { font-size: 10.5px; color: var(--text-quaternary); }
.commit-lock-btn { align-self: flex-start; }

/* LOG band */
.log-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.log-tap {
  --tap-tone: var(--text-secondary);
  appearance: none;
  background: var(--bg-base, var(--bg-overlay));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--tap-tone);
  transition: transform 60ms ease, box-shadow 120ms ease, background 120ms ease;
  user-select: none;
}
.log-tap:hover {
  background: color-mix(in oklch, var(--tap-tone) 6%, var(--bg-raised));
  border-color: color-mix(in oklch, var(--tap-tone) 30%, var(--border-subtle));
}
.log-tap:active { transform: scale(0.96); }
.log-tap-count {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.log-tap-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.log-feed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.log-feed-empty {
  font-size: 11.5px;
  color: var(--text-quaternary);
  padding: 14px 0;
  text-align: center;
  font-style: italic;
}
.log-feed-row {
  display: grid;
  grid-template-columns: 14px minmax(60px, auto) 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  padding: 4px 0;
}
.log-feed-who { font-weight: 600; color: var(--text-secondary); }
.log-feed-what { color: var(--text-secondary); }
.log-feed-when { color: var(--text-quaternary); font-size: 10.5px; }

/* HYPE band */
.hype-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hype-rail-rep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .hype-rail { grid-template-columns: 1fr; }
}
.hype-tile {
  background: var(--bg-base, var(--bg-overlay));
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hype-tile-hero {
  grid-column: span 2;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--accent-money) 10%, var(--bg-raised)),
    var(--bg-raised));
  border-color: color-mix(in oklch, var(--accent-money) 25%, var(--border-subtle));
}
.hype-tile-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hype-tile-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.hype-tile-sub { font-size: 10.5px; color: var(--text-quaternary); }
.hype-tile-empty { color: var(--text-quaternary); }
.hype-tile-peers { grid-column: span 2; padding-bottom: 6px; }
.hype-peers-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hype-peers-list li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  padding: 2px 0;
}
.hype-peers-list li.is-me {
  color: var(--accent-money);
  font-weight: 600;
}
.hype-peer-rank { color: var(--text-tertiary); font-variant-numeric: tabular-nums; font-size: 11px; }
.hype-peer-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hype-peer-val { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.streak-flame {
  display: inline-block;
  font-size: 18px;
  margin-right: 4px;
  filter: drop-shadow(0 0 4px color-mix(in oklch, var(--accent-heat) 60%, transparent));
}

/* CRM workspace v2: compact operational surface with semantic accents. */
.crm-workspace{--crm-ink:#171717;--crm-muted:#6b6b6b;--crm-line:#dedede;--crm-soft:#f6f6f4;--crm-panel:#fff;--crm-green:#087f5b;--crm-yellow:#a66b00;--crm-red:#c7372f;color:var(--crm-ink);background:#fff;min-height:calc(100vh - 62px);border-radius:14px}
.crm-workspace button,.crm-workspace input,.crm-workspace select{font:inherit}.crm-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.crm-header h1{margin:3px 0;font-size:28px;letter-spacing:-.02em}.crm-header p{margin:0;color:var(--crm-muted);font-size:13px}.crm-header-actions{display:flex;gap:8px;align-items:center}.crm-eyebrow,.crm-detail-label{color:#888;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.crm-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--crm-line);border-radius:10px;overflow:hidden;background:var(--crm-panel);margin-bottom:14px}.crm-kpis>div{padding:11px 14px;border-right:1px solid var(--crm-line);min-width:0}.crm-kpis>div:last-child{border-right:0}.crm-kpis span{display:block;color:#888;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.crm-kpis strong{display:block;margin-top:4px;font-size:19px;font-variant-numeric:tabular-nums}.crm-good-text{color:var(--crm-green)}.crm-bad-text{color:var(--crm-red)}
.crm-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px;border:1px solid var(--crm-line);border-radius:10px;background:var(--crm-soft);margin-bottom:20px}.crm-views{display:flex;gap:3px}.crm-views button{border:0;background:transparent;color:#777;padding:8px 12px;border-radius:7px;cursor:pointer;font-size:12px}.crm-views button.active{background:#171717;color:#fff}.crm-filters{display:flex;gap:7px;min-width:0}.crm-filters input,.crm-filters select,.crm-form input,.crm-form select{border:1px solid var(--crm-line);background:#fff;color:var(--crm-ink);border-radius:6px;padding:8px 10px;min-height:34px;outline:none}.crm-filters input{width:220px}.crm-filters input:focus,.crm-form input:focus,.crm-form select:focus{border-color:#555;box-shadow:0 0 0 2px #0000000d}.crm-view-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:8px}.crm-view-head h2{margin:0 0 3px;font-size:17px}.crm-view-head span{color:#888;font-size:12px}.crm-table-wrap{border:1px solid var(--crm-line);border-radius:10px;overflow:auto;background:var(--crm-panel)}.crm-table{width:100%;border-collapse:collapse;min-width:760px;font-size:12px}.crm-table th{text-align:left;background:var(--crm-soft);color:#777;font-size:10px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--crm-line);white-space:nowrap}.crm-table td{padding:11px 12px;border-bottom:1px solid #ededed;vertical-align:middle;color:#4b4b4b}.crm-table tbody tr{cursor:pointer;transition:background .12s ease}.crm-table tbody tr:hover{background:#fafafa}.crm-table tbody tr:last-child td{border-bottom:0}.crm-table strong{color:var(--crm-ink);font-weight:600}.crm-table small{display:block;margin-top:3px;color:#999;font-size:11px}.crm-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.crm-row-action{border:0;background:transparent;color:#333;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:11px;white-space:nowrap}.crm-badge{display:inline-flex;align-items:center;border:1px solid #d5d5d5;border-radius:999px;padding:3px 7px;font-size:10px;line-height:1;white-space:nowrap;background:#f8f8f8;color:#666}.crm-badge-good{color:var(--crm-green);border-color:#9ed4c2;background:#effaf5}.crm-badge-warn{color:var(--crm-yellow);border-color:#e5ca8a;background:#fff8e8}.crm-badge-bad{color:var(--crm-red);border-color:#e7aaa6;background:#fff0ef}.crm-empty,.crm-loading{padding:42px 20px;text-align:center;color:#999}.crm-empty-inline{color:#999;font-size:12px}
.crm-add-wrap{position:relative}.crm-add-menu{position:absolute;right:0;top:42px;z-index:20;min-width:145px;padding:5px;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 10px 25px #0002}.crm-add-menu button{display:block;width:100%;border:0;background:#fff;color:#222;text-align:left;padding:9px 10px;border-radius:5px;cursor:pointer}.crm-add-menu button:hover{background:#f4f4f4}.crm-modal-backdrop,.crm-drawer-backdrop{position:fixed;inset:0;z-index:1000;background:#0005;display:flex;align-items:center;justify-content:center;padding:20px}.crm-modal{width:min(480px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;border-radius:12px;box-shadow:0 18px 55px #0004}.crm-modal-wide{width:min(800px,100%)}.crm-modal-head,.crm-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:18px 20px;border-bottom:1px solid var(--crm-line)}.crm-modal-head h2,.crm-drawer-head h2{margin:0;font-size:17px;color:var(--crm-ink)}.crm-icon-btn{border:0;background:transparent;color:#777;font-size:22px;line-height:1;cursor:pointer;padding:0 2px}.crm-form{padding:18px 20px 20px}.crm-form label{display:block;color:#555;font-size:11px;font-weight:600;margin-bottom:12px}.crm-form label input,.crm-form label select,.crm-form label textarea{display:block;width:100%;margin-top:5px;box-sizing:border-box}.crm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.crm-form-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px}.crm-form-actions .btn,.crm-header-actions .btn,.crm-view-head .btn{border:1px solid #ccc;background:#fff;color:#222;border-radius:6px;padding:8px 11px;cursor:pointer}.crm-form-actions .btn-primary,.crm-header-actions .btn-primary{border-color:#171717;background:#171717;color:#fff}.crm-form-actions button:disabled{opacity:.55;cursor:wait}
.crm-modal-wide{width:min(860px,100%)}.crm-deal-form{--crm-ink:#171717;--crm-line:#dedede;padding:16px 20px 0;color:var(--crm-ink);min-width:0}.crm-deal-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--crm-line)}.crm-deal-intro h3{margin:3px 0 0;font-size:20px;line-height:1.15;color:var(--crm-ink)}.crm-deal-intro-meta{color:#888;font-size:11px;white-space:nowrap}.crm-deal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;padding-top:14px}.crm-deal-grid>div{min-width:0}.crm-deal-full{grid-column:1 / -1}.crm-deal-form label{display:block;color:#555;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:0}.crm-deal-form label input,.crm-deal-form label select{display:block;width:100%;box-sizing:border-box;margin-top:5px;min-height:35px;padding:8px 10px;border:1px solid var(--crm-line);background:#fff;color:var(--crm-ink);border-radius:6px;outline:none}.crm-deal-form label input:focus,.crm-deal-form label select:focus{border-color:#555;box-shadow:0 0 0 2px #0000000d}.crm-deal-new-lead{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr minmax(78px,.45fr) 1fr;gap:10px;padding:12px;background:#f8fbfa;border:1px solid #cfe6dc;border-radius:8px}.crm-deal-actions{position:sticky;bottom:0;z-index:3;display:flex;justify-content:flex-end;gap:8px;margin:14px -20px 0;padding:12px 20px;background:rgba(255,255,255,.96);border-top:1px solid var(--crm-line)}.crm-deal-actions .btn{border:1px solid #ccc;background:#fff;color:#222;border-radius:6px;padding:8px 11px;cursor:pointer}.crm-deal-actions .btn-primary{border-color:#171717;background:#171717;color:#fff}.crm-deal-actions button:disabled{opacity:.55;cursor:wait}.crm-deal-loader{display:flex;flex-direction:column;align-items:center;gap:8px;padding:42px 20px;text-align:center;color:#777}.crm-deal-loader strong{font-size:15px;color:var(--crm-ink)}.crm-deal-loader span{font-size:12px}.crm-deal-loader .btn{margin-top:8px}
.crm-field-note{margin-top:6px;color:#777;font-size:11px;line-height:1.45}.crm-field-note-warn{color:#8a6400}.crm-comp-preview{border:1px solid #d8d8d8;border-radius:8px;background:#fafafa;padding:12px}.crm-comp-resolved{border-color:#acd7c3;background:#f7fbf9}.crm-comp-needs_contract,.crm-comp-needs_rate{border-color:#e4c977;background:#fffdf5}.crm-comp-error{border-color:#e8b5b5;background:#fff8f8}.crm-comp-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.crm-comp-preview-head strong{display:block;margin-top:3px;font-size:14px;color:#171717}.crm-comp-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:11px}.crm-comp-values>div{padding:8px;border:1px solid #e2e2e2;background:#fff;border-radius:6px;min-width:0}.crm-comp-values span,.crm-comp-values strong{display:block}.crm-comp-values span{color:#777;font-size:9px;text-transform:uppercase;letter-spacing:.04em}.crm-comp-values strong{margin-top:4px;color:#171717;font-size:15px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}.crm-comp-warnings{margin-top:9px;color:#8a6400;font-size:11px;line-height:1.45}.crm-comp-override-toggle{display:flex!important;align-items:center;gap:7px;margin-top:11px!important;color:#444!important;font-size:11px!important;letter-spacing:0!important;text-transform:none!important}.crm-comp-override-toggle input{width:auto!important;min-height:0!important;margin:0!important}.crm-comp-override-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #dedede}.crm-money-input{display:flex;align-items:center;gap:6px}.crm-money-input input{min-width:0}.crm-money-input>span{color:#777;font-size:12px}
@media(max-width:600px){.crm-deal-form{padding:14px 14px 0}.crm-deal-grid{grid-template-columns:minmax(0,1fr);gap:10px;padding-top:12px}.crm-deal-full{grid-column:auto}.crm-deal-new-lead{grid-template-columns:1fr 1fr;gap:8px;padding:10px}.crm-deal-actions{margin:12px -14px 0;padding:10px 14px}.crm-deal-intro h3{font-size:18px}.crm-deal-intro-meta{font-size:10px}.crm-deal-actions .btn{flex:1}.crm-comp-values,.crm-comp-override-fields{grid-template-columns:1fr}.crm-comp-preview-head{align-items:center}}
.crm-drawer-backdrop{justify-content:flex-end;padding:0}.crm-drawer{width:min(440px,100%);height:100%;overflow:auto;background:#fff;box-shadow:-12px 0 35px #0002}.crm-drawer-head{padding:24px 22px 18px}.crm-drawer-head h2{font-size:22px;margin-top:4px}.crm-muted{color:#888;font-size:12px;margin-top:4px}.crm-drawer-actions{display:flex;gap:8px;padding:16px 22px;border-bottom:1px solid var(--crm-line)}.crm-drawer-actions .btn{border:1px solid #ccc;background:#fff;color:#222;padding:8px 10px;border-radius:6px;cursor:pointer}.crm-drawer-actions .btn-primary{background:#171717;border-color:#171717;color:#fff}.crm-detail-section{padding:18px 22px;border-bottom:1px solid #ededed}.crm-detail-row{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:#777;font-size:12px}.crm-detail-row strong{color:#222;font-weight:500;text-align:right}.crm-policy-row{display:flex;justify-content:space-between;gap:10px;margin-top:13px;padding-bottom:12px;border-bottom:1px solid #eee}.crm-policy-row:last-child{border-bottom:0;padding-bottom:0}.crm-policy-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;color:#222}.crm-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.crm-detail-stats div{background:var(--crm-soft);border-radius:7px;padding:10px}.crm-detail-stats span{display:block;color:#888;font-size:10px}.crm-detail-stats strong{display:block;color:#222;margin-top:5px;font-size:14px}
@media(max-width:900px){.crm-kpis{grid-template-columns:repeat(3,1fr)}.crm-kpis>div:nth-child(3){border-right:0}.crm-kpis>div:nth-child(n+4){border-top:1px solid var(--crm-line)}.crm-toolbar{align-items:stretch;flex-direction:column}.crm-filters{flex-wrap:wrap}.crm-filters input{flex:1;min-width:180px}}
@media(max-width:600px){.crm-workspace{margin:-8px;border-radius:0}.crm-header{flex-direction:column}.crm-header-actions{width:100%}.crm-header-actions .btn,.crm-add-wrap{flex:1}.crm-header-actions .btn-primary{width:100%}.crm-kpis{grid-template-columns:repeat(2,1fr)}.crm-kpis>div:nth-child(2),.crm-kpis>div:nth-child(4){border-right:0}.crm-kpis>div:nth-child(3){border-right:1px solid var(--crm-line)}.crm-views{overflow:auto}.crm-views button{padding-left:10px;padding-right:10px;white-space:nowrap}.crm-form-grid{grid-template-columns:1fr;gap:0}.crm-modal-backdrop{padding:0;align-items:flex-end}.crm-modal{border-radius:12px 12px 0 0;max-height:90vh}}
.crm-deal-backdrop{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(18,18,18,.48)}.crm-deal-modal{width:min(900px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;background:#fff;color:#171717;border:1px solid #d8d8d8;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.24)}.crm-deal-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px 13px;border-bottom:1px solid #dedede}.crm-deal-modal-head h2{margin:3px 0 0;color:#171717;font-size:18px;line-height:1.2}.crm-deal-modal .crm-eyebrow{color:#777;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.crm-deal-modal .crm-icon-btn{color:#777}.crm-deal-modal .crm-icon-btn:hover{color:#171717;background:#f3f3f3;border-radius:5px}.crm-deal-modal .crm-deal-form{padding-top:14px}.crm-deal-modal .crm-deal-intro{border-bottom:0;padding-bottom:0}.crm-deal-modal .crm-deal-actions{background:rgba(255,255,255,.97)}
@media(max-width:600px){.crm-deal-backdrop{padding:0;align-items:flex-end}.crm-deal-modal{max-height:94vh;border-radius:12px 12px 0 0;border-bottom:0}.crm-deal-modal-head{padding:14px 16px 11px}.crm-deal-modal .crm-deal-form{padding-left:16px;padding-right:16px}.crm-deal-modal .crm-deal-actions{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}}

/* Deal selectors share the lead field's searchable, preview-first behavior. */
.crm-deal-modal .crm-deal-intro { display: none; }
.crm-deal-legacy-select { display: none; }
.crm-deal-picker { position: relative; width: 100%; }
.crm-deal-picker-control { position: relative; display: flex; align-items: center; }
.crm-deal-picker-input { width: 100%; min-height: 35px; padding: 8px 10px; padding-right: 62px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-raised); color: var(--text-primary); font: inherit; font-size: 13px; }
.crm-deal-picker-input:focus { border-color: var(--accent-money); outline: 2px solid color-mix(in srgb, var(--accent-money) 20%, transparent); outline-offset: 1px; }
.crm-deal-picker-input:disabled { opacity: .55; cursor: not-allowed; }
.crm-deal-picker-clear { position: absolute; right: 7px; padding: 3px 5px; color: var(--text-tertiary); background: transparent; border: 0; font-size: 11px; cursor: pointer; }
.crm-deal-picker-clear:hover { color: var(--text-primary); }
.crm-deal-picker-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-raised); box-shadow: var(--shadow-floating); }
.crm-deal-picker-option { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 2px; padding: 8px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.crm-deal-picker-option:hover, .crm-deal-picker-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent-money) 10%, var(--bg-overlay)); }
.crm-deal-picker-option strong { font-size: 12.5px; font-weight: 650; }
.crm-deal-picker-option span, .crm-deal-picker-empty { color: var(--text-tertiary); font-size: 11px; }
.crm-deal-picker-empty { padding: 10px 9px; }
.crm-row-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.crm-row-tags .crm-badge{font-size:9px;line-height:1.2;padding:3px 5px;white-space:nowrap}.crm-policy-actions{display:flex;gap:5px;justify-content:flex-end}.crm-policy-actions .crm-row-action{font-size:10px;padding:4px 6px}.crm-form-context{display:flex;justify-content:space-between;gap:12px;margin:-2px 0 15px;padding:10px;background:#f7f7f7;border:1px solid #e3e3e3;border-radius:7px;color:#222}.crm-form-context span{color:#777;font-size:12px}.crm-form-note{margin-top:2px;color:#777;font-size:11px;line-height:1.4}
.crm-policy-queues{display:flex;gap:7px;overflow:auto;padding:0 0 14px}.crm-policy-queues button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--crm-line);border-radius:999px;background:var(--crm-panel);color:#5d5d5d;padding:7px 10px;cursor:pointer;font-size:11px}.crm-policy-queues button:hover{border-color:#aaa}.crm-policy-queues button.active{background:#171717;border-color:#171717;color:#fff}.crm-policy-queues b{font-size:10px;font-variant-numeric:tabular-nums}.crm-policies-table td{vertical-align:top}.crm-policy-requirements{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--crm-yellow)!important}
.crm-program-note{display:flex;align-items:flex-start;gap:9px;margin:0 0 12px;padding:10px 12px;border:1px solid #cfe6dc;border-radius:8px;background:#f5fbf8;color:#4f665e;font-size:11px;line-height:1.45}.crm-program-note strong{color:#176447;white-space:nowrap}.crm-program-note span{color:#63746c}
.recruiting-workbench{max-width:1440px;margin:0 auto}.recruiting-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:8px 0 18px}.recruiting-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);font-weight:700}.recruiting-sub{margin-top:5px}.recruiting-hero-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.recruiting-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-subtle);margin-bottom:16px;overflow:auto}.recruiting-tabs button{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:13px;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--text-tertiary);cursor:pointer;white-space:nowrap;margin-bottom:-1px}.recruiting-tabs button:hover,.recruiting-tabs button.active{color:var(--text-primary)}.recruiting-tabs button.active{border-bottom-color:var(--accent-action)}.recruiting-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.recruiting-action-queue{border:1px solid var(--border-subtle);background:var(--bg-elevated);border-radius:10px;padding:14px;margin-bottom:14px}.recruiting-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.recruiting-section-head h2{margin:3px 0 0;font-size:16px;font-weight:600}.recruiting-section-head>span{font-size:11px;color:var(--text-tertiary)}.recruiting-action-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px}.recruiting-action-row{display:flex;align-items:center;gap:9px;text-align:left;width:100%;padding:9px;border:1px solid var(--border-subtle);border-radius:7px;background:var(--bg-raised);color:var(--text-primary);cursor:pointer}.recruiting-action-row:hover,.recruiting-detail-person:hover{border-color:var(--border-strong)}.recruiting-action-avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-action);color:#fff;font-size:11px;font-weight:700;flex:none}.recruiting-action-copy{display:flex;flex-direction:column;min-width:0;flex:1}.recruiting-action-copy strong,.recruiting-action-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recruiting-action-copy small{color:var(--text-tertiary);font-size:10px;margin-top:2px}.recruiting-action-cta{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--accent-action);white-space:nowrap}.recruiting-funnel>div:last-child{min-width:0}.recruiting-applicant-card{min-height:76px}.recruiting-applicant-card:focus-visible{outline:2px solid var(--accent-action);outline-offset:2px}.recruiting-campaigns-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:12px;align-items:start}.recruiting-campaign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.recruiting-campaign-card{display:block;width:100%;text-align:left;padding:14px;cursor:pointer;color:inherit}.recruiting-campaign-card:hover{border-color:var(--border-strong)}.recruiting-campaign-card .recruiting-campaign-open{pointer-events:none}.recruiting-campaign-chevron{color:var(--accent-action);display:grid;place-items:center}.recruiting-campaign-detail{position:sticky;top:12px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--bg-elevated);padding:16px}.recruiting-status{font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:4px 7px;border-radius:999px}.recruiting-status-live{color:var(--accent-money);background:color-mix(in srgb,var(--accent-money) 12%,transparent)}.recruiting-status-paused,.recruiting-status-draft{color:var(--state-warning);background:color-mix(in srgb,var(--state-warning) 12%,transparent)}.recruiting-detail-copy{font-size:12px;line-height:1.5;color:var(--text-secondary);margin:0 0 14px}.recruiting-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}.recruiting-detail-stats div{padding:9px;background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:7px}.recruiting-detail-stats strong,.recruiting-detail-stats span{display:block}.recruiting-detail-stats strong{font-size:15px}.recruiting-detail-stats span{font-size:9px;color:var(--text-tertiary);text-transform:uppercase;margin-top:3px}.recruiting-detail-actions{display:flex;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--border-subtle)}.recruiting-detail-hint{font-size:10px;color:var(--text-tertiary);line-height:1.3}.recruiting-detail-list{padding-top:14px}.recruiting-detail-person{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:8px 0;background:transparent;border:0;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);cursor:pointer}.recruiting-detail-person span{display:flex;flex-direction:column}.recruiting-detail-person small{color:var(--text-tertiary);font-size:10px;margin-top:2px}.recruiting-empty-inline{padding:18px;color:var(--text-tertiary);font-size:12px;border:1px dashed var(--border-subtle);border-radius:8px}.recruiting-confirm{display:flex;align-items:center;gap:6px;padding-top:12px;font-size:12px}@media(max-width:900px){.recruiting-campaigns-layout{grid-template-columns:1fr}.recruiting-campaign-detail{position:static}.recruiting-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.recruiting-hero{align-items:flex-start;flex-direction:column}.recruiting-hero-actions{width:100%;justify-content:flex-start}.recruiting-hero-actions .btn{flex:1}.recruiting-kpis{gap:7px}.recruiting-campaign-grid{grid-template-columns:1fr}.recruiting-detail-actions{align-items:flex-start;flex-direction:column}.recruiting-tabs button{padding-left:10px;padding-right:10px}}
.crm-carrier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}.crm-carrier-card{width:100%;text-align:left;color:var(--crm-ink);background:var(--crm-panel);border:1px solid var(--crm-line);border-radius:10px;padding:14px;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}.crm-carrier-card:hover{border-color:#aaa;box-shadow:0 8px 20px #0000000b}.crm-carrier-card-head,.crm-carrier-card-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.crm-carrier-card-head strong{font-size:14px}.crm-carrier-card-head small{display:block;margin-top:4px;color:#888;font-size:11px}.crm-carrier-card-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:16px 0 12px}.crm-carrier-card-stats div{min-width:0;padding:8px;background:var(--crm-soft);border-radius:7px}.crm-carrier-card-stats strong,.crm-carrier-card-stats span{display:block}.crm-carrier-card-stats strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crm-carrier-card-stats span{margin-top:3px;color:#888;font-size:9px;text-transform:uppercase;letter-spacing:.04em}.crm-carrier-card-stats .crm-carrier-debt strong{color:var(--crm-red)}.crm-carrier-card-foot{align-items:center;padding-top:10px;border-top:1px solid var(--crm-line);color:#777;font-size:10px}.crm-carrier-card-foot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crm-carrier-card-foot svg{color:var(--crm-green);flex:none}@media(max-width:600px){.crm-carrier-grid{grid-template-columns:1fr}.crm-carrier-card-stats{gap:4px}.crm-carrier-card-stats div{padding:7px 5px}}
.crm-carrier-table{overflow:auto}.crm-carrier-table .crm-table{min-width:1040px}.crm-carrier-table tbody tr{cursor:pointer}.crm-carrier-table tbody tr:hover td{background:#f8f8f8}.crm-product-list,.crm-contract-list{display:flex;flex-direction:column;margin-top:10px;border:1px solid var(--crm-line);border-radius:7px;overflow:hidden}.crm-product-row,.crm-contract-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;background:#fff;border-bottom:1px solid var(--crm-line)}.crm-product-row:last-child,.crm-contract-row:last-child{border-bottom:0}.crm-product-row>div:first-child,.crm-contract-row>div:first-child{min-width:0}.crm-product-row strong,.crm-product-row small,.crm-contract-row strong,.crm-contract-row small{display:block}.crm-product-row strong,.crm-contract-row strong{color:var(--crm-ink);font-size:12px}.crm-product-row small,.crm-contract-row small{margin-top:3px;color:#888;font-size:10px}.crm-contract-row select{min-width:116px;height:30px;border:1px solid var(--crm-line);border-radius:5px;background:#fff;color:var(--crm-ink);padding:0 7px}.crm-source-list{display:flex;flex-direction:column;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid var(--crm-line)}.crm-source-list a,.crm-source-list span{color:#666;font-size:10.5px;line-height:1.4}.crm-source-list a{text-decoration:underline;text-underline-offset:2px}.crm-policy-right small{display:block;color:#888;font-size:10px}@media(max-width:600px){.crm-product-row,.crm-contract-row{align-items:flex-start}.crm-contract-row select{min-width:108px}}
.crm-form label textarea{display:block;width:100%;margin-top:5px;box-sizing:border-box;border:1px solid var(--crm-line);background:#fff;color:var(--crm-ink);border-radius:6px;padding:8px 10px;resize:vertical;font:inherit}.crm-form-static{display:block;margin-top:5px;padding:8px 10px;min-height:34px;box-sizing:border-box;border:1px solid var(--crm-line);border-radius:6px;background:var(--crm-soft);color:#777;font-weight:400}.crm-inline-add{display:flex;gap:7px;margin-top:12px}.crm-inline-add input{flex:1;min-width:0;border:1px solid var(--crm-line);border-radius:6px;padding:8px 10px}.crm-inline-add .btn{border:1px solid #ccc;background:#fff;color:#222;border-radius:6px;padding:7px 10px;cursor:pointer}

/* ── Repflow product refresh ──────────────────────────────────────────────
   A shared visual layer intentionally targets system primitives rather than
   individual routes: every workspace gains the same calmer hierarchy, clearer
   controls, and consistent surfaces without replacing functional page markup.
   The CRM carries its own light-document palette and is left intentionally
   separate. */
:root {
  --bg-base: #16171b;
  --bg-elevated: #1b1d22;
  --bg-raised: #23262d;
  --bg-overlay: #2a2d35;
  --border-subtle: #2a2d35;
  --border-strong: #393d47;
  --text-primary: #f2efe8;
  --text-secondary: #c8c3b8;
  --text-tertiary: #9f988b;
  --text-quaternary: #736c62;

  --accent-money: #00a887;
  --accent-money-dim: rgba(0, 168, 135, 0.28);
  --accent-heat: #c58b2f;
  --accent-status: #7c5cff;
  --state-danger: #dc5b57;
  --state-warning: #c58b2f;
  --state-info: #4b7bec;

  --tier-bronze: #A97142;
  --tier-silver: #C0C0C8;
  --tier-gold: #D9A441;
  --tier-platinum: #E5E4E2;
  --tier-diamond: #B9F2FF;

  --row-h: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;

  --shadow-floating: 0 10px 30px rgba(0, 0, 0, 0.28), 0 18px 50px -20px rgba(0,0,0,0.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.4, 1.6, 0.4, 1);

  --dim-overlay: rgba(0,0,0,0.56);
}

html[data-theme="light"] {
  --bg-base:     #F6F1E8;
  --bg-elevated: #FBF8F3;
  --bg-raised:   #FFFFFF;
  --bg-overlay:  #EEE7DC;
  --border-subtle: #DDD3C4;
  --border-strong: #C6B7A3;
  --text-primary:   #181A1F;
  --text-secondary: #55504A;
  --text-tertiary:  #8A8377;
  --text-quaternary: #B4ADA1;
  --accent-money:     #007A66;
  --accent-money-dim: rgba(0, 122, 102, 0.12);
  --accent-heat:      #A8741F;
  --accent-status:    #1D1D22;
  --state-danger:     #B93F3B;
  --state-warning:    #A8741F;
  --state-info:       #4A5568;
  --shadow-floating: 0 4px 16px rgba(40, 28, 18, 0.08), 0 14px 32px -16px rgba(40, 28, 18, 0.16);
  --shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.60);
  --dim-overlay: rgba(40,28,18,0.34);
}

body {
  background:
    radial-gradient(900px 520px at 88% -12%, color-mix(in srgb, var(--accent-status) 14%, transparent), transparent 66%),
    radial-gradient(760px 500px at 22% -28%, color-mix(in srgb, var(--accent-money) 10%, transparent), transparent 68%),
    var(--bg-base);
}
.workspace { background: transparent; }
.sidebar {
  background: color-mix(in srgb, var(--bg-base) 90%, transparent);
  border-right-color: color-mix(in srgb, var(--border-subtle) 95%, transparent);
}
.sb-brand { padding: 17px 16px 14px; }
.sb-brand-mark {
  width: 28px; height: 28px; border-radius: 9px;
  background: linear-gradient(135deg, #68f1c7, var(--accent-money) 52%, #33b9af);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-money) 25%, transparent);
}
.sb-item { min-height: 34px; padding: 7px 10px; border: 1px solid transparent; }
.sb-item.active {
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent-money) 15%, var(--bg-raised)), color-mix(in srgb, var(--accent-status) 10%, var(--bg-raised)));
  border-color: color-mix(in srgb, var(--accent-money) 24%, var(--border-subtle));
  box-shadow: inset 3px 0 0 var(--accent-money), 0 8px 18px rgba(0, 0, 0, 0.12);
}
.topbar {
  margin: 12px 18px 10px;
  height: 46px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  border-color: color-mix(in srgb, var(--border-strong) 62%, transparent);
  box-shadow: 0 12px 32px rgba(0,0,0,.18), inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}
.page-pad { max-width: 1540px; width: 100%; margin: 0 auto; padding: 24px 28px 42px; }
.page-eyebrow {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  color: var(--accent-money); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.page-title { font-size: clamp(24px, 2.2vw, 32px); font-weight: 650; letter-spacing: -.035em; }
.page-sub { max-width: 680px; margin-top: 5px; line-height: 1.55; }
.kpi { padding: 16px 17px 14px; border-radius: var(--radius-lg); background: linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 94%, white 2%), var(--bg-elevated)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent), 0 10px 24px rgba(0,0,0,.08); }
.kpi:hover { border-color: color-mix(in srgb, var(--accent-status) 36%, var(--border-strong)); transform: translateY(-1px); }
.kpi-label { letter-spacing: .1em; font-size: 10px; font-weight: 650; }
.kpi-val { font-size: 30px; letter-spacing: -.035em; }
.panel { border-radius: var(--radius-lg); background: linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 96%, white 2%), var(--bg-elevated)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent), 0 12px 30px rgba(0,0,0,.09); }
.panel-h { min-height: 46px; padding: 11px 15px; background: color-mix(in srgb, var(--bg-raised) 50%, transparent); }
.panel-h h3 { font-size: 13px; }
.btn { min-height: 32px; padding: 6px 11px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--border-strong) 74%, transparent); background: color-mix(in srgb, var(--bg-raised) 94%, transparent); box-shadow: var(--shadow-inset); }
.btn:hover { border-color: color-mix(in srgb, var(--accent-status) 32%, var(--border-strong)); background: var(--bg-overlay); transform: translateY(-1px); }
.btn:focus-visible, .section-pill > button:focus-visible, .sb-item:focus-visible { outline: 2px solid var(--accent-money); outline-offset: 2px; }
.btn-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-money) 86%, white 14%), var(--accent-money)); color: #041b17; border-color: color-mix(in srgb, var(--accent-money) 28%, var(--border-strong)); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-money) 18%, transparent); }
.btn-primary:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-money) 92%, white 8%), var(--accent-money)); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); }
.section-pill { margin: 0; padding: 4px; border-radius: 11px; background: color-mix(in srgb, var(--bg-raised) 84%, transparent); border: 1px solid var(--border-subtle); }
.section-pill > button { padding: 6px 12px; border-radius: 8px; }
.section-pill > button.active { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-money) 22%, var(--bg-overlay)), color-mix(in srgb, var(--accent-status) 17%, var(--bg-overlay))); box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 5px 12px rgba(0,0,0,.16); }
.list-h { background: color-mix(in srgb, var(--bg-base) 34%, transparent); }
.row:hover { background: color-mix(in srgb, var(--accent-status) 6%, var(--bg-raised)); }

/* Team progress gets stronger hierarchy without becoming a bespoke island. */
.performance-head { align-items: flex-end; margin: 4px 0 20px; }
.performance-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.performance-kpis { gap: 14px; margin-bottom: 18px; }
.performance-kpis .kpi:first-child { border-color: color-mix(in srgb, var(--accent-money) 28%, var(--border-subtle)); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-money) 11%, var(--bg-elevated)), color-mix(in srgb, var(--accent-status) 9%, var(--bg-elevated))); }
.perf-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, 1fr); gap: 16px; }
.performance-standings .panel-h svg { color: var(--accent-money); }
.performance-row { position: relative; }
.performance-row.is-leader { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-money) 11%, transparent), transparent 82%); }
.performance-row.is-leader::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-money); }
.performance-loading { padding: 9px 14px; font-size: 11px; color: var(--accent-money); background: color-mix(in srgb, var(--accent-money) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent-money) 18%, var(--border-subtle)); }

@media (max-width: 1100px) {
  .perf-main { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .topbar { margin: 8px 10px; height: 42px; border-radius: 13px; }
  .page-pad { padding: 18px 14px 32px; }
  .performance-head { align-items: flex-start; }
  .performance-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .performance-actions .btn { flex: 1; justify-content: center; }
  .performance-actions .section-pill { width: 100%; justify-content: space-between; }
  .performance-actions .section-pill > button { flex: 1; }
  .performance-standings { overflow-x: auto; }
  .performance-standings .list { min-width: 620px; }
}

/* ── Vault resource hub: client communication library ─────────────────── */
.vault-texts { display: flex; flex-direction: column; gap: 14px; }
.vault-texts-hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding: 20px; border: 1px solid color-mix(in srgb, var(--accent-money) 24%, var(--border-subtle));
  border-radius: var(--radius-lg);
  background: linear-gradient(125deg, color-mix(in srgb, var(--accent-money) 11%, var(--bg-elevated)), color-mix(in srgb, var(--accent-status) 8%, var(--bg-elevated)) 58%, var(--bg-elevated));
}
.vault-texts-hero h2 { margin: 0; font: 650 22px/1.15 var(--font-display); letter-spacing: -.025em; }
.vault-texts-hero p { max-width: 680px; margin: 7px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; }
.vault-texts-hero .btn { flex: 0 0 auto; }
.vault-text-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vault-text-toolbar-note { display: inline-flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-size: 11px; }
.vault-text-toolbar-note svg { color: var(--accent-money); }
.vault-text-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.vault-text-card {
  display: flex; flex-direction: column; min-width: 0; padding: 15px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 96%, white 2%), var(--bg-elevated));
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent), 0 10px 22px rgba(0,0,0,.06);
}
.vault-text-card:hover { border-color: color-mix(in srgb, var(--accent-money) 32%, var(--border-strong)); }
.vault-text-card-head { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.vault-text-card h3 { margin: 12px 0 0; font-size: 14px; letter-spacing: -.012em; }
.vault-text-description { margin: 5px 0 0; color: var(--text-tertiary); font-size: 11px; line-height: 1.45; }
.vault-text-body {
  margin: 12px 0; padding: 11px; min-height: 94px; white-space: pre-wrap;
  color: var(--text-secondary); background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 75%, transparent); border-radius: 10px;
  font: 11.5px/1.55 var(--font-ui);
}
.vault-text-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.vault-text-card-actions .btn { padding: 5px 8px; font-size: 11px; }
.vault-text-actions-spacer { flex: 1; }
.vault-texts-empty { display: flex; flex-direction: column; align-items: center; padding: 44px 20px; text-align: center; }
.vault-texts-empty > svg { color: var(--accent-money); }
.vault-texts-empty strong { margin-top: 10px; font-size: 14px; }
.vault-texts-empty p { max-width: 460px; margin: 6px 0 14px; color: var(--text-tertiary); font-size: 12px; line-height: 1.55; }
.vault-texts-empty code { color: var(--accent-money); }
.vault-text-private-note { margin-top: 4px; color: var(--text-tertiary); font-size: 11px; }
.vault-texts-preview .panel-h svg { color: var(--accent-money); }
.vault-text-preview-list { display: flex; flex-direction: column; gap: 1px; padding: 8px; }
.vault-text-preview { display: grid; grid-template-columns: auto minmax(110px, .65fr) minmax(0, 1.35fr); gap: 8px; align-items: center; padding: 8px; border-radius: 9px; }
.vault-text-preview:hover { background: var(--bg-raised); }
.vault-text-preview strong { font-size: 12px; }
.vault-text-preview > span:last-child { color: var(--text-tertiary); font-size: 11px; }
.vault-text-preview-foot { padding: 9px 14px 12px; color: var(--text-tertiary); font-size: 11px; border-top: 1px solid var(--border-subtle); }
.vault-send-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vault-text-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.45; cursor: pointer; }
.vault-text-consent input { margin-top: 2px; accent-color: var(--accent-money); }
.vault-text-send-note { margin-top: 10px; color: var(--text-tertiary); font-size: 10.5px; line-height: 1.45; }
.vault-text-send-error { margin-top: 10px; padding: 9px 10px; color: var(--state-danger); background: color-mix(in srgb, var(--state-danger) 10%, transparent); border-radius: 8px; font-size: 11.5px; }
@media (max-width: 720px) {
  .vault-texts-hero { align-items: flex-start; flex-direction: column; }
  .vault-texts-hero .btn { width: 100%; justify-content: center; }
  .vault-text-toolbar .section-pill { max-width: 100%; overflow-x: auto; }
}
@media (max-width: 560px) {
  .vault-text-grid { grid-template-columns: 1fr; }
  .vault-text-preview { grid-template-columns: auto minmax(0, 1fr); }
  .vault-text-preview > span:last-child { grid-column: 2; }
  .vault-send-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Dialing Floor workspace responsive grid */
.floor-workspace-grid {
  display: grid;
  grid-template-columns: 280px minmax(320px, 1fr) 340px;
  background-color: var(--bg-base);
  color: var(--text-primary);
}

@media (max-width: 1024px) {
  .floor-workspace-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow-y: auto;
  }
  .floor-workspace-grid > :first-child {
    display: none !important; /* Hide scripts tab on tight components */
  }
}

/* ── Ivory / Ink system pass ───────────────────────────────────────────────
   The product ships a single visual language across operational pages, CRM,
   messaging, forms, modals, and public portals.  Semantic tokens allow
   page-specific JSX to inherit this system without palette forks. */
:root {
  --bg-base: #141414;
  --bg-elevated: #1c1c1c;
  --bg-raised: #262626;
  --bg-overlay: #303030;
  --border-subtle: #383838;
  --border-strong: #525252;
  --text-primary: #f4efe6;
  --text-secondary: #d5d0c7;
  --text-tertiary: #a9a39a;
  --text-quaternary: #77736d;
  --accent-money: #f4efe6;
  --accent-money-dim: rgba(244,239,230,.18);
  --accent-action: var(--accent-money);
  --accent-status: #d8d0c1;
  --accent-heat: #d3a551;
  --state-danger: #db7770;
  --state-warning: #d3a551;
  --state-info: #9ca8b8;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-floating: 0 18px 50px rgba(6, 10, 8, .24), 0 2px 10px rgba(6, 10, 8, .18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.055);
  --font-ui: "Manrope", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Manrope", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --dim-overlay: rgba(0, 0, 0, .62);
}
html[data-theme="light"] {
  --bg-base: #f3eee5;
  --bg-elevated: #fbf8f2;
  --bg-raised: #fffdf9;
  --bg-overlay: #e8e2d9;
  --border-subtle: #ddd6cc;
  --border-strong: #beb6aa;
  --text-primary: #1c1b1a;
  --text-secondary: #56514b;
  --text-tertiary: #7a746d;
  --text-quaternary: #9a938a;
  --accent-money: #1c1b1a;
  --accent-money-dim: rgba(28,27,26,.10);
  --accent-action: var(--accent-money);
  --accent-status: #2a2926;
  --accent-heat: #9c6a1d;
  --state-danger: #ad4842;
  --state-warning: #9c6a1d;
  --state-info: #526172;
  --shadow-floating: 0 14px 34px rgba(62, 50, 35, .10), 0 2px 8px rgba(62, 50, 35, .05);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.92);
  --dim-overlay: rgba(31, 36, 32, .30);
}
/* Accent presets no longer introduce off-system purple, blue, amber or rose. */
html[data-accent], html[data-theme="light"][data-accent] {
  --accent-money: #1c1b1a;
  --accent-money-dim: rgba(28,27,26,.10);
  --accent-status: #2a2926;
}
html:not([data-theme="light"])[data-accent] {
  --accent-money: #f4efe6;
  --accent-money-dim: rgba(244,239,230,.18);
  --accent-status: #d8d0c1;
}

html { background: var(--bg-base); }
body {
  background-color: var(--bg-base);
  background-image: radial-gradient(color-mix(in srgb, var(--text-tertiary) 20%, transparent) 0.8px, transparent 0.8px);
  background-size: 14px 14px;
  color: var(--text-primary);
  letter-spacing: -.012em;
}
button, input, textarea, select { font-family: var(--font-ui); }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:active, .btn:active, .sb-item:active, .row:active { transform: translateY(1px) scale(.99); }
::selection { background: color-mix(in srgb, var(--accent-money) 26%, transparent); color: var(--text-primary); }

/* Shell and navigation: quiet ink structure around the work, not decoration. */
.app {
  background-color: var(--bg-base);
  background-image: radial-gradient(color-mix(in srgb, var(--text-tertiary) 18%, transparent) 0.8px, transparent 0.8px);
  background-size: 14px 14px;
}
.workspace { background: transparent; }
.sidebar { background: var(--bg-elevated); border-right-color: var(--border-subtle); }
.sb-brand-row, .sb-brand, .sb-user { border-color: var(--border-subtle); }
.sb-brand { padding: 18px 16px 14px; }
.sb-brand-mark {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--accent-money); color: #f7f3eb;
  box-shadow: none;
}
.sb-brand-name { font-size: 14px; font-weight: 750; letter-spacing: -.035em; }
.sb-brand-meta, .sb-section { color: var(--text-tertiary); }
.sb-section { padding: 18px 12px 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .13em; }
.sb-item { min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; font-weight: 650; }
.sb-item:hover { background: var(--bg-raised); }
.sb-item.active { background: color-mix(in srgb, var(--accent-money) 13%, var(--bg-raised)); border-color: color-mix(in srgb, var(--accent-money) 28%, var(--border-subtle)); box-shadow: inset 3px 0 0 var(--accent-money); }
.sb-item .badge { background: var(--bg-overlay); color: var(--text-secondary); }
/* Compact action dock: the page/role directory lives in the sidebar, not here. */
.topbar {
  position: sticky;
  top: 12px;
  align-self: flex-end;
  width: max-content;
  height: 44px;
  margin: 12px 18px 0 auto;
  padding: 5px 6px 5px 10px;
  gap: 6px;
  border: 1px solid color-mix(in oklch, var(--border-strong) 56%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-elevated) 68%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--text-primary) 8%, transparent) inset, 0 12px 30px -18px rgba(0,0,0,.72);
}
.topbar .cmdk-trigger,
.topbar .topbar-action { height: 32px; border-radius: 999px; }
.topbar .cmdk-trigger { padding: 0 11px; }
.topbar .topbar-action { padding: 0 12px; }
.topbar .icon-btn { width: 32px; height: 32px; border-radius: 50%; }

/* Page rhythm and surface primitives. */
.page-pad { max-width: 1560px; padding: 28px 32px 52px; }
.page-h { margin-bottom: 22px; align-items: end; }
.page-eyebrow { color: var(--accent-money); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.page-title { font-size: clamp(25px, 2.1vw, 34px); font-weight: 760; letter-spacing: -.045em; line-height: 1.04; }
.page-sub { max-width: 760px; margin-top: 7px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.panel, .kpi, .modal {
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-inset);
}
.panel, .kpi { border-radius: var(--radius-lg); }
.panel:hover, .kpi:hover { border-color: var(--border-strong); transform: none; }
.panel-h { min-height: 48px; padding: 12px 16px; background: transparent; border-bottom-color: var(--border-subtle); }
.panel-h h3, .panel-h .meta { font-weight: 750; }
.kpi { padding: 17px 18px; }
.kpi-label { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; }
.kpi-val { font-size: clamp(24px, 2vw, 31px); font-weight: 760; letter-spacing: -.05em; }

/* Buttons, segmented controls, fields and data tables. */
.btn { min-height: 36px; padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-raised); color: var(--text-primary); box-shadow: none; font-size: 12px; font-weight: 750; transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.btn:hover { transform: translateY(-1px); border-color: var(--text-secondary); background: var(--bg-overlay); }
.btn-primary { background: var(--text-primary); color: var(--bg-elevated); border-color: var(--text-primary); box-shadow: none; }
.btn-primary:hover { background: var(--text-secondary); border-color: var(--text-secondary); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-raised); border-color: var(--border-subtle); color: var(--text-primary); }
.section-pill { padding: 3px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-raised); box-shadow: none; }
.section-pill > button { padding: 7px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 750; }
.section-pill > button.active { background: var(--text-primary); color: var(--bg-elevated); box-shadow: none; }
.text-input, input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-raised); color: var(--text-primary); box-shadow: none;
}
.text-input:focus, input:focus, textarea:focus, select:focus { border-color: var(--accent-money); outline: 2px solid color-mix(in srgb, var(--accent-money) 20%, transparent); outline-offset: 1px; box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--text-quaternary); opacity: 1; }
input:disabled, textarea:disabled, select:disabled, button:disabled { opacity: .48; cursor: not-allowed; }
.chip { border-color: var(--border-subtle); background: var(--bg-raised); font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.list-h { background: var(--bg-raised); color: var(--text-tertiary); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; }
.row { border-bottom-color: var(--border-subtle); }
.row:hover, .row.sel { background: color-mix(in srgb, var(--accent-money) 7%, var(--bg-raised)); }
table th { color: var(--text-tertiary); font-size: 10px; letter-spacing: .10em; text-transform: uppercase; }
table td, table th { border-color: var(--border-subtle); }

/* Dialogs and transient states remain legible in every route. */
.modal-backdrop, .modal-wrap { background: var(--dim-overlay); }
.modal { border-radius: 16px; box-shadow: var(--shadow-floating); }
.modal-h { min-height: 52px; padding: 15px 18px; border-bottom-color: var(--border-subtle); }
.modal-t { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.modal-body { padding: 18px; gap: 14px; }
.modal-foot { padding: 14px 18px; border-top-color: var(--border-subtle); }
.empty, .empty-state, .loading, .crm-empty, .crm-loading { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg-raised) 65%, transparent); color: var(--text-tertiary); }

/* CRM is a first-class workspace: remove its isolated white-document palette. */
.crm-workspace { --crm-ink: var(--text-primary); --crm-muted: var(--text-tertiary); --crm-line: var(--border-subtle); --crm-soft: var(--bg-raised); --crm-panel: var(--bg-elevated); --crm-green: var(--accent-money); --crm-yellow: var(--state-warning); --crm-red: var(--state-danger); background: transparent; color: var(--text-primary); border-radius: 0; }
.crm-workspace .crm-table-wrap, .crm-workspace .crm-kpis, .crm-workspace .crm-toolbar, .crm-workspace .crm-carrier-card, .crm-workspace .crm-modal, .crm-workspace .crm-drawer, .crm-workspace .crm-deal-modal { background: var(--bg-elevated); border-color: var(--border-subtle); color: var(--text-primary); box-shadow: none; }
.crm-workspace .crm-table th, .crm-workspace .crm-table td { background: transparent; border-color: var(--border-subtle); color: var(--text-secondary); }
.crm-workspace .crm-table th, .crm-workspace .crm-kpis span { color: var(--text-tertiary); }
.crm-workspace .crm-table strong, .crm-workspace .crm-header h1, .crm-workspace .crm-modal-head h2, .crm-workspace .crm-drawer-head h2 { color: var(--text-primary); }
.crm-workspace .crm-views button.active, .crm-workspace .crm-policy-queues button.active, .crm-workspace .crm-form-actions .btn-primary, .crm-workspace .crm-header-actions .btn-primary, .crm-workspace .crm-deal-actions .btn-primary { background: var(--accent-money); border-color: var(--accent-money); color: #f7f4ec; }
.crm-workspace .crm-filters input, .crm-workspace .crm-filters select, .crm-workspace .crm-form input, .crm-workspace .crm-form select, .crm-workspace .crm-form textarea, .crm-workspace .crm-deal-form label input, .crm-workspace .crm-deal-form label select { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text-primary); }
.crm-workspace .crm-deal-actions { background: color-mix(in srgb, var(--bg-elevated) 94%, transparent); border-color: var(--border-subtle); }

/* CRM inherits the same Ink/Ivory system in both themes. These selectors
   deliberately override the legacy self-contained CRM palette above. */
.crm-workspace .crm-add-menu,
.crm-workspace .crm-add-menu button,
.crm-workspace .crm-modal,
.crm-workspace .crm-drawer,
.crm-workspace .crm-deal-modal,
.crm-workspace .crm-product-row,
.crm-workspace .crm-contract-row,
.crm-workspace .crm-comp-values > div {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.crm-workspace .crm-add-menu button:hover,
.crm-workspace .crm-table tbody tr:hover,
.crm-workspace .crm-carrier-table tbody tr:hover td {
  background: var(--bg-raised);
}
.crm-workspace .crm-toolbar,
.crm-workspace .crm-table th,
.crm-workspace .crm-carrier-card-stats div,
.crm-workspace .crm-detail-stats div,
.crm-workspace .crm-form-context,
.crm-workspace .crm-form-static,
.crm-workspace .crm-comp-preview {
  background: var(--bg-raised);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}
.crm-workspace .crm-form label,
.crm-workspace .crm-deal-form label,
.crm-workspace .crm-field-note,
.crm-workspace .crm-muted,
.crm-workspace .crm-eyebrow,
.crm-workspace .crm-detail-row,
.crm-workspace .crm-detail-row strong,
.crm-workspace .crm-policy-right,
.crm-workspace .crm-policy-right small,
.crm-workspace .crm-product-row small,
.crm-workspace .crm-contract-row small,
.crm-workspace .crm-source-list a,
.crm-workspace .crm-source-list span { color: var(--text-tertiary); }
.crm-workspace .crm-deal-new-lead,
.crm-workspace .crm-program-note,
.crm-workspace .crm-comp-resolved {
  background: color-mix(in srgb, var(--bg-raised) 92%, var(--accent-money) 8%);
  border-color: color-mix(in srgb, var(--border-subtle) 78%, var(--accent-money) 22%);
  color: var(--text-secondary);
}
.crm-workspace .crm-program-note strong { color: var(--text-primary); }
.crm-workspace .crm-views button.active,
.crm-workspace .crm-policy-queues button.active,
.crm-workspace .crm-form-actions .btn-primary,
.crm-workspace .crm-header-actions .btn-primary,
.crm-workspace .crm-view-head .btn-primary,
.crm-workspace .crm-deal-actions .btn-primary {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-elevated);
}
.crm-workspace .crm-views button,
.crm-workspace .crm-policy-queues button,
.crm-workspace .crm-form-actions .btn,
.crm-workspace .crm-header-actions .btn,
.crm-workspace .crm-view-head .btn,
.crm-workspace .crm-deal-actions .btn,
.crm-workspace .crm-inline-add .btn {
  background: var(--bg-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.crm-workspace .crm-badge { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text-secondary); }
.crm-workspace .crm-badge-good { background: color-mix(in srgb, var(--bg-raised) 90%, var(--accent-money) 10%); border-color: color-mix(in srgb, var(--border-strong) 82%, var(--accent-money) 18%); color: var(--accent-money); }
.crm-workspace .crm-badge-warn { background: color-mix(in srgb, var(--bg-raised) 90%, var(--state-warning) 10%); border-color: color-mix(in srgb, var(--border-strong) 82%, var(--state-warning) 18%); color: var(--state-warning); }
.crm-workspace .crm-badge-bad { background: color-mix(in srgb, var(--bg-raised) 90%, var(--state-danger) 10%); border-color: color-mix(in srgb, var(--border-strong) 82%, var(--state-danger) 18%); color: var(--state-danger); }

/* The Floor needs dense readability, never a yellow island. */
.floor-workspace-grid { background: transparent; color: var(--text-primary); }
.floor-client-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: var(--bg-raised);
}
.floor-client-tab,
.floor-gender-tab,
.floor-answer-tab {
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
}
.floor-client-tab { flex: 1; padding: 5px 4px; text-transform: capitalize; }
.floor-client-tab:hover,
.floor-gender-tab:hover,
.floor-answer-tab:hover { background: var(--bg-overlay); color: var(--text-primary); }
.floor-client-tab.active,
.floor-gender-tab.active,
.floor-answer-tab.active {
  background: var(--accent-money);
  border-color: var(--accent-money);
  color: var(--bg-elevated);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent-money) 18%, transparent);
}
.floor-gender-tab { flex: 1; padding: 6px 0; font-size: 12px; }
.floor-answer-tab { padding: 3px 8px; background: var(--bg-base); color: var(--text-tertiary); }
.floor-answer-tab.danger.active { background: var(--state-danger); border-color: var(--state-danger); color: #fff; }

/* Workflow studio */
.workflow-page { max-width: 1600px; }
.workflow-page-head { align-items: flex-end; }
.workflow-page-head .page-eyebrow { display: flex; align-items: center; gap: 5px; }
.workflow-ai-bar { display: grid; grid-template-columns: auto minmax(210px, .8fr) minmax(260px, 1.4fr) auto; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent-money) 30%, var(--border-subtle)); border-radius: 14px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent-money) 9%, var(--bg-elevated)), var(--bg-elevated)); }
.workflow-ai-bar > svg { color: var(--accent-money); }
.workflow-ai-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.workflow-ai-copy strong { font-size: 12px; }
.workflow-ai-copy span { color: var(--text-tertiary); font-size: 11px; line-height: 1.35; }
.workflow-layout { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.7fr); gap: 14px; align-items: start; }
.workflow-library, .workflow-builder { min-width: 0; overflow: hidden; }
.workflow-library-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.workflow-list-item { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.workflow-list-item:hover { background: var(--bg-raised); }
.workflow-list-item.is-selected { background: color-mix(in srgb, var(--accent-money) 10%, var(--bg-raised)); border-color: color-mix(in srgb, var(--accent-money) 28%, var(--border-subtle)); }
.workflow-list-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: var(--bg-raised); color: var(--accent-money); }
.workflow-list-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.workflow-list-copy strong, .workflow-list-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-list-copy strong { font-size: 12px; }
.workflow-list-copy small { color: var(--text-tertiary); font-size: 10.5px; }
.workflow-builder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); }
.workflow-name-input { width: min(420px, 100%); padding: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 20px; font-weight: 760; letter-spacing: -.035em; }
.workflow-status-line { display: flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--text-tertiary); font-size: 10.5px; }
.workflow-builder-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.workflow-canvas { padding: 20px; background: color-mix(in srgb, var(--bg-base) 70%, transparent); }
.workflow-step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; max-width: 720px; margin: 0 auto; }
.workflow-step-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.workflow-step-rail span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--bg-raised); color: var(--text-tertiary); font: 700 10px var(--font-mono); }
.workflow-step-rail i { width: 1px; flex: 1; min-height: 24px; background: var(--border-strong); }
.workflow-step:last-of-type .workflow-step-rail i { display: none; }
.workflow-step-body { margin-bottom: 14px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-elevated); box-shadow: var(--shadow-inset); }
.workflow-step-title { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--text-primary); font-size: 12px; }
.workflow-step-trigger .workflow-step-title svg { color: var(--accent-money); }
.workflow-step-condition .workflow-step-title svg { color: var(--state-warning); }
.workflow-step-action .workflow-step-title svg { color: var(--accent-status); }
.workflow-step select, .workflow-step textarea { width: 100%; }
.workflow-step-grid { display: flex; align-items: end; gap: 7px; margin: 9px 0; color: var(--text-tertiary); font-size: 11px; }
.workflow-step-grid label { display: flex; align-items: center; gap: 7px; }
.workflow-step-grid input { width: 80px; }
.workflow-add-step { display: flex; align-items: center; gap: 6px; margin: 0 auto; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--text-secondary); background: transparent; cursor: pointer; font-size: 11px; }
.workflow-add-step:hover { border-color: var(--accent-money); color: var(--text-primary); background: var(--bg-raised); }
.workflow-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 20px; }
.workflow-summary-card { display: flex; flex-direction: column; gap: 7px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-raised); }
.workflow-summary-card span { color: var(--text-tertiary); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.workflow-summary-card strong { font-size: 13px; line-height: 1.4; }
.workflow-empty { padding: 24px 16px; color: var(--text-tertiary); font-size: 11.5px; line-height: 1.5; text-align: center; }
.workflow-empty-large { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 300px; justify-content: center; }
.workflow-empty-large svg { color: var(--accent-money); }
.workflow-empty-large strong { color: var(--text-primary); font-size: 14px; }

@media (max-width: 900px) {
  .workflow-ai-bar { grid-template-columns: auto 1fr auto; }
  .workflow-ai-copy { display: none; }
  .workflow-layout { grid-template-columns: 1fr; }
  .workflow-library-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 560px) {
  .workflow-page-head { align-items: flex-start; }
  .workflow-page-head > .btn { width: 100%; justify-content: center; }
  .workflow-ai-bar { grid-template-columns: 1fr; }
  .workflow-ai-bar > svg { display: none; }
  .workflow-ai-bar .btn { justify-content: center; }
  .workflow-builder-head { flex-direction: column; }
  .workflow-builder-actions { width: 100%; justify-content: stretch; }
  .workflow-builder-actions .btn { flex: 1; justify-content: center; }
  .workflow-summary { grid-template-columns: 1fr; }
}

/* Selected buttons use the ink foreground as their surface, so their label
   always switches to the contrasting elevated-surface color. */
.btn.active,
.btn.is-active,
.btn[aria-pressed="true"],
.btn[aria-selected="true"] {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-elevated);
}
.btn.active:hover,
.btn.is-active:hover,
.btn[aria-pressed="true"]:hover,
.btn[aria-selected="true"]:hover {
  background: var(--text-secondary);
  border-color: var(--text-secondary);
  color: var(--bg-elevated);
}

/* Final selected-control override. Legacy theme and CRM rules can otherwise
   reintroduce dark text on a dark selected button. */
button.btn.active,
button.btn.is-active,
button.btn[aria-pressed="true"],
button.btn[aria-selected="true"],
.section-pill > button.active,
button.active[aria-selected="true"] {
  background: #181a1f !important;
  border-color: #181a1f !important;
  color: #ffffff !important;
  text-shadow: none;
}
button.btn.active:hover,
button.btn.is-active:hover,
button.btn[aria-pressed="true"]:hover,
button.btn[aria-selected="true"]:hover,
.section-pill > button.active:hover {
  background: #292c34 !important;
  border-color: #292c34 !important;
  color: #ffffff !important;
}

/* Floor's top-level surface switch should be an accent segment, not a full
   black slab in the light theme. */
.section-pill > button.active,
.section-pill > button.active:hover {
  background: var(--accent-money) !important;
  border-color: var(--accent-money) !important;
  color: var(--bg-elevated) !important;
}

/* Rows may contain a title, subtitle, status, and actions. A fixed 32px row
   clips those stacked children and makes their line boxes overlap. */
.list-h, .row { line-height: 1.35; }
.row {
  height: auto !important;
  min-height: var(--row-h);
  padding-top: 8px;
  padding-bottom: 8px;
}
.row > * { min-height: 0; }

/* Keep controls compact while retaining a reliable click target. */
.btn {
  min-height: 32px;
  padding: 6px 10px;
  line-height: 1.2;
}
.list-actions .btn { min-height: 30px; padding: 5px 9px; }

/* Settings navigation should size to its tab labels, not the active page. */
.settings-grid > .panel { padding: 5px !important; }
.settings-grid > .panel > .btn {
  min-height: 30px;
  padding: 6px 9px !important;
  line-height: 1.2;
}
.settings-tabbar {
  align-self: start;
  height: max-content;
  min-height: 0;
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 1100px) {
  .settings-tabbar { top: 10px; }
}
.settings-tabbar[data-tab-count="8"] { padding: 4px !important; }
.settings-tabbar[data-tab-count="7"] { padding: 4px !important; }
.settings-tabbar[data-tab-count="8"] .settings-tab,
.settings-tabbar[data-tab-count="7"] .settings-tab {
  min-height: 28px;
  padding: 5px 8px !important;
}
.settings-tabbar[data-tab-count="5"] .settings-tab,
.settings-tabbar[data-tab-count="4"] .settings-tab {
  min-height: 30px;
  padding: 6px 9px !important;
}

/* The topbar sits in the workspace flex flow while .page scrolls below it.
   Sticky positioning here can create an overlapping stacking layer when a
   route contains its own sticky controls. */
.workspace { min-height: 0; isolation: isolate; }
.topbar {
  position: relative;
  top: auto;
  z-index: 2;
  flex: 0 0 auto;
}
.page {
  min-height: 0;
  scroll-padding-top: 18px;
}

@media (max-width: 900px) {
  .page-pad { padding: 22px 18px 40px; }
  .page-h { align-items: flex-start; flex-direction: column; gap: 14px; }
  .page-h > div[style*="margin-left"] { margin-left: 0 !important; }
}
@media (max-width: 640px) {
  .page-pad { padding: 18px 14px 32px; }
  .topbar { width: calc(100% - 20px); height: 44px; margin: 10px; justify-content: space-between; }
  .panel-h { padding: 11px 13px; }
  .modal { border-radius: 14px 14px 0 0; }
  .btn { min-height: 40px; }
  .section-pill { max-width: 100%; overflow-x: auto; }
  .section-pill > button { white-space: nowrap; }
}

/* Floating sidebar shell. One width variable drives the grid and rail so a
   collapsed sidebar can never leave a partially-open fixed box behind. */
:root { --sidebar-width: 258px; --sidebar-rail-width: 72px; }
.app {
  grid-template-columns: minmax(0, var(--sidebar-width)) minmax(0, 1fr);
  gap: 0;
  padding: 12px 0 12px 12px;
  transition: grid-template-columns 220ms var(--ease-out);
}
html[data-sidebar-collapsed="1"] .app {
  grid-template-columns: minmax(0, var(--sidebar-rail-width)) minmax(0, 1fr);
}
.sidebar {
  width: calc(100% - 12px);
  height: fit-content;
  max-height: calc(100vh - 24px);
  align-self: start;
  margin: 0 12px 0 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 14px 34px rgba(0,0,0,.14), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
  transition: border-radius 220ms var(--ease-out), width 220ms var(--ease-out);
}
.sidebar .sb-brand-row { margin: 8px 8px 0; border-bottom: 0; border-radius: 14px; }
.sidebar .sb-brand { padding: 9px 10px; }
.sidebar .sb-brand-line { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.sidebar .sb-brand-imo {
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1.15;
}
.sidebar .sb-agency-box {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 104px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-raised) 78%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 650;
  cursor: default;
}
.sidebar .sb-agency-box span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agency-switcher { position: relative; z-index: 6; min-width: 0; align-self: flex-start; margin-top: 18px; }
.agency-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 94px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-raised) 78%, transparent);
  color: var(--text-secondary);
  font: 650 9.5px/1.15 var(--font-ui);
  cursor: pointer;
}
.agency-switcher-trigger:disabled { cursor: default; opacity: 1; }
.agency-switcher-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agency-switcher-menu {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  min-width: 190px;
  max-width: 220px;
  padding: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: var(--shadow-floating);
  z-index: 80;
}
.agency-switcher-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.agency-switcher-option:hover,
.agency-switcher-option[aria-current="true"] { background: var(--bg-raised); }
.agency-switcher-option > div { min-width: 0; }
.agency-switcher-option > div > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .sb-nav { padding: 0 8px; gap: 2px; }
.sidebar .sb-section { padding: 10px 14px 4px; }
.sidebar .sb-item { border-radius: 10px; }
.sidebar .sb-user {
  position: static;
  width: 38px;
  height: 38px;
  margin: 6px 18px 12px;
  padding: 5px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: 0 10px 24px rgba(0,0,0,.14), inset 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent);
}
.sidebar .sb-user .avatar-xs { width: 26px !important; height: 26px !important; flex: 0 0 auto; }
.sidebar .sb-user-info { display: none !important; }
.sidebar .sb-settings-fab { display: none !important; }
.sidebar .sb-settings-dock {
  width: 32px;
  height: 32px;
  margin: 6px 18px 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-secondary);
}
.sidebar .sb-settings-dock:hover { color: var(--text-primary); border-color: var(--border-strong); }
.sidebar .sb-settings-tab {
  width: calc(100% - 16px);
  margin: 8px 8px 14px;
}
.sidebar .role-switch { margin-top: 8px; }
.sidebar[data-collapsed="1"] { border-radius: 22px; }
.sidebar[data-collapsed="1"] .sb-brand-row { margin: 8px; }
.sidebar[data-collapsed="1"] .sb-nav { padding: 0 10px; }
.sidebar[data-collapsed="1"] .sb-user { position: static; width: 38px; height: 38px; margin: 6px auto 12px; padding: 5px; border-radius: 50%; }
.sidebar[data-collapsed="1"] .sb-user-info { display: none !important; }
.sidebar[data-collapsed="1"] .sb-user > .sb-settings-fab { display: none !important; }
.sidebar[data-collapsed="1"] .role-switch { margin-top: 8px; }
.sidebar[data-collapsed="1"] .sb-settings-dock { margin-left: auto; margin-right: auto; }
.sidebar[data-collapsed="1"] .sb-settings-tab { width: calc(100% - 20px); margin: 8px 10px 14px; }
.sidebar[data-collapsed="1"] .sb-brand-row { flex-direction: column; }
@media (max-width: 720px) {
  .app { padding: 0; }
  .sidebar { width: 240px; height: calc(100vh - 24px); margin: 12px; border-radius: 18px; }
  .sidebar .sb-user, .sidebar[data-collapsed="1"] .sb-user { position: static; width: 38px; height: 38px; }
}

/* The retired bottom dock is deliberately kept out of layout while legacy
   markup remains available for a clean rollback.  CSS must win over [hidden]
   because the former grid rule otherwise makes those buttons visible. */
.sidebar .sb-utilities { display: none !important; }

/* Responsive rail policy: full navigation only when the workspace can retain
   at least a productive desktop width; otherwise icon dock, then hide. */
html[data-sidebar-hidden="1"] .app { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
.sidebar[data-auto-hidden="1"] { display: none; }

/* The tablet layout previously imposed a 220px app column with !important.
   That overrode the collapsed rail's grid column, leaving a full-width blank
   sidebar after its labels had disappeared. Keep one source of truth: a
   visible collapsed rail always owns the compact column at every width. */
@media (max-width: 1100px) and (min-width: 821px) {
  html[data-sidebar-collapsed="1"] .app {
    grid-template-columns: minmax(0, var(--sidebar-rail-width)) minmax(0, 1fr) !important;
  }
}

/* At narrow-but-usable widths retain the compact rail rather than activating
   the old off-canvas mobile sidebar. Below 760px Sidebar marks itself hidden. */
@media (max-width: 820px) and (min-width: 760px) {
  html:not([data-sidebar-hidden="1"]) .app,
  html:not([data-sidebar-hidden="1"])[data-sidebar-collapsed="1"] .app {
    grid-template-columns: minmax(0, var(--sidebar-rail-width)) minmax(0, 1fr) !important;
    padding: 12px 0 12px 12px;
  }
  html:not([data-sidebar-hidden="1"]) .sidebar {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    z-index: auto;
    transform: none;
    width: calc(100% - 12px);
    height: fit-content;
    max-height: calc(100vh - 24px);
    margin: 0 12px 0 0;
    border-radius: 22px;
  }
}