/* ============================================================================
   Ionix Creative Studio — flat product UI
   Matched to the Auréa Aesthetics reference: warm near-white canvas, white
   cards on hairline borders, quiet sidebar with count badges, one big bold
   page title, and near-black as the only strong colour.

   No gradients, no bezels, no drop shadows beyond a 1px lift on raised
   controls. Colour appears only where it carries meaning — status, tinted
   media, the accent dot per client.

   Class names are unchanged from earlier skins, so app.js is untouched.
   ========================================================================= */

:root {
  --bg: #F7F7F5;          /* warm off-white canvas */
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --sunken: #F1F1EF;      /* segmented-control troughs, inputs */

  --line: #E7E7E3;        /* the hairline everything is drawn with */
  --line-2: #DCDCD7;

  --ink: #1A1A18;
  --muted: #6E6E68;
  --dim: #9A9A93;

  --good: #2F8C63;
  --bad: #C0463C;
  --warn: #B07A18;
  --live: #2E93A8;
  --violet: #6F5BD0;

  /* Per-client accent: dots, tints and focus rings. Never body text — a
     mid-tone brand colour on near-white lands around 1.2–2.4:1. */
  --acc: #1A1A18;
  --acc-soft: color-mix(in srgb, var(--acc) 9%, transparent);
  --acc-line: color-mix(in srgb, var(--acc) 30%, transparent);

  --rail: 268px;
  --insp: 344px;
  --r: 12px;
  --r-lg: 14px;

  --font: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) 0;
  transition: grid-template-columns .2s ease;
  overflow: hidden;
}
body.inspOpen { grid-template-columns: var(--rail) minmax(0, 1fr) var(--insp); }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D6D6D1; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #C2C2BC; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── sidebar ────────────────────────────────────────────────────────────── */

.rail {
  background: var(--bg);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 16px 16px 14px; }
.mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 600; font-size: 12px; letter-spacing: .01em;
  background: var(--ink); color: #fff;
}
.bt { font-weight: 550; font-size: 14.5px; letter-spacing: -.015em; }
.bs { font-size: 10.5px; color: var(--dim); margin-top: 1px; font-family: var(--mono); }
.bs.live { color: var(--live); }

.railScroll { flex: 1; overflow-y: auto; padding: 6px 10px 8px; min-height: 0; }
.secHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 8px 6px; font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim); font-weight: 600;
}
/* The rail's client list and its filter box are gone — which client you are in
   is the switcher at the top of the rail (.bx·, near the end of this file).
   Their rules went with them; .dot and .threadRow are what the pair shared. */

.threads { display: flex; flex-direction: column; gap: 1px; }
.threadRow, .navItem {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; text-align: left;
  color: var(--muted); font-size: 13.5px;
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.threadRow:hover, .navItem:hover { background: #EFEFEC; color: var(--ink); }
.threadRow[aria-current="true"], .navItem[aria-current="true"] {
  background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 550;
}
.dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.threadRow .ct { font-size: 11.5px; color: var(--dim); flex: none; font-variant-numeric: tabular-nums; }

.threadRow { font-size: 13px; }
.threadRow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.railHint { padding: 2px 10px 8px; font-size: 12px; color: var(--dim); }

.navList { display: flex; flex-direction: column; gap: 1px; }
.navItem i { font-style: normal; width: 16px; text-align: center; font-size: 13px; color: var(--dim); }
.navItem[aria-current="true"] i { color: var(--ink); }
.badge {
  margin-left: auto; background: var(--live); color: #fff; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 99px; font-variant-numeric: tabular-nums;
}

.railFoot { padding: 10px 12px 12px; }
.whoami { margin-top: 8px; }
.me {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 10px; text-align: left; background: var(--surface); border: 1px solid var(--line);
  transition: border-color .12s ease;
}
.me:hover { border-color: var(--line-2); }
.av {
  width: 26px; height: 26px; border-radius: 99px; flex: none; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #fff; background: var(--violet);
}
.av.sm { width: 30px; height: 30px; font-size: 12.5px; }
.me .who { min-width: 0; line-height: 1.35; }
.me .who .n { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .who .r { display: block; font-size: 11px; color: var(--dim); }

.health { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.hchip {
  font-size: 10px; font-family: var(--mono); padding: 2px 7px; border-radius: 6px;
  color: var(--dim); background: var(--surface); border: 1px solid var(--line);
}
.hchip.ok { color: var(--good); }
.hchip.no { color: var(--bad); }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px; height: 34px; border-radius: 9px;
  font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 1px rgba(20, 20, 16, .03);
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: #FBFBFA; border-color: var(--line-2); }
.btn:active { background: #F4F4F2; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500; }
.btn.primary:hover { background: #2C2C28; border-color: #2C2C28; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
.btn.ghost:hover { background: #EFEFEC; color: var(--ink); }
.btn.danger { color: var(--bad); border-color: var(--line); }
.btn.danger:hover { background: #FDF5F4; border-color: #E9CBC8; }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn.block { width: 100%; }

.mini {
  width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 14px; line-height: 1; color: var(--dim); padding: 0;
}
.mini:hover { background: #EFEFEC; color: var(--ink); }

/* ── main ───────────────────────────────────────────────────────────────── */

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 20px 26px 16px; background: var(--bg);
}
/* One line, clipped with an ellipsis. The channel tabs sit immediately to the
   right of it, so a title allowed to overflow its box paints straight through
   them — which is exactly what a long chat title did. */
.top h1 { margin: 0; font-size: 27px; font-weight: 650; letter-spacing: -.035em; line-height: 1.1;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One line, always: the channel tabs now share this row, so a client name that
   wraps would push the title down and shove the tabs out of alignment. */
.crumb { font-size: 12.5px; color: var(--dim); margin-bottom: 5px; order: -1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topL { display: flex; flex-direction: column; min-width: 0; }
.topR { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.stage { flex: 1; overflow-y: auto; padding: 4px 26px 60px; min-height: 0; }

/* ── command palette ────────────────────────────────────────────────────── */

.topMid { flex: 1; display: flex; justify-content: center; max-width: 420px; }
.palTrigger {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 12px;
  border-radius: 9px; background: var(--surface); border: 1px solid var(--line);
  color: var(--dim); font-size: 13px; transition: border-color .12s ease;
}
.palTrigger:hover { border-color: var(--line-2); }
.palTrigger .t { flex: 1; text-align: left; }
.palIcon { font-size: 14px; color: var(--dim); }
.kbd {
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  background: var(--sunken); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}

.pal { position: fixed; inset: 0; z-index: 85; display: grid; place-items: start center; padding: 12vh 24px 24px; }
.palBack { position: absolute; inset: 0; background: rgba(26, 26, 24, .28); }
.palBox {
  position: relative; width: min(620px, 100%); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px -16px rgba(20, 20, 16, .3);
}
.palIn { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.palIn input { flex: 1; border: 0; outline: none; font-size: 15px; background: none; color: var(--ink); }
.palIn input::placeholder { color: var(--dim); }
.palHint { font-family: var(--mono); font-size: 10.5px; color: var(--dim); background: var(--sunken); border-radius: 5px; padding: 2px 6px; }

.palList { max-height: 54vh; overflow-y: auto; padding: 6px; }
.palGroup { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); font-weight: 600; padding: 10px 10px 5px; }
.palRow {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 8px; text-align: left; font-size: 13.5px; color: var(--ink);
}
.palRow[aria-selected="true"] { background: var(--sunken); }
.palRowIcon { width: 18px; text-align: center; color: var(--dim); font-size: 12px; flex: none; }
.palRowT { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palRowH { margin-left: auto; font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palEmpty { padding: 22px 12px; text-align: center; color: var(--dim); font-size: 13px; }

/* ── filters ────────────────────────────────────────────────────────────── */

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: flex; padding: 3px; border-radius: 10px; background: var(--sunken); }
.seg button {
  padding: 5px 12px; border-radius: 7px; font-size: 12.5px; color: var(--muted);
  border: 1px solid transparent; transition: .12s ease;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] {
  color: var(--ink); font-weight: 550; background: var(--surface);
  border-color: var(--line); box-shadow: 0 1px 2px rgba(20, 20, 16, .05);
}
.fInput {
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); min-width: 180px;
}
.fInput::placeholder { color: var(--dim); }
.fInput:focus { outline: none; border-color: var(--line-2); }
select.fInput { min-width: 0; padding-right: 8px; }

/* ── gallery ────────────────────────────────────────────────────────────── */

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

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .12s ease, box-shadow .12s ease;
}
.card:hover { border-color: var(--line-2); box-shadow: 0 2px 6px rgba(20, 20, 16, .05); }
.card[data-sel="true"] { border-color: var(--ink); }
/* Media wells stay dark: a creative has to be judged against neutral. */
.card .shot { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #1A1A18; cursor: zoom-in; }
.card .shot img, .card .shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .shot .miss { display: grid; place-items: center; height: 100%; color: rgba(255,255,255,.38); font-size: 11px; font-family: var(--mono); }
.card .pill {
  position: absolute; top: 8px; left: 8px; font-size: 10px; font-family: var(--mono);
  padding: 2px 7px; border-radius: 6px; color: var(--ink); background: rgba(255,255,255,.94);
}
.card .pill.r { left: auto; right: 8px; }
.card .pill.loc { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.card .play span {
  width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center;
  color: var(--ink); font-size: 13px; padding-left: 3px; background: rgba(255,255,255,.94);
}
.card .meta { padding: 11px 12px 12px; }
.card .t { font-size: 13px; font-weight: 550; letter-spacing: -.015em; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .s { font-size: 11.5px; color: var(--dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .perf {
  margin-top: 9px; font-size: 11px; line-height: 1.4; color: var(--muted);
  padding: 5px 8px; border-radius: 8px; background: var(--sunken);
  font-variant-numeric: tabular-nums;
}
.card .perf.win { color: var(--good); background: #EDF7F2; }
.card .perf.lose { color: var(--bad); background: #FCF1F0; }
.card .perf.thin { color: var(--dim); }
.card[data-grade="winner"] { border-color: #BFE0CF; }

.card .acts { display: flex; gap: 6px; margin-top: 10px; }
.tick {
  flex: 1; border-radius: 8px; padding: 6px 0; font-size: 12px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); transition: .12s ease;
}
.tick:hover { background: #FBFBFA; color: var(--ink); }
.tick.yes[data-on="true"] { color: #fff; background: var(--good); border-color: var(--good); font-weight: 550; }
.tick.no[data-on="true"] { color: #fff; background: var(--bad); border-color: var(--bad); font-weight: 550; }
.star { flex: none; width: 32px; }
.star[data-on="true"] { color: var(--warn); border-color: #E8D5AE; background: #FDF8EE; }

/* ── surfaces ───────────────────────────────────────────────────────────── */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.panel + .panel { margin-top: 14px; }
.panel h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.panel .hint { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; line-height: 1.6; }

.empty { text-align: center; padding: 72px 20px; color: var(--muted); }
.empty .big { font-size: 30px; margin-bottom: 12px; color: var(--dim); }
.empty p { margin: 0 0 18px; font-size: 13.5px; max-width: 460px; margin-inline: auto; line-height: 1.65; }
.empty strong { color: var(--ink); }

.rows { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  text-align: left; transition: border-color .12s ease;
}
.row:hover { border-color: var(--line-2); }
.row .g { flex: 1; min-width: 0; }
.row .n { display: block; font-size: 13px; font-weight: 550; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .d { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; line-height: 1.5; }
.row .d.wrap { white-space: normal; }

/* Stat tiles — micro uppercase label over a value, exactly as in the reference. */
.stat {
  font-size: 11px; padding: 3px 9px; border-radius: 7px; color: var(--muted); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.stat.run { color: var(--live); border-color: #BFDFE6; background: #F0F8FA; }
.stat.done { color: var(--good); border-color: #BFE0CF; background: #F1F9F5; }
.stat.fail { color: var(--bad); border-color: #E9CBC8; background: #FDF5F4; }
.stat.queued { color: var(--warn); border-color: #E8D5AE; background: #FDF8EE; }
.stat.acc { color: var(--ink); }

/* ── forms ──────────────────────────────────────────────────────────────── */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.field .sub { font-size: 11.5px; color: var(--dim); margin-top: 5px; line-height: 1.5; }
.inp {
  width: 100%; padding: 9px 12px; border-radius: 9px; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
}
.inp:focus { outline: none; border-color: var(--ink); }
.inp::placeholder { color: var(--dim); }
textarea.inp { resize: vertical; min-height: 86px; line-height: 1.6; }
textarea.code { font-family: var(--mono); font-size: 11.5px; line-height: 1.65; min-height: 420px; background: var(--sunken); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 11px; border-radius: 99px; font-size: 12.5px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); transition: .12s ease;
}
.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip[aria-pressed="true"] { color: var(--ink); font-weight: 550; border-color: var(--ink); }
.swatch { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: none; }

.switch { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); cursor: pointer; flex: none; }
.switch input {
  appearance: none; width: 40px; height: 23px; border-radius: 99px; position: relative; cursor: pointer;
  background: #D9D9D4; transition: background .16s ease;
}
.switch input::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 99px;
  background: #fff; box-shadow: 0 1px 2px rgba(20,20,16,.2); transition: transform .16s ease;
}
.switch input:checked { background: var(--ink); }
.switch input:checked::after { transform: translateX(17px); }

/* ── billing ────────────────────────────────────────────────────────────── */

.planHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.planName { font-size: 17px; font-weight: 600; letter-spacing: -.025em; display: flex; align-items: center; gap: 9px; }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.meter { }
.meterHead { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
.meterHead b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.meterHead b.over { color: var(--bad); }
.meterBar { height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.meterBar i { display: block; height: 100%; background: var(--ink); border-radius: 99px; transition: width .3s ease; }
.meterBar i.over { background: var(--bad); }
.meterNote { font-size: 11.5px; color: var(--dim); }

/* ── API keys ───────────────────────────────────────────────────────────── */

.brokerBox { border: 1px solid var(--line); border-radius: var(--r); background: var(--sunken); padding: 14px 15px; margin-bottom: 14px; }
.brokerHead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.brokerHead .n { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.brokerCols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.brokerCols label { display: block; font-size: 11px; color: var(--dim); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }

.keyList { display: flex; flex-direction: column; gap: 10px; }
.keyRow { padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.keyHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.keyName { font-size: 13.5px; font-weight: 550; letter-spacing: -.015em; }
.keyId { color: var(--dim); font-weight: 400; margin-left: 8px; font-size: 11px; }
.keyState {
  font-size: 11.5px; color: var(--dim); font-family: var(--mono); white-space: nowrap;
  max-width: 46%; overflow: hidden; text-overflow: ellipsis;
}
.keyState.on { color: var(--muted); }
.keyState.ok { color: var(--good); }
.keyState.bad { color: var(--bad); white-space: normal; }
.keyIn { display: flex; gap: 7px; align-items: center; }
.keyIn .inp { flex: 1; }
.keyRow .sub { font-size: 11.5px; color: var(--dim); margin-top: 8px; line-height: 1.5; }

/* ── inspector ──────────────────────────────────────────────────────────── */

.inspector { background: var(--bg); border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
body:not(.inspOpen) .inspector { display: none; }
.inspHead { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.inspBody { flex: 1; overflow-y: auto; padding: 15px 16px 40px; min-height: 0; }
.inspShot { border-radius: var(--r); overflow: hidden; background: #1A1A18; border: 1px solid var(--line); margin-bottom: 14px; }
.inspShot img, .inspShot video { width: 100%; display: block; }
.kv { display: grid; grid-template-columns: 88px 1fr; gap: 6px 10px; font-size: 12px; margin-bottom: 14px; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; color: var(--ink); word-break: break-word; font-family: var(--mono); font-size: 11px; }

/* ── job console ────────────────────────────────────────────────────────── */

.console {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--sunken);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  padding: 12px 14px; height: 100%; min-height: 260px; overflow-y: auto;
}
.console.tall { height: calc(100vh - 268px); }
.ln { display: flex; gap: 9px; padding: 1.5px 0; }
.ln .tag { flex: none; width: 62px; color: var(--dim); font-size: 10px; padding-top: 2px; text-align: right; }
.ln .tx { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; color: var(--muted); }
.ln.tool .tag, .ln.tool .tx { color: var(--live); }
.ln.text .tx { color: var(--ink); }
.ln.err .tag, .ln.err .tx { color: var(--bad); }
.ln.status .tag, .ln.status .tx { color: var(--ink); }
.ln.result .tx { color: var(--good); }
.ln.tres .tx { color: var(--dim); }

.pulse { display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: var(--live); animation: p 1.2s ease-in-out infinite; }
@keyframes p { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

/* ── chat ───────────────────────────────────────────────────────────────── */

body[data-view="chat"] .stage { padding: 0; overflow: hidden; }
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.stream { flex: 1; overflow-y: auto; padding: 20px 26px 8px; min-height: 0; }
.stream > * { max-width: 780px; margin-inline: auto; }

.chatIntro { padding: 32px 4px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.chatIntro em { color: var(--ink); font-style: normal; }
.chatIntro p { margin: 0 0 12px; }

.bubble { margin-bottom: 22px; }
.bubble .bd { font-size: 14px; line-height: 1.65; }
.bubble .bd p { margin: 0 0 10px; }
.bubble .bd p:last-child { margin-bottom: 0; }
.bubble .bd ul { margin: 6px 0 10px; padding-left: 20px; }
.bubble .bd li { margin-bottom: 4px; }
.bubble .bd h4 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.bubble .bd code { background: var(--sunken); padding: 1px 5px; border-radius: 5px; font-family: var(--mono); font-size: 11.5px; }
.bubble .bd pre { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; }
.bubble .bd.err { color: var(--bad); }
.bubble.user .bd {
  padding: 11px 14px; border-radius: var(--r-lg); margin-left: auto; width: fit-content; max-width: 88%;
  white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line);
}
.bubble.assistant .who { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.bubble.assistant .who .stopBtn { margin-left: auto; }
.bubble.assistant.failed { border-left: 2px solid var(--bad); padding-left: 13px; }
.bubble .mline { font-size: 11px; color: var(--dim); margin-top: 10px; }
.bubble .mline a { color: var(--dim); }
.bubble .mline a:hover { color: var(--ink); }

.live { border-left: 2px solid var(--line-2); padding-left: 13px; font-family: var(--mono); font-size: 11px; color: var(--dim); line-height: 1.7; }
.liveLn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liveLn .tn { color: var(--live); }

.inlineGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; align-items: start; }
.ic { margin: 0; border-radius: var(--r); overflow: hidden; background: #1A1A18; border: 1px solid var(--line); cursor: zoom-in; transition: border-color .12s ease; }
.ic:hover { border-color: var(--line-2); }
.ic img, .ic video { display: block; width: 100%; height: auto; }
.ic figcaption { padding: 8px 10px; font-size: 11.5px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; background: var(--surface); color: var(--ink); }
.ic figcaption span { color: var(--dim); font-size: 10px; flex: none; }

.composer { border-top: 1px solid var(--line); padding: 12px 26px 16px; background: var(--bg); }
.composer > * { max-width: 780px; margin-inline: auto; }
.compTools { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
.compRefs { font-size: 11.5px; color: var(--muted); }
.compRow { display: flex; gap: 9px; align-items: flex-end; }
.compRow textarea {
  flex: 1; resize: none; border-radius: var(--r); padding: 11px 14px; font-size: 14px; line-height: 1.55;
  max-height: 220px; overflow-y: auto; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
}
.compRow textarea:focus { outline: none; border-color: var(--ink); }
.compRow .send { height: 42px; border-radius: var(--r); padding: 0 20px; }
.compHint { display: flex; gap: 10px; font-size: 11px; color: var(--dim); margin-top: 8px; }

/* ── modal + dialog ─────────────────────────────────────────────────────── */

.modalWrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.modalBack { position: absolute; inset: 0; background: rgba(26, 26, 24, .28); }
.modal {
  position: relative; width: min(720px, 100%); max-height: 88vh; overflow-y: auto;
  border-radius: 16px; padding: 22px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 12px 40px -12px rgba(20, 20, 16, .22);
}
.modal.wide { width: min(1080px, 100%); }
.modal h2 { margin: 0 0 5px; font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.modal .lead { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; line-height: 1.6; }
.modalFoot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

.dlgWrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; }
.dlg {
  position: relative; width: min(430px, 100%); border-radius: 16px; padding: 20px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 16px 48px -12px rgba(20, 20, 16, .3);
}
.dlg h2 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; }
.dlg .lead { color: var(--muted); font-size: 12.5px; margin: 0; line-height: 1.6; }
.dlg .modalFoot { margin-top: 18px; }

/* ── lightbox ───────────────────────────────────────────────────────────── */

.lb { position: fixed; inset: 0; z-index: 80; background: rgba(20, 20, 18, .9); display: flex; align-items: center; justify-content: center; }
.lbStage { max-width: 90vw; max-height: 82vh; display: grid; place-items: center; }
.lbStage img, .lbStage video { max-width: 90vw; max-height: 82vh; border-radius: 10px; display: block; }
.lbClose, .lbNav { position: absolute; color: var(--ink); border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.lbClose { top: 18px; right: 20px; width: 34px; height: 34px; }
.lbNav { top: 50%; transform: translateY(-50%); width: 42px; height: 42px; font-size: 19px; line-height: 1; }
.lbNav.prev { left: 20px; } .lbNav.next { right: 20px; }
.lbBar { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 8px 15px; border-radius: 99px; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); }
.lbBar .m { color: var(--dim); font-size: 11px; }

/* ── toasts ─────────────────────────────────────────────────────────────── */

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast {
  border-radius: var(--r); padding: 11px 15px; font-size: 13px; max-width: 380px; line-height: 1.55;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 20px -8px rgba(20, 20, 16, .2);
  animation: tin .18s ease;
}
.toast.good { border-color: #BFE0CF; }
.toast.bad { border-color: #E9CBC8; }
@keyframes tin { from { opacity: 0; transform: translateY(6px) } }

/* ── misc ───────────────────────────────────────────────────────────────── */

.note { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.warnBox { border-radius: var(--r); padding: 11px 13px; font-size: 12.5px; color: #7A5A14; line-height: 1.6; background: #FDF8EE; border: 1px solid #EFE0BE; }
.flagBox { border-radius: var(--r); padding: 10px 12px; font-size: 12.5px; color: #7A5A14; margin-top: 11px; line-height: 1.55; background: #FDF8EE; border: 1px solid #EFE0BE; }
.flagBox ul { margin: 6px 0 0; padding-left: 18px; }
.flagBox li { margin-bottom: 3px; }
.mono { font-family: var(--mono); font-size: 11.5px; }
.sep { height: 1px; background: var(--line); margin: 16px 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 15px; }
.tabs button { border-bottom: 2px solid transparent; padding: 9px 12px; color: var(--muted); font-size: 13px; }
.tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 550; }
.split { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 16px; align-items: start; }
.scrollList { max-height: calc(100vh - 214px); overflow-y: auto; padding-right: 4px; }

@media (max-width: 1180px) {
  body { grid-template-columns: 62px minmax(0, 1fr) 0; }
  body.inspOpen { grid-template-columns: 62px minmax(0, 1fr) var(--insp); }
  .rail .bt, .rail .bs, .navItem span:not(.badge),
  .secHead, .railFoot .btn, .health, .threads, .railHint, .whoami { display: none; }
  .navItem { justify-content: center; }
  /* The rail collapses, so ⌘K becomes the main way to navigate — keep it, but
     let it shrink rather than squeeze the page actions out. The channel tabs
     now sit in the same row, so the search gives up width first. */
  .topMid { max-width: 170px; }
  .palTrigger .t, .palTrigger .kbd { display: none; }
}
@media (max-width: 900px) {
  .topMid { display: none; }
}

/* ── storage / retention ─────────────────────────────────────────────────── */
.stList { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stRow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 84px; gap: 12px; align-items: start;
  padding: 12px 13px; border-bottom: 1px solid var(--line); }
.stRow:last-child { border-bottom: 0; }
/* NB: not .empty — that is the global empty-state class (centred, 72px pad).
   A group with nothing in it still earns its row — "nothing to reclaim" is the
   answer people came for. It just shouldn't compete for attention. */
.stRow.quiet { opacity: .55; }
.stLabel { font-size: 13px; font-weight: 550; color: var(--ink); }
.stRow .tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 99px; font-size: 10px;
  font-weight: 600; letter-spacing: .02em; color: var(--muted); background: var(--bg); border: 1px solid var(--line); }
.stFiles { margin-top: 6px; color: var(--dim); line-height: 1.7; word-break: break-all; }
.stSize { text-align: right; font-size: 13px; }
.stFoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 13px; }
.stFoot b { font-size: 15px; }
@media (max-width: 760px) {
  .stRow { grid-template-columns: minmax(0, 1fr) 90px; }
  .stRow > button, .stRow > span:last-child { grid-column: 2; text-align: right; }
}

/* Dialog bodies are HTML-escaped (deliberately — they carry client names and
   file paths), so a multi-line confirm has to keep its newlines in CSS rather
   than by passing <br> through the escaper. */
#dlg .lead { white-space: pre-line; }

/* ── cost & margin ───────────────────────────────────────────────────────── */
.costGrid { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(7, minmax(52px, .7fr));
  gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; font-size: 12.5px; }
.costGrid > div { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.costGrid > div.r { text-align: right; font-variant-numeric: tabular-nums; }
.costHead { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted);
  background: var(--bg); text-transform: uppercase; }
/* The totals row carries the number people quote, so it gets the emphasis. */
.costFoot { font-weight: 600; background: var(--bg); border-bottom: 0 !important; }
@media (max-width: 900px) {
  .costGrid { grid-template-columns: minmax(0,1.4fr) repeat(7, minmax(60px, auto)); min-width: 640px; }
}

/* ── share links ─────────────────────────────────────────────────────────── */
.shList { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.shList > .hint { margin: 0; padding: 14px 13px; }
.shRow { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.shRow:last-child { border-bottom: 0; }
/* NB: its own rule — .quiet alone is scoped to .stRow and would not apply here. */
.shRow.quiet { opacity: .5; }
.shRow > div:first-child { flex: 1; min-width: 0; }
.shLabel { font-size: 13px; font-weight: 550; }
.shNew { margin-top: 14px; padding: 12px 13px; border-radius: var(--r);
  background: #F3F8F4; border: 1px solid #CFE3D5; }
.shUrl { display: flex; gap: 8px; margin-top: 7px; }
.shUrl input { flex: 1; min-width: 0; font-size: 12px; }

/* ── URL onboarding ──────────────────────────────────────────────────────── */
.scanBar { display: flex; align-items: center; gap: 14px; padding: 12px 13px; margin: 14px 0 4px;
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--bg); }
.scanBar > div { flex: 1; }
.scanT { font-size: 13px; font-weight: 550; }
.accRow { display: flex; flex-wrap: wrap; gap: 8px; }
.accPick { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; cursor: pointer; font-size: 12px; }
.accPick input { display: none; }
.accPick:has(input:checked) { border-color: var(--ink); background: var(--bg); }
.accPick .sw { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); flex: none; }
.claimList { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.claimRow { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px;
  border-bottom: 1px solid var(--line); font-size: 12.5px; cursor: pointer; }
.claimRow:last-child { border-bottom: 0; }
.claimRow .sub { display: block; word-break: break-all; }
/* A dense contact sheet: the point is to cull fast, so keep them small. */
.shotPick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px;
  max-height: 260px; overflow-y: auto; padding: 3px; }
.pick { position: relative; cursor: pointer; border-radius: 9px; overflow: hidden; aspect-ratio: 1;
  border: 2px solid transparent; background: var(--bg); }
.pick img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .45; }
.pick input { position: absolute; top: 5px; left: 5px; margin: 0; z-index: 2; }
.pick:has(input:checked) { border-color: var(--ink); }
.pick:has(input:checked) img { opacity: 1; }

/* ── mobile ──────────────────────────────────────────────────────────────────
   Below 760px the rail stops being a column and becomes a drawer. The old
   behaviour — squeeze it to 62px and hide the labels — is right for a laptop
   at 1100px but wrong on a phone: 62px of permanent chrome on a 390px screen
   is 16% of the width spent on icons nobody can read.

   The label rule at 1180px only ever worked once the labels were wrapped in a
   span; before that they overflowed a 62px rail and were clipped mid-word. */

.railToggle { display: none; }
.railScrim { display: none; }

@media (max-width: 760px) {
  /* One column. The rail leaves the grid entirely rather than collapsing. */
  body, body.inspOpen { grid-template-columns: minmax(0, 1fr); }

  .rail {
    position: fixed; inset: 0 auto 0 0; width: min(82vw, 300px); z-index: 60;
    transform: translateX(-100%); transition: transform .22s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 0 0 1px var(--line), 24px 0 48px rgba(0,0,0,.13);
    overflow-y: auto;
  }
  body.railOpen .rail { transform: none; }

  /* Inside the drawer there is room, so put back everything the 1180px rule
     hid. A drawer with no labels would be the worst of both. */
  .rail .bt, .rail .bs, .navItem span:not(.badge),
  .secHead, .railFoot .btn, .health, .whoami { display: revert; }
  .navItem { justify-content: flex-start; }

  .railScrim { display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(20,20,18,.34); opacity: 0; pointer-events: none; transition: opacity .22s; }
  body.railOpen .railScrim { opacity: 1; pointer-events: auto; }
  body.railOpen { overflow: hidden; }

  .railToggle { display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px;
    background: var(--surface); cursor: pointer; flex: none; margin-right: 10px; }
  .railToggle span { display: block; height: 1.5px; background: var(--ink); border-radius: 2px; }

  /* The header was the other half of the mess: five actions wrapping into the
     title. Give them their own full-width strip under it.

     Squeezing them beside the title and letting it scroll was worse than it
     looked — the row sits flush right, so it opens already scrolled to its end
     and the first three actions are invisible with nothing to suggest they
     exist. A full-width strip starting at the left shows what is there and
     scrolls for the rest. */
  .top { flex-wrap: wrap; gap: 8px; padding: 10px 14px; align-items: center; }
  .railToggle { order: 1; }
  .topL { order: 2; min-width: 0; flex: 1; }
  .topL h1 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* The channel tabs take their own row between the title and the actions —
     see the .cxTabs block further down, which has to override the base rule
     and so must come after it in the file. */
  .topR { order: 4; flex: 1 0 100%; max-width: none; margin-top: 2px;
    justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topR::-webkit-scrollbar { display: none; }
  .topR .btn, .topR .stat { flex: none; white-space: nowrap; }
  /* The counts are informational and repeated below the filters — on a phone
     that space is better spent on the actions. */
  .topR .stat { display: none; }
  /* Pin the primary action so it never scrolls out of reach. Sticky inside a
     horizontal scroller keeps it parked at the right edge while the secondary
     actions slide underneath it. */
  .topR .btn.primary { position: sticky; right: 0; box-shadow: -10px 0 10px 6px var(--bg); }

  .stage { padding: 14px; }
  /* The inspector is a full sheet on a phone; a 380px drawer inside 390px is not a drawer. */
  .inspector { position: fixed; inset: 0; width: 100%; z-index: 65; }
}

/* ── suggested briefs ────────────────────────────────────────────────────────
   Evidence and craft defaults must not read the same. A tested angle carries a
   coloured tag and its numbers; an untested one is visibly quieter and says so.
   Making them look alike would turn a default into a claim. */
.sugGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.sug { text-align: left; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 11px;
  background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.sug:hover { border-color: var(--muted); }
.sug.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sug.craft { background: var(--bg); }
.sugTop { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.sugAngle { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
.sugTag { flex: none; font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 1px 6px;
  border-radius: 99px; text-transform: uppercase; }
.sugTag.own      { background: #E7F2EA; color: #2F7D46; }
.sugTag.vertical { background: #EAEEF6; color: #3C5A99; }
/* The quiet one, on purpose — it is not a finding. */
.sugTag.craft    { background: transparent; color: var(--dim); border: 1px solid var(--line); }
.sugHead { font-size: 12.5px; font-weight: 550; margin-bottom: 2px; }
.sug.craft .sugHead { font-weight: 400; color: var(--muted); }

/* ── ad copy editor ──────────────────────────────────────────────────────── */
.cnt { float: right; font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; font-weight: 400; }
/* Over the soft limit means Meta truncates it in feed — the ad still runs, which
   is exactly why this needs to be loud here. */
.cnt.over { color: var(--warn); font-weight: 600; }
.copyIssue { font-size: 11.5px; line-height: 1.5; padding: 7px 9px; border-radius: 8px; margin-top: 6px;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
.copyIssue.warn  { background: #FDF8EE; border-color: #EFE0BE; color: #7A5A14; }
.copyIssue.error { background: #FDF1F0; border-color: #F0D2CF; color: #93332B; }
/* A claim is the one worth stopping for: it is not a formatting problem, it is
   something asserted about the client that nobody has verified. */
.copyIssue.claim { background: #FDF1F0; border-color: #E8BCB6; color: #93332B; font-weight: 500; }

/* ── copy variants ───────────────────────────────────────────────────────── */
.cvList { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: 8px; }
.cvRow { padding: 9px 11px; border-bottom: 1px solid var(--line); }
.cvRow:last-child { border-bottom: 0; }
/* The leader is marked, but only "won" carries colour — being ahead inside the
   noise is not a result, and colouring it would say otherwise. */
.cvRow.cvLead { background: var(--bg); }
.cvHead { display: flex; align-items: center; gap: 7px; }
.cvLabel { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; }
.cvTag { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); }
.cvTag.won { background: #E7F2EA; border-color: #C7E2CF; color: #2F7D46; }
.cvDel { color: var(--dim); font-size: 15px; line-height: 1; padding: 0 2px; }
.cvDel:hover { color: var(--bad); }
.cvNums { margin-top: 3px; font-size: 11px; }
.cvName { margin-top: 2px; font-size: 10px; color: var(--dim); word-break: break-all; }
.cvVerdict { margin-top: 8px; font-size: 11.5px; line-height: 1.55; padding: 8px 10px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.cvVerdict.won { background: #F3F8F4; border-color: #CFE3D5; color: #2F5F42; }
.cvUn { margin-top: 9px; border: 1px dashed var(--line); border-radius: var(--r); padding: 8px 10px; }
.cvUnHead { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.cvUnRow { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 4px 0; }
.cvUnName { font-size: 11.5px; word-break: break-all; }
.cvPick { font-size: 11px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); flex: 0 0 auto; }

/* ── toast action (undo) ────────────────────────────────────────────────── */
.toastAct {
  margin-left: 12px; padding: 3px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
  color: #7A5A1E; background: #F6EFE2; border: 1px solid #E4D5B4; cursor: pointer;
}
.toastAct:hover { background: #F0E5CE; }

/* ── review mode ─────────────────────────────────────────────────────────
   Sits between the lightbox (80) and the toasts (90): decisions made here
   still need their Undo toast clickable on top. */
.rv { position: fixed; inset: 0; z-index: 82; background: rgba(18, 18, 16, .96);
  display: flex; flex-direction: column; color: #E8E5DD; }
.rvTop { display: flex; align-items: center; gap: 14px; padding: 14px 20px; font-size: 12.5px; }
.rvCount { font-variant-numeric: tabular-nums; font-weight: 600; }
.rvKeys { color: #9B968A; flex: 1; }
.rvKeys b { color: #E8E5DD; }
.rvClose { color: #E8E5DD; font-size: 16px; padding: 4px 8px; background: none; border: 0; cursor: pointer; }
.rvStage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.rvStage img, .rvStage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.rvInfo { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px 4px; font-size: 13px; }
.rvTitle { font-weight: 600; }
.rvInfo .m { color: #9B968A; }
.rvInfo .perf { margin: 0; }
.rvState { font-size: 11.5px; color: #9B968A; text-transform: uppercase; letter-spacing: .05em; }
.rvState.approved { color: #7FC493; }
.rvState.rejected { color: #D97B7B; }
.rvActs { display: flex; justify-content: center; gap: 12px; padding: 12px 20px 22px; }
.rvBtn { min-width: 130px; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.07); color: #E8E5DD; border: 1px solid rgba(255,255,255,.14); cursor: pointer; }
.rvBtn:hover { background: rgba(255,255,255,.13); }
.rvBtn.star { min-width: 56px; }
.rvBtn.yes.on { background: #2F7D46; border-color: #2F7D46; color: #fff; }
.rvBtn.no.on { background: #A33434; border-color: #A33434; color: #fff; }
.rvBtn.star.on { color: #E0B45C; border-color: #E0B45C; }
@media (max-width: 700px) { .rvKeys { display: none; } .rvBtn { min-width: 104px; } }

/* ── in-feed preview ─────────────────────────────────────────────────────
   Real placement chrome, deliberately not themed: a Facebook post is white
   and a story is black no matter what the studio looks like. */
.ffPost { width: min(420px, 92vw); max-height: 90vh; overflow-y: auto; background: #fff; color: #111;
  border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.ffHead { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.ffAva { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-weight: 700; font-size: 15px; flex: none; }
.ffName { font-weight: 650; font-size: 13.5px; }
.ffSpon { color: #777; font-size: 11.5px; }
.ffDots { margin-left: auto; color: #777; letter-spacing: 1px; }
.ffPrimary { padding: 0 14px 10px; white-space: pre-wrap; }
.ffMedia img, .ffMedia video { width: 100%; display: block; }
.ffLink { display: flex; align-items: center; gap: 10px; background: #F0F2F5; padding: 10px 14px; }
.ffLinkL { flex: 1; min-width: 0; }
.ffDomain { font-size: 10.5px; color: #777; letter-spacing: .03em; }
.ffHeadline { font-weight: 650; font-size: 14px; }
.ffDesc { font-size: 12px; color: #555; }
.ffCta { flex: none; background: #E4E6EB; border: 0; border-radius: 7px; padding: 8px 14px;
  font-weight: 650; font-size: 13px; text-transform: capitalize; }
.ffActs { display: flex; justify-content: space-around; padding: 9px 6px; color: #555;
  border-top: 1px solid #E4E6EB; font-size: 12.5px; }
.ffStory { position: relative; height: min(86vh, 780px); aspect-ratio: 9/16; background: #000;
  border-radius: 18px; overflow: hidden; color: #fff; }
.ffStoryBars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 2; }
.ffStoryBars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); }
.ffStoryHead { position: absolute; top: 20px; left: 12px; right: 12px; display: flex; align-items: center;
  gap: 8px; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.ffStoryHead .ffAva { width: 30px; height: 30px; font-size: 12px; }
.ffStoryHead .ffName { color: #fff; }
.ffStoryHead .ffSpon { color: rgba(255,255,255,.8); }
.ffStoryMedia, .ffStoryMedia img, .ffStoryMedia video { width: 100%; height: 100%; object-fit: cover; }
.ffStoryCta { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-weight: 650;
  background: rgba(255,255,255,.95); color: #111; padding: 8px 22px; border-radius: 99px;
  text-transform: capitalize; white-space: nowrap; }
.ffStoryCta span { font-size: 10px; line-height: 1; color: #555; }

/* ── live progress + variant pill + winner remix ────────────────────────── */
.liveNow { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.liveLn.dim { opacity: .55; }
.pill.var { left: auto; right: 8px; top: 34px; }
.tick.more { flex: none; padding: 6px 10px; color: #7A5A1E; border-color: #E4D5B4; background: #FBF6EA; }
.tick.more:hover { background: #F6EFE2; color: #5C420F; }

/* ── home · team board (direction B, "Lanes") ─────────────────────────────
   A control room sorted by STATE, not by role: what is waiting on you, what
   is in motion, what the team proposes. Everything here is prefixed .hb so it
   cannot collide with the gallery's .card / .empty / .top. The amber lane is
   the one place colour means "act". */
.hbPage { max-width: 1240px; margin: 0 auto; padding-top: 6px; }
.hbTop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.hbTopL { min-width: 0; }
.hbEyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hbTop h1 { margin: 6px 0 0; font-size: 20px; font-weight: 640; letter-spacing: -.02em; line-height: 1.3; max-width: 40ch; overflow-wrap: anywhere; }
.hbSub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.hbAsk { flex: none; }
.hbAsk .kbd { margin-left: 2px; }

.hbLanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.hbLane { background: var(--sunken); border-radius: 16px; padding: 12px; min-height: 420px; min-width: 0; }
.hbLane.waiting { background: #FBF4E3; }
.hbLaneHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 8px 12px; }
.hbLaneHead h2 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.hbLane.waiting .hbLaneHead h2 { color: var(--warn); }
.hbCnt { font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hbHint { font-size: 11.5px; color: var(--muted); text-align: right; }

.hbCard { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px 13px; margin-bottom: 10px; min-width: 0; }
.hbCard:last-child { margin-bottom: 0; }
.hbCard.waiting { border-color: #EBD9A8; box-shadow: 0 8px 22px -14px rgba(176,122,24,.45); }
.hbHd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hbWho { min-width: 0; }
/* The role mark is a monogram tile tinted per role — no faces, no fake staff. */
.hbMark { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.hbRole { font-weight: 640; font-size: 14px; }
.hbWhen { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
/* State chips: colour only where it means "act". */
.hbSt { margin-left: auto; flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); white-space: nowrap; }
.hbSt.waiting { background: #FBF4E3; border-color: #EBD9A8; color: var(--warn); font-weight: 600; }
.hbSt.ready { background: #EDF7F2; border-color: #BFE0CF; color: var(--good); }
.hbHl { font-size: 13px; font-weight: 560; margin-bottom: 8px; line-height: 1.4; }
.hbStat { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.hbActs { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.hbEmpty { font-size: 12.5px; color: var(--dim); padding: 24px 10px; text-align: center; }

/* Receipt widgets — the same markup the prototype used, under the prefix. */
.hbRcThumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.hbRcThumbs img { width: 48px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #1A1A18; display: block; }
.hbRcThumbs img[data-hbcid] { cursor: pointer; transition: border-color .12s ease; }
.hbRcThumbs img[data-hbcid]:hover { border-color: var(--ink); }
.hbRcNum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hbBig { font-size: 26px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hbUnit { font-size: 12.5px; color: var(--muted); }
.hbRcNote { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.hbRcCmp { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hbRcCmp > div { min-width: 0; }
.hbLbl { display: block; font-size: 11px; color: var(--muted); }
.hbV { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hbLead .hbV { color: var(--good); }
.hbVs { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.hbRcList { margin: 0; padding: 0 0 0 16px; font-size: 13px; color: var(--ink); line-height: 1.5; }
.hbRcList li { margin: 2px 0; }
.hbRcList.hbBundle { list-style: none; padding: 0; }
.hbRcList.hbBundle li::before { content: '✓ '; color: var(--good); font-weight: 600; }

/* Loading: the skeleton keeps the three lanes in place so nothing jumps. */
.hbLoading h1 { color: var(--muted); font-weight: 500; }
.hbSkelCard { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 16px 15px; }
.hbSkelLine { height: 10px; border-radius: 99px; background: var(--sunken); margin: 8px 0; animation: hbPulse 1.4s ease-in-out infinite; }
.hbSkelLine.w40 { width: 40%; } .hbSkelLine.w60 { width: 60%; } .hbSkelLine.w80 { width: 80%; }
@keyframes hbPulse { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }

/* Lanes stack at the studio's own tablet breakpoint (900px) — three columns
   under that are too narrow for a 26px number next to its unit. */
@media (max-width: 900px) {
  .hbLanes { grid-template-columns: 1fr; }
  .hbLane { min-height: 0; }
}
@media (max-width: 760px) {
  .hbTop { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
  .hbTop h1 { font-size: 18px; }
  .hbLane { padding: 10px; border-radius: 14px; }
}

/* ── gallery multi-select (xs·) ──────────────────────────────────────────────
   The checkbox sits in the free bottom-left corner of the media well: the top
   corners already carry the ratio pill and the star/location pill, and a
   control that covers information is worse than one you have to look for. */

.xsChk {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  width: 22px; height: 22px; padding: 0; border-radius: 7px; cursor: pointer;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  color: transparent; background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(26, 26, 24, .3);
  opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.card:hover .xsChk, .xsChk:focus-visible { opacity: 1; }
/* Once anything is picked every box stays up — hunting for a hover target to
   un-pick something is a small cruelty. */
.grid[data-picking="true"] .xsChk { opacity: 1; }
/* The well behind it is near-black, so a near-black tick would vanish into the
   creative: the checked box keeps a white ring and reads on any image. */
.xsChk[aria-checked="true"] {
  opacity: 1; color: #fff; background: var(--ink); border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92);
}
.card[data-msel="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
/* No hover on touch, so the boxes are simply always there. */
@media (hover: none) { .xsChk { opacity: 1; } }

.xsBar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 10px 9px 13px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 2px 10px -4px rgba(20, 20, 16, .18);
}
.xsN { font-size: 12.5px; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xsBar .kbd { margin-left: 7px; }

/* ── live run meter (ug·) ────────────────────────────────────────────────────
   Turns, tokens, elapsed. Never a dollar figure — see the note in app.js. */

.ugTick { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bubble.assistant .who .ugTick { font-family: var(--mono); font-size: 11px; }
.row .d.ugTick.run { color: var(--live); margin-top: 3px; }
.ugTick:empty { display: none; }

/* ── shortcuts overlay (ks·) ─────────────────────────────────────────────── */

.ksGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px 26px; }
.ksGroup h4 {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim);
}
.ksRow { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.ksRow:first-of-type { border-top: 0; }
.ksKeys { flex: none; display: flex; gap: 4px; min-width: 86px; }
.ksWhat { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.kbHint {
  flex: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .12s ease, color .12s ease;
}
.kbHint:hover { border-color: var(--line-2); color: var(--ink); }
.topMid { gap: 8px; }

/* ── client activity (cav·) ──────────────────────────────────────────────── */

.cavBtn { border-color: var(--acc-line); background: var(--acc-soft); font-weight: 550; }
.cavDot { width: 6px; height: 6px; border-radius: 99px; background: var(--acc); flex: none; }
.cavList { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; }
.cavRow {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); cursor: pointer; transition: border-color .12s ease;
}
.cavRow:hover { border-color: var(--line-2); }
.cavT { font-size: 13px; font-weight: 550; letter-spacing: -.015em; }
.cavM { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.cavC {
  font-size: 12.5px; color: var(--muted); line-height: 1.55;
  margin-top: 8px; padding-left: 9px; border-left: 2px solid var(--line-2);
}
.cavYes { color: var(--good); font-weight: 550; }
.cavNo { color: var(--bad); font-weight: 550; }
/* "· now passed" — the operator's own later edit, shown beside the client's
   choice rather than replacing it. Deliberately quiet: what the client said is
   the headline, what we did to it since is the footnote. */
.cavDrift { color: var(--dim); font-weight: 400; font-style: italic; }

/* ── client switcher (bx·) ───────────────────────────────────────────────────
   Replaces the rail's client list. One control that says where you are and
   opens a searchable menu of everywhere else — so the rail below it is only
   ever about FEATURES.

   Positioned against the rail, not the page: .bxWrap is the containing block,
   so the menu tracks the control at every width instead of being pinned to a
   viewport coordinate that stops being right the moment the rail collapses. */

.bxWrap { position: relative; z-index: 40; padding: 0 10px 8px; }

.bxBtn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border-radius: 10px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; font-weight: 550; letter-spacing: -.015em;
  transition: border-color .12s ease, background .12s ease;
}
.bxBtn:hover { border-color: var(--line-2); background: #FBFBFA; }
.bxBtn[aria-expanded="true"] { border-color: var(--ink); }
.bxBtn .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxBtn .cv { flex: none; color: var(--dim); font-size: 10px; line-height: 1; }

.bxMenu {
  position: absolute; top: calc(100% - 2px); left: 10px;
  width: 300px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 18px 44px -18px rgba(20, 20, 16, .34), 0 2px 6px rgba(20, 20, 16, .05);
  overflow: hidden;
}
.bxIn { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.bxIn input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 13px; color: var(--ink); }
.bxIn input::placeholder { color: var(--dim); }
.bxIcon { font-size: 13px; color: var(--dim); flex: none; }

.bxList { max-height: min(50vh, 340px); overflow-y: auto; padding: 5px; }
.bxRow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border-radius: 8px; text-align: left;
  color: var(--muted); font-size: 13.5px; border: 1px solid transparent;
}
.bxRow[aria-selected="true"] { background: var(--sunken); color: var(--ink); }
/* Where you are now, marked whether or not it is the keyboard cursor. */
.bxRow[aria-current="true"] { color: var(--ink); font-weight: 600; }
.bxRow[aria-current="true"]::after {
  content: '✓'; margin-left: 2px; font-size: 11px; color: var(--ink); flex: none;
}
.bxRow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxRow .ct { font-size: 11.5px; color: var(--dim); flex: none; font-variant-numeric: tabular-nums; }
/* Locations nest under their brand, exactly as the old rail list drew them. */
.bxRow.loc { padding-left: 21px; position: relative; font-size: 13px; }
.bxRow.loc::before { content: ''; position: absolute; left: 15px; top: 4px; bottom: 4px; border-left: 1px solid var(--line); }
.bxRow.loc .dot { width: 5px; height: 5px; }
.bxEmpty { padding: 20px 12px; text-align: center; color: var(--dim); font-size: 12.5px; }

.bxFoot {
  display: block; width: 100%; text-align: left; padding: 10px 13px;
  border-top: 1px solid var(--line); background: var(--bg);
  font-size: 12.5px; color: var(--muted);
}
.bxFoot:hover { color: var(--ink); background: var(--sunken); }

/* Collapsed rail (62px): the control becomes the accent dot alone, and the
   menu spills over the stage rather than being squeezed into 62px. */
@media (max-width: 1180px) {
  .bxWrap { padding: 0 8px 8px; }
  .bxBtn { justify-content: center; padding: 9px 6px; }
  .bxBtn .nm, .bxBtn .cv { display: none; }
  .bxMenu { left: 8px; }
}
/* Inside the mobile drawer the rail scrolls, which clips an overhanging menu —
   so there the menu fits the drawer instead of spilling out of it. */
@media (max-width: 760px) {
  .bxWrap { padding: 0 10px 8px; }
  .bxBtn { justify-content: flex-start; padding: 9px 10px; }
  .bxBtn .nm, .bxBtn .cv { display: revert; }
  .bxMenu { left: 10px; right: 10px; width: auto; max-width: none; }
  .bxList { max-height: 46vh; }
}

/* ── channel tabs (cx·) ──────────────────────────────────────────────────────
   The rail owns features, these own channels. Deliberately a small pill strip
   and not a second sidebar: there is exactly one channel wired, and a tab
   strip that can hold two things should look like it holds two things. */

/* flex: none on purpose. This strip is navigation: a clipped tab is a tab
   nobody knows exists, so when the row is over-subscribed the title and the
   search box give up width and these three stay whole. */
.cxTabs {
  display: flex; align-items: center; gap: 3px; flex: none;
  padding: 3px; margin-bottom: 3px; border-radius: 10px; background: var(--sunken);
  overflow-x: auto; scrollbar-width: none;
}
.cxTabs::-webkit-scrollbar { display: none; }
.cxTab {
  display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap;
  height: 28px; padding: 0 11px; border-radius: 8px;
  font-size: 12.5px; color: var(--muted); border: 1px solid transparent;
}
.cxTab:hover { color: var(--ink); }
.cxTab[aria-current="true"] {
  background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 550;
}
.cxBadge {
  background: var(--warn); color: #fff; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 99px; font-variant-numeric: tabular-nums;
}
.cxAdd { color: var(--dim); }

/* The tabs took a bite out of the header row, and the row was already busy on a
   gallery with eight actions. Below a roomy desktop the ⌘K trigger gives up its
   label first — the icon keeps the affordance, and ⌘K and / still open it — so
   the page title keeps enough width to be a title.
   Placed after the 1180px block on purpose: it has to win where both apply. */
@media (max-width: 1400px) {
  .topMid { max-width: 46px; }
  .palTrigger { justify-content: center; padding: 0; }
  .palTrigger .t, .palTrigger .kbd { display: none; }
}

/* On a phone the tabs take their own row between the title and the actions.
   Sharing the actions row would cost the primary action its pinned right-hand
   corner, which is the one control on that strip that must never scroll away.
   These have to sit after the base .cxTabs rule to beat its `flex: none`. */
@media (max-width: 760px) {
  .cxTabs { order: 3; flex: 0 0 100%; margin: 4px 0 0; }
  .cxTabs .cxTab { flex: 1 1 auto; justify-content: center; }
  .cxTabs .cxAdd { flex: none; }
}

/* ── Meta Ads channel (mc·) ───────────────────────────────────────────────── */

.mcPage { max-width: 1080px; }
.mcHead { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  padding: 13px 15px; margin-bottom: 20px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.mcHeadL { min-width: 0; flex: 1; }
.mcEyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--dim); }
.mcHeadT { font-size: 13.5px; font-weight: 550; letter-spacing: -.015em; margin-top: 3px; line-height: 1.5; }
.mcNote { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 4px 0 0; }

.mcSec { margin-bottom: 26px; }
.mcSec h3 { margin: 0 0 3px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.mcSec h3 + .mcNote { margin-bottom: 10px; }
.mcSec h3 + .mcRows, .mcSec h3 + .mcTiles, .mcSec h3 + .mcCard { margin-top: 11px; }

.mcTiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.mcTile {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.mcTile:not(.flat):hover { border-color: var(--ink); }
.mcTile.flat { cursor: default; background: var(--bg); }
.mcBig { font-size: 23px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mcLbl { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

.mcRows { display: flex; flex-direction: column; gap: 6px; }
.mcRow {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.mcRow:hover { border-color: var(--line-2); }
.mcOpen { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; text-align: left; padding: 0; }
.mcThumb { width: 38px; height: 47px; flex: none; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--line); background: #1A1A18; display: block; }
.mcNoShot { display: grid; place-items: center; color: rgba(255,255,255,.34); font-size: 11px; }
.mcG { min-width: 0; flex: 1; }
.mcT { display: block; font-size: 13px; font-weight: 550; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.mcD { display: block; font-size: 11.5px; color: var(--dim); margin-top: 3px; line-height: 1.5; }
.mcRow .stat, .mcRow .btn { flex: none; }

.mcCard { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 11px 13px; margin-bottom: 8px; }
.mcCardHead { display: flex; align-items: center; gap: 10px; }
.mcCardHead .mcT { flex: 1; }
.mcCnt { font-size: 11.5px; color: var(--dim); flex: none; font-variant-numeric: tabular-nums; }
.mcAds { margin: 9px 0 0; padding: 0; list-style: none; }
.mcAds li { display: flex; align-items: baseline; gap: 12px; padding: 4px 0;
  border-top: 1px solid var(--line); font-size: 12px; }
.mcAdN { flex: 1; min-width: 0; word-break: break-all; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.mcAdM { flex: none; color: var(--dim); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .mcHead { padding: 12px 13px; margin-bottom: 16px; }
  .mcRow { flex-wrap: wrap; }
  .mcOpen { flex: 1 0 100%; }
  .mcTiles { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
}

/* ── coverage ledger (cg·) ───────────────────────────────────────────────────
   Angles down, formats across. On a young account nearly every cell is
   untested, so untested is the quietest thing on the page: no fill, a dashed
   hairline, a small plus. It must read as work available, never as a failed
   test. Colour is reserved for outcomes the pipeline actually graded — green
   for a winner, red for a graded loser — and each state carries a different
   MARK as well as a different colour, so the five are told apart without
   reading the words and without relying on hue. */

.cgPanel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  margin-bottom: 16px; overflow: hidden; }
/* Nothing to show (no ledger on this server) is a line of text, not a card. */
.cgPanel.quiet { border-color: transparent; background: none; margin-bottom: 10px; }
.cgPanel.quiet .cgHead { padding: 0 0 4px; }

.cgHead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 13px; }
.cgToggle { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink); flex: none; }
.cgCaret { font-size: 10px; color: var(--dim); transition: transform .15s ease; }
.cgToggle[aria-expanded="false"] .cgCaret { transform: rotate(-90deg); }
.cgSum { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.cgSum b { color: var(--ink); font-weight: 600; }
.cgSum.dim { color: var(--dim); }
.cgCav { font-size: 11.5px; color: var(--dim); line-height: 1.5; flex: 1 1 220px; min-width: 0; }
.cgRetry { font-size: 11.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.cgRetry:hover { color: var(--ink); }
.cgNote { font-size: 12px; color: var(--dim); padding: 4px 2px; }

.cgBody { border-top: 1px solid var(--line); padding: 13px; }
/* Wide matrices scroll inside their own box — the page never does. */
.cgScroll { overflow-x: auto; padding-bottom: 2px; }
.cgMatrix { display: grid; gap: 6px; max-width: 940px;
  grid-template-columns: minmax(136px, 190px) repeat(var(--cgCols, 3), minmax(102px, 1fr)); }

.cgColH { align-self: end; padding: 0 2px 3px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.cgRowH { display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 0 10px 0 2px; min-width: 0; }
.cgRowN { font-size: 12.5px; font-weight: 550; letter-spacing: -.012em; }
.cgRowT { font-size: 10.5px; color: var(--dim); }
/* Rows outside the taxonomy (Other, Unlabelled) are shown, never dropped —
   just held a shade back from the six the library is built around. */
.cgRowH.other .cgRowN { font-weight: 500; color: var(--muted); }

.cgCell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  min-height: 64px; padding: 9px 10px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line); transition: border-color .12s ease, background .12s ease, box-shadow .12s ease; }
.cgSt { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cgDot { width: 8px; height: 8px; border-radius: 99px; background: currentColor; flex: none; }
.cgN { font-size: 11.5px; color: var(--muted); }
.cgFig { display: flex; align-items: baseline; gap: 5px; font-size: 13px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.cgFig em { font-style: normal; font-size: 10px; font-weight: 400; color: var(--dim); letter-spacing: 0; }
.cgFig.none { font-size: 11px; font-weight: 400; color: var(--dim); }
/* A thin cell can still carry a real cost per result. It is a fact, so it is
   shown — but held back from the weight of a figure you could act on, because
   the state beside it says nobody can judge this yet. */
.cgCell.thin .cgFig { font-weight: 500; color: var(--muted); }
.cgMake { font-size: 11.5px; color: var(--dim); }

.cgCell.won  { background: #F4FAF6; border-color: #BFE0CF; }
.cgCell.lost { background: #FDF6F5; border-color: #E9CBC8; }
.cgCell.thin { background: #FDF9F1; border-color: #E8D5AE; }
.cgCell.mixed { border-color: var(--line-2); }
/* The opportunity. No fill and no colour: an empty slot, not a red mark. */
.cgCell.untested { background: transparent; border-style: dashed; }
/* Artwork exists but has never run. Reads as neutral-with-substance: a solid
   border because there IS something here, but no outcome colour, because
   nothing has been learned. Deliberately not the amber of 'thin' — thin ran. */
.cgCell.made { background: var(--surface); border-color: var(--line-2); border-style: solid; }
.cgCell.made .cgSt, .cgKey.made { color: var(--dim); }
.cgCell.made .cgDot, .cgKey.made .cgDot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.cgCell.won .cgSt,  .cgKey.won  { color: var(--good); }
.cgCell.lost .cgSt, .cgKey.lost { color: var(--bad); }
.cgCell.thin .cgSt, .cgKey.thin { color: var(--warn); }
.cgCell.mixed .cgSt, .cgKey.mixed { color: var(--muted); }
.cgCell.untested .cgSt, .cgKey.untested { color: var(--dim); font-weight: 500; }
/* Fifteen small-caps UNTESTED stamps read as fifteen rejections. Lower-case,
   unspaced and dim, the same word reads as a blank waiting to be filled. */
.cgCell.untested .cgSt { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

/* A mark per state, so the grid is readable in greyscale too. */
.cgCell.lost .cgDot, .cgKey.lost .cgDot { border-radius: 2px; }
.cgCell.mixed .cgDot, .cgKey.mixed .cgDot { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.cgCell.thin .cgDot, .cgKey.thin .cgDot { width: 5px; height: 5px; margin: 0 1.5px; }
.cgCell.untested .cgDot, .cgKey.untested .cgDot {
  background: none; width: 9px; height: 9px; border-radius: 0;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 9px 1.4px, 1.4px 9px; background-position: center; background-repeat: no-repeat;
}

.cgCell:hover { border-color: var(--muted); }
.cgCell.untested:hover { border-style: solid; border-color: var(--ink); background: var(--surface); }
.cgCell.untested:hover .cgMake, .cgCell.untested:hover .cgSt { color: var(--ink); }
.cgCell[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.cgFoot { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
  margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.cgLegend { display: flex; gap: 14px; flex-wrap: wrap; }
.cgKey { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cgKey em { font-style: normal; font-size: 11px; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--dim); }
.cgHint { flex: 1 1 220px; min-width: 0; font-size: 11.5px; line-height: 1.55; color: var(--dim); }

/* The gallery's filter chip for an open cell — an exact list of creatives, so
   it names the cell rather than a rule. */
.cgChip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 9px;
  font-size: 12.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--ink); }
.cgChipK { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.cgChipX { color: var(--dim); font-size: 11px; }
.cgChip:hover .cgChipX { color: var(--bad); }

@media (max-width: 760px) {
  .cgHead { padding: 10px 11px; gap: 8px; }
  .cgCav, .cgHint { flex-basis: 100%; }
  .cgBody { padding: 11px; }
  .cgMatrix { grid-template-columns: minmax(120px, 150px) repeat(var(--cgCols, 3), minmax(96px, 1fr)); }
}

/* ── business profile — the questions the studio asks before it generates ──
   Amber only when NOTHING is known: that state is the one that produced a
   wrong-vertical creative, so it earns the colour. Once anything is answered it
   goes quiet and collapses, because then it is reference, not a prompt. */
.bzBox { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 13px 15px; margin-bottom: 14px; }
.bzBox.blank { border-color: #E8D5AE; background: #FDF9F1; }
.bzHead { display: flex; align-items: baseline; gap: 10px; }
.bzHead strong { font-size: 13.5px; font-weight: 600; flex: 1; }
.bzCount { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bzBox > .sub { margin: 4px 0 10px; }
.bzRows { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.bzRow label { display: flex; align-items: baseline; gap: 7px; font-size: 12px; font-weight: 550;
  color: var(--ink); margin-bottom: 4px; }
.bzRow .sub { margin-top: 3px; font-size: 11.5px; }
.bzSrc { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px; }
.bzFoot { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.bzFoot .sub { margin: 0; }

/* ── propose, then generate (pn·) ────────────────────────────────────────────
   The plan card is the studio's centrepiece. It has to read like a proposal
   from someone competent, not a form wearing a chat bubble: the concept NAME is
   the biggest thing on it, the premise sits under it in plain prose, and what
   it covers sits quieter below that.

   The basis line is the honest bit, and it is styled so the two kinds cannot be
   mistaken for one another at a glance. An evidence concept carries a coloured
   tag and a solid rule down its left edge; a craft concept is flat, grey, and
   never carries a figure. If those two ever look alike the card is lying.

   The price sits with the button that spends it — including when there is no
   price, because "no cost history for this yet" is information, not an error
   and not something to hide. */

.pnCard {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--surface); padding: 17px 18px 13px;
  box-shadow: 0 1px 2px rgba(20, 20, 16, .04);
}
.pnHead { margin-bottom: 14px; }
.pnKicker {
  display: block; font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--dim); margin-bottom: 6px;
}
.pnTitle { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); }
.pnAsk { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
/* Said once, where the header is read, instead of once per idea in the column
   that is skimmed. Quiet — it is a caveat about the names, not a warning about
   the plan, which is sound either way. */
.pnNoName {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--dim);
  padding-left: 9px; border-left: 2px solid var(--line-2);
}

.pnList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pnIdea {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 4px 12px; align-items: start;
  padding: 13px 13px 13px 11px; border-radius: var(--r);
  border: 1px solid transparent; border-left: 2px solid var(--line);
  background: var(--bg);
}
/* Evidence earns the darker edge. Craft does not — it is a starting point, and
   a starting point that looks like a finding is the failure this card exists to
   avoid. */
.pnIdea.vertical, .pnIdea.own { border-left-color: var(--ink); background: var(--surface); border-color: var(--line); }
.pnIdea.craft { border-left-style: dashed; }

.pnNum {
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--dim);
  line-height: 24px; text-align: right;
}
.pnBody { min-width: 0; }
.pnName {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.022em; line-height: 1.3;
  color: var(--ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.pnUnnamed {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); border: 1px solid var(--line-2); border-radius: 99px; padding: 0 6px;
}
.pnPrem { margin: 5px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.pnCovers { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); display: flex; gap: 7px; flex-wrap: wrap; align-items: baseline; }
.pnK {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); flex: none;
}
.pnBasis {
  margin: 7px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted);
  display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
}
.pnBasis > span:last-child { flex: 1 1 200px; min-width: 0; }
.pnIdea.craft .pnBasis { color: var(--dim); }
.pnGo { align-self: center; flex: none; }

.pnRow {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted);
}
.pnRow > span:not(.pnK) { flex: 1 1 220px; min-width: 0; }
.pnCov { margin-top: 14px; }
.pnCov b { color: var(--ink); font-variant-numeric: tabular-nums; }

.pnAssets { align-items: center; }
.pnAssets.none { align-items: baseline; color: var(--dim); }
.pnThumbs { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 220px; min-width: 0; }
.pnThumb {
  display: flex; align-items: center; gap: 7px; max-width: 190px;
  padding: 3px 9px 3px 3px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line);
}
.pnThumb img { width: 22px; height: 22px; border-radius: 99px; object-fit: cover; display: block; flex: none; background: var(--sunken); }
.pnThumb i { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center;
  font-style: normal; font-size: 11px; color: var(--dim); background: var(--sunken); flex: none; }
.pnThumb em { font-style: normal; font-size: 11.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnThumbMore { font-size: 11.5px; color: var(--dim); align-self: center; }

.pnUnk { align-items: center; }
.pnUnkGo {
  flex: none; font-size: 11px; color: var(--ink); padding: 2px 9px; border-radius: 99px;
  border: 1px solid var(--line-2); background: var(--surface);
}
.pnUnkGo:hover { border-color: var(--ink); }

.pnFoot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pnAll { flex: none; }
.pnCost { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pnCostFig { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* No history is stated, not hidden and not styled as a warning: it is the true
   answer, and the studio never guesses a price it cannot back. */
.pnCostNo { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.pnCost em { font-style: normal; font-size: 11px; color: var(--dim); line-height: 1.5; }

.pnReply { margin: 11px 0 0; font-size: 11.5px; color: var(--dim); line-height: 1.6; }
.pnBy { color: var(--dim); }

/* ── the empty chat ─────────────────────────────────────────────────────────
   Starters FILL the composer, they do not send: the first thing anyone types
   here should be editable before it costs anything. */
.pnIntro { padding: 30px 4px; }
.pnLead { font-size: 14px; line-height: 1.7; color: var(--ink); margin: 0 0 16px; }
.pnStarters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pnStarter {
  padding: 8px 14px; border-radius: 99px; font-size: 12.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.pnStarter:hover { border-color: var(--ink); background: #FBFBFA; }

/* Two buttons in a centred empty state need to breathe. */
.empty .btn + .btn { margin-left: 8px; }

/* An inline link inside prose — used where a demoted control still needs a way
   back to the primary one. */
.lnk { padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.lnk:hover { text-decoration-thickness: 2px; }

@media (max-width: 760px) {
  /* The chat is the primary surface; 26px of gutter each side is a lot of a
     375px screen to spend on nothing. */
  .stream, .composer { padding-left: 14px; padding-right: 14px; }
  .pnCard { padding: 14px 13px 11px; }
  .pnIdea { grid-template-columns: 20px minmax(0, 1fr); padding: 12px 11px; }
  .pnGo { grid-column: 2; justify-self: start; margin-top: 9px; }
  .pnFoot { align-items: flex-start; }
  .pnAll { width: 100%; }
  .pnThumb { max-width: 100%; }
  .empty .btn + .btn { margin: 8px 0 0; }
}