/* Claude Claw Local Agents — dashboard styles
 * Single-file, no-build CSS. Inspired by ClaudeClaw OS's web UI but
 * deliberately simpler: no Tailwind, no design tokens crate, just CSS
 * custom properties + sensible defaults that will read well in dark mode.
 */

:root {
  /* Surfaces — refined dark palette with more depth */
  --bg: #0a0d13;
  --bg-grad: radial-gradient(ellipse at top, #131a26 0%, #0a0d13 60%);
  --surface: #131a24;
  --surface-2: #1b2330;
  --surface-3: #232c3d;
  --border: #243048;
  --border-soft: rgba(255,255,255,0.06);
  /* Text */
  --text: #e6ebf2;
  --text-2: #c7d0e0;
  --muted: #99a2b5;       /* ~5.6:1 on --surface (ui-ux §6 contrast) */
  --muted-dim: #79839a;   /* ~3.2:1 — secondary/footer only (>=3:1) */
  --focus: #38bdf8;       /* high-contrast focus ring (ui-ux §1) */
  /* Accents — branded gradients */
  --accent: #7c3aed;
  --accent-2: #06b6d4;
  --accent-3: #8b5cf6;
  --grad-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --grad-accent: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --grad-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  /* Semantic */
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #ef4444;
  --user-bg: #1a2540;
  --assistant-bg: #1a2330;
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.45);
  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Radius scale */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ====================================================================
   * OS-UI P1 design-system tokens (additive — see /style + docs/design-system.md)
   * Existing tokens above are untouched; these layer a documented premium
   * system on top (display font, type ramp, space scale, elevation, glass,
   * motion). Every page inherits these for free.
   * ==================================================================== */

  /* Display font — Space Grotesk for headings/display, Inter stays body. */
  --font-display: "Space Grotesk", var(--font);

  /* Type scale (fluid-ish ramp, tuned for the dashboard). */
  --fs-display: 2.6rem;   /* hero titles */
  --fs-h1: 1.85rem;       /* page titles (matches existing .page-h1) */
  --fs-h2: 1.35rem;
  --fs-h3: 1.05rem;
  --fs-h4: 0.95rem;
  --fs-body: 1rem;
  --fs-label: 0.78rem;    /* eyebrows / labels (uppercase tracked) */
  --fs-mono: 0.88rem;
  /* Tracking (letter-spacing) ramp. */
  --tracking-tight: -0.02em;   /* display / h1 */
  --tracking-snug: -0.01em;    /* h2-h4 */
  --tracking-wide: 0.08em;     /* eyebrows / labels */
  --tracking-wider: 0.14em;    /* tiny uppercase */
  /* Line-heights. */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.5;

  /* Space scale — 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Elevation — keep sm/md/lg above; add xl + an accent glow. */
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.55);
  --glow-accent: 0 0 0 1px rgba(139,92,246,0.25), 0 8px 32px rgba(124,58,237,0.35);

  /* Glass — layered panel treatment (blur + gradient hairline + inner glow). */
  --glass-bg: linear-gradient(160deg, rgba(27,35,48,0.72) 0%, rgba(19,26,36,0.62) 100%);
  --glass-border: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.02));
  --glass-blur: 14px;
  --inner-glow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 28px rgba(124,58,237,0.05);

  /* Motion — one easing + two durations the whole UI shares. */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 140ms;
  --dur: 200ms;
}

* { box-sizing: border-box; }
html { font-size: 16px; }   /* explicit base — readable body text (ui-ux §6) */
body {
  margin: 0; font-family: var(--font);
  background: var(--bg) var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;          /* body line-height 1.5 (ui-ux §6) */
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent-2); text-decoration: none; transition: color 0.15s; }
a:hover { color: #22d3ee; text-decoration: underline; }
code {
  font-family: var(--mono);
  background: rgba(255,255,255,0.05);
  padding: 2px 6px; border-radius: 4px;
  font-size: 0.88em;
  border: 1px solid var(--border-soft);
}
pre {
  background: var(--surface-2); padding: 12px 16px;
  border-radius: var(--r-md); overflow-x: auto;
  border: 1px solid var(--border-soft);
}

.topnav {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(19,26,36,0.95), rgba(19,26,36,0.7));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.brand { font-weight: 700; font-size: 1.05em; letter-spacing: -0.01em; }
.brand-emoji { font-size: 1.3em; margin-right: 8px; }
.brand-text { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-text .muted { background: none; -webkit-text-fill-color: var(--muted); color: var(--muted); font-weight: 500; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }
.navlinks { display: flex; gap: 4px; flex: 1; }
.navlinks a {
  color: var(--text-2); padding: 6px 12px; border-radius: var(--r-sm);
  font-size: 0.92em; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.navlinks a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.navlinks a.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent-3);
}
.health { display: flex; align-items: center; gap: 6px; font-size: 0; line-height: 1; max-width: 32px; overflow: hidden; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); display: inline-block; box-shadow: 0 0 6px currentColor; }
.health-dot.dot-green { background: #10b981; color: #10b981; }
.health-dot.dot-amber { background: #f59e0b; color: #f59e0b; }
.health-dot.dot-red   { background: #ef4444; color: #ef4444; }
.health-dot.dot-grey  { background: #64748b; color: transparent; box-shadow: none; }

.container { max-width: 1480px; margin: 28px auto; padding: 0 24px; }

.footer {
  padding: 24px 24px 32px;
  font-size: 0.82em;
  color: var(--muted-dim);
  border-top: 1px solid var(--border-soft);
  margin-top: 40px;
}
.footer-row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 10px;
  max-width: 1480px; margin: 0 auto;
}
.footer-sep { color: var(--muted-dim); }
.footer code {
  background: transparent; border: none; color: var(--text-2);
  padding: 0; font-size: 0.95em;
}

h1, h2, h3, h4 { margin-top: 0; letter-spacing: -0.01em; }
/* Display font wiring (P1) — Space Grotesk on headings/display; body stays Inter. */
h1, h2, h3, h4, .page-h1, .display, .hero-title { font-family: var(--font-display); }
h1 { font-size: 1.85em; font-weight: 700; display: flex; align-items: center; gap: 12px; letter-spacing: -0.02em; }
h2 { font-size: 1.35em; font-weight: 600; letter-spacing: var(--tracking-snug); }
h3 { font-size: 1.05em; font-weight: 600; letter-spacing: var(--tracking-snug); }
h4 { font-weight: 600; letter-spacing: var(--tracking-snug); }

.btn, .btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-md); border: none; cursor: pointer;
  font-family: inherit; font-size: 0.92em; font-weight: 600;
  background: var(--grad-primary); color: white;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.15s, opacity 0.15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-secondary:hover { background: var(--surface-3); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-secondary.active { background: var(--grad-primary); color: white; border-color: transparent; }
.btn-link { color: var(--accent-2); }
.link {
  background: none; border: none; color: var(--accent-2);
  cursor: pointer; padding: 0; font-family: inherit;
  transition: color 0.15s;
}
.link:hover { color: #22d3ee; text-decoration: underline; }

/* Boardroom layout */
.board { display: grid; grid-template-columns: 300px 1fr; gap: 22px; height: calc(100vh - 140px); }
.sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  overflow-y: auto;
}
.sidebar h3 {
  font-size: 0.74em; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted);
  margin-bottom: 10px; font-weight: 700;
}
.sidebar h4 {
  font-size: 0.7em; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted);
  margin-top: 18px; margin-bottom: 8px; font-weight: 700;
}
.sidebar-section { margin-top: 26px; }

.agent-list { list-style: none; padding: 0; margin: 0; }
.agent {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-md); cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.12s, transform 0.12s;
  border-left: 3px solid transparent;
}
.agent:hover { background: var(--surface-2); }
.agent.active {
  background: var(--surface-2);
  border-left-color: var(--accent-3);
  padding-left: 8px;
}
.agent-emoji { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-size: 1.1em; }
.agent-meta { display: flex; flex-direction: column; }
.agent-name { font-size: 0.95em; }
.agent-model { font-size: 0.72em; color: var(--muted); font-family: var(--mono); }
.agent-tier { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.72em; }
.tier-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.02em;
}
.tier-opus   { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
.tier-sonnet { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; }
.tier-ollama { background: rgba(100,116,139,0.25); color: #94a3b8; }
.tier-auto   { background: rgba(100,116,139,0.18); color: #cbd5e1; }

.chat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.messages { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.messages.static { padding: 0; }

.msg {
  padding: 16px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  transition: border-color 0.18s;
}
.msg.user {
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.04));
  border-left: 3px solid var(--accent-3);
}
.msg.assistant {
  background: linear-gradient(135deg, rgba(6,182,212,0.06), rgba(59,130,246,0.03));
  border-left: 3px solid var(--accent-2);
}
.msg.streaming { opacity: 0.85; }
.msg-head { display: flex; justify-content: space-between; font-size: 0.85em; margin-bottom: 8px; color: var(--muted); }
.msg-who { font-weight: 600; color: var(--text); }
.msg-body { line-height: 1.6; }
.msg-body.markdown p:first-child { margin-top: 0; }
.msg-body.markdown p:last-child { margin-bottom: 0; }
.msg-body.markdown ul, .msg-body.markdown ol { padding-left: 22px; }
.msg-body.markdown table { border-collapse: collapse; }
.msg-body.markdown th, .msg-body.markdown td { border: 1px solid var(--border); padding: 6px 10px; }
.msg-body pre { font-family: inherit; white-space: pre-wrap; word-wrap: break-word; }

.composer { border-top: 1px solid var(--border); padding: 12px; background: var(--surface); }
.composer textarea {
  width: 100%; padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 0.95em; resize: vertical;
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(139,92,246,0.35);
  box-shadow: var(--shadow-md);
}
.card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-left: 12px; }
.card-head h3 { margin: 0; font-size: 1.08em; font-weight: 600; }
.card-head code { font-size: 0.8em; }

.kv { display: grid; gap: 6px; }
.kv.block { background: var(--surface); border: 1px solid var(--border); padding: 12px 16px; border-radius: 8px; max-width: 600px; }
.kv > div { display: flex; gap: 12px; }
.kv > div > span { min-width: 130px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { font-size: 0.8em; padding: 2px 8px; border-radius: 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.tag.muted { color: var(--muted); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.table th { color: var(--muted); font-weight: normal; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.5px; }
.ellipsis { max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.note { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 12px; }
.note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.ok { color: var(--ok); }
.err { color: var(--err); }

/* ---------- Dashboard pages (spend / outputs / runs / graph / tasks) ---------- */

.page-h1 {
  font-size: 1.85em; font-weight: 700; margin: 0 0 6px 0;
  letter-spacing: -0.02em;
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  display: inline-block;
}
.page-sub { color: var(--muted); margin: 0 0 28px 0; font-size: 1.02em; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.stat-card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity 0.18s;
}
.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(139,92,246,0.4);
  box-shadow: var(--shadow-md);
}
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-label {
  color: var(--muted); font-size: 0.78em;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  margin-bottom: 8px;
}
.stat-card .stat-value {
  font-size: 2em; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em; line-height: 1.15;
}
.stat-card .stat-delta { color: var(--muted); font-size: 0.85em; margin-top: 6px; }
.stat-card .stat-delta.up { color: var(--ok); }
.stat-card .stat-delta.down { color: var(--err); }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: 22px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.chart-card:hover { border-color: var(--border); box-shadow: var(--shadow-md); }
.chart-card h3 {
  margin: 0 0 16px 0; font-size: 1.02em; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
}
.chart-canvas-wrap { position: relative; height: 280px; }

.section-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 1100px) { .section-grid-2 { grid-template-columns: 1fr; } }

.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.table-card:hover { box-shadow: var(--shadow-md); }
.table-card h3 {
  margin: 0; padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 1.02em; font-weight: 600;
}
.table-card table { width: 100%; border-collapse: collapse; }
.table-card th, .table-card td {
  padding: 11px 22px; text-align: left;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.92em;
}
.table-card th {
  color: var(--muted); font-weight: 600;
  text-transform: uppercase; font-size: 0.74em;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.02);
}
.table-card tbody tr:last-child td { border-bottom: none; }
.table-card tbody tr { transition: background 0.12s; }
.table-card tbody tr:hover { background: rgba(139,92,246,0.06); }
.table-card .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.78em; font-weight: 500; background: rgba(255,255,255,0.08); color: var(--text); }
.badge.ok { background: rgba(16,185,129,0.18); color: var(--ok); }
.badge.err { background: rgba(239,68,68,0.18); color: var(--err); }
.badge.muted { background: rgba(255,255,255,0.05); color: var(--muted); }
.badge.brand-ufit { background: rgba(99,102,241,0.18); color: #a5b4fc; }
.badge.brand-fantasyboss { background: rgba(0,200,83,0.18); color: #34d399; }
.badge.brand-vantage-media { background: rgba(245,158,11,0.18); color: #fbbf24; }
.badge.brand-personal { background: rgba(168,85,247,0.18); color: #c084fc; }

/* ---------- Brain Graph ---------- */
.graph-host { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; height: calc(100vh - 220px); min-height: 500px; position: relative; overflow: hidden; }
.graph-legend { position: absolute; top: 14px; right: 14px; background: rgba(15,15,18,0.92); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-size: 0.88em; z-index: 10; max-width: 240px; }
.graph-legend h4 { margin: 0 0 8px 0; font-size: 0.9em; }
.graph-legend .legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.graph-legend .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.graph-side { position: absolute; top: 14px; left: 14px; background: rgba(15,15,18,0.92); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; font-size: 0.9em; z-index: 10; max-width: 320px; max-height: 480px; overflow-y: auto; }
.graph-side .agent-detail-empty { color: var(--muted); font-style: italic; }
.graph-side h4 { margin: 0 0 8px 0; }
.graph-side .field-row { margin-bottom: 6px; }
.graph-side .field-label { color: var(--muted); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Kanban (Tasks page) ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .kanban { grid-template-columns: 1fr; } }
.kanban-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-height: 420px;
  transition: border-color 0.18s;
}
.kanban-col:hover { border-color: rgba(139,92,246,0.25); }
.kanban-col h3 {
  margin: 0; padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95em; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.kanban-col h3 .count {
  color: var(--muted); font-weight: 500; font-size: 0.78em;
  background: var(--surface-2);
  padding: 2px 8px; border-radius: 999px;
}
.kanban-col[data-status="todo"]        h3 { border-bottom-color: rgba(100,116,139,0.4); }
.kanban-col[data-status="in_progress"] h3 { border-bottom-color: rgba(59,130,246,0.4); }
.kanban-col[data-status="blocked"]     h3 { border-bottom-color: rgba(239,68,68,0.4); }
.kanban-col[data-status="done"]        h3 { border-bottom-color: rgba(16,185,129,0.4); }
.kanban-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.task-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px; cursor: pointer;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
  border-left-width: 3px;
}
.task-card:hover {
  background: rgba(139,92,246,0.06);
  transform: translateY(-1px);
  border-color: rgba(139,92,246,0.25);
}
.task-card .task-title { font-weight: 600; margin-bottom: 6px; font-size: 0.94em; }
.task-card .task-meta { color: var(--muted); font-size: 0.78em; display: flex; flex-wrap: wrap; gap: 6px; }
.task-card.task-priority-1 { border-left-color: #6b7280; }
.task-card.task-priority-2 { border-left-color: #3b82f6; }
.task-card.task-priority-3 { border-left-color: #f59e0b; }
.task-card.task-priority-4 { border-left-color: #ef4444; }

.new-task-form { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; }
.new-task-form input, .new-task-form select, .new-task-form textarea { background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; color: var(--text); font-family: inherit; font-size: 0.95em; }
.new-task-form input[type="text"] { width: 100%; }
.new-task-form textarea { width: 100%; resize: vertical; min-height: 60px; }
.new-task-form .form-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.new-task-form .form-row > * { flex: 1; min-width: 140px; }
.new-task-form button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.new-task-form button:hover { background: #2563eb; }

/* ---------- Outputs index ---------- */
.output-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 18px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.output-group:hover { box-shadow: var(--shadow-md); }
.output-group h3 {
  margin: 0 0 14px 0; font-size: 1.08em; font-weight: 600;
  display: flex; justify-content: space-between; align-items: baseline;
}
.output-group h3 .count {
  color: var(--muted); font-weight: 500; font-size: 0.8em;
  background: var(--surface-2);
  padding: 3px 10px; border-radius: 999px;
}
.output-list { display: flex; flex-direction: column; gap: 4px; }
.output-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-sm);
  transition: background 0.12s;
}
.output-row:hover { background: rgba(139,92,246,0.06); }
.output-row .output-icon { font-size: 1.15em; opacity: 0.85; width: 22px; }
.output-row .output-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.93em; font-weight: 500;
}
.output-row .output-meta { color: var(--muted); font-size: 0.8em; font-variant-numeric: tabular-nums; }
.output-row a { color: var(--accent-2); text-decoration: none; font-size: 0.86em; font-weight: 600; }
.output-row a:hover { text-decoration: underline; }

/* Selectable rows + copy button */
.output-row.selected { background: rgba(139,92,246,0.14); }
.output-row .row-check {
  width: 16px; height: 16px;
  accent-color: var(--accent-2);
  cursor: pointer;
}
.output-row .row-check:disabled { opacity: 0.35; cursor: not-allowed; }
.output-row .row-copy {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  padding: 2px 7px; border-radius: var(--r-sm);
  font-size: 0.82em; line-height: 1.2;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.output-row .row-copy:hover {
  background: rgba(139,92,246,0.1);
  color: var(--accent-2); border-color: var(--accent-2);
}

/* Per-brand asset-summary badge row — production-readiness at a glance */
.asset-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: -4px 0 14px 0;
  padding: 6px 0 10px 0;
  border-bottom: 1px dashed var(--border);
}
.asset-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78em; font-weight: 500;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.asset-badge.empty {
  background: transparent; color: var(--muted);
  border-style: dashed;
}
.asset-badge.images { color: #f59e0b; border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); }
.asset-badge.videos { color: #ef4444; border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.asset-badge.docs   { color: #3b82f6; border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.08); }
.asset-badge.decks  { color: #f97316; border-color: rgba(249,115,22,0.35); background: rgba(249,115,22,0.08); }
.asset-badge.sheets { color: #10b981; border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); }
.asset-badge.drafts { color: var(--muted); }
.asset-badge.drive  { color: var(--accent-2); border-color: rgba(139,92,246,0.4); background: rgba(139,92,246,0.1); font-weight: 600; }

/* Per-brand action buttons (Select all / Copy as markdown) in the h3 */
.output-group h3 .brand-actions { display: inline-flex; gap: 6px; }
.brand-btn {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px; border-radius: var(--r-sm);
  font-size: 0.78em; font-weight: 500; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.brand-btn:hover {
  background: rgba(139,92,246,0.12);
  color: var(--accent-2); border-color: var(--accent-2);
}

/* Sticky bulk-action bar */
.bulk-bar {
  position: sticky; top: 8px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--accent-2);
  box-shadow: var(--shadow-md);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin: 0 0 14px 0;
}
.bulk-bar #bulk-count {
  font-weight: 600; color: var(--accent-2);
  margin-right: 6px;
}
.bulk-bar button {
  background: var(--accent-2); color: white;
  border: none; padding: 6px 12px;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 0.85em; font-weight: 500;
  transition: filter 0.12s;
}
.bulk-bar button:hover { filter: brightness(1.1); }
.bulk-bar button.ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
}
.bulk-bar button.ghost:hover { color: var(--text); border-color: var(--text); }

/* ---------- /metrics page ---------- */
.period-toggle {
  display: flex; gap: 6px; align-items: center;
  margin: 12px 0 18px 0;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.period-toggle .period-label {
  color: var(--muted); font-size: 0.85em; margin-right: 6px;
}
.period-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 12px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 0.85em; font-weight: 500;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.period-btn:hover {
  background: rgba(139,92,246,0.08); border-color: var(--accent-2);
}
.period-btn.active {
  background: var(--accent-2); color: white; border-color: var(--accent-2);
}
.period-btn.ghost { margin-left: auto; }

.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; margin: 4px 0 14px 0;
}
.kpi-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-label {
  color: var(--muted); font-size: 0.75em;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.kpi-value {
  font-size: 1.4em; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kpi-delta { font-size: 0.8em; }
.kpi-empty {
  padding: 12px; font-size: 0.9em; font-style: italic;
}
.delta-up   { color: #10b981; font-weight: 600; }
.delta-down { color: #ef4444; font-weight: 600; }
.delta-flat { color: var(--muted); }

.subhead {
  margin: 14px 0 6px 0; font-size: 0.85em;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600;
}
.metrics-table {
  width: 100%; border-collapse: collapse; font-size: 0.88em;
}
.metrics-table th {
  text-align: left; padding: 6px 10px;
  color: var(--muted); font-weight: 500;
  border-bottom: 1px solid var(--border);
  font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.5px;
}
.metrics-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.metrics-table tbody tr:hover { background: rgba(139,92,246,0.04); }
.metrics-table .caption-preview {
  color: var(--muted); font-size: 0.95em; max-width: 360px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 999px; font-size: 0.78em; font-weight: 500;
}
.badge-instagram { background: rgba(228,64,95,0.12); color: #e4405f; }
.badge-facebook  { background: rgba(24,119,242,0.12); color: #1877f2; }
.badge-tiktok    { background: rgba(0,0,0,0.08); color: var(--text); }
.badge-linkedin  { background: rgba(10,102,194,0.12); color: #0a66c2; }
.badge-youtube   { background: rgba(255,0,0,0.10); color: #ff0000; }

.setup-card {
  background: rgba(245,158,11,0.06);
  border: 1px dashed rgba(245,158,11,0.4);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 18px 0;
}
.setup-card h3 { margin: 0 0 10px 0; color: #f59e0b; }
.setup-card ol { margin: 0; padding-left: 24px; }
.setup-card li { margin: 8px 0; }
.setup-card pre {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-family: Consolas, monospace;
  font-size: 0.85em;
  overflow-x: auto;
  margin: 6px 0;
}
.setup-card code { background: var(--surface-2); padding: 1px 6px; border-radius: 3px; font-size: 0.9em; }

/* Copy-confirmation toast */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--surface);
  padding: 10px 18px; border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: 0.9em; font-weight: 500;
  opacity: 0; transition: opacity 0.18s, transform 0.18s;
  z-index: 1000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Responsive — keep usable down to ~900px */
@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; height: auto; }
  .sidebar { max-height: 200px; }
  .navlinks { gap: 8px; font-size: 0.9em; flex-wrap: wrap; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 5-section grouped nav (Phase 1 IA) --- */
[x-cloak] { display: none !important; }
.navgroup { position: relative; display: inline-block; }
.navgroup-btn {
  background: none; border: none; color: var(--text-2, #c7d0e0);
  font: inherit; font-size: 0.92em; font-weight: 500; cursor: pointer;
  padding: 6px 12px; border-radius: var(--r-sm, 8px);
  transition: background 0.15s, color 0.15s;
}
.navgroup-btn:hover, .navgroup-btn.active { color: var(--text, #e6ebf2); background: var(--surface-2, #1b2330); }
.navgroup-btn.active { box-shadow: inset 0 -2px 0 var(--accent-3, #8b5cf6); }
.navgroup-emoji { margin-right: 6px; }
.navgroup-menu {
  position: absolute; top: 100%; left: 0; min-width: 196px; z-index: 200;
  margin-top: 8px;
  background: rgba(19,26,36,0.98); border: 1px solid var(--border, #243048);
  border-radius: 12px; padding: 7px; box-shadow: var(--shadow-lg, 0 12px 36px rgba(0,0,0,.5));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 2px;
}
/* Transparent hover-bridge spanning the gap between the button and the menu, so
 * the cursor never crosses an un-hoverable dead zone (the reason the menu used
 * to vanish before you could click an item). Belt-and-suspenders with the
 * menu's own mouseenter keep-open + the 320ms close delay. */
.navgroup-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.navgroup-menu a {
  padding: 9px 12px; border-radius: var(--r-sm, 7px);
  color: var(--text-2, #c7d0e0); font-size: 0.9em; font-weight: 500;
  white-space: nowrap;
}
.navgroup-menu a:hover, .navgroup-menu a.active { background: var(--surface-2, #1b2330); color: var(--text, #e6ebf2); text-decoration: none; }
.navgroup-menu a .muted { font-size: 0.78em; }
@media (max-width: 720px) {
  .navlinks { flex-wrap: wrap; }
  .navgroup-menu { position: static; box-shadow: none; margin-top: 2px; }
}

/* --- Home cockpit (Phase 1) — reuses the shared .card surface --- */
.cockpit-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-bottom: 20px;
}
.cockpit-grid .card h2 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; }
.cockpit-grid .needs-list, .cockpit-grid .runs-list {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow: auto;
}
.cockpit-grid .needs-list li, .cockpit-grid .runs-list li {
  font-size: 0.88em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.brief-digest {
  white-space: pre-wrap; font-size: 0.82rem; color: var(--text-2, #c7d0e0);
  max-height: 220px; overflow: auto; margin: 0 0 10px;
  font-family: var(--mono, "JetBrains Mono", monospace);
}
.btn-sm {
  font-size: 0.8rem; color: var(--accent-2, #06b6d4); font-weight: 500;
}
#quick-task { display: flex; gap: 8px; }
#quick-task input {
  flex: 1; padding: 8px 10px; border-radius: var(--r-sm, 8px);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 0.9em;
}
#quick-task input:focus { outline: none; border-color: var(--accent); }
#quick-task button {
  background: var(--accent); border: none; color: #fff;
  padding: 8px 16px; border-radius: var(--r-sm, 8px);
  font-weight: 600; cursor: pointer; transition: filter 0.15s;
}
#quick-task button:hover { filter: brightness(1.12); }
@media (max-width: 720px) { .cockpit-grid { grid-template-columns: 1fr; } }

/* Recent finals (cockpit) — mirrors the /outputs "↗ Drive + copy" treatment */
.cockpit-grid .finals-list {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow: auto;
}
.cockpit-grid .finals-list li {
  font-size: 0.86em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cockpit-grid .finals-list .final-name {
  font-weight: 500; color: var(--text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cockpit-grid .finals-list .small { font-size: 0.85em; }
.cockpit-grid .finals-list .row-link {
  color: var(--accent-2); text-decoration: none; font-size: 0.86em; font-weight: 600;
  margin-left: auto;
}
.cockpit-grid .finals-list .row-link:hover { text-decoration: underline; }
.cockpit-grid .finals-list .row-copy {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  padding: 2px 7px; border-radius: var(--r-sm);
  font-size: 0.82em; line-height: 1.2;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cockpit-grid .finals-list .row-copy:hover {
  background: rgba(139,92,246,0.1);
  color: var(--accent-2); border-color: var(--accent-2);
}

/* ============================================================================
 * UI polish pass — grounded in the ui-ux-pro-max skill (accessibility-first).
 * Priorities applied: §1 Accessibility (focus, reduced-motion, contrast),
 * §4/§6 consistent status-pill component, §2 hit-area on dense controls.
 * ==========================================================================*/

/* §1 focus-states — VISIBLE keyboard focus on every interactive element.
 * Several components set `outline:none` on :focus (a CRITICAL anti-pattern);
 * these :focus-visible rules sit later in the cascade at equal specificity, so
 * keyboard focus shows a ring while mouse focus stays clean (:focus-visible is
 * not triggered by pointer). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible, .btn-secondary:focus-visible, .btn-sm:focus-visible,
.link:focus-visible, .brand-btn:focus-visible, .period-btn:focus-visible,
.navgroup-btn:focus-visible, .navlinks a:focus-visible, .navgroup-menu a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible,
.task-card:focus-visible, .agent:focus-visible, .output-row:focus-visible,
.status-cycle:focus-visible, .assign-pick:focus-visible, .del-item:focus-visible,
.row-copy:focus-visible, .row-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Inputs already carry a radius — keep the ring snug to it. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 1px; border-color: var(--accent);
}

/* §7 reduced-motion — honor the OS setting; collapse transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .stat-card:hover, .task-card:hover, .btn:hover, .btn-secondary:hover {
    transform: none !important;
  }
}

/* §4/§6 STATUS PILL — one consistent "status pill" component (the daforgelayer
 * design language) used across Board / runs / Needs-you. Dot + label; semantic
 * variants never rely on color alone (the label carries meaning too, §1). */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.76em; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.01em; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
.pill .pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: 0 0 7px;
  box-shadow: 0 0 6px currentColor;
}
.pill-ok      { color: #34d399; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.35); }
.pill-warn    { color: #fbbf24; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); }
.pill-err     { color: #f87171; background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.35); }
.pill-info    { color: #38bdf8; background: rgba(6,182,212,0.12);   border-color: rgba(6,182,212,0.35); }
.pill-accent  { color: #c4b5fd; background: rgba(139,92,246,0.14);  border-color: rgba(139,92,246,0.4); }
.pill-neutral { color: var(--muted); background: rgba(255,255,255,0.04); border-color: var(--border); }
/* Pill as a button (e.g. Board status-cycle) — same look, clickable affordance. */
button.pill { cursor: pointer; font-family: inherit; }
button.pill:hover { filter: brightness(1.12); }

/* §2 hit-area — give dense icon controls a comfortable target without bloating
 * desktop tables (44px is the mobile ideal; ~30px keeps data rows tight yet
 * tappable, with the focus ring extending the perceived area). */
.row-copy, .del-item, .status-cycle, .btn-sm {
  min-height: 28px;
}
@media (pointer: coarse) {
  .row-copy, .del-item, .status-cycle, .btn-sm, .assign-pick { min-height: 40px; }
}

/* ============================================================================
 * OS-UI P1 — DESIGN SYSTEM COMPONENT LAYER (additive)
 * Premium, documented, client-shareable. Nothing above is renamed/removed —
 * existing class names keep working; the glass treatment is folded INTO the
 * existing surfaces (.card / .stat-card / .table-card / .navgroup-menu) and
 * the new building blocks live below. Showcase: GET /style. Docs:
 * docs/design-system.md.
 * ==========================================================================*/

/* ---- Glass mixin -----------------------------------------------------------
 * .glass = the reusable layered-glass panel: translucent fill + backdrop blur +
 * a 1px gradient hairline (via border-image) + a soft inner glow. Use it on any
 * panel you want to read as "elevated glass". */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid transparent;
  border-image: var(--glass-border) 1;
  box-shadow: var(--shadow-md), var(--inner-glow);
}
/* Fold the glass treatment into the existing surfaces (enhance, don't rename).
 * Kept conservative so existing layouts/scroll behavior are unchanged. */
.card,
.stat-card,
.table-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-sm), var(--inner-glow);
}
.navgroup-menu {
  background: var(--glass-bg);
  box-shadow: var(--shadow-lg), var(--inner-glow);
}

/* ---- Unified motion --------------------------------------------------------
 * Re-express the hover-lift + timing on the shared interactive surfaces using
 * the motion tokens, so every card/button shares one easing + duration. (These
 * sit later in the cascade at equal specificity → they win on timing without
 * changing the existing visual deltas.) */
.card, .stat-card, .table-card, .output-group, .kanban-col,
.btn, .btn-secondary, .task-card {
  transition-timing-function: var(--ease);
  transition-duration: var(--dur);
}
.btn, .btn-secondary { transition-duration: var(--dur-fast); }

/* ---- Page shell + hero -----------------------------------------------------
 * Shared page-header band so every page reads as one product: eyebrow +
 * gradient hero title + sub + a right-aligned actions slot. */
.page-shell {
  margin-bottom: var(--space-7);
}
.hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}
.hero-main { min-width: 0; }
.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); margin: var(--space-2) 0 var(--space-2);
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
}
.hero-sub { color: var(--muted); font-size: 1.02em; margin: 0; max-width: 64ch; }
.hero-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Eyebrow + section header ----------------------------------------------
 * .eyebrow = small uppercase tracked label (also used standalone). */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--accent-3);
}
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-7) 0 var(--space-4);
}
.section-header .section-titles { min-width: 0; }
.section-header h2 { margin: var(--space-1) 0 0; }
.section-header .section-sub { color: var(--muted); font-size: 0.92em; margin: var(--space-1) 0 0; }
.section-header .section-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Toolbar ---------------------------------------------------------------
 * Horizontal control row (filters / search / actions) with consistent spacing.
 * .toolbar-spacer pushes trailing controls to the right. */
.toolbar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--space-5);
}
.toolbar .toolbar-spacer { flex: 1 1 auto; }
.toolbar input[type="text"], .toolbar input[type="search"], .toolbar select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); padding: 7px 11px;
  font-family: inherit; font-size: 0.9em;
}
.toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--accent); }

/* ---- KPI tile (refined) ----------------------------------------------------
 * The existing .kpi-tile/.kpi-value/.kpi-label/.kpi-delta keep working; this
 * upgrades the tile to a glass surface with a hover-lift, tabular value, an
 * up/down delta and an optional sparkline slot. Additive — no renames. */
.kpi-tile {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-4);
  box-shadow: var(--shadow-sm), var(--inner-glow);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kpi-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(139,92,246,0.4);
  box-shadow: var(--shadow-md), var(--inner-glow);
}
.kpi-tile .kpi-value { line-height: var(--lh-tight); }
.kpi-tile .kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.kpi-tile .kpi-delta.up::before { content: "▲"; font-size: 0.8em; color: var(--ok); }
.kpi-tile .kpi-delta.down::before { content: "▼"; font-size: 0.8em; color: var(--err); }
.kpi-tile .kpi-delta.up { color: var(--ok); }
.kpi-tile .kpi-delta.down { color: var(--err); }
.kpi-spark { display: block; width: 100%; height: 28px; margin-top: var(--space-2); opacity: 0.9; }

/* ---- Empty state -----------------------------------------------------------
 * Centered icon + title + hint + optional CTA. Use whenever a list/grid is
 * empty instead of a bare "nothing here". */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  color: var(--muted);
}
.empty-state .empty-icon {
  font-size: 2.4rem; line-height: 1;
  filter: grayscale(0.2); opacity: 0.9; margin-bottom: var(--space-1);
}
.empty-state .empty-title {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 600; color: var(--text-2);
}
.empty-state .empty-hint { font-size: 0.9em; max-width: 46ch; }
.empty-state .empty-cta { margin-top: var(--space-3); }

/* ---- Skeleton loaders ------------------------------------------------------
 * Shimmering placeholders for loading content. Shimmer is disabled under
 * prefers-reduced-motion (handled by the global block above + the explicit
 * override below). */
@keyframes os-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0.04) 30%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 70%
  );
  background-size: 200% 100%;
  animation: os-skeleton-shimmer 1.4s var(--ease) infinite;
}
.skeleton.skeleton-text { height: 0.85em; margin: 0.4em 0; }
.skeleton.skeleton-text.w-50 { width: 50%; }
.skeleton.skeleton-text.w-75 { width: 75%; }
.skeleton.skeleton-title { height: 1.4em; width: 40%; margin-bottom: 0.6em; }
.skeleton.skeleton-block { height: 88px; }
.skeleton.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background-position: 0 0; }
}

/* ---- /style reference-page helpers (showcase only) ------------------------- */
.ds-grid { display: grid; gap: var(--space-3); }
.swatch-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.swatch {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.swatch .swatch-chip { height: 64px; width: 100%; display: block; }
.swatch .swatch-meta { padding: 8px 10px; }
.swatch .swatch-name { font-size: 0.82em; font-weight: 600; color: var(--text); }
.swatch .swatch-hex {
  font-family: var(--mono); font-size: 0.78em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.type-row {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft);
}
.type-row .type-token {
  font-family: var(--mono); font-size: 0.78em; color: var(--muted);
  min-width: 130px; flex: 0 0 130px;
}
.elev-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.elev-sample {
  height: 96px; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8em; color: var(--muted); font-family: var(--mono);
}
.demo-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }