/* JobForcast — AI-native ops console
   Tokens drive theme, accent, density, font pairing.
*/

:root {
  /* Theme: dark default */
  --bg-0: oklch(0.16 0.012 260);
  --bg-1: oklch(0.19 0.012 260);
  --bg-2: oklch(0.22 0.014 260);
  --bg-card: oklch(0.205 0.013 260);
  --border: oklch(0.30 0.015 260);
  --border-soft: oklch(0.26 0.012 260);
  --text: oklch(0.96 0.008 260);
  --text-dim: oklch(0.72 0.012 260);
  --text-faint: oklch(0.55 0.012 260);

  /* Accent — copper default (matches RSR "copper nails / copper flashing") */
  --accent-h: 55;
  --accent: oklch(0.78 0.14 var(--accent-h));
  --accent-dim: oklch(0.55 0.09 var(--accent-h));
  --accent-ghost: oklch(0.78 0.14 var(--accent-h) / 0.12);
  --accent-fg: oklch(0.14 0.02 var(--accent-h));

  /* Semantic */
  --good:  oklch(0.78 0.12 150);
  --warn:  oklch(0.82 0.14 80);
  --bad:   oklch(0.70 0.16 25);
  --info:  oklch(0.78 0.09 230);

  /* Type */
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Density */
  --row-py: 10px;
  --row-px: 14px;
  --card-pad: 18px;
  --gap: 14px;
  --radius: 10px;
  --radius-lg: 14px;

  /* Scale */
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fs-display: 44px;
}

[data-theme="light"] {
  --bg-0: oklch(0.985 0.004 85);
  --bg-1: oklch(0.975 0.005 85);
  --bg-2: oklch(0.955 0.006 85);
  --bg-card: oklch(1 0 0);
  --border: oklch(0.88 0.008 85);
  --border-soft: oklch(0.93 0.006 85);
  --text: oklch(0.22 0.015 260);
  --text-dim: oklch(0.44 0.014 260);
  --text-faint: oklch(0.60 0.012 260);
  --accent-ghost: oklch(0.78 0.14 var(--accent-h) / 0.18);
  --accent-fg: oklch(0.20 0.03 var(--accent-h));
}

[data-density="compact"] {
  --row-py: 6px;
  --row-px: 10px;
  --card-pad: 14px;
  --gap: 10px;
  --fs-md: 12.5px;
  --fs-sm: 11.5px;
  --fs-xs: 10.5px;
  --fs-xl: 18px;
  --fs-display: 36px;
}

/* Font pairings */
[data-fontpair="serif"]  { --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif; }
[data-fontpair="mono"]   { --font-display: 'JetBrains Mono', ui-monospace, monospace; --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif; }
[data-fontpair="geist"]  { --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-ui: 'Geist', 'Inter', ui-sans-serif, sans-serif; }
[data-fontpair="system"] { --font-display: 'Iowan Old Style', Georgia, serif; --font-ui: -apple-system, 'Segoe UI', system-ui, sans-serif; }

/* ── Base ──────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
  transition: background-color .2s ease, color .2s ease;
}

button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font-family: inherit; color: inherit; background: none; border: 0; outline: none; width: 100%; }
a { color: inherit; text-decoration: none; }

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

/* ── Layout shell ──────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 236px 1fr;
  height: 100vh;
  overflow: hidden;
}
.sidebar {
  border-right: 1px solid var(--border);
  background: var(--bg-1);
  padding: 14px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  min-width: 0;
}
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) var(--bg-2);
  padding-right: 2px;
  margin-top: 4px;
}
.sidebar-scroll::-webkit-scrollbar { width: 10px; -webkit-appearance: none; }
.sidebar-scroll::-webkit-scrollbar-track { background: var(--bg-2); border-radius: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 5px; border: 2px solid var(--bg-2); }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.company-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  margin: 2px 2px 10px;
  background: var(--bg-2);
}
.cp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px var(--good);
  flex-shrink: 0;
}
.cp-name { color: var(--text); font-size: 12.5px; font-weight: 500; }
.cp-meta { color: var(--text-faint); font-size: 10.5px; margin-top: 1px; }

.nav-zone { margin-bottom: 10px; }
.nav-zone:last-child { margin-bottom: 4px; }
.ni-l { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ni-l > svg { flex-shrink: 0; opacity: 0.75; }
.nav-item.active .ni-l > svg { opacity: 1; color: var(--accent); }
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 6px 10px;
  flex-shrink: 0;
}
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent) 0%, oklch(0.55 0.14 calc(var(--accent-h) + 30)) 100%);
  display: grid; place-items: center;
  font-family: var(--font-display);
  color: var(--accent-fg);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
}
.brand-name { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.005em; }
.brand-name em { font-style: italic; color: var(--accent); }

.nav-section { font-size: 10px; color: var(--text-faint); letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 8px 2px; font-weight: 600; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-radius: 6px;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.nav-item:hover { background: var(--bg-2); color: var(--text); }
.nav-item.active { background: var(--accent-ghost); color: var(--text); }
.nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.nav-item .count {
  color: var(--text-faint); font-size: 10.5px;
  background: var(--bg-0);
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 500;
  border: 1px solid var(--border-soft);
}
.nav-item.active .count { background: var(--bg-card); color: var(--accent); border-color: var(--accent-dim); }

/* Sub-tabs under a consolidated parent (Sales, Jobs, Finance…) */
.nav-item.has-subs .ni-r { display: inline-flex; align-items: center; gap: 6px; }
.ni-caret {
  font-size: 9px;
  color: var(--text-faint);
  transition: transform 0.15s ease, color 0.15s;
  display: inline-block;
  transform: rotate(0deg);
  opacity: 0.6;
}
.ni-caret.open { transform: rotate(90deg); color: var(--accent); opacity: 1; }
.nav-subs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px 0;
  padding-left: 0;
  animation: navSubsIn 0.18s ease-out;
}
@keyframes navSubsIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 14px;
  border-radius: 5px;
  font-size: 11.5px;
  color: var(--text-faint);
  cursor: pointer;
  user-select: none;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-sub:hover { background: var(--bg-2); color: var(--text-dim); }
.nav-sub.active { color: var(--text); background: transparent; }
.nav-sub.active .nav-sub-rail { background: var(--accent); }
.nav-sub-rail {
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: var(--border-soft);
  flex-shrink: 0;
}

.sidebar-foot { margin-top: auto; padding: 10px 6px 2px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 10px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.45 0.08 260), oklch(0.35 0.06 260)); display: grid; place-items: center; font-size: 11px; color: var(--text); font-weight: 600; }

/* Main */
.main { display: flex; flex-direction: column; overflow: hidden; }

/* Top bar + query */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-0);
}
.crumbs { color: var(--text-faint); font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; }
.crumbs strong { color: var(--text); font-weight: 500; }

/* Query bar — the hero */
.query-wrap {
  flex: 1;
  max-width: 860px;
  position: relative;
}
.query-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.query-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ghost);
}
.query-bar input { font-size: var(--fs-lg); letter-spacing: -0.005em; }
.query-bar input::placeholder { color: var(--text-faint); }
.query-bar .kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--bg-0);
}
.query-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-ghost);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-ghost); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.topbar-right { display: flex; align-items: center; gap: 10px; }
.iconbtn {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--text-dim);
  border: 1px solid transparent;
}
.iconbtn:hover { background: var(--bg-2); color: var(--text); }

/* Canvas */
.canvas {
  overflow-y: auto;
  padding: 20px 22px 40px;
  background: var(--bg-0);
}

/* Card */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}
.card-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.card-title {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
  font-weight: 500;
}
.card-actions { display: flex; gap: 6px; color: var(--text-faint); font-size: var(--fs-xs); }
.card-link { color: var(--text-dim); }
.card-link:hover { color: var(--accent); }

/* Grid */
.grid {
  display: grid;
  gap: var(--gap);
}
.grid.kpis    { grid-template-columns: repeat(5, 1fr); }
.grid.main-2  { grid-template-columns: 1.6fr 1fr; margin-top: var(--gap); }
.grid.main-3  { grid-template-columns: 1fr 1fr 1fr; margin-top: var(--gap); }

/* KPI card */
.kpi { padding: 14px 16px; }
.kpi-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.kpi-value { font-family: var(--font-display); font-size: var(--fs-xl); margin-top: 6px; letter-spacing: -0.01em; font-weight: 500; }
.kpi-sub { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-dim); margin-top: 6px; }
.kpi-sub .chip { padding: 1px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; }
.chip.good { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }
.chip.warn { background: color-mix(in oklch, var(--warn) 20%, transparent); color: var(--warn); }
.chip.bad  { background: color-mix(in oklch, var(--bad)  22%, transparent); color: var(--bad); }
.chip.info { background: color-mix(in oklch, var(--info) 22%, transparent); color: var(--info); }
.chip.neutral { background: var(--bg-2); color: var(--text-dim); }

/* status dot */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.green  { background: var(--good); }
.status-dot.yellow { background: var(--warn); }
.status-dot.red    { background: var(--bad); }

/* Pipeline */
.pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.pl-col {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px;
  min-height: 300px;
  display: flex; flex-direction: column; gap: 8px;
}
.pl-col h4 { margin: 0 0 6px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); display: flex; justify-content: space-between; }
.pl-col h4 .n { color: var(--text-dim); font-weight: 500; }
.pl-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  display: flex; flex-direction: column; gap: 3px;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.pl-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.pl-card .name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.pl-card .meta { font-size: 10.5px; color: var(--text-faint); display: flex; justify-content: space-between; align-items: center; }
.pl-card .amt { font-family: var(--font-mono); color: var(--text-dim); }
.pl-card .pl-photos {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 5px 2px 4px;
  background: color-mix(in oklab, var(--bg-0) 80%, transparent);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  font-size: 10px; color: var(--text-dim);
  font-family: var(--font-mono);
  backdrop-filter: blur(4px);
}
.pl-card { position: relative; }
.pl-card:hover .pl-photos { color: var(--accent); border-color: var(--accent); }

/* Generic rows (drawer activity) */
.rows { display: flex; flex-direction: column; gap: 2px; }
.rows .row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 4px; }
.rows .row .s { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

/* Signal timeline */
.signal-tl {
  position: relative;
  padding: 4px 0 8px;
}
.sig-axis {
  position: absolute; left: 0; right: 0; top: 14px; height: 1px;
  background: var(--border);
}
.sig-row {
  display: flex; align-items: flex-start; gap: 0;
  margin-top: 4px;
}
.sig-item {
  flex: 1;
  position: relative;
  padding-top: 26px;
  min-width: 0;
}
.sig-item::before {
  content: ''; position: absolute; top: 10px; left: 50%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 4px var(--border);
}
.sig-item.high::before { background: var(--bad); }
.sig-item.med::before  { background: var(--warn); }
.sig-item.low::before  { background: var(--info); }
.sig-card {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 4px;
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.sig-card .k { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.sig-card .lbl { color: var(--text); margin-top: 3px; }
.sig-card .st { margin-top: 5px; display: flex; gap: 5px; align-items: center; }

/* list rows */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--row-py) 0;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}
.row:last-child { border-bottom: 0; }
.row .t { color: var(--text); }
.row .s { color: var(--text-faint); font-size: var(--fs-xs); }
.row .amt { font-family: var(--font-mono); color: var(--text); }
.row .rt  { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* AR aging bars */
.aging {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: center;
  padding: 6px 0;
}
.aging .bar { height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; position: relative; }
.aging .fill { height: 100%; border-radius: 4px; }
.aging .fill.b0  { background: var(--good); }
.aging .fill.b1  { background: oklch(0.78 0.1 110); }
.aging .fill.b2  { background: var(--warn); }
.aging .fill.b3  { background: var(--bad); }
.aging .lbl { font-family: var(--font-mono); color: var(--text-dim); font-size: var(--fs-xs); }
.aging .val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); }

/* Weather */
.weather { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wx {
  background: var(--bg-1);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  border: 1px solid var(--border-soft);
}
.wx.alert { border-color: var(--bad); background: color-mix(in oklch, var(--bad) 10%, var(--bg-1)); }
.wx .d { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.wx .h { font-family: var(--font-display); font-size: 18px; margin-top: 3px; }
.wx .r { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; font-family: var(--font-mono); }

/* Query answer drawer */
.query-answer {
  position: absolute;
  top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 6px var(--accent-ghost);
  border-radius: 14px;
  padding: 18px 20px;
  z-index: 30;
  animation: qa-in .22s ease-out;
}
@keyframes qa-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qa-status {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-dim);
  margin-bottom: 10px;
}
.qa-sources {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  margin-left: 6px;
}
.qa-src {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--bg-2); color: var(--text-dim);
  padding: 2px 6px; border-radius: 4px;
  opacity: 0;
}
.qa-src.on { opacity: 1; animation: srcIn .25s ease; }
@keyframes srcIn { from { transform: translateY(2px); opacity: 0; } to { opacity: 1; transform: none; } }

.qa-answer {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 14px;
}
.qa-answer .hl { color: var(--accent); font-style: italic; }
.qa-answer .num { color: var(--accent); font-style: normal; }

.qa-table {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.qa-table .hd { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; padding: 8px 12px; background: var(--bg-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.qa-table .rw { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.qa-table .rw:first-of-type { border-top: 0; }
.qa-table .rw .amt { font-family: var(--font-mono); color: var(--text); }
.qa-table .rw .days { font-family: var(--font-mono); color: var(--bad); }

.qa-actions-title { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.qa-actions { display: flex; flex-direction: column; gap: 6px; }
.qa-action {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.qa-action.done { border-color: var(--good); background: color-mix(in oklch, var(--good) 8%, var(--bg-1)); }
.qa-action .typ {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-2); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em;
}
.qa-action .typ.low { color: var(--good); background: color-mix(in oklch, var(--good) 14%, transparent); }
.qa-action .typ.high { color: var(--warn); background: color-mix(in oklch, var(--warn) 14%, transparent); }
.qa-action .d { color: var(--text); font-size: var(--fs-sm); }
.qa-action .d small { color: var(--text-faint); display: block; margin-top: 2px; font-size: 10.5px; }
.qa-action .approve {
  padding: 6px 12px; border-radius: 6px;
  background: var(--accent); color: var(--accent-fg);
  font-size: var(--fs-xs); font-weight: 600;
}
.qa-action .approve:hover { filter: brightness(1.08); }
.qa-action .skip { padding: 6px 8px; color: var(--text-faint); font-size: var(--fs-xs); }

.qa-footer {
  margin-top: 12px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--text-faint);
}
.qa-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qa-chip {
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--border-soft);
  font-size: 11.5px; color: var(--text-dim);
}
.qa-chip:hover { border-color: var(--accent); color: var(--text); }

/* Tabs */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 0 22px;
  background: var(--bg-0);
}
.tab {
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* Tweaks panel */
.tweaks {
  position: fixed; right: 18px; bottom: 18px;
  width: 276px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  z-index: 60;
}
.tweaks h5 { margin: 0 0 10px; font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.tweaks .close { position: absolute; top: 10px; right: 10px; color: var(--text-faint); }
.tweaks .grp { margin-bottom: 10px; }
.tweaks .lbl { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.tweaks .seg { display: grid; grid-auto-flow: column; gap: 4px; background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 8px; padding: 3px; }
.tweaks .seg button { padding: 6px 8px; border-radius: 6px; color: var(--text-dim); font-size: var(--fs-xs); }
.tweaks .seg button.on { background: var(--bg-card); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.tweaks .sw { display: flex; gap: 6px; }
.tweaks .sw button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; }
.tweaks .sw button.on { border-color: var(--text); }

/* === Component canvas === */
.canvas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.canvas-cell {
  background: var(--bg-1);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}
.canvas-cell > .cell-label {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
  display: flex; justify-content: space-between;
}

/* scroll custom */
.canvas::-webkit-scrollbar { width: 10px; }
.canvas::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }


/* ── Calendar view ──────────────────────────────────── */
.cal-wrap { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 180px); min-height: 720px; min-width: 0; }

.cal-header { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 6px; flex-wrap: nowrap; gap: 16px; }
.cal-header > div:first-child { min-width: 0; flex: 1; }
.cal-header > div:first-child > div:last-child { white-space: nowrap; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-divider { width: 1px; height: 22px; background: var(--border-soft); margin: 0 4px; }
.cal-today-btn {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text); font-size: 12px;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-family: var(--font-ui);
}
.cal-today-btn:hover { border-color: var(--accent); color: var(--accent); }
.cal-week-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.cal-week-stat .lbl { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.cal-week-stat .val { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }

/* AI suggestion strip */
.cal-sug-strip {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px;
}
.cal-sug-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 10px; flex-wrap: nowrap; white-space: nowrap; }
.cal-sug-head .faint { color: var(--text-faint); }
.cal-sug-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.cal-sug-scroll::-webkit-scrollbar { height: 6px; }
.cal-sug-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.cal-sug-card {
  flex: 0 0 300px;
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; transition: border-color .12s, transform .12s;
  display: flex; flex-direction: column; gap: 8px;
}
.cal-sug-card:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.cal-sug-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ghost);
  background: color-mix(in oklab, var(--accent) 6%, var(--bg-1));
}
.cal-sug-card.reschedule { border-color: color-mix(in oklab, var(--warn) 40%, var(--border-soft)); }

.cal-sug-client-name { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.25; }
.cal-sug-client-meta { font-size: 11px; color: var(--text-faint); margin-top: 1px; }

.cal-sug-slot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.cal-sug-slot > span.mono { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-sug-slot .cal-sug-conf {
  margin-left: auto; font-size: 11px; color: var(--accent);
  padding: 1px 6px; border-radius: 4px; background: var(--accent-ghost);
}

.cal-sug-scores { display: flex; flex-direction: column; gap: 3px; }
.cal-score-head { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); }
.cal-score-head span { display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.cal-score-bar { height: 3px; background: var(--bg-2); border-radius: 2px; overflow: hidden; }
.cal-score-fill { height: 100%; border-radius: 2px; transition: width .3s; }

.cal-sug-why { font-size: 11px; color: var(--text-dim); line-height: 1.45; display: flex; flex-direction: column; gap: 2px; }
.cal-sug-why-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal-sug-weather-swap { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.wx-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px; }
.wx-pill.good { background: color-mix(in oklab, var(--good) 18%, transparent); color: var(--good); }
.wx-pill.bad  { background: color-mix(in oklab, var(--bad)  22%, transparent); color: var(--bad); }
.wx-pill.warn { background: color-mix(in oklab, var(--warn) 22%, transparent); color: var(--warn); }

.cal-sug-actions { display: flex; gap: 6px; margin-top: 2px; }
.cal-btn {
  font-family: var(--font-ui); font-size: 11.5px; padding: 5px 10px; border-radius: 5px;
  cursor: pointer; border: 1px solid var(--border); background: var(--bg-1); color: var(--text-dim);
  letter-spacing: 0.01em;
}
.cal-btn:hover { border-color: var(--accent); color: var(--text); }
.cal-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 500; }
.cal-btn.primary:hover { filter: brightness(1.06); }
.cal-btn.ghost { background: transparent; }

/* Body: main grid + side panel */
.cal-body { display: grid; grid-template-columns: 1fr 300px; gap: 10px; flex: 1; min-height: 0; }
.cal-main { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }

/* Calendar grid */
.cal-grid { display: flex; flex-direction: column; height: 100%; }
.cal-grid-head {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
  position: sticky; top: 0; z-index: 2;
}
.cal-grid-corner { background: var(--bg-1); }
.cal-daycol-head {
  padding: 8px 8px 9px;
  border-left: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 4px;
}
.cal-daycol-head.today { background: color-mix(in oklab, var(--accent) 7%, var(--bg-1)); }
.cal-daycol-date { display: flex; align-items: baseline; gap: 6px; }
.cal-daycol-wkday { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.cal-daycol-head.today .cal-daycol-wkday { color: var(--accent); }
.cal-daycol-num { font-family: var(--font-display); font-size: 20px; color: var(--text); font-weight: 500; }
.cal-daycol-head.today .cal-daycol-num { color: var(--accent); }
.cal-daycol-wx { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 2px 6px; border-radius: 4px; width: fit-content; }
.cal-daycol-wx .faint { color: inherit; opacity: .65; }
.cal-daycol-wx.good { background: color-mix(in oklab, var(--good) 14%, transparent); color: var(--good); }
.cal-daycol-wx.warn { background: color-mix(in oklab, var(--warn) 18%, transparent); color: var(--warn); }
.cal-daycol-wx.bad  { background: color-mix(in oklab, var(--bad)  20%, transparent); color: var(--bad); }
.cal-daycol-cash { font-size: 11px; color: var(--good); }

.cal-grid-body {
  flex: 1;
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  overflow-y: auto;
  position: relative;
  min-height: 0;
}
.cal-hours { display: flex; flex-direction: column; background: var(--bg-1); }
.cal-hour-lbl {
  height: 52px;
  height: 52px;
  font-size: 10px; color: var(--text-faint);
  padding: 2px 6px 0 0; text-align: right;
  border-bottom: 1px dashed transparent;
  font-family: var(--font-mono);
  position: relative;
}
.cal-daycol {
  position: relative;
  border-left: 1px solid var(--border-soft);
}
.cal-daycol.today { background: color-mix(in oklab, var(--accent) 3%, transparent); }
.cal-hour-cell { height: 52px; border-bottom: 1px dashed var(--border-soft); }

.cal-event {
  position: absolute;
  border-left: 3px solid;
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 11px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-2);
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: transform .1s;
  display: flex; flex-direction: column; gap: 1px;
}
.cal-event:hover { transform: translateX(1px); filter: brightness(1.08); }
.cal-event.preview {
  border: 1.5px dashed var(--accent) !important;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent-ghost) 0 6px,
    transparent 6px 12px
  ) !important;
}
.cal-event-label {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600;
}
.cal-event-client { font-size: 12px; color: var(--text); font-weight: 500; line-height: 1.2; }
.cal-event-meta { font-size: 10px; color: var(--text-dim); }
.cal-event-sub { font-size: 10px; color: var(--text-faint); margin-top: auto; }
.cal-event-badge {
  position: absolute; bottom: 4px; right: 4px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; color: var(--accent);
  padding: 1px 5px; border-radius: 3px;
  background: color-mix(in oklab, var(--accent) 20%, var(--bg-1));
  letter-spacing: 0.05em;
}

/* Side panel */
.cal-side {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
}
.cal-side-tabs { display: flex; border-bottom: 1px solid var(--border-soft); }
.cal-side-tab {
  flex: 1; padding: 10px 12px; font-size: 12px;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-faint); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-ui);
}
.cal-side-tab.active { color: var(--text); border-bottom-color: var(--accent); background: var(--bg-1); }
.cal-side-tab:hover:not(.active) { color: var(--text-dim); }
.cal-badge {
  background: var(--accent-ghost); color: var(--accent);
  font-size: 10px; padding: 1px 6px; border-radius: 8px;
  font-family: var(--font-mono);
}

.cal-side-body { overflow-y: auto; flex: 1; padding: 12px; }
.cal-side-title { font-family: var(--font-display); font-size: 16px; color: var(--text); }
.cal-side-sub { font-size: 11px; color: var(--text-faint); margin-top: 2px; margin-bottom: 10px; }
.cal-empty {
  padding: 40px 12px; text-align: center; color: var(--text-faint); font-size: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}

.cal-queue { display: flex; flex-direction: column; gap: 8px; }
.cal-queue-card {
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 7px;
  padding: 9px 11px; cursor: grab; transition: border-color .12s;
}
.cal-queue-card:hover { border-color: var(--accent-dim); }
.cal-queue-card.high { border-left: 3px solid var(--bad); }
.cal-queue-card.normal { border-left: 3px solid var(--border); }
.cal-queue-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cal-queue-kind {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; letter-spacing: 0.14em;
  color: var(--text-faint); font-weight: 600;
}
.cal-queue-aged { font-size: 10px; color: var(--text-faint); }
.cal-queue-card.high .cal-queue-aged { color: var(--bad); }
.cal-queue-client { font-size: 12.5px; color: var(--text); font-weight: 500; }
.cal-queue-type { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.cal-queue-type .faint { color: var(--text-faint); }
.cal-queue-reason { font-size: 10.5px; color: var(--text-faint); margin-top: 5px; line-height: 1.4; font-style: italic; }

/* Selected event inspector */
.cal-detail { display: flex; flex-direction: column; gap: 6px; }
.cal-detail-tag {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid; border-radius: 4px; width: fit-content; font-weight: 600;
}
.cal-detail-title { font-family: var(--font-display); font-size: 20px; color: var(--text); margin-top: 4px; line-height: 1.15; }
.cal-detail-time { font-size: 12px; color: var(--text-dim); }
.cal-detail-sub { font-size: 12px; color: var(--text-dim); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.cal-detail-meta { font-size: 11.5px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.cal-detail-notes { margin-top: 10px; padding: 9px 10px; background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 6px; font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.cal-detail-notes-h { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }

/* ── View toggle (Month/Week) ────────────────────────────── */
.cal-view-toggle {
  display: inline-flex;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 2px;
}
.cal-view-btn {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font: 500 12px/1 var(--font-ui, inherit);
  padding: 5px 11px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cal-view-btn:hover { color: var(--text); }
.cal-view-btn.active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 0 0 1px var(--border);
}

/* ── Suggestion strip — compact variant ──────────────────── */
.cal-sug-strip.compact { padding: 8px 10px; }
.cal-sug-strip.compact .cal-sug-head { margin-bottom: 6px; font-size: 10.5px; }
.cal-sug-count {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px;
}
.cal-sug-collapse {
  background: transparent; border: none; color: var(--text-faint);
  cursor: pointer; padding: 2px 4px; border-radius: 4px;
}
.cal-sug-collapse:hover { color: var(--text); background: var(--bg-1); }
.cal-sug-strip.compact.collapsed { padding-bottom: 6px; }

.cal-sug-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cal-sug-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 4px 10px 4px 8px;
  font-size: 11.5px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s, background .12s;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
}
.cal-sug-chip:hover { border-color: var(--accent-dim); background: color-mix(in oklab, var(--accent) 4%, var(--bg-1)); }
.cal-sug-chip.active {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, var(--bg-1));
  box-shadow: 0 0 0 2px var(--accent-ghost);
}
.cal-sug-chip.reschedule { border-color: color-mix(in oklab, var(--warn) 40%, var(--border-soft)); }
.cal-sug-chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  flex: 0 0 6px;
}
.cal-sug-chip-warn {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn);
  flex: 0 0 6px;
}
.cal-sug-chip-client {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 120px;
}
.cal-sug-chip-meta { color: var(--text-faint); font-size: 10.5px; }
.cal-sug-chip-conf {
  color: var(--accent);
  font-size: 10px; font-weight: 600;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  padding: 1px 5px;
  border-radius: 8px;
}
.cal-sug-chip.active .cal-sug-chip-conf {
  background: var(--accent);
  color: var(--bg-card);
}

/* Inline detail panel when a chip is active */
.cal-sug-detail {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(200px, 1.3fr) minmax(200px, 1.6fr) auto;
  gap: 14px;
  align-items: start;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.cal-sug-detail-col { min-width: 0; }
.cal-sug-detail-scores { display: flex; flex-direction: column; gap: 6px; }
.cal-sug-detail-why { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
.cal-sug-detail-actions { display: flex; gap: 6px; align-self: center; }
@media (max-width: 1100px) {
  .cal-sug-detail {
    grid-template-columns: 1fr 1fr;
  }
  .cal-sug-detail-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ── Month grid ──────────────────────────────────────────── */
.cal-month {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 620px;
}
.cal-month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.cal-month-wkday {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  padding: 7px 10px;
  text-align: left;
  border-right: 1px solid var(--border-soft);
}
.cal-month-wkday:last-child { border-right: none; }

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  flex: 1;
  min-height: 580px;
}
.cal-month-cell {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 5px 6px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}
.cal-month-cell:nth-child(7n) { border-right: none; }
.cal-month-cell.dim { background: var(--bg-1); }
.cal-month-cell.dim .cal-month-daynum { color: var(--text-faint); opacity: 0.5; }
.cal-month-cell.today {
  background: color-mix(in oklab, var(--accent) 5%, var(--bg-card));
}
.cal-month-cell.today .cal-month-daynum.today {
  background: var(--accent);
  color: var(--bg-card);
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.cal-month-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.cal-month-daynum {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}
.cal-month-cell-meta {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 9.5px;
  color: var(--text-faint);
}
.cal-month-wx {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  border-radius: 3px;
}
.cal-month-wx.warn { background: color-mix(in oklab, var(--warn) 10%, transparent); color: var(--warn); }
.cal-month-wx.bad  { background: color-mix(in oklab, var(--bad)  10%, transparent); color: var(--bad); }
.cal-month-cash {
  color: var(--good);
  font-weight: 600;
  font-size: 9.5px;
}

.cal-month-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.cal-month-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px 2px 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 10.5px;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter 0.1s;
  border-left-width: 2px;
}
.cal-month-pill:hover { filter: brightness(1.15); }
.cal-month-pill.preview {
  border: 1px dashed var(--accent);
  border-left-width: 2px;
  background: color-mix(in oklab, var(--accent) 5%, transparent) !important;
}
.cal-month-pill-dot {
  width: 4px; height: 4px; border-radius: 50%;
  flex: 0 0 4px;
  display: none; /* using left border instead for simplicity */
}
.cal-month-pill-time {
  font-size: 9.5px;
  color: var(--text-faint);
  flex: 0 0 auto;
}
.cal-month-pill-client {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.cal-month-more {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 10px;
  text-align: left;
  padding: 1px 4px;
  cursor: pointer;
  border-radius: 3px;
  font-weight: 500;
}
.cal-month-more:hover { color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); }

/* ── Pages — shared shell ─────────────────────────────────── */
.page-wrap { display: flex; flex-direction: column; gap: 14px; padding-bottom: 30px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; padding-bottom: 4px; }
.page-eyebrow { font-size: 11px; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 4px; }
.page-title { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--text); margin: 0; letter-spacing: -0.01em; }
.page-body { display: flex; flex-direction: column; gap: 14px; }

/* Suggestion strip — same DNA as Calendar's */
.page-sug {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 6%, var(--bg-card)) 0%, var(--bg-card) 100%);
  border-radius: 10px;
  padding: 12px 14px 14px;
}
.page-sug-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.page-sug-card {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.page-sug-card-head { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.page-sug-card-title { font-weight: 600; font-size: 13px; line-height: 1.3; }
.page-sug-card-sub { font-size: 11px; color: var(--text-dim); margin-bottom: 2px; }
.page-sug-conf {
  font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-2); color: var(--text-dim); flex-shrink: 0;
}
.page-sug-conf.good { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }
.page-sug-conf.ok   { background: color-mix(in oklch, var(--accent) 18%, transparent); color: var(--accent); }
.page-sug-conf.low  { background: color-mix(in oklch, var(--warn) 18%, transparent); color: var(--warn); }
.page-sug-card-rationale { margin: 4px 0; padding-left: 16px; font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.page-sug-card-rationale li { margin-bottom: 1px; }
.page-sug-card-actions { display: flex; gap: 6px; margin-top: 4px; }

/* Buttons */
.btn { background: var(--bg-2); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; }
.btn:hover { background: var(--bg-card); border-color: var(--accent); }
.btn-primary { background: var(--accent); color: var(--bg-0); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.1); border-color: var(--accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: var(--bg-2); border-color: var(--border); }
.btn-sm { padding: 4px 9px; font-size: 11px; }

/* Pills */
.pill { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 5px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.pill:hover { color: var(--text); border-color: var(--accent); }
.pill.active { background: var(--accent); color: var(--bg-0); border-color: var(--accent); font-weight: 600; }
.pill-count { font-family: var(--font-mono); font-size: 10px; opacity: .7; }
.pill-sm { padding: 3px 9px; font-size: 11px; }

/* Stage chips — copper-graded */
.stage-chip { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.stage-0 { background: color-mix(in oklch, var(--text-dim) 20%, transparent); color: var(--text-dim); }
.stage-1 { background: color-mix(in oklch, var(--accent) 22%, transparent); color: var(--accent); }
.stage-2 { background: color-mix(in oklch, var(--accent) 32%, transparent); color: var(--accent); }
.stage-3 { background: color-mix(in oklch, oklch(0.6 0.13 220) 28%, transparent); color: oklch(0.78 0.13 220); }
.stage-4 { background: color-mix(in oklch, var(--good) 22%, transparent); color: var(--good); }

/* Badges */
.badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; }
.badge-good { background: color-mix(in oklch, var(--good) 20%, transparent); color: var(--good); }
.badge-warn { background: color-mix(in oklch, var(--warn) 22%, transparent); color: var(--warn); }
.badge-bad  { background: color-mix(in oklch, var(--bad) 22%, transparent); color: var(--bad); }

/* Generic helpers */
.dim  { color: var(--text-dim); }
.bad  { color: var(--bad); }
.warn { color: var(--warn); }
.good { color: var(--good); }
.sm   { font-size: 11px; }
.r    { text-align: right; }

/* ── JOBS table ───────────────────────────────────────────── */
.jobs-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.jobs-filters { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.jobs-search { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; min-width: 220px; }
.jobs-search input { background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 12px; flex: 1; }
.jobs-select { background: var(--bg-1); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 12px; }
.jobs-table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.jobs-row { display: grid; grid-template-columns: 2.4fr 1fr 1fr 0.8fr 0.8fr 1fr 1fr; padding: 10px 14px; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; font-size: 13px; }
.jobs-row:last-child { border-bottom: 0; }
.jobs-row:not(.jobs-head):hover { background: var(--bg-1); }
.jobs-row.jobs-head { background: var(--bg-1); cursor: default; font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); text-transform: uppercase; padding: 8px 14px; }
.jobs-cell-job-name { font-weight: 600; }
.jobs-cell-job-addr { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.jobs-foot { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; font-size: 12px; }
.jobs-foot-stats { display: flex; gap: 22px; }

/* ── AR ───────────────────────────────────────────────────── */
.ar-summary { display: grid; grid-template-columns: 280px 1fr; gap: 12px; }
.ar-summary-total { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; }
.ar-summary-label { font-size: 11px; color: var(--text-faint); letter-spacing: 0.06em; }
.ar-summary-value { font-family: var(--font-display); font-size: 36px; font-weight: 500; color: var(--warn); margin: 4px 0; }
.ar-summary-sub { font-size: 12px; color: var(--text-dim); }
.ar-buckets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ar-bucket { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.ar-bucket-head { font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); text-transform: uppercase; }
.ar-bucket-value { font-size: 20px; margin: 4px 0 8px; }
.ar-bucket-bar { height: 4px; background: var(--bg-2); border-radius: 2px; overflow: hidden; }
.ar-bucket-fill { height: 100%; background: var(--text-dim); }
.bucket-good .ar-bucket-fill { background: var(--good); }
.bucket-ok .ar-bucket-fill   { background: var(--accent); }
.bucket-warn .ar-bucket-fill { background: var(--warn); }
.bucket-bad .ar-bucket-fill  { background: var(--bad); }
.bucket-bad .ar-bucket-value, .bucket-warn .ar-bucket-value { color: var(--warn); }

.ar-split { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 12px; align-items: stretch; }
.ar-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ar-list-head, .ar-list-row { display: grid; grid-template-columns: 1.6fr 0.8fr 0.6fr 1fr; gap: 10px; padding: 10px 14px; align-items: center; }
.ar-list-head { background: var(--bg-1); font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); text-transform: uppercase; }
.ar-list-row { border-top: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.ar-list-row:hover { background: var(--bg-1); }
.ar-list-row.active { background: color-mix(in oklch, var(--accent) 12%, var(--bg-card)); }

.ar-detail { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.ar-detail-head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.ar-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; font-size: 13px; }
.ar-line-items { background: var(--bg-1); border-radius: 6px; padding: 10px 14px; }
.ar-line { display: grid; grid-template-columns: 2fr 1fr 0.8fr; gap: 12px; padding: 6px 0; font-size: 13px; }
.ar-line-total { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 8px; }
.ar-timeline { font-size: 13px; }
.ar-timeline-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.ar-timeline-row:last-child { border-bottom: 0; }
.ar-timeline-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ar-actions { display: flex; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--border); }

/* ── Messages ─────────────────────────────────────────────── */
.msg-split { display: grid; grid-template-columns: 380px 1fr; gap: 12px; min-height: 600px; }
.msg-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.msg-list-filters { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border); background: var(--bg-1); flex-wrap: wrap; }
.msg-filter { background: transparent; border: 0; color: var(--text-dim); padding: 4px 10px; border-radius: 4px; font: inherit; font-size: 11px; cursor: pointer; }
.msg-filter:hover { color: var(--text); }
.msg-filter.active { background: var(--accent); color: var(--bg-0); font-weight: 600; }
.msg-thread { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.msg-thread:hover { background: var(--bg-1); }
.msg-thread.active { background: color-mix(in oklch, var(--accent) 12%, var(--bg-card)); }
.msg-thread.unread { box-shadow: inset 3px 0 0 var(--accent); }
.msg-thread-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; }
.msg-thread-preview { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.msg-thread-foot { display: flex; justify-content: space-between; }
.msg-channel { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 700; letter-spacing: 0.06em; }
.msg-channel-sms { background: color-mix(in oklch, var(--good) 22%, transparent); color: var(--good); }
.msg-channel-email { background: color-mix(in oklch, oklch(0.6 0.13 220) 22%, transparent); color: oklch(0.78 0.13 220); }
.msg-unread-dot { background: var(--accent); color: var(--bg-0); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }

.msg-pane { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; }
.msg-pane-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.msg-convo { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 480px; }
.msg-bubble { max-width: 70%; padding: 10px 14px; border-radius: 12px; }
.msg-bubble-them { background: var(--bg-1); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-bubble-us   { background: var(--accent); color: var(--bg-0); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-bubble-text { font-size: 13px; line-height: 1.4; }
.msg-bubble-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 10px; opacity: .8; }
.msg-bubble-us .msg-bubble-meta { color: var(--bg-0); opacity: .7; }
.msg-via { display: inline-flex; align-items: center; gap: 3px; font-style: italic; }
.msg-composer { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg-1); border-radius: 0 0 8px 8px; }
.msg-composer textarea { width: 100%; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 13px; resize: none; min-height: 60px; outline: 0; }
.msg-composer-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px dashed var(--border); }

/* ── Signals ──────────────────────────────────────────────── */
.sig-toolbar { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.sig-stats { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.sig-stat { display: inline-flex; align-items: center; gap: 6px; }
.sig-stat strong { font-family: var(--font-mono); }
.sig-dot { width: 8px; height: 8px; border-radius: 50%; }
.sig-dot.bad { background: var(--bad); } .sig-dot.warn { background: var(--warn); } .sig-dot.low { background: var(--text-dim); }
.sig-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.sig-feed { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sig-feed .sig-row { display: grid; grid-template-columns: 32px 1fr 100px 70px auto; gap: 12px; padding: 12px 16px; align-items: center; border-bottom: 1px solid var(--border); margin-top: 0; }
.sig-feed .sig-row:last-child { border-bottom: 0; }
.sig-feed .sig-row.sev-high { box-shadow: inset 3px 0 0 var(--bad); }
.sig-feed .sig-row.sev-med  { box-shadow: inset 3px 0 0 var(--warn); }
.sig-feed .sig-row.sev-low  { box-shadow: inset 3px 0 0 var(--text-dim); }
.sig-row-icon { color: var(--text-dim); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--bg-1); border-radius: 6px; }
.sig-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.sig-row-kind { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); letter-spacing: 0.05em; text-transform: uppercase; }
.sig-row-conf { color: var(--text-dim); font-size: 10px; }
.sig-row-label { font-size: 13px; }
.sig-status { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.sig-status-pending_approval { background: color-mix(in oklch, var(--warn) 22%, transparent); color: var(--warn); }
.sig-status-autopiloted     { background: color-mix(in oklch, var(--accent) 22%, transparent); color: var(--accent); }
.sig-status-complete         { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }
.sig-status-awaiting_hours   { background: var(--bg-2); color: var(--text-dim); }
.sig-row-buttons { display: flex; gap: 4px; grid-column: 1 / -1; padding-top: 6px; padding-left: 44px; }

/* ── Proposals ────────────────────────────────────────────── */
.prop-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.prop-summary-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; }
.prop-summary-value { font-family: var(--font-display); font-size: 32px; font-weight: 500; margin: 4px 0; }
.prop-summary-value.warn { color: var(--warn); }
.prop-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-1); border-radius: 8px 8px 0 0; font-size: 12px; font-weight: 600; }
.prop-list-wrap, .prop-templates { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.prop-list { display: flex; flex-direction: column; }
.prop-card { padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.prop-card:last-child { border-bottom: 0; }
.prop-card:hover { background: var(--bg-1); }
.prop-card.status-stuck { box-shadow: inset 3px 0 0 var(--warn); }
.prop-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.prop-card-client { font-weight: 600; font-size: 14px; }
.prop-card-amount { font-size: 18px; }
.prop-meter-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.prop-meter-bar { height: 4px; background: var(--bg-2); border-radius: 2px; position: relative; overflow: visible; }
.prop-meter-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.prop-meter-marker { position: absolute; top: -3px; height: 10px; width: 1px; background: var(--bad); }
.prop-card-stats { display: flex; gap: 16px; font-size: 11px; flex-wrap: wrap; }
.prop-card-actions { display: flex; gap: 6px; }
.status-pill { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.status-pill.status-stuck { background: color-mix(in oklch, var(--warn) 22%, transparent); color: var(--warn); }
.status-pill.status-aging { background: color-mix(in oklch, var(--accent) 22%, transparent); color: var(--accent); }
.status-pill.status-fresh { background: color-mix(in oklch, var(--good) 18%, transparent); color: var(--good); }
.prop-template { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.prop-template:last-child { border-bottom: 0; }

/* ── Autopilot ────────────────────────────────────────────── */
.auto-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.auto-summary-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; }
.auto-summary-value { font-family: var(--font-display); font-size: 32px; font-weight: 500; margin: 4px 0; }
.auto-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.auto-rules-wrap, .auto-runs-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.auto-rules { display: flex; flex-direction: column; }
.auto-rule { display: grid; grid-template-columns: 50px 1fr 220px; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); align-items: center; }
.auto-rule:last-child { border-bottom: 0; }
.auto-rule-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.auto-rule-name { font-weight: 600; font-size: 13px; }
.auto-rule-trigger { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.auto-rule-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 11px; }
.auto-rule-stats .mono { font-size: 14px; color: var(--text); }
.toggle { width: 36px; height: 20px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; position: relative; cursor: pointer; padding: 0; transition: background 0.15s; }
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle-knob { position: absolute; left: 2px; top: 1px; width: 14px; height: 14px; background: var(--text); border-radius: 50%; transition: left 0.15s; }
.toggle.on .toggle-knob { left: 18px; background: var(--bg-0); }

.auto-runs { display: flex; flex-direction: column; }
.auto-run { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.auto-run:last-child { border-bottom: 0; }
.auto-run-main { flex: 1; min-width: 0; }
.auto-run-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.auto-run-dot.sent    { background: var(--good); }
.auto-run-dot.pending { background: var(--warn); }
.auto-run-dot.failed  { background: var(--bad); }

/* ── Edges ────────────────────────────────────────────────── */
.edges-split { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 12px; }
.edges-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.edges-list-head, .edges-row { display: grid; grid-template-columns: 1fr 60px 70px; gap: 10px; padding: 11px 16px; align-items: center; }
.edges-list-head { background: var(--bg-1); font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); text-transform: uppercase; }
.edges-row { border-top: 1px solid var(--border); cursor: pointer; }
.edges-row:hover { background: var(--bg-1); }
.edges-row.active { background: color-mix(in oklch, var(--accent) 12%, var(--bg-card)); box-shadow: inset 3px 0 0 var(--accent); }

.edges-detail { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.edges-section { display: flex; flex-direction: column; gap: 4px; }
.edges-trigger { background: var(--bg-1); padding: 10px 14px; border-radius: 6px; font-size: 12px; color: var(--accent); }
.edges-threshold { display: flex; gap: 16px; align-items: center; padding: 14px 18px; background: var(--bg-1); border-radius: 6px; margin-bottom: 6px; }
.edges-threshold input[type=range] { flex: 1; accent-color: var(--accent); }
.edges-threshold-value { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 80px; }
.edges-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 12px 16px; background: var(--bg-1); border-radius: 6px; }
.edges-rule-link { color: var(--accent); cursor: pointer; padding: 4px 0; font-size: 12px; }
.edges-rule-link:hover { text-decoration: underline; }


/* ── Projects / Photo albums (CompanyCam-style) ───────────────── */
.album-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px;
  min-width: 260px; color: var(--text-dim);
}
.album-search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font: inherit; color: var(--text); font-size: 13px;
}
.album-search input::placeholder { color: var(--text-faint); }

.album-sort {
  padding: 8px 12px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13px;
  cursor: pointer;
}

.album-tab {
  padding: 10px 14px; background: transparent; border: 0;
  color: var(--text-dim); font: inherit; font-size: 13px;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.album-tab:hover { color: var(--text); }
.album-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.album-tab-count {
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  background: var(--bg-1); color: var(--text-faint);
  font-family: var(--font-mono);
}
.album-tab.active .album-tab-count { background: color-mix(in oklch, var(--accent) 18%, transparent); color: var(--accent); }

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
}

.album-card {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.album-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-soft);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.35);
}

.album-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-1);
  overflow: hidden;
}
.album-stage {
  position: absolute; top: 10px; left: 10px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.album-count {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 4px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 11px; font-family: var(--font-mono);
  backdrop-filter: blur(6px);
}

.album-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px 3px 0;
  background: var(--bg-card);
}
.album-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-1);
  position: relative;
}
.album-thumb.album-more {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 13px;
  font-family: var(--font-mono);
  background: var(--bg-1);
  border: 1px dashed var(--border);
}
.album-thumb.album-empty {
  background: var(--bg-1);
  opacity: 0.4;
}

.album-meta { padding: 14px 16px 16px; }
.album-name {
  font-size: 15px; font-weight: 600;
  color: var(--text); letter-spacing: -0.005em;
  margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.album-addr {
  font-size: 12px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 8px;
}
.album-foot {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-faint);
}
.album-type {
  color: var(--text-dim);
  padding: 2px 6px; border-radius: 3px;
  background: var(--bg-1);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.album-dot { opacity: 0.6; }
.album-last { font-family: var(--font-mono); }


/* ═══════════════════════════════════════════════════════════
   Metrics page — command center
   ═══════════════════════════════════════════════════════════ */
.mx-page {
  padding: 4px 0 40px;
  color: var(--text);
}

/* Profit formula bar */
.mx-formula {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 14px;
}
.mx-formula-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.mx-formula-eq {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-family: var(--font-mono);
}
.mx-formula .mx-num {
  font-size: 22px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mx-formula .mx-lbl {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-ui);
}
.mx-formula .mx-op {
  font-size: 20px;
  color: var(--text-faint);
  margin: 0 4px;
  font-weight: 300;
}
.mx-formula .mx-result {
  font-size: 30px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin-left: 8px;
}

/* Hormozi strip — 8 metric cards */
.mx-hormozi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (min-width: 1600px) {
  .mx-hormozi { grid-template-columns: repeat(8, 1fr); }
}
.mx-hcard {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 168px;
  position: relative;
}
.mx-hcard.mx-h-red    { border-left: 2px solid var(--bad); }
.mx-hcard.mx-h-yellow { border-left: 2px solid var(--warn); }
.mx-hcard.mx-h-green  { border-left: 2px solid var(--good); }
.mx-h-head {
  display: flex; align-items: center; gap: 7px;
}
.mx-h-key {
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mx-h-value {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.mx-h-desc {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
  flex: 1;
}
.mx-h-action {
  background: var(--bg-1);
  border-top: 1px solid var(--border-soft);
  margin: 8px -13px -12px;
  padding: 8px 13px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.mx-h-action-label {
  font-size: 9.5px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 3px;
}
.mx-h-action-text {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Cockpit three-column */
.mx-cockpit {
  display: grid;
  grid-template-columns: minmax(330px, 0.95fr) minmax(460px, 1.3fr) minmax(330px, 0.95fr);
  gap: 14px;
  align-items: start;
}
.mx-cockpit.mx-cockpit-2col {
  grid-template-columns: minmax(460px, 1.5fr) minmax(380px, 1fr);
}
.mx-col { display: flex; flex-direction: column; gap: 12px; }

/* Generic card — metrics-scoped so it doesn't collide */
.mx-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px;
}
.mx-card-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.mx-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}
.mx-eyebrow-sm {
  font-size: 9.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 6px;
}
.mx-link {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}
.mx-goal {
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
}

/* One thing */
.mx-onething {
  background: linear-gradient(180deg, var(--accent-ghost) 0%, var(--bg-card) 60%);
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
}
.mx-onething-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.mx-onething-why {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 12px;
}
.mx-onething-cta { display: flex; flex-direction: column; gap: 6px; }
.mx-onething-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* Buttons (mx-scoped) */
.mx-btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-ui);
}
.mx-btn-primary:hover { filter: brightness(1.08); }
.mx-btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
}
.mx-btn-ghost:hover { color: var(--text); border-color: var(--text-faint); }

/* Toggle */
.mx-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-dim); cursor: pointer;
}
.mx-toggle input { accent-color: var(--accent); }

/* Inbox */
.mx-inbox-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.mx-inbox-tab {
  background: none; border: none;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--text-faint);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-ui);
}
.mx-inbox-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.mx-inbox-list { display: flex; flex-direction: column; gap: 10px; }
.mx-inbox-item {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 11px;
}
.mx-inbox-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.mx-inbox-from {
  font-size: 12.5px; color: var(--text); font-weight: 500;
}
.mx-inbox-meta {
  font-size: 10.5px; color: var(--text-faint);
  font-family: var(--font-mono);
}
.mx-inbox-preview {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.4;
  margin-bottom: 8px;
}
.mx-inbox-draft {
  background: var(--bg-2);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.mx-inbox-draft-lbl {
  display: flex; align-items: center; gap: 4px;
  font-size: 9.5px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; margin-bottom: 4px;
}
.mx-inbox-draft-text {
  font-size: 12px; color: var(--text); line-height: 1.45;
}
.mx-inbox-btns { display: flex; gap: 6px; }

/* Action queue */
.mx-action-list { display: flex; flex-direction: column; gap: 10px; }
.mx-action-item {
  background: var(--bg-1);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 10px 11px;
  display: flex; flex-direction: column; gap: 5px;
}
.mx-action-head {
  display: flex; align-items: center; justify-content: space-between;
}
.mx-action-kind {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
}
.mx-risk-low  { color: var(--good); background: color-mix(in oklch, var(--good) 14%, transparent); }
.mx-risk-med  { color: var(--warn); background: color-mix(in oklch, var(--warn) 14%, transparent); }
.mx-risk-high { color: var(--bad);  background: color-mix(in oklch, var(--bad)  14%, transparent); }
.mx-action-conf {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}
.mx-action-desc {
  font-size: 13px; color: var(--text); line-height: 1.35;
}
.mx-action-why, .mx-action-goal {
  font-size: 11px; color: var(--text-dim); line-height: 1.4;
}

/* Pipeline */
.mx-pipe {
  display: flex; flex-direction: column; gap: 14px;
}
.mx-month {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.mx-month-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-soft);
}
.mx-month-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.mx-month-stats { display: flex; gap: 18px; }
.mx-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.mx-stat-v {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.mx-stat-v-lg {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mx-stat-l {
  font-size: 9.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mx-month-jobs { display: flex; flex-direction: column; }
.mx-job {
  display: grid;
  grid-template-columns: 1fr 110px 70px 60px;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.mx-job:last-child { border-bottom: none; }
.mx-job:hover { background: var(--bg-1); }
.mx-job-client {
  font-size: 12.5px; color: var(--text); font-weight: 500;
  margin-bottom: 1px;
}
.mx-job-addr {
  font-size: 11px; color: var(--text-faint);
}
.mx-job-price {
  font-family: var(--font-mono);
  font-size: 13px; color: var(--text); text-align: right;
  font-weight: 500;
}
.mx-job-date {
  font-size: 11.5px; color: var(--text-dim); text-align: right;
  font-family: var(--font-mono);
}
.mx-job-wx {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  justify-content: flex-end;
}

/* Cash */
.mx-cash.mx-cash-red { border-left: 2px solid var(--bad); }
.mx-cash.mx-cash-yellow { border-left: 2px solid var(--warn); }
.mx-cash.mx-cash-green { border-left: 2px solid var(--good); }
.mx-cash-main { padding: 4px 0 14px; border-bottom: 1px solid var(--border-soft); margin-bottom: 12px; }
.mx-cash-label {
  font-size: 10.5px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.mx-cash-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.mx-cash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.mx-cash-cell-l {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.mx-cash-cell-v {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

/* Engine cards */
.mx-engine-head { margin-bottom: 0; }
.mx-engine-body { padding-top: 12px; }
.mx-engine-rows { display: flex; flex-direction: column; gap: 10px; }
.mx-engine-row {
  display: flex; flex-direction: column; gap: 5px;
}
.mx-engine-row-compact {
  flex-direction: row; align-items: center; justify-content: space-between;
  padding: 4px 0;
}
.mx-engine-row-name {
  font-size: 12px; color: var(--text); font-weight: 500;
}
.mx-engine-row-stats {
  display: flex; gap: 14px;
}
.mx-engine-stat {
  display: flex; gap: 6px; align-items: baseline;
}
.mx-engine-stat .mx-stat-l { font-size: 9.5px; }
.mx-engine-stat .mx-stat-v { font-size: 11.5px; }
.mx-engine-row-bar {
  height: 3px; background: var(--bg-2); border-radius: 2px;
}
.mx-engine-row-bar-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
}
.mx-engine-sub {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.mx-engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.mx-engine.mx-engine-red    { border-left: 2px solid var(--bad); }
.mx-engine.mx-engine-yellow { border-left: 2px solid var(--warn); }
.mx-engine.mx-engine-green  { border-left: 2px solid var(--good); }

/* Responsive */
@media (max-width: 1280px) {
  .mx-cockpit { grid-template-columns: 1fr; }
  .mx-hormozi { grid-template-columns: repeat(2, 1fr); }
}

.mx-pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
  animation: mx-pulse 1.2s ease-in-out infinite;
}
@keyframes mx-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.1); }
}


/* ═══════════════════════════════════════════════════════════
   Agents page
   ═══════════════════════════════════════════════════════════ */
.ag-intro {
  padding: 6px 4px 18px;
  margin-bottom: 6px;
}
.ag-intro-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 4px;
}
.ag-intro-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 4px;
  max-width: 640px;
}

/* Goal grid */
.ag-goals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1280px) {
  .ag-goals-grid { grid-template-columns: repeat(2, 1fr); }
}
.ag-goal {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 160px;
  position: relative;
}
.ag-goal.ag-goal-red    { border-left: 2px solid var(--bad); }
.ag-goal.ag-goal-yellow { border-left: 2px solid var(--warn); }
.ag-goal.ag-goal-green  { border-left: 2px solid var(--good); }

.ag-goal-head {
  display: flex; align-items: center; justify-content: space-between;
}
.ag-goal-horizon {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
}
.ag-goal-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ag-goal-vals {
  display: flex; align-items: baseline; gap: 8px;
}
.ag-goal-current {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-dim);
}
.ag-goal-arrow { color: var(--text-faint); font-size: 14px; }
.ag-goal-target {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text);
  font-weight: 500;
}
.ag-goal-bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 2px;
  margin-top: auto;
}
.ag-goal-bar-fill {
  height: 100%; border-radius: 2px;
  transition: width 0.4s ease;
}
.ag-goal-foot {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.ag-goal-pct {
  font-size: 11px;
  color: var(--text-dim);
}
.ag-goal-linked {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.ag-chip {
  font-size: 10px;
  color: var(--accent);
  background: var(--accent-ghost);
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Main 2-col */
.ag-main-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) {
  .ag-main-grid { grid-template-columns: 1fr; }
}

/* Activity feed */
.ag-feed {
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
}
.ag-feed-item {
  display: grid;
  grid-template-columns: 80px 10px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.ag-feed-item:last-child { border-bottom: none; }
.ag-feed-time {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  padding-top: 2px;
}
.ag-feed-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 15%, transparent);
}
.ag-feed-body {
  display: flex; flex-direction: column; gap: 3px;
}
.ag-feed-head {
  display: flex; align-items: center; gap: 8px;
}
.ag-feed-agent {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: var(--font-mono);
}
.ag-feed-status {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}
.ag-st-wait { color: var(--warn); background: color-mix(in oklch, var(--warn) 14%, transparent); }
.ag-st-adv  { color: var(--info); background: color-mix(in oklch, var(--info) 14%, transparent); }
.ag-st-auto { color: var(--good); background: color-mix(in oklch, var(--good) 14%, transparent); }
.ag-st-bad  { color: var(--bad);  background: color-mix(in oklch, var(--bad)  14%, transparent); }
.ag-feed-action {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
}

/* Diagnostics */
.ag-diag-summary {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 10px;
}
.ag-diag-count {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  font-family: var(--font-mono);
}
.ag-diag-ok   { color: var(--good); }
.ag-diag-warn { color: var(--warn); }
.ag-diag-err  { color: var(--bad); }
.ag-diag-ts   { margin-left: auto; color: var(--text-faint); font-size: 10.5px; font-family: var(--font-mono); }

.ag-diag-list { display: flex; flex-direction: column; gap: 2px; }
.ag-diag-item {
  display: grid;
  grid-template-columns: 14px 130px 1fr;
  gap: 10px;
  padding: 8px 0;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
}
.ag-diag-item:last-child { border-bottom: none; }
.ag-diag-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
.ag-diag-detail {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}


/* ═══════════════════════════════════════════════════════════
   Pipeline pages (Jobs Pipeline + Sales Pipeline)
   ═══════════════════════════════════════════════════════════ */

/* Summary strip */
.pl-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.pl-summary-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.pl-summary-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.pl-summary-value {
  font-family: var(--font-mono);
  font-size: 26px;
  color: var(--text);
  line-height: 1.15;
  font-weight: 500;
}
.pl-summary-value.warn { color: var(--warn); }
.pl-summary-sub {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* Board grid */
.pl-board {
  display: grid;
  grid-auto-columns: minmax(240px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: start;
}

/* Columns */
.pl-col-v2 {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  display: flex; flex-direction: column;
  min-height: 320px;
}
.pl-col-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  border-radius: 6px 6px 0 0;
}
.pl-col-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.pl-col-stats {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.pl-col-n {
  color: var(--text-dim);
  background: var(--bg-2);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10.5px;
}
.pl-col-sum {
  color: var(--text-faint);
  font-size: 10.5px;
}

.pl-col-body {
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.pl-col-empty {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  padding: 24px 8px;
  font-style: italic;
}

/* Cards */
.pl-card-v2 {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 8px 10px 8px 12px;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
  display: flex; flex-direction: column; gap: 5px;
}
.pl-card-v2:hover {
  background: var(--bg-2);
  border-color: var(--border);
}
.pl-card-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.pl-card-name {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.pl-card-amt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}
.pl-card-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
  flex-wrap: wrap;
}
.pl-card-type {
  color: var(--accent);
  background: var(--accent-ghost);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.pl-card-addr {
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-card-foot {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  padding-top: 2px;
  border-top: 1px solid var(--border-soft);
  margin-top: 2px;
  flex-wrap: wrap;
}
.pl-card-age        { color: var(--text-dim); }
.pl-card-age.warn   { color: var(--warn); font-weight: 600; }
.pl-card-sched      { color: var(--info); }
.pl-card-bal        { color: var(--bad); }
.pl-card-photos {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--text-faint);
  margin-left: auto;
}

@media (max-width: 1100px) {
  .pl-summary { grid-template-columns: repeat(2, 1fr); }
}


/* ── Cash crisis banner (sticky, above canvas) ── */
.crisis-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 22px;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--bad) 28%, var(--bg-0)) 0%,
    color-mix(in oklch, var(--bad) 14%, var(--bg-0)) 60%,
    var(--bg-0) 100%);
  border-bottom: 1px solid color-mix(in oklch, var(--bad) 40%, var(--border));
  position: relative;
  overflow: hidden;
  animation: crisis-enter 320ms cubic-bezier(.2,.7,.2,1);
  min-height: 52px;
}
@keyframes crisis-enter { from { transform: translateY(-6px); opacity: 0 } to { transform: none; opacity: 1 } }
.cb-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bad);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--bad) 50%, transparent);
  animation: cb-pulse 1.6s infinite;
}
@keyframes cb-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--bad) 55%, transparent); }
  70% { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.cb-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cb-title {
  display: flex; align-items: center; gap: 7px;
  color: var(--bad);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  flex-shrink: 0;
}
.cb-stats {
  font-size: 11.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
}
.cb-stats em { color: var(--text); font-style: normal; font-weight: 600; font-family: var(--font-mono); }
.cb-sep { opacity: 0.3; }
.cb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cb-cta {
  background: var(--bad);
  color: oklch(0.98 0.005 25);
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter .12s;
  white-space: nowrap;
}
.cb-cta:hover { filter: brightness(1.1); }
.cb-ghost {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: grid; place-items: center;
  color: var(--text-faint);
  border: 1px solid var(--border);
  background: var(--bg-1);
}
.cb-ghost:hover { color: var(--text); background: var(--bg-2); }

/* ── Stub page — wired route, content TBD ── */
.stub-page {
  max-width: 780px;
  margin: 80px auto;
  padding: 0 20px;
}
.stub-hero {
  padding: 40px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.stub-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; width: 240px; height: 240px;
  background: radial-gradient(circle at 70% 30%, var(--accent-ghost), transparent 60%);
  pointer-events: none;
}
.stub-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-ghost);
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: 600;
  position: relative;
}
.stub-title {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.1;
  margin: 14px 0 4px;
  letter-spacing: -0.015em;
  color: var(--text);
  font-weight: 500;
  position: relative;
}
.stub-sub {
  color: var(--accent);
  font-size: 15px;
  margin-bottom: 18px;
  position: relative;
}
.stub-desc {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 22px 0;
  position: relative;
}
.stub-links { position: relative; border-top: 1px solid var(--border-soft); padding-top: 16px; }
.stub-meta { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); letter-spacing: 0.05em; }

/* ── Compact view tabs (only on cockpit/metrics/agents) ── */
.tabs-compact {
  display: flex;
  gap: 2px;
  padding: 8px 22px 0;
  min-height: 0;
}
.tabs-compact:empty { display: none; }
.tabs-compact .tab {
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--text-faint);
  border-radius: 7px 7px 0 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tabs-compact .tab:hover { color: var(--text-dim); }
.tabs-compact .tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  background: var(--bg-1);
}


/* ── Hormozi tiered strip (Metrics page, redesigned) ── */
.mx-hormozi-tiered { display: flex; flex-direction: column; gap: 18px; margin: 16px 0 22px; }

.mx-hz-tier-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 10px;
}
.mx-hz-tier-dot {
  width: 7px; height: 7px; border-radius: 50%;
}
.mx-hz-tier-dot.red   { background: var(--bad);  box-shadow: 0 0 6px var(--bad); }
.mx-hz-tier-dot.green { background: var(--good); }
.mx-hz-tier-count {
  margin-left: 2px;
  background: var(--bg-2);
  color: var(--text-dim);
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10.5px;
  letter-spacing: 0;
  font-weight: 500;
  border: 1px solid var(--border-soft);
}

/* Critical: 2-col grid, full cards */
.mx-hz-critical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
/* Keep existing .mx-hcard / .mx-h-* styles — they already handle the card look */
.mx-h-action-btn {
  margin-top: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  transition: filter .12s;
  width: 100%;
  justify-content: center;
}
.mx-h-action-btn:hover { filter: brightness(1.08); }

.mx-h-red .mx-h-action-btn { background: var(--bad); color: oklch(0.98 0.005 25); }
.mx-h-yellow .mx-h-action-btn { background: var(--warn); color: oklch(0.18 0.02 80); }

/* ── Company Health (unified) ───────────────────────────── */
.mx-ch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 10px;
}
.mx-ch-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.mx-ch-unit {
  font-size: 11px;
  color: var(--fg-2);
  margin-left: 8px;
  font-weight: 400;
}
.mx-ch-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-2);
}
.mx-ch-summary strong { color: var(--bad); font-weight: 600; }

.mx-ch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 1400px) { .mx-ch-grid { grid-template-columns: repeat(2, 1fr); } }

.mx-ch-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: border-color 0.15s;
}
.mx-ch-card.mx-h-red    { border-top: 2px solid var(--bad); }
.mx-ch-card.mx-h-yellow { border-top: 2px solid var(--warn); }
.mx-ch-card.mx-h-green  { border-top: 2px solid var(--good); }
.mx-ch-card:hover { border-color: var(--border); }

.mx-ch-card-h {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mx-ch-key {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx-ch-status {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mx-ch-status-red    { background: color-mix(in oklch, var(--bad) 14%, transparent);  color: var(--bad); }
.mx-ch-status-yellow { background: color-mix(in oklch, var(--warn) 16%, transparent); color: var(--warn); }
.mx-ch-status-green  { background: color-mix(in oklch, var(--good) 14%, transparent); color: var(--good); }

.mx-ch-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1;
}
.mx-ch-defn {
  font-size: 10.5px;
  color: var(--fg-3);
  line-height: 1.4;
}

.mx-ch-diag {
  background: var(--bg);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mx-ch-diag-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.mx-ch-diag-text {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--fg);
  text-wrap: pretty;
}
.mx-ch-diag-cites {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}
.mx-ch-cite {
  font-size: 9px;
  font-family: ui-monospace, 'SF Mono', monospace;
  color: var(--fg-3);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: 3px;
  padding: 1px 4px;
}

.mx-ch-action {
  background: color-mix(in oklch, var(--bad) 6%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--bad) 20%, var(--border));
  border-radius: 6px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mx-h-yellow .mx-ch-action {
  background: color-mix(in oklch, var(--warn) 7%, var(--bg-1));
  border-color: color-mix(in oklch, var(--warn) 25%, var(--border));
}
.mx-ch-action-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bad);
}
.mx-h-yellow .mx-ch-action-label { color: var(--warn); }
.mx-ch-action-text {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--fg);
  text-wrap: pretty;
}
.mx-ch-action-btn {
  align-self: flex-start;
  margin-top: 2px;
  background: var(--bad);
  color: oklch(0.98 0.005 25);
  border: none;
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.1s;
}
.mx-ch-action-btn:hover { filter: brightness(1.08); }
.mx-h-yellow .mx-ch-action-btn { background: var(--warn); color: oklch(0.18 0.02 80); }

/* Healthy: compact row — one-line chips */
.mx-hz-healthy-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.mx-hz-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  cursor: default;
  transition: border-color .12s, background .12s;
}
.mx-hz-mini:hover { border-color: var(--border); background: var(--bg-1); }
.mx-hz-mini-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-weight: 600;
}
.mx-hz-mini-value {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
}


/* ═══ Workflow page ═══════════════════════════════════════ */
.wf-page { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px; }
.wf-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.wf-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.wf-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.wf-toolbar { display: flex; gap: 8px; align-items: center; }
.wf-filter-seg, .wf-zoom { display: flex; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 7px; overflow: hidden; }
.wf-filter-seg button, .wf-zoom button { padding: 5px 11px; font-size: 11.5px; color: var(--text-dim); background: transparent; border: none; cursor: pointer; }
.wf-filter-seg button.on, .wf-zoom button:hover { background: var(--bg-1); color: var(--text); }
.wf-zoom span { padding: 5px 8px; font-size: 11px; color: var(--text-dim); font-family: var(--font-ui); }
.wf-btn-ghost { padding: 5px 12px; font-size: 11.5px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 7px; color: var(--text-dim); cursor: pointer; }
.wf-btn-ghost:hover { color: var(--text); }
.wf-btn-primary { padding: 5px 14px; font-size: 11.5px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 7px; font-weight: 600; cursor: pointer; }

/* Lane tabs — horizontal strip */
.wf-lanes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.wf-lane-tab {
  flex: 1 1 0; min-width: 130px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-top: 3px solid oklch(0.65 0.18 var(--lane-hue));
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wf-lane-tab:hover { background: var(--bg-1); }
.wf-lane-tab.active {
  background: linear-gradient(to bottom, oklch(0.3 0.08 var(--lane-hue) / 0.15), var(--bg-card));
  border-color: oklch(0.65 0.15 var(--lane-hue) / 0.5);
  border-top-color: oklch(0.72 0.2 var(--lane-hue));
}
.wf-lane-name { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.wf-lane-meta { font-size: 10.5px; color: var(--text-faint); }
.wf-lane-stuck { color: var(--bad); font-weight: 500; }

/* Canvas */
.wf-canvas-wrap { position: relative; height: 560px; background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; display: flex; }
.wf-canvas-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, oklch(0.28 0.01 260) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.4;
  pointer-events: none;
}
.wf-canvas { position: relative; flex: 1; overflow: auto; padding: 20px; }
.wf-edges { position: absolute; top: 0; left: 0; width: 1400px; height: 600px; pointer-events: none; color: oklch(0.5 0.02 260); }
.wf-edge { stroke: currentColor; opacity: 0.45; }

.wf-node {
  position: absolute;
  width: 160px;
  padding: 9px 11px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-left: 3px solid oklch(0.65 0.15 var(--lane-hue));
  border-radius: 8px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.3);
}
.wf-node:hover { transform: translateY(-1px); border-color: oklch(0.7 0.15 var(--lane-hue)); box-shadow: 0 4px 16px oklch(0 0 0 / 0.4); z-index: 5; }
.wf-node.wf-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; z-index: 10; }
.wf-node.wf-dim { opacity: 0.25; }
.wf-node.wf-stuck { border-left-color: var(--bad); background: linear-gradient(to right, oklch(0.3 0.15 25 / 0.18), var(--bg-card) 60%); }

.wf-node-kind { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 2px; }
.wf-n-action   .wf-node-kind { color: oklch(0.75 0.14 290); }
.wf-n-trigger  .wf-node-kind { color: var(--warn); }
.wf-n-resource .wf-node-kind { color: var(--info); }
.wf-n-deadend  .wf-node-kind { color: var(--bad); }
.wf-node-name { font-size: 12.5px; font-weight: 500; color: var(--text); line-height: 1.25; margin-bottom: 5px; }
.wf-node-count { font-size: 10.5px; color: var(--text-dim); font-family: var(--font-ui); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf-node-count.stuck { color: var(--bad); font-weight: 500; }
.wf-stuck-flag { font-size: 9.5px; color: var(--bad); font-weight: 600; }
.wf-node-role { font-size: 10px; color: var(--text-faint); font-style: italic; margin-top: 3px; }
.wf-node-owner { margin-top: 4px; }
.wf-owner-chip { font-size: 9.5px; background: var(--bg-1); color: var(--text-dim); padding: 1px 6px; border-radius: 4px; font-weight: 500; }
.wf-node-ext { font-size: 10px; color: var(--info); margin-top: 3px; }

/* Resources rail */
.wf-resources { width: 200px; padding: 14px 12px; border-left: 1px solid var(--border-soft); background: var(--bg-panel); display: flex; flex-direction: column; gap: 8px; }
.wf-resources-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 4px; }
.wf-resource { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 7px; font-size: 11px; }
.wf-r-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex-shrink: 0; }
.wf-r-name { font-weight: 500; color: var(--text); font-size: 11.5px; }
.wf-r-type { font-size: 9px; color: var(--text-faint); letter-spacing: 0.1em; }
.wf-r-open { margin-left: auto; font-size: 10px; color: var(--text-dim); background: transparent; border: none; cursor: pointer; padding: 2px 4px; }
.wf-r-open:hover { color: var(--text); }

/* Insights */
.wf-insights { display: flex; flex-direction: column; gap: 8px; }
.wf-insight {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.wf-i-red { border-left: 3px solid var(--bad); }
.wf-i-yellow { border-left: 3px solid var(--warn); }
.wf-i-icon { font-size: 18px; width: 28px; text-align: center; }
.wf-i-red .wf-i-icon { color: var(--bad); }
.wf-i-yellow .wf-i-icon { color: var(--warn); }
.wf-i-title { font-size: 13px; font-weight: 500; color: var(--text); }
.wf-i-desc { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.wf-i-cta { margin-left: auto; background: var(--accent); color: var(--accent-fg); border: none; padding: 6px 14px; border-radius: 6px; font-size: 11.5px; font-weight: 600; cursor: pointer; }

/* ═══ Revenue by Job ══════════════════════════════════════ */
.rbj-page { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.rbj-header { display: flex; justify-content: space-between; align-items: flex-end; }
.rbj-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.rbj-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.rbj-header-actions { display: flex; gap: 8px; align-items: center; }
.rbj-year-seg { display: flex; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 7px; overflow: hidden; }
.rbj-year-seg button { padding: 5px 14px; font-size: 11.5px; background: transparent; border: none; color: var(--text-dim); cursor: pointer; }
.rbj-year-seg button.on { background: var(--bg-1); color: var(--text); }
.rbj-btn-ghost, .rbj-btn-primary { padding: 6px 14px; font-size: 11.5px; border-radius: 7px; cursor: pointer; font-weight: 500; }
.rbj-btn-ghost { background: var(--bg-card); border: 1px solid var(--border-soft); color: var(--text-dim); }
.rbj-btn-primary { background: var(--accent); color: var(--accent-fg); border: none; font-weight: 600; }

.rbj-top { display: grid; grid-template-columns: 380px 1fr; gap: 14px; }
.rbj-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 16px; }
.rbj-card-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 12px; }

.rbj-donut-wrap { display: flex; align-items: center; gap: 16px; }
.rbj-donut { width: 130px; height: 130px; flex-shrink: 0; }
.rbj-legend { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.rbj-legend-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.rbj-swatch { width: 10px; height: 10px; border-radius: 2px; }
.rbj-lg-name { color: var(--text-dim); flex: 1; }
.rbj-lg-val { font-family: var(--font-ui); color: var(--text); font-weight: 500; }
.rbj-donut-footer { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-size: 11.5px; }
.rbj-f-label { color: var(--text-faint); }
.rbj-f-val { color: var(--text); font-weight: 500; margin-left: 4px; }

.rbj-qb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rbj-qb-stat { padding: 10px 12px; background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: 8px; }
.rbj-qb-k { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.rbj-qb-v { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--text); margin: 4px 0 2px; letter-spacing: -0.02em; }
.rbj-qb-v.neg { color: var(--bad); }
.rbj-qb-d { font-size: 10.5px; color: var(--text-dim); }
.rbj-qb-d .good { color: var(--good); font-weight: 500; }
.rbj-qb-d .warn { color: var(--warn); font-weight: 500; }
.rbj-qb-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; background: var(--bg-0); border-radius: 7px; font-size: 11.5px; color: var(--text-dim); }
.rbj-qb-ic { color: var(--info); font-size: 13px; }
.rbj-qb-note a { color: var(--accent); cursor: pointer; }

.rbj-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); }
.rbj-tab { padding: 8px 16px; background: transparent; border: none; color: var(--text-dim); font-size: 12px; cursor: pointer; border-bottom: 2px solid transparent; }
.rbj-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }

.rbj-table-wrap { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.rbj-table-hint { padding: 10px 14px; font-size: 11px; color: var(--text-dim); background: var(--bg-panel); border-bottom: 1px solid var(--border-soft); }
.rbj-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rbj-table th { padding: 8px 10px; text-align: left; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); background: var(--bg-panel); border-bottom: 1px solid var(--border-soft); }
.rbj-table th.r, .rbj-table td.r { text-align: right; }
.rbj-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.rbj-table tbody tr:hover { background: var(--bg-0); }
.rbj-client { font-weight: 500; }
.rbj-job { color: var(--text-dim); max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbj-date { color: var(--text-faint); font-family: var(--font-ui); font-size: 11px; }
.rbj-table .mono { font-family: var(--font-ui); }
.rbj-table .faint { color: var(--text-faint); }
.rbj-table .good { color: var(--good); }
.rbj-table .bad { color: var(--bad); }
.rbj-table .rbj-totals td { background: var(--bg-panel); border-top: 2px solid var(--border); font-weight: 500; }
.rbj-status-pill { font-size: 10px; padding: 2px 8px; border-radius: 5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.rbj-status-pill.active { background: oklch(0.3 0.1 240 / 0.25); color: oklch(0.75 0.13 240); }
.rbj-status-pill.complete { background: oklch(0.3 0.1 150 / 0.2); color: var(--good); }


/* ═══ Settings page ══════════════════════════════════════ */
.set-page { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.set-header { display: flex; justify-content: space-between; align-items: flex-end; }
.set-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.set-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.set-header-actions { display: flex; gap: 10px; align-items: center; }
.set-saved { font-size: 11.5px; color: var(--good); }
.set-btn-primary { padding: 6px 14px; font-size: 11.5px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 7px; font-weight: 600; cursor: pointer; }

.set-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }

.set-nav { display: flex; flex-direction: column; gap: 3px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 6px; height: fit-content; }
.set-nav-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: transparent; border: none; border-radius: 7px; cursor: pointer; text-align: left; color: var(--text-dim); transition: background .1s, color .1s; }
.set-nav-item:hover { background: var(--bg-1); color: var(--text); }
.set-nav-item.active { background: var(--bg-1); color: var(--text); }
.set-nav-item.active .set-nav-icon { color: var(--accent); }
.set-nav-icon { width: 22px; font-size: 14px; color: var(--text-faint); flex-shrink: 0; text-align: center; }
.set-nav-name { font-size: 12.5px; font-weight: 500; margin-bottom: 2px; color: inherit; }
.set-nav-desc { font-size: 10.5px; color: var(--text-faint); line-height: 1.3; }

.set-content { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 22px 26px; }
.set-content-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.set-content-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--text); margin: 0 0 4px; letter-spacing: -0.01em; }
.set-content-sub { font-size: 12px; color: var(--text-dim); }

.set-grid { display: flex; flex-direction: column; gap: 4px; }
.set-field { display: grid; grid-template-columns: 200px 1fr auto; gap: 14px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); }
.set-field:last-child { border-bottom: none; }
.set-field-k { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }
.set-field-v { font-size: 12.5px; color: var(--text); font-family: var(--font-ui); display: flex; align-items: center; gap: 8px; }
.set-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
.set-field-edit { font-size: 10.5px; color: var(--text-faint); background: transparent; border: none; cursor: pointer; padding: 3px 10px; border-radius: 5px; }
.set-field-edit:hover { color: var(--text); background: var(--bg-1); }

.set-integrations { display: flex; flex-direction: column; gap: 8px; }
.set-integ { padding: 12px 14px; background: var(--bg-0); border: 1px solid var(--border-soft); border-radius: 8px; border-left: 3px solid var(--good); }
.set-integ-disconnected { border-left-color: var(--bad); }
.set-integ-row { display: flex; align-items: center; gap: 12px; }
.set-integ-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex-shrink: 0; }
.set-integ-dot.disconnected { background: var(--bad); }
.set-integ-name { font-size: 13px; font-weight: 500; color: var(--text); }
.set-integ-status { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.set-integ-disconnected .set-integ-status { color: var(--bad); font-weight: 600; }
.set-integ-btn { margin-left: auto; font-size: 11px; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border-soft); padding: 4px 12px; border-radius: 6px; cursor: pointer; }
.set-integ-btn:hover { color: var(--text); border-color: var(--border); }
.set-integ-disconnected .set-integ-btn { color: var(--accent); border-color: var(--accent); }
.set-integ-meta { font-size: 11px; color: var(--text-faint); margin-top: 4px; padding-left: 20px; }

/* ═══ People page ═══════════════════════════════════════ */
.ppl-page { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.ppl-header { display: flex; justify-content: space-between; align-items: flex-end; }
.ppl-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.ppl-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.ppl-header-stats { display: flex; gap: 22px; font-size: 11.5px; color: var(--text-dim); }
.ppl-header-stats .n { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text); margin-right: 4px; }

.ppl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); }
.ppl-tab { padding: 9px 18px; background: transparent; border: none; color: var(--text-dim); font-size: 12.5px; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; }
.ppl-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.ppl-tab:hover:not(.active) { color: var(--text); }

.ppl-btn-primary { padding: 6px 14px; font-size: 11.5px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 7px; font-weight: 600; cursor: pointer; }
.ppl-btn-ghost { padding: 6px 14px; font-size: 11.5px; background: var(--bg-card); color: var(--text-dim); border: 1px solid var(--border-soft); border-radius: 7px; cursor: pointer; }

/* Work Order Log */
.ppl-wo-wrap { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.ppl-wo-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--bg-panel); border-bottom: 1px solid var(--border-soft); }
.ppl-wo-hint { font-size: 11.5px; color: var(--text-dim); }
.ppl-wo-hint strong { color: var(--text); font-weight: 600; }
.ppl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ppl-table th { padding: 9px 12px; text-align: left; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); background: var(--bg-panel); border-bottom: 1px solid var(--border-soft); }
.ppl-table th.r, .ppl-table td.r { text-align: right; }
.ppl-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.ppl-table tr:last-child td { border-bottom: none; }
.ppl-table tbody tr:hover { background: var(--bg-0); }
.ppl-table .mono { font-family: var(--font-ui); }
.ppl-table .faint { color: var(--text-faint); }
.ppl-table .good { color: var(--good); font-weight: 500; }
.ppl-wo-job { font-weight: 500; }
.ppl-wo-crew { display: flex; gap: -6px; }
.ppl-avatar-sm { width: 24px; height: 24px; border-radius: 50%; background: oklch(0.4 0.07 260); color: white; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bg-card); margin-left: -6px; }
.ppl-avatar-sm:first-child { margin-left: 0; }

.ppl-status-pill { font-size: 10px; padding: 2px 8px; border-radius: 5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.ppl-status-pill.active { background: oklch(0.3 0.1 240 / 0.25); color: oklch(0.75 0.13 240); }
.ppl-status-pill.scheduled { background: oklch(0.3 0.1 290 / 0.2); color: oklch(0.78 0.12 290); }
.ppl-status-pill.complete { background: oklch(0.3 0.1 150 / 0.2); color: var(--good); }

/* Crew grid */
.ppl-crew-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ppl-crew-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ppl-crew-card.onboarding { border-left: 3px solid var(--warn); }
.ppl-crew-top { display: flex; gap: 12px; align-items: flex-start; }
.ppl-avatar-lg { width: 44px; height: 44px; border-radius: 50%; background: oklch(0.4 0.07 260); color: white; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ppl-avatar-xl { width: 56px; height: 56px; border-radius: 50%; background: oklch(0.4 0.1 55); color: white; font-size: 22px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ppl-crew-name { font-size: 14px; font-weight: 500; color: var(--text); }
.ppl-crew-role { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.ppl-onboard-badge { margin-left: auto; font-size: 9px; letter-spacing: 0.1em; font-weight: 700; color: var(--warn); background: oklch(0.3 0.08 80 / 0.25); padding: 3px 7px; border-radius: 4px; }
.ppl-crew-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ppl-crew-stats > div { padding: 8px 10px; background: var(--bg-0); border-radius: 6px; }
.ppl-crew-stats .k { font-size: 9.5px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
.ppl-crew-stats .v { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--text); }
.ppl-crew-progress { height: 5px; background: var(--bg-0); border-radius: 3px; overflow: hidden; }
.ppl-crew-progress-bar { height: 100%; background: var(--warn); border-radius: 3px; }
.ppl-crew-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.ppl-crew-foot .faint { color: var(--text-faint); }
.ppl-crew-msg { background: transparent; border: none; color: var(--accent); font-size: 11px; cursor: pointer; font-weight: 500; }

/* Hiring kanban */
.ppl-hiring { overflow-x: auto; }
.ppl-kanban { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 10px; }
.ppl-kanban-col { background: var(--bg-panel); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.ppl-kanban-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 6px; border-bottom: 1px solid var(--border-soft); }
.ppl-kanban-name { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.ppl-kanban-count { font-size: 10px; background: var(--bg-1); color: var(--text-dim); padding: 1px 7px; border-radius: 9px; }
.ppl-kanban-empty { font-size: 10.5px; color: var(--text-faint); text-align: center; padding: 16px 0; }
.ppl-cand-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 7px; padding: 10px 12px; }
.ppl-cand-row { display: flex; justify-content: space-between; align-items: center; }
.ppl-cand-name { font-size: 12.5px; font-weight: 500; color: var(--text); }
.ppl-cand-score { font-size: 11px; font-family: var(--font-display); font-weight: 500; color: var(--accent); background: oklch(0.3 0.08 55 / 0.2); padding: 1px 7px; border-radius: 4px; }
.ppl-cand-role { font-size: 11px; color: var(--text-dim); margin: 2px 0 4px; }
.ppl-cand-note { font-size: 11px; color: var(--text-dim); line-height: 1.35; }
.ppl-cand-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-soft); font-size: 10.5px; color: var(--text-faint); }
.ppl-cand-foot button { background: transparent; border: none; color: var(--accent); font-size: 10.5px; cursor: pointer; font-weight: 500; }

/* Onboarding */
.ppl-onboard { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 22px 26px; }
.ppl-onboard-hero { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.ppl-onboard-name { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--text); }
.ppl-onboard-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.ppl-onboard-pct { margin-left: auto; text-align: right; }
.ppl-onboard-pct .v { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--warn); letter-spacing: -0.02em; }
.ppl-onboard-pct .k { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.ppl-onboard-tasks { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; }
.ppl-onboard-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 8px; }
.ppl-task { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border-soft); }
.ppl-task:last-child { border-bottom: none; }
.ppl-task-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; flex-shrink: 0; }
.ppl-task-box.done { background: var(--good); border-color: var(--good); color: white; }
.ppl-task-label { font-size: 12.5px; color: var(--text); flex: 1; }
.ppl-task.done .ppl-task-label { color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--border); }
.ppl-task-btn { font-size: 10.5px; color: var(--accent); background: transparent; border: none; cursor: pointer; font-weight: 500; }
.ppl-onboard-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 18px; border-top: 1px solid var(--border-soft); }


/* ═══ Finance / Marketing / Vendors / Clients / Claims / Catalog ═══ */
.fin-page,.mk-page,.vn-page,.cl-page,.cm-page,.cat-page { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.fin-header,.mk-header { display: flex; justify-content: space-between; align-items: flex-end; }
.fin-title,.mk-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.fin-sub,.mk-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.fin-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-soft); }
.fin-tab { padding: 9px 18px; background: transparent; border: none; color: var(--text-dim); font-size: 12.5px; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; }
.fin-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.fin-tab:hover:not(.active) { color: var(--text); }
.fin-btn-primary { padding: 6px 14px; font-size: 11.5px; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 7px; font-weight: 600; cursor: pointer; }
.fin-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px 20px; }
.fin-card-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 14px; }
.fin-ai { font-size: 9px; letter-spacing: 0.15em; background: var(--accent); color: var(--accent-fg); padding: 2px 7px; border-radius: 4px; font-weight: 700; margin-right: 8px; vertical-align: middle; }

/* pricer */
.fin-pricer-ctrls { display: flex; gap: 24px; margin-bottom: 20px; }
.fin-pricer-ctrls label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); flex: 1; }
.fin-pricer-ctrls input { flex: 1; }
.fin-pricer-ctrls span { font-family: var(--font-ui); font-weight: 500; color: var(--text); min-width: 60px; }
.fin-pricer-out { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.fin-big-stat { padding: 14px; background: var(--bg-0); border-radius: 8px; }
.fin-big-stat .k { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.fin-big-stat .v { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--text); letter-spacing: -0.02em; }
.fin-big-stat .v.good { color: var(--good); }
.fin-pricer-note { margin-top: 16px; padding: 12px 14px; background: var(--bg-0); border-left: 3px solid var(--accent); border-radius: 6px; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.fin-pricer-note strong { color: var(--text); }

/* payroll */
.fin-payroll-hero { display: flex; gap: 20px; align-items: center; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 18px; }
.fin-payroll-hero > div { }
.fin-payroll-hero .k { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.fin-payroll-hero .v { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--text); }
.fin-payroll-hero button { margin-left: auto; }

.fin-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.fin-table th { padding: 9px 12px; text-align: left; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); background: var(--bg-panel); border-bottom: 1px solid var(--border-soft); }
.fin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.fin-table .mono { font-family: var(--font-ui); }
.fin-table .faint { color: var(--text-faint); }
.fin-table .good { color: var(--good); }
.fin-table .bad { color: var(--bad); }
.fin-table th.r, .fin-table td.r { text-align: right; }

/* perfpay */
.fin-rules-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.fin-rules-grid > div { padding: 12px; background: var(--bg-0); border-radius: 8px; }
.fin-rules-grid .k { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.fin-rules-grid .v { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--text); margin: 4px 0; }
.fin-rules-grid .v.bad { color: var(--bad); }
.fin-rules-grid .d { font-size: 11px; color: var(--text-dim); }
.fin-split { display: flex; flex-direction: column; gap: 10px; }
.fin-split > div { display: flex; align-items: center; gap: 12px; }
.fin-bar { flex: 1; height: 12px; background: var(--bg-0); border-radius: 6px; overflow: hidden; display: block; }
.fin-bar > span { display: block; height: 100%; border-radius: 6px; }
.fin-split .d { font-size: 12px; color: var(--text-dim); min-width: 170px; }
.fin-split .d strong { color: var(--text); }

/* marketing channels */
.mk-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mk-ch-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 16px; }
.mk-ch-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mk-ch-name { font-size: 14px; font-weight: 500; color: var(--text); }
.mk-trend { font-size: 14px; font-weight: 700; }
.mk-trend.up { color: var(--good); }
.mk-trend.down { color: var(--bad); }
.mk-trend.flat { color: var(--text-faint); }
.mk-ch-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.mk-ch-stats > div { padding: 7px 10px; background: var(--bg-0); border-radius: 6px; }
.mk-ch-stats .k { font-size: 9.5px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.mk-ch-stats .v { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--text); margin-top: 1px; }
.mk-share { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); }
.mk-share-bar { flex: 1; height: 4px; background: var(--bg-0); border-radius: 2px; overflow: hidden; }
.mk-share-bar > div { height: 100%; background: var(--accent); border-radius: 2px; }
.mk-insight { grid-column: 1 / -1; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-dim); }
.mk-insight strong { color: var(--text); }
.mk-insight button { margin-left: auto; flex-shrink: 0; }

/* drips */
.mk-drips { display: flex; flex-direction: column; gap: 8px; }
.mk-drip { display: flex; align-items: center; gap: 20px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; }
.mk-drip.inactive { opacity: 0.6; }
.mk-drip-main { flex: 1; }
.mk-drip-name { font-size: 13px; font-weight: 500; color: var(--text); }
.mk-drip-stage { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.mk-drip-stats { display: flex; gap: 20px; }
.mk-drip-stats > div { font-size: 11px; }
.mk-drip-stats .k { color: var(--text-faint); margin-right: 5px; }
.mk-drip-stats .v { font-family: var(--font-ui); color: var(--text); font-weight: 500; }
.mk-drip-toggle { display: flex; align-items: center; gap: 10px; }
.mk-pill { font-size: 10px; padding: 3px 9px; border-radius: 4px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; }
.mk-pill.on { background: oklch(0.3 0.1 150 / 0.25); color: var(--good); }
.mk-pill.off { background: var(--bg-0); color: var(--text-faint); }
.mk-drip-toggle button { background: transparent; border: 1px solid var(--border-soft); color: var(--text-dim); font-size: 11px; padding: 4px 12px; border-radius: 6px; cursor: pointer; }

/* content */
.mk-content-hero { display: flex; gap: 22px; padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; }
.mk-content-hero .k { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.mk-content-hero .v { font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--text); margin-top: 2px; }
.mk-content-hero .v.good { color: var(--good); }
.mk-content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.mk-content-tile { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; }
.mk-tile-thumb { height: 120px; display: flex; align-items: flex-end; padding: 8px; }
.mk-tile-pub { font-size: 9px; letter-spacing: 0.1em; background: rgba(0,0,0,0.6); color: white; padding: 3px 7px; border-radius: 4px; text-transform: uppercase; font-weight: 600; }
.mk-tile-meta { padding: 8px 10px; font-size: 11px; color: var(--text-dim); }

/* vendors */
.vn-subs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.vn-sub-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 16px; }
.vn-sub-card.inactive { opacity: 0.6; }
.vn-sub-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.vn-sub-name { font-size: 14px; font-weight: 500; color: var(--text); }
.vn-sub-type { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.vn-sub-pill { font-size: 9.5px; padding: 3px 8px; border-radius: 4px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; }
.vn-sub-pill.active { background: oklch(0.3 0.1 150 / 0.25); color: var(--good); }
.vn-sub-pill.inactive { background: var(--bg-0); color: var(--text-faint); }
.vn-sub-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.vn-sub-stats > div { padding: 7px 10px; background: var(--bg-0); border-radius: 6px; }
.vn-sub-stats .k { font-size: 9.5px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.vn-sub-stats .v { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--text); }
.vn-sub-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--text-faint); }

.vn-docs { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.vn-doc-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 80px; gap: 10px; padding: 11px 14px; align-items: center; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
.vn-doc-head { background: var(--bg-panel); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.vn-doc-pill { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.vn-doc-pill.good { background: oklch(0.3 0.1 150 / 0.2); color: var(--good); }
.vn-doc-pill.warn { background: oklch(0.3 0.08 80 / 0.2); color: var(--warn); }
.vn-doc-btn { font-size: 11px; color: var(--text-dim); background: transparent; border: 1px solid var(--border-soft); padding: 3px 10px; border-radius: 5px; cursor: pointer; }
.vn-doc-btn:hover { color: var(--text); }

.vn-comp { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; }
.vn-comp-hero { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: oklch(0.28 0.12 25 / 0.25); border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: 12.5px; }
.vn-comp-hero span:first-child { font-size: 20px; color: var(--bad); }
.vn-comp-hero strong { color: var(--text); }
.vn-comp-hero button { margin-left: auto; flex-shrink: 0; }
.vn-comp-row { display: grid; grid-template-columns: 1fr 140px 80px 80px; gap: 12px; padding: 11px 18px; align-items: center; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.vn-comp-row:last-child { border-bottom: none; }
.vn-comp-who { color: var(--text); font-weight: 500; }
.vn-comp-exp { font-size: 11px; color: var(--text-dim); font-family: var(--font-ui); }
.vn-comp-days { font-family: var(--font-ui); font-weight: 500; text-align: right; }
.vn-comp-days.ok { color: var(--good); }
.vn-comp-days.warn { color: var(--warn); }
.vn-comp-days.bad { color: var(--bad); font-weight: 700; }

/* clients */
.cl-search { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 7px; padding: 7px 12px; font-size: 12px; color: var(--text); width: 240px; }
.cl-tier { font-size: 10px; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; }
.cl-t-vip { background: oklch(0.3 0.15 55 / 0.3); color: oklch(0.85 0.15 80); }
.cl-t-repeat { background: oklch(0.3 0.1 240 / 0.25); color: oklch(0.78 0.12 240); }
.cl-t-new { background: oklch(0.3 0.1 150 / 0.2); color: var(--good); }
.cl-t-past { background: var(--bg-0); color: var(--text-faint); }
.cl-t-aroverdue { background: oklch(0.3 0.15 25 / 0.25); color: var(--bad); }
.cl-score { font-family: var(--font-display); font-size: 14px; font-weight: 500; padding: 2px 9px; border-radius: 5px; }
.cl-score.good { background: oklch(0.3 0.1 150 / 0.2); color: var(--good); }
.cl-score.warn { background: oklch(0.3 0.08 80 / 0.2); color: var(--warn); }
.cl-score.bad { background: oklch(0.3 0.15 25 / 0.2); color: var(--bad); }

/* claims */
.cm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cm-stat { padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 8px; }
.cm-stat .k { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.cm-stat .v { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text); margin-top: 3px; }
.cm-stat.good .v { color: var(--good); }

/* ──────────────────────────────────────────────────────────────── */
/* Sales Pipeline — lead-type tabs (residential / commercial / ins) */
/* ──────────────────────────────────────────────────────────────── */
.sp-types { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.sp-type-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.sp-type-tab:hover { border-color: var(--border); color: var(--text); }
.sp-type-tab.active {
  background: var(--accent-ghost);
  border-color: var(--accent);
  color: var(--text);
}
.sp-type-tab .sp-type-count {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--text-faint);
}
.sp-type-tab.active .sp-type-count { background: var(--accent); color: var(--accent-fg); }
.sp-type-tab.residential.active { border-color: oklch(0.75 0.14 230); background: oklch(0.3 0.08 230 / 0.2); }
.sp-type-tab.commercial.active  { border-color: oklch(0.75 0.14 290); background: oklch(0.3 0.08 290 / 0.2); }
.sp-type-tab.insurance.active   { border-color: oklch(0.75 0.14 25);  background: oklch(0.3 0.1 25 / 0.2);  }

/* ──────────────────────────────────────────────────────────────── */
/* Performance Pay                                                  */
/* ──────────────────────────────────────────────────────────────── */
.pp-page { padding: 20px 24px 60px; max-width: 1600px; }
.pp-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; }
.pp-title { font-family: var(--font-display); font-size: 30px; font-weight: 500; margin: 0 0 4px; color: var(--text); letter-spacing: -0.01em; }
.pp-sub { color: var(--text-dim); font-size: 13px; }
.pp-header-right { display: flex; gap: 8px; }
.pp-btn { padding: 8px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--border); }
.pp-btn.ghost { color: var(--text-dim); background: var(--bg-card); }
.pp-btn.ghost:hover { color: var(--text); border-color: var(--border-soft); }
.pp-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.pp-month-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.pp-ms-card {
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.pp-ms-card.pp-ms-accent {
  background: linear-gradient(135deg, var(--accent-ghost) 0%, var(--bg-card) 100%);
  border-color: var(--accent-dim);
}
.pp-ms-label { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.pp-ms-value {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  color: var(--text); margin-top: 4px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pp-ms-value.good { color: var(--good); }
.pp-ms-inline { font-size: 15px; font-weight: 500; font-family: var(--font-ui); margin-left: 6px; }
.pp-ms-inline.good { color: var(--good); }
.pp-ms-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.pp-ms-sub strong { color: var(--text); }

.pp-formula {
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  margin-bottom: 16px;
}
.pp-formula-label { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.pp-formula-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.pp-f-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-2);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  border: 1px solid var(--border-soft);
}
.pp-f-chip.accent { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.pp-f-op { color: var(--text-faint); font-weight: 600; }
.pp-formula-crit { margin-top: 10px; font-size: 12px; color: var(--text-dim); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-crit-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 500;
  margin-left: 4px;
}
.pp-crit-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

.pp-tabs { display: flex; gap: 4px; margin: 16px 0 12px; border-bottom: 1px solid var(--border-soft); }
.pp-tab {
  padding: 9px 14px;
  border: 0; background: none;
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 500;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.pp-tab:hover { color: var(--text); }
.pp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.pp-tab-count {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 1px 6px; border-radius: 4px;
  background: var(--bg-2); color: var(--text-faint);
}
.pp-tab.active .pp-tab-count { background: var(--accent-ghost); color: var(--accent); }

/* Leaderboard */
.pp-leaderboard {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.pp-lb-head, .pp-lb-row {
  display: grid;
  grid-template-columns: 2.2fr 0.5fr 1.1fr 1.1fr 0.6fr 1.1fr 1.1fr 1.2fr;
  gap: 12px;
  padding: 11px 16px;
  align-items: center;
  font-size: 12.5px;
}
.pp-lb-head {
  background: var(--bg-2);
  color: var(--text-faint);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--border-soft);
}
.pp-lb-row {
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.12s;
}
.pp-lb-row:last-of-type { border-bottom: 0; }
.pp-lb-row:hover { background: var(--bg-2); }
.pp-lb-row.selected { background: var(--accent-ghost); }
.pp-lb-row.disqual { opacity: 0.72; }
.pp-lb-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-lb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.pp-lb-n { font-weight: 500; color: var(--text); }
.pp-lb-r { font-size: 10.5px; color: var(--text-faint); }
.pp-streak { font-size: 11px; padding: 2px 7px; background: oklch(0.3 0.15 60 / 0.25); border-radius: 5px; font-weight: 600; color: oklch(0.85 0.15 60); }
.pp-lb-stat { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.pp-lb-stat.good { color: var(--good); }
.pp-lb-stat.bad { color: var(--bad); }
.pp-lb-stat.warn { color: var(--warn); }
.pp-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
}
.pp-badge.good { background: oklch(0.3 0.1 150 / 0.25); color: var(--good); }
.pp-badge.bad { background: oklch(0.3 0.08 25 / 0.2); color: var(--bad); }
.pp-payout {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.pp-payout-sub { font-family: var(--font-ui); font-size: 10px; color: var(--text-faint); font-weight: 400; }
.pp-lb-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: var(--bg-2);
  border-top: 2px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
}
.pp-lb-total > div:last-child { font-family: var(--font-display); font-size: 18px; color: var(--accent); }

/* Photo verification */
.pp-photos { }
.pp-photos-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-size: 12.5px;
  flex-wrap: wrap;
  gap: 12px;
}
.pp-photos-filters { display: flex; gap: 6px; }
.pp-chip {
  padding: 4px 11px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
  cursor: pointer;
}
.pp-chip.active { background: var(--accent-ghost); border-color: var(--accent); color: var(--text); }
.pp-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.pp-photo-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.pp-photo-thumb {
  height: 170px;
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px;
}
.pp-photo-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.pp-photo-type {
  align-self: flex-start;
  position: relative; z-index: 1;
  padding: 3px 9px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}
.pp-photo-type.type-arrival   { background: oklch(0.35 0.1 230 / 0.85); }
.pp-photo-type.type-departure { background: oklch(0.35 0.1 150 / 0.85); }
.pp-photo-type.type-punchlist { background: oklch(0.35 0.1 60 / 0.85); }
.pp-photo-geo {
  align-self: flex-end;
  position: relative; z-index: 1;
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-mono);
}
.pp-photo-meta { padding: 10px 12px; }
.pp-photo-item { font-size: 13px; font-weight: 500; color: var(--text); }
.pp-photo-job { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.pp-photo-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--text-faint);
}
.pp-photo-actions { display: flex; gap: 4px; }
.pp-photo-approve, .pp-photo-reject {
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  cursor: pointer;
}
.pp-photo-approve { background: oklch(0.3 0.1 150 / 0.25); color: var(--good); border-color: oklch(0.5 0.1 150 / 0.4); }
.pp-photo-reject { background: var(--bg-2); color: var(--text-dim); }

.pp-photo-gates {
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.pp-photo-gates-head { font-size: 11px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.pp-photo-gates-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.pp-gate {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 12px;
}
.pp-gate-n {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 11px;
}
.pp-gate > div:last-child strong { color: var(--text); font-size: 12.5px; display: block; }
.pp-gate .faint { font-size: 10.5px; margin-top: 2px; }

/* Job scorecards */
.pp-jobs {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.pp-jobs-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pp-jobs-table thead th {
  background: var(--bg-2);
  color: var(--text-faint);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.pp-jobs-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.pp-jobs-table tbody tr:last-child td { border-bottom: 0; }
.pp-jobs-table tbody tr:hover { background: var(--bg-2); }
.pp-jobs-table .r { text-align: right; }
.pp-jobs-table .good { color: var(--good); }
.pp-jobs-table .bad { color: var(--bad); }
.pp-jobs-table .warn { color: var(--warn); }
.pp-jobs-table .faint { color: var(--text-faint); font-size: 10.5px; }
.pp-j-client { font-weight: 500; color: var(--text); }
.pp-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pp-status.complete { background: oklch(0.3 0.08 150 / 0.25); color: var(--good); }
.pp-status.active { background: oklch(0.3 0.08 230 / 0.25); color: var(--info); }

/* Activity feed */
.pp-activity {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.pp-a-row {
  display: grid;
  grid-template-columns: 90px 160px 1fr;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
  align-items: baseline;
}
.pp-a-row:last-child { border-bottom: 0; }
.pp-a-row.autopilot { background: var(--accent-ghost); }
.pp-a-time { font-size: 11px; }
.pp-a-who { font-weight: 500; color: var(--text); }
.pp-a-row.autopilot .pp-a-who { color: var(--accent); }
.pp-a-msg { color: var(--text-dim); }

/* Rules tab */
.pp-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-rule-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 16px 18px;
}
.pp-rule-card:nth-child(n+3) { grid-column: 1 / -1; }
.pp-rule-head { font-size: 11px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.pp-rule-list { display: flex; flex-direction: column; gap: 10px; }
.pp-rule-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 12.5px;
}
.pp-rule-item > div:nth-child(2) { flex: 1; min-width: 0; }
.pp-rule-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-ghost);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.pp-rule-edit {
  padding: 4px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
}
.pp-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pp-rule-grid > div { padding: 10px 12px; background: var(--bg-2); border-radius: 8px; }
.pp-rule-grid .k { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.pp-rule-grid .v { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin-top: 3px; color: var(--text); }
.pp-rule-grid .v.good { color: var(--good); }
.pp-rule-grid .v.bad { color: var(--bad); }
.pp-rule-grid .d { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.pp-rule-shares { display: flex; flex-direction: column; gap: 10px; }
.pp-rule-shares > div { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-dim); }
.pp-bar {
  display: block;
  width: 200px; height: 10px;
  background: var(--bg-2);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
.pp-bar > span { display: block; height: 100%; border-radius: 5px; }

/* === Hiring / Onboarding pipelines === */
.hp-page{padding:24px 28px;color:var(--text,#e8e6e1);}
.hp-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px;}
.hp-title{font-size:26px;font-weight:600;margin:0 0 4px;letter-spacing:-0.01em;}
.hp-sub{color:var(--muted,#9a958c);font-size:13px;}
.hp-header-right{display:flex;gap:8px;}
.hp-ctrl{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#e8e6e1;padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;}
.hp-ctrl.primary{background:#c87945;border-color:#c87945;color:#1a1916;font-weight:500;}
.hp-ctrl.ghost:hover{background:rgba(255,255,255,.07);}

.hp-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px;}
.hp-stat{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px 16px;}
.hp-stat .k{font-size:11px;color:var(--muted,#9a958c);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.hp-stat .v{font-size:22px;font-weight:600;letter-spacing:-0.01em;}
.hp-stat .v.good{color:#6bbf73;}
.hp-stat .v.warn{color:#d4a545;}
.hp-stat .d{font-size:11px;color:var(--muted,#9a958c);margin-top:3px;}

.hp-sources{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;padding:12px 14px;background:rgba(200,121,69,0.04);border:1px solid rgba(200,121,69,.18);border-radius:10px;}
.hp-sources-label{font-size:11px;color:#c87945;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-right:8px;}
.hp-source{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:6px 10px;}
.hp-source-name{font-size:12px;font-weight:600;margin-bottom:2px;}
.hp-source-stat{font-size:11px;color:var(--muted,#9a958c);}

.hp-kanban{display:grid;grid-template-columns:repeat(7,minmax(240px,1fr));gap:10px;overflow-x:auto;padding-bottom:12px;}
.hp-kanban.onboarding{grid-template-columns:repeat(5,minmax(240px,1fr));}
.hp-col{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:10px;display:flex;flex-direction:column;min-height:400px;}
.hp-col-head{padding:12px 12px 10px;border-bottom:1px solid rgba(255,255,255,.05);}
.hp-col-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;}
.hp-col-count{margin-left:auto;background:rgba(255,255,255,.06);color:var(--muted,#9a958c);font-size:11px;padding:2px 8px;border-radius:10px;font-weight:500;}
.hp-col-desc{font-size:11px;color:var(--muted,#9a958c);margin-top:4px;line-height:1.4;}
.hp-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1;}
.hp-empty{color:rgba(255,255,255,.15);font-size:11px;text-align:center;padding:20px 0;border:1px dashed rgba(255,255,255,.08);border-radius:8px;}
.hp-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

.hp-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:10px 11px;transition:all .15s;}
.hp-card:hover{border-color:rgba(200,121,69,.4);background:rgba(200,121,69,.04);}
.hp-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;}
.hp-name{font-size:13px;font-weight:600;}
.hp-role{font-size:11px;color:var(--muted,#9a958c);margin-top:1px;}
.hp-score{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;}
.hp-score.good{background:rgba(107,191,115,.15);color:#6bbf73;}
.hp-score.mid{background:rgba(212,165,69,.15);color:#d4a545;}
.hp-score.low{background:rgba(255,255,255,.06);color:var(--muted,#9a958c);}
.hp-meta{font-size:11px;color:var(--muted,#9a958c);margin-bottom:6px;}
.hp-src{color:#c87945;font-weight:500;}
.hp-faint{color:var(--muted,#9a958c);}
.hp-note{font-size:11px;line-height:1.45;color:rgba(232,230,225,.75);margin-bottom:8px;}
.hp-actions{display:flex;gap:6px;}
.hp-btn{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#e8e6e1;padding:5px 8px;border-radius:6px;font-size:11px;cursor:pointer;}
.hp-btn.primary{background:rgba(200,121,69,.15);border-color:rgba(200,121,69,.4);color:#c87945;font-weight:500;}
.hp-btn:hover{background:rgba(255,255,255,.07);}
.hp-btn.primary:hover{background:rgba(200,121,69,.22);}

.hp-progress{display:flex;align-items:center;gap:8px;margin:8px 0;}
.hp-progress-bar{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.hp-progress-bar span{display:block;height:100%;background:linear-gradient(90deg,#c87945,#d4a545);border-radius:3px;}
.hp-progress-val{font-size:11px;color:var(--muted,#9a958c);font-variant-numeric:tabular-nums;min-width:32px;text-align:right;}
.hp-blocker{font-size:11px;color:#d4a545;background:rgba(212,165,69,.08);border:1px solid rgba(212,165,69,.2);border-radius:6px;padding:5px 8px;margin-bottom:8px;}

.hp-checklist-preview{margin-top:24px;padding:16px 18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;}
.hp-cl-label{font-size:11px;color:#c87945;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:12px;}
.hp-cl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.hp-cl-item{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:6px;color:var(--muted,#9a958c);}
.hp-cl-item.done{color:#e8e6e1;background:rgba(107,191,115,.06);border-color:rgba(107,191,115,.2);}
.op-check{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:inline-flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.op-check.done{background:#6bbf73;border-color:#6bbf73;color:#1a1916;font-weight:700;}

/* === Catalog === */
.cat-page{padding:24px 28px;color:var(--text,#e8e6e1);}
.cat-topbar{display:flex;gap:10px;margin:16px 0 14px;}
.cat-btn-primary{background:#c87945;border:1px solid #c87945;color:#1a1916;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;}
.cat-btn-secondary{background:rgba(200,121,69,.1);border:1px solid rgba(200,121,69,.3);color:#c87945;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;}
.cat-btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#e8e6e1;padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;}
.cat-btn-ghost.sm{padding:5px 10px;font-size:12px;}
.cat-btn-ghost.full{width:100%;margin-top:8px;}
.cat-btn-ghost:hover{background:rgba(255,255,255,.07);}
.cat-btn-ai{background:rgba(200,121,69,.12);border:1px solid rgba(200,121,69,.4);color:#c87945;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;}
.cat-btn-danger{background:rgba(212,82,82,.12);border:1px solid rgba(212,82,82,.35);color:#d45252;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;}
.cat-filters{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.cat-input,.cat-select{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);color:#e8e6e1;padding:7px 12px;border-radius:8px;font-size:13px;}
.cat-input{min-width:260px;}
.cat-select{min-width:160px;cursor:pointer;}
.cat-input.wide,.cat-select.wide{width:100%;}
.cat-count{margin-left:auto;font-size:12px;color:var(--muted,#9a958c);}
.cat-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden;}
.cat-table th{background:rgba(255,255,255,.03);padding:10px 14px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#9a958c);font-weight:600;border-bottom:1px solid rgba(255,255,255,.06);}
.cat-table th.r{text-align:right;}
.cat-table td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;}
.cat-table td.r{text-align:right;}
.cat-table tr{cursor:pointer;transition:background .1s;}
.cat-table tr:hover td{background:rgba(200,121,69,.04);}
.cat-link{color:#c87945;font-weight:500;}
.cat-faint{color:var(--muted,#9a958c);}
.cat-faint.small{font-size:11px;}
.cat-row-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#c87945;padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;}
.cat-badge-photo,.cat-badge-video{display:inline-block;padding:2px 7px;border-radius:10px;font-size:11px;margin-right:4px;}
.cat-badge-photo{background:rgba(107,191,115,.12);color:#6bbf73;}
.cat-badge-video{background:rgba(200,121,69,.12);color:#c87945;}
.cat-media-cell{white-space:nowrap;}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace;}
.good{color:#6bbf73;}
.warn{color:#d4a545;}

/* Detail view */
.cat-detail-head{display:flex;align-items:center;gap:14px;padding:12px 0;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.06);}
.cat-detail-title{font-size:18px;font-weight:600;flex:1;}
.cat-detail-actions{display:flex;gap:8px;}
.cat-detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;}
.cat-row{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);align-items:start;}
.cat-row label{font-size:12px;color:var(--muted,#9a958c);padding-top:7px;}
.cat-val{font-size:13px;}
.cat-val.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cat-desc-head{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-bottom:none;border-radius:6px 6px 0 0;}
.cat-desc-toolbar{display:flex;gap:10px;font-size:12px;color:var(--muted,#9a958c);}
.cat-desc-toolbar .cat-sep{width:1px;background:rgba(255,255,255,.08);}
.cat-textarea{width:100%;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);color:#e8e6e1;padding:10px 12px;border-radius:0 0 6px 6px;font-family:inherit;font-size:13px;line-height:1.55;resize:vertical;}
.cat-desc-hint{font-size:11px;color:var(--muted,#9a958c);margin-top:6px;font-style:italic;}
.cat-price-table{width:100%;border-collapse:collapse;}
.cat-price-table th{background:rgba(255,255,255,.03);padding:8px 12px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#9a958c);font-weight:500;}
.cat-price-table td{padding:10px 12px;border:1px solid rgba(255,255,255,.05);font-size:13px;font-variant-numeric:tabular-nums;}
.cat-price-val{color:#c87945;font-weight:600;}
.cat-margin{margin-top:10px;font-size:12px;color:var(--muted,#9a958c);}
.cat-toggle-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;cursor:pointer;}
.cat-toggle{width:34px;height:20px;background:rgba(255,255,255,.1);border-radius:10px;position:relative;transition:background .2s;}
.cat-toggle.on{background:#c87945;}
.cat-toggle-dot{position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .2s;}
.cat-toggle.on .cat-toggle-dot{left:16px;}
.cat-delete-row{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);}

/* Right col — panels */
.cat-detail-right{display:flex;flex-direction:column;gap:14px;}
.cat-panel{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px 16px;}
.cat-panel.ai{background:linear-gradient(135deg,rgba(200,121,69,.06),rgba(200,121,69,.02));border-color:rgba(200,121,69,.2);}
.cat-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px;}
.cat-panel-title{font-size:13px;font-weight:600;margin-bottom:2px;}
.cat-panel-sub{font-size:11px;color:var(--muted,#9a958c);line-height:1.4;}
.cat-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.cat-photo{width:100%;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#2a2520;}
.cat-media-add{aspect-ratio:4/3;border:1px dashed rgba(255,255,255,.15);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--muted,#9a958c);font-size:22px;}
.cat-media-add:hover{border-color:rgba(200,121,69,.4);color:#c87945;}
.cat-media-hint{font-size:11px;color:var(--muted,#9a958c);line-height:1.6;padding-top:8px;border-top:1px solid rgba(255,255,255,.04);}
.cat-mat-list{display:flex;flex-direction:column;gap:8px;}
.cat-mat-row{display:flex;align-items:center;gap:10px;padding:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:6px;}
.cat-mat-thumb{width:48px;height:36px;border-radius:4px;overflow:hidden;flex-shrink:0;}
.cat-mat-info{flex:1;min-width:0;}
.cat-mat-name{font-size:12px;font-weight:500;}
.cat-mat-meta{font-size:11px;color:var(--muted,#9a958c);margin-top:2px;}
.cat-mat-x{background:none;border:none;color:var(--muted,#9a958c);cursor:pointer;font-size:18px;padding:0 4px;}
.cat-mat-x:hover{color:#d45252;}
.cat-mat-picker{margin-top:10px;padding:10px;background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.06);border-radius:6px;max-height:220px;overflow-y:auto;}
.cat-mat-picker-title{font-size:11px;color:#c87945;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:8px;}
.cat-mat-pick-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.cat-mat-pick-row:last-child{border-bottom:none;}
.cat-ai-list{margin:10px 0 0;padding-left:20px;font-size:12px;line-height:1.7;color:rgba(232,230,225,.85);}
.cat-ai-list li::marker{color:#c87945;}

/* Materials tab */
.cat-mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:16px;}
.cat-mat-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden;transition:border-color .15s;}
.cat-mat-card:hover{border-color:rgba(200,121,69,.3);}
.cat-mat-photo{aspect-ratio:4/3;}
.cat-mat-body{padding:12px 14px;}
.cat-mat-price-row{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05);font-size:13px;}

/* === Catalog — QB import + work order === */
.cat-pill{display:inline-block;padding:1px 7px;margin-left:4px;background:#c87945;color:#1a1916;border-radius:10px;font-size:10px;font-weight:600;}
.cat-btn-ghost.xs,.cat-btn-primary.xs{padding:3px 8px;font-size:11px;}
.cat-btn-primary.xs{background:rgba(200,121,69,.15);border:1px solid rgba(200,121,69,.4);color:#c87945;font-weight:500;border-radius:5px;cursor:pointer;}

.cat-mat-banner{display:flex;align-items:center;gap:16px;margin:14px 0;padding:14px 18px;background:linear-gradient(135deg,rgba(200,121,69,.08),rgba(200,121,69,.02));border:1px solid rgba(200,121,69,.25);border-radius:10px;}
.cat-mat-banner-icon{font-size:28px;}
.cat-mat-banner-title{font-size:13px;font-weight:600;margin-bottom:3px;}
.cat-mat-banner-stats{margin-left:auto;display:flex;gap:22px;font-size:12px;text-align:right;}
.cat-mat-banner-stats b{font-size:18px;display:block;}

.cat-mat-nophoto{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.03);border:1px dashed rgba(212,165,69,.3);color:var(--muted,#9a958c);font-size:22px;}
.cat-mat-source{font-size:11px;color:var(--muted,#9a958c);margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.04);}

/* Drawer */
.cat-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;justify-content:flex-end;z-index:100;}
.cat-drawer{background:#1a1916;border-left:1px solid rgba(255,255,255,.08);width:980px;max-width:95vw;height:100vh;overflow:hidden;display:flex;flex-direction:column;}
.cat-drawer.narrow{width:560px;}
.cat-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.06);}
.cat-drawer-title{font-size:16px;font-weight:600;margin-bottom:3px;}
.cat-drawer-body{display:grid;grid-template-columns:300px 1fr;flex:1;overflow:hidden;}

.cat-rec-list{border-right:1px solid rgba(255,255,255,.06);overflow-y:auto;padding:10px 0;}
.cat-rec-list-head{padding:8px 16px;font-size:10px;color:var(--muted,#9a958c);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.cat-rec-row{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-left:2px solid transparent;}
.cat-rec-row:hover{background:rgba(255,255,255,.03);}
.cat-rec-row.active{background:rgba(200,121,69,.08);border-left-color:#c87945;}
.cat-rec-icon{font-size:20px;opacity:.8;}
.cat-rec-info{flex:1;min-width:0;}
.cat-rec-vendor{font-size:13px;font-weight:500;}
.cat-rec-meta{font-size:11px;color:var(--muted,#9a958c);margin-top:2px;}
.cat-rec-tags{display:flex;flex-direction:column;gap:3px;align-items:flex-end;}
.cat-tag{font-size:10px;padding:2px 7px;border-radius:8px;white-space:nowrap;}
.cat-tag.sm{font-size:9px;padding:1px 6px;}
.cat-tag.ok{background:rgba(107,191,115,.15);color:#6bbf73;}
.cat-tag.new{background:rgba(200,121,69,.15);color:#c87945;}
.cat-tag.warn{background:rgba(212,165,69,.15);color:#d4a545;}

.cat-rec-detail{padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;}
.cat-rec-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.cat-rec-detail-title{font-size:15px;font-weight:600;}
.cat-rec-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:8px;overflow:hidden;}
.cat-rec-table th{background:rgba(255,255,255,.03);padding:9px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#9a958c);font-weight:600;}
.cat-rec-table th.r{text-align:right;}
.cat-rec-table td{padding:10px 12px;border-top:1px solid rgba(255,255,255,.04);font-size:12px;vertical-align:top;}
.cat-rec-table td.r{text-align:right;}
.cat-delta{font-size:10px;margin-top:2px;}
.cat-delta.up{color:#d4a545;}
.cat-delta.down{color:#6bbf73;}
.cat-match-existing{font-size:11px;color:#6bbf73;}
.cat-match-new{font-size:11px;color:#c87945;font-weight:500;}
.cat-rec-foot{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);gap:12px;}
.cat-rec-actions{display:flex;gap:8px;}

/* Work order preview */
.cat-wo-body{padding:20px 24px;overflow-y:auto;flex:1;}
.cat-wo-section-label{font-size:11px;color:#c87945;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:12px;}
.cat-wo-materials{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.cat-wo-mat{display:flex;align-items:center;gap:14px;padding:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:8px;}
.cat-wo-photo{width:72px;height:56px;border-radius:6px;overflow:hidden;flex-shrink:0;}
.cat-wo-nophoto{width:100%;height:100%;background:rgba(212,165,69,.1);border:1px dashed rgba(212,165,69,.3);display:flex;align-items:center;justify-content:center;color:#d4a545;font-size:20px;}
.cat-wo-mat-info{flex:1;}
.cat-wo-qty{font-size:16px;font-weight:700;color:#c87945;}
.cat-wo-mat-name{font-size:13px;font-weight:500;margin-top:1px;}
.cat-wo-mat-vendor{font-size:11px;color:var(--muted,#9a958c);margin-top:1px;}
.cat-wo-check{font-size:22px;color:var(--muted,#9a958c);}
.cat-wo-note{padding:12px 14px;background:rgba(200,121,69,.06);border-left:3px solid #c87945;border-radius:4px;font-size:12px;line-height:1.5;color:rgba(232,230,225,.85);}

/* === Booking Form === */
.bk-page{padding:24px 28px;color:var(--text,#e8e6e1);}
.bk-link{color:#c87945;text-decoration:none;}
.bk-head-actions{display:flex;gap:8px;}
.bk-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;margin-top:14px;}
.bk-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;}
.bk-card.wide{grid-column:1 / -1;}
.bk-card.ai{background:linear-gradient(135deg,rgba(200,121,69,.06),rgba(200,121,69,.02));border-color:rgba(200,121,69,.2);}
.bk-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.bk-card-title{font-size:11px;color:#c87945;text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.bk-card-title.small{font-size:11px;margin-top:4px;}
.bk-panel-sub{font-size:11px;color:var(--muted,#9a958c);line-height:1.45;}
.bk-field{display:flex;flex-direction:column;gap:5px;}
.bk-field label{font-size:11px;color:var(--muted,#9a958c);}
.bk-toggles{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);}
.bk-url-row{display:flex;align-items:stretch;}
.bk-url-row input{flex:1;border-radius:8px 0 0 8px;}
.bk-url-suffix{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-left:none;padding:7px 12px;border-radius:0 8px 8px 0;font-size:12px;color:var(--muted,#9a958c);}
.bk-btn-row{display:flex;gap:6px;}
.bk-qr{display:flex;justify-content:center;padding:10px 0;background:rgba(255,255,255,.04);border-radius:8px;}
.bk-divider{height:1px;background:rgba(255,255,255,.06);margin:6px 0;}
.bk-warn{font-size:11px;color:#d45252;background:rgba(212,82,82,.08);border:1px solid rgba(212,82,82,.25);border-radius:6px;padding:8px 10px;line-height:1.5;}
.bk-days{display:grid;grid-template-columns:1fr;gap:2px;}
.bk-drag{color:var(--muted,#9a958c);cursor:grab;font-size:14px;width:20px;}
.bk-inline-input,.bk-inline-select{background:transparent;border:1px solid transparent;color:#e8e6e1;padding:4px 6px;border-radius:4px;font-size:12px;width:100%;}
.bk-inline-input.faint{color:var(--muted,#9a958c);}
.bk-inline-input:focus,.bk-inline-select:focus{background:rgba(0,0,0,.25);border-color:rgba(200,121,69,.3);outline:none;}
.bk-inline-select{background:rgba(255,255,255,.03);}
.bk-q-foot{font-size:11px;color:var(--muted,#9a958c);padding-top:10px;}
.bk-ai-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;}
.bk-ai-step{display:flex;gap:10px;align-items:flex-start;padding:12px;background:rgba(0,0,0,.15);border-radius:8px;border:1px solid rgba(200,121,69,.15);}
.bk-step-n{width:24px;height:24px;border-radius:50%;background:#c87945;color:#1a1916;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* Preview */
.bk-preview-wrap{max-width:560px;margin:24px auto;}
.bk-preview-chrome{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-bottom:none;padding:10px 16px;border-radius:10px 10px 0 0;font-size:11px;color:var(--muted,#9a958c);}
.bk-preview-form{background:#f8f5f0;color:#2a2520;border-radius:0 0 12px 12px;padding:32px 36px;}
.bk-pf-logo{width:60px;height:60px;border-radius:50%;background:#c87945;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 16px;}
.bk-pf-title{font-size:24px;margin:0 0 6px;text-align:center;color:#2a2520;}
.bk-pf-desc{text-align:center;color:#6b655d;margin:0 0 22px;font-size:13px;}
.bk-pf-field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.bk-pf-field label{font-size:12px;font-weight:500;color:#3a3530;}
.bk-pf-field input,.bk-pf-field select,.bk-pf-field textarea{background:#fff;border:1px solid #d6cfc4;color:#2a2520;padding:9px 12px;border-radius:6px;font-size:13px;font-family:inherit;}
.bk-req{color:#c87945;}
.bk-pf-drop{border:2px dashed #d6cfc4;border-radius:8px;padding:20px;text-align:center;color:#8a8275;font-size:13px;}
.bk-pf-days{display:flex;gap:4px;flex-wrap:wrap;}
.bk-pf-day{background:#fff;border:1px solid #d6cfc4;padding:7px 12px;border-radius:6px;font-size:12px;cursor:pointer;}
.bk-pf-submit{width:100%;background:#c87945;color:#fff;border:none;padding:12px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;margin-top:8px;}

.bk-embed-code{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:14px;font-family:ui-monospace,monospace;font-size:12px;color:#6bbf73;word-break:break-all;}

@media (max-width:1400px){ .bk-grid{grid-template-columns:1fr 1fr;} }

/* === Drips === */
.dr-page{padding:24px 28px;color:var(--text,#e8e6e1);}
.dr-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:12px 0 18px;}
.dr-stat{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px 16px;}
.dr-stat .k{font-size:11px;color:var(--muted,#9a958c);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.dr-stat .v{font-size:22px;font-weight:600;letter-spacing:-0.01em;}
.dr-stat .v.good{color:#6bbf73;}
.dr-stat .d{font-size:11px;color:var(--muted,#9a958c);margin-top:3px;}

.dr-tabs{display:flex;gap:2px;background:rgba(255,255,255,.03);padding:4px;border-radius:8px;width:fit-content;margin-bottom:16px;}
.dr-tab{background:transparent;border:none;color:var(--muted,#9a958c);padding:7px 18px;border-radius:6px;font-size:13px;cursor:pointer;font-weight:500;}
.dr-tab.active{background:#c87945;color:#1a1916;}

.dr-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;min-height:600px;}

/* Stage list (left column) */
.dr-stage-col{display:flex;flex-direction:column;gap:8px;}
.dr-addstage,.dr-addseq{background:none;border:1px dashed rgba(200,121,69,.35);color:#c87945;padding:8px;border-radius:8px;font-size:12px;cursor:pointer;}
.dr-addstage{margin-bottom:4px;}
.dr-stage{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden;transition:all .15s;}
.dr-stage.open{border-color:rgba(200,121,69,.3);background:rgba(200,121,69,.04);}
.dr-stage-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;}
.dr-stage-head:hover{background:rgba(255,255,255,.02);}
.dr-stage-name{font-size:13px;font-weight:600;}
.dr-stage-meta{font-size:11px;color:var(--muted,#9a958c);margin-top:3px;}
.dr-stage-chev{color:var(--muted,#9a958c);font-size:14px;}
.dr-stage-seqs{padding:4px 10px 10px;display:flex;flex-direction:column;gap:4px;border-top:1px solid rgba(255,255,255,.05);}
.dr-seq-row{display:flex;align-items:center;gap:8px;padding:9px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:6px;cursor:pointer;transition:all .1s;}
.dr-seq-row:hover{background:rgba(255,255,255,.06);}
.dr-seq-row.on{background:rgba(200,121,69,.12);border-color:rgba(200,121,69,.4);}
.dr-seq-name{flex:1;font-size:12px;font-weight:500;}
.dr-tag-default{background:#c87945;color:#1a1916;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:600;}
.dr-tag-dup{background:rgba(255,255,255,.08);border:none;color:var(--muted,#9a958c);padding:1px 7px;border-radius:10px;font-size:10px;cursor:pointer;}
.dr-tag-dup:hover{color:#c87945;}

/* Detail (right column) */
.dr-detail{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:24px 28px;}
.dr-seq-view{display:flex;flex-direction:column;}
.dr-seq-title{font-size:18px;font-weight:600;text-align:center;margin-bottom:12px;}
.dr-trigger-pill{align-self:center;background:rgba(200,121,69,.12);border:1px solid rgba(200,121,69,.35);color:#c87945;padding:6px 14px;border-radius:20px;font-size:12px;margin-bottom:20px;}
.dr-trigger-pill b{color:#e8e6e1;margin-left:4px;}

.dr-timeline{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;}
.dr-drip-wrap{display:flex;flex-direction:column;align-items:center;width:100%;max-width:640px;}
.dr-drip-card{display:flex;align-items:center;gap:14px;width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .15s;}
.dr-drip-card:hover{border-color:rgba(200,121,69,.4);background:rgba(200,121,69,.04);}
.dr-drip-left{flex-shrink:0;}
.dr-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;font-size:16px;}
.dr-icon.email{background:rgba(96,165,250,.15);color:#60a5fa;}
.dr-icon.sms{background:rgba(107,191,115,.15);color:#6bbf73;}
.dr-icon.both{background:transparent;width:auto;gap:2px;}
.dr-icon.both .email{background:rgba(96,165,250,.15);color:#60a5fa;width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;}
.dr-icon.both .sms{background:rgba(107,191,115,.15);color:#6bbf73;width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;margin-left:2px;}
.dr-drip-body{flex:1;min-width:0;}
.dr-drip-timing{font-size:11px;color:var(--muted,#9a958c);display:flex;align-items:center;gap:8px;}
.dr-drip-timing b{color:#e8e6e1;font-weight:500;}
.dr-perf-inline{margin-left:auto;background:rgba(107,191,115,.15);color:#6bbf73;padding:1px 8px;border-radius:10px;font-size:10px;font-weight:600;}
.dr-drip-name{font-size:14px;font-weight:600;margin-top:4px;color:#c87945;}
.dr-drip-menu{background:none;border:none;color:var(--muted,#9a958c);font-size:18px;cursor:pointer;padding:4px 8px;}
.dr-connect{width:2px;height:24px;background:linear-gradient(180deg,rgba(200,121,69,.4),rgba(200,121,69,.15));}
.dr-add-drip{margin-top:12px;width:44px;height:44px;border-radius:50%;background:rgba(200,121,69,.1);border:1px dashed rgba(200,121,69,.4);color:#c87945;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dr-add-drip:hover{background:rgba(200,121,69,.2);}

.dr-save-bar{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:center;}
.cat-btn-primary.wide{padding:10px 40px;}

/* Editor (expanded card) */
.dr-editor{background:rgba(255,255,255,.03);border:1px solid rgba(200,121,69,.4);border-radius:10px;padding:18px 20px;width:100%;max-width:680px;display:flex;flex-direction:column;gap:14px;}
.dr-editor-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);}
.dr-editor-title{background:transparent;border:1px solid transparent;color:#e8e6e1;font-size:15px;font-weight:600;padding:4px 8px;border-radius:4px;flex:1;}
.dr-editor-title:focus{background:rgba(0,0,0,.25);border-color:rgba(200,121,69,.3);outline:none;}
.dr-editor-head-right{display:flex;align-items:center;gap:10px;}
.dr-perf{background:rgba(107,191,115,.15);color:#6bbf73;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;}
.dr-editor-timing,.dr-editor-channel{display:flex;align-items:center;gap:8px;font-size:12px;}
.dr-editor-timing label,.dr-editor-channel label{color:var(--muted,#9a958c);min-width:90px;}
.dr-channel-block{background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:14px;}
.dr-channel-block.email{border-left:3px solid #60a5fa;}
.dr-channel-block.sms{border-left:3px solid #6bbf73;}
.dr-channel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;font-weight:600;}
.dr-chan-icon{display:inline-block;margin-right:6px;}
.dr-chan-icon.sms{color:#6bbf73;}
.dr-sms-count{font-size:11px;color:var(--muted,#9a958c);margin-top:6px;text-align:right;}
.dr-sms-count b{color:#e8e6e1;}
.dr-keywords{background:rgba(200,121,69,.06);border:1px solid rgba(200,121,69,.2);border-radius:8px;padding:12px 14px;}
.dr-keywords-title{font-size:11px;color:#c87945;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:8px;}
.dr-keywords-list{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.dr-kw{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#c87945;padding:3px 8px;border-radius:4px;font-size:11px;font-family:ui-monospace,monospace;cursor:pointer;}
.dr-kw:hover{background:rgba(200,121,69,.15);border-color:rgba(200,121,69,.4);}
.dr-keywords-hint{font-size:11px;color:var(--muted,#9a958c);line-height:1.5;}
.dr-editor-foot{display:flex;justify-content:flex-end;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06);}

/* === Workflow Brain === */
.wf-page{padding:24px 28px;color:var(--text,#e8e6e1);}
.wf-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:12px 0 18px;}
.wf-stat{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:14px 16px;}
.wf-stat .k{font-size:11px;color:var(--muted,#9a958c);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.wf-stat .v{font-size:22px;font-weight:600;}
.wf-stat .v.good{color:#6bbf73;}
.wf-stat .d{font-size:11px;color:var(--muted,#9a958c);margin-top:3px;}

.wf-layout{display:grid;grid-template-columns:280px 1fr 320px;gap:14px;min-height:720px;}
.wf-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:720px;}
.wf-list-head{font-size:10px;color:var(--muted,#9a958c);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:2px;}
.wf-card{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-left:3px solid #c87945;border-radius:8px;padding:12px 14px;cursor:pointer;transition:all .15s;}
.wf-card:hover{background:rgba(255,255,255,.04);}
.wf-card.on{background:rgba(200,121,69,.08);border-color:rgba(200,121,69,.3);border-left-width:4px;}
.wf-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.wf-card-name{font-size:13px;font-weight:600;}
.wf-card-sub{font-size:11px;color:var(--muted,#9a958c);margin-top:4px;}
.wf-card-impact{font-size:11px;color:#6bbf73;margin-top:4px;font-weight:500;}
.wf-pill{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;text-transform:lowercase;}
.wf-pill.running{background:rgba(107,191,115,.15);color:#6bbf73;}
.wf-pill.attn{background:rgba(212,165,69,.15);color:#d4a545;}
.wf-pill.healthy{background:rgba(107,191,115,.15);color:#6bbf73;}
.wf-pill.degraded{background:rgba(212,165,69,.15);color:#d4a545;}

.wf-viz{background:radial-gradient(circle at center,rgba(200,121,69,.10) 0%,transparent 60%),#0f0e0c;border:1px solid rgba(255,255,255,.08);border-radius:12px;position:relative;min-height:720px;display:flex;flex-direction:column;}
.wf-canvas{width:100%;height:100%;flex:1;}
.wf-legend{position:absolute;bottom:12px;left:12px;display:flex;gap:14px;font-size:11px;color:var(--muted,#9a958c);background:rgba(0,0,0,.5);padding:8px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.06);}
.wf-legend > div{display:flex;align-items:center;gap:6px;}
.wf-dot{width:8px;height:8px;border-radius:50%;}
.wf-dot.read{background:#60a5fa;}
.wf-dot.act{background:#c87945;}
.wf-dot.good{background:#6bbf73;}
.wf-dot.attn{background:#d4a545;}

.wf-detail{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px 20px;overflow-y:auto;max-height:720px;}
.wf-wf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:14px;}
.wf-wf-name{font-size:15px;font-weight:600;line-height:1.3;}
.wf-trigger-box{background:rgba(200,121,69,.08);border:1px solid rgba(200,121,69,.2);border-radius:8px;padding:10px 12px;margin-bottom:10px;}
.wf-trigger-box .k{font-size:10px;color:#c87945;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:4px;}
.wf-trigger-box > div:nth-child(2){font-size:12px;line-height:1.4;}
.wf-impact-box{background:rgba(107,191,115,.06);border:1px solid rgba(107,191,115,.2);border-radius:8px;padding:10px 12px;margin-bottom:16px;}
.wf-impact-box .k{font-size:10px;color:#6bbf73;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:4px;}
.wf-impact-box > div:nth-child(2){font-size:13px;color:#6bbf73;font-weight:600;}
.wf-loop-title{font-size:10px;color:var(--muted,#9a958c);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:10px;}
.wf-steps{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.wf-step{display:flex;gap:10px;padding:9px 11px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:6px;border-left-width:3px;}
.wf-step.read{border-left-color:#60a5fa;}
.wf-step.decide{border-left-color:#a78bfa;}
.wf-step.act{border-left-color:#c87945;}
.wf-step.measure{border-left-color:#6bbf73;}
.wf-step.adjust{border-left-color:#d4a545;}
.wf-step-tag{font-size:9px;font-weight:700;letter-spacing:.08em;min-width:56px;padding-top:2px;}
.wf-step.read .wf-step-tag{color:#60a5fa;}
.wf-step.decide .wf-step-tag{color:#a78bfa;}
.wf-step.act .wf-step-tag{color:#c87945;}
.wf-step.measure .wf-step-tag{color:#6bbf73;}
.wf-step.adjust .wf-step-tag{color:#d4a545;}
.wf-step-body{flex:1;min-width:0;}
.wf-step-edge{font-size:12px;font-weight:600;}
.wf-step-desc{font-size:11px;color:var(--muted,#9a958c);margin-top:2px;line-height:1.4;}
.wf-self-improve{background:rgba(200,121,69,.06);border:1px solid rgba(200,121,69,.2);color:#c87945;padding:10px 12px;border-radius:6px;font-size:11px;font-style:italic;text-align:center;}

.wf-node-detail{display:flex;flex-direction:column;gap:12px;}
.wf-node-head{padding-bottom:12px;border-bottom:2px solid;margin-bottom:2px;}
.wf-node-dom{font-size:10px;letter-spacing:.08em;font-weight:700;margin-bottom:4px;}
.wf-node-name{font-size:15px;font-weight:600;margin-bottom:6px;}
.wf-node-metric{background:rgba(0,0,0,.2);padding:10px 12px;border-radius:6px;}
.wf-node-metric .k{font-size:10px;color:var(--muted,#9a958c);text-transform:uppercase;margin-bottom:3px;}
.wf-node-workflows{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.wf-node-workflows .k{font-size:10px;color:var(--muted,#9a958c);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:4px;}
.wf-node-wf{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.03);border-radius:6px;font-size:12px;cursor:pointer;}
.wf-node-wf:hover{background:rgba(200,121,69,.08);}
.wf-node-wf .rd{color:#60a5fa;font-weight:700;font-size:10px;min-width:34px;}
.wf-node-wf .ac{color:#c87945;font-weight:700;font-size:10px;min-width:34px;}
.cat-btn-ghost.full{width:100%;margin-top:8px;}

/* Edges page */
.edge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:14px;}
.edge-domain{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-top:3px solid;border-radius:10px;padding:16px 18px;}
.edge-domain-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.edge-domain-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.edge-domain-count{font-size:11px;color:var(--muted,#9a958c);}
.edge-nodes{display:flex;flex-direction:column;gap:8px;}
.edge-node{background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.04);border-radius:6px;padding:10px 12px;}
.edge-node-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.edge-node-name{font-size:12px;font-weight:600;}
.edge-dot{width:8px;height:8px;border-radius:50%;}
.edge-dot.healthy{background:#6bbf73;box-shadow:0 0 6px rgba(107,191,115,.5);}
.edge-dot.attn,.edge-dot.degraded{background:#d4a545;}
.edge-node-metric{font-size:11px;color:#c87945;}
.edge-node-ping{font-size:10px;color:var(--muted,#9a958c);margin-top:2px;}

/* === Edges AI Queue === */
.edge-queue-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:12px 0 14px;}
.edge-queue-stats .eqs{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px 14px;}
.edge-queue-stats .k{font-size:10px;color:#9a958c;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.edge-queue-stats .v{font-size:22px;font-weight:600;}
.edge-queue-stats .v.good{color:#6bbf73;}
.edge-queue-stats .d{font-size:11px;color:#9a958c;margin-top:2px;}

.edge-filter-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:16px;}
.edge-filter-pills{display:flex;gap:6px;}
.edge-pill{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);color:#e8e6e1;padding:6px 14px;border-radius:16px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:6px;}
.edge-pill:hover{background:rgba(255,255,255,.05);}
.edge-pill.on{background:rgba(200,121,69,.15);border-color:rgba(200,121,69,.4);color:#c87945;}
.edge-pill-c{background:rgba(0,0,0,.3);padding:1px 7px;border-radius:9px;font-size:10px;}
.edge-filter-hint{font-size:11px;color:#9a958c;font-style:italic;}

.edge-2col{display:grid;grid-template-columns:1fr 420px;gap:14px;}
.edge-queue{display:flex;flex-direction:column;gap:10px;}
.edge-queue-head{font-size:10px;color:#9a958c;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:4px;}
.edge-empty{background:rgba(107,191,115,.06);border:1px dashed rgba(107,191,115,.3);color:#6bbf73;padding:22px;border-radius:10px;text-align:center;font-size:13px;}

.sug{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;transition:all .25s;}
.sug:hover{border-color:rgba(200,121,69,.2);}
.sug.acted{opacity:0.5;transform:scale(0.98);}
.sug.acted.approved{border-color:rgba(107,191,115,.4);background:rgba(107,191,115,.06);}
.sug.acted.rejected{border-color:rgba(212,82,82,.3);background:rgba(212,82,82,.04);}
.sug-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.sug-tags{display:flex;gap:10px;align-items:center;font-size:10px;flex-wrap:wrap;}
.sug-edge{font-weight:700;letter-spacing:.06em;}
.sug-urg{font-weight:600;text-transform:uppercase;}
.sug-conf{color:#60a5fa;font-weight:500;}
.sug-ago{color:#9a958c;margin-left:auto;}
.sug-title{font-size:14px;font-weight:600;line-height:1.35;margin-bottom:10px;}
.sug-row{display:grid;grid-template-columns:62px 1fr;gap:10px;margin-bottom:6px;}
.sug-lbl{font-size:10px;color:#9a958c;letter-spacing:.08em;font-weight:700;padding-top:2px;}
.sug-txt{font-size:12px;line-height:1.45;color:#e8e6e1;}
.sug-txt.good{color:#6bbf73;font-weight:500;}
.sug-actions{display:flex;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05);flex-wrap:wrap;}
.sug-btn{padding:6px 14px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#e8e6e1;font-size:12px;cursor:pointer;font-weight:500;transition:all .12s;}
.sug-btn:hover{background:rgba(255,255,255,.06);}
.sug-btn.approve{background:rgba(107,191,115,.12);border-color:rgba(107,191,115,.3);color:#6bbf73;}
.sug-btn.approve:hover{background:rgba(107,191,115,.2);}
.sug-btn.reject{color:#d45252;}
.sug-btn.snooze{color:#9a958c;}
.sug-btn.auto{margin-left:auto;background:rgba(200,121,69,.08);border-color:rgba(200,121,69,.25);color:#c87945;}
.sug-btn.auto:hover{background:rgba(200,121,69,.15);}
.sug-acted-msg{margin-top:10px;padding:8px 12px;background:rgba(0,0,0,.25);border-radius:6px;font-size:12px;text-align:center;color:#9a958c;}
.sug.approved .sug-acted-msg{color:#6bbf73;}
.sug.rejected .sug-acted-msg{color:#d45252;}

.edge-right{max-height:calc(100vh - 280px);overflow-y:auto;padding-right:6px;}
.edge-policy-help{font-size:11px;color:#9a958c;margin-bottom:10px;line-height:1.4;}
.edge-domain-compact{margin-bottom:14px;padding-left:10px;border-left:2px solid;}
.edge-domain-compact .edge-domain-name{font-size:10px;font-weight:700;letter-spacing:.08em;margin-bottom:6px;}
.edge-row{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:6px;margin-bottom:4px;overflow:hidden;}
.edge-row.expanded{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}
.edge-row-main{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;}
.edge-row-main:hover{background:rgba(255,255,255,.02);}
.edge-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.edge-dot.healthy{background:#6bbf73;box-shadow:0 0 6px rgba(107,191,115,.5);}
.edge-dot.attn,.edge-dot.degraded{background:#d4a545;}
.edge-row-body{flex:1;min-width:0;}
.edge-row-name{font-size:12px;font-weight:600;}
.edge-row-sig{font-size:10px;color:#c87945;margin-top:1px;}
.edge-sug-badge{background:#d45252;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:8px;min-width:16px;text-align:center;}
.edge-pol{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);color:#e8e6e1;padding:3px 6px;border-radius:4px;font-size:10px;cursor:pointer;}
.edge-row-expand{border-top:1px solid rgba(255,255,255,.06);padding:10px;background:rgba(0,0,0,.2);}
.edge-row-detail{font-size:11px;color:#9a958c;display:flex;flex-direction:column;gap:6px;}
.edge-row-detail .k{color:#6b665e;margin-right:4px;}
.edge-row-sugs{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.edge-row-sugs .sug{padding:10px 12px;}

/* === Workflow Editor === */
.wf-inp{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);color:#e8e6e1;border-radius:4px;padding:6px 8px;font-size:12px;font-family:inherit;outline:none;width:100%;}
.wf-inp:focus{border-color:rgba(200,121,69,.5);background:rgba(0,0,0,.4);}
.wf-name-inp{font-size:15px;font-weight:600;flex:1;}
.wf-status-inp{width:auto;min-width:90px;}
.wf-trigger-inp{resize:vertical;line-height:1.4;}

.wf-loop-hint{font-size:9px;color:#6b665e;font-weight:400;font-style:italic;text-transform:none;letter-spacing:0;margin-left:8px;}
.wf-loop-title{display:flex;align-items:center;}

.wf-step.editing{padding:10px;gap:8px;border-left-width:4px;}
.wf-step-type-inp{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);color:#e8e6e1;border-radius:4px;padding:4px 6px;font-size:10px;font-weight:700;font-family:inherit;min-width:78px;height:fit-content;cursor:pointer;}
.wf-step.read .wf-step-type-inp{color:#60a5fa;}
.wf-step.decide .wf-step-type-inp{color:#a78bfa;}
.wf-step.act .wf-step-type-inp{color:#c87945;}
.wf-step.measure .wf-step-type-inp{color:#6bbf73;}
.wf-step.adjust .wf-step-type-inp{color:#d4a545;}
.wf-edge-inp{margin-bottom:4px;font-weight:500;}
.wf-desc-inp{font-size:11px;color:#9a958c;resize:vertical;}

.wf-step-ctrls{display:flex;flex-direction:column;gap:2px;flex-shrink:0;}
.wf-step-ctrls button{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#9a958c;width:22px;height:18px;border-radius:3px;font-size:9px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
.wf-step-ctrls button:hover:not(:disabled){background:rgba(200,121,69,.15);color:#c87945;}
.wf-step-ctrls button:disabled{opacity:0.3;cursor:not-allowed;}
.wf-step-ctrls button.del:hover{background:rgba(212,82,82,.15);color:#d45252;}

.wf-add-step-btn{background:transparent;border:1px dashed rgba(255,255,255,.15);color:#9a958c;padding:8px;border-radius:6px;font-size:11px;cursor:pointer;width:100%;margin-top:4px;}
.wf-add-step-btn:hover{border-color:rgba(200,121,69,.4);color:#c87945;}

/* Thresholds */
.wf-thresholds{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.wf-threshold{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:6px;padding:9px 12px;}
.wf-threshold-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.wf-threshold-k{font-size:11px;color:#e8e6e1;}
.wf-threshold-v{font-size:12px;color:#c87945;font-weight:600;font-variant-numeric:tabular-nums;}
.wf-threshold-range{width:100%;-webkit-appearance:none;appearance:none;height:4px;background:rgba(255,255,255,.1);border-radius:2px;outline:none;cursor:pointer;}
.wf-threshold-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#c87945;cursor:grab;border:2px solid #1a1916;}
.wf-threshold-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#c87945;cursor:grab;border:2px solid #1a1916;}
.wf-threshold-range-ro{}
.wf-threshold-track{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;}
.wf-threshold-fill{height:100%;background:linear-gradient(90deg,#c87945,#d4a545);border-radius:2px;}
.wf-threshold-bounds{display:flex;justify-content:space-between;font-size:9px;color:#6b665e;margin-top:3px;}
.wf-threshold-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:#e8e6e1;cursor:pointer;}

.wf-edit-actions{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05);}
.wf-edit-actions button{flex:1;}

/* === WF Self-Modification === */
.brain-btn{position:relative;}
.brain-badge{position:absolute;top:-4px;right:-4px;background:#d45252;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;}

.wf-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;justify-content:flex-end;backdrop-filter:blur(4px);animation:wfFade .15s;}
@keyframes wfFade{from{opacity:0;}to{opacity:1;}}
.wf-drawer{width:560px;max-width:90vw;background:#141311;border-left:1px solid rgba(200,121,69,.2);height:100vh;overflow-y:auto;padding:24px 28px;box-shadow:-8px 0 32px rgba(0,0,0,.4);animation:wfSlide .2s;}
@keyframes wfSlide{from{transform:translateX(30px);opacity:0;}to{transform:translateX(0);opacity:1;}}
.wf-drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:16px;}
.wf-drawer-eyebrow{font-size:10px;color:#c87945;font-weight:700;letter-spacing:.1em;margin-bottom:4px;}
.wf-drawer-title{font-size:18px;font-weight:600;color:#e8e6e1;margin-bottom:4px;}
.wf-drawer-sub{font-size:12px;color:#9a958c;line-height:1.45;}
.wf-drawer-close{background:transparent;border:1px solid rgba(255,255,255,.1);color:#9a958c;width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:14px;flex-shrink:0;}
.wf-drawer-close:hover{background:rgba(255,255,255,.05);color:#e8e6e1;}

/* Autonomy controls */
.wf-autonomy{background:rgba(200,121,69,.04);border:1px solid rgba(200,121,69,.15);border-radius:8px;padding:14px 16px;margin-bottom:16px;}
.wf-autonomy-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:6px 0;}
.wf-autonomy-row + .wf-autonomy-row{border-top:1px solid rgba(255,255,255,.04);}
.wf-autonomy-k{font-size:12px;font-weight:600;color:#e8e6e1;}
.wf-autonomy-d{font-size:11px;color:#9a958c;margin-top:2px;}
.wf-autonomy-range{padding-top:10px;margin-top:6px;border-top:1px solid rgba(255,255,255,.04);}
.wf-autonomy-range input[type=range]{width:100%;margin-top:8px;-webkit-appearance:none;appearance:none;height:4px;background:rgba(255,255,255,.1);border-radius:2px;outline:none;cursor:pointer;}
.wf-autonomy-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#c87945;cursor:grab;border:2px solid #1a1916;}

.wf-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
.wf-switch input{opacity:0;width:0;height:0;}
.wf-slider{position:absolute;inset:0;background:rgba(255,255,255,.15);border-radius:22px;cursor:pointer;transition:.2s;}
.wf-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#e8e6e1;border-radius:50%;transition:.2s;}
.wf-switch input:checked + .wf-slider{background:#c87945;}
.wf-switch input:checked + .wf-slider::before{transform:translateX(16px);}

.wf-drawer-section-h{font-size:10px;color:#9a958c;text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:10px;}

/* Proposals */
.wf-proposals{display:flex;flex-direction:column;gap:12px;}
.wf-proposal{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;}
.wf-proposal-head{margin-bottom:10px;}
.wf-proposal-tags{display:flex;gap:10px;align-items:center;margin-bottom:6px;}
.wf-sev{font-size:9px;font-weight:700;letter-spacing:.08em;padding:2px 8px;border-radius:10px;}
.wf-sev.tune{background:rgba(96,165,250,.15);color:#60a5fa;}
.wf-sev.structural{background:rgba(167,139,250,.15);color:#a78bfa;}
.wf-sev.guard{background:rgba(212,165,69,.15);color:#d4a545;}
.wf-conf{font-size:10px;color:#60a5fa;font-weight:500;}
.wf-ago{font-size:10px;color:#9a958c;}
.wf-proposal-title{font-size:14px;font-weight:600;line-height:1.35;}
.wf-proposal-row{display:grid;grid-template-columns:90px 1fr;gap:10px;margin-bottom:8px;}
.wf-proposal-lbl{font-size:9px;color:#9a958c;letter-spacing:.08em;font-weight:700;padding-top:2px;}
.wf-proposal-txt{font-size:11px;line-height:1.5;color:#e8e6e1;}
.wf-proposal-txt.good{color:#6bbf73;font-weight:500;}
.wf-proposal-txt.dim{color:#9a958c;font-style:italic;}
.wf-proposal-diff{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.05);border-radius:6px;padding:10px 12px;margin-bottom:8px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
.wf-diff-row{display:flex;align-items:center;gap:8px;font-size:11px;padding:3px 0;flex-wrap:wrap;}
.wf-diff-row.add{background:rgba(107,191,115,.06);padding:6px 8px;border-radius:4px;margin:2px 0;}
.wf-diff-sign{color:#6bbf73;font-weight:700;}
.wf-diff-k{color:#e8e6e1;font-weight:500;}
.wf-diff-from{color:#d45252;text-decoration:line-through;}
.wf-diff-arrow{color:#9a958c;}
.wf-diff-to{color:#6bbf73;font-weight:600;}
.wf-step-tag.tiny{font-size:9px;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.05);}
.wf-step-tag.tiny.read{color:#60a5fa;}
.wf-step-tag.tiny.decide{color:#a78bfa;}
.wf-step-tag.tiny.act{color:#c87945;}
.wf-step-tag.tiny.measure{color:#6bbf73;}
.wf-step-tag.tiny.adjust{color:#d4a545;}
.wf-diff-edge{color:#c87945;font-size:11px;font-weight:500;}
.wf-diff-desc{width:100%;margin-top:4px;font-family:inherit;font-size:11px;color:#9a958c;padding-left:20px;line-height:1.4;}

/* Learning log */
.wf-log{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.wf-log-entry{display:grid;grid-template-columns:80px 1fr auto;gap:12px;padding:10px 12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:6px;align-items:center;}
.wf-log-when{font-size:10px;color:#9a958c;}
.wf-log-change{font-size:12px;color:#e8e6e1;}
.wf-log-outcome{font-size:11px;color:#6bbf73;margin-top:2px;}
.wf-log-badge{font-size:9px;padding:3px 8px;border-radius:10px;font-weight:600;letter-spacing:.04em;}
.wf-log-badge.auto{background:rgba(200,121,69,.15);color:#c87945;}
.wf-log-badge.approved{background:rgba(107,191,115,.15);color:#6bbf73;}
.wf-log-stats{display:flex;gap:20px;padding:12px 14px;background:rgba(0,0,0,.25);border-radius:6px;font-size:11px;color:#9a958c;}
.wf-log-stats b{color:#e8e6e1;margin-right:4px;}

/* === WF Delete/Add === */
.wf-confirm{background:#141311;border:1px solid rgba(212,82,82,.3);border-radius:12px;padding:28px 32px;max-width:440px;margin:auto;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.wf-confirm-icon{font-size:36px;margin-bottom:12px;color:#d45252;}
.wf-confirm-title{font-size:18px;font-weight:600;color:#e8e6e1;margin-bottom:10px;}
.wf-confirm-body{font-size:13px;color:#9a958c;line-height:1.5;margin-bottom:22px;}
.wf-confirm-actions{display:flex;gap:10px;justify-content:center;}
.wf-confirm-actions button{min-width:140px;}
.cat-btn-primary.danger{background:#d45252;border-color:#d45252;color:#fff;}
.cat-btn-primary.danger:hover{background:#b83e3e;}
.del-btn{color:#d45252;border-color:rgba(212,82,82,.2);}
.del-btn:hover{background:rgba(212,82,82,.08);border-color:rgba(212,82,82,.4);}
.wf-domain-picker{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:8px 0;}
.wf-domain-k{font-size:10px;color:#9a958c;text-transform:uppercase;letter-spacing:.06em;font-weight:700;min-width:60px;}
.wf-confirm{margin:auto auto;align-self:center;}

/* === WF Zoom === */
.wf-viz{position:relative;}
.wf-canvas{cursor:default;user-select:none;touch-action:none;}
.wf-canvas.zoomed{cursor:grab;}
.wf-canvas.panning{cursor:grabbing;}
.wf-zoom-ctrls{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:4px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:4px;z-index:5;backdrop-filter:blur(6px);}
.wf-zoom-ctrls button{width:28px;height:28px;background:transparent;border:none;color:#e8e6e1;font-size:16px;cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center;}
.wf-zoom-ctrls button:hover{background:rgba(200,121,69,.15);color:#c87945;}
.wf-zoom-pct{font-size:10px;text-align:center;color:#9a958c;font-variant-numeric:tabular-nums;padding:2px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.wf-zoom-reset{border-top:1px solid rgba(255,255,255,.06);color:#c87945 !important;}

/* === Compliance === */
.cmp-page{padding:24px 28px 60px;max-width:1440px;margin:0 auto;}
.cmp-alerts{display:flex;flex-direction:column;gap:10px;margin:16px 0 18px;}
.cmp-alert{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:8px;border:1px solid;}
.cmp-alert.bad{background:rgba(212,82,82,.08);border-color:rgba(212,82,82,.35);color:#e8e6e1;}
.cmp-alert.warn{background:rgba(212,165,69,.06);border-color:rgba(212,165,69,.3);color:#e8e6e1;}
.cmp-alert-ic{font-size:20px;width:32px;text-align:center;}
.cmp-alert.bad .cmp-alert-ic{color:#d45252;}
.cmp-alert.warn .cmp-alert-ic{color:#d4a545;}
.cmp-alert-sub{font-size:11px;color:#9a958c;margin-top:2px;}
.cmp-alert > div:nth-child(2){flex:1;}
.cmp-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px;}
.cmp-stat{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:14px 16px;}
.cmp-stat .k{font-size:10px;color:#9a958c;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:6px;}
.cmp-stat .v{font-size:22px;font-weight:600;color:#e8e6e1;font-variant-numeric:tabular-nums;}
.cmp-stat .v.good{color:#6bbf73;}
.cmp-stat .v.bad{color:#d45252;}
.cmp-stat .d{font-size:10px;color:#6b665e;margin-top:4px;}

.cmp-layout{display:grid;grid-template-columns:290px 1fr;gap:18px;}
.cmp-rail{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px;}
.cmp-rail-head{font-size:10px;color:#9a958c;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:4px 8px 8px;}
.cmp-folder{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:6px;cursor:pointer;border-left:3px solid transparent;margin-bottom:2px;}
.cmp-folder:hover{background:rgba(255,255,255,.03);}
.cmp-folder.on{background:rgba(200,121,69,.08);}
.cmp-folder-ic{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.cmp-folder-body{flex:1;min-width:0;}
.cmp-folder-name{font-size:12px;font-weight:600;color:#e8e6e1;margin-bottom:3px;}
.cmp-folder-meta{display:flex;gap:6px;align-items:center;font-size:10px;color:#9a958c;}
.cmp-pill{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;font-size:9px;font-weight:700;}
.cmp-pill.bad{background:#d45252;color:#fff;}
.cmp-pill.warn{background:#d4a545;color:#1a1916;}
.cmp-chip{background:rgba(107,191,115,.12);color:#6bbf73;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:600;}
.cmp-expiring{display:flex;flex-direction:column;gap:4px;}
.cmp-exp{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:8px 10px;border-radius:6px;cursor:pointer;align-items:center;}
.cmp-exp:hover{background:rgba(255,255,255,.03);}
.cmp-exp-days{font-size:13px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;}
.cmp-exp-days.ok{color:#6bbf73;}
.cmp-exp-days.warn{color:#d4a545;}
.cmp-exp-days.bad{color:#d45252;}
.cmp-exp-name{font-size:11px;color:#e8e6e1;}
.cmp-exp-exp{font-size:10px;color:#6b665e;}

.cmp-main{display:flex;flex-direction:column;gap:14px;}
.cmp-folder-hero{display:flex;align-items:center;gap:16px;padding:18px 22px;background:rgba(255,255,255,.02);border:1px solid;border-radius:10px;}
.cmp-folder-hero-ic{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;}
.cmp-folder-hero-name{font-size:17px;font-weight:600;color:#e8e6e1;margin-bottom:4px;}
.cmp-folder-hero-desc{font-size:12px;color:#9a958c;line-height:1.5;max-width:560px;}
.cmp-customer-tag{display:flex;align-items:center;gap:10px;background:rgba(107,191,115,.08);border:1px solid rgba(107,191,115,.2);border-radius:8px;padding:8px 12px;}
.cmp-ct-k{font-size:11px;color:#6bbf73;font-weight:600;}
.cmp-ct-d{font-size:10px;color:#9a958c;}
.cmp-search-row{display:flex;gap:10px;align-items:center;}
.cmp-search{flex:1;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);color:#e8e6e1;padding:10px 14px;border-radius:6px;font-size:12px;outline:none;}
.cmp-search:focus{border-color:rgba(200,121,69,.4);}

.cmp-doc-list{display:flex;flex-direction:column;gap:8px;}
.cmp-doc{display:grid;grid-template-columns:52px 1fr auto auto;gap:16px;padding:14px 16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:8px;align-items:center;cursor:pointer;transition:background .12s;}
.cmp-doc:hover{background:rgba(255,255,255,.04);}
.cmp-doc.on{border-color:rgba(200,121,69,.3);background:rgba(200,121,69,.04);}
.cmp-doc-icon{width:40px;height:50px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.05em;}
.cmp-doc-name{font-size:13px;font-weight:600;color:#e8e6e1;margin-bottom:4px;}
.cmp-doc-meta{display:flex;gap:6px;align-items:center;font-size:10px;color:#9a958c;margin-bottom:6px;}
.cmp-doc-fname{font-family:ui-monospace,"SF Mono",Menlo,monospace;color:#c87945;}
.cmp-doc-sep{color:#40403c;}
.cmp-doc-tags{display:flex;gap:5px;flex-wrap:wrap;}
.cmp-tag{background:rgba(255,255,255,.04);color:#9a958c;font-size:9px;padding:2px 7px;border-radius:8px;letter-spacing:.02em;}
.cmp-doc-exp{text-align:center;min-width:80px;}
.cmp-doc-exp-date{font-size:9px;color:#6b665e;margin-top:3px;}
.cmp-doc-perm{font-size:11px;color:#6bbf73;font-weight:500;}
.cmp-doc-actions{display:flex;gap:4px;}
.cmp-doc-actions button{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:#9a958c;width:28px;height:28px;border-radius:5px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;}
.cmp-doc-actions button:hover{background:rgba(200,121,69,.12);color:#c87945;border-color:rgba(200,121,69,.25);}


/* ═══════════════════════════════════════════════════════════════
   ESTIMATE WIZARD — centered modal, 6 steps
   ═══════════════════════════════════════════════════════════════ */

.ew-backdrop{
  position:fixed; inset:0; z-index:1000;
  background:oklch(0.08 0.01 260 / 0.78);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:40px 24px; overflow-y:auto;
  animation: ew-fade .18s ease-out;
}
@keyframes ew-fade { from { opacity:0; } to { opacity:1; } }

.ew-modal{
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
  width:100%;
  max-width: 780px;
  display:flex; flex-direction:column;
  max-height: calc(100vh - 80px);
  overflow:hidden;
  transition: max-width .4s cubic-bezier(.2,.9,.25,1.1);
  animation: ew-in .32s cubic-bezier(.2,.9,.25,1.1);
}
.ew-modal.step-1 { max-width: 880px; }
.ew-modal.step-2 { max-width: 820px; }
.ew-modal.step-3 { max-width: 900px; }
.ew-modal.step-4 { max-width: 960px; }
.ew-modal.step-5 { max-width: 780px; }
.ew-modal.step-6 { max-width: 1240px; }

@keyframes ew-in { from { opacity:0; transform:scale(0.96) translateY(10px); } to { opacity:1; transform:none; } }

/* ── HEAD ── */

.ew-head{
  display:flex; align-items:flex-start; gap:20px;
  padding: 22px 28px 18px;
  border-bottom:1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.ew-head-left { min-width: 150px; }
.ew-head-eyebrow{
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.ew-head-title{
  font: 500 24px/1.1 var(--font-display);
  color: var(--text);
  letter-spacing:-0.01em;
}
.ew-stepper{
  flex:1;
  display:flex; align-items:center;
  gap:0;
  padding-top: 4px;
}
.ew-step{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.ew-step:last-child { flex: 0; }
.ew-step-dot{
  width:26px; height:26px; border-radius:50%;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  color: var(--text-faint);
  display:flex; align-items:center; justify-content:center;
  font: 600 12px/1 var(--font-mono);
  flex-shrink:0;
  transition: all .25s ease;
}
.ew-step-label{
  font: 500 11px/1 var(--font-mono);
  letter-spacing:.1em; text-transform:uppercase;
  color: var(--text-faint);
  white-space:nowrap;
  transition: color .25s ease;
}
.ew-step-bar{
  flex:1; height:2px; min-width:20px;
  background: var(--border);
  margin: 0 8px;
  border-radius:1px;
  position:relative; overflow:hidden;
}
.ew-step.done .ew-step-dot{ background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.ew-step.done .ew-step-label{ color: var(--text-dim); }
.ew-step.done .ew-step-bar{ background: var(--accent); }
.ew-step.active .ew-step-dot{
  background: var(--accent-ghost); color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px oklch(0.78 0.14 var(--accent-h) / 0.12);
}
.ew-step.active .ew-step-label{ color: var(--text); }

.ew-close{
  flex-shrink:0;
  width:32px; height:32px; border-radius:8px;
  background: var(--bg-2); border:1px solid var(--border);
  color: var(--text-dim); cursor:pointer;
  font-size: 14px;
  display:flex; align-items:center; justify-content:center;
  transition: all .15s;
}
.ew-close:hover{ background: var(--bg-0); color: var(--text); border-color: var(--border); }

/* ── BODY ── */

.ew-body{
  flex:1;
  overflow-y:auto;
  padding: 24px 28px;
}

/* ── FOOT ── */

.ew-foot{
  display:flex; align-items:center; gap:16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(0deg, rgba(255,255,255,0.015), transparent);
}
.ew-foot-left { min-width: 120px; }
.ew-foot-hint{
  flex:1;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align:center;
  max-width: 520px;
  margin: 0 auto;
}
.ew-foot-hint b { color: var(--text); }
.ew-foot-right { display:flex; gap:8px; min-width: 120px; justify-content:flex-end; }

.ew-btn{
  font: 500 13px/1 var(--font-ui);
  padding: 10px 18px;
  border-radius: 9px;
  border:1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.ew-btn:hover { background: var(--bg-0); border-color: var(--text-faint); }
.ew-btn.ghost{ background: transparent; }
.ew-btn.ghost:hover{ background: var(--bg-2); }
.ew-btn.primary{
  background: var(--accent); color: var(--accent-fg);
  border-color: var(--accent);
  font-weight:600;
  box-shadow: 0 2px 0 oklch(0.55 0.09 var(--accent-h));
}
.ew-btn.primary:hover { filter: brightness(1.08); }
.ew-btn.primary.dis { opacity: 0.38; cursor: not-allowed; box-shadow:none; }
.ew-btn.sm { padding: 7px 12px; font-size: 12px; }
.ew-btn.xs { padding: 5px 10px; font-size: 11.5px; }

/* ── INPUTS ── */

.ew-input{
  width:100%;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font: 400 13.5px/1.3 var(--font-ui);
  outline: none;
  transition: border-color .15s;
}
.ew-input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ghost); }
.ew-input.big{ padding: 14px 16px; font-size: 15px; }

.ew-textarea{
  width:100%;
  background: var(--bg-0);
  border:1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font: 400 13.5px/1.55 var(--font-ui);
  outline:none;
  resize: vertical;
  transition: border-color .15s;
}
.ew-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ghost); }

.ew-field{ display:flex; flex-direction:column; gap:6px; }
.ew-field.full { grid-column: 1 / -1; }
.ew-field-label{
  font: 500 11px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color: var(--text-faint);
}

/* ══════════════ STEP 1 · TYPE ══════════════ */

.ew-s1-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ew-type-card{
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px 16px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: all .18s ease;
  display:flex; flex-direction:column; gap:6px;
}
.ew-type-card:hover{
  background: var(--bg-2);
  border-color: var(--text-faint);
  transform: translateY(-1px);
}
.ew-type-card.sel{
  background: var(--accent-ghost);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.78 0.14 var(--accent-h) / 0.15);
}
.ew-type-icon{
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
  filter: saturate(0.85);
}
.ew-type-label{
  font: 500 15px/1.2 var(--font-ui);
  color: var(--text);
  margin-bottom: 2px;
}
.ew-type-desc{
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.ew-type-min{
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing:.05em;
  color: var(--text-faint);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
}
.ew-type-card.sel .ew-type-min{ color: var(--accent); border-top-color: oklch(0.78 0.14 var(--accent-h) / 0.3); }
.ew-type-check{
  position:absolute; top:10px; right:10px;
  width:20px; height:20px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  display:flex; align-items:center; justify-content:center;
  font: 700 11px/1 var(--font-mono);
}

.ew-s1-footnote{
  display:flex; gap:12px;
  margin-top: 20px;
  padding: 14px 16px;
  background: oklch(0.78 0.09 230 / 0.08);
  border: 1px solid oklch(0.78 0.09 230 / 0.25);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.ew-s1-footnote span:first-child{ color: var(--info); font-size: 16px; flex-shrink:0; }
.ew-s1-footnote b { color: var(--text); }

/* ══════════════ STEP 2 · SCOPE ══════════════ */

.ew-s2{ display:flex; flex-direction:column; gap: 22px; }
.ew-s2-section{ display:flex; flex-direction:column; gap:10px; }
.ew-s2-label{
  font: 500 12.5px/1.2 var(--font-ui);
  color: var(--text);
  display:flex; align-items:center; gap:6px;
}
.ew-s2-hint{ color: var(--text-faint); font-weight:400; font-size: 11.5px; }
.ew-scope-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ew-scope-chip{
  background: var(--bg-1);
  border:1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  text-align:left;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  display:flex; flex-direction:column; gap:3px;
}
.ew-scope-chip:hover{ background: var(--bg-2); border-color: var(--text-faint); }
.ew-scope-chip.sel{
  background: var(--accent-ghost);
  border-color: var(--accent);
}
.ew-scope-chip-label{ font-size: 12.5px; font-weight: 500; }
.ew-scope-chip-hint{ font-size: 11px; color: var(--text-faint); }
.ew-scope-chip.sel .ew-scope-chip-hint { color: oklch(0.78 0.14 var(--accent-h) / 0.85); }

.ew-s2-ai-hint{
  font-size: 12px;
  color: var(--text-dim);
  padding: 10px 12px;
  background: oklch(0.78 0.14 var(--accent-h) / 0.06);
  border: 1px dashed oklch(0.78 0.14 var(--accent-h) / 0.28);
  border-radius: 8px;
}
.ew-s2-ai-hint span{ color: var(--accent); margin-right: 4px; }
.ew-s2-ai-hint b { color: var(--text); }

/* ══════════════ STEP 3 · PHOTOS ══════════════ */

.ew-s3 { display: flex; flex-direction:column; gap: 20px; }

.ew-drop{
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  padding: 32px 24px 24px;
  background: radial-gradient(ellipse at center, oklch(0.78 0.14 var(--accent-h) / 0.04), transparent 70%), var(--bg-1);
  text-align:center;
  transition: border-color .2s;
}
.ew-drop:hover{ border-color: var(--accent); }
.ew-drop-icon{ font-size: 34px; margin-bottom: 8px; }
.ew-drop-title{ font: 500 18px/1.2 var(--font-display); color: var(--text); margin-bottom: 4px; }
.ew-drop-sub{ font-size: 12px; color: var(--text-faint); margin-bottom: 16px; }
.ew-drop-actions{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom: 18px; }
.ew-drop-or{
  font: 500 10.5px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color: var(--text-faint);
  margin: 14px 0 8px;
  position:relative;
}
.ew-drop-or::before, .ew-drop-or::after{
  content: ''; display: inline-block;
  width: 60px; height:1px; background: var(--border);
  vertical-align: middle;
  margin: 0 12px;
}

.ew-photo-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ew-photo-tile{
  position:relative;
  background: var(--bg-1);
  border:1px solid var(--border);
  border-radius: 10px;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.ew-photo-thumb{
  aspect-ratio: 4/3;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.ew-photo-meta{ padding: 8px 10px; }
.ew-photo-name{
  font: 500 11.5px/1.2 var(--font-mono);
  color: var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ew-photo-size{ font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.ew-photo-x{
  position:absolute; top:6px; right:6px;
  width: 22px; height:22px; border-radius:50%;
  background: oklch(0.18 0.01 260 / 0.78);
  border:none; color:#fff; cursor:pointer;
  font-size: 10px;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
}
.ew-photo-x:hover{ background: var(--bad); }
.ew-photo-tag{
  position:absolute; top:6px; left:6px;
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase;
  padding: 4px 7px; border-radius: 5px;
  background: oklch(0.18 0.01 260 / 0.78);
  color: #fff;
  backdrop-filter: blur(4px);
}

.ew-s3-ai-nudge{
  display:flex; gap:12px;
  padding: 14px 16px;
  background: oklch(0.78 0.14 var(--accent-h) / 0.08);
  border: 1px solid oklch(0.78 0.14 var(--accent-h) / 0.28);
  border-radius: 10px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-dim);
}
.ew-s3-nudge-icon{ color: var(--accent); font-size: 16px; flex-shrink: 0; }
.ew-s3-ai-nudge b { color: var(--text); }

/* ══════════════ STEP 4 · ADDRESS ══════════════ */

.ew-s4{ display:flex; flex-direction:column; gap: 16px; }
.ew-s4-search{ display:flex; align-items:center; gap:14px; }
.ew-s4-match-count{
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.ew-s4-matches{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.ew-match-card{
  position:relative;
  background: var(--bg-1);
  border:1px solid var(--border);
  border-radius: 12px;
  overflow:hidden;
  text-align:left;
  color: var(--text);
  cursor:pointer;
  transition: all .18s;
  padding:0;
  display:flex; flex-direction:column;
}
.ew-match-card:hover{ border-color: var(--text-faint); transform:translateY(-1px); }
.ew-match-card.sel{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.78 0.14 var(--accent-h) / 0.15);
}
.ew-match-sat{
  position:relative;
  aspect-ratio: 24/14;
  background: #2a3a2a;
  overflow:hidden;
}
.ew-match-parcel-tag{
  position:absolute; top: 8px; left:8px;
  font: 600 10px/1 var(--font-mono);
  padding: 4px 7px; border-radius:5px;
  background: oklch(0.1 0.01 260 / 0.7);
  color: #d8e2c8; letter-spacing:.05em;
  backdrop-filter: blur(4px);
}
.ew-match-conf{
  position:absolute; top: 8px; right:8px;
  font: 600 10px/1 var(--font-mono);
  padding: 4px 7px; border-radius: 5px;
  background: oklch(0.78 0.12 150 / 0.22);
  color: var(--good);
  border: 1px solid oklch(0.78 0.12 150 / 0.4);
}
.ew-match-info{ padding: 14px; display:flex; flex-direction:column; gap:12px; }
.ew-match-line1{ font: 500 15px/1.2 var(--font-ui); color: var(--text); }
.ew-match-line2{ font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.ew-match-facts{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
}
.ew-match-facts > div{ display:flex; flex-direction:column; gap:2px; }
.ew-match-facts span{
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-faint);
}
.ew-match-facts b{ font-size: 12px; color: var(--text); font-weight: 500; }
.ew-match-check{
  position:absolute; bottom: 12px; right: 12px;
  font: 600 11px/1 var(--font-mono);
  padding: 5px 9px; border-radius: 5px;
  background: var(--accent); color: var(--accent-fg);
}

.ew-s4-note{
  display:flex; gap:10px;
  padding: 11px 14px;
  background: var(--bg-1);
  border:1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 12px; color: var(--text-dim);
}
.ew-s4-note span:first-child{ color: var(--accent); }
.ew-s4-note b { color: var(--text); }

/* ══════════════ STEP 5 · CUSTOMER ══════════════ */

.ew-s5{ display:flex; flex-direction:column; gap: 18px; }
.ew-s5-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ew-radio-row{ display:flex; gap:6px; flex-wrap:wrap; }
.ew-radio{
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font: 500 12px/1 var(--font-ui);
  cursor: pointer;
  transition: all .15s;
  text-transform: capitalize;
}
.ew-radio:hover { border-color: var(--text-faint); color: var(--text); }
.ew-radio.sel { background: var(--accent-ghost); border-color: var(--accent); color: var(--accent); }

.ew-consent{
  display:flex; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-1);
  border:1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
  cursor: pointer;
}
.ew-consent input { margin-top: 3px; cursor: pointer; accent-color: var(--accent); }
.ew-consent b { color: var(--text); }
.ew-consent-legal{ display:block; font-size: 11px; color: var(--text-faint); margin-top: 4px; }

.ew-s5-dupe{
  display:flex; gap:10px;
  padding: 11px 14px;
  background: oklch(0.78 0.12 150 / 0.08);
  border:1px solid oklch(0.78 0.12 150 / 0.28);
  border-radius: 8px;
  font-size: 12px; color: var(--text-dim);
}
.ew-s5-dupe span:first-child{ color: var(--good); }
.ew-s5-dupe b { color: var(--text); }
.ew-s5-dupe code{
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-0); padding: 1px 5px; border-radius: 3px;
  color: var(--accent);
}

/* ══════════════ STEP 6 · PROPOSAL — thinking ══════════════ */

.ew-s6-thinking{
  display:flex; flex-direction:column; align-items:center;
  padding: 50px 20px 40px;
  text-align: center;
  gap: 14px;
  min-height: 420px;
  justify-content: center;
}
.ew-thinking-orb{
  position:relative;
  width: 110px; height: 110px;
  margin-bottom: 10px;
}
.ew-thinking-ring{
  position:absolute; inset: 0;
  border: 1.5px solid transparent;
  border-top-color: var(--accent);
  border-right-color: oklch(0.78 0.14 var(--accent-h) / 0.4);
  border-radius: 50%;
  animation: ew-spin 2.4s linear infinite;
}
.ew-thinking-ring.r1 { inset: 0; }
.ew-thinking-ring.r2 { inset: 14px; animation-duration: 1.6s; animation-direction: reverse; border-top-color: oklch(0.78 0.14 var(--accent-h) / 0.7); }
.ew-thinking-ring.r3 { inset: 28px; animation-duration: 1.1s; border-top-color: oklch(0.78 0.14 var(--accent-h) / 0.5); }
.ew-thinking-core{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size: 28px; color: var(--accent);
  animation: ew-pulse 2s ease-in-out infinite;
}
@keyframes ew-spin { to { transform: rotate(360deg); } }
@keyframes ew-pulse { 50% { transform: scale(1.15); } }

.ew-thinking-title{
  font: 500 22px/1.2 var(--font-display);
  color: var(--text);
}
.ew-thinking-sub{
  font-size: 13px;
  color: var(--text-dim);
  max-width: 380px;
}
.ew-thinking-log{
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--bg-1);
  border:1px solid var(--border-soft);
  border-radius: 10px;
  min-width: 420px;
  max-width: 520px;
  text-align:left;
  display:flex; flex-direction:column; gap: 7px;
  font: 400 12.5px/1.4 var(--font-mono);
  color: var(--text-dim);
}
.ew-thinking-line{
  display:flex; gap:8px;
  animation: ew-line-in .28s ease-out;
}
@keyframes ew-line-in { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } }
.ew-thinking-check{ color: var(--good); flex-shrink:0; }
.ew-thinking-pulse{
  display:flex; gap:4px; align-items:center;
  padding: 2px 0 2px 22px;
}
.ew-thinking-pulse span{
  width: 4px; height:4px; border-radius:50%;
  background: var(--accent);
  animation: ew-dot 1.1s ease-in-out infinite;
}
.ew-thinking-pulse span:nth-child(2){ animation-delay: .15s; }
.ew-thinking-pulse span:nth-child(3){ animation-delay: .3s; }
@keyframes ew-dot { 0%,80%,100% { opacity: .25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } }

/* ══════════════ STEP 6 · PROPOSAL — ready ══════════════ */

.ew-s6{
  display:grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: flex-start;
}

.ew-prop{
  background: var(--bg-1);
  border:1px solid var(--border);
  border-radius: 12px;
  overflow:hidden;
}
.ew-prop-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid var(--border-soft);
}
.ew-prop-eyebrow{
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.ew-prop-title{
  font: 500 22px/1.2 var(--font-display);
  color: var(--text); letter-spacing:-0.005em;
  margin-bottom: 6px;
}
.ew-prop-meta{ font-size: 12px; color: var(--text-dim); }
.ew-prop-meta b { color: var(--text); }
.ew-prop-brand{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.ew-prop-brand-mark{
  width: 40px; height:40px; border-radius: 8px;
  background: var(--accent); color: var(--accent-fg);
  display:flex; align-items:center; justify-content:center;
  font: 700 14px/1 var(--font-mono); letter-spacing: .05em;
  margin-bottom: 4px;
}
.ew-prop-brand-name{ font: 500 13px/1.2 var(--font-display); color: var(--text); }
.ew-prop-brand-sub{ font: 500 10px/1 var(--font-mono); letter-spacing:.08em; color: var(--text-faint); }

/* EagleView strip */
.ew-prop-eagleview{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-soft);
  align-items:stretch;
}
.ew-prop-ev-sat{
  position:relative;
  border-radius: 10px; overflow:hidden;
  border: 1px solid var(--border);
  min-height: 130px;
}
.ew-prop-ev-badge{
  position:absolute; top:8px; left:8px;
  font: 600 10px/1 var(--font-mono); letter-spacing:.08em;
  padding: 4px 8px; border-radius: 5px;
  background: oklch(0.1 0.01 260 / 0.78);
  color: var(--accent);
  backdrop-filter: blur(4px);
}
.ew-prop-ev-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 14px;
  align-content: center;
}
.ew-prop-ev-stat{
  padding: 10px 12px;
  background: var(--bg-0);
  border:1px solid var(--border-soft);
  border-radius: 8px;
}
.ew-prop-ev-n{
  font: 500 20px/1.1 var(--font-display);
  color: var(--text);
}
.ew-prop-ev-n span{ font-size: 12px; color: var(--text-faint); margin-left: 1px; }
.ew-prop-ev-l{
  font: 500 10px/1 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}

.ew-prop-section{
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-soft);
}
.ew-prop-section:last-child{ border-bottom: none; }
.ew-prop-section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap: 10px;
  margin-bottom: 10px;
}
.ew-prop-section-title{
  font: 500 13px/1 var(--font-ui);
  color: var(--text);
  letter-spacing:.005em;
}
.ew-prop-section-sub{
  font-size: 11px; color: var(--text-faint);
}
.ew-prop-section-sub b { color: var(--text-dim); }

.ew-prop-copy{
  font: 400 13.5px/1.65 var(--font-ui);
  color: var(--text);
  white-space: pre-wrap;
  padding: 14px 16px;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  max-width: 66ch;
}

.ew-prop-photos{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.ew-prop-photo{
  aspect-ratio: 1/1;
  border-radius: 6px;
  border:1px solid var(--border-soft);
}

.ew-prop-plan{
  margin: 0; padding-left: 20px;
  font-size: 13px; line-height: 1.6;
  color: var(--text-dim);
  counter-reset: plan;
  list-style: none;
}
.ew-prop-plan li{
  position: relative;
  counter-increment: plan;
  padding: 4px 0 4px 8px;
  margin-left: -20px;
  padding-left: 30px;
}
.ew-prop-plan li::before{
  content: counter(plan, decimal-leading-zero);
  position: absolute; left: 0; top: 4px;
  font: 500 10.5px/1.6 var(--font-mono);
  color: var(--accent);
  letter-spacing: .05em;
}

/* Line items */
.ew-line-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.ew-line-table th{
  text-align: left;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing:.1em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.ew-line-table th.n, .ew-line-table td.n { text-align: right; }
.ew-line-table td{
  padding: 10px 6px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.ew-line-thumb{ width: 40px; }
.ew-line-thumb > div{
  width: 34px; height: 34px;
  border-radius: 6px;
  border:1px solid var(--border-soft);
}
.ew-line-name{ line-height: 1.3; }
.ew-line-n1{ color: var(--text); font-weight: 500; margin-bottom: 2px; }
.ew-line-n2{ font: 500 10px/1 var(--font-mono); letter-spacing:.04em; color: var(--text-faint); }
.ew-line-input{
  width: 75px;
  padding: 5px 8px;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  color: var(--text);
  font: 500 12px/1.1 var(--font-mono);
  text-align: right;
  outline: none;
}
.ew-line-input:focus { border-color: var(--accent); }
.ew-line-x{
  background: transparent; border: none; color: var(--text-faint); cursor: pointer;
  width: 20px; height:20px; border-radius: 4px;
  font-size: 11px;
}
.ew-line-x:hover { background: oklch(0.70 0.16 25 / 0.15); color: var(--bad); }
.ew-line-foot-label{ text-align: right !important; color: var(--text-dim); padding-right: 14px !important; }
.ew-line-total td{ border-bottom: none; padding-top: 12px !important; font-size: 15px; }
.ew-line-total b{ color: var(--accent); font: 500 18px/1 var(--font-display); }

.ew-prop-margin{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-0);
  border: 1px dashed var(--border-soft);
  border-radius: 8px;
}
.ew-prop-margin > div{ display:flex; flex-direction:column; gap:4px; }
.ew-prop-margin span{
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.ew-prop-margin b{ font-size: 13px; color: var(--text); }
.ew-prop-margin b.good{ color: var(--good); }
.ew-prop-margin b.bad{ color: var(--bad); }

.ew-prop-docs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ew-prop-doc{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.ew-prop-doc-ic{
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--bg-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ew-prop-doc > div:last-child { display:flex; flex-direction:column; gap:1px; line-height: 1.3; }
.ew-prop-doc b { font-size: 11.5px; color: var(--text); font-weight: 500; }
.ew-prop-doc span{ font-size: 10.5px; color: var(--text-faint); }

.ew-prop-sig{ padding: 8px 0; }
.ew-prop-sig-line{
  height: 2px;
  background: var(--border);
  width: 320px; max-width: 60%;
  margin-bottom: 6px;
}
.ew-prop-sig-label{ font-size: 12px; color: var(--text-dim); }
.ew-prop-sig-date{ font: 500 10.5px/1 var(--font-mono); letter-spacing:.08em; color: var(--text-faint); margin-top: 4px; }

/* Sticky meta column */
.ew-s6-meta{
  display:flex; flex-direction:column; gap: 10px;
  position: sticky;
  top: 0;
}
.ew-s6-meta-card{
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display:flex; flex-direction:column; gap: 4px;
}
.ew-s6-meta-card.ai{
  background: linear-gradient(180deg, oklch(0.78 0.14 var(--accent-h) / 0.08), var(--bg-1));
  border-color: oklch(0.78 0.14 var(--accent-h) / 0.35);
}
.ew-meta-label{
  font: 500 10px/1 var(--font-mono);
  letter-spacing:.12em; text-transform:uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.ew-meta-value{
  font: 500 24px/1.1 var(--font-display);
  color: var(--text);
}
.ew-meta-sub{ font-size: 11px; color: var(--text-dim); }
.ew-meta-chip{
  display:flex; align-items:center; gap:7px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text);
}
.ew-meta-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
}
.ew-meta-dot.good { background: var(--good); }
.ew-meta-next{
  list-style: none; padding: 0; margin: 4px 0 0;
  display:flex; flex-direction:column; gap: 5px;
}
.ew-meta-next li{
  font-size: 11.5px;
  color: var(--text-dim);
  padding-left: 14px;
  position: relative;
}
.ew-meta-next li::before{
  content: '→';
  position: absolute; left: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
}
.ew-meta-next code{
  font-family: var(--font-mono); font-size: 10px;
  color: var(--accent);
  background: var(--bg-0);
  padding: 1px 4px; border-radius: 3px;
}

/* ═══ Responsive collapse ═══ */

@media (max-width: 1100px) {
  .ew-s6 { grid-template-columns: 1fr; }
  .ew-s6-meta { position: static; flex-direction: row; flex-wrap: wrap; }
  .ew-s6-meta-card { flex: 1 1 220px; }
  .ew-prop-eagleview { grid-template-columns: 1fr; }
}
@media (max-width: 820px){
  .ew-s1-grid, .ew-scope-grid, .ew-photo-grid, .ew-s5-grid, .ew-s4-matches, .ew-prop-docs { grid-template-columns: 1fr 1fr; }
  .ew-stepper { display:none; }
}


/* ============================================================ */
/* ESTIMATE WIZARD — STEP 3.5 · 3D MESH                         */
/* ============================================================ */

.ew-mesh-empty {
  padding: 80px 40px;
  text-align: center;
  color: var(--text-faint);
}
.ew-mesh-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.6; }
.ew-mesh-empty-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.ew-mesh-empty-sub { font-size: 13px; max-width: 420px; margin: 0 auto; line-height: 1.5; }

/* ───────── Building state ───────── */
.ew-mesh-building {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 12px 8px;
  min-height: 380px;
}
.ew-mesh-building-left {
  background: linear-gradient(135deg, #151520 0%, #1f1a26 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.ew-mesh-wire-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.ew-mesh-wire-anim .ew-mesh-wire-rot {
  animation: meshSpin 8s linear infinite;
  transform-origin: 0 0;
}
@keyframes meshSpin {
  0%   { transform: rotate(-2deg); }
  50%  { transform: rotate(2deg); }
  100% { transform: rotate(-2deg); }
}
.ew-mesh-photo-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ew-mesh-photo-chip {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.ew-mesh-photo-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0.5;
  animation: meshScan 1.8s ease-in-out infinite;
}
@keyframes meshScan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.ew-mesh-building-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 4px;
}
.ew-mesh-building-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
}
.ew-mesh-building-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.ew-mesh-building-sub {
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.5;
  margin-bottom: 8px;
}
.ew-mesh-building-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
}
.ew-mesh-log-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text);
  animation: meshLogIn 0.3s ease-out;
}
@keyframes meshLogIn {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: none; }
}
.ew-mesh-log-check {
  color: var(--good, #22c55e);
  font-weight: 700;
}
.ew-mesh-log-pulse {
  display: flex;
  gap: 4px;
  padding-left: 22px;
  margin-top: 4px;
}
.ew-mesh-log-pulse span {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: meshPulse 1.2s ease-in-out infinite;
}
.ew-mesh-log-pulse span:nth-child(2) { animation-delay: 0.15s; }
.ew-mesh-log-pulse span:nth-child(3) { animation-delay: 0.3s; }
@keyframes meshPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ───────── Ready state ───────── */
.ew-mesh-ready {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ew-mesh-banner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ew-mesh-banner-row:has(.ew-mesh-cov:only-child) {
  grid-template-columns: 1fr;
}

/* Coverage banner */
.ew-mesh-cov {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ew-mesh-cov.tone-good { border-color: color-mix(in oklch, var(--good) 40%, var(--border)); background: color-mix(in oklch, var(--good) 6%, var(--bg-1)); }
.ew-mesh-cov.tone-medium { border-color: color-mix(in oklch, var(--warn) 40%, var(--border)); background: color-mix(in oklch, var(--warn) 6%, var(--bg-1)); }
.ew-mesh-cov.tone-low { border-color: color-mix(in oklch, var(--bad) 40%, var(--border)); background: color-mix(in oklch, var(--bad) 6%, var(--bg-1)); }
.ew-mesh-cov-ring {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.ew-mesh-cov-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono, monospace);
}
.ew-mesh-cov-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}
.ew-mesh-cov-label b.cov-good { color: var(--good); }
.ew-mesh-cov-label b.cov-medium { color: var(--warn); }
.ew-mesh-cov-label b.cov-low { color: var(--bad); }
.ew-mesh-cov-sub {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.4;
  margin-top: 2px;
}

.ew-mesh-lowslope {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in oklch, var(--warn) 8%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--warn) 45%, var(--border));
  border-radius: 10px;
}
.ew-mesh-lowslope-icon {
  font-size: 18px;
  color: var(--warn);
  flex-shrink: 0;
  line-height: 1.2;
}
.ew-mesh-lowslope-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.ew-mesh-lowslope-sub {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* Tabs */
.ew-mesh-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
}
.ew-mesh-tab {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  cursor: pointer;
  transition: all 0.15s;
}
.ew-mesh-tab:hover { color: var(--text); background: var(--bg-2); }
.ew-mesh-tab.sel { background: var(--bg-0); color: var(--text); box-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.ew-mesh-tab-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono, monospace);
  padding-right: 10px;
}

/* Body: viewer + side panel */
.ew-mesh-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  min-height: 340px;
}
.ew-mesh-viewer {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-height: 340px;
  position: relative;
}
.ew-mesh-svg { display: block; }

/* Side panel */
.ew-mesh-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 2px;
}
.ew-mesh-side-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.ew-mesh-side-card.ai {
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 5%, var(--bg-1)) 0%, var(--bg-1) 100%);
  border-color: color-mix(in oklch, var(--accent) 25%, var(--border));
}
.ew-mesh-side-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ew-mesh-side-count {
  font-family: var(--font-mono, monospace);
  color: var(--accent);
  font-weight: 500;
}
.ew-mesh-side-sub {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
  margin-bottom: 8px;
}

.ew-mesh-side-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ew-mesh-side-stats > div {
  background: var(--bg-0);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.ew-mesh-side-stats b {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-family: var(--font-mono, monospace);
}
.ew-mesh-side-stats span {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Plane list */
.ew-mesh-plane-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ew-mesh-plane-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.12s;
}
.ew-mesh-plane-row:hover {
  background: var(--bg-2);
  border-color: var(--border);
}
.ew-mesh-plane-row.warn {
  background: color-mix(in oklch, var(--warn) 6%, transparent);
}
.ew-mesh-plane-row.warn:hover {
  background: color-mix(in oklch, var(--warn) 12%, transparent);
}
.ew-mesh-plane-badge {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.ew-mesh-plane-info {
  flex: 1;
  min-width: 0;
}
.ew-mesh-plane-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ew-mesh-plane-meta {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono, monospace);
  margin-top: 1px;
}

/* Damage list */
.ew-mesh-dmg-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ew-mesh-dmg-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.12s;
}
.ew-mesh-dmg-row:hover { border-color: var(--accent); }
.ew-mesh-dmg-row.confirmed { background: color-mix(in oklch, var(--good) 6%, var(--bg-0)); border-color: color-mix(in oklch, var(--good) 30%, var(--border)); }
.ew-mesh-dmg-row input[type="checkbox"] {
  margin: 3px 0 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.ew-mesh-dmg-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ew-mesh-dmg-row.sev-high .ew-mesh-dmg-num { background: oklch(0.65 0.22 25); }
.ew-mesh-dmg-row.sev-medium .ew-mesh-dmg-num { background: oklch(0.75 0.16 70); }
.ew-mesh-dmg-row.sev-low .ew-mesh-dmg-num { background: oklch(0.68 0.14 150); }
.ew-mesh-dmg-info { flex: 1; min-width: 0; }
.ew-mesh-dmg-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.ew-mesh-dmg-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  display: flex;
  gap: 4px;
  font-family: var(--font-mono, monospace);
}
.ew-mesh-dmg-conf { color: var(--accent); font-weight: 600; }

/* Selected detail */
.ew-mesh-side-card.sel {
  background: var(--bg-0);
  border-color: var(--accent);
}
.ew-mesh-sel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ew-mesh-sel-badge {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.ew-mesh-sel-badge.el { background: #4a4050; }
.ew-mesh-sel-badge.sev-high { background: oklch(0.65 0.22 25); font-size: 18px; }
.ew-mesh-sel-badge.sev-medium { background: oklch(0.75 0.16 70); font-size: 18px; }
.ew-mesh-sel-badge.sev-low { background: oklch(0.68 0.14 150); font-size: 18px; }
.ew-mesh-sel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.ew-mesh-sel-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.ew-mesh-sel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.ew-mesh-sel-grid > div {
  background: var(--bg-1);
  padding: 6px 8px;
  border-radius: 5px;
}
.ew-mesh-sel-grid span {
  display: block;
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.ew-mesh-sel-grid b {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono, monospace);
}
.ew-mesh-sel-grid b.warn { color: var(--warn); }
.ew-mesh-sel-warn {
  font-size: 11px;
  color: var(--text);
  background: color-mix(in oklch, var(--warn) 10%, var(--bg-1));
  border-left: 2px solid var(--warn);
  padding: 8px 10px;
  border-radius: 4px;
  line-height: 1.45;
}
.ew-mesh-sel-calc {
  font-size: 11px;
  color: var(--text);
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
  border-left: 2px solid var(--accent);
  padding: 8px 10px;
  border-radius: 4px;
  line-height: 1.5;
}
.ew-mesh-sel-calc span { color: var(--text-faint); }
.ew-mesh-sel-photoref {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
}
.ew-mesh-sel-photoref code {
  background: var(--bg-1);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
  color: var(--accent);
  font-size: 10.5px;
}
.ew-mesh-sel-close {
  margin-top: 12px;
  width: 100%;
  padding: 6px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.ew-mesh-sel-close:hover { color: var(--text); border-color: var(--text-faint); }

@media (max-width: 820px){
  .ew-mesh-body { grid-template-columns: 1fr; }
  .ew-mesh-banner-row { grid-template-columns: 1fr; }
  .ew-mesh-building { grid-template-columns: 1fr; }
}


/* ============================================================ */
/* FILING CABINET — DripJobs-style dense tables                 */
/* ============================================================ */

.fc-page {
  padding: 22px 28px 40px;
  max-width: 100%;
}

.fc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.fc-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 6px;
}
.fc-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.fc-sub {
  font-size: 13px;
  color: var(--text-faint);
  max-width: 640px;
  line-height: 1.5;
}
.fc-sub-strong {
  color: var(--text);
  font-weight: 600;
}
.fc-head-stats {
  display: flex;
  gap: 20px;
}
.fc-head-stat {
  text-align: right;
}
.fc-head-stat b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-family: var(--font-mono, monospace);
}
.fc-head-stat span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 500;
}

/* Tabs */
.fc-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  overflow-x: auto;
}
.fc-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
  white-space: nowrap;
}
.fc-tab:hover { color: var(--text); }
.fc-tab.sel {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.fc-tab-count {
  background: var(--bg-2);
  color: var(--text-faint);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: 500;
}
.fc-tab.sel .fc-tab-count {
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  color: var(--accent);
}
.fc-tabs-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  white-space: nowrap;
}
.fc-sync-dot {
  width: 7px;
  height: 7px;
  background: var(--good, #22c55e);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--good) 20%, transparent);
  animation: fcSyncPulse 2s ease-in-out infinite;
}
@keyframes fcSyncPulse {
  50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--good) 10%, transparent); }
}

/* Jobs summary bar */
.fc-jobs-summary {
  display: flex;
  gap: 20px;
  padding: 10px 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-faint);
}
.fc-jobs-summary b {
  color: var(--text);
  font-weight: 700;
  margin-left: 6px;
  font-family: var(--font-mono, monospace);
}

/* Invoice KPIs */
.fc-inv-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.fc-inv-kpi {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.fc-inv-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 6px;
}
.fc-inv-kpi-val {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-mono, monospace);
  line-height: 1.1;
}
.fc-inv-kpi.unpaid .fc-inv-kpi-val { color: oklch(0.68 0.18 35); }
.fc-inv-kpi.balance .fc-inv-kpi-val { color: oklch(0.70 0.16 140); }

/* Toolbar */
.fc-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.fc-toolbar-left, .fc-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fc-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text-faint);
  min-width: 240px;
}
.fc-search svg { flex-shrink: 0; }
.fc-search input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 12px;
  flex: 1;
  min-width: 0;
}
.fc-search input::placeholder { color: var(--text-faint); }
.fc-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
}
.fc-filter label { font-weight: 500; }
.fc-filter select {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.fc-show {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
}
.fc-show select {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--text);
  font-size: 12px;
}
.fc-btn {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.fc-btn:hover { background: var(--bg-2); }
.fc-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fc-btn.primary:hover { filter: brightness(1.05); }

/* Table */
.fc-table-wrap {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.fc-table-scroll {
  overflow-x: auto;
}
.fc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.fc-table-wrap.wide .fc-table { min-width: 1600px; }
.fc-table thead {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.fc-table th {
  text-align: left;
  padding: 9px 14px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
  user-select: none;
}
.fc-sort-arrow {
  margin-left: 4px;
  opacity: 0.35;
  font-size: 9px;
}
.fc-table td {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.fc-table tbody tr:hover {
  background: color-mix(in oklch, var(--bg-2) 60%, transparent);
}
.fc-empty {
  text-align: center;
  padding: 40px !important;
  color: var(--text-faint);
  font-size: 13px;
}

/* Status pills — DripJobs-style solid-fill */
.fc-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-mono, monospace);
  line-height: 1.5;
}
.pill-pending          { background: oklch(0.96 0.08 80);  color: oklch(0.45 0.15 70); }
.pill-scheduled        { background: oklch(0.94 0.05 270); color: oklch(0.45 0.20 280); }
.pill-accepted         { background: oklch(0.94 0.07 150); color: oklch(0.42 0.14 150); }
.pill-declined         { background: oklch(0.94 0.05 30);  color: oklch(0.50 0.18 30);  }
.pill-in-progress      { background: oklch(0.94 0.08 220); color: oklch(0.45 0.16 220); }
.pill-complete         { background: oklch(0.92 0.10 150); color: oklch(0.40 0.18 150); }
.pill-open             { background: oklch(0.96 0.08 80);  color: oklch(0.45 0.15 70); }
.pill-paid             { background: oklch(0.94 0.08 150); color: oklch(0.40 0.16 150); }
.pill-offline-requested{ background: oklch(0.95 0.04 280); color: oklch(0.45 0.08 280); }

[data-theme="dark"] .pill-pending,
[data-theme="slate"] .pill-pending            { background: oklch(0.32 0.10 75);  color: oklch(0.90 0.14 85); }
[data-theme="dark"] .pill-scheduled,
[data-theme="slate"] .pill-scheduled          { background: oklch(0.30 0.10 275); color: oklch(0.88 0.12 280); }
[data-theme="dark"] .pill-accepted,
[data-theme="slate"] .pill-accepted           { background: oklch(0.28 0.10 150); color: oklch(0.88 0.14 150); }
[data-theme="dark"] .pill-declined,
[data-theme="slate"] .pill-declined           { background: oklch(0.30 0.12 28);  color: oklch(0.90 0.14 30); }
[data-theme="dark"] .pill-in-progress,
[data-theme="slate"] .pill-in-progress        { background: oklch(0.30 0.10 220); color: oklch(0.88 0.12 220); }
[data-theme="dark"] .pill-complete,
[data-theme="slate"] .pill-complete           { background: oklch(0.28 0.12 150); color: oklch(0.90 0.14 150); }
[data-theme="dark"] .pill-open,
[data-theme="slate"] .pill-open               { background: oklch(0.32 0.10 75);  color: oklch(0.90 0.14 85); }
[data-theme="dark"] .pill-paid,
[data-theme="slate"] .pill-paid               { background: oklch(0.28 0.10 150); color: oklch(0.90 0.14 150); }
[data-theme="dark"] .pill-offline-requested,
[data-theme="slate"] .pill-offline-requested  { background: oklch(0.30 0.04 280); color: oklch(0.85 0.06 280); }

/* Invoice status (inside jobs table) — lighter variant */
.fc-invst {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-faint);
  font-family: var(--font-mono, monospace);
}
.invst-open { color: oklch(0.55 0.15 70); }
.invst-paid { color: oklch(0.55 0.16 150); }

/* Event pills (activity log) */
.fc-evt-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0;
  font-family: inherit;
}
.evt-opened     { background: oklch(0.94 0.07 270); color: oklch(0.40 0.18 280); }
.evt-clicked    { background: oklch(0.94 0.08 30);  color: oklch(0.48 0.18 30); }
.evt-viewed     { background: oklch(0.94 0.08 320); color: oklch(0.42 0.17 325); }
.evt-delivered  { background: oklch(0.94 0.08 150); color: oklch(0.40 0.16 150); }
.evt-accepted   { background: oklch(0.94 0.08 150); color: oklch(0.40 0.16 150); }
.evt-declined   { background: oklch(0.94 0.05 30);  color: oklch(0.50 0.18 30); }
.evt-scheduled  { background: oklch(0.94 0.05 270); color: oklch(0.45 0.20 280); }

[data-theme="dark"] .evt-opened,
[data-theme="slate"] .evt-opened     { background: oklch(0.28 0.08 280); color: oklch(0.85 0.10 280); }
[data-theme="dark"] .evt-clicked,
[data-theme="slate"] .evt-clicked    { background: oklch(0.30 0.10 30);  color: oklch(0.90 0.14 30); }
[data-theme="dark"] .evt-viewed,
[data-theme="slate"] .evt-viewed     { background: oklch(0.28 0.10 320); color: oklch(0.88 0.12 325); }
[data-theme="dark"] .evt-delivered,
[data-theme="slate"] .evt-delivered  { background: oklch(0.28 0.10 150); color: oklch(0.88 0.12 150); }
[data-theme="dark"] .evt-accepted,
[data-theme="slate"] .evt-accepted   { background: oklch(0.28 0.10 150); color: oklch(0.88 0.12 150); }
[data-theme="dark"] .evt-declined,
[data-theme="slate"] .evt-declined   { background: oklch(0.30 0.12 28);  color: oklch(0.90 0.14 30); }
[data-theme="dark"] .evt-scheduled,
[data-theme="slate"] .evt-scheduled  { background: oklch(0.30 0.10 275); color: oklch(0.88 0.12 280); }

/* Customer cell */
.fc-cust {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fc-cust.inline { gap: 6px; }
.fc-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.fc-cust.inline .fc-avatar { width: 22px; height: 22px; font-size: 9.5px; }
.fc-cust-name {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
}
.fc-cust-sub {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 1px;
}

/* Link cell (DripJobs blue/purple links) */
.fc-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 12.5px;
}
.fc-link:hover { text-decoration: underline; }
.fc-link.subtle { color: var(--text); font-weight: 500; }
.fc-prop-sub {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 1px;
  font-family: var(--font-mono, monospace);
}

/* Money */
.fc-money {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: var(--text);
  font-size: 12.5px;
}
.fc-money.pos { color: oklch(0.60 0.16 150); }
.fc-money.muted { color: var(--text-faint); opacity: 0.7; }

/* Date */
.fc-date {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--text-faint);
}

/* Misc */
.fc-email, .fc-phone {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-faint);
}
.fc-muted-sm {
  font-size: 11.5px;
  color: var(--text-faint);
}
.fc-mono { font-family: var(--font-mono, monospace); }
.fc-label-add {
  font-size: 11px;
  color: var(--text-faint);
  cursor: pointer;
  padding: 3px 8px;
  border: 1px dashed var(--border);
  border-radius: 4px;
}
.fc-label-add:hover { color: var(--accent); border-color: var(--accent); }

.fc-addr-sub {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Row actions */
.fc-row-actions {
  display: flex;
  gap: 4px;
}
.fc-row-btn {
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--border));
  border-radius: 4px;
  padding: 3px 10px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.fc-row-btn:hover {
  background: color-mix(in oklch, var(--accent) 18%, var(--bg-1));
}

/* Invoice num + sync pill */
.fc-inv-num-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: var(--text);
}
.fc-sync-pill {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.fc-sync-pill.ok {
  background: color-mix(in oklch, var(--good) 12%, transparent);
  color: var(--good, oklch(0.55 0.15 150));
}
.fc-sync-pill.off {
  background: color-mix(in oklch, var(--warn) 12%, transparent);
  color: var(--warn);
}

/* Pager */
.fc-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px 0;
  font-size: 11.5px;
  color: var(--text-faint);
}
.fc-pager-nav {
  display: flex;
  gap: 2px;
}
.fc-pager-btn {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
  min-width: 28px;
}
.fc-pager-btn:hover:not(:disabled):not(.active) { background: var(--bg-2); }
.fc-pager-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.fc-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 980px) {
  .fc-head { flex-direction: column; align-items: flex-start; }
  .fc-head-stats { width: 100%; justify-content: space-between; }
  .fc-inv-kpis { grid-template-columns: 1fr 1fr; }
  .fc-toolbar { flex-direction: column; align-items: stretch; }
}


/* ============================================================ */
/* FILING CABINET — AI SUGGESTIONS STRIP                         */
/* ============================================================ */

.fc-ai {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 8%, var(--bg-1)),
    var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 25%, var(--border));
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin-bottom: 14px;
}
.fc-ai-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.fc-ai-head strong {
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}
.fc-ai-head svg { color: var(--accent); }
.fc-ai-pulse {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent);
  animation: fcSyncPulse 2s ease-in-out infinite;
}
.fc-ai-dot { opacity: 0.4; }
.fc-ai-sub { font-size: 10.5px; opacity: 0.7; }
.fc-ai-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.fc-ai-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fc-ai-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.fc-ai-card-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.fc-ai-conf {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.fc-ai-conf.good { background: color-mix(in oklch, oklch(0.65 0.16 150) 18%, transparent); color: oklch(0.55 0.16 150); }
.fc-ai-conf.ok   { background: color-mix(in oklch, oklch(0.70 0.13 80) 20%, transparent);  color: oklch(0.55 0.16 75); }
.fc-ai-conf.low  { background: color-mix(in oklch, oklch(0.65 0.15 30) 15%, transparent);  color: oklch(0.58 0.16 30); }
.fc-ai-card-sub {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.4;
}
.fc-ai-card-rationale {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: var(--text-faint);
}
.fc-ai-card-rationale li {
  padding-left: 12px;
  position: relative;
  margin-bottom: 3px;
  line-height: 1.4;
}
.fc-ai-card-rationale li::before {
  content: '›';
  position: absolute;
  left: 2px;
  color: var(--accent);
  font-weight: 700;
}
.fc-ai-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}


/* ============================================================ */
/* PHOTO ALBUMS · QC REVIEW                                      */
/* ============================================================ */

.pa-page { padding: 22px 28px 40px; }

.pa-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.pa-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); font-weight: 600; margin-bottom: 6px;
}
.pa-title {
  font-size: 28px; font-weight: 700; color: var(--text);
  margin: 0 0 6px; letter-spacing: -0.01em;
}
.pa-sub {
  font-size: 13px; color: var(--text-faint);
  max-width: 680px; line-height: 1.5;
}
.pa-head-stats { display: flex; gap: 22px; }
.pa-kpi { text-align: right; }
.pa-kpi b {
  display: block; font-size: 26px; font-weight: 700;
  color: var(--text); line-height: 1.1;
  font-family: var(--font-mono, monospace);
}
.pa-kpi span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); font-weight: 500;
}
.pa-kpi.flag b { color: oklch(0.62 0.18 30); }
.pa-kpi.review b { color: oklch(0.68 0.18 75); }

/* AI strip */
.pa-ai {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--accent) 10%, var(--bg-1)),
    var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.pa-ai-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-faint);
  margin-bottom: 12px;
}
.pa-ai-head strong {
  color: var(--text); font-weight: 600; font-size: 13px;
}
.pa-ai-pulse {
  width: 7px; height: 7px; background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent);
  animation: fcSyncPulse 2s ease-in-out infinite;
}
.pa-ai-dot { opacity: 0.4; }
.pa-ai-sub { font-size: 10.5px; opacity: 0.75; }
.pa-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.pa-ai-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.pa-ai-card.sev-high   { border-left-color: oklch(0.60 0.20 28); }
.pa-ai-card.sev-medium { border-left-color: oklch(0.70 0.16 75); }
.pa-ai-card.sev-low    { border-left-color: oklch(0.65 0.12 220); }
.pa-ai-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.pa-sev-pill {
  font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
  letter-spacing: 0.05em; font-family: var(--font-mono, monospace);
}
.pa-sev-pill.sev-high   { background: oklch(0.60 0.20 28 / 0.15); color: oklch(0.55 0.20 28); }
.pa-sev-pill.sev-medium { background: oklch(0.70 0.16 75 / 0.15); color: oklch(0.50 0.16 75); }
.pa-sev-pill.sev-low    { background: oklch(0.65 0.12 220 / 0.15); color: oklch(0.50 0.14 220); }
.pa-ai-conf {
  font-family: var(--font-mono, monospace);
  font-size: 11px; font-weight: 700;
  color: var(--text-faint);
}
.pa-ai-card-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.3;
}
.pa-ai-card-sub {
  font-size: 11.5px; color: var(--text-faint);
  line-height: 1.4;
}
.pa-ai-rationale {
  list-style: none; margin: 2px 0; padding: 0;
  font-size: 11px; color: var(--text-faint);
}
.pa-ai-rationale li {
  padding-left: 12px; position: relative;
  margin-bottom: 3px; line-height: 1.4;
}
.pa-ai-rationale li::before {
  content: '›'; position: absolute; left: 2px;
  color: var(--accent); font-weight: 700;
}
.pa-ai-photos { display: flex; gap: 5px; margin: 4px 0; }
.pa-ai-photo-thumb {
  width: 56px; height: 42px;
  border-radius: 5px; overflow: hidden; border: 1px solid var(--border);
  padding: 0; background: transparent; cursor: pointer;
  flex-shrink: 0;
}
.pa-ai-photo-thumb:hover { border-color: var(--accent); }
.pa-ai-actions {
  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
}
.pa-ai-btn {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 10px; font-size: 11px; font-weight: 500;
  color: var(--text); cursor: pointer;
  transition: all 0.12s;
}
.pa-ai-btn:hover { background: var(--bg-2); }
.pa-ai-btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.pa-ai-btn.primary:hover { filter: brightness(1.05); }

/* Scorecards */
.pa-scorecards { margin-bottom: 18px; }
.pa-section-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); font-weight: 600; margin-bottom: 8px;
}
.pa-score-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.pa-score-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  cursor: pointer; transition: all 0.12s;
}
.pa-score-card:hover { border-color: var(--accent); }
.pa-score-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.pa-score-info { flex: 1; min-width: 0; }
.pa-score-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.pa-score-role { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }
.pa-score-metrics { display: flex; gap: 10px; text-align: center; }
.pa-score-val {
  font-size: 14px; font-weight: 700;
  font-family: var(--font-mono, monospace);
  line-height: 1.1;
}
.pa-score-val.qc-good { color: oklch(0.60 0.16 150); }
.pa-score-val.qc-ok   { color: oklch(0.65 0.14 80); }
.pa-score-val.qc-bad  { color: oklch(0.60 0.18 30); }
.pa-score-val.pace-warn { color: oklch(0.65 0.16 75); }
.pa-score-val.pace-ok   { color: var(--text); }
.pa-score-lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); margin-top: 2px;
}

/* Filters */
.pa-filters {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}
.pa-filter-group {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-faint);
}
.pa-filter-group label { font-weight: 500; }
.pa-filter-group select {
  background: var(--bg-0); border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 8px;
  color: var(--text); font-size: 11.5px;
}
.pa-filter-pills { display: flex; gap: 2px; }
.pa-pill {
  background: var(--bg-0); border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 10px;
  font-size: 11px; color: var(--text-faint);
  cursor: pointer; transition: all 0.12s;
}
.pa-pill:hover { color: var(--text); }
.pa-pill.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.pa-filter-spacer { flex: 1; }
.pa-results-count {
  font-size: 11px; color: var(--text-faint);
  font-family: var(--font-mono, monospace);
}

/* Photo grid */
.pa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.pa-grid-cell {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  cursor: pointer; transition: all 0.12s;
  padding: 0; text-align: left;
  display: flex; flex-direction: column;
}
.pa-grid-cell:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.pa-grid-cell.flagged {
  border-color: oklch(0.60 0.18 30);
  box-shadow: 0 0 0 1px oklch(0.60 0.18 30 / 0.3);
}
.pa-photo-img {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%; overflow: hidden;
}
.pa-photo-clock {
  position: absolute; top: 6px; left: 6px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.7); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: 4px;
  font-family: var(--font-mono, monospace);
}
.pa-clock-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.pa-clock-clock-in { background: oklch(0.72 0.18 150); }
.pa-clock-clock-out { background: oklch(0.70 0.16 30); }
.pa-clock-before { background: oklch(0.72 0.13 220); }
.pa-clock-during { background: oklch(0.75 0.14 80); }
.pa-clock-after { background: oklch(0.72 0.14 280); }
.pa-photo-flags {
  position: absolute; bottom: 6px; left: 6px; right: 6px;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.pa-flag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,0.75);
  padding: 3px 7px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  border-left: 2px solid;
}
.pa-flag-chip.sev-bad  { color: oklch(0.80 0.18 30); border-color: oklch(0.60 0.20 28); }
.pa-flag-chip.sev-warn { color: oklch(0.85 0.15 80); border-color: oklch(0.70 0.16 75); }
.pa-flag-chip.sev-info { color: oklch(0.85 0.10 220); border-color: oklch(0.65 0.12 220); }
.pa-grid-meta {
  padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px;
}
.pa-grid-meta-top, .pa-grid-meta-bot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.pa-grid-emp {
  font-weight: 600; color: var(--text);
  font-size: 11.5px;
}
.pa-grid-time {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; color: var(--text-faint);
}
.pa-grid-meta-item {
  color: var(--text); font-size: 11.5px;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pa-grid-job {
  color: var(--text-faint); font-size: 10.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pa-grid-pace {
  font-family: var(--font-mono, monospace);
  font-size: 10px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.pa-grid-pace.pace-warn { color: oklch(0.65 0.18 30); }
.pa-grid-pace.pace-ok   { color: oklch(0.60 0.16 150); }
.pa-grid-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 60px 20px;
  color: var(--text-faint); font-size: 13px;
}

/* Lightbox */
.pa-lb {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 30px; backdrop-filter: blur(6px);
}
.pa-lb-inner {
  display: grid; grid-template-columns: minmax(400px, 1.4fr) minmax(360px, 1fr);
  max-width: 1200px; width: 100%; max-height: 90vh;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  position: relative;
}
.pa-lb-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 0;
  color: #fff; font-size: 20px; cursor: pointer;
  z-index: 10;
}
.pa-lb-close:hover { background: rgba(255,255,255,0.2); }
.pa-lb-img {
  position: relative; background: #000;
  min-height: 400px;
  display: flex; align-items: center; justify-content: center;
}
.pa-lb-side {
  padding: 22px 24px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.pa-lb-row { display: flex; flex-direction: column; gap: 3px; }
.pa-lb-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); font-weight: 600;
}
.pa-lb-val { font-size: 13px; color: var(--text); }
.pa-lb-val.dim { color: var(--text-faint); font-size: 11.5px; }
.pa-lb-val.mono { font-family: var(--font-mono, monospace); font-size: 12px; }
.pa-lb-val.pace-warn { color: oklch(0.65 0.18 30); }
.pa-lb-val.pace-ok { color: oklch(0.60 0.16 150); }
.pa-lb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pa-lb-caption {
  background: var(--bg-2);
  padding: 8px 10px; border-radius: 6px;
  font-style: italic; font-size: 12.5px;
  line-height: 1.4;
}
.pa-lb-flags { display: flex; flex-direction: column; gap: 4px; }
.pa-lb-flag {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12px; font-weight: 500;
  border-left: 3px solid;
}
.pa-lb-flag.sev-bad {
  background: oklch(0.60 0.20 28 / 0.10); border-color: oklch(0.60 0.20 28);
  color: oklch(0.70 0.18 30);
}
.pa-lb-flag.sev-warn {
  background: oklch(0.70 0.16 75 / 0.10); border-color: oklch(0.70 0.16 75);
  color: oklch(0.70 0.16 75);
}
.pa-lb-flag.sev-info {
  background: oklch(0.65 0.12 220 / 0.10); border-color: oklch(0.65 0.12 220);
  color: oklch(0.70 0.14 220);
}
.pa-lb-flag span:first-child { font-size: 14px; }
.pa-lb-actions {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.dim { color: var(--text-faint); }

@media (max-width: 900px) {
  .pa-lb-inner { grid-template-columns: 1fr; }
  .pa-head { flex-direction: column; align-items: flex-start; }
  .pa-head-stats { width: 100%; justify-content: space-between; }
}


/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER PORTAL — warm editorial style, customer-facing only
   Uses design tokens but reads as a completely different "product"
   ═══════════════════════════════════════════════════════════════════════ */

.cx-page {
  --cp-warm: oklch(0.96 0.02 75);
  --cp-warm-2: oklch(0.92 0.03 70);
  --cp-paper: oklch(0.98 0.012 80);
  --cp-ink: oklch(0.22 0.015 40);
  --cp-ink-2: oklch(0.38 0.015 40);
  --cp-faint: oklch(0.58 0.01 40);
  --cp-rule: oklch(0.86 0.012 75);
  --cp-rule-soft: oklch(0.92 0.008 75);
  --cp-copper: oklch(0.58 0.14 55);
  --cp-copper-bg: oklch(0.96 0.03 60);
  --cp-good: oklch(0.52 0.13 150);
  --cp-warn: oklch(0.62 0.17 30);
  --cp-slate: oklch(0.32 0.015 260);

  background: var(--cp-paper);
  color: var(--cp-ink);
  min-height: 100vh;
  margin: -20px -20px;
  padding: 0 0 80px;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.cx-page .dim { color: var(--cp-faint); }
.cx-page .dim.sm, .cx-page .sm { font-size: 12.5px; }
.cx-page .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; color: var(--cp-ink); }
.cx-page .r { text-align: right; }

.cx-page h1, .cx-page h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--cp-ink);
  margin: 0;
}
.cx-h2 {
  font-size: 26px;
  line-height: 1.15;
}

/* ── Header ─────────────────────────────────────────── */
.cx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  border-bottom: 1px solid var(--cp-rule);
  background: var(--cp-paper);
  gap: 20px;
  flex-wrap: wrap;
}
.cx-header-brand { display: flex; align-items: center; gap: 14px; }
.cx-logo {
  color: var(--cp-copper);
  display: flex; align-items: center;
}
.cx-brand-name {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  line-height: 1;
  color: var(--cp-ink);
}
.cx-brand-sub {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-faint);
  margin-top: 4px;
}
.cx-header-trust { display: flex; gap: 20px; }
.cx-trust-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 2px;
  font-size: 12px;
  color: var(--cp-ink-2);
  cursor: pointer;
  align-items: center;
}
.cx-trust-item > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.cx-trust-item > :nth-child(2) { grid-column: 2; grid-row: 1; }
.cx-trust-item > :nth-child(3) { grid-column: 2; grid-row: 2; }
.cx-trust-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cp-good);
}
.cx-trust-stars { color: var(--cp-copper); font-size: 13px; letter-spacing: 1px; }
.cx-trust-sub {
  font-size: 10.5px;
  color: var(--cp-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Hero ───────────────────────────────────────────── */
.cx-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  padding: 56px 48px 40px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.cx-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cp-copper);
  font-weight: 500;
  margin-bottom: 12px;
}
.cx-hero-title {
  font-size: 48px !important;
  line-height: 1.05;
  margin-bottom: 14px !important;
}
.cx-hero-sub {
  font-size: 17px;
  color: var(--cp-ink-2);
  max-width: 52ch;
  line-height: 1.5;
}
.cx-hero-sub strong { color: var(--cp-ink); font-weight: 600; }

.cx-progress { margin-top: 24px; max-width: 480px; }
.cx-progress-bar {
  height: 8px;
  background: var(--cp-rule-soft);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--cp-rule);
}
.cx-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cp-copper), oklch(0.68 0.12 50));
  border-radius: 3px;
  transition: width 600ms ease;
}
.cx-progress-labels {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--cp-ink-2);
}

.cx-hero-right { }
.cx-crew-today {
  background: var(--cp-warm);
  border: 1px solid var(--cp-rule);
  border-radius: 14px;
  padding: 20px 22px;
}
.cx-crew-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-faint);
  margin-bottom: 14px;
}
.cx-crew-stack { display: flex; flex-direction: column; gap: 12px; }
.cx-crew-chip { display: flex; align-items: center; gap: 12px; }
.cx-crew-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  color: white;
  font-weight: 600;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cx-crew-name { font-weight: 500; color: var(--cp-ink); font-size: 14px; }
.cx-crew-role { font-size: 12px; color: var(--cp-faint); }

/* ── Weather alert ──────────────────────────────────── */
.cx-weather-alert {
  max-width: 1104px;
  margin: 0 auto 8px;
  padding: 12px 20px;
  background: oklch(0.95 0.04 85);
  border: 1px solid oklch(0.82 0.12 85);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--cp-ink);
}

/* ── Generic card ───────────────────────────────────── */
.cx-card {
  max-width: 1104px;
  margin: 28px auto;
  padding: 32px 40px;
  background: white;
  border: 1px solid var(--cp-rule);
  border-radius: 16px;
}
.cx-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cp-rule-soft);
}
.cx-card-head-right { display: flex; align-items: center; gap: 12px; }
.cx-signed-badge {
  background: color-mix(in oklch, var(--cp-good) 14%, transparent);
  color: var(--cp-good);
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
}

/* ── Timeline ───────────────────────────────────────── */
.cx-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.cx-tl-day {
  padding: 18px 16px;
  border: 1px solid var(--cp-rule-soft);
  border-radius: 10px;
  position: relative;
  background: var(--cp-paper);
}
.cx-tl-day.status-done {
  background: color-mix(in oklch, var(--cp-good) 8%, white);
  border-color: color-mix(in oklch, var(--cp-good) 30%, var(--cp-rule));
}
.cx-tl-day.status-in_progress {
  background: var(--cp-copper-bg);
  border-color: color-mix(in oklch, var(--cp-copper) 40%, var(--cp-rule));
}
.cx-tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cp-rule);
  margin-bottom: 10px;
}
.cx-tl-day.status-done .cx-tl-dot { background: var(--cp-good); }
.cx-tl-day.status-in_progress .cx-tl-dot { background: var(--cp-copper); box-shadow: 0 0 0 4px color-mix(in oklch, var(--cp-copper) 20%, transparent); }
.cx-tl-day-label {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  color: var(--cp-ink);
  margin-bottom: 4px;
}
.cx-tl-day-text {
  font-size: 13px;
  color: var(--cp-ink-2);
  line-height: 1.45;
  margin-bottom: 10px;
  min-height: 38px;
}
.cx-tl-status {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-faint);
}
.cx-tl-day.status-done .cx-tl-status { color: var(--cp-good); }
.cx-tl-day.status-in_progress .cx-tl-status { color: var(--cp-copper); }

/* ── Photo grid ─────────────────────────────────────── */
.cx-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.cx-photo-wrap { }
.cx-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--cp-rule);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  padding: 0;
  background: var(--cp-slate);
  display: block;
  transition: transform 150ms;
}
.cx-photo:hover { transform: translateY(-2px); box-shadow: 0 10px 28px oklch(0.2 0.01 60 / 0.12); }
.cx-photo svg { position: absolute; inset: 0; }
.cx-photo-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 12px 10px;
  color: white;
  font-size: 12px;
  background: linear-gradient(to top, oklch(0 0 0 / 0.7), transparent);
  text-align: left;
  line-height: 1.3;
}
.cx-photo-caption {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 2px 0;
  font-size: 12px;
}
.cx-photo-stage {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cp-copper);
}
.cx-photo-stage.stage-in_progress { color: var(--cp-copper); }
.cx-photo-stage.stage-estimate { color: var(--cp-ink-2); }

/* ── Crew cards ─────────────────────────────────────── */
.cx-crew-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.cx-crew-full {
  display: flex; gap: 16px; align-items: center;
  padding: 18px;
  border: 1px solid var(--cp-rule-soft);
  border-radius: 12px;
  background: var(--cp-paper);
}
.cx-crew-portrait {
  width: 56px; height: 56px;
  border-radius: 50%;
  color: white;
  font-weight: 600;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cx-crew-full-name {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  color: var(--cp-ink);
}
.cx-crew-full-role { font-size: 13px; color: var(--cp-ink-2); margin-top: 2px; }
.cx-crew-full-yrs { font-size: 11.5px; color: var(--cp-faint); margin-top: 4px; letter-spacing: 0.04em; }

/* ── Proposal table ─────────────────────────────────── */
.cx-prop-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 18px 24px;
  background: var(--cp-warm);
  border-radius: 10px;
  margin-bottom: 22px;
}
.cx-prop-meta > div { }
.cx-prop-meta .mono { font-size: 17px; font-weight: 500; }

.cx-prop-items {
  border-top: 1px solid var(--cp-rule);
  margin-bottom: 20px;
}
.cx-prop-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--cp-rule-soft);
  font-size: 14px;
}
.cx-prop-row.cx-prop-head {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-faint);
  font-weight: 500;
  padding: 10px 4px;
}
.cx-prop-row.cx-prop-head > div { text-align: inherit; }
.cx-prop-row.cx-prop-total {
  padding: 16px 4px;
  border-bottom: none;
  border-top: 2px solid var(--cp-ink);
  margin-top: 4px;
}
.cx-prop-row .r { min-width: 110px; }
.cx-prop-row .mono { font-size: 14px; }

.cx-prop-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--cp-rule-soft);
}

/* ── Buttons ────────────────────────────────────────── */
.cx-btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--cp-rule);
  background: white;
  color: var(--cp-ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.cx-btn:hover { background: var(--cp-warm); border-color: var(--cp-ink-2); }
.cx-btn-primary {
  background: var(--cp-ink);
  color: white;
  border-color: var(--cp-ink);
}
.cx-btn-primary:hover { background: var(--cp-slate); color: white; }

/* ── Invoices ───────────────────────────────────────── */
.cx-invoices { display: flex; flex-direction: column; gap: 10px; }
.cx-invoice {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 32px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--cp-rule-soft);
  border-radius: 12px;
  background: var(--cp-paper);
}
.cx-invoice.status-paid { background: color-mix(in oklch, var(--cp-good) 5%, white); }
.cx-inv-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--cp-ink-2);
  margin-bottom: 4px;
}
.cx-pill-paid {
  background: color-mix(in oklch, var(--cp-good) 14%, transparent);
  color: var(--cp-good);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 500;
}

/* ── Messages ───────────────────────────────────────── */
.cx-messages {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 20px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}
.cx-msg { display: flex; flex-direction: column; max-width: 70%; }
.cx-msg.from-you { align-self: flex-end; align-items: flex-end; }
.cx-msg.from-wyatt { align-self: flex-start; align-items: flex-start; }
.cx-msg-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
}
.cx-msg.from-you .cx-msg-bubble {
  background: var(--cp-ink);
  color: white;
  border-bottom-right-radius: 4px;
}
.cx-msg.from-wyatt .cx-msg-bubble {
  background: var(--cp-warm);
  color: var(--cp-ink);
  border-bottom-left-radius: 4px;
}
.cx-msg-meta {
  font-size: 11px;
  color: var(--cp-faint);
  margin-top: 6px;
  padding: 0 6px;
}
.cx-msg-compose {
  display: flex; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--cp-rule-soft);
  align-items: flex-end;
}
.cx-msg-compose textarea {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--cp-rule);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  color: var(--cp-ink);
  background: white;
}
.cx-msg-compose textarea:focus { outline: 2px solid color-mix(in oklch, var(--cp-copper) 50%, transparent); outline-offset: 0; border-color: var(--cp-copper); }

/* ── Docs ───────────────────────────────────────────── */
.cx-docs { display: flex; flex-direction: column; gap: 10px; }
.cx-doc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--cp-rule-soft);
  border-radius: 10px;
  background: var(--cp-paper);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.cx-doc:hover { background: var(--cp-warm); border-color: var(--cp-ink-2); }
.cx-doc.cx-doc-future { opacity: 0.65; cursor: default; }
.cx-doc.cx-doc-future:hover { background: var(--cp-paper); border-color: var(--cp-rule-soft); }
.cx-doc-icon { font-size: 22px; }
.cx-doc-name { font-weight: 500; color: var(--cp-ink); font-size: 14px; }
.cx-doc-sub { font-size: 12.5px; color: var(--cp-faint); margin-top: 2px; }
.cx-doc-action {
  font-size: 12px;
  color: var(--cp-copper);
  font-weight: 500;
}

/* ── Referral block ─────────────────────────────────── */
.cx-referral {
  background: var(--cp-warm);
  border: 1px solid var(--cp-rule);
}
.cx-referral-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cx-referral-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cp-copper);
  margin-bottom: 8px;
}
.cx-referral-code {
  text-align: center;
  padding: 20px 28px;
  background: white;
  border: 1px dashed var(--cp-copper);
  border-radius: 12px;
  min-width: 200px;
}
.cx-referral-code-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cp-faint); margin-bottom: 6px;
}
.cx-referral-code-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: var(--cp-copper);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

/* ── Footer ─────────────────────────────────────────── */
.cx-footer {
  max-width: 1104px;
  margin: 48px auto 0;
  padding: 24px 40px;
  border-top: 1px solid var(--cp-rule);
  text-align: center;
  color: var(--cp-ink-2);
  font-size: 13px;
}
.cx-footer .dim { margin-top: 6px; }

/* ── Lightbox ───────────────────────────────────────── */
.cx-lb {
  position: fixed; inset: 0;
  background: oklch(0.12 0.01 60 / 0.85);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.cx-lb-inner {
  width: min(960px, 94vw);
  background: var(--cp-paper);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.cx-lb-inner .cx-photo { aspect-ratio: 16 / 10; border-radius: 0; border: none; }
.cx-lb-meta { padding: 20px 28px; }
.cx-lb-label {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  color: var(--cp-ink);
  margin-bottom: 4px;
}
.cx-lb-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  border: none;
  background: oklch(0 0 0 / 0.5);
  color: white;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 2;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 880px) {
  .cx-page { margin: -14px -14px; padding-bottom: 40px; }
  .cx-header { padding: 18px 20px; }
  .cx-header-trust { gap: 14px; }
  .cx-hero { grid-template-columns: 1fr; padding: 32px 20px; gap: 24px; }
  .cx-hero-title { font-size: 34px !important; }
  .cx-card { padding: 24px 20px; margin: 14px 12px; }
  .cx-timeline { grid-template-columns: 1fr; }
  .cx-prop-meta { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; }
  .cx-invoice { grid-template-columns: 1fr; gap: 12px; }
  .cx-invoice .r { text-align: left; }
  .cx-referral-inner { grid-template-columns: 1fr; }
  .cx-referral-code { width: 100%; }
  .cx-crew-cards, .cx-photo-grid { grid-template-columns: 1fr 1fr; }
  .cx-msg { max-width: 88%; }
}
@media (max-width: 520px) {
  .cx-crew-cards, .cx-photo-grid { grid-template-columns: 1fr; }
  .cx-prop-meta { grid-template-columns: 1fr; }
}


/* ═════════════════════════════════════════════════════════════════════
   Customer Portal v2 — additions: stage switcher, review request,
   proposal versions, warranty registry, claim packet
   ═════════════════════════════════════════════════════════════════════ */

/* Demo-only stage switcher */
.cx2-stage-switch {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 48px;
  background: oklch(0.93 0.015 75);
  border-bottom: 1px solid var(--cp-rule);
  font-size: 12px;
}
.cx2-stage-label {
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cp-faint); font-size: 10.5px; margin-right: 6px;
}
.cx2-stage-btn {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--cp-rule);
  background: var(--cp-paper); color: var(--cp-ink-2);
  font-size: 12px; cursor: pointer;
  transition: all .15s ease;
}
.cx2-stage-btn:hover { border-color: var(--cp-copper); color: var(--cp-ink); }
.cx2-stage-btn.on {
  background: var(--cp-ink); color: var(--cp-paper);
  border-color: var(--cp-ink);
}

/* Completion hero variant */
.cx2-hero-done { background: linear-gradient(180deg, oklch(0.97 0.025 70) 0%, var(--cp-paper) 100%); }
.cx2-done-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.cx2-beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cx2-ba-item { display: flex; flex-direction: column; gap: 6px; }
.cx2-ba-label {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cp-faint);
}
.cx2-ba-label.accent { color: var(--cp-copper); }

/* Review request */
.cx2-review { background: linear-gradient(180deg, oklch(0.99 0.012 75), var(--cp-paper)); }
.cx2-review-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 28px; margin-bottom: 22px; flex-wrap: wrap;
}
.cx2-review-stars { text-align: right; }
.cx2-big-stars {
  font-size: 36px; letter-spacing: 6px;
  color: var(--cp-copper); line-height: 1;
}
.cx2-review-channels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 14px;
}
.cx2-review-channel {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--cp-rule);
  border-radius: 12px;
  background: var(--cp-paper);
  cursor: pointer; text-align: left;
  transition: all .18s ease;
}
.cx2-review-channel:hover {
  border-color: var(--cp-copper);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px oklch(0 0 0 / 0.04);
}
.cx2-review-channel.done {
  background: oklch(0.96 0.04 150);
  border-color: oklch(0.75 0.10 150);
}
.cx2-channel-badge {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  color: white; font-weight: 600; font-family: 'Instrument Serif', serif;
  font-size: 18px;
}
.cx2-channel-name { font-weight: 500; }
.cx2-review-foot { padding-top: 10px; border-top: 1px solid var(--cp-rule-soft); }
.cx2-link { color: var(--cp-copper); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cx2-link.sm { font-size: 12.5px; }

/* Proposal version history */
.cx2-pill-link {
  font-size: 12px; color: var(--cp-ink-2);
  border: 1px solid var(--cp-rule); border-radius: 999px;
  padding: 4px 10px; background: var(--cp-paper); cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
.cx2-pill-link:hover { border-color: var(--cp-copper); color: var(--cp-ink); }

.cx2-versions {
  margin: 16px 0 4px;
  padding: 18px 18px 4px;
  background: oklch(0.97 0.008 75);
  border-radius: 10px;
  border: 1px solid var(--cp-rule-soft);
}
.cx2-versions-head { margin-bottom: 14px; max-width: 620px; }
.cx2-versions-list { display: flex; flex-direction: column; }
.cx2-version { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding-bottom: 18px; }
.cx2-version-rail { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.cx2-version-node {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cp-rule); border: 2px solid var(--cp-paper);
  box-shadow: 0 0 0 1px var(--cp-rule);
}
.cx2-version-node.signed {
  background: var(--cp-copper);
  box-shadow: 0 0 0 1px var(--cp-copper), 0 0 0 4px oklch(0.96 0.03 60);
}
.cx2-version-line { flex: 1; width: 1px; background: var(--cp-rule); margin-top: 4px; min-height: 30px; }
.cx2-version-body { padding-bottom: 4px; }
.cx2-version-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.cx2-version-tag {
  font-size: 11px; padding: 2px 7px; border-radius: 4px;
  background: var(--cp-ink); color: var(--cp-paper); letter-spacing: 0.04em;
}
.cx2-version-total { font-size: 14px; margin-left: auto; }
.cx2-version-delta {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  padding: 1px 6px; border-radius: 4px;
}
.cx2-version-delta.up { background: oklch(0.94 0.04 30); color: var(--cp-warn); }
.cx2-version-delta.down { background: oklch(0.94 0.05 150); color: var(--cp-good); }
.cx2-chip-signed {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: oklch(0.94 0.05 150); color: var(--cp-good);
}
.cx2-chip-pending {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: oklch(0.93 0.02 75); color: var(--cp-ink-2);
}
.cx2-version-note { font-size: 13.5px; color: var(--cp-ink-2); margin-bottom: 8px; }
.cx2-version-changes {
  list-style: none; padding: 0; margin: 0;
  font-size: 13px;
}
.cx2-version-changes li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-left: 2px solid var(--cp-rule-soft);
  margin-left: 2px;
}
.cx2-diff-plus { color: var(--cp-warn); font-family: 'JetBrains Mono', monospace; width: 12px; }
.cx2-diff-minus { color: var(--cp-good); font-family: 'JetBrains Mono', monospace; width: 12px; }
.cx2-diff-dot { color: var(--cp-faint); font-family: 'JetBrains Mono', monospace; width: 12px; }

/* Warranty registry */
.cx2-warranty { background: linear-gradient(180deg, oklch(0.98 0.015 60), var(--cp-paper)); }
.cx2-warr-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; padding: 18px 0;
  border-bottom: 1px solid var(--cp-rule-soft);
}
.cx2-warr-stat > :last-child { font-size: 14px; margin-top: 2px; }
.cx2-warr-materials { padding: 18px 0 12px; }
.cx2-mat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--cp-rule-soft);
  gap: 16px;
}
.cx2-mat-row:last-child { border-bottom: 0; }
.cx2-warr-foot {
  padding-top: 10px;
  border-top: 1px solid var(--cp-rule-soft);
  max-width: 640px;
}

/* Claim packet card */
.cx2-claim { border: 1px solid oklch(0.88 0.04 75); background: linear-gradient(180deg, oklch(0.99 0.018 70), var(--cp-paper)); }
.cx2-claim-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.cx2-claim-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: oklch(0.94 0.06 30);
  display: grid; place-items: center;
  font-size: 26px; flex-shrink: 0;
}
.cx2-claim-evidence {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  padding: 18px;
  background: var(--cp-paper);
  border: 1px solid var(--cp-rule-soft);
  border-radius: 10px;
  margin-bottom: 14px;
}
.cx2-evidence-why { border-right: 1px solid var(--cp-rule-soft); padding-right: 24px; }
.cx2-evidence-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.cx2-evidence-grid > div > .cx2-ev-n {
  font-size: 22px; font-family: 'Instrument Serif', serif;
  color: var(--cp-ink); line-height: 1.1;
}
.cx2-claim-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* Claim packet drawer */
.cx2-drawer {
  background: var(--cp-paper);
  color: var(--cp-ink);
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 520px;
  width: 92%;
  position: relative;
  box-shadow: 0 20px 80px oklch(0 0 0 / 0.3);
}
.cx2-drawer .cx-lb-close { color: var(--cp-ink); background: oklch(0 0 0 / 0.08); }
.cx2-packet-list {
  list-style: none; counter-reset: packet; padding: 0;
  margin: 18px 0 22px;
}
.cx2-packet-list li {
  counter-increment: packet;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cp-rule-soft);
  align-items: baseline;
}
.cx2-packet-list li::before {
  content: counter(packet, decimal-leading-zero);
  font-family: 'JetBrains Mono', monospace;
  color: var(--cp-faint); font-size: 12px;
}
.cx2-packet-list li > :nth-child(1) { grid-column: 2; }
.cx2-packet-list li > :nth-child(2) { grid-column: 3; text-align: right; }
.cx2-drawer-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Responsive additions */
@media (max-width: 880px) {
  .cx2-stage-switch { padding: 10px 20px; flex-wrap: wrap; }
  .cx2-review-channels { grid-template-columns: 1fr; }
  .cx2-warr-grid { grid-template-columns: 1fr 1fr; }
  .cx2-claim-evidence { grid-template-columns: 1fr; }
  .cx2-evidence-why { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--cp-rule-soft); padding-bottom: 16px; }
  .cx2-beforeafter { grid-template-columns: 1fr 1fr; }
}


/* ═════════════════════════════════════════════════════════════════════
   ⌘K universal command overlay
   ═════════════════════════════════════════════════════════════════════ */

.ck-trigger {
  display: none; /* invoked via hotkey; keep hidden unless desired */
}

.ck-overlay {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.55);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: grid;
  place-items: start center;
  padding-top: 8vh;
  animation: ckFade .15s ease;
}
@keyframes ckFade { from { opacity:0 } to { opacity:1 } }

.ck-shell {
  width: min(780px, 92vw);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 30px 100px oklch(0 0 0 / 0.5);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 80vh;
  animation: ckRise .18s cubic-bezier(.2,.8,.2,1);
}
.ck-shell.has-result { width: min(1080px, 94vw); }
@keyframes ckRise { from { transform: translateY(10px); opacity:0 } to { transform: translateY(0); opacity:1 } }

.ck-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.ck-prompt {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent); font-size: 16px; width: 20px;
}
.ck-input-row input {
  flex: 1; font-size: 16px; color: var(--text);
  background: transparent; border: 0; outline: 0;
}
.ck-input-row input::placeholder { color: var(--text-faint); }

.ck-src-toggle {
  font-size: 11px; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; background: transparent;
}
.ck-src-toggle:hover { color: var(--text); border-color: var(--accent-dim); }
.ck-src-toggle.on { background: var(--accent-ghost); color: var(--accent); border-color: var(--accent-dim); }

.ck-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-dim);
  background: var(--bg-2);
}

.ck-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 10px; }

.ck-section-h {
  display: flex; justify-content: space-between;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 2px 8px;
}

/* Saved views */
.ck-views { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.ck-view {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  cursor: pointer; background: transparent; border: 0; color: inherit;
  font-size: 13.5px; text-align: left;
}
.ck-view:hover, .ck-view.sel { background: var(--bg-2); }
.ck-view-icon {
  width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--accent); font-family: 'JetBrains Mono', monospace;
}
.ck-view-q { flex: 1; }
.ck-view-hot {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--accent-ghost); color: var(--accent);
  padding: 2px 7px; border-radius: 999px;
}

/* Table pills */
.ck-tables { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.ck-tablepill {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 3px 9px; border: 1px solid var(--border-soft);
  border-radius: 6px; color: var(--text-dim);
  cursor: pointer; background: var(--bg-2);
}
.ck-tablepill:hover { color: var(--accent); border-color: var(--accent-dim); }

/* Thinking */
.ck-thinking {
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
}
.ck-think-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  animation: ckPulse 1s infinite;
}
@keyframes ckPulse {
  0%,100% { transform: scale(1); opacity: 1 }
  50% { transform: scale(1.6); opacity: .3 }
}

/* Result */
.ck-result { padding-top: 4px; }
.ck-result-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; flex-wrap: wrap; gap: 10px;
}
.ck-result-head h3 {
  font-family: 'Instrument Serif', serif; font-weight: 500;
  font-size: 20px; margin: 0;
  letter-spacing: -0.01em;
}
.ck-result-toolbar { display: flex; gap: 6px; }
.ck-tb {
  font-size: 11.5px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); cursor: pointer; background: var(--bg-2);
}
.ck-tb:hover { color: var(--text); border-color: var(--accent-dim); }
.ck-tb.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.ck-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  color: white; font-weight: 500; font-size: 12px; margin: 0 4px;
}

/* Table */
.ck-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
}
.ck-table th {
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 10.5px; color: var(--text-faint);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.ck-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.ck-table tbody tr:hover { background: var(--bg-2); }
.ck-table .r { text-align: right; }

.ck-sev {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px;
}
.ck-sev.sev-high { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.ck-sev.sev-med  { background: var(--warn); }
.ck-sev.sev-low  { background: var(--text-faint); }

.ck-avatar {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: white; font-size: 10px; font-weight: 600;
  margin-right: 8px;
}

.ck-rule {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 1px 6px; border: 1px solid var(--border);
  border-radius: 4px; color: var(--accent);
}

.ck-empty {
  text-align: center; padding: 30px; color: var(--text-dim);
  font-style: italic;
}

.ck-freeform {
  padding: 30px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

/* Sources drawer */
.ck-sources-body { padding: 4px 0; }
.ck-sources-title {
  font-family: 'Instrument Serif', serif; font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em;
}
.ck-sources-sub { margin: 4px 0 16px; }
.ck-sources-list { display: flex; flex-direction: column; gap: 12px; }
.ck-source {
  border: 1px solid var(--border-soft);
  border-radius: 10px; overflow: hidden;
  background: var(--bg-0);
}
.ck-source-label {
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--accent); background: var(--bg-2);
  border-bottom: 1px solid var(--border-soft);
}
.ck-source-pre {
  margin: 0; padding: 14px;
  font-size: 12px; line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
}

/* Footer */
.ck-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-0);
  font-size: 11.5px; color: var(--text-dim);
}
.ck-foot-left { display: flex; align-items: center; gap: 6px; }
.ck-foot-left .ck-kbd { margin: 0 3px; }

@media (max-width: 720px) {
  .ck-shell { max-height: 90vh; }
  .ck-result-toolbar { width: 100%; }
  .ck-table th:nth-child(4), .ck-table td:nth-child(4) { display: none; }
}


/* ═════════════════════════════════════════════════════════════════════
   Obsidian knowledge answer — rendered inside ⌘K
   ═════════════════════════════════════════════════════════════════════ */

.ck-knowledge { display: flex; flex-direction: column; gap: 16px; }

.ck-k-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--border-soft);
}
.ck-k-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); }
.ck-k-icon { color: oklch(0.65 0.14 290); font-size: 14px; }
.ck-k-sep { opacity: 0.4; }

.ck-k-prose {
  font-family: 'Instrument Serif', serif;
  font-size: 20px; line-height: 1.55;
  color: var(--text);
  letter-spacing: -0.005em;
  padding: 4px 2px;
}
.ck-cite {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 0 5px; margin: 0 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: oklch(0.55 0.14 290);
  background: oklch(0.96 0.02 290);
  cursor: pointer;
  vertical-align: 2px;
  line-height: 1.5;
}
.ck-cite:hover, .ck-cite.active {
  background: oklch(0.55 0.14 290);
  color: white;
  border-color: oklch(0.55 0.14 290);
}

.ck-k-chunk {
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-left: 3px solid oklch(0.55 0.14 290);
  border-radius: 10px;
  padding: 14px 16px;
  animation: ckChunkIn .2s ease;
}
@keyframes ckChunkIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ck-k-chunk-path {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--accent);
}
.ck-k-chunk-cite { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; }
.ck-k-chunk-title { font-size: 14px; font-weight: 500; margin-top: 6px; color: var(--text); }
.ck-k-chunk-text {
  font-family: 'Instrument Serif', serif;
  font-size: 15px; line-height: 1.55;
  margin-top: 8px;
  color: var(--text-dim);
  font-style: italic;
}
.ck-k-related { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-k-rellink {
  font-size: 11.5px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-dim);
  cursor: pointer;
}
.ck-k-rellink:hover { color: oklch(0.55 0.14 290); border-color: oklch(0.65 0.12 290); }

/* Contradictions */
.ck-k-warn {
  background: oklch(0.98 0.04 60);
  border: 1px solid oklch(0.85 0.08 60);
  border-radius: 10px;
  padding: 12px 14px;
}
.ck-k-warn-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: oklch(0.45 0.14 40);
  font-weight: 600;
}
.ck-k-warn-body { margin-top: 6px; }
.ck-k-warn-links { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Footer: follow-ups + notebooks */
.ck-k-footer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
@media (max-width: 680px) { .ck-k-footer { grid-template-columns: 1fr; } }

.ck-k-follow-label { margin-bottom: 6px; letter-spacing: 0.08em; text-transform: uppercase; }
.ck-k-follow {
  display: flex; justify-content: space-between; width: 100%;
  padding: 9px 12px; margin-bottom: 4px;
  background: transparent; border: 1px solid var(--border-soft);
  border-radius: 8px; color: var(--text-dim);
  font-size: 13px; text-align: left; cursor: pointer;
}
.ck-k-follow:hover { border-color: oklch(0.65 0.12 290); color: var(--text); background: var(--bg-2); }

.ck-k-notebook-row { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ck-k-notebook {
  padding: 8px 12px;
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  border-left: 3px solid var(--border);
}
.ck-k-notebook.kind-textbook { border-left-color: oklch(0.55 0.14 290); }
.ck-k-notebook.kind-spec     { border-left-color: oklch(0.55 0.12 230); }
.ck-k-notebook.kind-mfr      { border-left-color: oklch(0.6 0.12 140); }
.ck-k-notebook.kind-personal { border-left-color: oklch(0.65 0.14 60); }
.ck-k-notebook.kind-learned  { border-left-color: oklch(0.55 0.15 20); }
.ck-k-nb-name { font-size: 12.5px; color: var(--text); font-weight: 500; }


/* ═════════════════════════════════════════════════════════════════════
   Shared AI "Show sources" chip + drawer
   Used on every AI-generated card in the app for consistent trust UX.
   ═════════════════════════════════════════════════════════════════════ */

.ai-src-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
}
.ai-src-chip:hover {
  border-color: oklch(0.65 0.14 290);
  color: oklch(0.55 0.14 290);
  background: oklch(0.97 0.02 290);
}
.ai-src-chip.ai-src-right { margin-left: auto; }

.ai-src-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: oklch(0.65 0.14 290);
}
.ai-src-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 0 5px;
  background: var(--bg-2);
  border-radius: 3px;
  color: var(--text-dim);
}

/* Scrim + drawer */
.ai-src-scrim {
  position: fixed; inset: 0;
  background: oklch(0 0 0 / 0.45);
  backdrop-filter: blur(4px);
  z-index: 9998;
  animation: aiSrcFade .12s ease;
  display: flex; justify-content: flex-end;
}
@keyframes aiSrcFade { from { opacity: 0 } to { opacity: 1 } }

.ai-src-drawer {
  width: min(520px, 92vw);
  height: 100%;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 50px oklch(0 0 0 / 0.3);
  display: flex; flex-direction: column;
  animation: aiSrcSlide .18s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
@keyframes aiSrcSlide { from { transform: translateX(30px); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

.ai-src-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.ai-src-eyebrow {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(0.55 0.14 290);
  margin-bottom: 6px;
  font-weight: 500;
}
.ai-src-q {
  font-family: 'Instrument Serif', serif;
  font-size: 18px; line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.005em;
}
.ai-src-close {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}
.ai-src-close:hover { color: var(--text); }

.ai-src-model {
  padding: 10px 20px;
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-soft);
}

.ai-src-blocks {
  flex: 1; overflow: auto;
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.ai-src-block {
  background: var(--bg-0);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.ai-src-block.kind-sql         { border-left-color: oklch(0.55 0.14 230); }
.ai-src-block.kind-rule        { border-left-color: oklch(0.6 0.13 60);  }
.ai-src-block.kind-rule-fired  { border-left-color: oklch(0.55 0.15 20); }
.ai-src-block.kind-vault       { border-left-color: oklch(0.55 0.14 290); }
.ai-src-block.kind-model       { border-left-color: oklch(0.6 0.12 140); }
.ai-src-block.kind-integration { border-left-color: oklch(0.55 0.1 210); }

.ai-src-block-label {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--text);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-soft);
}
.ai-src-block-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  background: var(--bg-1);
  border-radius: 3px;
  color: var(--text-dim);
}
.ai-src-block-text {
  margin: 0;
  padding: 12px 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-src-warn {
  margin: 0 20px 12px;
  padding: 10px 14px;
  font-size: 12px;
  background: oklch(0.97 0.04 60);
  border: 1px solid oklch(0.85 0.08 60);
  border-radius: 8px;
  color: oklch(0.45 0.14 40);
}

.ai-src-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-0);
}
.ai-src-report {
  font-size: 11.5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
}
.ai-src-report:hover { color: oklch(0.55 0.15 20); border-color: oklch(0.55 0.15 20); }


/* ═════════════════════════════════════════════════════════════════════
   Toast / Undo system
   ═════════════════════════════════════════════════════════════════════ */

.toast-root {
  position: fixed;
  bottom: 20px; left: 20px;
  z-index: 9997;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 320px; max-width: 420px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px oklch(0 0 0 / 0.25);
  display: flex; align-items: center;
  padding: 12px 14px;
  gap: 14px;
  position: relative;
  overflow: hidden;
  animation: toastSlide .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes toastSlide {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.toast-success { border-left: 3px solid var(--good); }
.toast-info    { border-left: 3px solid oklch(0.55 0.14 230); }
.toast-warn    { border-left: 3px solid var(--warn); }
.toast-destructive { border-left: 3px solid var(--bad); }

.toast-icon {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: 1px;
}
.toast-icon-success     { background: var(--good); }
.toast-icon-info        { background: oklch(0.55 0.14 230); }
.toast-icon-warn        { background: var(--warn); }
.toast-icon-destructive { background: var(--bad); }

.toast-body { flex: 1; min-width: 0; }
.toast-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  display: flex; align-items: center;
}
.toast-detail {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.toast-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.toast-undo {
  font-size: 11.5px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  font-family: inherit;
  transition: all .12s;
}
.toast-undo:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.toast-undo-arrow {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
}

.toast-close {
  width: 22px; height: 22px;
  border: 0;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
}
.toast-close:hover { color: var(--text); background: var(--bg-2); }

.toast-life {
  position: absolute;
  bottom: 0; left: 0; height: 2px;
  background: currentColor;
  opacity: 0.25;
  transition: width 0.1s linear;
}
.toast-success .toast-life { color: var(--good); }
.toast-info    .toast-life { color: oklch(0.55 0.14 230); }
.toast-warn    .toast-life { color: var(--warn); }
.toast-destructive .toast-life { color: var(--bad); }


/* ═══ TOAST · Learning feedback chips ═══════════════════════════ */
.toast-has-fb { padding-bottom: 10px; }
.toast-fb {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--border-dim, rgba(255,255,255,0.09));
}
.toast-fb-q {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}
.toast-fb-spark {
  color: oklch(0.72 0.16 75);
  font-size: 10px;
}
.toast-fb-dim {
  color: var(--text-faint);
  font-size: 10.5px;
  font-family: var(--font-mono);
}
.toast-fb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.toast-fb-chip {
  appearance: none;
  background: var(--bg-2, rgba(255,255,255,0.04));
  color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
  letter-spacing: 0.005em;
}
.toast-fb-chip:hover {
  background: oklch(0.72 0.16 75 / 0.14);
  border-color: oklch(0.72 0.16 75 / 0.5);
  color: oklch(0.85 0.12 75);
}

/* Correction step — shown after a reason is picked */
.toast-fb-quickfill {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 7px;
}
.toast-fb-quick {
  appearance: none;
  background: transparent;
  color: var(--text-dim);
  border: 1px dashed var(--border, rgba(255,255,255,0.14));
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  line-height: 1.25;
  cursor: pointer;
  font-family: var(--font-ui, inherit);
  transition: all 0.1s ease;
}
.toast-fb-quick:hover {
  background: oklch(0.72 0.16 75 / 0.1);
  border-color: oklch(0.72 0.16 75 / 0.4);
  border-style: solid;
  color: oklch(0.85 0.12 75);
}
.toast-fb-correct-row {
  display: flex;
  gap: 5px;
  align-items: stretch;
}
.toast-fb-input {
  flex: 1;
  min-width: 0;
  appearance: none;
  background: var(--bg-1, rgba(0,0,0,0.25));
  color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 12px;
  font-family: var(--font-ui, inherit);
  line-height: 1.3;
  outline: none;
  transition: border-color 0.1s ease;
}
.toast-fb-input:focus {
  border-color: oklch(0.72 0.16 75 / 0.55);
  background: var(--bg-0, rgba(0,0,0,0.4));
}
.toast-fb-input::placeholder {
  color: var(--text-faint);
}
.toast-fb-submit {
  appearance: none;
  background: oklch(0.72 0.16 75 / 0.16);
  color: oklch(0.85 0.12 75);
  border: 1px solid oklch(0.72 0.16 75 / 0.4);
  border-radius: 5px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-ui, inherit);
  white-space: nowrap;
  transition: all 0.1s ease;
}
.toast-fb-submit:hover {
  background: oklch(0.72 0.16 75 / 0.28);
  color: oklch(0.92 0.08 75);
}
.toast-fb-correction {
  color: oklch(0.82 0.10 75);
  font-style: italic;
  font-size: 11px;
}
.toast-fb-thanks {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--border-dim, rgba(255,255,255,0.09));
  font-size: 11.5px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.toast-fb-thanks b { color: oklch(0.85 0.12 75); font-weight: 600; }
.toast-fb-check {
  color: var(--good);
  font-weight: 700;
  font-size: 11px;
}

/* ═══ LEARNING LAB ═══════════════════════════════════════════════ */
.ll-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.ll-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--border-dim);
  background: linear-gradient(180deg, oklch(0.72 0.16 75 / 0.05), transparent);
}
.ll-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.72 0.16 75);
  display: flex;
  align-items: center;
  gap: 7px;
}
.ll-eyebrow-spark { color: oklch(0.72 0.16 75); }
.ll-endpoint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
}
.ll-body { padding: 14px 16px 16px; }
.ll-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.ll-stat {
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
  padding: 10px 11px;
}
.ll-stat-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.ll-stat-value {
  font-family: var(--font-display, var(--font-ui));
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}
.ll-stat-sub {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 4px;
}

.ll-section {
  margin-top: 14px;
}
.ll-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 9px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ll-section-title-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 400;
}

/* Reason histogram */
.ll-reasons { display: flex; flex-direction: column; gap: 6px; }
.ll-reason-row {
  display: grid;
  grid-template-columns: 120px 1fr 44px;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
}
.ll-reason-label { color: var(--text); }
.ll-reason-bar {
  height: 8px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-dim);
}
.ll-reason-fill {
  height: 100%;
  background: linear-gradient(90deg, oklch(0.72 0.16 75 / 0.75), oklch(0.72 0.16 75 / 0.4));
  transition: width 0.4s ease;
}
.ll-reason-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: right;
}

/* Surface tuning queue */
.ll-models { display: flex; flex-direction: column; gap: 8px; }
.ll-model {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 8px;
}
.ll-model-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ll-model-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  font-weight: 500;
}
.ll-model-sub {
  font-size: 10.5px;
  color: var(--text-dim);
}
.ll-model-signals {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  padding: 2px 8px;
  background: var(--bg-1);
  border: 1px solid var(--border-dim);
  border-radius: 999px;
  white-space: nowrap;
}
.ll-model-status {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ll-model-status.ready {
  background: oklch(0.72 0.16 75 / 0.14);
  color: oklch(0.85 0.12 75);
  border: 1px solid oklch(0.72 0.16 75 / 0.3);
}
.ll-model-status.tuning {
  background: oklch(0.6 0.14 230 / 0.14);
  color: oklch(0.75 0.12 230);
  border: 1px solid oklch(0.6 0.14 230 / 0.3);
}
.ll-model-status.idle {
  background: var(--bg-1);
  color: var(--text-faint);
  border: 1px solid var(--border-dim);
}

/* Timeline sparkline */
.ll-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  padding: 4px 0 0;
}
.ll-spark-bar {
  flex: 1;
  min-width: 4px;
  background: oklch(0.72 0.16 75 / 0.32);
  border-radius: 2px 2px 0 0;
  position: relative;
}
.ll-spark-bar:hover { background: oklch(0.72 0.16 75 / 0.7); }
.ll-spark-bar.empty { background: var(--bg-2); }

/* Recent events log */
.ll-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}
.ll-event {
  display: grid;
  grid-template-columns: 70px 110px 1fr 60px;
  gap: 10px;
  padding: 7px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-dim);
  border-radius: 6px;
  font-size: 11px;
  align-items: center;
}
.ll-event-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
}
.ll-event-reason {
  font-weight: 500;
  color: oklch(0.85 0.12 75);
}
.ll-event-ctx {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-event-correction {
  color: oklch(0.82 0.10 75);
  font-style: italic;
  margin-left: 2px;
}
.ll-event-surface {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-faint);
  text-align: right;
}

.ll-empty {
  padding: 30px 14px;
  text-align: center;
  color: var(--text-faint);
  font-size: 11.5px;
  font-style: italic;
}

/* Compact rollup pill for Autopilot / Signals headers */
.ll-rollup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: oklch(0.72 0.16 75 / 0.08);
  border: 1px solid oklch(0.72 0.16 75 / 0.25);
  color: oklch(0.85 0.12 75);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.ll-rollup:hover {
  background: oklch(0.72 0.16 75 / 0.16);
}
.ll-rollup-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: oklch(0.72 0.16 75);
  box-shadow: 0 0 6px oklch(0.72 0.16 75 / 0.6);
  animation: ll-pulse 2.4s ease-in-out infinite;
}
@keyframes ll-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.ll-rollup-mono {
  font-family: var(--font-mono);
  font-size: 10px;
}


/* ═════════════════════ OS — Inbox ═════════════════════════════ */
.ib-wrap { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 120px; max-width: 1100px; margin: 0 auto; }

.ib-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: 12px;
  gap: 20px;
}
.ib-hero-eyebrow { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.ib-hero-title { font-size: 26px; font-weight: 500; margin: 4px 0 6px; color: var(--text); letter-spacing: -0.01em; font-family: var(--font-display, inherit); }
.ib-hero-title .num { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.ib-hero-sub { font-size: 12px; color: var(--text-dim); }
.ib-hero-warn { color: var(--warn); }
.ib-hero-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 7px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.ib-hero-btn:hover { background: var(--bg-card); color: var(--text); }

.ib-cats { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 2px; overflow-x: auto; }
.ib-cat {
  display: flex; align-items: center; gap: 7px;
  background: transparent; border: none;
  padding: 10px 14px;
  color: var(--text-dim); font-size: 12.5px; font-weight: 500;
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  margin-bottom: -1px;
}
.ib-cat:hover { color: var(--text); }
.ib-cat.active { color: var(--text); border-bottom-color: var(--accent); }
.ib-cat-icon { font-size: 13px; opacity: 0.7; }
.ib-cat-count {
  background: var(--bg-card); color: var(--text-dim); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 10px; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ib-cat.active .ib-cat-count { background: var(--accent); color: var(--bg-card); border-color: var(--accent); }

.ib-list { display: flex; flex-direction: column; gap: 4px; }

.ib-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 12px; align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 14px 16px;
  transition: border-color 0.12s, background 0.12s;
}
.ib-row:hover { border-color: var(--border); }
.ib-row-seen { opacity: 0.7; }
.ib-pri-1 { border-left: 3px solid var(--bad); }
.ib-pri-2 { border-left: 3px solid var(--warn); }
.ib-pri-3 { border-left: 3px solid var(--border); }

.ib-row-left { padding-top: 6px; }
.ib-pri-dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.ib-pri-dot.pri-1 { background: var(--bad); box-shadow: 0 0 6px var(--bad); }
.ib-pri-dot.pri-2 { background: var(--warn); }
.ib-pri-dot.pri-3 { background: var(--border); }

.ib-row-main { min-width: 0; }
.ib-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ib-kind { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px; border-radius: 3px; font-weight: 600; }
.ib-kind-warn    { background: color-mix(in oklab, var(--warn) 18%, transparent); color: var(--warn); }
.ib-kind-bad     { background: color-mix(in oklab, var(--bad) 18%, transparent);  color: var(--bad); }
.ib-kind-good    { background: color-mix(in oklab, var(--good) 18%, transparent); color: var(--good); }
.ib-kind-accent  { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); }
.ib-kind-neutral { background: var(--bg-1); color: var(--text-dim); }
.ib-from { font-size: 11px; color: var(--text-faint); }
.ib-ts   { font-size: 11px; color: var(--text-faint); margin-left: auto; font-variant-numeric: tabular-nums; }

.ib-row-title   { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.35; }
.ib-row-summary { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; margin-top: 4px; }
.ib-row-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ib-meta-chip { font-size: 10.5px; padding: 2px 7px; background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 3px; color: var(--text-dim); font-family: var(--font-mono); }

.ib-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ib-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.ib-btn:hover { background: var(--bg-1); }
.ib-btn.primary { background: var(--accent); color: var(--bg-card); border-color: var(--accent); font-weight: 600; }
.ib-btn.primary:hover { filter: brightness(1.08); }
.ib-btn.primary.cooling { background: var(--warn); border-color: var(--warn); cursor: wait; }
.ib-btn.icon { padding: 6px 8px; color: var(--text-dim); }

.ib-empty { padding: 56px 20px; text-align: center; color: var(--text-faint); }
.ib-empty-glyph { font-size: 40px; color: var(--good); margin-bottom: 12px; }
.ib-empty-title { font-size: 16px; color: var(--text); font-weight: 500; }
.ib-empty-sub { font-size: 12.5px; margin-top: 4px; }

/* ═════════════════════ OS — Agent strip ═════════════════════════ */
.as-wrap {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  box-shadow: 0 -6px 22px rgba(0,0,0,0.18);
  font-family: inherit;
}
.as-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  background: transparent; border: none; color: var(--text);
  cursor: pointer; font-size: 12px; font-family: inherit;
}
.as-header:hover { background: var(--bg-card); }
.as-pulse { display: inline-flex; gap: 3px; }
.as-pulse-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--good);
  animation: as-pulse 1.4s infinite ease-in-out;
}
.as-pulse-dot:nth-child(2) { animation-delay: 0.2s; }
.as-pulse-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes as-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.75); }
  40%           { opacity: 1;   transform: scale(1.1); }
}
.as-header-title strong { font-weight: 600; color: var(--text); }
.as-badge {
  padding: 2px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 600;
  background: color-mix(in oklab, var(--warn) 18%, transparent);
  color: var(--warn);
}
.as-header-sep { color: var(--text-faint); }
.as-header-recent { color: var(--text-dim); }
.as-recent-verb { font-family: var(--font-mono); color: var(--text); font-size: 11px; }
.as-recent-ts { color: var(--text-faint); }
.as-header-chevron { margin-left: auto; color: var(--text-faint); font-size: 12px; }

.as-panel {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 0;
  border-top: 1px solid var(--border-soft);
  max-height: 42vh;
  overflow: hidden;
}
.as-col { padding: 12px 16px; border-right: 1px solid var(--border-soft); overflow-y: auto; max-height: 42vh; }
.as-col:last-child { border-right: none; }
.as-col-head {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--text-faint); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.as-count { background: var(--warn); color: var(--bg-card); padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 700; }

.as-agents { display: flex; flex-direction: column; gap: 8px; }
.as-agent { padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 7px; }
.as-agent-row { display: flex; align-items: center; gap: 8px; }
.as-agent-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.as-agent-dot.watching { background: var(--good); box-shadow: 0 0 5px var(--good); }
.as-agent-dot.idle     { background: var(--border); }
.as-agent-dot.acting   { background: var(--warn); box-shadow: 0 0 5px var(--warn); animation: as-pulse 1s infinite; }
.as-agent-name { font-size: 12.5px; font-weight: 500; color: var(--text); flex: 1; }
.as-agent-state { font-size: 10px; color: var(--text-faint); letter-spacing: 0.05em; text-transform: uppercase; }
.as-agent-kill { background: transparent; border: none; color: var(--text-faint); cursor: pointer; padding: 2px 4px; font-size: 12px; }
.as-agent-kill:hover { color: var(--warn); }
.as-agent-last { font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono); margin-top: 3px; padding-left: 15px; }

.as-approvals { display: flex; flex-direction: column; gap: 8px; }
.as-empty { font-size: 11.5px; color: var(--text-faint); padding: 12px 4px; }
.as-apv { padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 8px; }
.as-apv-high { border-left: 3px solid var(--bad); }
.as-apv-med  { border-left: 3px solid var(--warn); }
.as-apv-low  { border-left: 3px solid var(--border); }
.as-apv-head { display: flex; align-items: center; gap: 8px; }
.as-risk { font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.as-risk-high { background: color-mix(in oklab, var(--bad) 20%, transparent); color: var(--bad); }
.as-risk-med  { background: color-mix(in oklab, var(--warn) 20%, transparent); color: var(--warn); }
.as-risk-low  { background: var(--bg-1); color: var(--text-dim); }
.as-apv-verb { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.as-apv-actor { font-size: 10.5px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
.as-apv-label { font-size: 12.5px; color: var(--text); margin-top: 5px; font-weight: 500; }
.as-apv-summary { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.as-apv-actions { display: flex; gap: 5px; margin-top: 8px; }
.as-btn { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 5px; font-size: 11px; cursor: pointer; }
.as-btn:hover { background: var(--bg-1); }
.as-btn.primary { background: var(--accent); color: var(--bg-card); border-color: var(--accent); font-weight: 600; }
.as-btn.primary.cooling { background: var(--warn); border-color: var(--warn); cursor: wait; }

.as-recent { display: flex; flex-direction: column; gap: 5px; }
.as-rec { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 5px 0; border-bottom: 1px solid var(--border-soft); }
.as-rec:last-child { border-bottom: none; }
.as-rec-dot { width: 6px; height: 6px; border-radius: 50%; }
.as-rec-dot.ok       { background: var(--good); }
.as-rec-dot.queued   { background: var(--warn); }
.as-rec-dot.rejected { background: var(--bad); }
.as-rec-actor { color: var(--text-dim); font-size: 10.5px; font-family: var(--font-mono); }
.as-rec-verb  { color: var(--text); font-family: var(--font-mono); font-size: 11px; flex: 1; }
.as-rec-ts    { color: var(--text-faint); font-size: 10px; font-variant-numeric: tabular-nums; }

/* Push up content so agent strip (collapsed ~36px) doesn't cover last row */
.canvas { padding-bottom: 48px !important; }

/* ═════════════════════ OS — Audit log ════════════════════════ */
.al-wrap { display: flex; flex-direction: column; gap: 14px; }
.al-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.al-stat { padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; }
.al-stat-n { font-size: 22px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.al-stat-n.warn { color: var(--warn); }
.al-stat-n.bad  { color: var(--bad); }
.al-stat-l { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.al-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.al-search { flex: 1; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; color: var(--text); font-size: 12px; font-family: var(--font-mono); }
.al-seg { display: flex; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 1px; }
.al-seg button { background: transparent; border: none; color: var(--text-dim); padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; }
.al-seg button.on { background: var(--bg-card); color: var(--text); font-weight: 500; }
.al-table { display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; }
.al-thead { display: grid; grid-template-columns: 130px 1.3fr 1.3fr 2fr 70px 90px; gap: 10px; padding: 9px 14px; background: var(--bg-1); border-bottom: 1px solid var(--border); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.al-row   { display: grid; grid-template-columns: 130px 1.3fr 1.3fr 2fr 70px 90px; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); font-size: 12px; align-items: center; }
.al-row:last-child { border-bottom: none; }
.al-row:hover { background: var(--bg-card); }
.al-row-rejected { opacity: 0.65; }
.al-ts { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }
.al-actor { display: flex; align-items: center; gap: 6px; min-width: 0; }
.al-actor-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.al-actor-dot.human { background: var(--accent); }
.al-actor-dot.agent { background: var(--good); }
.al-actor-name { font-family: var(--font-mono); font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-verb { color: var(--text); font-size: 11px; }
.al-args { color: var(--text-faint); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-risk { font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.al-risk-high { background: color-mix(in oklab, var(--bad) 18%, transparent); color: var(--bad); }
.al-risk-med  { background: color-mix(in oklab, var(--warn) 18%, transparent); color: var(--warn); }
.al-risk-low  { background: var(--bg-1); color: var(--text-dim); }
.al-status { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.al-status-ok       { color: var(--good); background: color-mix(in oklab, var(--good) 14%, transparent); }
.al-status-queued   { color: var(--warn); background: color-mix(in oklab, var(--warn) 14%, transparent); }
.al-status-rejected { color: var(--bad);  background: color-mix(in oklab, var(--bad) 14%, transparent); }
.al-empty { padding: 30px; text-align: center; color: var(--text-faint); font-size: 12px; }


/* ═════════════════════ OS — Approvals page ═══════════════════ */
.apv-wrap { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 120px; max-width: 1200px; margin: 0 auto; }
.apv-hero {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 20px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: 12px;
  gap: 20px;
}
.apv-eyebrow { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.apv-title { font-size: 26px; font-weight: 500; margin: 4px 0 6px; color: var(--text); letter-spacing: -0.01em; }
.apv-title .num { color: var(--warn); font-weight: 600; font-variant-numeric: tabular-nums; }
.apv-sub { font-size: 12px; color: var(--text-dim); }
.apv-counters { display: flex; gap: 20px; }
.apv-counter { text-align: right; }
.apv-counter-n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.apv-counter-n.good { color: var(--good); }
.apv-counter-n.bad  { color: var(--bad); }
.apv-counter-l { font-size: 11px; color: var(--text-faint); margin-top: 2px; }

.apv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 2px; }
.apv-tabs button { background: transparent; border: none; color: var(--text-dim); padding: 10px 14px; font-size: 12.5px; font-weight: 500; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.apv-tabs button:hover { color: var(--text); }
.apv-tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.apv-tab-count { background: var(--warn); color: var(--bg-card); padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 700; margin-left: 6px; }

.apv-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.apv-seg { display: flex; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; padding: 2px; gap: 1px; }
.apv-seg button { background: transparent; border: none; color: var(--text-dim); padding: 5px 11px; font-size: 11.5px; border-radius: 4px; cursor: pointer; }
.apv-seg button.on { background: var(--bg-card); color: var(--text); font-weight: 500; }
.apv-select { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px; font-size: 12px; }
.apv-spacer { flex: 1; }
.apv-sel-count { font-size: 11.5px; color: var(--text-dim); margin-right: 4px; }
.apv-btn { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; }
.apv-btn:hover { background: var(--bg-1); }
.apv-btn.primary { background: var(--accent); color: var(--bg-card); border-color: var(--accent); font-weight: 600; }
.apv-btn.primary.cooling { background: var(--warn); border-color: var(--warn); cursor: wait; }
.apv-btn.ghost { color: var(--text-dim); }

.apv-list { display: flex; flex-direction: column; gap: 6px; }
.apv-list-head { padding: 4px 4px 8px; }
.apv-check-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-dim); cursor: pointer; }
.apv-check-label input { accent-color: var(--accent); }
.apv-check { accent-color: var(--accent); margin-top: 6px; }

.apv-row {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px; overflow: hidden;
}
.apv-row-high    { border-left: 3px solid var(--bad); }
.apv-row-med     { border-left: 3px solid var(--warn); }
.apv-row-low     { border-left: 3px solid var(--border); }
.apv-row-approved, .apv-row-rejected { opacity: 0.75; }
.apv-row:hover { border-color: var(--border); }
.apv-row-top { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; padding: 12px 16px; align-items: flex-start; }
.apv-row-main { min-width: 0; }
.apv-row-head { display: flex; align-items: center; gap: 8px; }
.apv-risk { font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.apv-risk-high { background: color-mix(in oklab, var(--bad) 20%, transparent); color: var(--bad); }
.apv-risk-med  { background: color-mix(in oklab, var(--warn) 20%, transparent); color: var(--warn); }
.apv-risk-low  { background: var(--bg-1); color: var(--text-dim); }
.apv-verb { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
.apv-actor { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.apv-ts { margin-left: auto; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.apv-row-label { font-size: 14px; font-weight: 500; color: var(--text); margin-top: 6px; }
.apv-row-summary { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.45; }
.apv-reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.apv-reasons-label { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.apv-reason { font-size: 10.5px; padding: 2px 8px; background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 3px; color: var(--text-dim); }
.apv-row-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.apv-status { font-size: 11.5px; font-family: var(--font-mono); color: var(--text-dim); padding: 4px 8px; border-radius: 4px; }
.apv-status-approved { color: var(--good); background: color-mix(in oklab, var(--good) 12%, transparent); }
.apv-status-rejected { color: var(--bad);  background: color-mix(in oklab, var(--bad) 12%, transparent); }
.apv-status-ts { color: var(--text-faint); }
.apv-row-details { padding: 10px 16px 14px 48px; background: var(--bg-1); border-top: 1px solid var(--border-soft); }
.apv-detail-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-bottom: 6px; }
.apv-detail-pre { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); background: var(--bg-card); padding: 10px 12px; border-radius: 6px; border: 1px solid var(--border-soft); white-space: pre-wrap; max-height: 200px; overflow: auto; margin: 0; }

.apv-empty { padding: 56px 20px; text-align: center; color: var(--text-faint); background: var(--bg-1); border: 1px dashed var(--border); border-radius: 10px; }
.apv-empty-glyph { font-size: 40px; color: var(--good); margin-bottom: 12px; }
.apv-empty-title { font-size: 16px; color: var(--text); font-weight: 500; }
.apv-empty-sub { font-size: 12.5px; margin-top: 4px; }