/* PROJECT THE X — minimal monochrome with a curated accent palette */
* { box-sizing: border-box; }
:root {
  --bg: #ffffff;
  --ink: #050505;
  --line: #050505;
  --muted: #777777;
  --soft: #f4f4f4;
  /* Tight three-colour palette — orange (in-progress / accent), red (errors /
     active state / admin role), green (success / healthy / agency role). The
     UI stays monochrome elsewhere so these read as pure signal. */
  /* Brightened orange family: operator feedback was that the previous
     dark-orange (#f97316, Tailwind orange-600) read as muddy next to the
     parchment background. Standardised on #f97316 (orange-500, Tailwind's
     'bright orange') for every interactive surface; only the agent-meta
     node keeps the slightly darker shade so it remains visually distinct
     from the orchestrator on the activity graph. */
  --accent:        #f97316;   /* orange — primary interactive, links, focus */
  --accent-soft:   #ffedd5;
  --success:       #16a34a;   /* green — approvals, success, healthy KPIs */
  --success-soft:  #dcfce7;
  --warning:       #f97316;   /* alias to orange so legacy "warning" classes share the same hue */
  --warning-soft:  #ffedd5;
  --danger:        #dc2626;   /* red — failures, rejections, alerts */
  --danger-soft:   #fee2e2;
  /* Each agent gets a unique hue, but every hue is a shade of the platform's
     orange / red / green triad so the broader UI stays in the same family.
     The orchestrator gets the boldest orange (it's the brain); the rest are
     placed around the colour wheel within the triad's tonal range. */
  --agent-orchestrator: #f97316;  /* orange — primary */
  --agent-research:     #16a34a;  /* green — primary */
  --agent-architect:    #dc2626;  /* red — primary */
  --agent-composer:     #fb923c;  /* orange — soft */
  --agent-vision:       #84cc16;  /* lime — green family */
  --agent-meta:         #fb923c;  /* orange — deep (distinct from primary) */
  --agent-reports:      #15803d;  /* green — deep */
  --agent-qa:           #f43f5e;  /* rose — red family */
  --agent-leads:        #14b8a6;  /* teal — green family */
  --agent-alerts:       #b91c1c;  /* red — deep */
  --warn: #555;
  --error: #ef4444;
  --serif: "GT Sectra", "Tiempos Headline", "Canela", "Noe Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --shadow-soft: 0 1px 0 rgba(0,0,0,.06);
}

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  transition: background .25s ease, color .25s ease;
}

/* Make every text element in the dashboard bold by default.
   The operator dashboard (body.admin-page) shares this rule so its
   typography matches the agency dashboard. */
body.app, body.app *,
body.admin-page, body.admin-page * {
  font-weight: 700;
}
/* Headings stay bold; serif headings can use 600 to feel less heavy than 800. */
body.app h1, body.app h2, body.app h3, body.app h4, body.app h5,
body.app .auth-title, body.app .brand-name,
body.admin-page h1, body.admin-page h2, body.admin-page h3, body.admin-page h4, body.admin-page h5 {
  font-weight: 700;
}
/* Inputs/textareas keep the bold look for consistency. */
body.app input, body.app textarea, body.app select,
body.admin-page input, body.admin-page textarea, body.admin-page select { font-weight: 700; }
/* Auth page bolding too. */
body.auth-page, body.auth-page * { font-weight: 700; }
/* Lock scroll only on the dashboard (which uses a fixed grid layout). The
   landing page, login screen and other long-form pages need natural
   scrolling. Privacy + Terms set their OWN body.*-page { overflow: hidden }
   because they use a sticky-TOC pattern with internal scroll. */
body.app {
  overflow: hidden;
}

/* Subtle film grain */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .035;
  background-image:
    radial-gradient(circle at 25% 25%, #000 0.5px, transparent 0.5px),
    radial-gradient(circle at 75% 75%, #000 0.5px, transparent 0.5px);
  background-size: 4px 4px, 6px 6px;
}

.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px 18px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--ink);
  font-family: var(--serif); font-size: 18px;
  transform: translateY(-1px);
}
.brand-name {
  font-family: var(--serif);
  letter-spacing: .14em; font-size: 18px; font-weight: 500;
}

.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.deadline {
  border: 1px solid currentColor; padding: 2px 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
}
.deadline.warn { background: var(--ink); color: var(--bg); animation: blink 1s infinite; }
.status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ccc;
  box-shadow: 0 0 0 0 rgba(0,0,0,.4);
}
.status.connected .dot { background: #000; animation: pulse 2.6s infinite ease-out; }
.status.busy .dot { background: #000; animation: pulse 1.1s infinite ease-out; }
.status.error .dot { background: #000; animation: blink 0.8s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@keyframes blink { 50% { opacity: .35; } }

.stage {
  position: relative; z-index: 4;
  height: calc(100vh - 70px);
  display: grid; grid-template-columns: 380px 1fr;
}
.left {
  border-right: 1px solid var(--line);
  padding: 36px 28px 24px;
  display: flex; flex-direction: column; gap: 22px;
}
.right {
  padding: 28px 36px;
  display: flex; flex-direction: column;
  gap: 20px; min-height: 0; overflow-y: auto;
}
.right > .chat { flex: 1 1 auto; min-height: 200px; }
.right > .perf-panel,
.right > .project-card { flex: 0 0 auto; }

.text-form {
  display: grid; grid-template-columns: 1fr 56px; gap: 0;
  border: 1px solid var(--ink); margin-top: 8px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: box-shadow .15s ease, transform .15s ease;
}
/* Small caption above the command box that tells the user where the AI
   reply will come from. Sits OUTSIDE .text-form so the 1fr 56px grid stays
   intact (an earlier version put the badge inside, which split the grid
   into three columns and broke the submit button alignment). */
.cmd-ai-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 2px 0; opacity: .85;
}
.cmd-ai-hint .dim { line-height: 1.3; }
.text-form:focus-within { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.text-form input {
  border: 0; padding: 18px 18px; font-family: var(--serif); font-size: 17px;
  background: transparent; color: var(--ink); outline: none;
}
.text-form input::placeholder { color: var(--muted); font-style: italic; font-size: 15px; }
.text-form button {
  border: 0; border-left: 1px solid var(--ink);
  background: var(--bg); color: var(--ink); cursor: pointer; font-size: 22px;
}
.text-form button:hover { background: var(--ink); color: var(--bg); }
/* Visually disabled state when no creatives are uploaded yet. The
   submit click still triggers a warning + a nudge on the upload zone;
   greying it out makes the precondition obvious before the user types. */
.text-form.disabled-no-creatives { opacity: .55; }
.text-form.disabled-no-creatives input { cursor: not-allowed; }
.text-form.disabled-no-creatives button { cursor: not-allowed; }
/* Nudge animation: shakes the upload zone when the user tries to send
   without creatives. */
.upload-zone.nudge-required {
  animation: upload-shake 480ms cubic-bezier(.36, .07, .19, .97);
  box-shadow: 0 0 0 2px var(--danger, #dc2626);
}
@keyframes upload-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.transcript {
  font-family: var(--serif); font-size: 14px; line-height: 1.45;
  color: var(--muted); font-style: italic;
  border-top: 1px solid var(--ink); padding-top: 16px; margin-top: 4px;
}

.progress {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  margin-top: auto;
}
.progress li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid #eee; color: var(--muted);
}
.progress li .num { width: 22px; color: var(--muted); }
.progress li .name { flex: 1; }
.progress li .marker { width: 10px; height: 10px; border: 1px solid currentColor; border-radius: 50%; }
.progress li.active { color: var(--ink); }
.progress li.active .marker { background: var(--ink); animation: pulse 1.4s infinite; }
.progress li.done { color: var(--ink); }
.progress li.done .marker { background: var(--ink); }
.progress li.failed { color: var(--ink); }
.progress li.failed .marker { background: var(--bg); border-color: var(--ink); position: relative; }
.progress li.failed .marker::after { content: "✕"; position: absolute; inset: -3px 0 0 1px; font-size: 12px; }

.chat {
  overflow-y: auto;
  padding-right: 6px;
  display: flex; flex-direction: column; gap: 14px;
}
.chat .msg {
  max-width: 80%;
  font-size: 14px; line-height: 1.55;
  padding: 10px 14px; border: 1px solid var(--ink);
}
.chat .msg.user { align-self: flex-end; background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chat .msg.agent { align-self: flex-start; background: var(--bg); color: var(--ink); }
.chat .msg.warn { border-style: dashed; }
.chat .msg.error { background: #000; color: #fff; }

.live-log {
  align-self: flex-start; max-width: 95%;
  border-left: 2px solid var(--ink); padding: 6px 0 6px 12px;
  font-family: var(--mono); font-size: 11px; line-height: 1.6;
  color: #555; display: flex; flex-direction: column; gap: 2px;
}
.live-log-line { white-space: pre-wrap; word-break: break-all; }
.live-log-line:last-child { color: var(--ink); }

.msg.creation-fail { max-width: 95%; padding: 14px 16px; }
.msg.creation-fail .cf-step { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 8px 0 4px; opacity: .85; }
.msg.creation-fail .cf-err { font-family: var(--serif); font-size: 14px; line-height: 1.5; margin-bottom: 10px; }
.msg.creation-fail .cf-built { list-style: none; padding: 8px 10px; margin: 8px 0 12px; border: 1px dashed #fff; }
.msg.creation-fail .cf-built-h { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; padding-bottom: 4px; }
.msg.creation-fail .cf-built li { font-family: var(--mono); font-size: 11px; line-height: 1.6; opacity: .9; }
.msg.creation-fail .cf-built code { background: rgba(255,255,255,.08); padding: 1px 4px; }
.msg.creation-fail .cf-actions { display: flex; gap: 8px; margin-top: 10px; }
.msg.creation-fail .btn.solid { background: #fff; color: #000; border-color: #fff; }
.msg.creation-fail .btn.solid:hover { background: #000; color: #fff; border-color: #fff; }
.msg.creation-fail .btn.ghost { background: transparent; color: #fff; border-color: #fff; }
.msg.creation-fail .btn.ghost:hover { background: #fff; color: #000; }

/* Tasks panel */
.tasks-panel {
  border-top: 1px solid var(--ink); padding-top: 14px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.tasks-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.tasks-title { color: var(--muted); }
.tasks-count {
  border: 1px solid var(--ink); padding: 1px 7px; min-width: 22px; text-align: center;
  font-size: 10px; color: var(--ink); background: var(--bg);
}
.tasks-count.busy { background: var(--ink); color: var(--bg); }
.tasks-cancel-all {
  margin-left: auto;
  border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; cursor: pointer;
}
.tasks-cancel-all:hover { background: var(--ink); color: var(--bg); }

.tasks-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow-y: auto;
}
.tasks-list li {
  display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px;
  align-items: center; padding: 8px 10px;
  border: 1px solid var(--ink);
  font-size: 12px;
}
.tasks-list li[data-status="running"]   { background: var(--bg); }
.tasks-list li[data-status="done"]      { opacity: .55; }
.tasks-list li[data-status="failed"]    { background: #000; color: #fff; border-color: #000; }
.tasks-list li[data-status="cancelled"] { opacity: .55; border-style: dashed; }

.task-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor;
}
li[data-status="running"]   .task-dot { background: var(--ink); animation: pulse 1.4s infinite; }
li[data-status="done"]      .task-dot { background: var(--ink); }
li[data-status="failed"]    .task-dot { background: #fff; border-color: #fff; }
li[data-status="cancelled"] .task-dot { background: var(--bg); }

.task-label {
  font-family: var(--sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-label .kind {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-right: 6px;
}
li[data-status="failed"] .task-label .kind { color: #aaa; }

.task-elapsed {
  font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .08em;
  white-space: nowrap;
}
li[data-status="failed"] .task-elapsed { color: #aaa; }

.task-stop {
  border: 1px solid currentColor; background: transparent; color: currentColor;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; cursor: pointer;
}
.task-stop:hover { background: currentColor; color: var(--bg); }
li[data-status="failed"] .task-stop:hover { color: #000; }
li[data-status="running"] .task-stop { display: inline-block; }
li:not([data-status="running"]) .task-stop { display: none; }

.tasks-empty {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted);
  font-style: italic; margin: 0;
}
.chat .msg .role {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .55; margin-bottom: 4px;
}

.project-card {
  border: 1px solid var(--ink); padding: 22px 24px; max-height: 50vh; overflow-y: auto;
}
.project-card.hidden { display: none; }
.project-card h2 {
  font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 6px;
  letter-spacing: -.01em;
}
.pc-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted);
  text-transform: uppercase; display: flex; gap: 14px; margin-bottom: 12px; flex-wrap: wrap;
}
.pc-meta span:not(:empty) + span:not(:empty)::before { content: "·"; padding-right: 14px; color: var(--muted); }
#pc-summary { font-size: 14px; line-height: 1.6; margin: 0 0 14px; color: #222; }
.pc-features { padding-left: 18px; margin: 0 0 14px; font-size: 13px; line-height: 1.7; }
.pc-section { margin: 14px 0; }
.pc-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 8px; color: var(--muted); font-weight: 500;
  border-bottom: 1px solid var(--ink); padding-bottom: 4px;
}
.pc-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; }
.pc-bullets li {
  padding: 7px 10px; border-left: 2px solid var(--ink); background: var(--soft);
  font-family: var(--serif);
}
#pc-payment-text { font-family: var(--serif); font-size: 14px; margin: 0 0 8px; }
.pc-payment-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0;
  font-size: 12px; line-height: 1.5;
}
.pc-payment-grid dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.pc-payment-grid dd { margin: 0 0 4px; font-family: var(--mono); font-size: 12px; }
.pc-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px; margin-bottom: 12px;
}
.pc-gallery img, .pc-gallery video {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--ink);
  background: #000;
}
.pc-foot { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.pc-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Modal dialogs — slide-in right-side panel instead of a centred overlay.
   Reason: the centred modal covered the campaign plan / pipeline / chat
   that the user was meant to be reviewing, so the operator had to
   approve blind. A right-anchored panel leaves the dashboard's left
   readable so the user can cross-reference the agent's output against
   what the dialog is asking.

   The right-side panel ALONE wasn't enough — on the Campaigns view the
   chat sat in the right column of a 360px+1fr grid, so the modal still
   covered it. We add `body.modal-open` (toggled from app.js) and use it
   to push the main content area to the LEFT by `padding-right: 540px`,
   shrinking the 1fr column so the chat reflows into the visible area
   between the pipeline and the modal. */
body.modal-open .stage,
body.modal-open .campaign-stage,
body.modal-open .view {
  padding-right: 540px;
  transition: padding-right .22s ease;
}
/* On narrower laptops, also tighten the pipeline column so the chat
   keeps enough width to read once the modal is open. */
@media (max-width: 1280px) {
  body.modal-open .campaign-stage { grid-template-columns: 260px 1fr; }
}
@media (max-width: 1024px) {
  /* Below this width there isn't room for sidebar + pipeline + chat +
     modal at once. Fall back to overlay style: keep the modal but
     drop the content shift, letting the modal cover the right column
     and relying on the in-modal preview block instead. */
  body.modal-open .stage,
  body.modal-open .campaign-stage,
  body.modal-open .view { padding-right: 0; }
}
.modal-root {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.18);
  display: flex; align-items: stretch; justify-content: flex-end;
  pointer-events: none;   /* clicks pass through the dim layer; modal itself re-enables */
}
.modal-root.hidden { display: none; }
.modal {
  pointer-events: auto;
  width: min(520px, calc(100vw - 40px));
  max-height: 100vh;
  height: 100vh;
  background: var(--bg); border-left: 1px solid var(--ink);
  box-shadow: -8px 0 24px rgba(0,0,0,.10);
  padding: 22px 26px 18px;
  display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  animation: modal-in .22s ease;
}
@keyframes modal-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.modal-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.modal-step { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.modal-head h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0; }
.modal-question { margin: 0; font-size: 14px; color: #333; }
.modal-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--ink); padding-top: 14px; }

.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; padding: 10px 20px; cursor: pointer; border: 1px solid var(--ink);
}
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { background: var(--bg); color: var(--ink); }
.btn.ghost { background: var(--bg); color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* Form controls inside modal */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.field input[type="text"], .field input[type="number"], .field input[type="date"], .field textarea, .field select {
  border: 1px solid var(--ink); padding: 10px 12px; font-family: var(--sans); font-size: 14px;
  background: var(--bg); color: var(--ink); outline: none; width: 100%;
}
.field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.field .row { display: flex; gap: 10px; }
.field .row > * { flex: 1; }

.choice-list { display: flex; flex-direction: column; gap: 6px; }
.choice {
  border: 1px solid var(--ink); padding: 10px 12px;
  cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-size: 14px;
}
.choice .meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
/* Custom-audience picker — checkbox rows, opacity-gated by the mode
   choice above (enabled only when the user picks "specific"). */
.aud-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; border: 1px solid var(--ink); padding: 6px; transition: opacity .15s; }
.aud-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; transition: background .12s; }
.aud-row:hover { background: var(--soft); }
.aud-row.picked { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.aud-row input[type="checkbox"] { flex-shrink: 0; }
.aud-lbl { font-size: 12px; }
.choice.selected { background: var(--ink); color: var(--bg); }
.choice.selected .meta { color: #ddd; }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--ink); padding: 6px 10px; cursor: pointer; background: var(--bg);
}
.chip.selected { background: var(--ink); color: var(--bg); }
.chip .x { margin-left: 6px; opacity: .7; }

.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.media-tile {
  position: relative; cursor: pointer; border: 1px solid var(--ink);
  aspect-ratio: 1/1; background: #000; overflow: hidden;
}
.media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-tile .badge {
  position: absolute; top: 6px; left: 6px;
  background: var(--bg); color: var(--ink); font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid var(--ink);
  max-width: calc(100% - 12px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.media-tile .badge.composed { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gal-head {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding: 6px 0 2px; border-bottom: 1px solid var(--ink);
  margin-top: 2px;
}
.media-tile .pick {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border: 1px solid var(--ink);
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px;
}
.media-tile.selected .pick { background: var(--ink); color: var(--bg); }
.media-tile.primary::after {
  content: "PRIMARY"; position: absolute; bottom: 6px; left: 6px;
  background: var(--ink); color: var(--bg); padding: 2px 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
}

.review-table { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; font-size: 13px; line-height: 1.6; }
.review-table dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.review-table dd { margin: 0; }

/* User-uploaded creatives drop zone */
.upload-zone {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--ink); padding-top: 14px; margin-top: 4px;
}
.upload-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.upload-title { color: var(--muted); flex: 1; }
.upload-hint { color: var(--muted); opacity: .65; text-transform: none; letter-spacing: .04em; font-style: italic; }
.upload-count {
  border: 1px solid var(--ink); padding: 1px 7px; min-width: 22px; text-align: center;
  font-size: 10px; color: var(--ink); background: var(--bg);
}
.upload-count.has { background: var(--ink); color: var(--bg); }
.upload-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px; border: 1px dashed var(--ink); cursor: pointer;
  text-align: center; background: var(--bg);
  transition: background .12s, border-style .12s;
}
.upload-drop:hover, .upload-drop.dragover { background: var(--soft); border-style: solid; }
.upload-drop-label { font-family: var(--serif); font-size: 14px; }
.upload-drop-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.upload-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  max-height: 110px; overflow-y: auto;
}
.upload-list li {
  position: relative; aspect-ratio: 1/1; border: 1px solid var(--ink);
  background: #000; overflow: hidden;
}
.upload-list li img { width: 100%; height: 100%; object-fit: cover; }
.upload-list li .ratio {
  position: absolute; bottom: 2px; left: 2px;
  background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; padding: 1px 4px;
  border: 1px solid var(--ink);
}
.upload-list li .rm {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border: 1px solid var(--ink);
  background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 11px; line-height: 16px;
  cursor: pointer; padding: 0; text-align: center;
}
.upload-list li .rm:hover { background: var(--ink); color: var(--bg); }
.upload-list li.uploading::after {
  content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.5);
}

/* Live performance panel */
.perf-panel {
  border: 1px solid var(--ink); padding: 18px 22px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 50vh; overflow-y: auto;
}
.perf-panel[hidden] { display: none; }
.perf-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--ink); padding-bottom: 10px;
}
.perf-title { display: flex; flex-direction: column; gap: 2px; }
.perf-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.perf-title h3 {
  font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0;
}
.perf-controls { display: flex; gap: 6px; align-items: center; }
.perf-select {
  border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 8px; cursor: pointer;
}
.perf-refresh {
  border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  font-size: 14px; padding: 4px 10px; cursor: pointer; line-height: 1;
}
.perf-refresh:hover { background: var(--ink); color: var(--bg); }
.perf-refresh.spinning { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.perf-totals {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.perf-tot {
  border: 1px solid var(--ink); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.perf-tot dt {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.perf-tot dd {
  margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 500;
}

/* Today / Yesterday strips on the Overview. The 'today' strip sits at
   the top of the view with a coloured left border so it reads as the
   primary live signal; 'yesterday' is muted underneath as a comparison.
   Delta chips next to each Today KPI show the % vs yesterday with
   green/red tinting based on whether the change is good (lower CPL is
   good — everything else, higher is good). */
.ov-day-strip {
  border: 1px solid var(--ink); border-left: 4px solid var(--accent);
  padding: 12px 16px; margin-bottom: 12px; background: var(--bg);
}
.ov-day-strip.ov-day-strip-prev {
  border-left-color: color-mix(in srgb, var(--ink) 30%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, var(--bg));
}
.ov-day-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.ov-day-head h4 {
  font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0;
  display: flex; align-items: baseline; gap: 10px;
}
.ov-day-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.ov-day-kpis .perf-tot { position: relative; }
.ov-delta {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  margin-top: 4px; color: var(--muted);
}
.ov-delta.ov-delta-up   { color: var(--success); }
.ov-delta.ov-delta-down { color: var(--danger); }
.ov-range-head {
  margin: 18px 0 8px;
}
.ov-range-head h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}

.perf-spark {
  display: flex; gap: 2px; align-items: flex-end;
  height: 32px; border-bottom: 1px solid #eee; padding-bottom: 2px;
}
.perf-spark .bar {
  flex: 1; background: var(--ink); min-height: 1px; position: relative;
}
.perf-spark .bar:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 10px; padding: 3px 6px; white-space: nowrap;
  pointer-events: none; z-index: 2;
}

.perf-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.perf-camp {
  border: 1px solid var(--ink); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.perf-camp.paused { background: var(--soft); border-style: dashed; }
.perf-camp-row1 { display: flex; align-items: center; gap: 10px; }
.perf-camp-name {
  flex: 1; font-family: var(--serif); font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perf-camp-status {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 2px 6px;
}
.perf-camp-status.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.perf-camp-status.paused { color: var(--muted); }

.perf-camp-metrics {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  font-family: var(--mono); font-size: 11px;
}
.perf-camp-metrics .m {
  display: flex; flex-direction: column; gap: 1px;
}
.perf-camp-metrics .m .label {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.perf-camp-metrics .m .value {
  font-family: var(--serif); font-size: 13px;
}
.perf-camp-metrics .m.warn .value { background: var(--ink); color: var(--bg); padding: 0 4px; align-self: flex-start; }

.perf-camp-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.perf-action {
  border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px; cursor: pointer;
}
.perf-action:hover { background: var(--ink); color: var(--bg); }
.perf-action.scale-down:hover { background: var(--ink); color: var(--bg); }
.perf-action[disabled] { opacity: .35; cursor: not-allowed; }
.perf-action.danger { border-color: var(--danger); color: var(--danger); }
.perf-action.danger:hover { background: var(--danger); color: #fff; }
.perf-camp-meta { font-size: 11px; color: var(--muted); margin: 4px 0 6px; }
.perf-camp-meta strong { color: var(--ink); font-weight: 600; }
.perf-camp-metrics-2 .m .label { color: var(--muted); }
.perf-totals.dim-empty .perf-tot dd { color: var(--muted); opacity: .55; }
.perf-totals-secondary {
  grid-template-columns: repeat(6, 1fr);
  margin-top: 6px;
  opacity: .9;
}
.perf-totals-secondary .perf-tot {
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, var(--bg));
}
.perf-totals-secondary .perf-tot dd { font-size: 15px; }

.perf-breakdown { margin-top: 14px; }
.perf-breakdown-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.perf-bd-row { display: flex; flex-direction: column; gap: 4px; }
.perf-bd-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.perf-bd-bar { height: 4px; background: color-mix(in srgb, var(--ink) 6%, transparent); position: relative; }
.perf-bd-bar > span { display: block; height: 100%; background: var(--accent); }

/* Insights filter / sort row */
.perf-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 22px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  background: var(--soft);
}

.perf-filters .perf-search { min-width: 240px; flex: 1; }
.perf-filters #perf-stats { margin-left: auto; }

.perf-empty {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted);
  font-style: italic; margin: 0;
}

/* ============================================================
   APP SHELL: sidebar + main, multi-view router
   ============================================================ */
body.app { overflow: hidden; height: 100vh; display: grid; grid-template-columns: 240px 1fr; }
body.app .stage { display: none; }

.sidebar {
  background: var(--bg); color: var(--ink);
  border-right: 1px solid var(--ink);
  display: flex; flex-direction: column;
  padding: 22px 0;
  position: relative; z-index: 5;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px 18px; border-bottom: 1px solid var(--ink); }
/* Logo sizing — the SVG is 540×96 (5.6:1 aspect). A 240-px sidebar with
   18-px side padding leaves ~204 px of usable width; constraining by
   WIDTH keeps the brand readable at ~36 px tall regardless of the
   height value. Same rule used on the operator dashboard so both
   surfaces render identically. */
.sidebar-brand .brand-logo,
.auth-brand .brand-logo { display: block; width: 100%; max-width: 200px; height: auto; }

.sidebar-brand .brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--ink);
  font-family: var(--serif); font-size: 22px;
}
.sidebar-brand .brand-name { font-family: var(--serif); letter-spacing: .14em; font-size: 14px; }
/* Agency add-on chip — sits between the platform brand and the nav so it
   never replaces "PROJECT THE X" but does identify the agency the dashboard
   is white-labelled for. Hidden until the user uploads a logo / sets a name. */
.agency-chip {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 22px 0; padding: 8px 10px;
  border: 1px solid var(--ink); background: var(--bg);
  /* Now a <button> — strip the default UA chrome so it still reads as
     a card, and add hover affordance so users discover it's clickable. */
  font: inherit; color: inherit; cursor: pointer; text-align: left;
  width: calc(100% - 44px);
  transition: background .12s ease, transform .12s ease;
}
.agency-chip:hover  { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.agency-chip:active { transform: translateY(1px); }
.agency-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Honour [hidden] explicitly — without this rule, the display:flex above
   wins over the user-agent stylesheet's [hidden]{display:none}. */
.agency-chip[hidden] { display: none; }
.agency-chip img { width: 24px; height: 24px; object-fit: contain; }
.agency-chip .agency-name {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* min-height:0 is the key fix — without it a flex item refuses to
   shrink below its content height, so when every category is open the
   nav pushed .sidebar-foot off-screen. min-height:0 lets overflow:auto
   take over and the user-chip + sign-out stay pinned at the bottom. */
.sidebar-nav { display: flex; flex-direction: column; padding: 4px 0; flex: 1 1 0; min-height: 0; overflow-y: auto; margin-top: 4px; }
.sidebar-foot { flex-shrink: 0; }

/* Collapsible category groups using native <details>/<summary>. The
   default disclosure-triangle marker is hidden; our own caret is
   drawn via ::before so it matches the monospace design language. */
.nav-group { display: block; }
.nav-group + .nav-group { margin-top: 2px; }
.nav-group > .nav-group-head {
  list-style: none;
  cursor: pointer; user-select: none;
  padding: 10px 22px 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
  transition: color .12s;
}
.nav-group > .nav-group-head::-webkit-details-marker { display: none; }
.nav-group > .nav-group-head::marker { content: ''; }
.nav-group > .nav-group-head::before {
  content: '+';
  width: 10px; text-align: center;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  transition: transform .15s, color .15s;
}
.nav-group[open] > .nav-group-head::before { content: '\2212'; /* − */ color: var(--ink); }
.nav-group > .nav-group-head:hover { color: var(--ink); }
.nav-group > .nav-group-head:hover::before { color: var(--ink); }
/* Hide an entire group when every item inside has been role-hidden.
   views.js sets this attribute after applyRoleNav runs. */
.nav-group[data-empty="1"] { display: none; }

.nav-item {
  appearance: none; background: transparent; color: var(--ink);
  border: 0; border-left: 2px solid transparent;
  padding: 9px 22px 9px 36px; text-align: left; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  transition: background .12s, border-color .12s;
}
.nav-item .num { color: var(--muted); font-size: 10px; }
.nav-item:hover { background: var(--soft); }
.nav-item.active { background: var(--accent); color: #ffffff; border-left-color: var(--accent); }
.nav-item.active .num { color: #ffffff; opacity: .75; }
.nav-item.active .qa-badge { background: #ffffff; color: var(--accent); border-color: #ffffff; }

.sidebar-foot { padding: 14px 22px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 8px; }
.user-chip { display: flex; flex-direction: column; gap: 2px; }
.user-name { font-family: var(--serif); font-size: 14px; }
.user-role { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Storage pill in the sidebar foot. Compact two-line layout: a small
   monospace "Storage 142 / 500 MB" head + a thin bar underneath that
   fills based on % used. Bar tints orange at 80% and red at 95% so a
   member can spot a quota crunch at a glance. */
.sidebar-storage { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; cursor: default; }
.sidebar-storage-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sidebar-storage-label { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sidebar-storage-num { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.sidebar-storage-bar {
  height: 4px; width: 100%;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.sidebar-storage-bar > span {
  display: block; height: 100%; width: 0%;
  background: var(--ink);
  transition: width .3s, background .3s;
}
.sidebar-storage.warn  .sidebar-storage-bar > span { background: var(--accent); }
.sidebar-storage.warn  .sidebar-storage-num { color: var(--accent); }
.sidebar-storage.crit  .sidebar-storage-bar > span { background: var(--c-red, #b91c1c); }
.sidebar-storage.crit  .sidebar-storage-num { color: var(--c-red, #b91c1c); }
.logout-btn {
  border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 10px; cursor: pointer;
}
.logout-btn:hover { background: var(--ink); color: var(--bg); }

.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
.main .topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid var(--ink); flex: 0 0 auto;
}
.main .topbar .view-title { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0; letter-spacing: -.01em; }

.view {
  display: none; padding: 22px 28px; overflow-y: auto; flex: 1;
}
.view.active { display: block; }
.view.view-campaigns { padding: 0; display: none; }
.view.view-campaigns.active { display: flex; flex-direction: column; }

/* Campaign view: 2-col layout matching legacy */
.campaign-stage { flex: 1; display: grid; grid-template-columns: 360px 1fr; min-height: 0; overflow: hidden; }
.campaign-left { border-right: 1px solid var(--ink); padding: 22px 22px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.campaign-right { padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; }
.campaign-right .chat { flex: 1 1 auto; min-height: 200px; }

/* Pipeline — horizontal stage flow */
.section-h { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.pipeline { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--ink); padding-top: 12px; }
.pipeline-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.pipeline-list li {
  display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 6px 8px; color: var(--muted);
  position: relative;
  border-left: 2px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.pipeline-list li:not(:last-child)::after {
  content: ''; position: absolute; left: 19px; top: 36px; bottom: -4px; width: 2px;
  background: #ddd; z-index: 0;
}
.pipeline-list li.done:not(:last-child)::after { background: var(--ink); }
.pipeline-list .pip-marker {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); position: relative; z-index: 1;
  grid-row: 1 / span 2;
}
.pipeline-list .pip-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  grid-column: 2; grid-row: 1; align-self: end;
}
.pipeline-list .pip-detail {
  grid-column: 2; grid-row: 2;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  text-transform: none; letter-spacing: .02em; line-height: 1.4;
}
.pipeline-list .pip-detail:empty { display: none; }
.pipeline-list li.active { color: var(--ink); background: var(--soft); border-left-color: var(--ink); }
.pipeline-list li.active .pip-marker { background: var(--ink); color: var(--bg); border-color: var(--ink); animation: pulse 1.4s infinite; }
.pipeline-list li.done { color: var(--ink); }
.pipeline-list li.done .pip-marker { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pipeline-list li.failed { color: var(--ink); }
.pipeline-list li.failed .pip-marker { background: var(--bg); border-color: var(--ink); color: var(--ink); }
.pipeline-list li.failed .pip-marker::after { content: '✕'; position: absolute; font-size: 12px; }

/* AUTH PAGE */
body.auth-page { overflow: auto; height: 100vh; display: flex; align-items: center; justify-content: center; background: #fff; }
.auth-stage { padding: 24px; width: 100%; display: flex; align-items: center; justify-content: center; }
.auth-card { width: min(440px, 100%); border: 1px solid var(--ink); padding: 32px 36px; box-shadow: 6px 6px 0 var(--ink); background: var(--bg); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-brand .brand-mark { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); font-family: var(--serif); font-size: 18px; }
.auth-brand .brand-name { font-family: var(--serif); letter-spacing: .14em; font-size: 14px; }
.auth-title { font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 0 0 6px; }
.auth-sub { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .hint { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--muted); margin-top: 4px; display: block; }
.auth-error { border: 1px solid #000; background: #000; color: #fff; padding: 10px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
/* Agency profile view styles */
.ap-header { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.ap-header-text { flex: 1; }
.ap-name { font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 0 0 6px; letter-spacing: -.01em; }
.ap-about { margin: 10px 0 0; line-height: 1.6; max-width: 70ch; }
.ap-members { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px 14px; }
.ap-member { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.ap-member-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
}
.ap-member-body { display: flex; flex-direction: column; gap: 2px; }
.ap-member-body strong { font-family: var(--sans); font-size: 13px; font-weight: 500; }

.agency-features-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 4px; }
.agency-feature { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.agency-feature input[type="checkbox"]:disabled + span { color: var(--muted); }
.lbl-faint { color: var(--muted); font-weight: 400; font-size: 11px; }
fieldset.field { border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); padding: 12px 14px; }
fieldset.field legend { padding: 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.auth-submit { margin-top: 6px; }
.auth-toggle { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee; font-size: 13px; color: var(--muted); display: flex; gap: 6px; }
.auth-toggle a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Grouped signup sections — visually separates identity from role and role
   from agency setup so the form reads as a 3-step progression instead of a
   wall of inputs. Mirrors the dashboard's settings-card divider treatment. */
.auth-section {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-section[hidden] { display: none; }
.auth-section-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}


/* GENERIC VIEW STYLES */
.view-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.btn.small { padding: 6px 12px; font-size: 11px; }
.empty { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); font-style: italic; }
.dim { color: var(--muted); }
.dim.small { font-size: 11px; }
.error { color: #000; background: #f9f4f4; border-left: 3px solid #000; padding: 10px; font-size: 13px; }

/* Card grid for clients / KB / reports / plans */
.grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { border: 1px solid var(--ink); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); transition: box-shadow .15s; }
.card:hover { box-shadow: 4px 4px 0 var(--ink); }
.card-head { display: flex; align-items: center; gap: 8px; }
.card-head h4 { font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0; flex: 1; letter-spacing: -.01em; }
.card-head .dot { width: 12px; height: 12px; border: 1px solid var(--ink); border-radius: 0; flex: 0 0 auto; }
.card-head .tag { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--muted); padding: 2px 6px; }
.card-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.card-meta div { display: flex; flex-direction: column; gap: 2px; }
.card-meta dt { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card-meta dd { margin: 0; font-family: var(--serif); font-size: 14px; }
.card-notes { font-size: 12px; line-height: 1.5; color: #444; margin: 0; }
.card-actions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.card-actions .btn { white-space: nowrap; }
.card { overflow: hidden; }

/* Branches block on each client card */
.branches-block { border-top: 1px solid #eee; padding-top: 8px; margin-top: 4px; }
.branches-block summary { cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
.branch-list { list-style: none; padding: 6px 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.branch-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--ink); background: var(--bg); font-size: 12px; flex-wrap: wrap; }
.branch-item .del-branch { margin-left: auto; padding: 2px 6px; font-size: 10px; }
.add-branch { margin-top: 4px; }

.kb-list { list-style: none; padding: 8px 0 0 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.45; }
.kb-list li { padding: 4px 0; border-bottom: 1px solid #eee; }
.kb-pre { font-family: var(--mono); font-size: 10px; line-height: 1.5; max-height: 180px; overflow: auto; padding: 8px; background: #f7f7f7; }
.kb-card details summary { cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 6px 0; border-top: 1px solid #eee; }

/* Lead feedback — full redesign (per-provider tabs, sheet picker, analytics board) */
.lf-connect { padding: 22px; border: 1px dashed var(--ink); background: var(--bg); }
.lf-providers { display: flex; gap: 8px; margin: 12px 0; }

/* Provider tab strip — Google / Zoho side by side, like Stripe's account switcher. */
.lf-tabs { display: flex; gap: 4px; align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); margin-bottom: 14px; }
.lf-tab {
  appearance: none; background: transparent; border: 0;
  padding: 10px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .12s, border-color .12s;
}
.lf-tab:hover:not(:disabled) { color: var(--ink); }
.lf-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.lf-tab:disabled { opacity: .5; cursor: not-allowed; }
.lf-tab-sep { flex: 1; }
.lf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.lf-dot.ok  { background: var(--c-green, #15803d); }
.lf-dot.off { background: color-mix(in srgb, var(--ink) 30%, transparent); }

/* Google sheet picker. Search input + dropdown + tab/range selectors. */
.lf-sheet-picker { border: 1px solid var(--ink); padding: 14px 16px; margin: 6px 0 18px; }
.lf-sheet-search { position: relative; display: flex; gap: 8px; align-items: center; }
.lf-sheet-search input { flex: 1; padding: 10px 12px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
.lf-sheet-list {
  position: absolute; left: 0; right: 40px; top: 44px; z-index: 20;
  list-style: none; padding: 4px; margin: 0;
  background: var(--bg); border: 1px solid var(--ink);
  max-height: 360px; overflow-y: auto;
  box-shadow: 4px 4px 0 var(--ink);
}
.lf-sheet-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.lf-sheet-item:last-child { border-bottom: 0; }
.lf-sheet-item:hover { background: var(--soft); }
.lf-sheet-item.active { background: var(--ink); color: var(--bg); }
.lf-sheet-name { font-size: 13px; font-weight: 500; }
.lf-sheet-sub  { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--muted); margin-top: 2px; }
.lf-sheet-item.active .lf-sheet-sub { color: rgba(255,255,255,.7); }
.lf-sheet-meta { display: flex; gap: 12px; align-items: end; margin-top: 12px; flex-wrap: wrap; }
.lf-inline-field { display: flex; flex-direction: column; gap: 4px; }
.lf-inline-field .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lf-inline-field select, .lf-inline-field input { padding: 8px 10px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; min-width: 200px; }
#lf-sheet-hint { margin: 8px 0 0; }

/* Analytics board */
.lf-board { display: flex; flex-direction: column; gap: 16px; }

/* KPI cards — colour-coded tones mirror the Zoho dashboard. */
.lf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.lf-kpi { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); display: flex; flex-direction: column; gap: 4px; background: var(--bg); }
.lf-kpi dt { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0; }
.lf-kpi dd { font-family: var(--serif); font-size: 34px; font-weight: 400; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.lf-kpi-ink    dd { color: var(--ink); }
.lf-kpi-green  dd { color: var(--c-green, #15803d); }
.lf-kpi-accent dd { color: var(--accent); }
.lf-kpi-blue   dd { color: #2563eb; }
.lf-kpi-red    dd { color: var(--c-red, #b91c1c); }

/* "Help us classify" banner when statuses don't match any built-in
   bucket. Sits above the KPI grid; clicking a chip drops the operator
   into Layout Settings → status keywords. */
.lf-bucket-hint { padding: 14px 16px; margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); display: flex; flex-direction: column; gap: 10px; }
.lf-bucket-hint-head strong { display: block; font-family: var(--serif); font-size: 14px; margin-bottom: 2px; }
.lf-bucket-hint-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-bucket-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); font-family: var(--mono); font-size: 11px; }
.lf-bucket-hint-foot { display: flex; }

.lf-card { padding: 18px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: var(--bg); }
.lf-section-h { margin: 0 0 14px; font-family: var(--serif); font-size: 18px; font-weight: 500; }

.lf-scroll { overflow-x: auto; }
.lf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lf-table thead th { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--ink); white-space: nowrap; background: var(--bg); position: sticky; top: 0; }
.lf-table tbody td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); vertical-align: middle; }
.lf-table tbody tr.lf-campaign-row { cursor: pointer; transition: background .12s; }
.lf-table tbody tr.lf-campaign-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lf-table tbody tr:hover { background: var(--soft); }
.lf-table.compact tbody td { padding: 6px 10px; font-size: 12px; }

/* Per-person stacked-bar chart */
.lf-bars { display: flex; flex-direction: column; gap: 6px; }
.lf-bar-row { display: grid; grid-template-columns: 110px 1fr 40px; gap: 12px; align-items: center; font-size: 12px; }
.lf-bar-day { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.lf-bar-track { background: color-mix(in srgb, var(--ink) 5%, transparent); height: 22px; position: relative; }
.lf-bar-fill { display: flex; height: 100%; }
.lf-bar-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--mono); font-size: 10px; min-width: 0; overflow: hidden; }
.lf-bar-total { font-family: var(--mono); font-size: 11px; text-align: right; }
.lf-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.lf-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.lf-legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* Sub-status two-up grid */
.lf-sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.lf-sub-col h5 { margin: 0 0 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lf-sub-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lf-sub-list li { display: grid; grid-template-columns: 1fr 36px 44px 110px; gap: 8px; align-items: center; font-size: 12px; }
.lf-sub-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-sub-count { font-family: var(--mono); text-align: right; }
.lf-sub-pct   { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; }
.lf-sub-bar   { background: color-mix(in srgb, var(--ink) 5%, transparent); height: 8px; position: relative; }
.lf-sub-bar span { display: block; height: 100%; background: var(--accent); }
/* Flat (global) sub-status list — adds a fifth column for the
   parent-status chips so the user sees which main statuses each
   sub-status came from without the repeat-per-parent layout. */
.lf-sub-list-flat li { grid-template-columns: 1fr 36px 44px 110px auto; }
.lf-sub-parents { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.lf-sub-parent-chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  padding: 2px 6px; border: 1px solid var(--ink); background: var(--soft);
  white-space: nowrap;
}
/* Colour-tint a parent-status chip according to its bucket — Won / Quality
   read as positive (green), Junk / Lost read as negative (red), neutral
   in-progress states stay grey. The chip toggles a `data-bucket` attribute
   set when it's rendered. */
.lf-sub-parent-chip[data-bucket="won"]      { background: color-mix(in srgb, var(--success) 14%, var(--bg)); border-color: var(--success); color: var(--success); }
.lf-sub-parent-chip[data-bucket="quality"]  { background: color-mix(in srgb, var(--accent)  14%, var(--bg)); border-color: var(--accent);  color: var(--accent); }
.lf-sub-parent-chip[data-bucket="junk"],
.lf-sub-parent-chip[data-bucket="lost"]     { background: color-mix(in srgb, var(--danger)  14%, var(--bg)); border-color: var(--danger);  color: var(--danger); }

/* Detailed lead list — row-by-row table with one row per lead. The
   status column gets the same bucket-tint used elsewhere on the board
   so a wall of leads is glanceable at the bucket level (green = won,
   red = junk/lost, orange = quality). Date / contact / source / campaign
   stay neutral so the eye doesn't fight for attention. */
.lf-leads-table th, .lf-leads-table td {
  padding: 8px 10px; vertical-align: top; font-size: 12.5px; line-height: 1.45;
}
.lf-leads-table thead th {
  position: sticky; top: 0; background: var(--bg); z-index: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.lf-leads-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 3%, var(--bg)); }
.lf-leads-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.lf-leads-table .lf-lead-date  { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.lf-leads-table .lf-lead-contact { font-family: var(--mono); font-size: 11px; }
.lf-leads-table .lf-lead-email,
.lf-leads-table .lf-lead-phone { color: var(--accent); text-decoration: none; }
.lf-leads-table .lf-lead-email:hover,
.lf-leads-table .lf-lead-phone:hover { text-decoration: underline; text-underline-offset: 3px; }
.lf-leads-table .lf-status-cell {
  display: inline-block; padding: 2px 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--bg);
}
.lf-leads-table .lf-status-cell[data-bucket="won"]      { background: color-mix(in srgb, var(--success) 12%, var(--bg)); border-color: var(--success); color: var(--success); }
.lf-leads-table .lf-status-cell[data-bucket="quality"]  { background: color-mix(in srgb, var(--accent)  12%, var(--bg)); border-color: var(--accent);  color: var(--accent); }
.lf-leads-table .lf-status-cell[data-bucket="junk"],
.lf-leads-table .lf-status-cell[data-bucket="lost"]     { background: color-mix(in srgb, var(--danger)  12%, var(--bg)); border-color: var(--danger);  color: var(--danger); }

/* Free-text search input in the filter bar. Sized to fit ~24 chars so it
   doesn't dominate the bar but the placeholder ("name, email, phone…") is
   still legible. */
.lf-flt-search input { min-width: 220px; padding: 6px 8px; }

/* Sheets per-tab + dedup summary banner. Surfaces the gap between
   raw rows and final leads so a 4000-row sheet collapsing to 104 leads
   is visibly explained instead of looking like silent data loss. */
.lf-tabs-banner {
  padding: 10px 14px; margin: 8px 0;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, var(--bg));
  font-size: 12px; line-height: 1.5;
}
.lf-tabs-banner-warn {
  border-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--bg));
}
.lf-tabs-banner-line { margin-bottom: 6px; }
.lf-tabs-banner-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-tab-pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--bg);
}
.lf-tab-pill-bad {
  border-color: var(--danger); color: var(--danger);
}
.lf-tabs-banner-fail {
  margin-top: 8px; padding: 6px 10px;
  background: color-mix(in srgb, var(--warning) 14%, var(--bg));
  border-left: 3px solid var(--warning);
  font-size: 12px;
}

/* 'Showing cached snapshot' line gets an amber tint when the snapshot
   is older than 5 minutes — a real visible 'stale' indicator. */
.lf-cache-banner-stale {
  background: color-mix(in srgb, var(--warning) 12%, var(--bg));
  border-left: 3px solid var(--warning);
  padding: 8px 12px; margin: 8px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
}

/* Global filter bar at the top of the Lead Feedback board. Range select
   + multi-select dropdowns for owner / campaign / status + reset. Every
   block below re-aggregates against the active filter set client-side. */
.lf-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 14px; border: 1px solid var(--ink); background: var(--bg);
  margin-bottom: 14px;
}
.lf-truncated-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--ink); border-left: 4px solid var(--accent);
  background: var(--accent-soft); margin-bottom: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.lf-load-controls { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lf-load-controls .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lf-load-controls input {
  font: inherit; font-size: 12px; padding: 4px 8px; width: 110px;
  border: 1px solid var(--ink); background: var(--bg);
}
/* Google Sheets column-mapping panel — collapsed by default, click to
   open. Lets the user override the auto-detected role-to-header
   mapping when the heuristic picks wrong (e.g. mapped phone → status). */
.lf-mapping-panel {
  border: 1px solid var(--ink); padding: 10px 14px; margin-bottom: 10px;
  background: var(--soft); font-size: 13px;
}
.lf-mapping-panel > summary {
  cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 0;
}
.lf-mapping-panel > summary:hover { color: var(--accent); }
.lf-mapping-panel > p { margin: 6px 0 12px; }
.lf-map-row {
  display: grid; grid-template-columns: 180px 1fr 70px; gap: 10px;
  align-items: center; padding: 4px 0;
}
.lf-map-lbl { font-size: 12px; }
.lf-map-sel { font: inherit; padding: 5px 8px; border: 1px solid var(--ink); background: var(--bg); }
.lf-map-source { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: right; }
.lf-map-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ink); }
.lf-flt-inline { display: inline-flex; align-items: center; gap: 6px; }
.lf-flt-inline .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lf-flt-inline select {
  padding: 8px 10px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  font: inherit; font-size: 13px;
}
.lf-flt-dd { position: relative; }
.lf-flt-trigger {
  padding: 8px 12px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
}
.lf-flt-trigger:hover { background: var(--soft); }
.lf-flt-trigger.active { background: var(--ink); color: var(--bg); }
.lf-flt-pop {
  position: absolute; left: 0; top: 38px; z-index: 30;
  min-width: 220px; max-height: 320px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--ink);
  padding: 4px; box-shadow: 4px 4px 0 var(--ink);
}
/* Flexbox over grid here — the old grid template (`16px 1fr`) was
   collapsing into 0 + 1fr on some browsers, which let the checkbox
   render on top of the text. flex-shrink:0 on the checkbox and min-
   width:0 on the label keep them strictly side-by-side. */
.lf-flt-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; cursor: pointer; font-size: 13px;
}
.lf-flt-opt:hover { background: var(--soft); }
.lf-flt-opt > input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.lf-flt-opt > span { flex: 1 1 auto; min-width: 0; }
.lf-filter-count {
  margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

/* Sortable headers on the day-by-day + campaign tables. */
.lf-table th[data-sort] { cursor: pointer; user-select: none; }
.lf-table th[data-sort]:hover { color: var(--ink); }
.lf-table th.sorted { color: var(--accent); }

/* Board toolbar — Layout settings entry point. */
.lf-board-toolbar { display: flex; align-items: center; gap: 12px; padding: 6px 0; margin-bottom: 4px; }

/* "Pick from saved creatives" button — slots under the upload drop-zone. */
.upload-pick-saved {
  appearance: none; background: var(--bg); color: var(--ink);
  border: 1px solid var(--ink); padding: 8px 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; margin-top: 8px; width: 100%;
  transition: background .12s, color .12s;
}
.upload-pick-saved:hover { background: var(--ink); color: var(--bg); }

/* Saved-creatives picker modal — tiles with thumbnails + check overlay. */
.saved-tile {
  position: relative; display: block; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  cursor: pointer; overflow: hidden; aspect-ratio: 1 / 1;
  transition: border-color .12s, transform .12s;
}
.saved-tile:hover { border-color: var(--ink); }
.saved-tile.picked { border-color: var(--accent); border-width: 2px; }
.saved-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saved-tile input[type="checkbox"] {
  position: absolute; top: 6px; left: 6px; width: 18px; height: 18px;
  margin: 0; z-index: 2; cursor: pointer;
}
.saved-tile-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 4px 6px; font-family: var(--mono); font-size: 9px;
  background: color-mix(in srgb, var(--ink) 78%, transparent); color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Friendly empty-state card (no sheet selected, 0 leads, etc.) */
.lf-empty-state {
  padding: 32px 24px; border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  text-align: center; color: var(--muted);
}
.lf-empty-state h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); margin: 0 0 8px; }
.lf-empty-state p { font-size: 13px; line-height: 1.55; max-width: 520px; margin: 0 auto; }

/* Layout customization modal. */
.lf-layout-overlay {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 30%, transparent);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.lf-layout-modal {
  background: var(--bg); color: var(--ink); border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink); width: min(880px, 96vw); max-height: 90vh;
  display: flex; flex-direction: column;
}
.lf-layout-modal header { display: flex; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--ink); }
.lf-layout-modal header h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; flex: 1; }
.lf-layout-close { appearance: none; background: transparent; border: 0; font-size: 18px; cursor: pointer; padding: 6px 10px; }
.lf-layout-body { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; }
.lf-layout-body h4 { font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0 0 10px; }
.lf-layout-modal footer { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--ink); }

.lf-layout-blocks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lf-layout-blocks li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.lf-layout-arrows { display: inline-flex; gap: 4px; margin-left: auto; }
.lf-layout-arrows button { appearance: none; background: var(--bg); border: 1px solid var(--ink); padding: 4px 10px; cursor: pointer; font-family: var(--mono); font-size: 12px; }
.lf-layout-arrows button:disabled { opacity: .3; cursor: not-allowed; }

.lf-layout-kpis { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.lf-layout-kpis li {
  display: grid; grid-template-columns: 20px 1fr 130px 110px 80px 32px;
  gap: 8px; align-items: center; padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.lf-layout-kpis input[type="text"], .lf-layout-kpis select {
  padding: 6px 8px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); font: inherit; font-size: 12px;
}
.lf-layout-kpis button[data-rm] {
  appearance: none; background: transparent; border: 1px solid var(--ink); cursor: pointer;
  padding: 4px 8px; font-family: var(--mono); font-size: 12px;
}

.lf-layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lf-layout-grid label { display: flex; flex-direction: column; gap: 4px; }
.lf-layout-grid .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lf-layout-grid input { padding: 8px 10px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; }

/* Team */
.team-grid { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
.section-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--ink); margin-bottom: 12px; }
.section-head h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 18px; }
.member-list, .task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.member-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; padding: 10px 12px; border: 1px solid var(--ink); align-items: center; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.member-info { display: flex; flex-direction: column; gap: 2px; }
.task-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; padding: 10px 12px; border: 1px solid var(--ink); align-items: start; }
.task-item.done { opacity: .55; text-decoration: line-through; }
.task-toggle { width: 28px; height: 28px; border: 1px solid var(--ink); background: var(--bg); cursor: pointer; font-size: 16px; }
.task-toggle:hover { background: var(--ink); color: var(--bg); }
.task-item.in_progress .task-toggle { background: var(--ink); color: var(--bg); }
.task-info { display: flex; flex-direction: column; gap: 2px; }
.task-notes { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* Read-only chat */
.readchat { display: flex; flex-direction: column; gap: 14px; height: calc(100vh - 110px); }
.readchat-stream { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 6px; }
.readchat-stream .msg { max-width: 80%; padding: 10px 14px; border: 1px solid var(--ink); font-size: 14px; line-height: 1.55; }
.readchat-stream .msg.user { align-self: flex-end; background: var(--ink); color: var(--bg); }
.readchat-stream .msg.agent { align-self: flex-start; }
.readchat-stream .msg.error { background: #000; color: #fff; }
.readchat-stream .msg .role { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-bottom: 4px; }
.suggested-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.suggested-actions .chip { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; padding: 4px 8px; }
.readchat-form { display: grid; grid-template-columns: 220px 1fr auto; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ink); }
.readchat-form input { border: 1px solid var(--ink); padding: 10px 14px; font-family: var(--sans); font-size: 14px; }

/* Settings */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 22px; }
.settings-card { border: 1px solid var(--ink); padding: 22px 24px; background: var(--bg); }
.settings-card h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; margin: 0 0 12px; }
.settings-form { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.settings-form.inline { padding: 0; flex-direction: row; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 14px; }
.settings-form.inline .field { flex: 1; min-width: 160px; }
.settings-card details summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 0; border-bottom: 1px solid #eee; }
/* Settings-card-as-collapsible: applies when the WHOLE card is a <details>
   (e.g. AI Runner). Header row layout, no underline on the summary, h3 fits
   inline with a faint hint. */
details.settings-card { padding: 22px 24px; }
details.settings-card > .settings-card-summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 4px; border-bottom: 0; font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; }
details.settings-card > .settings-card-summary::-webkit-details-marker { display: none; }
details.settings-card > .settings-card-summary::after { content: '▾'; font-size: 14px; color: var(--muted); transition: transform 0.18s; }
details.settings-card[open] > .settings-card-summary::after { transform: rotate(180deg); }
details.settings-card[open] > .settings-card-summary { border-bottom: 1px solid #eee; margin-bottom: 12px; }
details.settings-card:not([open]) > :not(.settings-card-summary) { display: none; }

/* Danger zone — destructive-action card. Subtle warning trim so it doesn't
   shout, but reads as different from the normal settings cards. */
.danger-card { border-color: #b91c1c; }
.danger-card h3 { color: #b91c1c; }
.danger-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid #eee; }
.danger-row:first-of-type { border-top: 0; }
.danger-text { display: flex; flex-direction: column; gap: 2px; max-width: 420px; }
.danger-text strong { font-size: 14px; color: var(--ink); }
.btn.danger-action { color: #b91c1c; border-color: #b91c1c; }
.btn.danger-action:hover { background: #b91c1c; color: #fff; }
.invite-list { list-style: none; padding: 0; margin: 12px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.7; }
.invite-list code { background: #f4f4f4; padding: 1px 4px; }

/* Agent Activity — futuristic minimal network graph with curated colour cues */
.activity-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "head    head"
    "current feed"
    "canvas  feed"
    "legend  feed";
  gap: 0;
  height: calc(100vh - 130px);
  min-height: 640px;
  border: 1px solid var(--ink);
  background: var(--bg);
  overflow: hidden;
}
.activity-head {
  grid-area: head;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid var(--ink);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--accent) 4%, var(--bg)),
    var(--bg) 40%);
}
.activity-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
  color: #f97316; margin-bottom: 6px;
}
.activity-eyebrow::before {
  content: '';
  display: inline-block; width: 8px; height: 8px;
  background: var(--success); border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 30%, transparent);
  animation: pulse 1.6s infinite;
}
.activity-title h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0; letter-spacing: -.015em; line-height: 1.1; }
.activity-stats { display: flex; gap: 36px; align-items: flex-end; }
.activity-stats .stat { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 110px; }
.activity-stats .stat-num { font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.activity-stats .stat:nth-child(1) .stat-num { color: var(--accent); }   /* running — orange */
.activity-stats .stat:nth-child(2) .stat-num { color: var(--danger); }   /* queued  — red */
.activity-stats .stat:nth-child(3) .stat-num { color: var(--success); }  /* done    — green */
.activity-stats .stat-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.activity-canvas-wrap { grid-area: canvas; position: relative; overflow: hidden; }
.activity-canvas { display: block; width: 100%; height: 100%; }
.activity-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.activity-empty p { color: var(--muted); font-size: 13px; max-width: 320px; text-align: center; line-height: 1.55; margin: 0; }
.activity-feed { grid-area: feed; border-left: 1px solid var(--ink); overflow-y: auto; padding: 18px 18px 18px 18px; background: var(--soft); }
.activity-feed h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px dashed currentColor; }
.activity-feed ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.feed-item {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: baseline;
  font-size: 12px; line-height: 1.4; padding: 8px 10px;
  border-left: 2px solid var(--accent);
  background: var(--bg);
  transition: transform .18s ease, border-color .18s ease;
}
.feed-item:hover { transform: translateX(2px); }
.feed-item.feed-start { border-left-color: var(--accent); }
.feed-item.feed-done  { border-left-color: var(--success); opacity: .75; }
.feed-item.feed-tool  { border-left-color: var(--muted); }
.feed-dot { font-family: var(--mono); font-size: 12px; line-height: 1; color: inherit; }
.feed-item.feed-start .feed-dot { color: var(--accent); }
.feed-item.feed-done  .feed-dot { color: var(--success); }
.feed-text { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-time { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--muted); }

/* Ensure section title + eyebrow stay readable in both themes */
.activity-title h3 { color: var(--ink); }
.activity-eyebrow  { color: #f97316; }
.activity-feed h4  { color: var(--ink); opacity: .85; }
.feed-text         { color: var(--ink); }
.activity-empty p  { color: var(--ink); opacity: .75; }

/* Role picker on signup */
.role-field { border: 0; padding: 0; margin: 0; }
.role-field legend { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 0 0 6px; }
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-card { position: relative; cursor: pointer; }
.role-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.role-card-inner { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--ink); background: var(--bg); transition: background .15s ease, color .15s ease; }
.role-card-name { font-family: var(--serif); font-size: 16px; font-weight: 500; }
.role-card-desc { font-size: 11px; line-height: 1.4; color: var(--muted); }
.role-card input[type="radio"]:checked + .role-card-inner { background: var(--ink); color: var(--bg); }
.role-card input[type="radio"]:checked + .role-card-inner .role-card-desc { color: var(--bg); opacity: .85; }

/* Empty-state callout for sections that need setup before they show data */
.empty-rich { padding: 24px 22px; border: 1px dashed var(--ink); background: var(--soft); }
.empty-rich .empty-title { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0 0 10px; letter-spacing: -.01em; }


/* Login screen — fine-print row holding the privacy-policy link */
.auth-fineprint { margin: 22px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
.auth-fineprint a { color: var(--accent); text-decoration: none; }
.auth-fineprint a:hover { text-decoration: underline; }

/* Meta integration — connect/disconnect strip */
.meta-state { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--ink); background: var(--soft); }

#ig-meta-summary { margin: 0; font-size: 13px; }

/* Agency code box — admin Settings, permanent shareable code with copy + rotate */
.agency-code-box { padding: 14px; border: 1px solid var(--ink); background: var(--soft); margin-top: 8px; }

.agency-code-box .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.agency-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agency-code-value {
  font-family: var(--mono); font-size: 22px; letter-spacing: .25em; font-weight: 600;
  padding: 8px 14px; border: 2px solid var(--accent); color: var(--accent); background: var(--bg);
  user-select: all;
}
.lbl-faint { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ============================================================
   COLOURFUL · MODERN — gradient accents, depth, motion. Layered ON TOP
   of the existing monochrome base so it stays readable, just less austere.
   ============================================================ */

/* Sidebar — subtle warm gradient + accent rail behind active item */
.sidebar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 4%, var(--bg)) 0%,
    var(--bg) 50%,
    color-mix(in srgb, var(--success) 3%, var(--bg)) 100%);
}


/* Active nav item — lift with shadow + tighter pill */
.nav-item.active {
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 50%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--accent) 80%, transparent);
}

/* Section cards — subtle inset glow + soft shadow lifts */
.settings-card,
.qa-card,
.empty-rich {
  box-shadow: 0 1px 0 var(--ink), 0 8px 24px -16px rgba(0,0,0,0.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.settings-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 var(--ink), 0 10px 28px -14px rgba(0,0,0,0.16);
}


/* Topbar — accent-tinted gradient sweep */
.main .topbar {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--accent) 6%, var(--bg)),
    var(--bg) 30%,
    var(--bg) 70%,
    color-mix(in srgb, var(--success) 5%, var(--bg)));
}

/* Primary buttons get a vertical gradient + lift on hover */
.btn.solid {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 92%, white) 0%,
    var(--accent) 100%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, black) inset,
              0 4px 12px -4px color-mix(in srgb, var(--accent) 50%, transparent);
}
.btn.solid:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 88%, black));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, black) inset,
              0 6px 18px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Status pills — soft gradient backgrounds */
.qa-status.qa-approved {
  background: linear-gradient(135deg, var(--success), color-mix(in srgb, var(--success) 80%, black));
}
.qa-status.qa-rejected {
  background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 80%, black));
}
.qa-status.qa-pending {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg));
  border-color: var(--accent); color: var(--accent);
}

/* Insights stat numbers — subtle text-shadow + gradient text */
.activity-stats .stat-num,
.perf-tot dd {
  text-shadow: 0 2px 8px color-mix(in srgb, currentColor 18%, transparent);
}

/* Input focus — colourful glow ring */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: var(--accent);
}

/* Sparkline bars — vibrant fill */
.perf-spark .bar {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--bg)));
  border-radius: 1px 1px 0 0;
}

/* Role chips on signup — selected card shimmers */
.role-card input[type="radio"]:checked + .role-card-inner {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, black));
  border-color: var(--accent);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* Brand glyph in sidebar — subtle pulse so it feels alive */
.brand-mark, .brand-glyph {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, black));
  color: #fff;
  border-color: var(--accent);
}


/* Auth (login) page — soft radial bg so it doesn't feel like a flat sheet */
body.auth-page {
  background: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent) 10%, var(--bg)) 0%, var(--bg) 45%),
              radial-gradient(circle at 75% 80%, color-mix(in srgb, var(--success) 8%, var(--bg)) 0%, var(--bg) 45%),
              var(--bg);
}

/* Notifications panel — Settings → Notifications */
.notify-state { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--ink); background: var(--soft); }

.notify-state #notify-summary { margin: 0; font-size: 13px; line-height: 1.5; }
.notify-mute {
  border: 1px dashed var(--ink); padding: 12px 14px; margin-top: 12px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px;
}
.notify-mute legend { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 0 6px; }

/* In-dashboard toast notifications — rendered by public/notify.js.
   Stacked top-right; newest on top. Click to follow the toast's url. */
.dn-stack {
  position: fixed; top: 16px; right: 16px;
  z-index: 9000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.dn-toast {
  pointer-events: auto;
  background: var(--bg);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  animation: dn-toast-in 220ms cubic-bezier(.2,.7,.2,1);
  border-left-width: 6px;
}
.dn-toast.dn-tone-ok    { border-left-color: var(--success); }
.dn-toast.dn-tone-info  { border-left-color: var(--accent); }
.dn-toast.dn-tone-warn  { border-left-color: var(--warning); }
.dn-toast.dn-tone-error { border-left-color: var(--danger); }
.dn-toast.dn-toast-clickable { cursor: pointer; }
.dn-toast.dn-toast-clickable:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.dn-toast.dn-toast-leaving { animation: dn-toast-out 200ms forwards; }
.dn-toast-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dn-toast-title { font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--ink); }
.dn-toast-body  { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); word-wrap: break-word; }
.dn-toast-close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 14px; line-height: 1; padding: 2px 4px;
}
.dn-toast-close:hover { color: var(--ink); }
@keyframes dn-toast-in  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dn-toast-out { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(20px); } }

/* Removed-built-in alert rules — picker for re-adding deleted defaults */
.removed-rule-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.removed-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px dashed var(--ink); background: var(--soft); }
.removed-rule .rule-info { display: flex; flex-direction: column; gap: 2px; }


/* QA Review — section title in sidebar uses .nav-label so badge can flex */
.nav-label { display: inline-flex; align-items: center; gap: 8px; }
.qa-badge {
  padding: 1px 6px; border: 1px solid currentColor;
  font-size: 9px; letter-spacing: .12em; min-width: 18px; text-align: center;
  display: inline-block; line-height: 1.4;
}
/* Honour the [hidden] attribute. Without this rule, display:inline-block
   above wins over the user-agent's [hidden]{display:none} — the "0"
   badge stayed visible next to QUALITY ASSURANCE / HELP & SUPPORT even
   when JS set badge.hidden=true. */
.qa-badge[hidden],
.support-badge[hidden],
#admin-badge[hidden],
#badge-tickets[hidden],
#badge-quotes[hidden],
.nav-item .badge[hidden] { display: none !important; }

/* AI badge — surfaced on features that send work to the local AI Runner
   (the operator's claude-code subprocess). End users have asked for a
   clear, explicit marker so they can tell at a glance which buttons /
   sections require the Runner to be paired and online. */
.ai-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; margin-left: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0;  /* match the squared-off look of qa-badge */
}
.ai-tag::before { content: '✦'; font-size: 10px; line-height: 1; }
.ai-tag.tiny { padding: 0 4px; font-size: 8px; gap: 3px; margin-left: 5px; }
.nav-item.active .ai-tag {
  border-color: #fff; color: #fff;
  background: color-mix(in srgb, #fff 18%, transparent);
}
/* Inside section/view headings, keep the badge from inheriting heading font. */
h2 .ai-tag, h3 .ai-tag, h4 .ai-tag, .section-h .ai-tag, .view-title .ai-tag {
  vertical-align: middle; font-weight: 400;
}
.qa-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--ink); margin-bottom: 14px; background: var(--bg); }
.qa-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.qa-head h4 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0; letter-spacing: -.01em; }
.qa-status { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border: 1px solid currentColor; }
.qa-status.qa-pending { color: var(--ink); }
.qa-status.qa-approved { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.qa-status.qa-rejected { background: #b00020; color: #fff; border-color: #b00020; }

.qa-creatives { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.qa-creatives img, .qa-creatives video { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--ink); display: block; }
.qa-copy summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 0; color: var(--muted); border-top: 1px solid #eee; }
.qa-copy-item { padding: 8px 10px; border-left: 2px solid var(--ink); background: var(--soft); margin-bottom: 6px; font-size: 13px; line-height: 1.5; }
.qa-copy-item p { margin: 4px 0; }
.qa-feedback { padding-top: 8px; border-top: 1px solid var(--ink); }
.qa-feedback h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.qa-feedback-item { padding: 8px 10px; border: 1px solid var(--ink); background: var(--soft); margin-bottom: 6px; font-size: 13px; line-height: 1.5; }
.qa-feedback-item.approved { border-left: 3px solid #2a7a2a; }
.qa-feedback-item.rejected { border-left: 3px solid #b00020; }
.qa-feedback-item p { margin: 4px 0 0; }


/* Loading dots inside the working overlay */
.loading-dots { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: middle; }
.loading-dots > span { animation: dots-bounce 1.2s infinite; opacity: 0.4; font-size: 18px; line-height: 1; }
.loading-dots > span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots > span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dots-bounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* In-UI confirm / alert dialog — replaces browser confirm()/alert(). */
.confirm-modal { width: min(440px, calc(100vw - 40px)); }
#confirm-modal-body { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.btn.solid.danger { background: #b00020; border-color: #b00020; color: #fff; }
.btn.solid.danger:hover { background: var(--bg); color: #b00020; }


/* Form modal — overrides default styling for the add-anything modal */
#form-modal .modal-body { padding: 6px 0 0; gap: 12px; }
#form-modal input[type="color"] { padding: 4px; height: 40px; }

/* Settings: branding panel */
.brand-logo-row { display: flex; gap: 14px; align-items: center; margin: 6px 0 14px; }
.brand-logo-preview { width: 90px; height: 90px; border: 1px dashed var(--ink); display: flex; align-items: center; justify-content: center; }
.brand-logo-preview img { max-width: 90%; max-height: 90%; object-fit: contain; }
.brand-logo-row label.btn { cursor: pointer; }
.field .row, .settings-form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.env-group { border: 1px solid var(--ink); padding: 14px 16px; margin-bottom: 14px; }
.env-group legend { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 0 6px; color: var(--muted); }

/* Media plan wizard */
#form-modal .media-plan-form .modal-body, #form-modal-form.media-plan-form { padding: 0; max-height: 70vh; overflow-y: auto; }
#form-modal-form.media-plan-form { display: flex; flex-direction: column; gap: 12px; }
.line-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1fr 0.7fr 0.7fr 0.8fr 0.8fr 32px;
  gap: 6px; align-items: center;
}
.line-row input, .line-row select { border: 1px solid var(--ink); padding: 6px 8px; font-family: var(--sans); font-size: 12px; background: var(--bg); }
#form-modal.media-plan-form, #form-modal-form.media-plan-form { width: 100%; }
.modal:has(.media-plan-form) { width: min(1100px, calc(100vw - 40px)); max-width: 95vw; }

/* Team chat */
.team-chat { display: grid; grid-template-columns: 240px 1fr; gap: 0; height: calc(100vh - 130px); border: 1px solid var(--ink); }
.tc-sidebar { border-right: 1px solid var(--ink); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.tc-side-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.tc-side-head h3 { font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0; }
.tc-channel-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.tc-channel { padding: 8px 10px; border: 1px solid transparent; cursor: pointer; font-family: var(--mono); font-size: 12px; display: flex; justify-content: space-between; align-items: center; }
.tc-channel:hover { border-color: var(--ink); }
.tc-channel.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tc-lock { margin-right: 4px; font-size: 11px; opacity: .75; }
.tc-lock-open { opacity: 1; color: var(--success); }
.tc-main { display: flex; flex-direction: column; min-width: 0; }
.tc-head { padding: 14px 18px; border-bottom: 1px solid var(--ink); display: flex; gap: 12px; align-items: baseline; }
.tc-head h3 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0; }
.tc-stream { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.tc-msg { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-left: 2px solid var(--ink); background: var(--soft); }
.tc-msg-meta { display: flex; gap: 8px; align-items: baseline; }
.tc-msg-meta strong { font-family: var(--serif); font-size: 14px; }
.tc-msg-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.tc-form { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--ink); }
.tc-form input[type="text"] { border: 1px solid var(--ink); padding: 10px 14px; font-family: var(--sans); font-size: 14px; }
.tc-attach-btn { border: 1px solid var(--ink); padding: 8px 12px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.tc-attach-btn:hover { background: var(--ink); color: var(--bg); }
.tc-attachments { list-style: none; padding: 0 18px 6px; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.tc-pending-att { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--ink); background: var(--soft); font-size: 11px; }
.tc-pending-att img, .tc-pending-att video { width: 24px; height: 24px; object-fit: cover; border: 1px solid var(--ink); }
.tc-pending-att .ic { font-size: 16px; }
.tc-pending-att button { border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--muted); }
.tc-pending-att button:hover { color: var(--ink); }
.tc-stream.drop-target { background: var(--soft); border: 2px dashed var(--ink); }

.tc-msg-atts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tc-att { display: inline-flex; border: 1px solid var(--ink); text-decoration: none; color: var(--ink); }
.tc-att.img img, .tc-att.vid video { width: 200px; max-width: 100%; height: 140px; object-fit: cover; display: block; }
.tc-att.file { padding: 8px 12px; background: var(--bg); align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.tc-att.file .ic { font-size: 18px; }
.tc-att.file .sz { color: var(--muted); }

/* Overview / analytics dashboard */
.ov-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 18px; }
.ov-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ov-charts h4 { font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.ov-spark { height: 100px; }
.ov-bars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-bar-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ov-bar-name { font-family: var(--serif); }
.ov-bar-track { height: 6px; background: #eee; border: 1px solid var(--ink); margin-top: 2px; }
.ov-bar-track span { display: block; height: 100%; background: var(--ink); }

/* Interrupted-session resume banner */
.interrupted-banner {
  border: 2px solid var(--ink); background: var(--bg);
  padding: 14px 18px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.interrupted-banner .ib-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid var(--ink);
}
.interrupted-banner .ib-row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 6px 0;
}
.interrupted-banner .ib-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.interrupted-banner .ib-info strong { font-family: var(--serif); font-size: 14px; }
.interrupted-banner .ib-actions { display: flex; gap: 6px; }

/* Assets view — long-term per-project creative library */
.assets-group { margin-bottom: 22px; border: 1px solid var(--ink); padding: 16px 18px; }
.assets-group.collapsed { padding: 12px 18px; }
.assets-group-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); flex-wrap: wrap; }
.assets-group.collapsed .assets-group-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.assets-group-head h4 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0; letter-spacing: -.01em; flex: 1; }
.assets-group-head .ag-toggle {
  appearance: none; background: var(--bg); color: var(--ink); border: 1px solid var(--ink);
  width: 26px; height: 26px; cursor: pointer; font-family: var(--mono); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.assets-group-head .ag-toggle:hover { background: var(--ink); color: var(--bg); }
.assets-grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
/* Explicit override: display:grid above wins over the user-agent's
   [hidden]{display:none}, which is why the assets group's collapse
   was visually a no-op. */
.assets-grid-tiles[hidden] { display: none !important; }
/* Make the whole group header clickable, not just the tiny chevron —
   users naturally click the title row to collapse. */
.assets-group-head { cursor: pointer; }
.assets-group-head .ag-toggle { pointer-events: none; }
.asset-tile {
  margin: 0; padding: 0; display: flex; flex-direction: column;
  border: 1px solid var(--ink); background: #000;
  position: relative; overflow: hidden;
}
.asset-tile img, .asset-tile video {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
}
.asset-tile figcaption {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; background: var(--bg); color: var(--ink);
  font-size: 11px; line-height: 1.3;
}
.asset-tile .asset-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-tile .asset-actions {
  display: flex; gap: 4px; padding: 0 6px 6px; background: var(--bg);
}
.asset-tile .asset-actions .btn { flex: 1; text-align: center; padding: 4px 6px; font-size: 9px; }

/* Alert rules — built-in + custom */
.rule-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.rule-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 14px; align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--ink); background: var(--bg);
  font-size: 12px;
}
.rule-item.off { opacity: .55; }
.rule-toggle { display: flex; align-items: center; gap: 6px; }
.rule-toggle input { width: 16px; height: 16px; }
.rule-info { display: flex; flex-direction: column; gap: 2px; }
.rule-info strong { font-size: 13px; }
.rule-info .dim { font-size: 11px; }
.rule-fields { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rule-input { display: flex; flex-direction: column; gap: 2px; }
.rule-input .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rule-input input { border: 1px solid var(--ink); padding: 4px 8px; font-family: var(--mono); font-size: 12px; width: 90px; }
.rule-actions { display: flex; gap: 6px; }

/* Per-client integrations grid */
.integrations-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px; margin-bottom: 18px;
}

/* Integrations + Alerts views */
.alerts-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; }
.alerts-grid .settings-card hr { border: 0; border-top: 1px solid #eee; margin: 14px 0; }
.alerts-grid .settings-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.alerts-preview {
  background: var(--ink); color: var(--bg); padding: 16px 18px;
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  margin-top: 14px; border: 1px solid var(--ink); max-height: 50vh; overflow: auto;
}
.tg-chat { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--ink); margin-bottom: 6px; }
.tg-chat .dim { font-size: 10px; }
.lead-table-wrap { list-style: none; padding: 0; margin: 0; max-height: 240px; overflow-y: auto; }
.lead-table-wrap .empty { padding: 10px; }

/* Apply branding CSS variables to the dashboard root vars (used by the legacy var names too) */
:root {
  --primary: var(--ink);
  --accent: var(--ink);
}

.hidden { display: none !important; }

/* Scrollbar (minimal) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ink); }
::-webkit-scrollbar-track { background: transparent; }

/* Dashboard mobile warning banner — hidden on desktop */
.app-mobile-banner {
  display: none;
}
@media (max-width: 820px) {
  .app-mobile-banner {
    display: block;
    padding: 10px 16px;
    border-bottom: 4px solid var(--accent);
    background: var(--accent-soft);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: center;
  }
  .app-mobile-banner strong { font-weight: 700; }
}

/* Required-field invalid state */
input[required]:not(:focus):not(:placeholder-shown):invalid,
textarea[required]:not(:focus):not(:placeholder-shown):invalid {
  border-color: var(--danger);
}

/* ============================================================
   COLOUR ACCENTS — sparingly applied so they read as signal.
   ============================================================ */

/* Hover (non-active) lifts the label colour to the accent for affordance */
.nav-item:hover:not(.active) { color: var(--accent); }
.nav-item:hover:not(.active) .num { color: var(--accent); }

/* Selected text + caret use the accent */
::selection { background: var(--accent); color: var(--bg); }
::-moz-selection { background: var(--accent); color: var(--bg); }
input, textarea, select { caret-color: var(--accent); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Primary solid buttons take the accent */
.btn.solid {
  background: var(--accent); color: #fff; border-color: var(--accent);
  transition: background .12s ease, transform .12s ease;
}
.btn.solid:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, black); }
.btn.solid:active:not(:disabled) { transform: translateY(1px); }
.btn.solid:disabled { opacity: .55; cursor: not-allowed; }

/* Inline links pick up the accent (still understated) */
a { color: var(--accent); }
a:hover { text-decoration: underline; }

/* QA status pills get colour-coded by state */
.qa-status.qa-pending  { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
.qa-status.qa-approved { background: var(--success); color: #fff; border-color: var(--success); }
.qa-status.qa-rejected { background: var(--danger);  color: #fff; border-color: var(--danger); }


/* QA badge sits in the sidebar — make it amber so it pulls the eye */
.qa-badge { background: var(--warning); color: #fff; border-color: var(--warning); }

/* Status dot in the topbar — green when connected, red when offline */
.dot { background: var(--muted); }
.status.connected .dot, #status-dot.connected { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 30%, transparent); }
.status.offline   .dot, #status-dot.offline   { background: var(--danger);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }

/* Tags + chips lean into colour for category recognition */
.tag { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }


/* Severity colours for alert preview / log lines */
.error, .alerts-preview .err  { color: var(--danger); }
.success, .alerts-preview .ok { color: var(--success); }
.warning                      { color: var(--warning); }

/* Role chip — colour-code so admin/agency/individual reads at a glance */
.user-role { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; padding: 2px 6px; border: 1px solid currentColor; display: inline-block; border-radius: 3px; }
.user-role[data-role="admin"]      { color: var(--danger); }
.user-role[data-role="agency"]     { color: var(--accent); }
.user-role[data-role="individual"] { color: var(--success); }

/* ============================================================================
   MINIMAL · COLOURED — Linear / Stripe school. The base is editorial black
   on white; colour appears only where it CARRIES MEANING:
     orange = primary action / brand / focus
     blue   = links + neutral informational
     green  = healthy / success / running
     red    = error / paused / urgent
   Everything else is monochrome. No gradients, no glows, no decorative
   colour, no animations beyond the connection-status pulse.
   ============================================================================ */

:root {
  --c-orange: #f97316;
  --c-blue:   #2563eb;
  --c-green:  #16a34a;
  --c-red:    #dc2626;
  --tint-orange: color-mix(in srgb, var(--c-orange) 10%, var(--bg));
  --tint-blue:   color-mix(in srgb, var(--c-blue)   10%, var(--bg));
  --tint-green:  color-mix(in srgb, var(--c-green)  10%, var(--bg));
  --tint-red:    color-mix(in srgb, var(--c-red)    10%, var(--bg));

  /* Re-bind broader tokens used throughout the codebase */
  --accent:        var(--c-orange);
  --accent-soft:   var(--tint-orange);
  --success:       var(--c-green);
  --success-soft:  var(--tint-green);
  --warning:       var(--c-orange);
  --warning-soft:  var(--tint-orange);
  --danger:        var(--c-red);
  --danger-soft:   var(--tint-red);

  --r-2: 4px;
  --r-3: 6px;
}


/* ---- BACKGROUND: flat. No drift, no radial pattern, no gradient. ---- */
.main           { background: var(--bg); animation: none; }
body.auth-page  { background: var(--bg); }


/* ---- SIDEBAR: flat surface, single right border, plain numbers. ---- */
.sidebar {
  background: var(--bg);
  border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

/* Sidebar numbering removed — keep the .num markup but hide it so the
   nav reads as a clean list of section names only. */
.nav-item .num { display: none; }
.nav-item:hover:not(.active) { background: var(--tint-orange); color: var(--c-orange); }
.nav-item:hover:not(.active) .num { color: var(--c-orange); }
.nav-item.active {
  background: var(--c-orange);
  color: #fff;
  border-left-color: var(--c-orange);
  box-shadow: none;
}

.nav-item.active .num { color: #fff; opacity: .8; }
.nav-item.active .qa-badge { background: #fff; color: var(--c-orange); border-color: #fff; }

/* ---- LOGO: monochrome X. No gradient, no animation, no glow. ------- */
.brand-mark, .brand-glyph {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.brand-name { color: var(--ink); }
.auth-brand .brand-mark { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; }

/* ---- TOPBAR: flat, single border underneath. View title in ink. ---- */
.main .topbar {
  background: var(--bg);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.main .topbar .view-title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--ink);
}

/* ---- GEOMETRY: light radii, clean borders. ------------------------ */
.btn, .perf-action, .perf-select,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea, select,
.role-card-inner, .meta-state, .agency-code-box,
.notify-state, .notify-mute, .empty-rich,
.feed-item, .removed-rule, .agency-code-value {
  border-radius: var(--r-2);
}
.settings-card, .qa-card, .activity-wrap, .perf-panel, article.card,
.kb-card, .report-card, .plan-card {
  border-radius: var(--r-3);
}
.qa-status, .qa-badge, .tag {
  border-radius: 999px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .04em;
  padding: 2px 8px;
}

/* ---- CARDS: white surface, hairline border, NO shadow by default. -- */
.settings-card, .qa-card, .empty-rich,
.kb-card, .report-card, .plan-card,
article.card {
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: none;
}

.settings-card:hover, .qa-card:hover, article.card:hover,
.kb-card:hover, .report-card:hover, .plan-card:hover {
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}

/* ---- BUTTONS: orange primary, ghost is clean outline. -------------- */
.btn.solid {
  background: var(--c-orange);
  color: #fff;
  border: 1px solid var(--c-orange);
  box-shadow: none;
  font-weight: 600;
  transition: background .12s ease, border-color .12s ease;
}
.btn.solid:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-orange) 90%, black);
  border-color: color-mix(in srgb, var(--c-orange) 90%, black);
}
.btn.ghost {
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
  transition: border-color .12s ease, color .12s ease;
}
.btn.ghost:hover {
  border-color: var(--c-orange);
  color: var(--c-orange);
  background: var(--bg);
}

/* ---- INPUTS: clean orange focus ring. ---------------------------- */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-orange);
  box-shadow: 0 0 0 1px var(--c-orange);
}

/* ---- LINKS / SELECTION ------------------------------------------- */
a { color: var(--c-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--c-orange); color: #fff; }

/* ---- INSIGHTS metric tiles: minimal, square, clean ---------------- */
.perf-totals { gap: 8px; padding: 14px 22px; }
.perf-tot {
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-3);
  background: var(--bg);
  padding: 14px 18px;
  box-shadow: none;
}
.perf-tot dt {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.perf-tot dd {
  font-size: 26px; font-weight: 600; line-height: 1; margin: 6px 0 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}


/* ---- CAMPAIGN ROWS: status colour as a 2px left rail only --------- */
.perf-camp {
  border-radius: var(--r-3);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--bg);
  margin-bottom: 8px;
  padding: 14px 18px;
  position: relative;
  transition: border-color .12s ease;
}
.perf-camp::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--c-green);
  border-radius: var(--r-3) 0 0 var(--r-3);
}
.perf-camp.paused::before { background: var(--c-red); }
.perf-camp:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }


/* ---- TAGS / BADGES — soft tint pills, four-tone palette ---------- */
.tag                                     { background: var(--tint-orange); color: var(--c-orange); border: 1px solid color-mix(in srgb, var(--c-orange) 30%, transparent); }
.tag.success, .tag[data-tone="success"]  { background: var(--tint-green);  color: var(--c-green);  border-color: color-mix(in srgb, var(--c-green) 30%, transparent); }
.tag.info,    .tag[data-tone="info"]     { background: var(--tint-blue);   color: var(--c-blue);   border-color: color-mix(in srgb, var(--c-blue) 30%, transparent); }
.tag.danger,  .tag[data-tone="danger"]   { background: var(--tint-red);    color: var(--c-red);    border-color: color-mix(in srgb, var(--c-red) 30%, transparent); }

/* ---- QA STATUS pills - soft tints, not solid blocks --------------- */
.qa-status.qa-approved {
  background: var(--tint-green);
  color: var(--c-green);
  border-color: color-mix(in srgb, var(--c-green) 35%, transparent);
  animation: none;
}
.qa-status.qa-rejected {
  background: var(--tint-red);
  color: var(--c-red);
  border-color: color-mix(in srgb, var(--c-red) 35%, transparent);
}
.qa-status.qa-pending {
  background: var(--tint-orange);
  color: var(--c-orange);
  border-color: color-mix(in srgb, var(--c-orange) 35%, transparent);
}

/* ---- QA card — left rail, single colour by status --------------- */
.qa-card { position: relative; padding-left: 18px; }
.qa-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c-orange);
}
.qa-card:has(.qa-status.qa-approved)::before { background: var(--c-green); }
.qa-card:has(.qa-status.qa-rejected)::before { background: var(--c-red); }

/* ---- QA badge: orange pill in sidebar ---------------------------- */
.qa-badge {
  background: var(--c-orange); color: #fff;
  border: 0; padding: 1px 7px; min-width: 18px; text-align: center;
  font-size: 9px; font-weight: 600; letter-spacing: 0;
}

/* ---- STATUS DOT pulse (only animation in the entire UI) ---------- */
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--c-green) 50%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-green)  0%, transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--c-green)  0%, transparent); }
}
#status-dot.connected, .status.connected .dot {
  background: var(--c-green);
  animation: statusPulse 2.4s ease-out infinite;
}
#status-dot.offline, .status.offline .dot { background: var(--c-red); animation: none; }

/* ---- SPARKLINES: solid orange. ----------------------------------- */
.perf-spark .bar { background: var(--c-orange); border-radius: 1px 1px 0 0; opacity: .85; }
.perf-spark .bar:hover { opacity: 1; }

/* ---- ACTIVITY counters: orange / red / green only ---------------- */
.activity-stats .stat:nth-child(1) .stat-num { color: var(--c-orange); text-shadow: none; }
.activity-stats .stat:nth-child(2) .stat-num { color: var(--c-red);    text-shadow: none; }
.activity-stats .stat:nth-child(3) .stat-num { color: var(--c-green);  text-shadow: none; }

/* ---- EMPTY states: neutral with a 3px blue accent rail ----------- */
.empty-rich {
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  position: relative;
  padding-left: 22px;
}
.empty-rich::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c-blue);
}


/* ---- LOGIN card: minimal, hairline border, single drop -------- */
.auth-card {
  border-radius: var(--r-3);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--bg);
  box-shadow: 0 4px 24px -12px rgba(0,0,0,.10);
}
.auth-title { color: var(--ink); }
.auth-card::before { display: none; } /* drop the radial pattern overlay */

/* ---- SETTINGS cards: clean header with single accent dot --------- */
.settings-card { background: var(--bg); }

.settings-card h3 {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 500;
}
.settings-card h3::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--c-orange);
  box-shadow: none;
}

/* ---- INSIGHTS filter row stat chip ------------------------------ */
.perf-filters #perf-stats {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tint-blue);
  color: var(--c-blue);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  border: 1px solid color-mix(in srgb, var(--c-blue) 30%, transparent);
}

/* ---- AI Runner setup wizard ------------------------------------- */
.setup-wizard { margin-top: 18px; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent); }
.setup-wizard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.setup-wizard-head h4 { font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0; }

.setup-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.setup-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-3);
  background: var(--bg);
  transition: border-color .15s ease, opacity .15s ease;
}
.setup-step.done {
  opacity: .55;
  border-color: color-mix(in srgb, var(--c-green) 30%, transparent);
}
.setup-step.active {
  border-color: var(--c-orange);
  box-shadow: 0 0 0 1px var(--c-orange);
}


.setup-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--muted);
}
.setup-step.active .setup-num { background: var(--c-orange); color: #fff; }
.setup-step.done .setup-num   { background: var(--c-green);  color: #fff; }
.setup-step.done .setup-num::before { content: '✓'; }
.setup-step.done .setup-num     { font-size: 0; }
.setup-step.done .setup-num::before { font-size: 14px; }

.setup-body h5 { font-family: var(--serif); font-weight: 500; font-size: 15px; margin: 0 0 6px; }
.setup-body p { margin: 4px 0 8px; }
.setup-body .btn.solid.small.setup-done { margin-top: 6px; }
.setup-step.done .setup-body .setup-done { display: none; }

.setup-cmd {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--r-2);
  background: var(--soft);
  margin: 8px 0;
  overflow: hidden;
}

.setup-cmd code {
  flex: 1;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink);
  background: transparent;
  user-select: all;
}
.setup-cmd .copy-cmd {
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 14px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.setup-cmd .copy-cmd:hover { background: var(--c-orange); color: #fff; }
.setup-cmd .copy-cmd.copied { background: var(--c-green); color: #fff; }

.setup-os-tabs { display: flex; gap: 4px; margin: 10px 0 6px; flex-wrap: wrap; }
.setup-os-tabs button {
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--bg);
  color: var(--muted);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: var(--r-2);
  transition: all .12s;
}
.setup-os-tabs button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.setup-os-tabs button:hover:not(.active) { border-color: var(--c-orange); color: var(--c-orange); }

.setup-watcher {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 8px 0;
  padding: 6px 10px;
  font-family: var(--mono); font-size: 11px;
  border-radius: var(--r-2);
  background: var(--tint-orange);
  color: var(--c-orange);
  border: 1px solid color-mix(in srgb, var(--c-orange) 30%, transparent);
}
.setup-watcher .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: statusPulse 1.6s ease-out infinite; }
.setup-watcher.connected { background: var(--tint-green); color: var(--c-green); border-color: color-mix(in srgb, var(--c-green) 30%, transparent); }
.setup-watcher.connected .dot { animation: none; }

/* Per-OS uninstall block — collapsed by default, opens in place */
.setup-uninstall {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
}
.setup-uninstall summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-red);
  padding: 4px 0;
  list-style: none;
}
.setup-uninstall summary::-webkit-details-marker { display: none; }
.setup-uninstall summary::before {
  content: '› ';
  display: inline-block;
  transition: transform .15s ease;
  margin-right: 6px;
  color: var(--c-red);
}
.setup-uninstall[open] summary::before { transform: rotate(90deg); }
.setup-uninstall summary:hover { color: color-mix(in srgb, var(--c-red) 80%, black); }
.setup-uninstall p { margin: 6px 0; }
.setup-uninstall code { color: var(--c-red); }

/* ---- AI Runner pill in topbar ----------------------------------- */
.ai-runner-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 12px; padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  background: var(--tint-red); color: var(--c-red);
  border: 1px solid color-mix(in srgb, var(--c-red) 30%, transparent);
}
.ai-runner-pill.connected {
  background: var(--tint-green); color: var(--c-green);
  border-color: color-mix(in srgb, var(--c-green) 30%, transparent);
}
.ai-runner-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.ai-runner-pill.connected .ai-runner-dot { animation: statusPulse 2.4s ease-out infinite; }

/* ---- ROLE CHIP: monochrome border, coloured text only ----------- */
.user-role[data-role="admin"]      { color: var(--c-red); }
.user-role[data-role="agency"]     { color: var(--c-orange); }
.user-role[data-role="individual"] { color: var(--c-green); }

/* ---- SCROLLBAR: thin, neutral. ------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 38%, transparent); }

/* ---- KILL the colourful holdovers that don't fit minimal -------- */
.brand-mark, .brand-glyph { background: transparent !important; }
.kb-card::after, .report-card::after, .plan-card::after, article.card::after { display: none; }
.perf-tot { border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }


/* ---- Reset every per-view top accent rail. The colour belongs to
        a section's PRIMARY ACTION button, not a decorative stripe. */
.view[data-view] > *,
.view[data-view] .perf-panel,
.view[data-view] .grid-list,
.view[data-view] .alerts-grid,
.view[data-view] .lead-stage,
.view[data-view] .campaign-stage,
.view[data-view] #qa-list,
.view[data-view] #assets-grid {
  box-shadow: none;
}

/* ================================================================
   First-run onboarding overlay
   ----------------------------------------------------------------
   Full-screen block over the dashboard until a companion machine
   connects. Mirrors the Settings → AI Runner wizard but on top of
   everything else and with a single Finish CTA tied to connection.
   ================================================================ */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 32px 24px;
  display: flex; justify-content: center; align-items: flex-start;
}
.onboarding-overlay[hidden] { display: none; }
.onboarding-card {
  width: 100%; max-width: 760px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--r-4);
  padding: 28px 28px 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
}

.onboarding-head { margin-bottom: 18px; }
.onboarding-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-orange);
  margin: 0 0 6px;
}
.onboarding-head h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; }
.onboarding-steps { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.ob-step {
  display: flex; gap: 14px;
  padding: 14px 14px 12px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-3);
  transition: border-color .15s, background .15s;
}

.ob-step.done   { border-color: color-mix(in srgb, var(--c-green) 35%, transparent); }
.ob-step.active { border-color: var(--c-orange); }
.ob-num {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  background: var(--ink); color: var(--bg);
}
.ob-step.active .ob-num { background: var(--c-orange); color: #fff; }
.ob-step.done   .ob-num { background: var(--c-green);  color: #fff; font-size: 0; }
.ob-step.done   .ob-num::before { content: '✓'; font-size: 14px; }
.ob-body { flex: 1; min-width: 0; }
.ob-body h4 { margin: 2px 0 4px; font-size: 15px; }
.ob-body .setup-cmd { margin-top: 8px; }
.ob-step.done .ob-done { display: none; }
.ob-os-tabs { display: inline-flex; gap: 4px; margin: 6px 0 8px; }
.ob-os-tabs button {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-2);
  cursor: pointer; color: var(--ink-2);
}
.ob-os-tabs button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ob-watcher {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 6px 0 4px;
  padding: 6px 10px;
  font-family: var(--mono); font-size: 11px;
  border-radius: var(--r-2);
  background: var(--tint-orange);
  color: var(--c-orange);
  border: 1px solid color-mix(in srgb, var(--c-orange) 30%, transparent);
}
.ob-watcher .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: statusPulse 1.6s ease-out infinite; }
.ob-watcher.connected { background: var(--tint-green); color: var(--c-green); border-color: color-mix(in srgb, var(--c-green) 30%, transparent); }
.ob-watcher.connected .dot { animation: none; }
.onboarding-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.onboarding-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ================================================================
   Backup snapshots — user-friendly card list
   ================================================================ */
.backup-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.backup-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.backup-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--r-3);
  transition: border-color .15s ease, transform .15s ease;
}
.backup-card:hover { border-color: color-mix(in srgb, var(--ink) 24%, transparent); }

.backup-when { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.backup-when strong { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.backup-when .dim.small { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.backup-badge {
  align-self: flex-start;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted);
}
.backup-badge-latest { background: var(--c-green, #15803d); color: #fff; }
.backup-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.backup-actions .delete-backup {
  width: 28px; height: 28px; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.backup-actions .delete-backup:hover { color: var(--c-red, #b91c1c); border-color: currentColor; }
.backup-empty { padding: 18px 16px; border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent); border-radius: var(--r-3); text-align: center; font-size: 13px; line-height: 1.55; }


/* ================================================================
   Platform footer — sitewide Privacy + Terms + brand
   ================================================================ */
.platform-footer {
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
}
.platform-footer a { color: var(--muted); text-decoration: none; padding: 4px 6px; border-radius: 2px; transition: color .12s, background .12s; }
.platform-footer a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.platform-footer .pf-brand { display: inline-flex; align-items: center; gap: 8px; }
.platform-footer .pf-dot   { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.platform-footer .pf-links { display: inline-flex; gap: 10px; }


/* ================================================================
   Agent Activity — polished header + currently-working callout +
   feed-event tightening. Mirrors the dashboard's settings-card
   visual language so the activity view stops looking like a debug
   panel and starts reading as a status board.
   ================================================================ */
.activity-current {
  grid-area: current;
  padding: 14px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--bg);
  display: flex; align-items: center; gap: 14px;
  min-height: 56px;
}
.activity-current[hidden] { display: none; }
.activity-current .ac-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: pulse 1.6s infinite;
  flex-shrink: 0;
}
.activity-current .ac-text { font-size: 13px; line-height: 1.4; color: var(--ink); min-width: 0; }
.activity-current .ac-text strong { font-weight: 600; }
.activity-current .ac-text .dim { color: var(--muted); margin-left: 6px; font-family: var(--mono); font-size: 11px; }

.activity-legend {
  grid-area: legend;
  padding: 10px 24px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--bg);
  display: flex; flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.activity-legend .lg-item { display: inline-flex; align-items: center; gap: 6px; }
.activity-legend .lg-dot  { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ================================================================
   Support tickets + Admin dashboard
   ================================================================ */
.support-badge, #admin-badge {
  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: auto;
  font-family: var(--mono); font-size: 9px; font-weight: 700; line-height: 16px;
  text-align: center; border-radius: 8px;
  background: var(--accent); color: #fff;
}
.nav-item[hidden] { display: none !important; }

/* Support view layout — 2-column inbox + thread. */
.support-wrap { display: flex; flex-direction: column; min-height: 0; }
.support-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; min-height: 0; }
.support-list { list-style: none; padding: 0; margin: 0; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); max-height: calc(100vh - 240px); overflow-y: auto; }
.support-item { padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); cursor: pointer; transition: background .12s; }
.support-item:hover { background: var(--soft); }
.support-item.active { background: var(--ink); color: var(--bg); }
.support-item.active .si-meta .dim, .support-item.active .si-status { color: rgba(255,255,255,.7); }
.support-item.unread strong::after { content: '●'; color: var(--accent); margin-left: 6px; font-size: 10px; vertical-align: middle; }
.support-item .si-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; }
.support-item .si-head strong { font-size: 13px; line-height: 1.35; }
.support-item .si-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.support-item .si-meta { display: flex; gap: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.si-status { color: var(--accent); }
.si-status-resolved, .si-status-closed { color: var(--muted); }
.support-thread { padding: 22px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); max-height: calc(100vh - 240px); overflow-y: auto; }
.st-head { padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); margin-bottom: 18px; }
.st-head strong { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.st-head .dim { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.st-messages { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.st-msg { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: var(--r-3); }
.st-msg-operator { background: var(--soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.st-msg-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.st-msg-head strong { font-family: var(--sans); font-size: 12px; }
.st-msg-body { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.st-reply { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.st-reply textarea { width: 100%; resize: vertical; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); }
.st-reply button { align-self: flex-end; }

/* Admin dashboard. */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.admin-card { padding: 22px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.admin-card h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px dashed currentColor; }
.admin-card-wide { grid-column: 1 / -1; }
.admin-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.admin-stat { padding: 14px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); display: flex; flex-direction: column; gap: 4px; }
.admin-stat .num { font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-stat .lbl { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.admin-stat.warn .num { color: var(--c-red, #b91c1c); }
.admin-agency-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.admin-agency { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.admin-table td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); vertical-align: top; }
.admin-job-failed td { color: var(--c-red, #b91c1c); }
.admin-job-running td:nth-child(4) { color: var(--accent); }

/* Admin signup-code list. */
.admin-code-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.admin-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.admin-code .ac-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-code .ac-code { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; }
.admin-code .ac-meta { font-size: 12px; }
.admin-code .ac-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.admin-code .ac-revoke { width: 28px; height: 28px; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.admin-code .ac-revoke:hover { color: var(--c-red, #b91c1c); border-color: currentColor; }

/* ================================================================
   Setup-guide tutorial — in-dashboard step-by-step walkthrough
   Reuses the visual language of the AI Runner wizard (numbered
   steps, active/done states) but with a slimmer progress bar.
   ================================================================ */
.tutorial-wrap { max-width: 880px; }
.tutorial-progress {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 0 24px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--r-3);
  background: var(--soft);
}
.tutorial-progress .tp-bar {
  flex: 1; height: 6px; background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 3px; overflow: hidden;
}
.tutorial-progress .tp-fill { height: 100%; background: var(--c-green, #15803d); transition: width .25s ease; }
.tutorial-progress .tp-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.tutorial-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tut-step {
  display: flex; gap: 14px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-3);
  transition: border-color .15s, background .15s;
}
.tut-step.done   { border-color: color-mix(in srgb, var(--c-green) 35%, transparent); background: color-mix(in srgb, var(--c-green) 4%, transparent); }
.tut-step.active { border-color: var(--accent); }
.tut-num {
  flex: 0 0 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  background: var(--ink); color: var(--bg);
}
.tut-step.active .tut-num { background: var(--accent); color: #fff; }
.tut-step.done   .tut-num { background: var(--c-green, #15803d); color: #fff; font-size: 0; }
.tut-step.done   .tut-num::before { content: '✓'; font-size: 16px; }
.tut-body { flex: 1; min-width: 0; }
.tut-body h4 { margin: 4px 0 6px; font-size: 16px; font-family: var(--serif); font-weight: 500; }
.tut-body p { margin: 0 0 8px; }
.tut-body .tut-done { margin-top: 4px; }
.tut-step.done .tut-done { display: none; }
.tutorial-foot { margin-top: 24px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent); }