/* ============================================================================
   enSeller — "Certificate ⟂ Instrument"
   ----------------------------------------------------------------------------
   The product proves one thing: a CERTIFIED answer and the COMMERCIAL layer
   priced around it are separable. So the layout is a SPLIT — the answer as a
   certificate (white document, serif) on one plane, and the INSTRUMENT that
   proves separation and owns the budget on the other (dark, monospace). The
   seam between them is the boundary enSeller defends. White ground, ink type,
   one confident accent; the dark instrument is the only heavy surface.
   Type:  Newsreader (the answer)  ·  Space Grotesk (UI)  ·  IBM Plex Mono (data)
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --paper:      #ffffff;   /* app ground — WHITE                         */
  --paper-2:    #f3f5f9;   /* cool inset / track                         */
  --card:       #ffffff;   /* surfaces (bordered)                        */
  --ink:        #14171e;   /* near-black, cool                           */
  --ink-2:      #5b6472;   /* secondary                                  */
  --rule:       #e5e9f0;   /* hairline                                   */
  --rule-soft:  #eef1f6;

  --accent:     #2f54eb;   /* the one accent — confident ink-blue        */
  --accent-2:   #1e3fc4;   /* hover / pressed                            */
  --accent-wash:#eef2fe;

  --ok:         #17864e;   --ok-wash: #e6f4ec;   /* verified            */
  --bad:        #d0342c;   --bad-wash: #fbe9e7;   /* breach              */
  --warn:       #b45309;

  /* instrument — cool slate (the machine) */
  --inst:       #0f1420;   --inst-2: #171d2b;  --inst-3: #202a40;
  --inst-ink:   #eef1f8;   --inst-ink-2: #97a1b6;  --inst-line: #29324a;
  --inst-accent:#7aa0ff;   --inst-ok: #4ecb86;  --inst-bad: #f2907f;

  /* legacy aliases referenced inline in JSX — keep names, new values */
  --bg: var(--paper);  --panel: var(--card);  --line: var(--rule);
  --muted: var(--ink-2);  --sponsor: #f6f8fd;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --shadow: 0 1px 2px rgba(20,30,60,.05), 0 10px 30px -20px rgba(20,30,60,.35);
  --shadow-inst: 0 20px 50px -24px rgba(10,16,32,.55);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 400 14.5px/1.6 var(--sans); letter-spacing: .1px; min-height: 100vh;
}
::selection { background: var(--accent-wash); color: var(--accent-2); }

.app { max-width: 1220px; margin: 0 auto; padding: 22px 22px 60px; }

/* ---------------------------------------------------------------- masthead */
header { display: flex; align-items: center; gap: 16px; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
.logo { height: 30px; width: auto; display: block; }
.brand-line { font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-2); padding-left: 15px; border-left: 1px solid var(--rule); max-width: 220px; }

nav { display: flex; gap: 3px; margin-left: auto; padding: 3px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px; }
nav button { background: transparent; border: none; color: var(--ink-2); font: 600 12.5px/1 var(--sans);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; text-transform: capitalize; transition: all .15s; }
nav button:hover { color: var(--ink); }
nav button.active { color: #fff; background: var(--accent); box-shadow: 0 1px 2px rgba(47,84,235,.35); }

.health { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.health .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); }
.health.up .dot   { background: var(--ok);  box-shadow: 0 0 0 3px rgba(23,134,78,.16); }
.health.down .dot { background: var(--bad); box-shadow: 0 0 0 3px rgba(208,52,44,.16); }

main { padding: 2px 0; }
footer { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-2); font: 400 12px/1.6 var(--mono); }

/* --------------------------------------------------------------- ask panel */
.prompt-row { display: flex; gap: 12px; align-items: flex-end; }
textarea { flex: 1; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px 16px; font: 400 16px/1.55 var(--serif); resize: vertical; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,84,235,.14); }

button.primary { background: var(--accent); color: #fff; border: none; border-radius: 11px;
  font: 600 13px/1 var(--sans); letter-spacing: .01em; padding: 13px 24px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(47,84,235,.3); transition: background .15s, transform .05s; }
button.primary:hover:not(:disabled) { background: var(--accent-2); }
button.primary:active:not(:disabled) { transform: translateY(1px); }
button.primary:disabled { opacity: .5; cursor: default; }

.chips { display: flex; gap: 8px; margin: 12px 0 2px; flex-wrap: wrap; }
.chip { background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-2); border-radius: 999px;
  padding: 5px 13px; cursor: pointer; font: 400 12px/1 var(--mono); transition: all .14s; }
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--card); }
.error { color: var(--bad); font-weight: 500; }
.mode-hint { font: 400 11.5px/1.4 var(--mono); color: var(--ink-2); }

/* ============================================================== THE SEAL LINE */
.core-badge { position: relative; margin: 18px 0 4px; padding: 13px 18px 13px 54px; border-radius: 12px;
  font: 500 13px/1.5 var(--sans); border: 1px solid var(--rule); background: var(--card); box-shadow: var(--shadow); }
.core-badge::before { content: "✦"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff;
  background: radial-gradient(circle at 36% 30%, #3a4356, var(--ink)); box-shadow: 0 0 0 4px rgba(20,23,30,.08); }
.core-badge.ok  { color: var(--ok);  border-color: #bfe0cc; background: var(--ok-wash); }
.core-badge.ok::before { background: radial-gradient(circle at 36% 30%, #4ecb86, var(--ok)); box-shadow: 0 0 0 4px rgba(23,134,78,.12); }
.core-badge.bad { color: var(--bad); border-color: #f0c3bf; background: var(--bad-wash); }
.core-badge.bad::before { content: "!"; background: radial-gradient(circle at 36% 30%, #f2907f, var(--bad)); box-shadow: 0 0 0 4px rgba(208,52,44,.12); }
.core-badge .warn { color: var(--warn); font-weight: 600; }

/* =================================================================== THE SPLIT */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 22px; align-items: start; margin-top: 14px; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }

/* ------------------------------------------------- left plane: the certificate */
.chat-stream { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 26px 30px;
  max-height: 62vh; overflow: auto; box-shadow: var(--shadow); position: relative; min-width: 0; }
.chat-stream::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--accent); opacity: .5; }
.facet-seg { margin-bottom: 20px; max-width: 64ch; }
.facet-seg:last-child { margin-bottom: 0; }
.facet-seg h4 { margin: 0 0 7px; font: 600 10.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .16em; color: var(--ink-2); }
.facet-seg p { margin: 0; font: 400 17px/1.72 var(--serif); color: var(--ink); }
.facet-seg p strong { font-weight: 600; }
.cursor { animation: blink 1.05s steps(2, start) infinite; color: var(--accent); font-weight: 400; }
@keyframes blink { to { opacity: 0; } }

/* sponsored (attached) blocks — clearly a separate, disclosed layer */
.ad-inline { margin: 16px 0 20px; max-width: 64ch; }
.sponsored-block { position: relative; background: var(--sponsor); border: 1px solid #d9e2f7; border-radius: 12px; padding: 14px 16px; }
.sponsored-block::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px;
  background: repeating-linear-gradient(90deg, #b9c8f0 0 5px, transparent 5px 10px); }
.ad-disclosure { display: inline-flex; align-items: center; gap: 6px; font: 600 9.5px/1 var(--sans);
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: 7px; }
.ad-disclosure::before { content: "◆"; font-size: 8px; }
.ad-headline { font: 600 15px/1.35 var(--serif); color: var(--ink); }
.ad-body { color: var(--ink-2); font: 400 13.5px/1.55 var(--sans); margin-top: 2px; }
.ad-video { width: 100%; border-radius: 8px; margin-top: 9px; max-height: 220px; }
.ad-image { max-width: 100%; border-radius: 8px; margin-top: 9px; }

/* ================================================ right plane: THE INSTRUMENT */
.instrument { position: sticky; top: 16px; background:
    radial-gradient(120% 60% at 100% 0%, #182136 0%, rgba(24,33,54,0) 60%), var(--inst);
  border: 1px solid var(--inst-line); border-radius: 16px; padding: 18px 18px 16px; color: var(--inst-ink);
  box-shadow: var(--shadow-inst); display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 940px) { .instrument { position: static; } }
.inst-eyebrow { font: 600 9.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .22em; color: var(--inst-accent); }
.inst-lever { display: flex; padding: 3px; gap: 3px; background: var(--inst); border: 1px solid var(--inst-line); border-radius: 10px; }
.inst-lever button { flex: 1; background: transparent; border: none; color: var(--inst-ink-2); font: 600 12px/1 var(--sans);
  padding: 8px 10px; border-radius: 7px; cursor: pointer; text-transform: capitalize; transition: all .15s; }
.inst-lever button:hover:not(.active):not(:disabled) { color: var(--inst-ink); }
.inst-lever button.active { color: #fff; background: var(--accent); }
.inst-lever button:disabled { cursor: default; }

/* the thesis: certified core sealed & untouched */
.seal-card { display: flex; gap: 11px; padding: 12px; border-radius: 12px; background: var(--inst-2); border: 1px solid var(--inst-line); }
.seal-card.sealed { border-color: rgba(78,203,134,.4); }
.seal-card.breach { border-color: rgba(242,144,127,.5); }
.seal-mark { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #06210f;
  background: radial-gradient(circle at 36% 30%, #7ff0b0, var(--inst-ok)); box-shadow: 0 0 0 4px rgba(78,203,134,.14); }
.seal-card.breach .seal-mark { color: #2a0a06; background: radial-gradient(circle at 36% 30%, #ffb3a6, var(--inst-bad)); box-shadow: 0 0 0 4px rgba(242,144,127,.16); }
.seal-title { font: 600 12.5px/1.35 var(--sans); color: var(--inst-ink); }
.seal-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font: 400 10.5px/1.4 var(--mono); color: var(--inst-ink-2); }
.seal-meta code { background: var(--inst-3); color: var(--inst-accent); padding: 1px 5px; border-radius: 4px; }
.seal-meta .ok { color: var(--inst-ok); } .seal-meta .bad { color: var(--inst-bad); }

/* the money — meters that settle */
.inst-meters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.mtr { background: var(--inst-2); border: 1px solid var(--inst-line); border-radius: 11px; padding: 11px 10px; position: relative; overflow: hidden; }
.mtr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--inst-line); }
.mtr.rev::before { background: var(--inst-ok); } .mtr.cost::before { background: var(--inst-bad); } .mtr.net::before { background: var(--inst-accent); }
.mtr-val { font: 500 18px/1.05 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--inst-ink); }
.mtr.rev .mtr-val { color: var(--inst-ok); } .mtr.net .mtr-val { color: var(--inst-accent); }
.mtr-label { font: 600 9px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--inst-ink-2); margin-top: 6px; }
.mtr-sub { font: 400 9.5px/1.3 var(--mono); color: var(--inst-ink-2); margin-top: 3px; }

.inst-profit { position: relative; height: 26px; border-radius: 8px; background: var(--inst-ok); overflow: hidden; display: flex; align-items: center; }
.inst-profit-cost { position: absolute; left: 0; top: 0; bottom: 0; background: var(--inst-bad); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.inst-profit-tag { position: relative; margin-left: auto; padding-right: 10px; font: 600 11px/1 var(--mono); color: #06210f; z-index: 1; }

/* the wallet — the broker block */
.broker { background: var(--inst-2); border: 1px solid var(--inst-line); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.broker.breach { border-color: rgba(242,144,127,.5); }
.broker-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.broker-title { font: 600 10px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--inst-ink-2); }
.warrant { font: 600 9px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; }
.warrant.ok { background: rgba(78,203,134,.14); color: var(--inst-ok); }
.warrant.bad { background: rgba(242,144,127,.16); color: var(--inst-bad); }
.broker-bar { position: relative; height: 22px; border-radius: 7px; background: var(--inst-3); overflow: hidden; display: flex; align-items: center; border: 1px solid var(--inst-line); }
.broker-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--inst-accent), #9db8ff); transition: width .7s cubic-bezier(.2,.7,.2,1); }
.broker-bar-tag { position: relative; z-index: 1; margin: 0 auto; font: 600 10px/1 var(--mono); color: var(--inst-ink); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.broker-caps { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 10.5px/1.4 var(--mono); color: var(--inst-ink-2); }
.broker-caps b { color: var(--inst-ink); font-weight: 600; }
.broker-caps .bad b { color: var(--inst-bad); }
.broker-void { font: 400 10.5px/1.45 var(--mono); color: var(--inst-bad); padding-top: 2px; border-top: 1px solid var(--inst-line); }

/* how it cleared — the governed facts */
.inst-facts { margin: 0; display: flex; flex-direction: column; gap: 0; }
.inst-facts > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--inst-line); }
.inst-facts > div:last-child { border-bottom: none; }
.inst-facts dt { font: 600 9.5px/1.5 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--inst-ink-2); }
.inst-facts dd { margin: 0; font: 400 11.5px/1.5 var(--mono); color: var(--inst-ink); }
.inst-facts dd b { color: var(--inst-accent); font-weight: 600; }

.inst-expand { background: var(--inst-2); border: 1px solid var(--inst-line); color: var(--inst-ink-2); border-radius: 9px;
  padding: 9px; cursor: pointer; font: 600 11px/1 var(--sans); transition: all .15s; }
.inst-expand:hover { color: var(--inst-ink); border-color: var(--inst-accent); }

.instrument.pending { gap: 16px; }
.inst-working { font: 400 12px/1.6 var(--mono); color: var(--inst-ink-2); display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; }
.inst-spark { width: 9px; height: 9px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--inst-accent); box-shadow: 0 0 0 0 rgba(122,160,255,.6); animation: spark 1.4s ease-out infinite; }
@keyframes spark { 0% { box-shadow: 0 0 0 0 rgba(122,160,255,.5); } 100% { box-shadow: 0 0 0 10px rgba(122,160,255,0); } }

/* --------------------------------------------------------- econ wrap + proofs */
.econ { margin-top: 22px; }
.proofs { display: flex; gap: 16px; flex-wrap: wrap; font: 500 12px/1 var(--mono); margin: 10px 0; }
.proofs .ok { color: var(--ok); } .proofs .bad { color: var(--bad); }
.raw-governance { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
.raw-governance > summary { cursor: pointer; font: 500 12px/1 var(--mono); color: var(--ink-2); }
.raw-governance > summary:hover { color: var(--accent); }
.collapsible { border-top: 1px solid var(--rule); margin-top: 10px; }
.collapsible-head { background: none; border: none; color: var(--ink-2); cursor: pointer; padding: 8px 0; font: 500 12.5px/1 var(--mono); }
.collapsible-head:hover { color: var(--accent); }
.collapsible-body { padding: 6px 0 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
.json { background: var(--inst); border: 1px solid var(--inst-line); border-radius: 8px; padding: 11px 13px;
  font: 400 11px/1.6 var(--mono); color: #cbd3e4; max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* ================================================= per-answer dash header/tabs */
.answer-dash { margin-bottom: 8px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 6px 0 16px; flex-wrap: wrap; }
.dash-title { font: 600 18px/1.2 var(--serif); letter-spacing: -.01em; }
.dash-sub { font: 400 12px/1.4 var(--mono); color: var(--ink-2); margin-top: 3px; }
.dash-sub b { color: var(--ink); font-weight: 600; }
.dash-tabs { display: inline-flex; padding: 3px; gap: 3px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 11px; }
.dash-tabs button { background: transparent; border: none; color: var(--ink-2); font: 600 12px/1 var(--sans); padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: all .15s; }
.dash-tabs button:hover:not(.active) { color: var(--ink); }
.dash-tabs button.active { color: #fff; background: var(--accent); }

/* KPI readouts */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 11px; margin-bottom: 18px; }
.kpi { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 13px; padding: 15px 16px 14px; overflow: hidden; box-shadow: var(--shadow); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rule); }
.kpi.ok::before { background: var(--ok); } .kpi.bad::before { background: var(--bad); } .kpi.accent::before { background: var(--accent); }
.kpi-value { font: 500 26px/1 var(--serif); letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi.ok .kpi-value { color: var(--ok); } .kpi.bad .kpi-value { color: var(--bad); } .kpi.accent .kpi-value { color: var(--accent); }
.kpi-label { font: 600 10px/1.3 var(--sans); color: var(--ink-2); margin-top: 8px; text-transform: uppercase; letter-spacing: .1em; }
.kpi-sub { font: 400 11px/1.3 var(--mono); color: var(--ink-2); margin-top: 4px; }

/* chart panels */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: 13px; padding: 16px 18px; box-shadow: var(--shadow); }
.panel h5 { margin: 0 0 14px; font: 600 13px/1.3 var(--serif); letter-spacing: -.01em; color: var(--ink); padding-bottom: 9px; border-bottom: 1px solid var(--rule-soft); }
.panel-note { font: 400 11.5px/1.6 var(--sans); color: var(--ink-2); margin: 12px 0 0; }
.panel-note b { color: var(--ink); font-weight: 600; }

.bar-row { display: flex; align-items: center; gap: 9px; margin: 7px 0; min-width: 0; }
.bar-label { width: 106px; font: 400 11px/1.3 var(--mono); color: var(--ink-2); text-align: right; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { position: relative; height: 15px; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden; flex: 1 1 auto; min-width: 40px; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; transition: width .55s cubic-bezier(.2,.7,.2,1); }
.bar-val { font: 600 12px/1 var(--mono); flex: none; width: 74px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.bar-val.pos { color: var(--ok); } .bar-val.muted { color: var(--ink-2); font-weight: 400; }
.pos { color: var(--ok); }

.econ-split { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.econ-bars { flex: 1; min-width: 220px; }
.econ-donut { text-align: center; }
.donut-cap { font: 400 11px/1.3 var(--mono); color: var(--ink-2); margin-top: 3px; }
.donut-track { fill: none; stroke: var(--paper-2); stroke-width: 8; }
.donut-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .7s ease; }
.donut-fill.tone-ok { stroke: var(--ok); }
.donut-text { font: 600 17px/1 var(--serif); fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }
.proj-strip { margin-top: 14px; padding: 9px 12px; background: var(--ok-wash); border: 1px solid #bfe0cc; border-radius: 9px; font: 400 12px/1.5 var(--sans); color: #146c40; }
.proj-strip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.proj-strip .pos { font-weight: 700; }

.stack { display: flex; height: 32px; border-radius: 9px; overflow: hidden; border: 1px solid var(--rule); }
.stack-seg { display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--mono); color: #fff; white-space: nowrap; padding: 0 6px; }
.stack-seg.core { background: #334155; }
.stack-seg.funded { background: var(--accent); }

.mtest-costmark { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed var(--bad); z-index: 1; }
.cmp { display: flex; flex-direction: column; gap: 7px; }
.cmp-head { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 10px; font: 600 10.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.cmp-row { display: grid; grid-template-columns: 100px 1fr 1fr; gap: 10px; align-items: center; }
.cmp-k { font: 400 12px/1.3 var(--mono); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-cell { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--sans); min-width: 0; }
.cmp-track { flex: 1 1 auto; height: 9px; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 5px; overflow: hidden; min-width: 24px; }
.cmp-bar { display: block; height: 100%; background: #94a3b8; border-radius: 5px; }
.cmp-bar.exp { background: var(--accent); }
.cmp-cell b { flex: none; width: 54px; text-align: right; font-variant-numeric: tabular-nums; font: 600 12px/1 var(--mono); color: var(--ink); }

/* ================================================ dashboard walkthrough (dark) */
.story { background: radial-gradient(120% 70% at 8% 0%, #182136 0%, rgba(24,33,54,0) 55%), var(--inst);
  border: 1px solid var(--inst-line); border-radius: 16px; padding: 20px 22px 22px; color: var(--inst-ink); box-shadow: var(--shadow-inst); position: relative; overflow: hidden; }
.story::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(122,160,255,0) 0%, var(--inst-accent) 22%, rgba(122,160,255,.1) 100%); }
.story-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.story-title { font: 600 15px/1.2 var(--serif); color: var(--inst-ink); letter-spacing: -.01em; }
.story-title::before { content: "walkthrough"; display: block; font: 600 9px/1 var(--sans); text-transform: uppercase; letter-spacing: .22em; color: var(--inst-accent); margin-bottom: 5px; opacity: .9; }
.story-ctrls { display: flex; gap: 6px; }
.story-ctrls button { background: var(--inst-2); border: 1px solid var(--inst-line); color: var(--inst-ink-2); border-radius: 8px; padding: 6px 12px; cursor: pointer; font: 500 11.5px/1 var(--mono); transition: all .14s; }
.story-ctrls button:hover { color: var(--inst-accent); border-color: var(--inst-accent); }
.story-dots { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }
.story-dot { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--inst-line); background: var(--inst-2); cursor: pointer; font-size: 15px; opacity: .45; transition: all .3s; display: grid; place-items: center; }
.story-dot.done { opacity: .8; border-color: var(--inst-ok); }
.story-dot.active { opacity: 1; border-color: var(--inst-accent); box-shadow: 0 0 0 3px rgba(122,160,255,.2); transform: scale(1.12); background: var(--inst-3); }
.story-track { list-style: none; margin: 0; padding: 0; position: relative; }
.story-track::before { content: ""; position: absolute; left: 16px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--inst-accent), var(--inst-line)); opacity: .5; }
.story-step { display: flex; gap: 14px; padding: 7px 0; position: relative; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.story-step.in { opacity: 1; transform: none; }
.story-icon { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--inst-3); border: 1px solid var(--inst-line); display: grid; place-items: center; font-size: 16px; z-index: 1; transition: all .3s; }
.story-step.current .story-icon { background: var(--accent); border-color: var(--inst-accent); box-shadow: 0 0 0 4px rgba(122,160,255,.16); }
.story-body { flex: 1; background: var(--inst-2); border: 1px solid var(--inst-line); border-radius: 12px; padding: 12px 15px; min-width: 0; transition: border-color .3s, box-shadow .3s; }
.story-step.current .story-body { border-color: rgba(122,160,255,.5); box-shadow: 0 8px 26px -14px rgba(0,0,0,.6); }
.story-step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.story-step-title { font: 600 13px/1.3 var(--sans); color: var(--inst-ink); }
.story-metric { font: 600 12.5px/1 var(--mono); color: var(--inst-accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.story-line { margin: 7px 0 0; font: 400 13px/1.62 var(--sans); color: #cdd5e6; }
.story-line b { color: var(--inst-ink); font-weight: 600; }
.story-line code { font: 500 11.5px/1 var(--mono); background: var(--inst-3); color: var(--inst-accent); padding: 1px 5px; border-radius: 4px; }
.story-tech { margin-top: 9px; }
.story-tech button { background: none; border: none; color: var(--inst-ink-2); cursor: pointer; font: 500 10.5px/1 var(--mono); padding: 0; }
.story-tech button:hover { color: var(--inst-accent); }
.story .json { background: #0a0e18; border-color: var(--inst-line); color: #b6bfd4; margin-top: 8px; }

/* narrative (plain English) */
.narrative { display: flex; flex-direction: column; gap: 11px; }
.chapter { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 13px; padding: 14px 16px; box-shadow: var(--shadow); }
.chapter-icon { font-size: 21px; flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--accent-wash); border: 1px solid #d9e2f7; border-radius: 11px; }
.chapter-body { flex: 1; min-width: 0; }
.chapter-body h4 { margin: 0 0 5px; font: 600 13.5px/1.3 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.chapter-body p { margin: 0; font: 400 14px/1.65 var(--serif); color: var(--ink); }
.tech-toggle { background: none; border: none; color: var(--accent); cursor: pointer; font: 500 11px/1 var(--mono); padding: 8px 0 0; }
.tech-toggle:hover { color: var(--accent-2); }
.tech-list { margin: 8px 0 0; padding-left: 16px; font: 400 11.5px/1.65 var(--mono); color: var(--ink-2); }
.tech-card { color: var(--accent); }

/* decision trace */
.trace { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.trace-step { display: grid; grid-template-columns: 100px 1fr auto; gap: 9px; align-items: baseline; padding: 7px 10px; border-radius: 8px; background: var(--paper-2); border-left: 3px solid var(--rule); font: 400 12px/1.4 var(--sans); }
.trace-phase { font: 600 9.5px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.trace-decision { color: var(--ink); font-weight: 600; }
.trace-detail { grid-column: 2 / 3; color: var(--ink-2); font-weight: 400; }
.trace-card { grid-column: 3; color: var(--accent); font: 500 10px/1.3 var(--mono); white-space: nowrap; }
.trace-step.phase-eligibility { border-left-color: #8a6bc0; }
.trace-step.phase-placement { border-left-color: var(--warn); }
.trace-step.phase-expansion { border-left-color: var(--accent); }
.trace-step.phase-budget, .trace-step.phase-route { border-left-color: #0e7490; }
.trace-step.phase-proof { border-left-color: var(--ok); }
.trace-step.phase-frequency, .trace-step.phase-gating { border-left-color: var(--bad); }
.trace-notes { margin-top: 9px; font: 400 12px/1.5 var(--sans); color: var(--ink-2); }
.muted { color: var(--ink-2); } .warn { color: var(--warn); } .ok-msg { color: var(--ok); font-weight: 500; }

/* governance & evidence */
.gov-panel { grid-column: 1 / -1; }
.gov-sec { font: 400 12.5px/1.65 var(--sans); margin: 12px 0; color: var(--ink); }
.gov-sec > b { display: block; margin-bottom: 5px; font: 600 12px/1.3 var(--sans); color: var(--ink); }
.gov-sec code { background: var(--inst); color: var(--inst-accent); padding: 2px 6px; border-radius: 5px; font: 500 11px/1 var(--mono); }
.gov-tbl { width: 100%; border-collapse: collapse; margin-top: 4px; }
.gov-tbl td { padding: 6px 10px 6px 0; font: 400 12px/1.4 var(--sans); border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.gov-tbl td b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mono, .gov-tbl .mono { font: 400 11px/1.4 var(--mono); color: var(--ink-2); }

/* tables */
.grid-wrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { border-bottom: 1px solid var(--rule); padding: 8px 10px; text-align: left; font: 400 13px/1.4 var(--sans); }
.grid th { font: 600 10.5px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.grid input { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); border-radius: 7px; padding: 5px 7px; font: 400 13px/1 var(--mono); }
.grid input:focus { outline: none; border-color: var(--accent); }
.grid tbody tr:hover { background: var(--paper-2); }
.grid td button { background: var(--card); border: 1px solid var(--rule); border-radius: 7px; padding: 4px 10px; cursor: pointer; font: 500 11px/1 var(--sans); }
.grid td button:hover { border-color: var(--accent); color: var(--accent); }
.grid td button.danger { color: var(--bad); border-color: #f0c3bf; }
.grid td button.danger:hover { background: var(--bad-wash); }

/* subnav / tabs */
.subnav { display: inline-flex; padding: 3px; gap: 3px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 11px; margin-bottom: 18px; flex-wrap: wrap; }
.subnav button { background: transparent; border: none; color: var(--ink-2); font: 600 12px/1 var(--sans); padding: 8px 15px; border-radius: 8px; cursor: pointer; transition: all .15s; }
.subnav button:hover:not(.active) { color: var(--ink); }
.subnav button.active { color: #fff; background: var(--accent); }
.tab-intro { font: 400 12px/1.6 var(--sans); color: var(--ink-2); margin: 4px 0 14px; }
.tab-intro code { background: var(--inst); color: var(--inst-accent); padding: 2px 6px; border-radius: 5px; font: 500 11px/1 var(--mono); }
.pill { display: inline-block; background: var(--accent-wash); color: var(--accent-2); border: 1px solid #d9e2f7; border-radius: 999px; padding: 1px 9px; font: 500 11px/1.5 var(--mono); }
.tag { display: inline-block; background: #efe6f7; color: #6d4aa8; border-radius: 6px; padding: 1px 7px; font: 500 10px/1.6 var(--mono); margin-right: 3px; }
.tag.gov { background: var(--bad-wash); color: var(--bad); }
.row-actions { display: inline-flex; gap: 6px; }

/* ad manager */
.mgr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.mgr-title { font: 600 20px/1.1 var(--serif); letter-spacing: -.015em; }
.mgr-sub { font: 400 12px/1.5 var(--mono); color: var(--ink-2); margin-top: 4px; }
.mgr-sub code { background: var(--inst); color: var(--inst-accent); padding: 2px 6px; border-radius: 5px; }
.mgr-tools { display: flex; gap: 8px; align-items: center; }
.mgr-search { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 13px; font: 400 13px/1 var(--sans); width: 170px; }
.mgr-search:focus { outline: none; border-color: var(--accent); }
.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 13px; }
.camp-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 15px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--shadow); transition: box-shadow .16s, transform .16s; }
.camp-card:hover { box-shadow: 0 12px 30px -18px rgba(20,30,60,.5); transform: translateY(-1px); }
.camp-card.paused { opacity: .6; }
.camp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.camp-adv { font: 600 14.5px/1.2 var(--serif); }
.camp-status { font: 600 9px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; }
.camp-status.on { background: var(--ok-wash); color: var(--ok); }
.camp-status.off { background: var(--paper-2); color: var(--ink-2); }
.camp-creative { background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 9px; padding: 10px 12px; min-height: 52px; }
.camp-headline { font: 600 13px/1.35 var(--serif); }
.camp-body { font: 400 12px/1.45 var(--sans); color: var(--ink-2); margin-top: 3px; }
.camp-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.camp-bid { margin-left: auto; font: 600 15px/1 var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
.chip-mini { font: 400 10px/1.5 var(--mono); background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 1px 7px; }
.camp-actions { display: flex; gap: 6px; border-top: 1px solid var(--rule-soft); padding-top: 11px; }
.camp-actions button { flex: 1; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 7px; cursor: pointer; font: 500 12px/1 var(--sans); transition: all .14s; }
.camp-actions button:hover { border-color: var(--accent); color: var(--accent); }
.camp-actions button.danger { color: var(--bad); border-color: #f0c3bf; flex: 0 0 auto; padding: 7px 11px; }
.camp-actions button.danger:hover { background: var(--bad-wash); }

/* ad editor */
.editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.editor-head h3 { margin: 0; font: 600 18px/1.2 var(--serif); letter-spacing: -.01em; }
.editor-actions { display: flex; gap: 8px; }
.editor-actions button { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 17px; cursor: pointer; font: 600 12.5px/1 var(--sans); }
.editor-actions button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.editor-actions button.primary { background: var(--accent); color: #fff; border: none; }
.editor-actions button.primary:hover:not(:disabled) { background: var(--accent-2); color: #fff; }
.editor-actions button:disabled { opacity: .55; }
.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .editor-grid { grid-template-columns: 1fr; } }
.editor-col { display: flex; flex-direction: column; gap: 14px; }
.ad-editor fieldset { border: 1px solid var(--rule); border-radius: 13px; padding: 13px 15px 15px; margin: 0; background: var(--card); box-shadow: var(--shadow); }
.ad-editor legend { font: 600 10.5px/1 var(--sans); color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; padding: 0 7px; }
.ed-field { display: grid; grid-template-columns: 122px 1fr; gap: 10px; align-items: center; margin: 9px 0; }
.ed-field > span { font: 400 12px/1.3 var(--mono); color: var(--ink-2); }
.ed-field input, .ed-field select, .ed-field textarea { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; font: 400 13px/1.4 var(--sans); width: 100%; }
.ed-field textarea { font-family: var(--serif); }
.ed-field input:focus, .ed-field select:focus, .ed-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,84,235,.12); }
.ed-field .fh { display: block; font: 400 10px/1.3 var(--mono); color: var(--ink-2); opacity: .85; }
.field-note { font: 400 11px/1.55 var(--sans); color: var(--ink-2); margin: 8px 0 0; }
.switch { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--sans); cursor: pointer; }
.gov-block { margin-top: 10px; border-top: 1px dashed var(--rule); padding-top: 9px; }
.gov-block > summary { font: 500 11px/1 var(--mono); color: var(--ink-2); cursor: pointer; }
.gov-block label { display: flex; margin-top: 9px; font: 400 12px/1.4 var(--sans); }
.ad-preview { border: 1px dashed var(--accent); border-radius: 13px; padding: 13px 15px; background: var(--accent-wash); }
.ad-preview-tag { font: 600 9.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: 9px; }
.spec-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; font: 400 11.5px/1.4 var(--mono); color: var(--ink-2); }
.spec-row span { background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 1px 8px; }
.spec-row .tag { background: #efe6f7; color: #6d4aa8; }

/* config cards */
.config { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; max-width: 640px; }
.config label { display: flex; justify-content: space-between; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; font: 400 13px/1.3 var(--sans); }
.config input { width: 110px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 7px; padding: 6px 8px; font: 500 13px/1 var(--mono); }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 13px; }
.cfg-card { background: var(--card); border: 1px solid var(--rule); border-radius: 13px; padding: 14px 16px; box-shadow: var(--shadow); }
.cfg-key { font: 600 12px/1.3 var(--sans); text-transform: capitalize; margin-bottom: 9px; color: var(--ink); }
.cfg-card input { width: 100%; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; font: 600 15px/1 var(--mono); color: var(--accent); }
.cfg-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,84,235,.12); }
.cfg-desc { font: 400 11px/1.55 var(--sans); color: var(--ink-2); margin-top: 9px; }

/* action cards */
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.actions button { background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 15px; cursor: pointer; font: 500 13px/1 var(--sans); }
.action-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); gap: 13px; }
.action-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.action-card h4 { margin: 0 0 7px; font: 600 14.5px/1.25 var(--serif); letter-spacing: -.01em; }
.action-card p { margin: 0 0 13px; font: 400 12px/1.6 var(--sans); color: var(--ink-2); flex: 1; }
.action-card button { align-self: flex-start; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 9px; padding: 8px 15px; cursor: pointer; font: 600 12.5px/1 var(--sans); }
.action-card button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.action-card button.primary { background: var(--accent); color: #fff; border: none; }
.action-card button.primary:hover:not(:disabled) { background: var(--accent-2); color: #fff; }
.action-card button:disabled { opacity: .55; }

/* a11y / motion */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .story-step { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 620px) {
  .app { padding: 16px 13px 40px; }
  header { flex-wrap: wrap; gap: 12px; }
  .brand-line { display: none; }
  nav { margin-left: 0; }
  .chat-stream { padding: 18px 18px 18px 20px; }
  .facet-seg p { font-size: 15.5px; }
  .inst-meters { grid-template-columns: 1fr; }
}