/* CreatorTrack — one stylesheet, no framework. Light + dark.
 *
 * THE STAFF APP IS PINNED DARK; NOTHING ELSE IS.
 *
 * This file is loaded by four documents, and only one of them is the console:
 * index.html (staff), creator.html (the creator's phone app), apply.html (the
 * PUBLIC application form, opened inside LINE) and privacy.html. So the pin
 * hangs off `data-app="staff"` on index.html's <html>, and every other page
 * keeps following the visitor's device — which is the right default for a
 * creator on their own phone and non-negotiable for a public form.
 *
 * Each `:root[data-app="staff"]` block sits directly under the media query it
 * overrides, so whoever edits one palette sees both variants together. The
 * attribute selector outranks a bare `:root` and media queries add no
 * specificity, so the staff values win whatever the OS says.
 */

:root {
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --border:    #e3e6ea;
  --text:      #14181f;
  --muted:     #6b7480;
  --accent:    #1f6feb;
  --accent-ink:#ffffff;
  --good:      #17803d;
  --warn:      #b25e00;
  --bad:       #c0342b;
  --radius:    10px;
  --shadow:    0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f1216; --surface:#171b21; --border:#272d36; --text:#e8ebef;
    --muted:#98a2b0; --accent:#4d8dfb; --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
/* The console, always. `color-scheme` is the part custom properties cannot do:
   it is what makes the browser's OWN widgets — checkboxes, selects, textareas,
   scrollbars — render dark. Without it a staffer on a light OS got white form
   controls punched into a dark page. */
:root[data-app="staff"] {
  color-scheme: dark;
  --bg:#0f1216; --surface:#171b21; --border:#272d36; --text:#e8ebef;
  --muted:#98a2b0; --accent:#4d8dfb; --shadow:0 1px 2px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 18px; margin: 0 0 2px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 20px 0 8px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono  { font-variant-numeric: tabular-nums; }
.strong{ font-weight: 600; }
.r     { text-align: right; }
.bad   { color: var(--bad); }

/* ── shell ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 0 20px; height: 56px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.brand { font-weight: 700; letter-spacing: -.02em; }
.brand span { color: var(--accent); }
.brand.big { font-size: 24px; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab {
  padding: 7px 12px; border-radius: 8px; text-decoration: none;
  color: var(--muted); font-weight: 500; border: 0; background: none;
  cursor: pointer; font-size: 14px;
}
.tab:hover { background: var(--bg); color: var(--text); }
.tab.on { background: var(--accent); color: var(--accent-ink); }
.subtabs { margin: 12px 0; }
/* The top bar's tab row scrolls sideways rather than widening the page: wider than
   the screen, it made a phone shrink every page to fit it. */
.topbar .tabs { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.topbar .tab { flex: none; white-space: nowrap; }
.me { display: flex; align-items: center; gap: 10px; font-size: 13px; }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }
.view-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; }
.view-head .sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.loading { padding: 40px; text-align: center; color: var(--muted); }

/* ── surfaces ──────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.empty { text-align: center; color: var(--muted); padding: 32px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters .inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

/* ── controls ──────────────────────────────────────────────────────────── */
.input {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; min-width: 0;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.narrow { width: 130px; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
label .input, label textarea.input, label select.input { width: 100%; margin-top: 3px; color: var(--text); font-size: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin: 0; }

.btn {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: none; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--bg); }
.btn.small { padding: 4px 9px; font-size: 13px; }
.btn.tiny  { padding: 1px 6px; font-size: 12px; }
.btn.block { width: 100%; padding: 10px; }
.btn:disabled { opacity: .5; cursor: default; }
.link-btn {
  background: none; border: 0; padding: 0; margin-right: 10px;
  color: var(--accent); cursor: pointer; font: inherit; font-size: 12px;
}

/* ── tables ────────────────────────────────────────────────────────────── */
.table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--border); font-weight: 600;
}
/* `.table th` (0,1,1) outranks a bare `.r` (0,1,0), so a right-aligned column's
   HEADER silently stayed left while its cells went right — every numeric table in
   the app was misaligned. Match the specificity so the header follows the data. */
.table th.r { text-align: right; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table.compact td { padding: 6px 8px; font-size: 13px; }
.row-link { cursor: pointer; }
.row-link:hover { background: var(--bg); }
.name { font-weight: 600; }

/* ── chips ─────────────────────────────────────────────────────────────── */
.chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  background: var(--bg); border: 1px solid var(--border); color: var(--muted);
  margin-right: 4px; white-space: nowrap;
}
.chip.role { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.st-active, .cs-live, .cc-active, .ci-posted, .po-paid { color: var(--good); border-color: currentColor; }
.st-blacklisted, .cc-declined, .ci-missed, .po-void   { color: var(--bad);  border-color: currentColor; }
.st-negotiating, .cs-recruiting, .cc-invited, .ci-submitted, .ci-revision_requested, .po-draft
  { color: var(--warn); border-color: currentColor; }
.tier-macro, .tier-mega { color: var(--accent); border-color: currentColor; }

.plat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 700;
  background: var(--bg); border: 1px solid var(--border); margin-right: 3px;
}
.p-tiktok    { background: #111; color: #fff; border-color: #111; }
.p-shopee    { background: #ee4d2d; color: #fff; border-color: #ee4d2d; }
.p-lazada    { background: #0f146d; color: #fff; border-color: #0f146d; }
.p-facebook  { background: #1877f2; color: #fff; border-color: #1877f2; }
.p-instagram { background: #d62976; color: #fff; border-color: #d62976; }

/* ── drawer + modal ────────────────────────────────────────────────────── */
.drawer-backdrop, .modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,14,20,.45); z-index: 50;
  display: flex; justify-content: flex-end;
}
.modal-backdrop { align-items: center; justify-content: center; padding: 20px; }
.drawer {
  width: min(560px, 100%); background: var(--surface); height: 100%;
  overflow-y: auto; box-shadow: var(--shadow);
}
.drawer header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--surface);
}
.drawer-body { padding: 0 16px 32px; }
.modal {
  background: var(--surface); border-radius: var(--radius); padding: 18px;
  width: min(480px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal.wide { width: min(720px, 100%); }
.modal h3 { margin-top: 0; }
.modal footer, .detail-head .actions { display: flex; gap: 8px; justify-content: flex-end; }
.modal footer { margin-top: 14px; }
.drawer-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.kv label { display: block; font-size: 11px; text-transform: uppercase; color: var(--muted); margin: 0; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.list li .muted { margin-left: 6px; }
/* User-authored text renders as the person wrote it. HTML collapses newlines, so
   every place that shows a note, a caption or a message someone typed had to opt
   in — and each one that forgot silently reflowed their line breaks into a
   paragraph. Apply .pre wherever a human's own words are shown. */
.pre { white-space: pre-wrap; }

.note { padding: 8px 0; border-bottom: 1px solid var(--border); white-space: pre-wrap; }
.note-add { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.note-add textarea { flex: 1; }
.rel { padding: 5px 0; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag-opt {
  display: flex; align-items: center; gap: 5px; padding: 3px 9px; margin: 0;
  border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text);
  cursor: pointer;
}
.pool { max-height: 320px; overflow-y: auto; margin: 8px 0; }
.pool-row { padding: 5px 2px; }

/* ── campaign detail ───────────────────────────────────────────────────── */
.detail { margin-top: 16px; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.brief { background: var(--bg); border-radius: 8px; padding: 10px; margin: 12px 0; white-space: pre-wrap; font-size: 13px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 8px; }
.board-col { background: var(--bg); border-radius: 8px; padding: 8px; min-height: 80px; }
.board-col header { font-size: 11px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.board-col .count { float: right; }
.board-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; margin-bottom: 6px;
}
.card-actions { margin-top: 6px; }

/* ── content: one campaign's work (campaign/work.js, content-items.js) ─── */
.late-txt { color: var(--bad); }
.ci-approved  { color: var(--accent); border-color: currentColor; }
.ci-in_review { color: var(--warn); border-color: currentColor; }
.ci-cancelled { text-decoration: line-through; }
/* Content tab: a post's chip is its stage (pipeline.js), coloured by whose move it is. */
.ci-stage-in_draft, .ci-stage-resubmitted { color: var(--warn); border-color: currentColor; }
.ci-stage-approved  { color: var(--accent); border-color: currentColor; }
.ci-stage-posted    { color: var(--good); border-color: currentColor; }
.ci-stage-missed    { color: var(--bad); border-color: currentColor; }
.ci-stage-cancelled { text-decoration: line-through; }

.ct-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* The creators split by roster status (work.js sectionHTML): the global h3 look —
   small, uppercase, muted — so a section heading never outranks a creator card. */
.ct-sec-h { margin: 4px 0 8px; }
.ct-sec + .ct-sec .ct-sec-h { margin-top: 18px; }
.ct-sec-n { margin-left: 4px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ct-group {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
}
/* The creator is the heading: who, and the one next step, over a single line of
   progress. The right column (button, ⋯, bar) lines up with the posts' under it. */
.ct-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who side" "prog bar";
  align-items: center; gap: 4px 12px; padding: 12px 12px 12px 16px; background: var(--bg);
}
.ct-who { grid-area: who; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ct-who .chip { margin-left: 8px; font-weight: 400; }
.ct-who .chandle { margin-left: 6px; font-weight: 400; }
.ct-hside { grid-area: side; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.ct-prog { grid-area: prog; margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.ct-prog > span:not(.ct-dot) { white-space: nowrap; }
.ct-dot { margin: 0 2px; }
.ct-prog .is-you { color: var(--accent); font-weight: 600; }
.ct-prog .late-txt { font-weight: 600; }
.ct-head .cbar { grid-area: bar; justify-self: end; margin-right: 6px; }
/* One post: what it is and when it is due, then one sentence saying what is
   happening, then — for a draft waiting on CREA — its caption. At most two
   buttons, in the right column under the ⋯; the rest are in the ⋯ menu. */
.ct-item {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-areas: "icon title side" ".    body acts";
  align-items: center; gap: 3px 10px; padding: 12px 12px 12px 16px; border-top: 1px solid var(--border);
}
.ct-item > .plat { grid-area: icon; margin: 0; }
.ct-title { grid-area: title; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.ct-title .chip { margin: 0; }
.ct-side { grid-area: side; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ct-when { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ct-when.late-txt { color: var(--bad); font-weight: 600; }
.ct-side .cl-kebab, .ct-hside .cl-kebab { min-width: 30px; min-height: 28px; }
.ct-side .cl-kebab:disabled, .ct-hside .cl-kebab:disabled { opacity: .4; cursor: default; }
.ct-body { grid-area: body; align-self: start; min-width: 0; }
.ct-acts { grid-area: acts; align-self: start; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ct-say { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: 13px; color: var(--muted); }
/* CREA's note, one line: the full text is the tooltip and in Show details. */
.ct-say.is-clip { flex-wrap: nowrap; }
.ct-say.is-clip .ct-say-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-say a, .ct-say .link-btn { flex: none; white-space: nowrap; }
.ct-say .link-btn { margin: 0; font-size: 13px; }
.ct-cap {
  margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--border); font-size: 13px;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ct-item.is-open .ct-cap { display: none; }     /* Show details has it in full */
/* Missed or cancelled: the name goes quiet by colour, not opacity — a faded card
   took its sentence, Show details and the ⋯ (which holds Reopen) below AA. */
.ct-item.is-off .ct-title strong { color: var(--muted); font-weight: 500; }
.ct-item.is-late { box-shadow: inset 3px 0 0 var(--bad); }
/* Where a deep link (a staff LINE notification, a pasted #/campaigns/<id>/content/<item>) landed. */
.ct-item.is-focus {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ct-caption {
  background: var(--bg); border-radius: 6px; padding: 6px 8px; font-size: 13px;
  margin-top: 6px; max-height: 120px; overflow: auto;
}
.ct-feedback {
  white-space: pre-wrap; font-size: 13px; margin-top: 6px;
  padding-left: 8px; border-left: 2px solid var(--warn);
}
.ct-feedback .k { color: var(--muted); font-size: 12px; }
.ct-hist { margin-top: 10px; }
.ct-versions { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.ct-close { display: grid; gap: 8px; margin: 10px 0; }
.ct-close-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: var(--text); }
.ct-close-row .input { width: 250px; flex: none; margin-top: 0; }

/* A draft, inside the app (campaign/draft-viewer.js): the draft large on the left,
   whose it is and the decision beside it — one window (owner, 8 Oct 2026). Its tabs
   and messages are the payee viewer's (.pv-tabs, .pv-msg). */
.modal.dv-panel { width: min(1240px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.dv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 22px; align-items: start; }
.dv-view { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dv-stage { display: flex; overflow: auto; height: min(76vh, 820px); background: #0b0e12;
  border: 1px solid var(--border); border-radius: 8px; }
.dv-media { margin: auto; max-width: 100%; max-height: 100%; display: block; }
img.dv-media { cursor: zoom-in; }
.dv-stage.full img.dv-media { max-width: none; max-height: none; cursor: zoom-out; }
.dv-frame { width: 100%; height: 100%; border: 0; background: #fff; }
/* A 9:16 player (TikTok, Shorts, Reels) as tall as the stage, not stretched across it. */
.dv-frame.tall { width: auto; aspect-ratio: 9 / 16; max-width: 100%; margin: 0 auto; background: #000; }
.dv-out p { margin: 0 0 12px; }
.dv-under { margin: 0; }
.dv-side { min-width: 0; display: grid; gap: 12px; align-content: start; }
.dv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dv-who { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.dv-x { background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; padding: 2px 4px; cursor: pointer; }
.dv-x:hover { color: var(--text); }
.dv-ver, .dv-meta, .dv-status, .dv-note { margin: 0; }
.dv-block { font-size: 13px; overflow-wrap: anywhere; padding-left: 10px; border-left: 2px solid var(--border); }
.dv-k { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.dv-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); }
.dv-acts:empty { display: none; }
.dv-acts .dv-note, .dv-acts p { flex-basis: 100%; }
.dv-acts p { margin: 0; }
.dv-reject { margin: 0 0 0 auto; color: var(--bad); font-size: 13px; }
.dv-row { display: flex; gap: 8px; justify-content: flex-end; flex-basis: 100%; }
@media (max-width: 960px) {
  .dv-split { grid-template-columns: minmax(0, 1fr); }
  .dv-stage { height: 62vh; }
}
/* A count inside a selected filter chip: muted grey on the accent fill was unreadable. */
.fchip .f-n { font-variant-numeric: tabular-nums; }
.fchip.on .f-n { color: inherit; opacity: .85; }

/* The Content tab's process strip (campaign/work.js): Required and Received, then
   each stage of what came in. Every box is a count AND the filter for the list. */
.pl { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin: 2px 0 6px; }
.pl-step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 96px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.pl-step:hover { border-color: var(--muted); }
.pl-step.on {
  border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.pl-n { font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pl-step.is-zero .pl-n { color: var(--muted); font-weight: 500; }
.pl-l { font-size: 12px; color: var(--muted); }
.pl-step.on .pl-l { color: var(--text); font-weight: 600; }
.pl-sub { font-size: 11px; color: var(--muted); }
.pl-sep { flex: none; width: 1px; margin: 6px 4px; background: var(--border); }
.pl-sum { margin: 0 0 10px; }
/* To review (on a campaign that can still review) and Late, when something is: the views that are a job. */
.fchip.is-hot:not(.on) { border-color: var(--warn); color: var(--warn); }
@media (max-width: 720px) {
  .pl-step { flex: 1 1 28%; min-width: 0; }
  .pl-sep { display: none; }
  .ct-item { grid-template-areas: "icon title side" ".    body body" ".    acts acts"; padding-left: 12px; }
  .ct-acts { justify-content: flex-start; margin-top: 8px; }
  .ct-say.is-clip { flex-wrap: wrap; }
  .ct-say.is-clip .ct-say-t { flex: 1 1 100%; white-space: normal; display: -webkit-box;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2; }       /* a phone gets two lines of it */
  .ct-head { grid-template-areas: "who side" "prog prog" "bar bar"; padding-left: 12px; }
  .ct-head .cbar { justify-self: start; margin: 2px 0 0; }
  .ct-close-row { flex-wrap: wrap; }
  .ct-close-row .input { width: 100%; }
}

/* ── login ─────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login { width: min(360px, 100%); }
.login .brand { margin-bottom: 2px; }
.login p { margin: 0 0 18px; }
.alert {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid var(--warn); color: var(--warn);
  border-radius: 8px; padding: 9px; font-size: 13px; margin-bottom: 14px;
}

/* ── toasts ────────────────────────────────────────────────────────────── */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: grid; gap: 8px; }
.toast {
  background: var(--text); color: var(--surface); padding: 10px 14px;
  border-radius: 8px; font-size: 13px; box-shadow: var(--shadow); max-width: 340px;
  transition: opacity .3s, transform .3s;
}
.toast.err { background: var(--bad); color: #fff; }
.toast.out { opacity: 0; transform: translateY(6px); }

@media (max-width: 900px) {
  .cols, .grid-2, .kv { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  main { padding: 14px; }
}

.row-off { opacity: .55; }
.row-off .name { text-decoration: line-through; }

/* ── campaign setup: five tabbed panes of policy fields ───────────────────── */
.modal .tabs { margin: 4px 0 14px; flex-wrap: wrap; }
.pane { display: grid; gap: 12px; }
/* display:grid overrides the UA's [hidden]{display:none}, so without this every
   tab renders at once. Attribute selector beats the bare class. */
.pane[hidden] { display: none; }
.pane h4 {
  margin: 6px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.hint { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.chk-row { display: flex; flex-wrap: wrap; gap: 14px; }
.chk {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--text); cursor: pointer;
}
.chk input { width: auto; margin: 0; }
.deliv-block {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: grid; gap: 10px;
}
.deliv-block h4 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }

/* ── the pool: counter strip + targets table ──────────────────────────────── */
.counter-strip {
  display: flex; flex-wrap: wrap; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin: 18px 0 10px;
}
.counter { background: var(--surface); padding: 12px 18px; flex: 1 1 0; min-width: 96px; }
.counter .n { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.counter .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

.pool-panel { border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; }
.pool-panel > p { margin: 0; padding: 16px; }
.pool-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pool-table th, .pool-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.pool-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; background: var(--bg);
}
.pool-table tr:last-child td { border-bottom: 0; }
.pool-table td.r, .pool-table th.r { text-align: right; white-space: nowrap; }
.pool-table .chip { margin-left: 6px; }

/* pool states — semantic, not decorative: excluded and lost must read as dead ends */
.chip.st-pool     { background: var(--bg);            color: var(--muted); }
.chip.st-applied  { background: rgba(56,132,255,.14); color: #4a90ff; }
.chip.st-offered  { background: rgba(255,176,32,.16); color: #d18b00; }
.chip.st-engaged  { background: rgba(46,180,110,.16); color: #2eb46e; }
.chip.st-lost     { background: var(--bg);            color: var(--muted); text-decoration: line-through; }
.chip.st-excluded { background: rgba(220,80,70,.14);  color: #dc5046; }
.chip.warn        { background: rgba(220,80,70,.14);  color: #dc5046; }

/* pool: picker + long exclusion reasons */
.picker-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.picker-head .input { flex: 1; }
.pool-row.is-in { opacity: .55; }
.pool-row.is-in input { cursor: not-allowed; }
/* An unbounded reason turned .pool-panel{overflow-x:auto} into a horizontal
   scroller and pushed every row's actions off-screen. */
.pool-table .reason {
  display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; margin-left: 6px;
  color: var(--muted); font-size: 12px;
}
.pool-table .added-by { font-size: 11px; color: var(--muted); opacity: .8; }
/* A link we are NOT confident about: it searches the platform rather than opening
   the creator's own page. Deliberately quieter than a profile link, because the
   whole point is that the reader can tell the two apart at a glance. */
.h-search {
  margin-left: 8px; font-size: 11px; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.h-search:hover { color: var(--accent); text-decoration: underline; }

/* Outbound arrow beside a creator's name. Quiet on purpose — the row already
   owns a checkbox and up to three action buttons, and this is a shortcut, not
   a fourth decision. */
.social-out { color: var(--muted); text-decoration: none; font-size: 12px; margin-left: 2px; }
.social-out:hover { color: var(--accent); }
.pool-filter { margin: 0 0 8px; max-width: 320px; }

/* The handle a creator is actually known by, beside the LINE display name that
   usually fills display_name. Quieter than the name — it is the second line of
   the identity, not a competing one — and never wrapped, because a handle broken
   across two lines stops being recognisable. */
.chandle { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-ligatures: none; }
/* The gap only applies where the handle sits INLINE after the name (the campaign
   tables). On the roster it starts its own line under the name, where a left
   margin would just indent it out of alignment with the name above. */
.pool-table .chandle { margin-left: 6px; }

/* full_name, shown ONLY when it is what the search matched. Callers supply their
   own '·' separator, because the roster already joins this line with one and two
   dots in a row reads as a typo. */
.cfull { font-size: 12px; color: var(--muted); opacity: .85; }

/* The searched-for substring, wherever it landed. This is the row's answer to
   "why am I looking at you" — it has to survive both themes and never repaint the
   text in a colour that reads as a state chip. */
mark {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: inherit; border-radius: 3px; padding: 0 1px;
}

/* "6 of 58" beside a filter box. The counter strip above a filtered list still
   reads the full total, so without this a narrow result looks like an empty pool. */
.shown-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.shown-count:empty { display: none; }


/* ── creator picker ───────────────────────────────────────────────────────────
   Filters are grouped and labelled rather than colour-coded: four colours for
   four filter types would be noisier than the ambiguity it solves. They collapse
   by default so results sit at the top of the modal, and whatever is active
   stays visible as a removable chip. */
.pk-bar { display: flex; gap: 8px; align-items: center; }
.pk-bar .input { flex: 1; }
.pk-badge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  margin-left: 6px; border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700;
}
#pk-toggle.on { color: var(--text); border-color: var(--accent); }

.pk-active { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.pk-active:empty { display: none; }
.afchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  background: var(--accent); color: var(--accent-ink); border-radius: 100px; padding: 3px 6px 3px 11px;
}
.afchip button, .tray-chip button {
  border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px;
  line-height: 1; padding: 0 3px; opacity: .75;
}
.afchip button:hover, .tray-chip button:hover { opacity: 1; }

.pk-panel {
  display: grid; gap: 10px; margin: 10px 0 0; padding: 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.fgroup { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: start; }
.flabel {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600; padding-top: 6px;
}
.fopts { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 100px; padding: 4px 11px; font-size: 12px; cursor: pointer;
}
.fchip:hover { color: var(--text); }
.fchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.pk-count { margin: 12px 0 6px; font-size: 12px; color: var(--muted); }
.pool { max-height: 42vh; overflow-y: auto; margin: 0 -4px; }
.pk-empty { padding: 22px 4px; color: var(--muted); text-align: center; }

.pk-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 6px; }
.pk-row:hover { background: var(--bg); }
.pk-row.is-in { opacity: .5; }
.pk-row.is-in input { cursor: not-allowed; }
.pk-av {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--bg);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted);
}
.pk-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-handle { font-size: 11.5px; color: var(--muted); }
.pk-reach {
  flex: none; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 42px; text-align: right;
}

/* The tray is the only way to see who you picked three searches ago. */
.pk-tray {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.tray-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.tray-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 100px; padding: 3px 5px 3px 10px;
}
/* Tier chips carry their follower range, so the vocabulary stays concrete
   without needing a second, contradictory Reach filter beside it. */
.fchip .fsub { display: block; font-size: 10px; opacity: .7; margin-top: 1px; }
.fchip:has(.fsub) { padding: 5px 11px; line-height: 1.25; }
.pk-countbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 12px 0 6px; }
.pk-countbar .pk-count { margin: 0; }
/* Repeat business is the signal a brand asks for by name, so it gets the only
   colour on the row. "New to CREA" is information, not a warning. */
.pk-rep { color: var(--good, #2eb46e); font-weight: 600; }
.pk-new { font-style: italic; opacity: .8; }
/* h3 is uppercased globally, so a subtitle inside one merges into the heading. */
.section-sub { margin: -4px 0 10px; font-size: 12px; color: var(--muted); }

/* ── new-campaign wizard ─────────────────────────────────────────────────── */
.wz { padding: 0; }
.wz-rail { display: flex; border-bottom: 1px solid var(--border); background: var(--bg); }
.wz-rail div { flex: 1; text-align: center; padding: 9px 6px; font-size: 11px;
               color: var(--muted); border-right: 1px solid var(--border); }
.wz-rail div:last-child { border-right: 0; }
.wz-rail div.on { color: var(--text); font-weight: 650; box-shadow: inset 0 -2px 0 var(--accent); }
.wz-rail div.done { color: var(--good); }
.wz-body { padding: 20px; display: grid; gap: 11px; }
.wz-q { font-size: 17px; font-weight: 650; margin: 0; }
.wz-sub { color: var(--muted); font-size: 12.5px; margin: -6px 0 6px; }
.wz-f { display: grid; gap: 4px; }
.wz-lab { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.wz-tag { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
          padding: 1px 5px; border-radius: 3px; }
/* Inherited and derived are labelled, not colour-coded into the accent: the point
   is provenance, and provenance is information rather than emphasis. */
.wz-tag.inh { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); }
.wz-tag.der { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.wz-row { display: flex; gap: 8px; align-items: center; padding: 5px 0; }
.wz-note { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px;
           background: color-mix(in srgb, var(--accent) 9%, transparent);
           border-radius: 8px; padding: 11px 13px; }
.wz-note.warn { background: color-mix(in srgb, var(--warn) 13%, transparent); }
.wz-note.calc { background: color-mix(in srgb, var(--good) 11%, transparent); }
.wz-note input { margin: 2px 0 0; width: auto; }
.wz-date { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
.wz-rev { display: grid; grid-template-columns: 108px 1fr; gap: 7px 14px; font-size: 13px; margin: 0; }
.wz-rev dt { color: var(--muted); font-size: 12.5px; }
.wz-rev dd { margin: 0; }
.wz-skip { color: var(--warn); }
.wz-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px;
           padding: 13px 20px; border-top: 1px solid var(--border); background: var(--bg); }
.wz-actions { display: flex; gap: 8px; }
@media (max-width: 640px) { .wz-date, .wz-rev { grid-template-columns: 1fr; } }

/* wizard: bordered line items, and the date timeline */
.wz-lines { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.wz-line { display: flex; align-items: center; gap: 8px; padding: 8px 11px;
           border-bottom: 1px solid var(--border); }
.wz-line:last-child { border-bottom: 0; }
.wz-line.add { padding: 6px 8px; }
.wz-line .grow { flex: 1; min-width: 0; }
.wz-line .qty { width: 58px; }
/* NOT .plat — that is the 20x20 platform icon badge, and a <select> wearing it
   inherited height:20px, which crushed the option text into unreadable smudges
   on every machine. 150px so "Instagram" is not truncated either. */
.wz-line .platsel { width: 150px; }
.wz-line .url { width: 190px; }
.wz-line .price { width: 108px; }
.wz-line .times { color: var(--muted); font-size: 12px; }
.wz-line .link-btn { margin-left: auto; }
.wz-q.sub-q { font-size: 14px; margin-top: 16px; }
.wz-group { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
            color: var(--muted); font-weight: 600; margin: 14px 0 -4px; }

/* Each bar is the PERIOD LEADING UP TO its milestone, so the row lengths carry
   information rather than decorating it. */
.tl { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tl-row { display: grid; grid-template-columns: 154px 1fr 178px; gap: 12px; align-items: center;
          padding: 9px 12px; border-bottom: 1px solid var(--border); }
.tl-row:last-child { border-bottom: 0; }
.tl-lab { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tl-bar { height: 6px; border-radius: 3px; background: var(--border); position: relative; }
.tl-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.tl-bar.win i { background: var(--good); }
.tl-date { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .tl-row { grid-template-columns: 1fr; }
  .tl-row .tl-bar { display: none; }
}

/* ── readiness: the one question the detail page answers during setup ────────
   Three states, not two — "set but incomplete" is different from "untouched",
   and collapsing them is what makes a checklist feel like nagging. */
.ready { background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius); margin: 16px 0; overflow: hidden; }
.ready-top { display: flex; justify-content: space-between; align-items: center;
             gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--border); }
.ready .prog, .set-progress .prog { display: flex; align-items: center; gap: 9px; font-size: 12px;
               color: var(--muted); font-variant-numeric: tabular-nums; }
.ready .bar, .set-progress .bar { width: 104px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ready .bar i, .set-progress .bar i { display: block; height: 100%; background: var(--good); }
.r-row { display: grid; grid-template-columns: 20px 112px 1fr auto; gap: 11px;
         align-items: baseline; padding: 9px 15px; border-bottom: 1px solid var(--border); }
/* :last-of-type counts every sibling div, and .ready-foot is one — so no
   .r-row ever matched and the footer carried a double border. */
.r-row:nth-last-child(2) { border-bottom: 0; }
.r-row .mk { font-size: 13px; }
.r-row.ok   .mk { color: var(--good); }
.r-row.warn .mk { color: var(--warn); }
.r-row.todo .mk { color: var(--muted); }
.r-name { font-weight: 600; font-size: 13px; }
.r-val  { font-size: 13px; color: var(--muted); }
.r-row.warn .r-val, .r-row.todo .r-val { color: var(--text); }
.r-act  { font-size: 12.5px; }
.ready-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px;
              padding: 12px 15px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ready-foot span { font-size: 13px; color: var(--muted); }
/* Done collapses to one line — nobody re-reads a checklist they finished. */
.ready.is-done { display: flex; align-items: center; gap: 9px; padding: 11px 15px; }
.ready.is-done .mk { color: var(--good); }
@media (max-width: 720px) {
  .r-row { grid-template-columns: 20px 1fr; }
  .r-row .r-val, .r-row .r-act { grid-column: 2; }
}

/* Expanded while drafting; folded once the campaign is running, because a
   recruiting campaign is never going back to write restricted_claims and a
   permanent banner is one people train themselves to scroll past. */
.ready.is-folded .r-row, .ready.is-folded .ready-foot { display: none; }
.ready.is-folded .ready-top { cursor: pointer; border-bottom: 0; }
.ready .chev { display: inline-block; margin-left: 4px; opacity: .6; }
.ready:not(.is-folded) .chev { transform: rotate(180deg); }

/* ── offers board ─────────────────────────────────────────────────────────── */
.counter.hot .n  { color: var(--warn); }
.counter.good .n { color: var(--good); }
.pool-table tr.needs-you { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.pool-table tr.settled   { opacity: .68; }
.chip.os-countered { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.chip.os-accepted  { color: var(--good); border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.chip.os-declined, .chip.os-expired, .chip.os-withdrawn { color: var(--muted); }
.chip.os-sent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* Auto-accepted never looks like hand-accepted: money moved without a human. */
.chip.auto { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); margin-left: 5px; }
.clock.soon { color: var(--warn); font-weight: 650; }
.clock.dead { color: var(--bad); }
.btn.tiny { padding: 4px 10px; font-size: 12px; }
.money-face { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
              align-items: center; text-align: center; margin: 14px 0 4px; }
.money-face .lab { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.money-face .amt { font-size: 22px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.money-face .amt.warn { color: var(--warn); }
.money-face .arrow { color: var(--muted); }
.delta { text-align: center; color: var(--warn); font-size: 12.5px; margin: 0 0 10px; }
.bid-msg { background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px;
  white-space: pre-wrap; }
.stack { display: grid; gap: 8px; margin: 12px 0 8px; }
.btn.danger-link { background: none; border-color: transparent; color: var(--bad); }
.tiny { font-size: 11.5px; }

/* ── campaign page: five tabs, one pane ─────────────────────────────────── */
/* Named tab-* rather than reusing .pane / .kv / .badge: .pane is the setup
   modal's grid and .kv is a form layout, so borrowing either would have styled
   this page by accident and broken when that one changed. */

.campaign-page { padding-bottom: 4px; }

.sub-tabs {
  /* .card is padding:14px — bleeding by 18 overhung the card edge by 3px. */
  display: flex; gap: 2px; margin: 4px -14px 0; padding: 0 14px;
  border-bottom: 1px solid var(--border); overflow-x: auto;
}
.sub-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 550;
  padding: 10px 14px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.sub-tab:hover { color: var(--text); }
.sub-tab.on { color: var(--text); border-bottom-color: var(--accent); }
.tab-badge {
  background: var(--warn); color: #fff; border-radius: 9px; font-size: 11px;
  font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tab-pane { padding-top: 16px; }
.tab-actions { display: flex; gap: 8px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.tab-actions .pool-filter { margin: 0 0 0 auto; max-width: 260px; }

/* A fact is read, not filled in — one line, label left, value right. */
.fact {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.fact:last-child { border-bottom: 0; }
.fact .k { color: var(--muted); }
.fact .v { text-align: right; font-variant-numeric: tabular-nums; }
.fact .v.bad  { color: var(--bad); font-weight: 600; }
.fact .v.soon { color: var(--warn); font-weight: 600; }

.ov-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.ov-two .card { margin: 0; }
.ov-two h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }
.ov-bar {
  display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--bg); margin: 4px 0 12px;
}
.ov-bar i { display: block; height: 100%; }

.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.set-grid .card { margin: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card-head h4 { margin: 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }
.set-banner {
  width: 100%; height: 96px; object-fit: cover;
  border-radius: 8px; margin-top: 10px; display: block;
}

.row-link.on { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }

@media (max-width: 760px) {
  .ov-two, .set-grid { grid-template-columns: 1fr; }
  .tab-actions .pool-filter { margin-left: 0; max-width: none; width: 100%; }
}

/* ── campaign list: a work queue, not a table dump ───────────────────────── */
.back-link { font-size: 13px; padding: 6px 0; display: inline-block; margin-bottom: 6px; }
.needs { color: var(--warn); font-weight: 600; font-size: 13px; }
#camp-count .needs { font-weight: 700; }
.needs a { color: inherit; }

/* The bucket tabs. .sub-tab itself is reused as-is — this is the pattern the
   campaign page already owns, so the two read as one product. Only the
   container needs adjusting: .sub-tabs is authored to bleed to the edges of a
   .card (margin: 0 -14px; padding: 0 14px), and the campaigns list is not in a
   card, so the bleed would pull the tabs 14px out of line with the table. */
.f-tabs { margin: 0 0 2px; padding: 0; }
.f-n { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.sub-tab.on .f-n { color: var(--text); }
/* Closed campaigns are context, not work — present but never competing. */
tr.is-done .name, tr.is-done td { opacity: .62; }
tr.is-done:hover td { opacity: 1; }

/* ── campaign lifecycle: the ⋯ menu and its row affordances ──────────────── */
/* Eight columns do not fit a phone. This table never had the overflow wrapper
   the roster, usage and applications tables all have (.pool-panel, .u-scroll,
   .aq-scroll) — it just ran off the right edge. Adding the tick and ⋯ columns
   made that worse, so it gets one too. */
.cl-scroll { overflow-x: auto; }
.cl-col { width: 34px; text-align: right; padding-left: 0 !important; }
.cl-kebab {
  border: 0; background: none; font: inherit; font-size: 17px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.cl-kebab:hover { color: var(--text); background: var(--bg); }
.cl-kebab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The header's own ⋯ needs no layout rule: .detail-head is already a
   space-between flex row (line 228), so it lands opposite the title. */

/* Fixed, not absolute: a menu nested in a <td> is clipped by the row, so the
   last row's menu opens underneath the page. lifecycle.js positions it off the
   button's own rect and flips it above when there is no room below. */
.cl-menu {
  position: fixed; z-index: 60; min-width: 176px; padding: 4px;
  max-height: calc(100vh - 16px); overflow-y: auto;    /* a long list (saved replies) scrolls inside it */
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
}
.cl-item {
  border: 0; background: none; font: inherit; font-size: 13px; color: var(--text);
  text-align: left; padding: 7px 10px; border-radius: 6px; cursor: pointer;
}
.cl-item:hover { background: var(--bg); }
.cl-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cl-item.danger { color: var(--bad); }
.cl-item.danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
a.cl-item { text-decoration: none; }
/* menu.js: a divider between groups, and a line of text that is not an action. */
.cl-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.cl-info { padding: 6px 10px; font-size: 12px; color: var(--muted); cursor: default; }
/* Who a cancellation reaches. Warn-toned rather than danger: cancelling is
   reversible, but these are real people part-way through real work. */
.cl-impact {
  margin: 10px 0; padding: 10px 13px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  font-size: 13px; line-height: 1.5;
}
.cl-impact ul { margin: 0; padding-left: 18px; }
.cl-impact li { margin: 3px 0; }

/* Every draft a bulk delete is about to take, by name, before the click. */
.cl-dellist { margin: 8px 0; padding-left: 20px; max-height: 210px; overflow-y: auto;
  font-size: 13.5px; }
.cl-dellist li { margin: 2px 0; }

/* ── Settings tab: the one configuration surface, seven inline sections ───── */
.set-jump {
  /* Clear the 56px global .topbar (sticky top:0, z-index:20). At top:0 the chips
     pinned UNDER it and vanished, since both share var(--surface). */
  position: sticky; top: 56px; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 0; margin-bottom: 4px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.set-chip {
  font: inherit; font-size: 12.5px; color: var(--muted); text-decoration: none;
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: none; cursor: pointer;
}
.set-chip:hover { color: var(--text); border-color: var(--muted); }
.set-section { margin: 14px 0; scroll-margin-top: 56px; }
.set-section > h3 { margin: 0 0 12px; font-size: 15px; }
.set-section label { display: block; margin: 0 0 10px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.set-section label .input { text-transform: none; letter-spacing: 0; margin-top: 4px; }
.set-section label.chk { display: flex; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--text); }
.set-section .checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.set-section h4 { margin: 14px 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
/* The deliverable block moved into .set-section, whose h4 rule (uppercase/muted)
   would otherwise clobber .deliv-block h4's deliberate text-transform:none. */
.set-section .deliv-block h4 { text-transform: none; letter-spacing: 0;
  color: var(--text); font-size: 13px; margin: 0 0 8px; }
/* The de-nested Platforms caption reads like the other field labels. */
.set-section .field .lbl { display: block; margin: 0 0 4px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.banner-row { display: flex; gap: 8px; align-items: center; }
.banner-row .input { flex: 1; }
.banner-edit .set-banner { width: 100%; max-height: 120px; object-fit: cover;
  border-radius: 8px; margin: 6px 0; display: block; }

/* Sticky action bar so Save is always reachable in a long form. */
.set-savebar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center;
  justify-content: flex-end; gap: 14px; padding: 12px 0; margin-top: 8px;
  background: linear-gradient(to top, var(--surface) 70%, transparent);
  border-top: 1px solid var(--border);
}

/* The launch call-to-action on Overview, once a draft's definition is complete. */
.golive {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; margin-bottom: 14px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--good) 45%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, transparent);
}
.golive b { font-size: 14px; }
.golive p { margin: 3px 0 0; max-width: 62ch; }
.golive .btn { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   Usage & Adoption dashboard (staff "Usage" tab). All classes are u- prefixed
   so nothing collides with an existing identity (see tests/css-collisions).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --u-staff:#2a78d6; --u-creator:#e87ba4; --u-system:#9aa4b2; --u-applicant:#b6a06b;
  --u-r1:#86b6ef; --u-r2:#5598e7; --u-r3:#2a78d6; --u-r4:#1c5cab; --u-r5:#104281;
  --u-grid:#e7ebef; --u-faint:#eef1f4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --u-staff:#3987e5; --u-creator:#d55181; --u-system:#7c8595; --u-applicant:#b09a5f;
    --u-r1:#9ec5f4; --u-r2:#6da7ec; --u-r3:#3987e5; --u-r4:#256abf; --u-r5:#184f95;
    --u-grid:#232a33; --u-faint:#1c222b;
  }
}
:root[data-app="staff"] {
  --u-staff:#3987e5; --u-creator:#d55181; --u-system:#7c8595; --u-applicant:#b09a5f;
  --u-r1:#9ec5f4; --u-r2:#6da7ec; --u-r3:#3987e5; --u-r4:#256abf; --u-r5:#184f95;
  --u-grid:#232a33; --u-faint:#1c222b;
}

.u-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.u-seg { display:inline-flex; background:var(--u-faint); border:1px solid var(--border); border-radius:9px; padding:2px; }
.u-seg button { border:0; background:none; color:var(--muted); font:inherit; font-size:13px; font-weight:500; padding:5px 11px; border-radius:7px; cursor:pointer; }
.u-seg button.on { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(16,24,40,.14); font-weight:600; }
.u-seg .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.u-seglabel { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }

.u-grid { display:grid; gap:14px; }
.u-grid > * { min-width:0; }
.u-kpis { grid-template-columns:repeat(6,1fr); margin:14px 0; }
.u-two { grid-template-columns:1fr 1fr; }
.u-adopt { grid-template-columns:1.2fr 1fr 1fr; }

.u-tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.u-tile .lab, .u-follow .lab { font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.u-tile .val, .u-follow .val { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.u-tile .val small { font-size:13px; font-weight:600; color:var(--muted); }
.u-tile .split, .u-follow .split { font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; }
.u-tile .split b, .u-follow .split b { color:var(--text); font-weight:600; }
.u-follow { display:flex; flex-direction:column; gap:2px; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.u-follow svg { display:block; width:100%; height:auto; margin-top:10px; }
.u-fx { display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); margin-top:3px; }
.u-sw { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:4px; }

.u-cardh { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px; }
.u-cardh h2 { font-size:14px; margin:0; font-weight:650; }
.u-cardh .note { font-size:12px; color:var(--muted); }
.u-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; margin:24px 0 2px; }
.u-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); align-items:center; }
.u-scroll { overflow-x:auto; }

.u-hbars { display:flex; flex-direction:column; gap:9px; }
.u-hbar { display:grid; grid-template-columns:160px 1fr 54px; gap:10px; align-items:center; font-size:12.5px; }
.u-hbar .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-track { background:var(--u-faint); border-radius:5px; height:16px; overflow:hidden; }
.u-fill { height:100%; border-radius:5px; min-width:2px; }
.u-num { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }

.u-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; }
.u-badge::before { content:""; width:7px; height:7px; border-radius:50%; }
.u-badge.staff { color:var(--u-staff); background:color-mix(in srgb, var(--u-staff) 13%, transparent); }
.u-badge.staff::before { background:var(--u-staff); }
.u-badge.creator { color:var(--u-creator); background:color-mix(in srgb, var(--u-creator) 15%, transparent); }
.u-badge.creator::before { background:var(--u-creator); }
.u-badge.applicant { color:var(--u-applicant); background:color-mix(in srgb, var(--u-applicant) 17%, transparent); }
.u-badge.applicant::before { background:var(--u-applicant); }
.u-badge.system { color:var(--u-system); background:color-mix(in srgb, var(--u-system) 17%, transparent); }
.u-badge.system::before { background:var(--u-system); }

.u-resp { display:flex; flex-direction:column; }
.u-resprow { display:grid; grid-template-columns:210px 1fr 118px; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); }
.u-resprow:last-child { border-bottom:0; }
.u-resprow .rn { font-size:13px; }
.u-resprow .rn small { display:block; color:var(--muted); font-size:11px; }
.u-resprow .rs { text-align:right; font-size:11px; color:var(--muted); }
.u-resprow .rs b { color:var(--text); font-weight:650; font-size:14px; display:block; font-variant-numeric:tabular-nums; }

.u-funnel { display:flex; flex-direction:column; gap:7px; }
.u-fstage { display:flex; align-items:center; gap:12px; }
.u-fbar { height:32px; border-radius:8px; display:flex; align-items:center; padding:0 11px; color:#fff; font-weight:650; font-size:13px; min-width:60px; font-variant-numeric:tabular-nums; }
.u-fmeta { font-size:12px; color:var(--muted); }
.u-fmeta b { color:var(--text); text-transform:capitalize; }

.u-gauges { display:flex; gap:8px; justify-content:space-around; flex-wrap:wrap; }
.u-gauge { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; flex:1; min-width:92px; }
.u-gauge .gl { font-size:11.5px; color:var(--muted); line-height:1.3; }

.u-stat { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.u-stat .sh { display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; }
.u-stat .sh b { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.u-stack { display:flex; height:14px; border-radius:5px; overflow:hidden; background:var(--u-faint); }
.u-stack > span { height:100%; }

.u-minibar { display:inline-block; height:8px; border-radius:3px; vertical-align:middle; margin-left:8px; }
#u-tip { position:fixed; z-index:60; pointer-events:none; background:var(--text); color:var(--bg); font-size:12px; line-height:1.4; padding:7px 9px; border-radius:7px; box-shadow:0 6px 20px rgba(0,0,0,.28); opacity:0; transition:opacity .1s; max-width:240px; }
#u-tip.on { opacity:1; }
#u-tip .tt { font-weight:600; margin-bottom:2px; }
#u-tip .tr { display:flex; justify-content:space-between; gap:12px; }
#u-tip .tr .sw { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; }

@media (max-width:1000px) {
  .u-kpis { grid-template-columns:repeat(3,1fr); }
  .u-two, .u-adopt { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .u-kpis { grid-template-columns:repeat(2,1fr); }
  .u-hbar { grid-template-columns:110px 1fr 46px; }
  .u-resprow { grid-template-columns:120px 1fr 92px; }
}

/* ── application queue dashboard (Applications tab) ──────────────────────────
   Namespaced aq- like every other feature here (u-, wz-, pk-, bc-): the strip
   sits inside another view's page and must never inherit — or lend — anything.
   An ordinal ramp for ageing, green→red, because the buckets ARE ordered; each
   chip carries its label so the colour never has to carry the meaning alone. */
:root {
  --aq-grid:#e7ebef;
  --aq-t1:#17803d; --aq-t2:#c48a00; --aq-t3:#d9682a; --aq-t4:#c0342b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --aq-grid:#232a33;
    --aq-t1:#3fae66; --aq-t2:#e0a92b; --aq-t3:#ef8b52; --aq-t4:#e5675e;
  }
}
:root[data-app="staff"] {
  --aq-grid:#232a33;
  --aq-t1:#3fae66; --aq-t2:#e0a92b; --aq-t3:#ef8b52; --aq-t4:#e5675e;
}

.aq-head { display:flex; align-items:center; gap:10px; }
.aq-seg { display:inline-flex; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:2px; }
.aq-seg button { border:0; background:none; color:var(--muted); font:inherit; font-size:12.5px; font-weight:500;
                 padding:4px 10px; border-radius:7px; cursor:pointer; }
.aq-seg button.on { background:var(--surface); color:var(--text); font-weight:650; box-shadow:0 1px 2px rgba(16,24,40,.14); }

.aq-strip { margin:14px 0 18px; display:grid; gap:12px; }
.aq-kpis { display:grid; gap:12px; grid-template-columns:repeat(4,1fr); }
/* start, not stretch: the chart card must not grow a slab of dead space
   just because the column beside it happens to be taller. */
.aq-two  { display:grid; gap:12px; grid-template-columns:1.45fr 1fr; align-items:start; }
.aq-two > *, .aq-kpis > * { min-width:0; }
.aq-side { display:grid; gap:12px; align-content:start; }

.aq-tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
           padding:13px 14px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.aq-tile .lab { font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.aq-tile .val { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.aq-tile .val small { font-size:13px; font-weight:600; color:var(--muted); }
.aq-tile .sub { font-size:12px; color:var(--muted); }
.aq-tile .sub b { color:var(--text); font-weight:650; }
.aq-tile .sub .up { color:var(--bad); font-weight:600; }
.aq-tile .sub .dn { color:var(--good); font-weight:600; }
/* The backlog tile earns the only alarm colour on the strip: it is the one
   number that says the queue is losing, and it should look like it. */
.aq-tile.alarm { border-color:color-mix(in srgb, var(--bad) 45%, var(--border));
                 background:color-mix(in srgb, var(--bad) 6%, var(--surface)); }

.aq-cardh { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.aq-cardh h2 { font-size:14px; margin:0; font-weight:650; }
.aq-cardh .note { font-size:12px; color:var(--muted); }
.aq-scroll { overflow-x:auto; }
.aq-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:8px; }
.aq-legend span { display:flex; align-items:center; gap:5px; }
.aq-legend i { width:9px; height:9px; border-radius:2px; display:block; }
.aq-legend i.ln { width:14px; height:2px; border-radius:1px; background:var(--text); }
.aq-foot { margin:10px 0 0; font-size:11.5px; color:var(--muted); }

.aq-agebar { display:flex; gap:2px; margin-bottom:11px; }
.aq-agebar > span { height:11px; border-radius:3px; min-width:3px; }
.aq-chips { display:flex; flex-wrap:wrap; gap:6px; }
.aq-chip { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; cursor:pointer;
           border:1px solid var(--border); background:var(--surface); color:var(--muted);
           border-radius:100px; padding:4px 11px; }
.aq-chip:hover:not(:disabled) { color:var(--text); }
.aq-chip:disabled { cursor:default; opacity:.75; }
.aq-chip b { color:var(--text); font-weight:650; font-variant-numeric:tabular-nums; }
.aq-chip.on { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); color:var(--text); }
.aq-chip i { width:8px; height:8px; border-radius:2px; display:block; }

.t-good    { background:var(--aq-t1); }
.t-warn    { background:var(--aq-t2); }
.t-serious { background:var(--aq-t3); }
.t-bad     { background:var(--aq-t4); }
/* The same ramp as a table chip: tinted ground, inked text, so a row's age reads
   at the same glance as the bucket it came from. */
.chip.aq-age { color:var(--text); border-color:transparent; }
.chip.aq-age.t-good    { background:color-mix(in srgb, var(--aq-t1) 20%, transparent); }
.chip.aq-age.t-warn    { background:color-mix(in srgb, var(--aq-t2) 24%, transparent); }
.chip.aq-age.t-serious { background:color-mix(in srgb, var(--aq-t3) 24%, transparent); }
.chip.aq-age.t-bad     { background:color-mix(in srgb, var(--aq-t4) 24%, transparent); }

.aq-hbars { display:flex; flex-direction:column; gap:8px; }
.aq-hbar { display:grid; grid-template-columns:132px 1fr 52px; gap:10px; align-items:center; font-size:12.5px; }
.aq-hbar .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.aq-track { background:var(--bg); border:1px solid var(--border); border-radius:5px; height:14px; overflow:hidden; }
.aq-fill { height:100%; border-radius:4px; min-width:2px; background:var(--accent); }
.aq-fill.neutral { background:var(--muted); }
.aq-num { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Reject-with-a-reason. Replaces the drawer footer in place so the application
   you are judging stays on screen while you choose. */
.aq-rj { display:grid; gap:8px; padding:14px 0 0; border-top:1px solid var(--border); }
.aq-rj[hidden] { display:none; }
.aq-rjlab { font-size:12px; font-weight:650; color:var(--text); }
.aq-rjact { display:flex; justify-content:flex-end; gap:8px; }
.aq-rjact .btn:not(.ghost) { border-color:var(--bad); color:var(--bad); }
.aq-rjact .btn:disabled { border-color:var(--border); color:var(--muted); }

/* ── bulk selection + preflight ─────────────────────────────────────────────
   The verdict tones reuse the ageing ramp so the tab speaks one colour language;
   accent and muted fill the two slots the ramp does not cover. */
.t-accent { background:var(--accent); }
.t-muted  { background:var(--muted); }

/* The submission timestamp under an ageing chip: present when you want it,
   recessive when you are scanning the chips. */
.aq-sub { font-size:11px; opacity:.75; margin-top:3px; white-space:nowrap; }

.aq-cb { width:34px; padding-right:0 !important; }
.aq-cb input { cursor:pointer; margin:0; }
.table tr.is-sel td { background:color-mix(in srgb, var(--accent) 9%, transparent); }

.aq-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px;
          padding:10px 14px; border-radius:var(--radius);
          background:var(--text); color:var(--bg); }
.aq-barn { font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.aq-sp { flex:1; }
.aq-link { border:0; background:none; font:inherit; font-size:12.5px; cursor:pointer;
           color:inherit; opacity:.72; text-decoration:underline; padding:0; }
.aq-link:hover { opacity:1; }
/* The bar inverts the page, so its buttons have to be re-stated against it. */
.aq-bar .btn { background:transparent; border-color:color-mix(in srgb, var(--bg) 35%, transparent); color:var(--bg); }
.aq-bar .btn:hover { border-color:var(--bg); }
.aq-bar .btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

.aq-pf { border:1px solid var(--border); background:var(--surface); border-radius:var(--radius);
         padding:15px 16px; margin:0 0 14px; }
.aq-pfh { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:11px; }
.aq-pfh .t { font-size:13px; font-weight:650; }
.aq-pfh .m { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.aq-chip.static { cursor:default; }
.aq-pfrows { display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.aq-vrow { display:grid; grid-template-columns:10px 150px 116px 1fr; gap:10px; align-items:center;
           font-size:12.5px; padding:8px 11px; border:1px solid var(--border);
           border-radius:8px; background:var(--bg); }
.aq-vrow.off { opacity:.72; }
.aq-vrow i { width:9px; height:9px; border-radius:50%; display:block; }
.aq-vrow .vn { font-weight:650; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aq-vrow .vl { color:var(--text); }
.aq-vrow .vd { color:var(--muted); }
.aq-pfoot { display:flex; justify-content:space-between; align-items:center; gap:12px;
            flex-wrap:wrap; margin-top:14px; padding-top:13px; border-top:1px solid var(--border); }
.aq-opts { display:flex; gap:14px; flex-wrap:wrap; }
.aq-opt { display:flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; }
.aq-opt input { margin:0; }
.aq-pfgo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Three outcomes on one bar, in the order they matter: added, failed, held back. */
.aq-prog { display:flex; gap:2px; height:9px; border-radius:5px; overflow:hidden;
           background:var(--bg); border:1px solid var(--border); }
.aq-prog > span { height:100%; border-radius:3px; transition:width .3s ease; }
@media (prefers-reduced-motion:reduce) { .aq-prog > span { transition:none; } }
.aq-note { font-size:12px; color:var(--muted); }

/* Hover layer. The hit target is the whole week column across both panels, not
   the bar inside it — and it lights up, so you can see what you are reading. */
.aq-hit { fill:transparent; }
.aq-hit:hover { fill:var(--text); fill-opacity:.06; }
.aq-fill[data-tip], .aq-agebar > span[data-tip] { cursor:default; }

#aq-tip {
  position:fixed; z-index:60; pointer-events:none; opacity:0; transition:opacity .1s;
  background:var(--text); color:var(--bg); font-size:12px; line-height:1.45;
  padding:7px 9px; border-radius:7px; box-shadow:0 6px 20px rgba(0,0,0,.28); max-width:240px;
}
#aq-tip.on { opacity:1; }
#aq-tip .tt { font-weight:650; margin-bottom:3px; }
#aq-tip .tr { display:flex; justify-content:space-between; gap:14px; font-variant-numeric:tabular-nums; }
#aq-tip .tr .sw { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; }

@media (max-width:1000px) {
  .aq-kpis { grid-template-columns:repeat(2,1fr); }
  .aq-two { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .aq-vrow { grid-template-columns:10px 1fr; row-gap:3px; }
  .aq-vrow .vl, .aq-vrow .vd { grid-column:2; }
}
@media (max-width:560px) {
  .aq-hbar { grid-template-columns:100px 1fr 46px; }
}

/* ── Applications › Who's applying (am-) ──────────────────────────────────
   The creator mix over time: one card per apply-form question, stacked bars
   with a pie beside them. ONE categorical palette for every card, in slot
   order — validated with the dataviz palette validator on the card surface,
   light and dark, as a set; its order is the colour-blind safety, so never
   reorder or cycle it. "Not given" is a missing answer, not a value: grey. */
:root {
  --am-c1:#2a78d6; --am-c2:#eb6834; --am-c3:#1baf7a; --am-c4:#eda100;
  --am-c5:#e87ba4; --am-c6:#008300; --am-c7:#6250d6; --am-c8:#e34948;
  --am-none:#b9b8b1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --am-c1:#3987e5; --am-c2:#d95926; --am-c3:#199e70; --am-c4:#c98500;
    --am-c5:#d55181; --am-c6:#008300; --am-c7:#9085e9; --am-c8:#e66767;
    --am-none:#59616d;
  }
}
:root[data-app="staff"] {
  --am-c1:#3987e5; --am-c2:#d95926; --am-c3:#199e70; --am-c4:#c98500;
  --am-c5:#d55181; --am-c6:#008300; --am-c7:#9085e9; --am-c8:#e66767;
  --am-none:#59616d;
}

/* `hidden` must win over the display these containers set. */
.aq-strip[hidden], .am-tools[hidden] { display:none; }

.am-vrow { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0 0; }
.am-vsw { display:inline-flex; gap:3px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:3px; }
.am-vsw button { border:0; background:none; color:var(--muted); font:inherit; font-size:13.5px; font-weight:550;
                 padding:7px 14px; border-radius:7px; cursor:pointer; min-height:36px; }
.am-vsw button:hover { color:var(--text); }
.am-vsw button.on { background:var(--accent); color:var(--accent-ink); }
.am-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.aq-tile .val.am-word { font-size:20px; line-height:1.2; }
.aq-tile.am-warn { border-color:color-mix(in srgb, var(--aq-t2) 50%, var(--border));
                   background:color-mix(in srgb, var(--aq-t2) 7%, var(--surface)); }
.aq-tile.am-warn .val { color:var(--aq-t2); }

/* the application review's "Checked against TikTok Shop" box (application-tiktok.js) */
.aq-tt { border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.aq-tt-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.aq-tt-head .strong { flex:1 1 auto; }
.aq-tt-head .aq-tt-ava { flex:0 0 40px; width:40px; height:40px; font-size:14px; }
.aq-tt .alert { margin:6px 0; }
.aq-tt-cmp { margin:6px 0 10px; }
.aq-tt-cmp th[scope="row"] { text-align:left; white-space:nowrap; }
.aq-tt-v { font-size:12px; margin-top:2px; }
.aq-tt-v.good { color:var(--good); }
.aq-tt-v.warn { color:var(--warn); font-weight:600; }
.aq-tt-v.muted { color:var(--muted); }

.am-cards { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:stretch; }
.am-card { min-width:0; }
.am-card.wide { grid-column:1 / -1; }

.am-ro { margin-bottom:12px; }
.am-rohead { display:block; font-size:11.5px; color:var(--muted); margin-bottom:5px; min-height:17px; }
.am-legend { display:flex; flex-wrap:wrap; gap:2px 4px; }
.am-li { display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; background:none; color:var(--text);
         font:inherit; font-size:12.5px; padding:3px 8px; border-radius:7px; cursor:pointer; min-height:32px; }
.am-li:hover { background:var(--bg); }
.am-li.faint { opacity:.45; }
/* Hidden from the chart: struck through, hollow swatch — one click brings it back. */
.am-li.off .am-ln { text-decoration:line-through; color:var(--muted); }
.am-li.off b { color:var(--muted); font-weight:500; }
.am-li.off i { background:none !important; box-shadow:inset 0 0 0 1.5px var(--muted); }
.am-showall { border:0; background:none; color:var(--accent); font:inherit; font-size:12px; cursor:pointer;
              text-decoration:underline; text-underline-offset:3px; padding:4px 2px; min-height:28px; }
.am-li i { width:10px; height:10px; border-radius:2px; display:block; flex:none; }
.am-li b { font-weight:650; font-variant-numeric:tabular-nums; }
.am-d { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.am-d:empty { display:none; }

.am-viz { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.am-chart { flex:1 1 320px; min-width:0; }
.am-plot { position:relative; height:200px; margin-left:40px; }
.am-gl { position:absolute; left:0; right:0; height:0; border-top:1px solid var(--aq-grid); }
.am-gl span { position:absolute; right:calc(100% + 7px); top:-8px; font-size:10.5px; color:var(--muted);
              white-space:nowrap; font-variant-numeric:tabular-nums; }
.am-cols { position:absolute; inset:0; display:flex; }
.am-col { flex:1; display:flex; align-items:flex-end; justify-content:center; min-width:0; }
/* Narrow bars with air between them; segments split by a hairline of surface. */
.am-stk { width:56%; max-width:34px; display:flex; flex-direction:column-reverse; border-radius:4px 4px 0 0; overflow:hidden; }
.am-stk span { display:block; flex:none; border-top:2px solid var(--surface); }
/* An incomplete period (the one still running, or one the window cuts) keeps its
   colour: fading it read as "disabled", and the current week is often the biggest
   bar. It is marked on the axis instead. */
.am-col { cursor:pointer; }
.am-col.dim .am-stk { opacity:.35; }
.am-col.sel .am-stk { outline:2px solid var(--text); outline-offset:2px; }
.am-xl { display:flex; margin-left:40px; margin-top:6px; }
.am-xl span { flex:1; min-width:0; text-align:center; font-size:10.5px; color:var(--muted); white-space:nowrap; }
.am-xl span.part { font-style:italic; }

.am-pie { flex:0 0 150px; display:flex; flex-direction:column; align-items:center; gap:8px; margin:0 auto; }
.am-piehead { font-size:11px; color:var(--muted); text-align:center; min-height:17px; }
.am-donut { width:128px; height:128px; border-radius:50%; position:relative; }
.am-hole { position:absolute; inset:22%; border-radius:50%; background:var(--surface); display:flex; flex-direction:column;
           align-items:center; justify-content:center; text-align:center; }
.am-hole b { font-size:16px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.am-hole span { font-size:10.5px; color:var(--muted); line-height:1.2; padding:0 4px; }

.am-callout { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; padding:11px 14px; font-size:13px;
              border:1px solid color-mix(in srgb, var(--aq-t2) 50%, var(--border)); border-radius:9px;
              background:color-mix(in srgb, var(--aq-t2) 7%, var(--surface)); }
.am-callout-t { flex:1 1 220px; min-width:0; }

.am-fbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; padding:6px 12px; font-size:13px;
           border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius:9px;
           background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.am-sp { flex:1; }

@media (max-width:1000px) {
  .am-cards { grid-template-columns:1fr; }
}
/* ── campaign-creation revamp — shared input primitives ─────────────────────
   Used by the New-campaign modal and the Commercial setup section. The
   label-based components (.seg/.pill/.switch-row) carry enough specificity to
   beat `.set-section label` (uppercase/muted), and reset those props, so they
   render the same inside a settings section and inside a plain modal. */

/* helper line under a field, and an inline "set elsewhere" signpost pill */
.field-note {
  display: block; margin: 6px 0 0; font-size: 12px; line-height: 1.45;
  color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400;
}
.field-note b { color: var(--text); font-weight: 600; }
.signpost {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 4px 10px; border: 1px dashed var(--border); border-radius: 999px;
  font-size: 11.5px; color: var(--muted); text-transform: none; letter-spacing: 0;
}
.signpost b { color: var(--accent); font-weight: 600; }

/* pill chips — a bolder, tappable checkbox group (Platforms) */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
label.pill {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13.5px; color: var(--text); cursor: pointer; user-select: none;
  text-transform: none; letter-spacing: 0;
  transition: border-color .12s, background .12s;
}
label.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
label.pill:hover { border-color: var(--muted); }
label.pill:has(input:checked) {
  border-color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
label.pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Phase 4 · assisted authoring — brief templates & legal presets ─────────
   Button-based pills (distinct from the checkbox-backed label.pill): a brief
   template fills the fields; a legal preset writes one clause into its hidden
   input. `.on` marks the active choice, set by settings.js on click. */
.pillset { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.tmpl-set { margin-bottom: 6px; }
button.ppill {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 7px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
  line-height: 1.25; cursor: pointer; text-transform: none; letter-spacing: 0;
  max-width: 100%; transition: border-color .12s, background .12s;
}
button.ppill:hover { border-color: var(--muted); }
button.ppill.on {
  border-color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
button.ppill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* legal clauses: labels are sentences, so let a preset pill wrap in its row */
.preset-field { margin: 0 0 14px; }
.preset-field button.ppill { white-space: normal; text-align: left; }
.preset-current {
  margin: 8px 0 0; padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  font-size: 12.5px; line-height: 1.5; color: var(--text);
  text-transform: none; letter-spacing: 0; white-space: pre-wrap;
}
/* a clause set to "None" — plainer, so an empty field reads as deliberate */
.preset-current.empty {
  background: transparent; border-style: dashed;
  color: var(--muted); font-style: italic;
}
/* "Clear fields" reads as a secondary, undo-style pill, set apart from the templates */
button.ppill.ppill-clear {
  margin-left: auto; border-style: dashed; color: var(--muted);
}
button.ppill.ppill-clear:hover { color: var(--text); border-color: var(--muted); }
/* required-but-empty disclosure warning */
.preset-warn {
  margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--warn);
  text-transform: none; letter-spacing: 0;
}

/* switch — a checkbox rendered as a toggle */
input.toggle {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 0;
  width: 38px; height: 22px; border-radius: 999px; background: var(--border);
  position: relative; cursor: pointer; transition: background .15s;
}
input.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: left .15s;
}
input.toggle:checked { background: var(--accent); }
input.toggle:checked::after { left: 18px; }
input.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* a switch row: the toggle beside a title + subtext */
label.switch-row {
  display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
label.switch-row .switch-txt { display: flex; flex-direction: column; gap: 2px; }
label.switch-row .switch-txt .h { font-size: 13.5px; font-weight: 600; color: var(--text); }
label.switch-row .switch-txt .s { font-size: 12px; color: var(--muted); }
label.switch-row:has(input:checked) { border-color: var(--accent); }

/* segmented button-cards — a radio group as selectable cards (Fee model) */
.segset { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 4px; }
label.seg {
  display: flex; flex-direction: column; gap: 3px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 13px; cursor: pointer; text-transform: none; letter-spacing: 0;
  transition: border-color .12s, background .12s;
}
label.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
label.seg .seg-t { font-size: 13.5px; font-weight: 600; color: var(--text); }
label.seg .seg-d { font-size: 12px; color: var(--muted); line-height: 1.4; }
label.seg:hover { border-color: var(--muted); }
label.seg:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
label.seg:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* a grouped sub-card: a control paired with the switch that governs it */
.grp {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; display: grid; gap: 12px; margin: 12px 0 0;
}
.grp > label:not(.switch-row) { margin: 0; }

/* ── campaign-creation revamp — Phase 1 (guided flow + readiness) ─────────── */

/* Settings: the guided-flow progress line above the section jump nav */
.set-progress {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 4px 0 10px;
}
.set-progress b { color: var(--text); }

/* per-section status pill in a Settings section header (and its jump chip) */
.sec-status {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 6px;
}
.sec-status.ok   { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.sec-status.todo { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.sec-status.opt  { color: var(--muted); background: color-mix(in srgb, var(--muted) 15%, transparent); }
.set-chip.ok   { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); color: var(--text); }
.set-chip.todo { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); color: var(--text); }
.set-chip.opt  { color: var(--muted); }

/* Overview readiness: the "optional — not needed to go live" divider */
.r-optional {
  margin: 12px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted);
}

/* ── Deliverables redesign (FB-04): content-type cards + compact cards ─────── */
.deliv-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 4px 0 2px;
  text-transform: none; letter-spacing: 0; }
.deliv-ct-lbl { display: block; margin: 14px 0 8px; }
.deliv-types { display: flex; flex-wrap: wrap; gap: 10px; }
.deliv-type { flex: 1 1 180px; max-width: 240px; text-align: left; display: flex; flex-direction: column;
  gap: 6px; border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px;
  background: var(--surface); color: inherit; font: inherit; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s; }
.deliv-type:hover, .deliv-type:focus-visible { border-color: var(--accent); outline: none;
  background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.deliv-type .dt-t { font-size: 14px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 8px; }
.deliv-type .dt-ic { font-size: 19px; }
.deliv-type .dt-d { font-size: 12px; color: var(--muted); line-height: 1.45; }

.note-line { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px;
  color: var(--muted); margin: 12px 0 4px; }
.note-line .ni { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; margin-top: 1px;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
  font-size: 10px; font-weight: 700; display: grid; place-items: center; font-style: normal; }
.note-line b { color: var(--text); }

.deliv-list { display: grid; gap: 12px; margin-top: 8px; }
.deliv-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  background: var(--surface); display: grid; gap: 12px; }
.deliv-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.deliv-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.deliv-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.deliv-summary { color: var(--muted); font-size: 13px; }

.deliv-featured { border-top: 1px solid var(--border); padding-top: 12px; }
.feat-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.feat-count { color: var(--accent); font-weight: 600; }
.feat-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.feat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px;
  border-radius: 999px; font-size: 13px; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, transparent); }
.feat-star { color: #e0a92b; }
.feat-price { color: var(--muted); font-variant-numeric: tabular-nums; }
.feat-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px;
  line-height: 1; padding: 0 2px; }
.feat-x:hover { color: var(--bad); }
.feat-add { border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--border)); background: none;
  color: var(--accent); border-radius: 999px; padding: 6px 13px; font-size: 13px; cursor: pointer; }
.feat-add:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.deliv-edit { border-top: 1px solid var(--border); padding-top: 10px; }
.deliv-edit > summary { cursor: pointer; color: var(--accent); font-size: 12.5px; list-style: none;
  display: inline-flex; align-items: center; gap: 6px; }
.deliv-edit > summary::-webkit-details-marker { display: none; }
.deliv-edit > summary::before { content: "▸"; font-size: 10px; }
.deliv-edit[open] > summary::before { content: "▾"; }
.deliv-edit[open] > summary { margin-bottom: 12px; }

/* Inline "new product" form inside the feature-products modal */
.np-form { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.np-form > .lbl { display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }

/* Brand onboarding */
.brand-add { display: inline-block; margin-top: 6px; font-size: 12.5px; }
.brand-logo-row { display: flex; gap: 12px; align-items: center; }
.brand-logo-prev { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted); overflow: hidden; flex: 0 0 auto;
  background: var(--bg); font-size: 18px; }
.brand-logo-prev img { width: 100%; height: 100%; object-fit: cover; }
.brand-logo-up { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.brand-thumb { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  overflow: hidden; display: grid; place-items: center; color: var(--muted); font-weight: 700;
  font-size: 13px; background: var(--bg); }
.brand-thumb img { width: 100%; height: 100%; object-fit: cover; }
.brands-table td:first-child, .brands-table th:first-child { width: 44px; }
/* A brand's page (views/brand-page.js): its mark and name, its stores, its facts. */
.bp-head { align-items: center; }
.bp-who { display: flex; align-items: center; gap: 12px; }
.bp-who .brand-thumb { width: 44px; height: 44px; font-size: 18px; }
.bp-who h1 { margin: 0; }
.bp-shops-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.bp-shops-head p { margin: 0; max-width: 680px; }
.bp-archived { margin-top: 14px; }
.bp-archived summary { cursor: pointer; margin-bottom: 8px; }
.bp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 14px 0 18px; font-size: 14px; }
.bp-facts dt { color: var(--muted); }
.bp-facts dd { margin: 0; }
.bp-unbranded { margin-bottom: 14px; }
.bp-pick { max-width: 260px; }
.bp-unclaimed { margin-bottom: 14px; }
.bp-unclaimed summary { cursor: pointer; list-style: revert; }
.bp-unclaimed summary h4 { display: inline; margin: 0; }
.bp-tiktok { margin-top: 4px; }
/* The brand's TikTok Shop panel: the first thing on Shops, so connecting is never hunted for. */
.bp-tt { margin-bottom: 18px; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.bp-tt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.bp-tt-head h4 { margin: 0 0 2px; }
.bp-tt-head p { margin: 0; }
.bp-tt .hint { margin-top: 8px; max-width: 620px; }
.bp-tt-store { padding: 10px 0; border-top: 1px solid var(--border); }
.bp-tt-store .btn { margin-top: 6px; }
.bp-shops-head h4 { margin: 0 0 2px; }
.bp-shops-head .btn, .bp-tt-head .chip { flex: none; white-space: nowrap; }
/* Brands: a row opens its brand. */
.brands-table tr.brand-row { cursor: pointer; }
/* Onboard a brand: the TikTok Shop switch stands out from the brand's own fields. */
.ob-tt { margin-top: 14px; padding: 12px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ob-tt label.switch-row { margin: 0; border: 0; padding: 0; background: none; }
.ob-tt-more { margin-top: 10px; }
.ob-tt-more .hint { margin-top: 6px; }
.brands-table tr.brand-row:hover td { background: var(--bg); }
.bp-tiktok .chip { margin-right: 6px; }
.bp-tiktok .tt-inbox { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
@media (max-width: 640px) { .bp-shops-head { flex-direction: column; } }
/* section label inside the brand-defaults modal */
.dsec { margin: 16px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700; }

/* Creator assets (FB-10) */
#creator-assets { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; }
.ca-uprow { display: flex; gap: 8px; align-items: center; margin: 8px 0 12px; }
.ca-uprow .input { flex: 1; }
.ca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.ca-card { position: relative; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; background: var(--surface); }
.ca-thumb { display: grid; place-items: center; height: 84px; background: var(--bg);
  color: var(--muted); text-decoration: none; }
.ca-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ca-ic { font-size: 26px; }
.ca-body { padding: 8px 10px; display: grid; gap: 4px; }
.ca-name { font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none;
  word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.ca-name:hover { color: var(--accent); }
.ca-meta { display: flex; gap: 8px; align-items: center; }
.ca-type { font-family: -apple-system, sans-serif; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 5px; }
.ca-size { font-size: 10.5px; color: var(--muted); }
.ca-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; font-size: 14px; line-height: 1;
  display: grid; place-items: center; }
.ca-x:hover { background: var(--bad); }

/* Roster at scale (FB-07) + content list (FB-09) */
.cbx-col { width: 34px; text-align: center; }
.pool-table th.cbx-col, .pool-table td.cbx-col { padding-left: 8px; padding-right: 4px; }
.pool-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.pool-sort select { text-transform: none; letter-spacing: 0; width: auto; }
.bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px;
  padding: 8px 12px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* display:flex overrides the UA's [hidden]{display:none} — the same trap as
   .pane[hidden] above. Without this, an empty selection leaves a blank outlined
   strip sitting above the table (true on the roster's bar since it shipped). */
.bulkbar[hidden] { display: none; }
.bulk-count { font-weight: 600; color: var(--text); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.btn.danger:hover { background: color-mix(in srgb, var(--bad) 10%, transparent); }
.cprog { display: flex; align-items: center; gap: 8px; }
.cbar { width: 92px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; flex: 0 0 auto; }
.cbar i { display: block; height: 100%; background: var(--accent); }
.cprog-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.cs-completed { color: var(--good); }
.chip.cs-active { color: var(--accent); }
.chip.cs-declined, .chip.cs-dropped { color: var(--muted); }

/* ── Brand approval panel (views/campaign/brand-review.js) ─────────────────── */
.brand-panel { margin-bottom: 14px; }
.brand-panel h4 { margin-top: 0; }
.brand-panel .warn-text { color: var(--bad); }
.brand-questions { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.brand-q { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.brand-q blockquote { margin: 6px 0 8px; padding-left: 10px; border-left: 3px solid var(--border); white-space: pre-wrap; }
.brand-q textarea { width: 100%; margin: 4px 0 6px; }
.brand-links details { margin-top: 4px; }
.brand-items { margin: 6px 0 0; padding-left: 18px; }

/* ── Automatic offers (campaign/creators.js, flows.js, offer-ui.js, views/offers.js) ── */
/* A fee a manager set by hand — on the Offers board and on the pool row. */
.chip.fee-custom { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
/* Why a pool row has no offer yet: "Goes out at launch", "Waiting for the brand". */
.hold-why { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
/* Add creators: what adding them will do, before anyone is added. */
.offer-line { margin: 2px 0 12px; font-size: 13px; }
.custom-fee { margin: 0 0 12px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius); }
.custom-fee .grid-2 { margin-top: 8px; }
.custom-fee .hint { margin-top: 4px; }
.hint.cf-standard { margin: 4px 0 12px; }
/* Add creators / Put back once the reply-by date has passed (campaign/late-add.js). */
.late-add { margin: 2px 0 12px; }
.late-add p { margin: 0 0 8px; }
.late-add .chk { margin: 4px 0; }
.late-add .late-dates { margin: 4px 0 6px 22px; }
.late-add .late-dates label { margin: 0; }
/* .wz-note input pins width:auto, which puts each date beside its label. */
.late-add .late-dates .input { width: 100%; margin: 3px 0 0; }
.late-add .hint { margin: 0 0 6px 22px; }
/* .grid-2 and .wz-note set display, which overrides the UA's [hidden] — the
   .pane[hidden] trap again: the custom-fee fields and its warning showed unticked. */
.late-add [hidden], .custom-fee [hidden] { display: none; }
/* Remove from campaign (campaign/removal.js): the polite message, as the applicant will read it. */
.rm-tell { margin-top: 10px; }
.rm-preview { margin: 6px 0 4px; padding: 8px 12px; border-left: 3px solid var(--accent); border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 13px; display: grid; gap: 4px; }
.rm-p-title { font-weight: 600; }

/* ── Broadcasts › LINE menu (views/line-menu.js) ─────────────────────────── */
.lm { display: grid; gap: 12px; }
.lm-head { display: flex; align-items: center; gap: 10px; }
.lm-head h2 { margin: 0; font-size: 17px; }
.lm p { margin: 0; max-width: 820px; }
.lm-status { font-size: 13px; padding: 9px 11px; border-radius: 8px; border: 1px solid; }
.lm-status.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }
.lm-status.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.lm-status.bad  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 45%, transparent);  background: color-mix(in srgb, var(--bad) 10%, transparent); }
.lm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lm-grid figure { margin: 0; display: grid; gap: 8px; align-content: start; }
.lm-grid figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lm-canvas { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); line-height: 0; }
.lm-canvas canvas { width: 100%; height: auto; display: block; }
.lm-hits { position: absolute; inset: 0; }
.lm-hit { position: absolute; margin: 0; padding: 0; background: transparent; border: 2px solid transparent; cursor: pointer; }
.lm-hit:hover, .lm-hit:focus-visible { border-color: rgba(255,255,255,.55); outline: none; }
.lm-hit.on { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.lm-pic { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lm-pic-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.lm-editor { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.lm-editor-head { display: flex; align-items: baseline; gap: 10px; }
.lm-editor-head .btn { margin-left: auto; }
.lm-opens { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.lm-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.lm-field { display: grid; gap: 5px; font-size: 13px; margin: 0; }
.lm-campaign, .lm-targets { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.lm-campaign { flex-direction: column; align-items: flex-start; }
.lm-actions { display: grid; gap: 10px; }
.lm-buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .lm-grid { grid-template-columns: 1fr; } }

/* ══ Payments — payment details (views/payments.js, views/payee-panel.js) ════
   The chip every staff role sees; the panel only finance + admin open.
   warn = being checked, good = verified, bad = needs a fix, muted = missing. */
.chip.pay-missing   { color: var(--muted); }
.chip.pay-submitted { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.chip.pay-verified  { color: var(--good); border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.chip.pay-needs_fix { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.pay-n { color: var(--muted); font-size: 12px; margin-left: 4px; }
/* The details on the left, the documents beside them (views/doc-viewer.js), the
   verdict across the bottom. A document never leaves the panel (owner, 5 Oct). */
.modal.pay-panel { width: min(1240px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.pay-split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.pay-main { min-width: 0; }
.pay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pay-name { font-size: 18px; font-weight: 700; }
.pay-head p { margin: 2px 0 0; }
.pay-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pay-kv span { overflow-wrap: anywhere; }
.pay-split .pay-kv, .pay-split .pay-edit { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pay-split .pay-kv > div, .pay-split .pay-edit > label { padding: 5px 8px; border-radius: 6px; }
/* The details the open document proves. */
.pay-main .pv-lit { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
/* "Show" sits right after a masked number, where finance looks for it (owner, 7 Oct). */
.pay-show { margin-left: 8px; padding: 1px 9px; border-radius: 999px; vertical-align: 1px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: none;
  color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
.pay-show:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pay-show:disabled { opacity: .5; cursor: default; }
.pay-foot { margin-top: 16px; border-top: 1px solid var(--border); }
.pay-foot .pay-fixbar { margin-top: 0; border-top: 0; }

.pay-viewer { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pv-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); }
.pv-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 7px 12px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.pv-tab:hover { color: var(--text); }
.pv-tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.pv-missing { color: var(--bad); font-size: 11px; font-weight: 400; margin-left: 4px; }
.pv-check, .pv-hint { margin: 0; font-size: 12px; color: var(--muted); }
.pv-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.pv-meta { font-size: 12px; color: var(--muted); }
.pv-copy { width: auto; max-width: 100%; padding: 4px 8px; font-size: 12px; }
.pv-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.pv-tools[hidden] { display: none; }
.pv-tools[hidden] + .pv-up { margin-left: auto; }
.pv-btn { min-width: 30px; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.pv-btn:hover { border-color: var(--accent); }
.pv-zoom { min-width: 38px; text-align: center; font-size: 12px; color: var(--muted); }
/* `label` is a block form row everywhere else; the upload button sits inline. */
.pv-up { display: inline-block; width: auto; margin: 0; }
.pv-stage { display: flex; overflow: auto; height: min(64vh, 680px); background: #0b0e12;
  border: 1px solid var(--border); border-radius: 8px; cursor: zoom-in; user-select: none; }
.pv-stage.zoomed { cursor: grab; touch-action: none; }
.pv-stage.zoomed:active { cursor: grabbing; }
/* margin:auto centres a fitted page and still lets a zoomed one scroll from its edge. */
.pv-box { position: relative; flex: none; margin: auto; }
.pv-img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; }
.pv-pdf { width: 100%; height: 100%; border: 0; background: #fff; }
.pv-msg { margin: auto; padding: 20px; color: var(--muted); text-align: center; cursor: default; }
@media (max-width: 960px) {
  .pay-split { grid-template-columns: minmax(0, 1fr); }
  .pv-stage { height: 60vh; }
}
.pay-verdict { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  margin-top: 16px; }
.pay-why { margin-right: auto; }
.pay-err { display: block; color: var(--bad); font-size: 12px; margin-top: 2px; }
.pay-vat { display: flex; align-items: center; gap: 6px; align-self: end; }
.pay-vat[hidden] { display: none; }
/* Edit and Needs-a-fix happen IN the panel (owner, 3 Oct): the details become inputs
   where they stood, and the reason opens in the footer — no second dialog. */
.pay-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 14px 0; }
.pay-edit label { margin: 0; }
.pay-fixbar { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.pay-fixrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* reasons are long: full width */
.pay-fixrow label { margin: 0; }
@media (max-width: 700px) {
  .pay-edit, .pay-kv { grid-template-columns: 1fr; }
}

/* ══ Payables (views/payable-panel.js, campaign/payables.js, Payments › Payables) ═
   Phase B of docs/prd-payments.md. The stage chip says what a payable waits for:
   bad = a person must decide (missed post, hold), warn = waiting on someone,
   accent = ready to pay, good = paid. */
.chip.pb-check   { color: var(--bad);    border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.chip.pb-draft   { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.chip.pb-details { color: var(--warn);   border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.chip.pb-hold    { color: var(--bad);    border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.chip.pb-ready   { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.chip.pb-paid    { color: var(--good);   border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.chip.pb-void    { color: var(--muted);  text-decoration: line-through; }
.pb-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pb-panel { max-height: calc(100vh - 40px); overflow-y: auto; }
.pb-lines { margin-top: 12px; }
.pb-lines td { vertical-align: middle; }
.pb-lines tr.pb-deduction .mono { color: var(--bad); }
.pb-lines tr.pb-bonus .mono { color: var(--good); }
.pb-lines tr.pb-total td { font-weight: 700; border-top: 2px solid var(--border); }
.pb-delivery { margin: 12px 0; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: color-mix(in srgb, var(--muted) 10%, transparent); }
.pb-delivery.needed { background: color-mix(in srgb, var(--bad) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); }
.pb-missed { margin: 6px 0 0; padding-left: 18px; }
.pb-adjust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pb-adjust label { margin: 0; }
.pb-adjust .pb-wide { grid-column: 1 / -1; }
.pb-manual { margin: 0 0 14px; }
.pay-sections { margin-bottom: 10px; }
@media (max-width: 700px) {
  .pb-adjust { grid-template-columns: 1fr; }
}

/* Samples in campaign setup (campaign/samples-setup.js, docs/prd-samples.md §7.1). */
.samples-setup { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.sample-list[hidden] { display: none; }
.sample-row { padding: 10px 0; border-top: 1px solid var(--border); }
.sample-list .hint + .sample-row { border-top: 0; }
.sample-pick { font-weight: 600; }
.sample-row .sample-fields { margin-top: 6px; }
.sample-row:not(.on) .sample-fields { display: none; }

/* The emoji button beside a message box, and its picker (js/staff/emoji.js). The
   picker sits on the page's body, fixed, so no pane's overflow clips it. */
.emoji-btn { background: none; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 18px; line-height: 1;
  padding: 4px 6px; cursor: pointer; }
.emoji-btn:hover, .emoji-btn[aria-expanded="true"] { background: var(--bg); border-color: var(--border); color: var(--text); }
.emoji-pop { position: fixed; z-index: 1000; width: 308px; max-width: calc(100vw - 16px); max-height: 340px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 8px 10px 10px; }
.emoji-sec + .emoji-sec { margin-top: 6px; }
.emoji-h { font-size: 11px; color: var(--muted); margin: 4px 2px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji-pick { background: none; border: 0; border-radius: 6px; font-size: 21px; line-height: 1; padding: 5px 0; cursor: pointer; }
.emoji-pick:hover, .emoji-pick:focus-visible { background: var(--bg); outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.emoji-tip { font-size: 11px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
/* A TikTok store's shop code (brand-page-logic.js codeCellHtml) */
.bp-code { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bp-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.bp-copy { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.bp-copy:hover, .bp-copy:focus-visible { color: var(--text); background: color-mix(in srgb, var(--border) 60%, transparent); }
.bp-i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.btn.bp-code-add { border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--border)); color: var(--accent); white-space: nowrap; }
.bp-code-form { display: flex; flex-direction: column; gap: 4px; }
.bp-code-row { display: flex; align-items: center; gap: 6px; }
.bp-code-in { width: 130px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
/* CREA's contact on TikTok partner campaigns, in Team's partner card (views/partner-contact.js) */
.ptc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ptc-h { margin: 0 0 2px; }
.ptc .muted.small { margin: 0 0 8px; }
.ptc-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 10px; font-size: 14px; }
.ptc-facts dt { color: var(--muted); }
.ptc-facts dd { margin: 0; }
.ptc-warn { color: var(--warn); }
.ptc-form { margin-bottom: 6px; }
.ptc-acts { display: flex; align-items: center; gap: 10px; margin-top: 8px; }