/* ══════════════════════════════════════════════════════════════════════
   CREVO DESIGN SYSTEM v2  —  "Heat on graphite"
   By Fable 5 (design) · implemented by Opus 4.8.

   This file is an ADDITIVE OVERRIDE layer loaded AFTER styles.css.
   It (1) repoints the legacy token layer to the v2 palette so the whole
   app re-skins for free, (2) defines the full v2 token set for new
   components, (3) self-hosts Instrument Sans, and (4) re-skins each
   surface onto its real selectors.

   Revert = delete the two <link>/<script> tags. Nothing else touches
   the original stylesheet.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- Instrument Sans (self-hosted, display face) ---------- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ════════════════ TOKEN LAYER ════════════════
   Legacy names (--bg-0, --text-0, --accent, --radius…) are repointed to
   v2 values so existing rules re-skin. v2 names (--bg-page, --tx-1,
   --f-video, --ai, --font-display…) are defined for new components. */

:root, [data-theme="light"] {
  /* v2 canonical — light */
  /* Palette A — "Porcelain" (light): cool neutrals, near-black primary button, slate accent */
  --bg-page:#F4F6F9; --bg-surface:#FFFFFF; --bg-sunken:#E9ECF1; --bg-hover:#F0F2F6;
  --bd:#E2E5EC; --bd-strong:#CBD0DA;
  --tx-1:#0C0E14; --tx-2:#4C5568; --tx-3:#828B9C; --on-accent:#FFFFFF;
  --accent:#4A5A78; --accent-strong:#374663;
  --hero:#12925A; --danger:#C6413A; --ai:#5A46D6; --meta:#2B6BFF;
  --f-video:#D6396A; --f-image:#1483C4; --f-caro:#B8860B; --f-dco:#C56A1E; --f-dpa:#12897C;
  --btn-primary-bg:#14161C; --btn-primary-fg:#F5F7FA; --btn-primary-bg-hover:#000000;
  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:10px; --r-5:14px; --r-full:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:56px;
  --t-fast:120ms; --t-base:180ms; --t-slow:260ms;
  --sh-1:0 1px 2px rgba(28,26,22,.05);
  --sh-2:0 2px 6px rgba(28,26,22,.07), 0 1px 2px rgba(28,26,22,.05);
  --sh-3:0 12px 32px -8px rgba(28,26,22,.18), 0 2px 8px rgba(28,26,22,.06);
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Instrument Sans",var(--font-ui);
  --font-mono:ui-monospace,"Cascadia Code","SF Mono","JetBrains Mono",Consolas,monospace;

  /* legacy aliases → v2 values (re-skins existing styles.css) */
  --bg-0:var(--bg-page); --bg-1:var(--bg-surface); --bg-2:#E9ECF1; --bg-3:#DEE2E9;
  --text-0:var(--tx-1); --text-1:var(--tx-2); --text-2:var(--tx-3);
  --border:var(--bd); --border-strong:var(--bd-strong);
  --accent-hover:var(--accent-strong);
  --accent-bg:color-mix(in srgb,var(--accent) 11%,transparent);
  --accent-text:var(--accent-strong);
  --accent-ring:color-mix(in srgb,var(--accent) 22%,transparent);
  --success:var(--hero); --success-bg:color-mix(in srgb,var(--hero) 13%,transparent);
  --warning:#A9660A; --warning-bg:color-mix(in srgb,#A9660A 13%,transparent);
  --danger-bg:color-mix(in srgb,var(--danger) 11%,transparent);
  --series-1:var(--accent); --series-2:var(--hero); --series-3:var(--ai);
  --series-4:var(--f-video); --series-5:var(--meta);
  --radius-sm:var(--r-2); --radius:var(--r-4); --radius-lg:var(--r-5); --radius-pill:var(--r-full);
  --shadow-1:var(--sh-1); --shadow-2:var(--sh-2); --shadow-pop:var(--sh-3);
  --font:var(--font-ui); --serif:ui-serif,Georgia,"Times New Roman",serif; --mono:var(--font-mono);
  --ease:cubic-bezier(.2,0,0,1);
}

[data-theme="dark"] {
  /* v2 canonical — dark */
  /* Palette A — "Porcelain" (dark, app default): cool graphite, near-white primary button, ice accent */
  --bg-page:#07080C; --bg-surface:#0C0E14; --bg-sunken:#0A0B10; --bg-hover:#12151D;
  --bd:rgba(255,255,255,.09); --bd-strong:rgba(255,255,255,.16);
  --tx-1:#F2F4F8; --tx-2:rgba(236,241,250,.62); --tx-3:rgba(236,241,250,.40); --on-accent:#0C0E14;
  --accent:#AAB8D0; --accent-strong:#DBE4F2;
  --hero:#3DDC8B; --danger:#E5675E; --ai:#8B7CF6; --meta:#5B8CFF;
  --f-video:#F0567A; --f-image:#30B6F5; --f-caro:#FBBF24; --f-dco:#FB8A4B; --f-dpa:#2EC4B6;
  --btn-primary-bg:#F4F6F9; --btn-primary-fg:#0C0E14; --btn-primary-bg-hover:#FFFFFF;
  --sh-1:0 1px 2px rgba(0,0,0,.3);
  --sh-2:0 2px 6px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3);
  --sh-3:0 16px 40px -8px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);

  /* legacy aliases → v2 dark values */
  --bg-0:var(--bg-page); --bg-1:var(--bg-surface); --bg-2:#12151D; --bg-3:#1A1E29;
  --text-0:var(--tx-1); --text-1:var(--tx-2); --text-2:var(--tx-3);
  --border:var(--bd); --border-strong:var(--bd-strong);
  --accent-hover:var(--accent-strong);
  --accent-bg:color-mix(in srgb,var(--accent) 14%,transparent);
  --accent-text:var(--accent-strong);
  --accent-ring:color-mix(in srgb,var(--accent) 32%,transparent);
  --success:var(--hero); --success-bg:color-mix(in srgb,var(--hero) 14%,transparent);
  --warning:#E0A23C; --warning-bg:color-mix(in srgb,#E0A23C 14%,transparent);
  --danger-bg:color-mix(in srgb,var(--danger) 14%,transparent);
  --series-1:var(--accent); --series-2:var(--hero); --series-3:var(--ai);
  --series-4:var(--f-video); --series-5:var(--meta);
  --shadow-1:var(--sh-1); --shadow-2:var(--sh-2); --shadow-pop:var(--sh-3);
}

/* ════════════════ BASE TYPOGRAPHY ════════════════
   Sans is Crevo's voice (display face on headings); mono is Crevo's
   evidence (tabular-nums on every measured value). */

body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; }
h1 { letter-spacing: -0.025em; }

/* every measured value renders in tabular mono — dates, counts, scores, IDs */
.num, .mono, [data-num] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════════════ COMPONENT OVERRIDES ════════════════
   (appended below by the per-surface translation pass) */


/* === Surface: primitives === */
/* Buttons, icon buttons, badges, inputs/search, chips/format-tags, cards, states, toast */
/* All map the Crevo v2 bible treatment onto the app's REAL selectors via tokens. */

/* ---- Buttons: 32px, --r-3, 600/13; default = secondary (surface + bd-strong) ---- */
.btn{
  height:32px;padding:0 12px;gap:6px;border-radius:var(--r-3);
  font:600 13px/1 var(--font-ui);letter-spacing:0;white-space:nowrap;
  border:1px solid var(--bd-strong);background:var(--bg-surface);color:var(--tx-1);
  box-shadow:var(--sh-1);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.btn:hover{background:var(--bg-hover);border-color:var(--tx-3);}
.btn:active{transform:translateY(1px);}
.btn i{font-size:16px;}
.btn:disabled,.btn.is-disabled,.btn[disabled]{opacity:.45;pointer-events:none;}
/* primary = ember */
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:var(--sh-1);}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);}
/* ghost */
.btn.ghost{background:transparent;border-color:transparent;color:var(--tx-2);box-shadow:none;}
.btn.ghost:hover{background:var(--bg-hover);color:var(--tx-1);border-color:transparent;}
/* danger = tinted */
.btn.danger{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 30%,transparent);box-shadow:none;}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 16%,transparent);
  border-color:color-mix(in srgb,var(--danger) 42%,transparent);}
/* accent = Gemini/AI actions (deep-dive, deep-analyze) -> iris, contractual */
.btn.accent{background:color-mix(in srgb,var(--ai) 14%,transparent);color:var(--ai);
  border-color:color-mix(in srgb,var(--ai) 30%,transparent);box-shadow:none;}
.btn.accent:hover{background:color-mix(in srgb,var(--ai) 22%,transparent);
  border-color:color-mix(in srgb,var(--ai) 46%,transparent);color:var(--ai);}
/* sizes */
.btn.sm{height:26px;padding:0 9px;font-size:12px;gap:4px;border-radius:var(--r-2);}
.btn.large{height:40px;padding:0 18px;font-size:14px;}
/* loading spinner (reuses existing @keyframes spin) */
.btn .spin{width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;}

/* ---- Icon buttons ---- */
.iconbtn{
  min-height:32px;padding:0 10px;gap:6px;border-radius:var(--r-3);
  border:1px solid transparent;background:transparent;color:var(--tx-1);font-size:13px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.iconbtn:hover{background:var(--bg-hover);color:var(--tx-1);}
.iconbtn.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);}
.iconbtn i{font-size:17px;}
.iconbtn.cta{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;}
.iconbtn.cta:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);}
/* small icon-only (dense rows) */
.iconbtn-sm{width:28px;height:28px;padding:0;border-radius:var(--r-2);
  background:transparent;border:0;color:var(--tx-2);justify-content:center;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);}
.iconbtn-sm:hover{background:var(--bg-hover);color:var(--tx-1);}
.iconbtn-sm i{font-size:16px;}

/* ---- Badges: count pills -> mono, tabular, sunken/muted, pill ---- */
.badge{
  min-width:18px;height:18px;padding:0 6px;border-radius:var(--r-full);
  background:var(--bg-sunken);color:var(--tx-3);border:1px solid var(--bd);
  font:600 10px/1 var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0;
}

/* ---- Inputs & search: 34px, --r-3, --bd-strong; focus = ember border + 3px ring ---- */
.search-input,.search-select,.search-cap,.creatives-search,.creatives-sort{
  height:34px;padding:0 10px;border-radius:var(--r-3);
  border:1px solid var(--bd-strong);background:var(--bg-surface);color:var(--tx-1);
  font:400 13px/1 var(--font-ui);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.search-input::placeholder,.creatives-search::placeholder{color:var(--tx-3);}
.search-cap{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.search-input:focus,.search-select:focus,.search-cap:focus,.creatives-search:focus,.creatives-sort:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
/* search container ring on focus-within */
.search-bar:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);}
.search-label i{color:var(--accent);}
/* submit button = ember */
.search-go{height:34px;padding:0 16px;gap:6px;border-radius:var(--r-3);
  background:var(--accent);color:var(--on-accent);font:600 13px/1 var(--font-ui);}
.search-go:hover{background:var(--accent-strong);}

/* ---- Chips / tags ---- */
/* base chip -> mono pill */
.chip{
  display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:var(--r-2);
  font:600 11px/1 var(--font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  background:var(--bg-sunken);color:var(--tx-2);
}
/* run-view meta tags -> subtle sunken pill */
.rv-tag{gap:4px;padding:3px 10px;border-radius:var(--r-full);
  background:var(--bg-sunken);color:var(--tx-2);font:500 11.5px/1.4 var(--font-ui);font-variant-numeric:tabular-nums;}
.rv-tag i{color:var(--tx-3);}
/* ad-detail meta tag -> mono format/attr chip */
.adm-tag{padding:2px 8px;border-radius:var(--r-full);
  background:var(--bg-sunken);border:1px solid var(--bd);color:var(--tx-3);
  font:600 10.5px/1.4 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums;}
.adm-tag.accent{background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent);}
/* Gemini deep-analysis tags -> iris (Gemini touched this), contractual */
.da-tag{background:color-mix(in srgb,var(--ai) 14%,transparent);color:var(--ai);
  padding:2px 8px;border-radius:var(--r-full);
  font:600 10px/1.4 var(--font-mono);letter-spacing:0;text-transform:lowercase;}
/* free-scrape quota count -> neutral mono chip */
.anon-quota-chip{padding:3px 10px;border-radius:var(--r-full);
  background:var(--bg-sunken);border:1px solid var(--bd);color:var(--tx-2);
  font:600 11px/1.4 var(--font-mono);font-variant-numeric:tabular-nums;}

/* ---- Format tags: one permanent hue per ad format ---- */
/* brand-analyze format filter pills (data-fmt drives the hue) */
.ba-format-pill{border-radius:var(--r-full);--fc:var(--accent);}
.ba-format-pill[data-fmt="VIDEO"]{--fc:var(--f-video);}
.ba-format-pill[data-fmt="IMAGE"]{--fc:var(--f-image);}
.ba-format-pill[data-fmt="CAROUSEL"]{--fc:var(--f-caro);}
.ba-format-pill[data-fmt="DCO"]{--fc:var(--f-dco);}
.ba-format-pill[data-fmt="DPA"]{--fc:var(--f-dpa);}
.ba-format-pill.active{background:color-mix(in srgb,var(--fc) 16%,transparent);
  color:var(--fc);border-color:color-mix(in srgb,var(--fc) 45%,transparent);}
.ba-format-pill.active .rv-tab-c{background:color-mix(in srgb,var(--fc) 22%,transparent);color:var(--fc);}
/* cluster-breakdown format chips: retokenize hardcoded hex to permanent format hues */
.bdv2-cb-chip.fmt-video{background:color-mix(in srgb,var(--f-video) 22%,transparent);color:var(--f-video);}
.bdv2-cb-chip.fmt-image{background:color-mix(in srgb,var(--f-image) 22%,transparent);color:var(--f-image);}
.bdv2-cb-chip.fmt-dco{background:color-mix(in srgb,var(--f-dco) 24%,transparent);color:var(--f-dco);font-weight:600;}
.bdv2-cb-chip.fmt-dynamic{background:color-mix(in srgb,var(--f-dpa) 22%,transparent);color:var(--f-dpa);}
.bdv2-cb-member-fmt.fmt-dco{background:var(--f-dco);}
.bdv2-cb-member-fmt.fmt-video{background:var(--f-video);}

/* ---- Generic cards: surface/border/radius, hover lift, selected = ember ring ---- */
.creative-card{background:var(--bg-surface);border:1px solid var(--bd);border-radius:var(--r-4);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);}
.creative-card:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--bd-strong);}
.creative-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--sh-1);}
.stat-card{background:var(--bg-surface);border:1px solid var(--bd);border-radius:var(--r-4);}
.stat-card .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}

/* ---- Generic states: empty / loading / error ---- */
.rv-empty{padding:var(--s-6);color:var(--tx-3);}
.rv-loading{padding:var(--s-7) var(--s-6);color:var(--tx-2);}
.rv-loading i{color:var(--accent);}
.rv-error{padding:var(--s-6);border-radius:var(--r-4);color:var(--danger);
  background:color-mix(in srgb,var(--danger) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);}
.rv-error i{color:var(--danger);}
.bdv2-empty-state{color:var(--tx-3);}
.bdv2-empty-state h4{color:var(--tx-1);}

/* ---- Toast: surface + border + sh-3 (not inverted); semantic accents ---- */
.toast{background:var(--bg-surface);color:var(--tx-1);border:1px solid var(--bd);
  box-shadow:var(--sh-3);padding:9px 14px;border-radius:var(--r-4);gap:9px;
  font:500 12.5px/1.3 var(--font-ui);}
.toast i{font-size:16px;}
.toast.ok{border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.toast.ok i{color:var(--accent);}
.toast.info i{color:var(--accent);}
.toast.err{background:var(--bg-surface);color:var(--tx-1);
  border-color:color-mix(in srgb,var(--danger) 45%,transparent);}
.toast.err i{color:var(--danger);}

/* === Surface: chrome === */
/* Global app chrome — topbar, brand, profile, sidebar, drawers, modals.
   Maps Fable5 bible treatments (bb-top, srow, modal, m-av) onto the app's
   REAL selectors. Tokens only; ember is the ONE accent. */

/* ---------- Topbar (bible .bb-top 118 / .m-top 416) ---------- */
.topbar {
  padding: 0 var(--s-5);
  height: 52px;
  background: color-mix(in srgb, var(--bg-page) 84%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bd);
  gap: var(--s-4);
  /* Sit ABOVE the scrape overlay (z-60) so History/Trends/nav stay clickable
     while a scrape is running (the scrape keeps going in the background). */
  z-index: 70;
}
.brand {
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  color: var(--tx-1);
}
/* Quiet layered ember logo — NOT a purple gradient square (bible feel) */
.brand-icon {
  width: 28px; height: 28px; border-radius: var(--r-3);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
  font-size: 15px;
}
.brand .muted { color: var(--tx-3); font-weight: 400; font-size: 12.5px; }

/* Topbar action buttons — bible top-nav a (123): quiet, r-3, hover tint */
.topbar-actions { gap: var(--s-1); }
.topbar-actions .iconbtn {
  color: var(--tx-2);
  font: 500 12.5px/1 var(--font-ui);
  padding: 7px 10px; border-radius: var(--r-3);
  border-color: transparent;
}
.topbar-actions .iconbtn:hover { background: var(--bg-hover); color: var(--tx-1); }
.topbar-actions .iconbtn.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.topbar-actions .iconbtn i { font-size: 16px; }
/* Count badges are measured values -> mono, ember pill */
.topbar-actions .badge {
  background: var(--accent); color: var(--on-accent);
  font: 600 10px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  min-width: 17px; height: 17px; border-radius: var(--r-full);
  top: -4px; right: -4px;
}

/* ---------- Profile avatar + menu (bible .m-av 420 / modal 307) ---------- */
.profile-avatar {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--on-accent);
  font: 700 12px/1 var(--font-mono);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.profile-avatar:hover { transform: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.profile-avatar-initial i { font-size: 16px; }
.profile-menu {
  min-width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-4);
  box-shadow: var(--sh-3);
  padding: var(--s-1);
  top: calc(100% + var(--s-2));
}
.profile-menu-h {
  gap: var(--s-2); padding: 10px 12px 12px;
  border-bottom: 1px solid var(--bd); margin-bottom: var(--s-1);
}
.profile-menu-avatar {
  width: 34px; height: 34px;
  background: var(--bg-sunken); color: var(--tx-2);
  border: 1px solid var(--bd);
}
.profile-menu-name { font-size: 13px; font-weight: 600; color: var(--tx-1); }
.profile-menu-email {
  font: 400 11px/1.3 var(--font-mono); color: var(--tx-3);
}
.profile-menu-item {
  gap: var(--s-2); padding: 7px 12px; border-radius: var(--r-2);
  font-size: 12.5px; color: var(--tx-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.profile-menu-item i { font-size: 15px; color: var(--tx-3); }
.profile-menu-item:hover { background: var(--bg-hover); color: var(--tx-1); }
.profile-menu-item.danger { color: var(--danger); }
.profile-menu-item.danger i { color: var(--danger); }
.profile-menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.profile-menu-sep { height: 1px; background: var(--bd); margin: var(--s-1) 0; }

/* ---------- Sidebar shell + tabs (bible segmented control) ---------- */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--bd);
  padding: var(--s-3) var(--s-2);
}
.side-tabs {
  gap: 2px; padding: 3px;
  background: var(--bg-sunken); border-radius: var(--r-3);
  margin-bottom: var(--s-3);
}
.side-tab {
  gap: 6px; padding: 6px 6px; border-radius: var(--r-2);
  color: var(--tx-2); font: 500 12px/1 var(--font-ui);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.side-tab i { font-size: 15px; }
.side-tab:hover { color: var(--tx-1); }
.side-tab.active { background: var(--bg-surface); color: var(--tx-1); box-shadow: var(--sh-1); }
.side-tab.active i { color: var(--accent); }

/* Section headers (bible .m-side-h 427) */
.side-h {
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tx-3); margin: 0 var(--s-1) var(--s-2);
}

/* ---------- Sidebar rows (bible .srow 293): 32px, icon, label, mono count ---------- */
/* Run hierarchy list */
.run-item {
  gap: 9px; height: 32px; padding: 0 9px; border-radius: var(--r-3);
  font: 500 13px/1 var(--font-ui); color: var(--tx-2);
  border-color: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.run-item:hover { background: var(--bg-hover); color: var(--tx-1); }
.run-item.active { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: transparent; color: var(--tx-1); font-weight: 600; }
.run-item.active .nm { color: var(--tx-1); }
.run-item .runtype {
  width: 22px; height: 22px; border-radius: var(--r-2);
  background: var(--bg-sunken); color: var(--tx-3);
  font-size: 13px;
}
.run-item.active .runtype { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.run-item .meta {
  font: 600 10.5px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--tx-3);
}
.run-item.active .meta { color: var(--accent); opacity: 1; }

/* Active-run badge card */
.active-run-badge .runtype {
  width: 26px; height: 26px; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.active-run-badge .nm { font-weight: 600; font-size: 13px; color: var(--tx-1); }
.active-run-badge .meta { font: 500 11px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-3); }

/* History / brands rows in sidebar (hist-item) — denser, ember-active */
.hist-item {
  background: var(--bg-surface); border: 1px solid var(--bd);
  border-radius: var(--r-3); padding: 10px 12px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hist-item:hover { background: var(--bg-hover); border-color: var(--bd-strong); }
.hist-item.active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Discovery quick actions + suggestion chips */
.side-quick-action {
  background: var(--bg-surface); border: 1px solid var(--bd);
  border-radius: var(--r-3); padding: 10px 12px; margin-bottom: var(--s-2);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.side-quick-action:hover { background: var(--bg-hover); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.side-quick-action i { color: var(--accent); }
.side-quick-action strong { font-size: 13px; color: var(--tx-1); }
.side-quick-action span { font-size: 11px; color: var(--tx-2); }
.side-suggest-chip {
  background: var(--bg-sunken); color: var(--tx-2);
  padding: 4px 10px; border-radius: var(--r-full); font-size: 12px;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.side-suggest-chip:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Workflow steps */
.side-workflow li { border-radius: var(--r-3); }
.side-workflow li:hover { background: var(--bg-hover); color: var(--tx-1); }
.side-workflow .num {
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  font: 600 11px/1 var(--font-mono); font-variant-numeric: tabular-nums;
}

/* Collapse button */
.side-collapse {
  border: 1px solid var(--bd); color: var(--tx-2);
  border-radius: var(--r-3); font-size: 12px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.side-collapse:hover { background: var(--bg-hover); color: var(--tx-1); }

/* ---------- Drawers: History / Trends / Jobs (bible modal surface) ---------- */
.side-drawer, .jobs-drawer {
  background: var(--bg-surface);
  border-left: 1px solid var(--bd);
  box-shadow: var(--sh-3);
  /* Above the scrape overlay (z-60) and the topbar (z-70) so the History
     drawer opens on top when the user taps History mid-scrape. */
  z-index: 80;
}
.drawer-h {
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--bd);
  background: var(--bg-surface);
}
.drawer-h h2 { font: 650 15px/1.2 var(--font-ui); color: var(--tx-1); }
.drawer-h .subtle { font-size: 12px; color: var(--tx-3); }
.jobs-h { font: 650 14px/1.2 var(--font-ui); color: var(--tx-1); margin-bottom: var(--s-3); }
.job {
  padding: 10px 12px; border: 1px solid var(--bd); border-radius: var(--r-3);
  font-size: 12.5px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.job:hover { background: var(--bg-hover); border-color: var(--bd-strong); }
.job .label { color: var(--tx-1); font-weight: 500; }
.job .st {
  font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: var(--r-full);
}
/* semantic: done = hero(green, "completed"), error = danger; running keeps neutral warn tokens */
.job .st.done { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.job .st.error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* ---------- Generic modal shell (bible .modal 307) ---------- */
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-5);
  box-shadow: var(--sh-3);
}
.modal-h {
  padding: 14px var(--s-4);
  border-bottom: 1px solid var(--bd);
}
.modal-h h2 { font: 650 15px/1.2 var(--font-ui); color: var(--tx-1); }
.modal-b { padding: var(--s-4); color: var(--tx-2); font-size: 13px; }
.modal-actions {
  gap: var(--s-2); padding: 12px var(--s-4);
  border-top: 1px solid var(--bd); background: var(--bg-hover);
}

/* ---------- Settings modal (bible modal rhythm) ---------- */
.settings-body { padding: var(--s-6) var(--s-7) var(--s-6); }
.settings-h { margin-bottom: var(--s-5); }
.settings-h h2 { font: 650 17px/1.2 var(--font-display); color: var(--tx-1); }
.settings-section { margin-bottom: var(--s-5); }
.settings-label {
  font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tx-3); margin-bottom: 6px;
}
.settings-input {
  padding: 9px 12px; border-radius: var(--r-3);
  background: var(--bg-sunken); color: var(--tx-1);
  border: 1px solid var(--bd);
  font-family: var(--font-mono); font-size: 13px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.settings-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.settings-hint { font-size: 11.5px; color: var(--tx-3); }
.settings-hint a { color: var(--accent); }
.settings-footer { border-top: 1px solid var(--bd); padding-top: var(--s-4); }

/* === Surface: home === */
/* Signed-in home + onboarding: search cards, mode/country controls, Gemini nudge, welcome, scrape overlay + stepper. */
/* Maps bible signed-in home (.H-*, lines 483-507) + welcome + scrape treatments onto the app's REAL selectors, all via tokens. */

/* ---- Search stack + cards (bible .H-searchbox: surface, --bd-strong, --r-5, --sh-2) ---- */
.search-stack { gap: var(--s-3); margin-bottom: var(--s-6); }
.search-bar {
  background: var(--bg-surface);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-5);
  box-shadow: var(--sh-2);
  padding: var(--s-4);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: var(--sh-2), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.search-bar-brand:focus-within {
  border-color: var(--accent);
  box-shadow: var(--sh-2), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* label row — muted uppercase micro-label; single ember accent icon on both bars (one-accent rule) */
.search-label {
  gap: var(--s-2);
  font: 600 11px/1 var(--font-ui);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tx-3); margin-bottom: var(--s-3);
}
.search-label i { font-size: 15px; color: var(--accent); }
.search-bar-brand .search-label i { color: var(--accent); }

.search-fields { gap: var(--s-2); }

/* text input — bible .H-input .fake: quiet field, tx-3 placeholder, tx-1 typed */
.search-input {
  padding: 0 var(--s-3);
  height: 36px; min-width: 0;
  border: 1px solid var(--bd);
  background: var(--bg-page);
  color: var(--tx-1);
  border-radius: var(--r-3);
  font: 400 14px/36px var(--font-ui);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search-input::placeholder { color: var(--tx-3); }
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* country <select> — styled to read as the bible .H-pill: pill radius, mono tabular country codes */
.search-select {
  width: auto; min-width: 66px;
  height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--bd-strong);
  background: var(--bg-surface);
  color: var(--tx-1);
  border-radius: var(--r-full);
  font: 600 12px/34px var(--font-mono);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.search-select:hover { background: var(--bg-hover); }
.search-select:focus { outline: none; border-color: var(--accent); }

/* ad-cap number — measured value → mono tabular (MONO rule) */
.search-cap {
  width: 84px; height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--bd);
  background: var(--bg-page);
  color: var(--tx-1);
  border-radius: var(--r-3);
  font: 500 13px/34px var(--font-mono);
  text-align: right; font-variant-numeric: tabular-nums;
}
.search-cap:focus { outline: none; border-color: var(--accent); }

/* submit — bible btn primary: ember fill, on-accent text, 36px, r-3. Both bars use the ONE accent. */
.search-go {
  background: var(--accent); color: var(--on-accent);
  border: 0; height: 36px; padding: 0 var(--s-4);
  border-radius: var(--r-3); cursor: pointer;
  font: 600 13px/1 var(--font-ui);
  display: inline-flex; align-items: center; gap: var(--s-2);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease);
}
.search-go i { font-size: 15px; }
.search-bar-brand .search-go { background: var(--accent); }
.search-go:hover { background: var(--accent-strong); }
.search-bar-brand .search-go:hover { background: var(--accent-strong); filter: none; }
.search-go:active { transform: translateY(0.5px); }

.search-hint { font-size: 11.5px; color: var(--tx-3); margin-top: var(--s-2); line-height: 1.5; }

/* ---- Sidebar quick-start actions (keyword vs brand mode entry) ---- */
.side-quick-action {
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-3);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.side-quick-action:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--bd));
}
.side-quick-action i { color: var(--accent); }
.side-quick-action strong { color: var(--tx-1); }
.side-quick-action span { color: var(--tx-3); }

/* suggested-angle chips — bible pill (H-pill idle) */
.side-suggest-chip {
  background: var(--bg-sunken);
  border: 1px solid var(--bd);
  border-radius: var(--r-full);
  color: var(--tx-2);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.side-suggest-chip:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---- Mode toggle (keyword/brand) — bible .H-mode on = ember tint ---- */
.modeselect label {
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-3);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.modeselect label:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-surface));
  border-color: var(--accent);
}
.modeselect .mt i { color: var(--accent); }
.modeselect .md { color: var(--tx-2); }

/* ---- Gemini nudge banner — bible .H-nudge: IRIS/--ai because it's about Gemini ---- */
.gemini-banner {
  background: color-mix(in srgb, var(--ai) 7%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--ai) 35%, transparent);
  border-radius: var(--r-4);
  padding: var(--s-3) var(--s-4);
}
.gemini-banner-inner { gap: var(--s-3); }
.gemini-banner-inner > i {
  font-size: 20px; color: var(--ai);
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-3); display: grid; place-items: center;
  background: color-mix(in srgb, var(--ai) 14%, transparent);
}
.gemini-banner-txt strong { color: var(--tx-1); font: 650 13px/1.3 var(--font-ui); }
.gemini-banner-txt span { color: var(--tx-2); font-size: 12px; }
/* keep the "Add key" CTA on the ONE accent (ember), not iris */
#geminiKeyBanner .gemini-banner-actions .btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
#geminiKeyBanner .gemini-banner-actions .btn.primary:hover { background: var(--accent-strong); }

/* ---- No-Helper warning — --danger semantic ---- */
.no-helper-warn {
  background: color-mix(in srgb, var(--danger) 8%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--bd));
  border-radius: var(--r-4);
}
.no-helper-inner { gap: var(--s-3); }
.no-helper-inner > i { color: var(--danger); font-size: 22px; }
.no-helper-inner strong { color: var(--tx-1); }
.no-helper-inner p { color: var(--tx-2); }
.no-helper-inner a { color: var(--accent); }

/* ---- Welcome overlay (first-run onboarding): calm, editorial ---- */
.welcome-overlay {
  background: color-mix(in srgb, var(--bg-page) 90%, transparent);
  backdrop-filter: blur(10px);
}
.welcome-card {
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-5);
  box-shadow: var(--sh-3);
  padding: var(--s-8) var(--s-7) var(--s-7);
}
/* icon: ember tint square (drop the purple gradient — iris reads as Gemini, not brand) */
.welcome-icon {
  width: 52px; height: 52px; border-radius: var(--r-4);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.welcome-icon i { font-size: 26px; }
.welcome-h1 {
  font-family: var(--font-display);
  font-weight: 750; letter-spacing: -0.02em;
  font-size: 24px; color: var(--tx-1);
}
.welcome-lede { color: var(--tx-2); font-size: 13.5px; line-height: 1.55; }
.welcome-bullets {
  background: var(--bg-sunken);
  border: 1px solid var(--bd);
  border-radius: var(--r-4);
}
.welcome-b { color: var(--tx-2); }
.welcome-b i { color: var(--accent); }
.welcome-b strong { color: var(--tx-1); }
.welcome-field label { color: var(--tx-3); font-size: 11px; letter-spacing: .05em; }
.welcome-field label .req { color: var(--danger); }
/* API key is a measured/opaque value → mono */
.welcome-field input {
  background: var(--bg-sunken);
  border: 1px solid var(--bd);
  border-radius: var(--r-3);
  color: var(--tx-1);
  font-family: var(--font-mono); font-size: 13px;
}
.welcome-field input:focus { border-color: var(--accent); }
.welcome-eye { color: var(--tx-3); border-radius: var(--r-2); }
.welcome-eye:hover { color: var(--tx-1); }
.welcome-help { color: var(--tx-3); }
.welcome-help a { color: var(--accent); }
/* primary CTA — ember */
.welcome-actions .btn.primary,
#welcomeSubmit.btn.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.welcome-actions .btn.primary:hover,
#welcomeSubmit.btn.primary:hover { background: var(--accent-strong); }
.welcome-test-status.ok { color: var(--accent); }
.welcome-test-status.err { color: var(--danger); }

/* ---- In-page dismissable welcome panel ---- */
.welcome {
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-4);
  padding: var(--s-6) var(--s-7); margin-bottom: var(--s-6);
}
.welcome::before {
  background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 50%);
}
.welcome h1 { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.02em; font-size: 24px; color: var(--tx-1); }
.welcome p { color: var(--tx-2); font-size: 14px; }
.welcome-close { background: var(--bg-sunken); color: var(--tx-2); }
.welcome-close:hover { background: var(--bg-hover); color: var(--tx-1); }

/* ---- Stepper (workflow) — tokens; active = ember tint, numbers mono ---- */
.stepper {
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-4);
  padding: var(--s-3); margin-bottom: var(--s-6);
}
.step {
  gap: var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-3);
  border-right: 1px solid var(--bd);
  transition: background var(--t-fast) var(--ease);
}
.step:hover { background: var(--bg-hover); }
.step.active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* completed step — ember tint (NOT green: --hero is reserved for winning/scaled) */
.step.done .step-num {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
.step-num {
  width: 24px; height: 24px; border-radius: var(--r-full);
  background: var(--bg-sunken); color: var(--tx-2);
  font: 700 12px/1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.step.active .step-num { background: var(--accent); color: var(--on-accent); }
.step-text .t { font-weight: 500; font-size: 13px; color: var(--tx-1); }
.step.active .step-text .t { color: var(--accent); }
.step-text .s { font-size: 11px; color: var(--tx-3); }
.step[data-nav]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* empty-state block */
#emptyState .empty-block .icon-wrap { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#emptyState .empty-block h2 { font-family: var(--font-display); color: var(--tx-1); letter-spacing: -0.01em; }
#emptyState .empty-block p { color: var(--tx-2); }

/* ---- Scrape progress overlay — tokens, keep function ---- */
.scrape-overlay {
  background: color-mix(in srgb, var(--bg-page) 78%, transparent);
  backdrop-filter: blur(8px);
}
.scrape-card {
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-5);
  box-shadow: var(--sh-3);
  padding: var(--s-7) var(--s-7);
}
/* success/fail: use ember for completion (—hero stays reserved for "winning"), danger for fail */
.scrape-card.success { border-color: color-mix(in srgb, var(--accent) 45%, var(--bd)); }
.scrape-card.fail { border-color: color-mix(in srgb, var(--danger) 45%, var(--bd)); }
.scrape-icon {
  width: 60px; height: 60px; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.scrape-card.success .scrape-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.scrape-card.fail .scrape-icon { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.scrape-icon i { font-size: 28px; }
.scrape-card h2 { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.01em; font-size: 20px; color: var(--tx-1); }
.scrape-sub { color: var(--tx-2); font-size: 13px; }
.scrape-stats { gap: var(--s-2); }
.scrape-stat { background: var(--bg-sunken); border-radius: var(--r-3); padding: var(--s-3) var(--s-2); }
/* counts (ads found, elapsed, status) → mono tabular (MONO rule) */
.scrape-stat .num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 700; color: var(--tx-1); letter-spacing: -0.01em;
}
.scrape-stat .lbl { color: var(--tx-3); font-size: 10.5px; letter-spacing: .06em; }
/* editorial encouragement line — quiet UI face, not serif */
.scrape-encouragement { font-family: var(--font-ui); font-size: 13px; color: var(--tx-2); line-height: 1.5; }
.scrape-actions .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.scrape-actions .btn.primary:hover { background: var(--accent-strong); }
/* technical log — sunken mono panel, tokenized so it flips with theme */
.scrape-log {
  background: var(--bg-sunken);
  color: var(--tx-2);
  border: 1px solid var(--bd);
  border-radius: var(--r-3);
  font-family: var(--font-mono); font-size: 10.5px;
}

/* === Surface: landing_auth === */
/* No signed-out marketing/landing view exists in the app (only #welcomeOverlay, a
   signed-in onboarding modal). Landing page = future build. This restyles the real
   signed-out surfaces: login.html + signup.html (classes .auth-wrap/.auth-card/etc,
   which had NO prior styles anywhere). Values map the bible's card/button/input
   treatment onto the app's actual auth markup. Auth pages only load styles.css +
   styles-v2.css, so these are scoped to .auth-wrap/.auth-card to avoid touching the
   main app's global .btn. */

/* Full-viewport centered stage on the page ground */
.auth-wrap{
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s-6);
  background:var(--bg-page);
  color:var(--tx-1);
  font-family:var(--font-ui);
}

/* Elevated surface card — bible .card lineage bumped to r-5 + sh-3 */
.auth-wrap .auth-card{
  width:100%;max-width:384px;
  background:var(--bg-surface);
  border:1px solid var(--bd);
  border-radius:var(--r-5);
  box-shadow:var(--sh-3);
  padding:var(--s-7) var(--s-6) var(--s-6);
  text-align:center;
}

/* Brand-mark: replace the raw 🔭 emoji with a clean ember-tinted tile
   (matches bible feature-icon idiom: tinted accent bg + accent ring).
   Emoji desaturated so it reads as one ember badge, not a stray color. */
.auth-wrap .brand-mark{
  width:52px;height:52px;
  margin:0 auto var(--s-4);
  display:grid;place-items:center;
  border-radius:var(--r-4);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 55%,transparent);
  font-size:24px;line-height:1;
  filter:grayscale(1) brightness(.55) sepia(1) saturate(3) hue-rotate(-12deg);
}

/* Headings — display face, tight tracking, compact per density spec */
.auth-wrap .auth-card h1{
  font:700 24px/1.15 var(--font-display);
  letter-spacing:-.02em;
  color:var(--tx-1);
  margin:0 0 var(--s-2);
}

/* Lede — secondary text, readable measure */
.auth-wrap .lede{
  font:400 13.5px/1.5 var(--font-ui);
  color:var(--tx-2);
  margin:0 auto var(--s-6);
  max-width:34ch;
}

/* Form + fields — left-aligned controls inside the centered card */
.auth-wrap form{
  display:flex;flex-direction:column;gap:var(--s-4);
  text-align:left;
}
.auth-wrap .field{
  display:flex;flex-direction:column;gap:6px;max-width:none;
}
/* Field labels — bible mono uppercase micro-label */
.auth-wrap .field label{
  font:600 11px/1 var(--font-mono);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx-3);
}
.auth-wrap .field label span{
  color:var(--tx-3);/* (optional) hint inherits muted */
}

/* Inputs — bible .input treatment mapped onto the raw <input> children */
.auth-wrap .field input{
  height:38px;width:100%;
  padding:0 12px;
  border-radius:var(--r-3);
  border:1px solid var(--bd-strong);
  background:var(--bg-surface);
  color:var(--tx-1);
  font:400 13.5px/1 var(--font-ui);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.auth-wrap .field input::placeholder{color:var(--tx-3)}
.auth-wrap .field input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.auth-wrap .field input:disabled{opacity:.5;cursor:not-allowed}

/* Status line — hidden until populated; error uses semantic danger token */
.auth-wrap .status{
  font:500 12.5px/1.4 var(--font-ui);
  color:var(--tx-2);
}
.auth-wrap .status:empty{display:none}
.auth-wrap .status.error{
  color:var(--danger);
  background:color-mix(in srgb,var(--danger) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
  border-radius:var(--r-3);
  padding:8px 10px;
}

/* Primary submit — ember, full-width, on-accent text (overrides global .btn) */
.auth-wrap .btn.primary.wide,
.auth-wrap .btn.wide{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:38px;padding:0 16px;margin-top:var(--s-1);
  border:1px solid transparent;
  border-radius:var(--r-3);
  font:600 13.5px/1 var(--font-ui);
  box-shadow:var(--sh-1);
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.auth-wrap .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.auth-wrap .btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.auth-wrap .btn.primary:active{transform:translateY(1px)}
.auth-wrap .btn.primary:disabled,
.auth-wrap .btn.primary[disabled]{opacity:.5;pointer-events:none}

/* Footer switch link */
.auth-wrap .foot{
  margin-top:var(--s-5);
  font:400 12.5px/1.5 var(--font-ui);
  color:var(--tx-3);
  text-align:center;
}
.auth-wrap .foot a,
.auth-wrap .lede a{
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
}
.auth-wrap .foot a:hover,
.auth-wrap .lede a:hover{color:var(--accent-strong);text-decoration:underline}

/* Tokens flip for dark automatically; the grayscale/sepia emoji filter is
   hue-based (ember in both themes), so no [data-theme] override needed. */


/* === Surface: adcard — Crevo v2 ad card, grid, filter bar + ad detail modal === */

/* ---- Creatives grid container ---- */
/* Two prior defs exist (styles.css:1153 minmax220, :7992 minmax180); appended = wins */
.creatives-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:var(--s-4);
}

/* ---- Filter / toolbar bar (creatives tab) ---- */
.creatives-toolbar{
  display:flex;align-items:center;gap:var(--s-3);
  margin-bottom:var(--s-5);padding:0;flex-wrap:wrap;
}
.creatives-search{
  flex:1;min-width:240px;height:34px;padding:0 var(--s-3);
  background:var(--bg-surface);border:1px solid var(--bd-strong);
  border-radius:var(--r-3);color:var(--tx-1);
  font:400 13px/1 var(--font-ui);
}
.creatives-search::placeholder{color:var(--tx-3)}
.creatives-search:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.creatives-sort{
  height:34px;padding:0 var(--s-3);
  background:var(--bg-surface);border:1px solid var(--bd-strong);
  border-radius:var(--r-3);color:var(--tx-1);
  font:500 12.5px/1 var(--font-ui);cursor:pointer;
}
.creatives-sort:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
}
.creatives-toolbar .muted{
  margin-left:auto;font:500 11.5px/1 var(--font-mono);
  font-variant-numeric:tabular-nums;color:var(--tx-3);
}

/* ---- The ad card shell (bible .adcard, lines 340-373) ---- */
.creative-card{
  background:var(--bg-surface);
  border:1px solid var(--bd);
  border-radius:var(--r-4);
  overflow:hidden;cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease);
}
.creative-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-3);
  border-color:var(--bd-strong);
}

/* ---- Media area (bible .ac-media) ---- */
.cc-media{
  position:relative;aspect-ratio:4/5;
  background:var(--bg-sunken);overflow:hidden;
}
.cc-media img{width:100%;height:100%;object-fit:cover;display:block}
.cc-noimg{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:var(--tx-3);font-size:30px;
}

/* Format chip — dark glass over media (Meta-library style), format-hue left rule */
.cc-fmt{
  position:absolute;top:var(--s-2);left:var(--s-2);
  display:inline-flex;align-items:center;height:19px;padding:0 7px;
  background:rgba(14,12,9,.66);backdrop-filter:blur(4px);
  border-radius:var(--r-1);border-left:2px solid var(--bd-strong);
  font:700 10px/1 var(--font-mono);letter-spacing:.05em;
  color:#fff;text-transform:uppercase;
}
.creative-card[data-fmt="video"] .cc-fmt{border-left-color:var(--f-video)}
.creative-card[data-fmt="image"] .cc-fmt{border-left-color:var(--f-image)}
.creative-card[data-fmt="caro"]  .cc-fmt{border-left-color:var(--f-caro)}
.creative-card[data-fmt="dco"]   .cc-fmt{border-left-color:var(--f-dco)}
.creative-card[data-fmt="dpa"]   .cc-fmt{border-left-color:var(--f-dpa)}

/* ×N versions pill (bible .ac-ver) — kept top-right to avoid collision with
   bottom-left/right ba-days/ba-lowimp overlays used on analytics cards */
.cc-iter{
  position:absolute;top:var(--s-2);right:var(--s-2);
  display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;
  background:rgba(14,12,9,.72);backdrop-filter:blur(4px);
  border-radius:var(--r-full);
  font:700 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;
  color:#fff;
}

/* Days / low-impression flags (bible .ac-dur + chip.low, lines 356/261) */
.ba-days{
  position:absolute;left:var(--s-2);bottom:var(--s-2);
  height:20px;padding:0 6px;display:inline-flex;align-items:center;
  background:rgba(14,12,9,.72);backdrop-filter:blur(4px);
  border-radius:var(--r-1);
  font:600 10.5px/1 var(--font-mono);font-variant-numeric:tabular-nums;
  color:#fff;
}
.ba-lowimp{
  position:absolute;right:var(--s-2);bottom:var(--s-2);
  height:20px;padding:0 7px;display:inline-flex;align-items:center;
  background:color-mix(in srgb,var(--danger) 88%,#000);
  border-radius:var(--r-1);
  font:700 10px/1 var(--font-mono);letter-spacing:.03em;color:#fff;
}

/* Centered play button — injected by app-v2.js on video cards (bible .ac-play) */
.cc-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;
  background:rgba(14,12,9,.62);backdrop-filter:blur(3px);
  display:grid;place-items:center;color:#fff;
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none;
  transition:transform var(--t-fast) var(--ease);
}
.cc-play svg{margin-left:1px}
.creative-card:hover .cc-play{transform:translate(-50%,-50%) scale(1.08)}

/* Hover action bar over media — injected by app-v2.js (bible .ac-actions) */
.cc-actions{
  position:absolute;inset:auto 0 0 0;z-index:2;
  display:flex;gap:6px;padding:var(--s-2);
  background:linear-gradient(transparent,rgba(14,12,9,.78) 55%);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.creative-card:hover .cc-actions{opacity:1;transform:none}
.cc-act{
  flex:1;height:28px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);color:#1C1A16;
  border:none;border-radius:var(--r-2);cursor:pointer;
  font:600 11.5px/1 var(--font-ui);white-space:nowrap;text-decoration:none;
  transition:background var(--t-fast) var(--ease);
}
.cc-act:hover{background:#fff}
.cc-act:active{transform:translateY(1px)}

/* Footer (bible .ac-foot / .ac-hook) */
.cc-body{padding:9px 11px;display:flex;flex-direction:column;gap:6px}
.cc-title{
  font:600 12.5px/1.35 var(--font-ui);color:var(--tx-1);
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  margin:0;min-height:2.5em;
}
/* meta line carries measured values ("23d · gap 5d") AND text ("brand · CTA");
   ui font + tabular-nums keeps numbers aligned without mono-ing brand names */
.cc-meta{
  font:450 11px/1.4 var(--font-ui);font-variant-numeric:tabular-nums;
  color:var(--tx-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Mobile: near-full width, square-ish media (bible .adcard.mobilew) */
@media (max-width:480px){
  .creatives-grid{grid-template-columns:1fr;gap:var(--s-3)}
  .cc-media{aspect-ratio:1/1}
  .cc-actions{opacity:1;transform:none}   /* no hover on touch — always show */
}

/* ═══════════════════════════════════════════════════════════════════════
   Ad detail modal — bible .AM (lines 601-618)
   ═══════════════════════════════════════════════════════════════════════ */

.ad-detail-modal{
  background:rgba(14,12,9,.72);backdrop-filter:blur(4px);
  padding:var(--s-6);
}
.adm-inner{
  grid-template-columns:minmax(320px,1fr) 420px;
  background:var(--bg-surface);
  border:1px solid var(--bd);
  border-radius:var(--r-5);
  box-shadow:var(--sh-3);
  max-width:1100px;max-height:88vh;
}
.adm-close{
  top:var(--s-3);right:var(--s-3);
  width:32px;height:32px;border-radius:var(--r-full);
  background:rgba(14,12,9,.5);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);color:#fff;
}
.adm-close:hover{background:rgba(14,12,9,.78);border-color:rgba(255,255,255,.4)}

/* Media pane — dark (bible .AM-media #0F0D0B) */
.adm-media{background:#0F0D0B}
.adm-slide-count{
  background:rgba(14,12,9,.66);backdrop-filter:blur(8px);
  border-radius:var(--r-full);
  font:600 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:#fff;
}
.adm-nav{
  width:38px;height:38px;border-radius:var(--r-full);
  background:rgba(14,12,9,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);color:#fff;
}
.adm-nav:hover{background:rgba(14,12,9,.82);border-color:rgba(255,255,255,.4)}

/* Panel (bible .AM-panel / .AM-b) */
.adm-side{
  background:var(--bg-surface);
  padding:var(--s-5);gap:var(--s-4);
}

/* Header (bible .AM-h) */
.adm-h{
  padding-bottom:var(--s-4);
  border-bottom:1px solid var(--bd);
}
.adm-h .adm-brand{
  display:flex;align-items:center;gap:8px;
  font:650 14px/1.2 var(--font-ui);color:var(--tx-1);margin-bottom:8px;
}
.adm-h .adm-brand i{color:var(--tx-3)}
.adm-meta{display:flex;gap:6px;flex-wrap:wrap}
.adm-tag{
  height:20px;padding:0 8px;display:inline-flex;align-items:center;
  background:color-mix(in srgb,var(--tx-2) 10%,transparent);
  border:none;border-radius:var(--r-2);
  font:600 10.5px/1 var(--font-mono);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;color:var(--tx-2);
}
.adm-tag.accent{
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  color:var(--accent);border:none;
}

/* Section labels = bible .AM-kv dt (mono uppercase muted) */
.adm-sec h3{
  font:600 10.5px/1.9 var(--font-mono);
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx-3);margin:0 0 6px;
}
.adm-title{font:600 15px/1.4 var(--font-ui);color:var(--tx-1);margin:0}

/* Body copy panel = bible .AM-body-tx (bordered, sunken) */
.adm-body{
  font:450 13px/1.55 var(--font-ui);color:var(--tx-2);margin:0;
  border:1px solid var(--bd);border-radius:var(--r-3);
  padding:10px 12px;background:var(--bg-hover);
}
.adm-body.muted{
  color:var(--tx-3);font-size:12px;
  border:none;padding:0;background:transparent;
}
/* deep-analysis body paragraphs render inside their own blocks — no double frame */
.adm-deep-body .adm-body,.adm-deep-block .adm-body{
  border:none;padding:0;background:transparent;color:var(--tx-1);
}
.adm-cta{
  padding:8px 12px;background:var(--bg-sunken);
  border:1px solid var(--bd);border-radius:var(--r-3);
  color:var(--tx-1);font:500 13px/1 var(--font-ui);
}
.adm-cta i{color:var(--accent)}
.adm-link{
  color:var(--accent);font:500 12px/1.5 var(--font-mono);word-break:break-all;
}

/* Footer actions (bible .AM-f) */
.adm-actions{
  gap:8px;margin-top:auto;padding-top:var(--s-4);
  border-top:1px solid var(--bd);
}
.adm-actions .btn{
  height:34px;border-radius:var(--r-3);
  font:600 13px/1 var(--font-ui);justify-content:center;
}
.adm-actions .btn.primary{background:var(--accent);color:var(--on-accent);border:none}
.adm-actions .btn.primary:hover{background:var(--accent-strong)}
/* "Open in Meta" = leaving Crevo for Meta → contractual --meta blue */
.adm-actions .btn.ghost{
  background:color-mix(in srgb,var(--meta) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--meta) 32%,transparent);
  color:var(--meta);
}
.adm-actions .btn.ghost:hover{
  background:color-mix(in srgb,var(--meta) 16%,transparent);
  border-color:color-mix(in srgb,var(--meta) 45%,transparent);
  color:var(--meta);
}

/* "Deep analyze with Gemini" trigger = Gemini touched → contractual --ai iris
   (bible .btn.aibtn, line 616) */
#admDeepFire.btn.primary{
  background:color-mix(in srgb,var(--ai) 12%,transparent);
  color:var(--ai);
  border:1px solid color-mix(in srgb,var(--ai) 32%,transparent);
}
#admDeepFire.btn.primary:hover{
  background:color-mix(in srgb,var(--ai) 18%,transparent);
}
.adm-deep-loading > i,.adm-deep-loading i{color:var(--ai)}

/* Modal mobile split (bible full-width stack) */
@media (max-width:800px){
  .ad-detail-modal{padding:0}
  .adm-inner{
    grid-template-columns:1fr;grid-template-rows:1fr auto;
    max-height:100vh;border-radius:0;border:none;
  }
  .adm-side{max-height:46vh;padding:var(--s-4)}
}

/* === Surface: dashboard (run header + brand leaderboard + brand-analyze modal) === */
/* Maps Fable-5 bible R-head (512-516), .lb leaderboard (518-535), .mixbar (475-478),
   .modal + .state treatments onto the app's REAL selectors: .rv-head, .brand-row, .ba-*.
   Every measured value uses --font-mono + tabular-nums. Tokens flip for light/dark. */

/* ---- Run header (bible R-head / R-title, lines 512-516) ---- */
.rv-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--bd);
}
.rv-title h1,
.run-header h1 {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.1; font-weight: 700;
  letter-spacing: -.02em; color: var(--tx-1); margin: 0 0 var(--s-2);
}
.rv-meta { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
/* meta tags -> mono, muted, hover-surface chip */
.rv-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: var(--r-full);
  background: var(--bg-hover); border: 1px solid var(--bd);
  font-family: var(--font-mono); font-size: 11px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--tx-3);
}
.rv-tag i { font-size: 13px; color: var(--tx-3); }
.run-header .meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--tx-3);
  margin-top: var(--s-1); font-variant-numeric: tabular-nums;
}
.runtype-pill {
  height: 22px; padding: 0 9px; border-radius: var(--r-full);
  background: var(--bg-hover); color: var(--tx-2); border: 1px solid var(--bd);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}

/* ---- Header stat cluster (right): mono tabular numbers, uppercase mono labels ---- */
.rv-stats-inline { display: flex; gap: var(--s-6); flex-shrink: 0; align-items: flex-end; }
.rv-stats-inline > div { text-align: right; }
.rv-stats-inline .n {
  display: block; font-family: var(--font-mono);
  font-size: 22px; font-weight: 700; line-height: 1.05;
  color: var(--tx-1); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.rv-stats-inline .l {
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: 10px; line-height: 1.3;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tx-3);
}

/* ---- Flow-stat strip (scraped -> creatives -> brands), bible D-stat mono ---- */
.fs-n {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  color: var(--tx-1); font-variant-numeric: tabular-nums;
}
.fs-l {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tx-3); margin-top: 2px;
}

/* ---- Leaderboard toolbar (bible lb sits under a compact toolbar) ---- */
.brands-toolbar { gap: var(--s-4); margin-bottom: var(--s-3); }
.brands-toolbar h2 {
  font-family: var(--font-display); font-size: 15px; font-weight: 650;
  letter-spacing: -.01em; color: var(--tx-1); margin: 0 0 var(--s-1);
}
.brands-toolbar p { font-size: 12px; color: var(--tx-3); }

/* ---- Brand leaderboard as a REAL table (bible .lb, lines 518-535) ----
   Collapse the gap'd-card list into one bordered surface; rows are 46px,
   divided by hairlines, hover-tinted. Actions reveal on row hover/focus. */
.brands-list {
  display: block; gap: 0;
  background: var(--bg-surface); border: 1px solid var(--bd);
  border-radius: var(--r-4); overflow: hidden;
}
.brand-row {
  display: grid;
  grid-template-columns: 34px minmax(150px, 1fr) 110px 90px auto;
  align-items: center; gap: var(--s-3);
  height: 46px; padding: 0 var(--s-4);
  background: transparent; border: 0;
  border-bottom: 1px solid var(--bd); border-radius: 0;
  transition: background var(--t-fast) var(--ease);
}
.brands-list .brand-row:last-child { border-bottom: 0; }
.brand-row:hover { background: var(--bg-hover); border-color: var(--bd); }

/* rank -> mono muted (bible .lb-rank) */
.brand-rank {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--tx-3); font-variant-numeric: tabular-nums;
  text-align: right; width: 100%;
}

/* brand cell -> bold name (bible .lb-brand b). Avatar has no DOM hook; a CSS
   monogram square precedes the name to echo the bible avatar (.ac-av 345-346). */
.brand-name-wrap {
  min-width: 0; display: flex; align-items: center; gap: 9px;
}
.brand-name-wrap::before {
  content: ""; flex: none; width: 22px; height: 22px;
  border-radius: var(--r-2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, var(--bd-strong)), var(--bd-strong));
}
.brand-name {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 650;
  line-height: 1.2; color: var(--tx-1); margin: 0; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* the share bar -> thin mixbar look (bible .mixbar 475-478); single metric so
   one accent fill on a sunken track. Lives under the name via a full-width row. */
.brand-name-wrap { flex-wrap: wrap; }
.brand-bar-wrap {
  flex: 1 1 100%; order: 3; margin-left: 31px;
  height: 4px; background: var(--bg-sunken); border-radius: 2px;
  overflow: hidden; margin-top: 5px;
}
.brand-bar {
  height: 100%; border-radius: 2px;
  background: var(--accent); transition: width var(--t-slow) var(--ease);
}

/* count column -> right-aligned mono (bible .lb-num) */
.brand-count { text-align: right; }
.brand-count .n {
  display: block; font-family: var(--font-mono); font-size: 14px;
  font-weight: 700; line-height: 1.1; color: var(--tx-1);
  font-variant-numeric: tabular-nums;
}
.brand-count .l {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tx-3);
}

/* actions -> revealed on row hover/focus (bible .lb-acts 532-534) */
.brand-actions {
  display: flex; gap: var(--s-1); justify-content: flex-end; align-items: center;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
}
.brand-row:hover .brand-actions,
.brand-row:focus-within .brand-actions { opacity: 1; }
.brand-actions .btn.sm {
  height: 24px; padding: 0 8px; border-radius: var(--r-2);
  font-size: 11.5px; gap: 4px;
}
.brand-actions .btn.ghost {
  color: var(--tx-2); background: transparent; border: 1px solid transparent;
}
.brand-actions .btn.ghost:hover {
  color: var(--tx-1); background: var(--bg-surface); border-color: var(--bd);
}
/* copy button is icon-only -> square 24px (bible 24px icon buttons) */
.brand-actions .btn.sm[data-action="copy"] { width: 24px; padding: 0; }
.brand-actions .btn.sm i { font-size: 14px; }
/* Deep Analyze stays the ember primary (bible .btn.primary 221) */
.brand-actions .btn.accent {
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent); box-shadow: var(--sh-1);
}
.brand-actions .btn.accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* keyboard focus visibility inside a hover-revealed group */
.brand-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Brand-analyze modal (bible .modal + .state) ---- */
.ba-modal { background: var(--bg-page); animation: fadein var(--t-slow) var(--ease); }
.ba-header {
  padding: var(--s-8) var(--s-9) var(--s-6);
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-page) 100%);
  display: flex; gap: var(--s-6); align-items: flex-start;
  position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--bd);
}
.ba-close {
  background: transparent; border: 1px solid var(--bd-strong); color: var(--tx-2);
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--t-fast) var(--ease);
}
.ba-close:hover { border-color: var(--tx-1); color: var(--tx-1); background: var(--bg-hover); }
.ba-close i { font-size: 18px; }
.ba-brand-name {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; color: var(--tx-1); margin: 0 0 var(--s-3);
}
.ba-brand-pitch {
  font-family: var(--font-display); font-size: 18px; font-style: italic;
  color: var(--tx-1); line-height: 1.5; margin: 0 0 var(--s-3);
  max-width: 780px; letter-spacing: -.005em;
}
.ba-brand-audience { font-size: 13px; color: var(--tx-2); max-width: 780px; line-height: 1.55; }
.ba-brand-audience strong { color: var(--tx-1); font-weight: 650; }
.ba-brand-audience .divider { margin: 0 10px; opacity: .5; color: var(--tx-3); }
.ba-body { padding: var(--s-7) var(--s-9) var(--s-9); }

/* loading / error -> bible .state (317-322) */
.ba-loading { text-align: center; padding: var(--s-9) var(--s-5); color: var(--tx-2); }
.ba-loading i { font-size: 40px; color: var(--accent); margin-bottom: var(--s-4); display: inline-block; }
.ba-loading h3 { font-family: var(--font-display); font-size: 18px; font-weight: 650; color: var(--tx-1); margin-bottom: var(--s-2); }
.ba-loading p { max-width: 460px; margin: 0 auto; font-size: 13px; line-height: 1.55; color: var(--tx-3); }
.ba-error { text-align: center; padding: var(--s-8) var(--s-5); }
.ba-error .icon-wrap {
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: var(--s-3);
}

/* product selector -> segmented pill row (bible .ptabs/.ptab 278-282) */
.ba-product-tab {
  height: 28px; padding: 0 12px; border-radius: var(--r-full);
  border: 1px solid var(--bd); background: var(--bg-surface); color: var(--tx-2);
  font-size: 12px; font-weight: 600; transition: all var(--t-fast) var(--ease);
}
.ba-product-tab:hover { border-color: var(--bd-strong); color: var(--tx-1); background: var(--bg-hover); }
.ba-product-tab.active { background: var(--tx-1); color: var(--bg-surface); border-color: var(--tx-1); }
.ba-product-tab i { font-size: 15px; }
.ba-product-tab .ba-tab-count,
.ba-angle-tab .ba-tab-count,
.ba-scope-pill .scope-count {
  font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; opacity: .7;
}

/* angle tabs -> ember-selected chips */
.ba-angle-tab {
  border-radius: var(--r-full); border: 1px solid var(--bd);
  color: var(--tx-2); transition: all var(--t-fast) var(--ease);
}
.ba-angle-tab:hover { border-color: var(--accent); color: var(--tx-1); background: var(--bg-hover); }
.ba-angle-tab.active {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.ba-angle-tab.active .ba-tab-count { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); opacity: 1; }

/* scope pills */
.ba-scope-pill {
  border-radius: var(--r-full); border: 1px solid var(--bd);
  color: var(--tx-2); transition: all var(--t-fast) var(--ease);
}
.ba-scope-pill:hover:not(:disabled) { border-color: var(--bd-strong); color: var(--tx-1); background: var(--bg-hover); }
.ba-scope-pill.active { background: var(--tx-1); color: var(--bg-surface); border-color: var(--tx-1); }
.ba-scope-pill.active .scope-count { background: color-mix(in srgb, var(--bg-surface) 20%, transparent); opacity: 1; }
.ba-scope-pill.ghost { border-style: dashed; }
.ba-scope-pill:disabled { cursor: wait; opacity: .6; }
.ba-scope-pill .scope-hint { font-size: 10.5px; opacity: .6; color: inherit; }

/* ads heading count -> mono */
.ba-ads-heading .n {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--tx-1); font-variant-numeric: tabular-nums;
}
.ba-ads-heading .l {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tx-3);
}
.ba-tab-count { font-variant-numeric: tabular-nums; }

/* === Surface: deepdive_chrome (Brand Deep-Dive V2) === */
/* All rules scoped under #brandDeepV2Modal (1,1,0)+ to beat both legacy
   .bdv2-* blocks in styles.css. Tokens only; themes flip automatically. */

/* ---- Shell chrome: sidebar / main / topbar ---- */
#brandDeepV2Modal .bdv2-sidebar{ background:var(--bg-surface); border-right:1px solid var(--bd); }
#brandDeepV2Modal .bdv2-main{ background:var(--bg-page); }
#brandDeepV2Modal .bdv2-body{ background:var(--bg-page); padding:22px 28px; }

#brandDeepV2Modal .bdv2-sidebar-brand{ border-bottom:1px solid var(--bd); }
#brandDeepV2Modal .bdv2-icon{ background:var(--accent); color:var(--on-accent); border-radius:var(--r-3); }
#brandDeepV2Modal .bdv2-sidebar-brand-txt h2{ font:700 14px/1.2 var(--font-display); letter-spacing:-.01em; color:var(--tx-1); }
#brandDeepV2Modal .bdv2-sub{ font:500 11px/1.3 var(--font-mono); color:var(--tx-3); }

#brandDeepV2Modal .bdv2-topbar{ padding:11px 20px; border-bottom:1px solid var(--bd); background:var(--bg-surface); }
#brandDeepV2Modal .bdv2-topbar-crumb{ font:500 12.5px/1 var(--font-ui); color:var(--tx-2); }
#brandDeepV2Modal .bdv2-topbar-crumb b{ color:var(--tx-1); font-weight:600; }
#brandDeepV2Modal .bdv2-close{
  width:30px; height:30px; border-radius:var(--r-3);
  background:transparent; border:1px solid var(--bd); color:var(--tx-2);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
#brandDeepV2Modal .bdv2-close:hover{ background:var(--bg-hover); color:var(--tx-1); border-color:var(--bd-strong); }

/* ---- Tier switcher -> bible .ptabs (sunken pill track + raised active pill) ---- */
#brandDeepV2Modal .bdv2-sidebar-tiers{
  background:var(--bg-sunken); border:1px solid var(--bd);
  border-radius:var(--r-5); padding:3px; gap:2px;
}
#brandDeepV2Modal .bdv2-sidebar-tiers .bdv2-tier{
  width:100%; justify-content:flex-start; gap:8px;
  height:30px; padding:0 10px; border:0; border-radius:var(--r-4);
  background:transparent; color:var(--tx-2);
  font:600 12.5px/30px var(--font-ui); cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#brandDeepV2Modal .bdv2-sidebar-tiers .bdv2-tier i{ font-size:15px; color:var(--tx-3); }
#brandDeepV2Modal .bdv2-sidebar-tiers .bdv2-tier:hover{ color:var(--tx-1); }
#brandDeepV2Modal .bdv2-sidebar-tiers .bdv2-tier.active{
  background:var(--bg-surface); color:var(--tx-1); box-shadow:var(--sh-1);
}
#brandDeepV2Modal .bdv2-sidebar-tiers .bdv2-tier.active i{ color:var(--accent); }

/* ---- Sidebar section nav -> bible .srow (icon+label rows, ember-tinted active) ---- */
#brandDeepV2Modal .bdv2-sidebar-sections{ padding:12px 8px; gap:2px; }
#brandDeepV2Modal .bdv2-sidebar-section-h{
  font:600 10px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-3); padding:6px 9px 8px;
}
#brandDeepV2Modal .bdv2-sidebar-section-item{
  gap:9px; height:32px; padding:0 9px; border-radius:var(--r-3);
  background:transparent; color:var(--tx-2); font:500 13px/1 var(--font-ui);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#brandDeepV2Modal .bdv2-sidebar-section-item i{ color:var(--tx-3); font-size:15px; }
#brandDeepV2Modal .bdv2-sidebar-section-item:hover{ background:var(--bg-hover); color:var(--tx-1); }
#brandDeepV2Modal .bdv2-sidebar-section-item.on{
  background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--tx-1); font-weight:600;
}
#brandDeepV2Modal .bdv2-sidebar-section-item.on i{ color:var(--accent); }

/* ---- Advanced left section nav (.bdv2-adv-side/-navbtn) -> bible .D-side + .srow ---- */
#brandDeepV2Modal .bdv2-adv{ gap:18px; }
#brandDeepV2Modal .bdv2-adv-side{ gap:2px; }
#brandDeepV2Modal .bdv2-adv-navbtn{
  gap:9px; height:32px; padding:0 10px; border:0; border-radius:var(--r-3);
  background:transparent; color:var(--tx-2); font:500 12.5px/1 var(--font-ui); text-align:left; cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
#brandDeepV2Modal .bdv2-adv-navbtn i{ color:var(--tx-3); font-size:15px; }
#brandDeepV2Modal .bdv2-adv-navbtn:hover:not(.dis){ background:var(--bg-hover); color:var(--tx-1); }
#brandDeepV2Modal .bdv2-adv-navbtn.active{
  background:color-mix(in srgb,var(--accent) 10%,transparent); color:var(--tx-1); font-weight:600; border:0;
}
#brandDeepV2Modal .bdv2-adv-navbtn.active i{ color:var(--accent); }
#brandDeepV2Modal .bdv2-adv-navbtn.dis{ opacity:.5; cursor:not-allowed; }
#brandDeepV2Modal .bdv2-adv-navbtn .dis-tag{
  margin-left:auto; font:600 9.5px/1 var(--font-mono); color:var(--tx-3);
  background:var(--bg-sunken); border-radius:var(--r-full); padding:3px 6px;
}
#brandDeepV2Modal .bdv2-adv-main{ min-width:0; }

/* ---- Brand thesis (.bdv2-narrative / playbook / steal) -> bible .D-thesis ---- */
#brandDeepV2Modal .bdv2-narrative,
#brandDeepV2Modal .bdv2-playbook,
#brandDeepV2Modal .bdv2-steal{
  background:var(--bg-surface); border:1px solid var(--bd);
  border-radius:var(--r-4); padding:var(--s-5);
}
#brandDeepV2Modal .bdv2-narrative-h{
  display:flex; align-items:center; gap:7px;
  font:600 10.5px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-3); margin-bottom:12px;
}
#brandDeepV2Modal .bdv2-narrative-h i{ color:var(--accent); font-size:13px; }
#brandDeepV2Modal .bdv2-narrative p,
#brandDeepV2Modal .bdv2-playbook p{
  font:450 14px/1.65 var(--font-ui); color:var(--tx-1); max-width:64ch; margin:0 0 10px;
}
#brandDeepV2Modal .bdv2-narrative p:last-child,
#brandDeepV2Modal .bdv2-playbook p:last-child{ margin-bottom:0; }
#brandDeepV2Modal .bdv2-narrative b, #brandDeepV2Modal .bdv2-narrative strong,
#brandDeepV2Modal .bdv2-playbook b, #brandDeepV2Modal .bdv2-playbook strong{ color:var(--tx-1); font-weight:650; }
#brandDeepV2Modal .bdv2-playbook ul{ margin:0; padding-left:18px; }
#brandDeepV2Modal .bdv2-playbook li{ font:450 13px/1.6 var(--font-ui); color:var(--tx-2); padding:4px 0; }
#brandDeepV2Modal .bdv2-playbook li strong{ color:var(--tx-1); font-weight:650; }
#brandDeepV2Modal .bdv2-steal p.muted{ font:450 12.5px/1.5 var(--font-ui); color:var(--tx-3); margin:0 0 14px; }
/* ember pull-quote treatment (.D-quote) if a blockquote is ever emitted */
#brandDeepV2Modal .bdv2-narrative blockquote{
  margin:0 0 10px; border-left:2px solid var(--accent); padding-left:9px;
  font:450 12.5px/1.5 var(--font-ui); color:var(--tx-2);
}

/* ---- Hero product card (.bdv2-hero-*) -> bible .D-hero + Hero green chip ---- */
#brandDeepV2Modal .bdv2-hero-card{
  background:var(--bg-surface); border:1px solid var(--bd);
  border-radius:var(--r-4); padding:var(--s-4); box-shadow:var(--sh-1);
}
#brandDeepV2Modal .bdv2-hero-h{
  display:inline-flex; align-items:center; gap:6px;
  height:22px; padding:0 9px; border-radius:var(--r-full);
  background:color-mix(in srgb,var(--hero) 14%,transparent); color:var(--hero);
  font:700 10px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px;
}
#brandDeepV2Modal .bdv2-hero-h i{ font-size:12px; }
#brandDeepV2Modal .bdv2-hero-body{ gap:var(--s-4); }
#brandDeepV2Modal .bdv2-hero-media{ background:var(--bg-sunken); border-radius:var(--r-3); }
#brandDeepV2Modal .bdv2-hero-txt h3{ font:650 15px/1.25 var(--font-ui); letter-spacing:-.01em; color:var(--tx-1); margin:0 0 10px; }
#brandDeepV2Modal .bdv2-hero-stats{ gap:18px; }
#brandDeepV2Modal .bdv2-hero-stats .n{
  font:700 16px/1.1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--tx-1);
}
#brandDeepV2Modal .bdv2-hero-stats .l{
  font:500 10px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-3);
}
/* retint the inline-yellow "iterated" signal value onto the ember accent */
#brandDeepV2Modal .bdv2-hero-stats .n[style]{ color:var(--accent) !important; }
#brandDeepV2Modal .bdv2-hero-note{ font:450 13px/1.55 var(--font-ui); color:var(--tx-2); margin:0; }

/* ---- Quadrant strip (.bdv2-quad-*) -> tokenized cells ---- */
#brandDeepV2Modal .bdv2-quad-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-2); margin-bottom:var(--s-5); }
#brandDeepV2Modal .bdv2-quad-cell{
  padding:12px 10px; background:var(--bg-surface); border:1px solid var(--bd);
  border-radius:var(--r-3); text-align:center;
}
#brandDeepV2Modal .bdv2-quad-cell .n{
  font:700 20px/1.1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--tx-1);
}
#brandDeepV2Modal .bdv2-quad-cell .l{
  font:500 9.5px/1.3 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--tx-3); margin-top:4px;
}
#brandDeepV2Modal .bdv2-quad-cell.brandwide .n{ font-size:12px; text-transform:capitalize; letter-spacing:0; }
#brandDeepV2Modal .bdv2-quad-cell.hero{ border-color:color-mix(in srgb,var(--hero) 40%,var(--bd)); background:color-mix(in srgb,var(--hero) 7%,var(--bg-surface)); }
#brandDeepV2Modal .bdv2-quad-cell.rising{ border-color:color-mix(in srgb,var(--accent) 40%,var(--bd)); background:color-mix(in srgb,var(--accent) 6%,var(--bg-surface)); }
#brandDeepV2Modal .bdv2-quad-cell.testing{ border-color:var(--bd-strong); }
#brandDeepV2Modal .bdv2-quad-cell.dead{ opacity:.55; }
#brandDeepV2Modal .bdv2-quad-cell.promo{ border-color:color-mix(in srgb,var(--danger) 40%,var(--bd)); background:color-mix(in srgb,var(--danger) 6%,var(--bg-surface)); }

/* ---- Product cluster cards (.bdv2-prod-card) -> bible .pc ---- */
#brandDeepV2Modal .bdv2-prods{ display:grid; grid-template-columns:260px 1fr; gap:var(--s-5); }
#brandDeepV2Modal .bdv2-prods-list{ gap:6px; }
#brandDeepV2Modal .bdv2-prod-card{
  padding:11px 13px; background:var(--bg-surface); border:1px solid var(--bd);
  border-radius:var(--r-3); text-align:left; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
#brandDeepV2Modal .bdv2-prod-card:hover{ border-color:var(--bd-strong); }
#brandDeepV2Modal .bdv2-prod-card.active{
  border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--bg-surface));
  box-shadow:0 0 0 1px var(--accent),var(--sh-1);
}
#brandDeepV2Modal .bdv2-prod-card.hero{ border-left:3px solid var(--hero); }
#brandDeepV2Modal .bdv2-prod-card.rising{ border-left:3px solid var(--accent); }
#brandDeepV2Modal .bdv2-prod-card.testing{ border-left:3px solid var(--bd-strong); }
#brandDeepV2Modal .bdv2-prod-card.dead{ opacity:.6; }
#brandDeepV2Modal .bdv2-prod-card.promo{ border-left:3px solid var(--danger); }
#brandDeepV2Modal .bdv2-prod-card .pc-name{ font:650 13px/1.3 var(--font-ui); color:var(--tx-1); margin-bottom:5px; }
#brandDeepV2Modal .bdv2-prod-card .pc-stats{ display:flex; justify-content:space-between; font:500 11px/1.4 var(--font-mono); color:var(--tx-3); }
#brandDeepV2Modal .bdv2-prod-card .pc-quad{ text-transform:capitalize; }
#brandDeepV2Modal .bdv2-prod-card .pc-count{ font-variant-numeric:tabular-nums; color:var(--tx-2); }
#brandDeepV2Modal .bdv2-prod-card .pc-score{
  margin-top:4px; font:650 10.5px/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--accent);
}

/* ---- Product detail: header, quad-tag chip, .D-stat row ---- */
#brandDeepV2Modal .bdv2-prod-detail{ background:var(--bg-surface); border:1px solid var(--bd); border-radius:var(--r-4); padding:var(--s-5); }
#brandDeepV2Modal .bdv2-prod-h h2{
  font:700 18px/1.2 var(--font-display); letter-spacing:-.01em; color:var(--tx-1);
  display:flex; align-items:center; gap:8px;
}
#brandDeepV2Modal .bdv2-prod-h .muted{ font:450 12.5px/1.5 var(--font-ui); color:var(--tx-3); margin:6px 0 0; }
#brandDeepV2Modal .bdv2-quad-tag{
  font:600 10px/1 var(--font-mono); letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-full);
}
#brandDeepV2Modal .bdv2-quad-tag.hero{ background:color-mix(in srgb,var(--hero) 16%,transparent); color:var(--hero); }
#brandDeepV2Modal .bdv2-quad-tag.rising{ background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
#brandDeepV2Modal .bdv2-quad-tag.testing{ background:var(--bg-sunken); color:var(--tx-2); }
#brandDeepV2Modal .bdv2-quad-tag.dead{ background:var(--bg-sunken); color:var(--tx-3); }
#brandDeepV2Modal .bdv2-quad-tag.promo{ background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger); }
#brandDeepV2Modal .bdv2-prod-stats{ display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; }
#brandDeepV2Modal .bdv2-prod-stats .n{ font:700 16px/1.1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--tx-1); }
#brandDeepV2Modal .bdv2-prod-stats .l{ font:500 10px/1.4 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-3); margin-top:2px; }

/* ---- Subtabs (.bdv2-subtab/-subtabs) -> bible .utab underline tabs ---- */
#brandDeepV2Modal .bdv2-subtabs{ gap:2px; border-bottom:1px solid var(--bd); }
#brandDeepV2Modal .bdv2-subtab{
  height:36px; padding:0 11px; gap:6px;
  background:transparent; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  font:550 13px/36px var(--font-ui); color:var(--tx-2); white-space:nowrap; cursor:pointer;
  transition:color var(--t-fast) var(--ease);
}
#brandDeepV2Modal .bdv2-subtab i{ font-size:15px; }
#brandDeepV2Modal .bdv2-subtab:hover:not(.dis):not(:disabled){ color:var(--tx-1); }
#brandDeepV2Modal .bdv2-subtab.active{ color:var(--tx-1); border-bottom-color:var(--accent); }
#brandDeepV2Modal .bdv2-subtab.dis{ opacity:.5; cursor:not-allowed; }
#brandDeepV2Modal .dis-tag{
  font:600 9.5px/1 var(--font-mono); color:var(--tx-3);
  background:var(--bg-sunken); border-radius:var(--r-full); padding:3px 6px;
}

/* ---- Sub-section headers ---- */
#brandDeepV2Modal .bdv2-sub-sec h3{ font:650 14px/1.3 var(--font-ui); color:var(--tx-1); display:flex; align-items:center; gap:6px; }
#brandDeepV2Modal .bdv2-sub-sec h3 .muted{ font:600 10.5px/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--tx-3); }
#brandDeepV2Modal .bdv2-sub-sec p.muted{ font:450 12px/1.5 var(--font-ui); color:var(--tx-3); }

/* ---- Iteration timeline (.bdv2-tl-month/-h) -> bible .tl (vertical rail + nodes) ---- */
/* DOM is a vertical month-group list, so the bible's horizontal node track is
   rendered as a left rail: mono month date = node label, first (most recent)
   month = live (--hero) ring, others = neutral ring. */
#brandDeepV2Modal .bdv2-tl-month{ position:relative; padding-left:20px; margin-bottom:18px; }
#brandDeepV2Modal .bdv2-tl-month::before{
  content:""; position:absolute; left:5px; top:6px; bottom:-18px; width:2px; background:var(--bd); border-radius:1px;
}
#brandDeepV2Modal .bdv2-tl-month:last-child::before{ display:none; }
#brandDeepV2Modal .bdv2-tl-h{
  position:relative; margin-bottom:10px;
  font:700 11.5px/1.35 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--tx-1);
}
#brandDeepV2Modal .bdv2-tl-h::before{
  content:""; position:absolute; left:-20px; top:1px; width:12px; height:12px; box-sizing:border-box;
  border-radius:50%; background:var(--bg-surface); border:3px solid var(--tx-3);
}
#brandDeepV2Modal .bdv2-tl-month:first-child .bdv2-tl-h::before{ border-color:var(--hero); }
#brandDeepV2Modal .bdv2-tl-h .muted{ font:600 10.5px/1.4 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--tx-3); }

/* ---- Advanced tier body panels (tokenize + mono numbers) ---- */
#brandDeepV2Modal .adv-panel{ background:var(--bg-surface); border:1px solid var(--bd); border-radius:var(--r-4); padding:16px 18px; margin-bottom:14px; }
#brandDeepV2Modal .adv-panel h2{ font:700 17px/1.2 var(--font-display); letter-spacing:-.01em; color:var(--tx-1); }
#brandDeepV2Modal .adv-panel h3{ font:650 14px/1.3 var(--font-ui); color:var(--tx-1); }
#brandDeepV2Modal .adv-panel h2 i, #brandDeepV2Modal .adv-panel h3 i{ color:var(--accent); }
#brandDeepV2Modal .adv-panel p{ font:450 12.5px/1.55 var(--font-ui); color:var(--tx-2); }
#brandDeepV2Modal .adv-panel p.muted{ color:var(--tx-3); }
#brandDeepV2Modal .adv-thesis p{ font:450 13.5px/1.6 var(--font-ui); color:var(--tx-1); }
#brandDeepV2Modal .adv-hero-name{ font:650 15px/1.2 var(--font-ui); color:var(--tx-1); display:flex; align-items:center; gap:8px; }
#brandDeepV2Modal .adv-hero-stats .n{ font:700 18px/1.1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--tx-1); }
#brandDeepV2Modal .adv-hero-stats .l{ font:500 10px/1.3 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--tx-3); }
#brandDeepV2Modal .adv-quad-mini-cell{ background:var(--bg-sunken); border-radius:var(--r-2); }
#brandDeepV2Modal .adv-quad-mini-cell.hero{ background:color-mix(in srgb,var(--hero) 10%,transparent); }
#brandDeepV2Modal .adv-quad-mini-cell.rising{ background:color-mix(in srgb,var(--accent) 9%,transparent); }
#brandDeepV2Modal .adv-quad-mini-cell.testing{ background:var(--bg-sunken); }
#brandDeepV2Modal .adv-quad-mini-cell.promo{ background:color-mix(in srgb,var(--danger) 9%,transparent); }
#brandDeepV2Modal .adv-quad-mini-cell .n{ font:700 18px/1.1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--tx-1); }
#brandDeepV2Modal .adv-quad-mini-cell .l{ font:500 10px/1.3 var(--font-mono); text-transform:uppercase; color:var(--tx-3); margin-top:2px; }
#brandDeepV2Modal .adv-insight{ background:var(--bg-sunken); border-left:3px solid var(--accent); border-radius:var(--r-2); padding:10px 12px; }
#brandDeepV2Modal .ins-h{ font:700 10px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:5px; }
#brandDeepV2Modal .ins-b{ font:450 13px/1.55 var(--font-ui); color:var(--tx-1); }
/* portfolio role table */
#brandDeepV2Modal .adv-role-table{ border:1px solid var(--bd); border-radius:var(--r-3); overflow:hidden; }
#brandDeepV2Modal .art-h, #brandDeepV2Modal .art-row{ border-bottom:1px solid var(--bd); }
#brandDeepV2Modal .art-h{ background:var(--bg-sunken); font:600 10px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-3); }
#brandDeepV2Modal .art-row.hero{ background:color-mix(in srgb,var(--hero) 5%,transparent); }
#brandDeepV2Modal .art-row.rising{ background:color-mix(in srgb,var(--accent) 5%,transparent); }
#brandDeepV2Modal .art-row.promo{ background:color-mix(in srgb,var(--danger) 5%,transparent); }
#brandDeepV2Modal .art-name{ font:600 13px/1.3 var(--font-ui); color:var(--tx-1); }
#brandDeepV2Modal .art-role{ font:600 12.5px/1.3 var(--font-ui); color:var(--tx-1); }
#brandDeepV2Modal .art-sub{ font:400 11px/1.4 var(--font-ui); color:var(--tx-3); margin-top:2px; }
#brandDeepV2Modal .art-num{ font:600 13.5px/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--tx-1); text-align:center; }
/* seasonal / loyalty bars -> ember (drop pink gradient) */
#brandDeepV2Modal .adv-seas-fill{ background:var(--accent); }
#brandDeepV2Modal .adv-seas-n{ font:600 10.5px/1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--tx-1); }
#brandDeepV2Modal .adv-seas-label{ font-family:var(--font-mono); color:var(--tx-3); }
#brandDeepV2Modal .adv-loy-bar{ background:var(--bg-sunken); }
#brandDeepV2Modal .adv-loy-fill{ background:var(--accent); }
#brandDeepV2Modal .adv-loy-labels{ font-size:12px; color:var(--tx-2); }
#brandDeepV2Modal .adv-loy-labels strong{ color:var(--tx-1); font-variant-numeric:tabular-nums; }

/* ---- Intermediate empty / pipeline states ---- */
#brandDeepV2Modal .bdv2-inter-empty p{ font:450 13.5px/1.55 var(--font-ui); color:var(--tx-2); }
#brandDeepV2Modal .bdv2-inter-empty p.muted{ color:var(--tx-3); font-family:var(--font-mono); }

/* === Surface: deepdive_dataviz === */
/* Phase 8b advanced modules (Sankey, DPA grid, strategy memo) + bdv2-* deep-dive
   data surfaces, mapped onto the bible's sankey / product-card / editorial
   treatment. All color/space/radius/font via tokens; only media scrims keep rgba. */

/* .adv-panel shell owned by `#brandDeepV2Modal .adv-panel` (chrome surface). Bare rules removed — they lost on specificity inside the modal. */
.adv-hooks-row { gap: var(--s-4); margin: var(--s-4) 0; }

/* ---- Hooks Sankey: ember ribbons at low opacity, tokenized nodes ---- */
.sankey-wrap {
  background: var(--bg-sunken);
  border: 1px solid var(--bd);
  border-radius: var(--r-4);
  padding: var(--s-4);
}
.sk-ribbon {
  fill: var(--accent);
  fill-opacity: 0.30;
  stroke: none;
  cursor: pointer;
  transition: fill-opacity var(--t-fast) var(--ease);
}
.sk-ribbon:hover { fill-opacity: 0.62; }
.sk-nodebox {
  fill: var(--tx-2);
  fill-opacity: 0.72;
  cursor: pointer;
  transition: fill-opacity var(--t-fast) var(--ease);
}
.sk-node:hover .sk-nodebox { fill-opacity: 1; }
.sk-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  fill: var(--tx-1);
  pointer-events: none;
}
.sk-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  fill: var(--tx-3);
  font-size: 10px;
}

/* ---- Rank lists: mono values + single-ember fill bars ---- */
.adv-hooks-rank li {
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--bd);
  transition: background var(--t-fast) var(--ease);
}
.adv-hooks-rank li:hover { background: var(--bg-hover); }
.adv-hooks-rank .rank-name { font-size: 12.5px; color: var(--tx-1); }
.adv-hooks-rank .rank-n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 650;
  color: var(--tx-2);
}
.adv-hooks-rank .rank-bar {
  height: 4px;
  background: var(--bg-sunken);
  border-radius: var(--r-full);
  overflow: hidden;
}
.adv-hooks-rank .rank-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-full);
}

/* ---- Hook iteration rows ---- */
.adv-hooks-list { gap: var(--s-2); }
.adv-hook-row {
  padding: var(--s-3);
  background: var(--bg-sunken);
  border: 1px solid var(--bd);
  border-radius: var(--r-3);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.adv-hook-row:hover { background: var(--bg-hover); border-color: var(--bd-strong); }
.ahr-hook { font-size: 12.5px; color: var(--tx-1); line-height: 1.5; }

/* ---- Strategy memo: editorial reading column ---- */
.adv-memo {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tx-1);
  max-width: 720px;
}
.adv-memo h2, .adv-memo h3, .adv-memo h4 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  color: var(--tx-1);
}
.adv-memo h2 { font-size: 20px; margin: var(--s-6) 0 var(--s-3); }
.adv-memo h3 { font-size: 16px; margin: var(--s-5) 0 var(--s-2); }
.adv-memo h4 { font-size: 13.5px; margin: var(--s-4) 0 var(--s-1); }
/* ember-touched heading rule (bible: accent only where product points) */
.adv-memo h2, .adv-memo h3 {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-3);
}
.adv-memo strong { color: var(--tx-1); font-weight: 650; }
.adv-memo em { color: var(--tx-2); }
.adv-memo-foot {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--bd);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--tx-3);
}

/* ---- DPA catalogue grid: bible product-card finish ---- */
.adv-dpa-grid { gap: var(--s-3); margin-top: var(--s-4); }
.adv-dpa-card {
  background: var(--bg-surface);
  border: 1px solid var(--bd);
  border-radius: var(--r-4);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.adv-dpa-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  border-color: var(--bd-strong);
}
.adc-media { background: var(--bg-sunken); }
/* rank = neutral scrim over media (allowed rgba), mono value */
.adc-rank {
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  padding: 2px var(--s-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 650;
}
/* frequency = ember chip, the "how often it appears" signal */
.adc-freq {
  background: var(--accent);
  color: var(--on-accent);
  padding: 2px var(--s-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 650;
}
.adc-body { padding: var(--s-2) var(--s-3); gap: var(--s-1); }
.adc-title { font-size: 12px; color: var(--tx-1); line-height: 1.35; }
.adc-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--tx-2);
  font-weight: 500;
}
.adc-link { color: var(--accent); font-size: 11px; }

/* ---- bdv2 Hook DNA Sankey (mechanic→emotion) ---- */
.bdv2-hook-sankey-h { gap: var(--s-3); margin-bottom: var(--s-3); font-size: 11.5px; }
.bdv2-hook-sankey-h .side.mech { color: var(--tx-2); }      /* mechanic lane */
.bdv2-hook-sankey-h .side.emo  { color: var(--accent); }  /* emotion lane */
.bdv2-hook-sankey-h .arrow { color: var(--tx-3); }
.bdv2-hook-sankey-h .hint { color: var(--tx-3); font-size: 10.5px; }
.bdv2-hook-sankey-wrap svg path { transition: filter var(--t-fast) var(--ease); }

/* ---- bdv2 cluster breakdown modal ---- */
.bdv2-cb-shell { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-5); }
.bdv2-cb-topbar { border-bottom: 1px solid var(--bd); }
.bdv2-cb-title-l h2 { font-family: var(--font-display); letter-spacing: -0.015em; font-size: 16px; color: var(--tx-1); }
.bdv2-cb-sub { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tx-2); }
.bdv2-cb-panel { background: var(--bg-sunken); border: 1px solid var(--bd); border-radius: var(--r-4); }
.bdv2-cb-sim-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-2); }
.bdv2-cb-sim-row .bar { background: var(--bg-hover); border-radius: var(--r-full); }
.bdv2-cb-evidence i { color: var(--accent); }
.bdv2-cb-member { border: 1px solid var(--bd); border-radius: var(--r-3); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.bdv2-cb-member:hover { background: var(--bg-hover); border-color: var(--bd-strong); }
.bdv2-cb-member-h .run { color: var(--accent); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- bdv2 DPA carousel ---- */
.bdv2-carousel { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-4); }
.bdv2-carousel-media-wrap { background: var(--bg-sunken); border-radius: var(--r-3); }
.bdv2-carousel-num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.68); color: #fff;
}
.bdv2-carousel-cta {
  border: 1px solid var(--bd); border-radius: var(--r-2);
  color: var(--tx-1); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.bdv2-carousel-cta:hover:not(.disabled) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bdv2-carousel-dot { background: var(--bg-hover); border: 1px solid var(--bd); }
.bdv2-carousel-dot.on { background: var(--accent); border-color: var(--accent); }
.bdv2-carousel-nav { border-radius: var(--r-full); }

/* ---- bdv2 promo summary ---- */
.bdv2-promo-summary-card { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-4); }
.bdv2-promo-summary-title { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--tx-1); }
.bdv2-promo-summary-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tx-3); }
.bdv2-promo-summary-table td.num, .bdv2-promo-summary-table th.num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right;
}
.bdv2-promo-summary-table .pname { color: var(--tx-1); font-weight: 500; }
.bdv2-promo-chip { border: 1px solid var(--bd); border-radius: var(--r-full); color: var(--tx-2); transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.bdv2-promo-chip:hover { border-color: var(--accent); color: var(--tx-1); }
.bdv2-promo-chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bdv2-promo-chip .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- bdv2 catalogue (pill grid + ranked rows) ---- */
.bdv2-cat-grid { gap: var(--s-3); }
.bdv2-cat-pill { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-4); }
.bdv2-cat-pill.clickable { transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.bdv2-cat-pill.clickable:hover { border-color: var(--accent); transform: translateY(-2px); }
.bdv2-cat-name { color: var(--tx-1); }
.bdv2-cat-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-1); }
.bdv2-cat-desc { color: var(--tx-2); }
.bdv2-cat-row { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-3); }
.bdv2-cat-row-rank { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-2); }
.bdv2-cat-row-title { color: var(--tx-1); }
.bdv2-cat-row-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--hero); font-weight: 600; }
.bdv2-cat-row-link { color: var(--accent); }
.bdv2-cat-row-bar { background: var(--bg-sunken); border-radius: var(--r-full); }
.bdv2-cat-row-bar .fill { background: var(--accent); border-radius: var(--r-full); }
.bdv2-cat-summary-stat b { color: var(--tx-1); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- bdv2 advanced: generic panel + role table + memo/md panels ---- */
.bdv2-adv-panel { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-4); }
.bdv2-adv-panel h5 { color: var(--tx-2); }
.bdv2-adv-role-tbl th { color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.03em; }
.bdv2-adv-role-tbl td { border-bottom: 1px solid var(--bd); }
.bdv2-adv-role-tbl td.pname { color: var(--tx-1); font-weight: 500; }
.bdv2-adv-role-tbl td.desc { color: var(--tx-2); }
.bdv2-adv-role-tbl td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bdv2-adv-role-tbl td.fnl { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bdv2-adv-role-badge { border-radius: var(--r-full); font-family: var(--font-mono); }
.bdv2-adv-role-badge.hero { background: color-mix(in oklab, var(--hero) 16%, transparent); color: var(--hero); }
.bdv2-adv-md-panel { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-4); }
.bdv2-adv-md-panel-title { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--tx-1); }
.bdv2-adv-md-panel-title > i { color: var(--accent); }
.bdv2-adv-md-panel-close { border-radius: var(--r-2); transition: background var(--t-fast) var(--ease); }
.bdv2-adv-md-narrative b { color: var(--tx-1); }
.bdv2-adv-md-tbl-h { color: var(--tx-3); }

/* ---- bdv2 advanced connection / role maps ---- */
.bdv2-adv-conn-card { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-4); }
.bdv2-adv-conn-card-hero .stat b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-1); }
.bdv2-adv-conn-card-hero .stat.good { color: var(--hero); }
.bdv2-adv-conn-tab { color: var(--tx-2); transition: color var(--t-fast) var(--ease); }
.bdv2-adv-conn-tab:hover { color: var(--tx-1); }
.bdv2-adv-conn-tab .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bdv2-adv-conn-line-row .k { color: var(--tx-1); }
.bdv2-adv-conn-line-row .bar { background: var(--bg-sunken); border-radius: var(--r-full); }
.bdv2-adv-conn-line-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-2); }
.bdv2-adv-conn-angle-row { border: 1px solid var(--bd); border-radius: var(--r-3); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.bdv2-adv-conn-angle-row:hover { background: var(--bg-hover); border-color: var(--bd-strong); }
.bdv2-adv-conn-angle-row.on { border-color: var(--accent); }
.bdv2-adv-conn-angle-perf .total { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-2); }
.bdv2-adv-conn-angle-perf .perf.good { color: var(--hero); }
.bdv2-adv-conn-angle-perf .perf.mute { color: var(--tx-3); }
.bdv2-adv-conn-hook-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-2); }
.bdv2-adv-conn-avatar { background: var(--bg-sunken); border: 1px solid var(--bd); border-radius: var(--r-3); }
.bdv2-adv-conn-avatar-h .pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bdv2-adv-conn-angle-card { background: var(--bg-sunken); border: 1px solid var(--bd); border-radius: var(--r-3); }
.bdv2-adv-conn-angle-h b { color: var(--tx-1); }
.bdv2-adv-conn-angle-stats .stat { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- bdv2 funnels (stage colors are a categorical encoding — kept; only
   surfaces/typography/numerics tokenized so meaning stays intact) ---- */
.bdv2-adv-funnel-box { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-4); }
.bdv2-adv-funnel-h .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-1); }
.bdv2-adv-funnel-h .s { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-3); }
.bdv2-adv-funnel-row .k { color: var(--tx-2); }
.bdv2-adv-funnel-arrow { color: var(--tx-3); }
.bdv2-int-funnel-block { background: var(--bg-surface); border: 1px solid var(--bd); border-radius: var(--r-4); }
.bdv2-int-funnel-h .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-1); }
.bdv2-int-funnel-h .s { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tx-3); }
.bdv2-int-funnel-d { color: var(--tx-2); }
.bdv2-int-funnel-block.clickable:hover { border-color: var(--bd-strong); }
.bdv2-int-tap-cta { font-family: var(--font-mono); }


/* === Surface: angles === */
/* Angle-mining tab: mined-angle cards, mode/pill toggles, See-ads modal, deep-mine + pipeline status.
   Maps the Fable-5 .card / .ptabs / .chip / mono-number treatment onto the app's real .angle*/.ac-*/.dm-*/.pp-* selectors.
   All color/space/radius/type via tokens (auto light+dark). */

/* ── Section header ── */
.angles-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-5); }
.angles-head h2 {
  font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-0.01em;
  color:var(--tx-1); margin:0 0 var(--s-1); display:flex; align-items:center; gap:var(--s-2);
  font-variant-numeric:tabular-nums;
}
.angles-head h2 i { color:var(--accent); font-size:19px; }
.angles-head p { font-size:12.5px; color:var(--tx-2); line-height:1.5; margin:0; max-width:640px; }

/* ── Mined-angle grid (keep 3-col auto-fill) ── */
.angles-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:var(--s-3);
}

/* ── Angle card (bible .card treatment) ── */
.angle-card {
  background:var(--bg-surface); border:1px solid var(--bd);
  border-radius:var(--r-4); padding:var(--s-4);
  display:flex; flex-direction:column; gap:var(--s-3);
  box-shadow:var(--sh-1);
  transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.angle-card:hover { border-color:var(--bd-strong); box-shadow:var(--sh-2); }

.ac-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); }
.ac-title {
  font-family:var(--font-display); font-size:15px; font-weight:600;
  color:var(--tx-1); line-height:1.3; flex:1; min-width:0; letter-spacing:-0.005em;
}

/* Badges — respect semantic contract: hero(green)/danger(red) reserved.
   "Gap · opportunity" = the highlight-worthy state → ember accent chip.
   "Crowded" = de-emphasized/saturated → muted dashed chip (bible .chip.low). */
.angle-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:600; line-height:1;
  padding:4px 8px; border-radius:var(--r-2); white-space:nowrap; flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.angle-badge.gap {
  background:color-mix(in srgb, var(--accent) 13%, transparent);
  color:var(--accent); border:1px solid transparent;
}
.angle-badge.crowded {
  background:transparent; color:var(--tx-3);
  border:1px dashed var(--bd-strong);
}

/* ── Stats: measured counts in mono ── */
.ac-stats { display:flex; gap:var(--s-5); }
.ac-stat { display:flex; flex-direction:column; gap:1px; }
.ac-stat .n {
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600; color:var(--tx-1); line-height:1.1;
}
.ac-stat .l {
  font-size:10.5px; color:var(--tx-3); font-weight:500;
  letter-spacing:0.02em; font-variant-numeric:tabular-nums;
}

/* Brand list line (see warnings: no per-brand hook to make chips truly clickable) */
.ac-brands { font-size:11.5px; color:var(--tx-2); line-height:1.55; }
.ac-example {
  font-size:12px; color:var(--tx-2); font-style:italic; line-height:1.5;
  padding:var(--s-2) var(--s-3); background:var(--bg-sunken);
  border-radius:var(--r-2); border:1px solid var(--bd);
}

/* Actions row — ember-accent the "See ads" ghost button on hover */
.ac-actions { display:flex; gap:var(--s-2); margin-top:auto; padding-top:var(--s-1); flex-wrap:wrap; }
.ac-actions .btn.ghost:hover {
  border-color:var(--accent); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ── Empty state ── */
.angles-empty { text-align:center; padding:var(--s-9) var(--s-6); max-width:560px; margin:0 auto; }
.angles-empty-icon {
  width:64px; height:64px; border-radius:var(--r-5); margin:0 auto var(--s-5);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:30px;
}
.angles-empty h2 { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--tx-1); margin:0 0 var(--s-2); letter-spacing:-0.01em; }
.angles-empty p { font-size:13px; color:var(--tx-2); line-height:1.55; margin:0 0 var(--s-6); }

/* ── Mode bar + pill tabs (bible .ptabs / .ptab) ── */
.angle-mode-bar {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  flex-wrap:wrap; padding:var(--s-3) var(--s-4); margin-bottom:var(--s-4);
  background:var(--bg-surface); border:1px solid var(--bd); border-radius:var(--r-4);
}
.angle-mode-bar .mode-sub { font-size:12px; color:var(--tx-2); max-width:480px; line-height:1.5; }
.angle-mode-bar .mode-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; letter-spacing:0.02em;
  padding:4px 10px; border-radius:var(--r-full); border:1px solid transparent;
  text-transform:uppercase;
}
.angle-mode-bar .mode-badge i { font-size:13px; }
/* local = text pipeline (no Gemini) → neutral ember */
.angle-mode-bar .mode-badge.local {
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent); border-color:transparent;
}
/* ai = Gemini classifier → iris (contractual: Gemini touched this) */
.angle-mode-bar .mode-badge.ai {
  background:color-mix(in srgb, var(--ai) 14%, transparent);
  color:var(--ai); border-color:transparent;
}
/* pill-tab group */
.angle-mode-bar .angle-mode-tabs {
  display:inline-flex; gap:2px; background:var(--bg-sunken);
  border:1px solid var(--bd); border-radius:var(--r-full); padding:3px;
}
.angle-mode-bar .angle-mode-tab {
  height:26px; padding:0 12px; border:none; background:transparent;
  border-radius:var(--r-full); font:600 12px/26px var(--font-ui);
  color:var(--tx-2); cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.angle-mode-bar .angle-mode-tab i { font-size:13px; }
.angle-mode-bar .angle-mode-tab:hover:not(.active) { color:var(--tx-1); }
.angle-mode-bar .angle-mode-tab.active {
  background:var(--bg-surface); color:var(--tx-1); box-shadow:var(--sh-1);
}
.angle-mode-bar .angle-mode-tab.ghost { opacity:0.6; border:1px dashed var(--bd); }

/* ── Angle pill toggles inside Brand-Analyze (bible .ptabs) ── */
.ba-angle-pills {
  display:flex; gap:var(--s-1); flex-wrap:wrap; margin:var(--s-4) 0;
  padding:3px; background:var(--bg-sunken);
  border:1px solid var(--bd); border-radius:var(--r-full); width:max-content; max-width:100%;
}
.ba-angle-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:0 12px; height:28px; background:transparent; border:1px solid transparent;
  border-radius:var(--r-full); color:var(--tx-2); font:600 12.5px/1 var(--font-ui);
  cursor:pointer; transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ba-angle-pill:hover { color:var(--tx-1); }
.ba-angle-pill.active {
  background:var(--bg-surface); color:var(--tx-1); border-color:transparent; box-shadow:var(--sh-1);
}
.ba-angle-count {
  font:600 10.5px/1 var(--font-mono); font-variant-numeric:tabular-nums;
  background:var(--bg-page); color:var(--tx-3); padding:3px 6px; border-radius:var(--r-full);
}
.ba-angle-pill.active .ba-angle-count {
  background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent);
}

/* ── See-ads modal (reuses .ba-modal shell) — angle-specific bits ── */
.aa-summary { display:flex; gap:var(--s-2); padding:0 var(--s-5) var(--s-4); }
.aa-summary .rv-tag { font-variant-numeric:tabular-nums; }
.aa-brand-group { padding:var(--s-3) var(--s-5); border-top:1px solid var(--bd); }
.aa-brand-group h3 {
  font-family:var(--font-display); font-size:14px; font-weight:600;
  margin:0 0 var(--s-3); color:var(--tx-1); display:flex; align-items:center; gap:6px;
}
.aa-brand-group h3 .muted {
  font-weight:500; font-size:11.5px; color:var(--tx-3);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}

/* ── Method / pipeline badges ── */
.method-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--r-full);
  text-transform:uppercase; letter-spacing:0.03em;
}
.method-badge i { font-size:13px; }
.method-badge.text { background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); }
/* deep multimodal pass = Gemini → iris (contractual) */
.method-badge.deep { background:color-mix(in srgb, var(--ai) 14%, transparent); color:var(--ai); }

/* ── Deep-mine status card ── */
.deep-mine-card {
  background:var(--bg-surface); border:1px solid var(--bd);
  border-radius:var(--r-5); padding:var(--s-8) var(--s-7); text-align:center;
}
.dm-icon {
  width:60px; height:60px; border-radius:50%; margin-bottom:var(--s-4);
  background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; font-size:30px;
}
.deep-mine-card h2 { font-family:var(--font-display); font-size:18px; font-weight:600; margin:0 0 var(--s-2); letter-spacing:-0.01em; color:var(--tx-1); }
.dm-status {
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--tx-2); margin:0 0 var(--s-5); min-height:18px;
}
.dm-bar { height:8px; background:var(--bg-sunken); border-radius:var(--r-full); overflow:hidden; margin:0 auto var(--s-4); max-width:480px; }
.dm-bar-fill { height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-strong)); transition:width var(--t-slow) var(--ease); }
.dm-meta { display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--s-2); max-width:540px; margin:0 auto var(--s-4); }
.dm-stat { background:var(--bg-sunken); padding:var(--s-3) var(--s-2); border-radius:var(--r-3); border:1px solid var(--bd); }
.dm-stat .n { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:18px; font-weight:600; color:var(--tx-1); }
.dm-stat .l { font-size:10px; color:var(--tx-3); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px; font-weight:600; }
.dm-time { display:flex; gap:var(--s-4); justify-content:center; font-size:12px; color:var(--tx-2); margin-bottom:var(--s-4); font-variant-numeric:tabular-nums; }
.dm-note { font-size:11.5px; color:var(--tx-3); font-style:italic; margin:0; }

/* ── Pipeline progress (multi-stage status) ── */
.pipeline-progress .pp-head { display:flex; gap:var(--s-4); align-items:center; margin-bottom:var(--s-6); }
.pipeline-progress .pp-head i { font-size:26px; color:var(--accent); }
.pipeline-progress .pp-head h2 { font-family:var(--font-display); font-size:18px; font-weight:600; margin:0 0 var(--s-1); color:var(--tx-1); }
.pipeline-progress .pp-head p { font-size:12.5px; color:var(--tx-2); margin:0; }
.pipeline-progress .pp-stages { display:flex; flex-direction:column; gap:var(--s-3); }
.pipeline-progress .pp-stage {
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-3) var(--s-3); border:1px solid var(--bd); border-radius:var(--r-4);
  background:var(--bg-surface); opacity:0.55; transition:opacity var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.pipeline-progress .pp-stage.active, .pipeline-progress .pp-stage.done { opacity:1; }
.pipeline-progress .pp-stage.active { border-color:var(--accent); }
.pipeline-progress .pp-stage.done > i { color:var(--accent); }
.pipeline-progress .pp-stage.active > i { color:var(--accent); }
.pipeline-progress .pp-stage > i { font-size:18px; margin-top:2px; }
.pipeline-progress .pp-stage-label { font-size:13px; font-weight:600; color:var(--tx-1); margin-bottom:var(--s-2); }
.pipeline-progress .pp-stage-bar { height:4px; background:var(--bg-sunken); border-radius:var(--r-full); overflow:hidden; }
.pipeline-progress .pp-stage-fill { height:100%; background:var(--accent); transition:width var(--t-slow) var(--ease); }
.pipeline-progress .pp-stage-msg { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--tx-2); margin-top:var(--s-2); }

/* ── Pipeline action grid (choose-a-mode cards) ── */
.pipeline-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--s-3); padding:0 var(--s-6); }
.pipeline-card {
  display:flex; gap:var(--s-3); padding:var(--s-4);
  background:var(--bg-surface); border:1px solid var(--bd); border-radius:var(--r-4);
  box-shadow:var(--sh-1); transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.pipeline-card:hover { border-color:var(--bd-strong); box-shadow:var(--sh-2); }
.pc-icon { font-size:22px; color:var(--accent); }
.pc-body h3 { font-family:var(--font-display); font-size:13.5px; font-weight:600; margin:0 0 var(--s-1); color:var(--tx-1); }
.pc-body p { font-size:12px; color:var(--tx-2); margin:0 0 var(--s-3); line-height:1.45; }

/* === Surface: cmdk (⌘K command palette) — NEW feature, bible .ck lines 623-641 === */

/* Dim backdrop over everything. Class selector must re-hide on [hidden]
   because .ck-overlay{display:flex} would otherwise beat the UA hidden rule. */
.ck-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-start;justify-content:center;
  padding:14vh 16px 16px;background:rgba(10,9,8,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ck-overlay[hidden]{display:none}

/* Palette shell — bible .ck */
.ck{max-width:560px;width:100%;margin:0;background:var(--bg-surface);border:1px solid var(--bd);
  border-radius:var(--r-5);box-shadow:var(--sh-3);overflow:hidden;display:flex;flex-direction:column;max-height:72vh}

/* Query row — bible .ck-in (real <input> styled to look like .ck-in .q) */
.ck-in{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--bd);flex:none}
.ck-in>i,.ck-in>svg{color:var(--tx-3);font-size:15px;flex:none}
.ck-q{flex:1;min-width:0;border:none;background:none;outline:none;padding:0;margin:0;
  font:400 14px/1 var(--font-ui);color:var(--tx-1);caret-color:var(--accent)}
.ck-q::placeholder{color:var(--tx-3)}

/* Scrollable result body */
.ck-list{flex:1;overflow-y:auto;padding:6px}
.ck-empty{padding:22px 12px;text-align:center;color:var(--tx-3);font:500 12.5px/1.5 var(--font-ui)}

/* Group header — bible .ck-gh (mono uppercase) */
.ck-gh{font:600 10px/1 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);padding:8px 10px 5px}

/* Result row — bible .ck-r */
.ck-r{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-3);
  font:500 13px/1.2 var(--font-ui);color:var(--tx-1);cursor:pointer;
  transition:background var(--t-fast) var(--ease)}
.ck-r>i,.ck-r>svg{color:var(--tx-3);flex:none;font-size:14px}
.ck-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-r .d{font:500 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--tx-3);
  margin-left:auto;white-space:nowrap;padding-left:8px;flex:none}
.ck-r:hover{background:var(--bg-hover)}
.ck-r.on{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ck-r.on>i,.ck-r.on>svg{color:var(--accent)}
/* fuzzy-match highlight — ember, never highlighter-yellow (bible .ck-r mark) */
.ck-r mark{background:none;color:var(--accent);font-weight:650}

/* Footer hint row — bible .ck-f */
.ck-f{display:flex;gap:14px;align-items:center;flex:none;padding:9px 14px;border-top:1px solid var(--bd);
  background:var(--bg-hover);font:500 11px/1 var(--font-ui);color:var(--tx-3)}
.ck-f .kbd{display:inline-flex;align-items:center;justify-content:center;height:17px;min-width:17px;padding:0 5px;
  border:1px solid var(--bd);border-radius:var(--r-1);background:var(--bg-surface);
  font:600 9.5px/1 var(--font-mono);color:var(--tx-2)}

/* === Surface: rail_breadcrumbs === */
/* NEW feature chrome for the Brand Deep-Dive. Owns ONLY .rail / .D-toc / .bcrumb.
   Rail is injected into <body> by app-v2.js (fixed, must clear the z-index:200 modal).
   Breadcrumbs replace the content of the existing #bdv2TopbarCrumb. Everything tokenized. */

/* ---- (A) Floating chapter rail / "On this page" TOC (bible .rail + .D-toc) ---- */
#crevoRail.rail,
.D-toc {
  position: fixed;
  right: var(--s-4);            /* 16px from viewport edge */
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;                 /* above .modal-full (z-index:200) */
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 156px;
  padding: 6px;
  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--bd);
  border-radius: var(--r-4);
  box-shadow: var(--sh-2);
}
/* rail header — bible .D-toc-h treatment (mono, uppercase, muted) */
#crevoRail.rail .rail-h,
.D-toc .D-toc-h {
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-3);
  padding: 5px 8px 6px;
}
/* rail items — bible .rail a + dot indicator */
#crevoRail.rail .rail-item,
.D-toc a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: var(--r-2);
  font: 500 11px/1.2 var(--font-ui);
  color: var(--tx-3);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
#crevoRail.rail .rail-item::before,
.D-toc a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bd-strong);
  flex: none;
  transition: background var(--t-fast) var(--ease);
}
#crevoRail.rail .rail-item:hover,
.D-toc a:hover {
  color: var(--tx-1);
  background: var(--bg-hover);
  text-decoration: none;
}
#crevoRail.rail .rail-item:focus-visible,
.D-toc a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* active section — ember dot lights (scroll-spy equivalent) */
#crevoRail.rail .rail-item.on,
.D-toc a.on {
  color: var(--tx-1);
  background: var(--bg-hover);
  font-weight: 600;
}
#crevoRail.rail .rail-item.on::before,
.D-toc a.on::before {
  background: var(--accent);
}
/* deferred / disabled sections (e.g. Phase 8b) read as inert */
#crevoRail.rail .rail-item.dis {
  color: var(--tx-3);
  opacity: .5;
  cursor: default;
  pointer-events: none;
}
/* hide the rail on narrow viewports — bible breakpoint */
@media (max-width: 1420px) {
  #crevoRail.rail { display: none; }
}

/* ---- (B) Breadcrumbs (bible .bcrumb) rendered into #bdv2TopbarCrumb ---- */
/* Match/exceed the app's .bdv2-topbar-crumb specificity so we win the cascade. */
#brandDeepV2Modal .bdv2-topbar-crumb .bcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font: 500 12px/1 var(--font-ui);
  color: var(--tx-3);
}
#brandDeepV2Modal .bdv2-topbar-crumb .bcrumb svg {
  color: var(--bd-strong);
  flex: none;
}
/* crumb links (navigable levels) */
#brandDeepV2Modal .bdv2-topbar-crumb .bcrumb a {
  color: var(--tx-3);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--r-1);
  padding: 2px 3px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
#brandDeepV2Modal .bdv2-topbar-crumb .bcrumb a:hover {
  color: var(--tx-1);
  text-decoration: none;
}
#brandDeepV2Modal .bdv2-topbar-crumb .bcrumb a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* current level (last crumb, non-navigable) */
#brandDeepV2Modal .bdv2-topbar-crumb .bcrumb .cur {
  color: var(--tx-1);
  font-weight: 600;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* small mode/country qualifier inside the brand crumb, e.g. "(US · brand)" */
#brandDeepV2Modal .bdv2-topbar-crumb .bcrumb .bcrumb-tag {
  color: var(--tx-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* ═══ Palette A "Porcelain" — primary button + accent polish ═══
   Overrides the v2 ember primary. Near-white on dark, near-black on light.
   Placed last so it wins the cascade over the primitives .btn.primary. */
.btn.primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: transparent;
  box-shadow: var(--sh-1);
}
.btn.primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }
.btn.primary:active { transform: translateY(1px); }
/* keep the profile avatar / brand mark quiet in porcelain (no loud accent fill) */
.profile-avatar { background: linear-gradient(135deg, var(--bg-3), var(--bg-hover)); color: var(--tx-1); border-color: var(--bd-strong); }

/* ═══════════ v5 — Deep-dive: compact header + populated tabs ═══════════ */
/* #209 — compact brand block + slim tier rail (was a huge header) */
.bdv2-sidebar-brand{padding:14px 14px 10px!important;gap:10px!important}
.bdv2-sidebar-brand .bdv2-icon{width:30px!important;height:30px!important;font-size:15px!important;border-radius:9px!important}
.bdv2-sidebar-brand h2{font-size:15px!important;letter-spacing:-.02em}
.bdv2-sidebar-brand .bdv2-sub{font-size:10.5px!important;line-height:1.45!important;opacity:.75}
.bdv2-sidebar-tiers{padding:6px 10px!important;gap:2px!important}
.bdv2-tier{padding:7px 10px!important;font-size:12.5px!important;border-radius:8px!important}
.bdv2-topbar-slim{min-height:40px!important;padding:6px 14px!important}

/* product header — one clean row */
.bdv2-prod-h.compact{margin:0 0 10px}
.bdv2-prod-h-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bdv2-prod-h.compact h2{font-size:19px;margin:0;display:flex;align-items:center;gap:10px}
.bdv2-prod-def{font-size:12px;margin:4px 0 0;max-width:70ch}
.bdv2-prod-stats.slim{display:flex;gap:18px;margin:0}
.bdv2-prod-stats.slim > div{display:flex;flex-direction:column;align-items:flex-end}
.bdv2-prod-stats.slim .n{font-weight:700;font-size:15px}
.bdv2-prod-stats.slim .l{font:600 9px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}

/* sub-tabs with live count chips */
.bdv2-subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--bd);padding-bottom:8px;margin-bottom:14px}
.bdv2-subtab .st-cnt{display:inline-block;min-width:18px;text-align:center;padding:1px 6px;border-radius:99px;font-size:10.5px;font-weight:700;background:color-mix(in srgb,var(--tx-1) 8%,transparent);color:var(--tx-2);margin-left:3px}
.bdv2-subtab.active .st-cnt{background:var(--accent);color:#0C0E14}

/* timeline stat cards */
.bdv2-tl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px}
.bdv2-tl-card{border:1px solid var(--bd);border-radius:14px;padding:14px 16px;background:var(--bg-surface);position:relative;overflow:hidden}
.bdv2-tl-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.bdv2-tl-card.kickoff::before{background:#ec4899}.bdv2-tl-card.longest::before{background:#22c55e}.bdv2-tl-card.journey::before{background:#6366f1}
.bdv2-tl-card .tc-l{font:650 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);display:flex;gap:6px;align-items:center;margin-bottom:8px}
.bdv2-tl-card .tc-v{font-size:22px;font-weight:750;letter-spacing:-.02em}
.bdv2-tl-card .tc-s{font-size:11.5px;color:var(--tx-3);margin-top:5px}
.bdv2-tl-card .tc-s b{color:var(--tx-2);font-weight:650}

/* monthly stacked chart */
.bdv2-tl-chart{border:1px solid var(--bd);border-radius:14px;padding:16px;background:var(--bg-surface);margin-bottom:14px}
.tlc-title{font-size:12px;color:var(--tx-3);margin-bottom:12px}
.tlc-title b{color:var(--tx-2)}
.bdv2-tlc-row{display:flex;align-items:center;gap:12px;margin:7px 0}
.tlc-m{flex:0 0 52px;font:650 10.5px/1 var(--font-mono);letter-spacing:.06em;color:var(--tx-3)}
.tlc-track{flex:1;min-width:0}
.tlc-bar{display:flex;height:16px;border-radius:5px;overflow:hidden;min-width:8px}
.tlc-bar .seg{display:block;height:100%}
.seg.tof,.dot.tof{background:#5B8CFF}.seg.mof,.dot.mof{background:#ec4899}.seg.bof,.dot.bof{background:#eab308}
.tlc-n{flex:0 0 34px;text-align:right;font-weight:700;font-size:12.5px}
.tlc-legend{display:flex;gap:16px;margin-top:12px;font-size:11px;color:var(--tx-3)}
.tlc-legend .dot{display:inline-block;width:14px;height:6px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* journey narrative */
.bdv2-journey-narr{border:1px solid var(--bd);border-radius:14px;padding:16px 18px;background:var(--bg-surface);margin-bottom:14px}
.jn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.jn-title{font:650 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);display:flex;gap:6px;align-items:center}
.jn-verdict{border:1px solid color-mix(in srgb,#eab308 40%,transparent);background:color-mix(in srgb,#eab308 8%,transparent);border-radius:10px;padding:7px 12px;text-align:right}
.jn-verdict span{display:block;font:650 8.5px/1 var(--font-mono);letter-spacing:.14em;color:var(--tx-3)}
.jn-verdict b{color:#eab308;font-size:13px}
.jn-one{font-size:15px;font-weight:650;letter-spacing:-.01em;margin:10px 0 4px}
.jn-arc{font-size:12.5px;color:var(--tx-2);line-height:1.6;background:color-mix(in srgb,var(--tx-1) 4%,transparent);border-radius:10px;padding:12px 14px;margin:10px 0}
.jn-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jn-col{background:color-mix(in srgb,var(--tx-1) 4%,transparent);border-radius:10px;padding:10px 12px}
.jn-col-h{font:650 9.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);margin-bottom:6px}
.jn-col p{font-size:11.5px;color:var(--tx-2);margin:0;line-height:1.55}
.jn-months{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.jn-month{font-size:11.5px;color:var(--tx-2)}
.jn-month b{font-family:var(--font-mono);font-size:10.5px;color:var(--tx-3);margin-right:6px}
@media(max-width:760px){.jn-cols{grid-template-columns:1fr}}

/* buying-stage blocks */
.bdv2-funnel-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.bdv2-funnel-block{border:1px solid var(--bd);border-radius:14px;padding:16px;background:var(--bg-surface);position:relative;overflow:hidden}
.bdv2-funnel-block::before{content:"";position:absolute;left:0;top:0;right:0;height:3px}
.bdv2-funnel-block.tof::before{background:#5B8CFF}.bdv2-funnel-block.mof::before{background:#ec4899}.bdv2-funnel-block.bof::before{background:#eab308}
.fb-stage{font:700 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--tx-3)}
.fb-n{font-size:26px;font-weight:750;margin:8px 0 2px}
.fb-pct{font-size:11.5px;color:var(--accent);font-weight:650}
.fb-desc{font-size:11px;color:var(--tx-3);margin-top:8px;line-height:1.55}

/* hooks */
.bdv2-hook-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:12px}
.bdv2-hook-row{border:1px solid var(--bd);border-radius:12px;padding:12px 14px;background:var(--bg-surface)}
.hr-head{display:flex;justify-content:space-between;align-items:center}
.hr-name{font-weight:650;font-size:13px;text-transform:capitalize}
.hr-n{font-weight:750;font-size:14px;color:var(--accent)}
.hr-bar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--tx-1) 7%,transparent);margin:8px 0 7px;overflow:hidden}
.hr-bar > div{height:100%;border-radius:3px;background:linear-gradient(90deg,#5B8CFF,#8B7CF6)}
.hr-desc{font-size:10.8px;color:var(--tx-3);line-height:1.5}
.bdv2-lever-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.bdv2-lever-chip{border:1px solid var(--bd);border-radius:99px;padding:6px 12px;font-size:11.5px;color:var(--tx-2);text-transform:capitalize}
.bdv2-lever-chip b{color:var(--tx-1);margin-left:4px}

/* script recycling */
.bdv2-rc-group{border:1px solid var(--bd);border-radius:14px;padding:14px 16px;background:var(--bg-surface);margin:10px 0}
.rc-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rc-n{font-weight:700;font-size:12.5px}
.rc-winner{font-size:10.5px;font-weight:700;color:#eab308;border:1px solid color-mix(in srgb,#eab308 40%,transparent);border-radius:99px;padding:3px 9px}
.rc-src{font:650 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);border:1px solid var(--bd);border-radius:99px;padding:3px 8px}
.rc-quote{font-size:12px;color:var(--tx-2);border-left:3px solid var(--accent);margin:10px 0;padding:4px 0 4px 12px;line-height:1.6;font-style:italic}
.rc-grid{margin-top:8px}
.bdv2-rc-chip{display:inline-block;border:1px solid var(--bd);border-radius:8px;padding:6px 10px;font-family:var(--font-mono);font-size:10.5px;color:var(--tx-3)}

/* v5.1 — FIX: the deep-dive split was collapsing to a stacked column
   (base .bdv2-shell sets display:flex column, which ignored the grid columns),
   so the sidebar rendered as a huge full-width band on top = "the big header".
   Force the real two-column layout: slim left rail + content. */
.bdv2-shell-split{display:grid!important;grid-template-columns:260px 1fr!important;grid-template-rows:100%!important;height:100%!important;flex-direction:unset!important}
.bdv2-shell-split .bdv2-sidebar{width:auto!important;height:100%!important;overflow-y:auto;border-right:1px solid var(--bd)}
.bdv2-shell-split .bdv2-main{height:100%!important;min-width:0;overflow:hidden;display:flex;flex-direction:column}
.bdv2-shell-split .bdv2-body{flex:1;overflow-y:auto}
@media(max-width:900px){.bdv2-shell-split{grid-template-columns:1fr!important;grid-template-rows:auto 1fr!important}.bdv2-shell-split .bdv2-sidebar{height:auto!important;border-right:0;border-bottom:1px solid var(--bd)}}

/* ═══════════ v5.2 — deep-dive cards: badges, chips, breakdown, filters ═══════════ */
/* adaptive aspect: JS sets --adapt from the preview's natural size */
#bdv2Body .creative-card .cc-media{aspect-ratio:var(--adapt,4/5)!important;position:relative;overflow:hidden}
.cc-expired{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--tx-3);background:color-mix(in srgb,var(--tx-1) 5%,transparent)}
.cc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;pointer-events:none}

/* badge strip over the thumb */
.cc-badges{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);z-index:2}
.ccb{display:inline-flex;align-items:center;gap:4px;font:700 10px/1 var(--font-ui);padding:3px 7px;border-radius:99px;color:#fff;background:rgba(20,22,30,.75);border:none}
.ccb.winner{background:linear-gradient(90deg,#b45309,#eab308);color:#1a1304}
.ccb.scaled{background:linear-gradient(90deg,#4338ca,#6366f1)}
.ccb.dedup{background:rgba(20,22,30,.85);cursor:pointer;border:1px solid rgba(255,255,255,.25)}
.ccb.dedup:hover{background:var(--accent);color:#0C0E14}
.ccb.fresh{background:rgba(8,145,178,.85)}
.ccb.age{background:rgba(20,22,30,.7);font-weight:600}

/* meta chips + hook/angle lines */
.cc-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.cc-fnl{font:700 9px/1 var(--font-mono);letter-spacing:.08em;padding:3px 7px;border-radius:5px}
.cc-fnl.tof{background:color-mix(in srgb,#5B8CFF 18%,transparent);color:#5B8CFF}
.cc-fnl.mof{background:color-mix(in srgb,#ec4899 18%,transparent);color:#ec4899}
.cc-fnl.bof{background:color-mix(in srgb,#eab308 18%,transparent);color:#eab308}
.cc-hooktag{font:600 9.5px/1 var(--font-ui);padding:3px 7px;border-radius:5px;background:color-mix(in srgb,var(--tx-1) 8%,transparent);color:var(--tx-2);text-transform:capitalize}
.cc-angle{font-size:10.5px;color:var(--tx-3);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* filter pills row */
.bdv2-toolbar-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bdv2-fpills{display:flex;gap:4px;flex-wrap:wrap}
.bdv2-fpill{border:1px solid var(--bd);background:transparent;color:var(--tx-2);border-radius:99px;padding:5px 12px;font:600 11.5px/1 var(--font-ui);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.bdv2-fpill b{color:var(--tx-3);font-weight:700;margin-left:2px}
.bdv2-fpill:hover{border-color:var(--bd-strong)}
.bdv2-fpill.active{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:transparent}
.bdv2-fpill.active b{color:inherit;opacity:.7}

/* iteration breakdown overlay */
#bdv2CbOverlay{position:fixed;inset:0;background:rgba(4,5,8,.72);z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px}
#bdv2CbOverlay[hidden]{display:none}
.bdv2-cb-panel{width:min(620px,94vw);max-height:82vh;overflow-y:auto;background:var(--bg-surface);border:1px solid var(--bd-strong);border-radius:16px;padding:18px 20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.cb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cb-title{font-weight:750;font-size:15px;display:flex;align-items:center;gap:8px}
.cb-verdict{font-size:12px;margin-top:6px;padding:7px 10px;border-radius:9px;line-height:1.5}
.cb-verdict.winner{background:color-mix(in srgb,#eab308 10%,transparent);color:#eab308}
.cb-verdict.potential{background:color-mix(in srgb,#22c55e 10%,transparent);color:#22c55e}
.cb-verdict.multi{background:color-mix(in srgb,var(--tx-1) 6%,transparent);color:var(--tx-2)}
.cb-sub{font-size:11.5px;color:var(--tx-3);margin:8px 0 12px}
.cb-rows{display:flex;flex-direction:column;gap:6px}
.cb-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--bd);border-radius:10px;font-size:12px;flex-wrap:wrap}
.cb-row.og{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.cb-idx{font:700 10px/1 var(--font-mono);min-width:26px;color:var(--tx-3)}
.cb-row.og .cb-idx{color:var(--accent)}
.cb-dates{color:var(--tx-2);min-width:150px}
.cb-days{font-weight:700}
.cb-gap{font:600 10px/1 var(--font-mono);color:var(--tx-3)}
.cb-gap.original{color:var(--accent)}
.cb-live{font:700 9px/1 var(--font-mono);letter-spacing:.08em;color:#22c55e;border:1px solid color-mix(in srgb,#22c55e 40%,transparent);border-radius:99px;padding:3px 7px}
.cb-ended{font:600 9px/1 var(--font-mono);letter-spacing:.06em;color:var(--tx-3);opacity:.7}
.cb-low{font:700 9px/1 var(--font-mono);color:#f43f5e}
.cb-open{margin-left:auto;font-size:11px}

/* beats list in the analysis modal */
.da-beats{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--tx-2);line-height:1.55}
.da-beat-t{font-family:var(--font-mono);font-size:10.5px;color:var(--accent)}

/* ═══════════ v5.3 — overlap fix, playable iterations, drills, promo section ═══════════ */
/* format chip: move OFF the badge strip (was overlapping) — bottom-left, truncated */
#bdv2Body .creative-card .cc-fmt{top:auto!important;bottom:6px!important;left:6px!important;right:auto!important;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-size:9px!important;opacity:.9}
#bdv2Body .creative-card .ba-days{display:none} /* superseded by the age badge */
.cc-badges{padding-right:8px;z-index:2}
.ccb{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* iteration breakdown — bigger + playable rows */
.bdv2-cb-panel{width:min(920px,96vw)!important;max-height:88vh!important}
.cb-play-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--bd-strong);background:transparent;color:var(--tx-1);border-radius:8px;padding:5px 11px;font:650 11px/1 var(--font-ui);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.cb-play-btn:hover{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:transparent}
.cb-video{margin:4px 0 10px 36px}
.cb-video video{width:100%;max-width:420px;max-height:60vh;border-radius:12px;background:#000;display:block}
.cb-video-dead{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx-3);border:1px dashed var(--bd);border-radius:10px;padding:12px 14px;max-width:520px}

/* clickable drills */
.bdv2-hook-row.clickable,.bdv2-funnel-block.clickable,.bdv2-lever-chip.clickable{cursor:pointer;transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.bdv2-hook-row.clickable:hover,.bdv2-funnel-block.clickable:hover{border-color:var(--accent);transform:translateY(-1px)}
.bdv2-lever-chip.clickable:hover{border-color:var(--accent)}
.bdv2-hook-row.active,.bdv2-funnel-block.active{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent)}
.bdv2-lever-chip.active{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.bdv2-lever-chip.active b{color:inherit}
.bdv2-drill-sec{margin-top:18px;padding-top:14px;border-top:1px solid var(--bd)}

/* promo campaigns section in the products list */
.bdv2-prods-h{font:650 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);margin:4px 4px 8px;display:flex;align-items:center;gap:6px}
.bdv2-prods-h.promo{margin-top:18px;padding-top:14px;border-top:1px solid var(--bd);color:#ec4899}
.bdv2-prods-h .muted{font-family:var(--font-ui);letter-spacing:0}

/* ═══════════ v5.4 — ONE hero search (Claude-style negative space) ═══════════ */
.hero-search{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:56vh;padding:40px 24px;gap:0}
.hs-title{font-family:var(--font-display);font-size:clamp(28px,3.6vw,42px);font-weight:750;letter-spacing:-.03em;margin:0 0 10px;color:var(--tx-1)}
.hs-sub{font-size:14px;color:var(--tx-3);max-width:56ch;margin:0 0 26px;line-height:1.6}
.hs-modes{display:inline-flex;gap:2px;background:color-mix(in srgb,var(--tx-1) 5%,transparent);border:1px solid var(--bd);border-radius:99px;padding:3px;margin-bottom:18px}
.hs-mode{border:none;background:transparent;color:var(--tx-3);border-radius:99px;padding:8px 18px;font:650 12.5px/1 var(--font-ui);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all var(--t-fast) var(--ease)}
.hs-mode:hover{color:var(--tx-1)}
.hs-mode.active{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.hs-bar{display:flex;align-items:center;gap:8px;width:min(780px,94%);background:var(--bg-surface);border:1px solid var(--bd-strong);border-radius:18px;padding:8px 10px 8px 18px;box-shadow:0 18px 50px -22px rgba(0,0,0,.55);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.hs-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),0 18px 50px -22px rgba(0,0,0,.55)}
.hs-lead{font-size:17px;color:var(--tx-3);flex:none}
.hs-input{flex:1;min-width:0;border:none;background:transparent;color:var(--tx-1);font:400 15.5px/1.4 var(--font-ui);height:44px;outline:none}
.hs-input::placeholder{color:var(--tx-3)}
.hs-controls{display:flex;align-items:center;gap:6px;flex:none}
.hs-select,.hs-cap{height:36px;border:1px solid var(--bd);background:transparent;color:var(--tx-2);border-radius:10px;font:600 12.5px/1 var(--font-ui);padding:0 8px}
.hs-cap{width:74px;text-align:center}
.hs-go{height:40px;border:none;border-radius:12px;background:var(--btn-primary-bg);color:var(--btn-primary-fg);font:700 13.5px/1 var(--font-ui);padding:0 20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.hs-go:hover{background:var(--btn-primary-bg-hover)}
.hs-go:active{transform:translateY(1px)}
.hs-hint{font-size:12px;color:var(--tx-3);margin-top:16px;max-width:60ch}

/* run open → hero collapses to a slim always-there bar; the query lives below in the run header */
body.run-open .hero-search{min-height:0;padding:14px 24px 6px;gap:0}
body.run-open .hs-title,body.run-open .hs-sub{display:none}
body.run-open .hs-modes{margin-bottom:10px;transform:scale(.92);transform-origin:center}
body.run-open .hs-bar{padding:5px 8px 5px 14px;border-radius:14px;box-shadow:none}
body.run-open .hs-input{height:36px;font-size:13.5px}
body.run-open .hs-go{height:34px;padding:0 14px}
body.run-open .hs-hint{display:none}
@media(max-width:720px){.hs-bar{flex-wrap:wrap;padding:10px}.hs-input{width:100%;flex:1 1 100%}.hs-controls{width:100%;justify-content:flex-end}}

/* v5.5 — pair modal: download-first flow */
.pair-step{display:flex;gap:12px;margin:0 0 18px}
.pair-step-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#0C0E14;font:700 12px/24px var(--font-ui);text-align:center}
.pair-step-body{flex:1;min-width:0}
.pair-step-body strong{display:block;font-size:14px;margin-bottom:3px}
.pair-step-body .subtle{font-size:12px;margin:0 0 10px}
.pair-dl{display:inline-flex;align-items:center;gap:8px}
.pair-dl[aria-disabled=true]{opacity:.5;pointer-events:none}
.pair-dl-note{font-size:11px;margin-top:7px}
.pair-manual{margin-top:8px}
.pair-manual summary{font-size:12px;color:var(--tx-3);cursor:pointer}
.pair-manual .pair-code{margin-top:8px}

/* ═══════════════════════════════════════════════════════════════════
   v5.6 — Paywall / upgrade modal (free-trial limit, 402 upgrade_required)
   ═══════════════════════════════════════════════════════════════════ */
.pw-title { display: inline-flex; align-items: center; gap: 10px; }
.pw-title-icon {
  width: 26px; height: 26px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: var(--r-3);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent); font-size: 15px;
}
.pw-lede { margin: 0 0 var(--s-4); color: var(--tx-2); font-size: 13px; line-height: 1.6; }
.pw-lede .num { color: var(--tx-1); font-weight: 600; }
.pw-plan {
  background: var(--bg-sunken);
  border: 1px solid var(--bd);
  border-radius: var(--r-4);
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.pw-plan-label {
  display: flex; align-items: center; gap: 6px;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-3); margin-bottom: var(--s-3);
}
.pw-plan-label i { color: var(--accent); font-size: 13px; }
.pw-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pw-feat li { display: flex; align-items: center; gap: 10px; font: 500 13px/1.4 var(--font-ui); color: var(--tx-1); }
.pw-check {
  width: 20px; height: 20px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.pw-check i { font-size: 12px; }
.pw-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px dashed var(--bd-strong);
}
.pw-price-num {
  font-family: var(--font-display);
  font-weight: 700; font-size: 20px; line-height: 1;
  letter-spacing: -0.02em; color: var(--tx-1);
}
.pw-price-per { font: 500 12px/1 var(--font-ui); color: var(--tx-3); }
.pw-price-soon {
  margin-left: auto; padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--bg-surface); border: 1px solid var(--bd);
  color: var(--tx-3);
  font: 600 10px/1.4 var(--font-mono);
  letter-spacing: .05em; text-transform: uppercase;
}
.pw-actions { align-items: center; }
.pw-actions .pw-contact {
  margin-right: auto;
  font-size: 11.5px; color: var(--tx-3);
  text-decoration: underline dotted; text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.pw-actions .pw-contact:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   v5.7 — Multi-page: connector chip, Gemini gate modal, scrape mascot
   ═══════════════════════════════════════════════════════════════════ */
/* Connector status chip (research hero) */
.conn-status{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:7px 14px;border:1px solid var(--bd);border-radius:999px;background:var(--bg-surface);font-size:12px;color:var(--tx-2)}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--tx-3)}
.conn-dot.on{background:var(--hero,#3ECF8E);box-shadow:0 0 0 3px color-mix(in srgb,var(--hero,#3ECF8E) 25%,transparent)}
.conn-dot.wait{background:var(--accent);animation:connpulse 1.4s ease-in-out infinite}
@keyframes connpulse{0%,100%{opacity:1}50%{opacity:.3}}
.conn-status a{color:var(--accent);text-decoration:none;font-weight:600}
.conn-status a:hover{text-decoration:underline}

/* Gemini gate modal */
.gg-title{display:inline-flex;align-items:center;gap:10px}
.gg-title-icon{width:26px;height:26px;flex:none;display:inline-grid;place-items:center;border-radius:var(--r-3);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);color:var(--accent);font-size:15px}
.gg-lede{margin:0 0 var(--s-4);color:var(--tx-2);font-size:13px;line-height:1.65}
.gg-field{display:flex;gap:8px;align-items:center}
.gg-field .settings-input{flex:1}
.gg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.gg-getkey{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--tx-3);text-decoration:underline dotted;text-underline-offset:3px}
.gg-getkey:hover{color:var(--accent)}
.gg-status{font-size:11.5px;color:var(--tx-3)}
.gg-status.ok{color:var(--hero,#3ECF8E)}
.gg-status.err{color:var(--danger,#F87171)}

/* Scrape mascot — smoking + dancing */
.smk-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin:2px auto 10px}
.smk-bubble{position:relative;padding:7px 14px;border:1px solid var(--bd);border-radius:14px;background:var(--bg-surface);font-size:12px;color:var(--tx-1);max-width:260px;text-align:center}
.smk-bubble::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--bd);border-bottom:0}
.smk-guy{display:block;overflow:visible}
.smk-skin{fill:#E8B98E}
.smk-ink{fill:#1A1D24}
.smk-hair{fill:#2A2E38}
.smk-mouth{stroke:#1A1D24;stroke-width:1.6;fill:none;stroke-linecap:round}
.smk-shirt{fill:var(--accent,#AAB8D0)}
.smk-pant{fill:#3A4150}
.smk-shoe{fill:#171A20}
.smk-cig{fill:#F5F2EA}
.smk-ember{fill:#FF7A45;animation:smkglow 1.1s ease-in-out infinite}
@keyframes smkglow{0%,100%{opacity:.65}50%{opacity:1;filter:drop-shadow(0 0 3px #FF7A45)}}
.smk-body{transform-origin:60px 118px;animation:smkbop .62s ease-in-out infinite}
@keyframes smkbop{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.smk-head{transform-origin:60px 42px;animation:smknod 1.24s ease-in-out infinite}
@keyframes smknod{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
.smk-armL{transform-origin:46px 54px;animation:smkswingL .62s ease-in-out infinite}
@keyframes smkswingL{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-24deg)}}
.smk-armR{transform-origin:74px 54px;animation:smkpuffarm 3.72s ease-in-out infinite}
@keyframes smkpuffarm{0%,55%,100%{transform:rotate(-14deg)}65%,80%{transform:rotate(-52deg)}}
.smk-legL{transform-origin:53px 88px;animation:smkstepL .62s ease-in-out infinite}
@keyframes smkstepL{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg) translateY(-2px)}}
.smk-legR{transform-origin:66px 88px;animation:smkstepR .62s ease-in-out infinite}
@keyframes smkstepR{0%,100%{transform:rotate(-8deg) translateY(-2px)}50%{transform:rotate(2deg)}}
.smk-puff{fill:var(--tx-3);opacity:0}
.smk-puff.p1{animation:smksmoke 2.6s ease-out infinite}
.smk-puff.p2{animation:smksmoke 2.6s ease-out .55s infinite}
.smk-puff.p3{animation:smksmoke 2.6s ease-out 1.1s infinite}
@keyframes smksmoke{0%{opacity:0;transform:translate(0,0) scale(.5)}18%{opacity:.55}100%{opacity:0;transform:translate(9px,-26px) scale(1.7)}}
@media(prefers-reduced-motion:reduce){
  .smk-body,.smk-head,.smk-armL,.smk-armR,.smk-legL,.smk-legR{animation:none}
}

/* ═══ See Ads v2 — TOTAL column + ads-first modal (local-app parity) ═══ */
/* TOTAL column — mirrors .brand-count (bible .lb-num) */
.brand-total { text-align: right; min-width: 0; }
.brand-total .n {
  display: block; font-family: var(--font-mono); font-size: 14px;
  font-weight: 700; line-height: 1.1; color: var(--tx-2);
  font-variant-numeric: tabular-nums;
}
.brand-total .l {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tx-3);
}

/* Scope row: On keyword | All ads + right-side action buttons */
.ba-scope-row {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-bottom: var(--s-3);
}
.ba-scope-spacer { flex: 1; }
.ba-scope-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  color: var(--tx-2); background: var(--bg-raised);
  border: 1px solid var(--bd); border-radius: var(--r-full);
  cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.ba-scope-pill:hover { border-color: var(--bd-strong); color: var(--tx-1); }
.ba-scope-pill.active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}
.ba-scope-pill .rv-tab-c { margin-left: 2px; }

/* Deduped copies badge — "dup of …xxxxxx" tag on removed copies */
.ba-dupof {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 7px; border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  background: color-mix(in srgb, var(--bg-base) 78%, transparent);
  color: var(--tx-3); backdrop-filter: blur(4px);
  border: 1px solid var(--bd);
}
.ba-seeads .ba-grid { margin-top: var(--s-3); }
.ba-seeads .brands-show-all { margin: var(--s-3) auto 0; display: block; }

/* ═══ Dedup-journey badge (clickable) + iteration-timeline popup ═══ */
.cc-iter-btn {
  position: absolute; top: 6px; right: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  color: #fff; background: color-mix(in srgb, var(--accent) 88%, #000);
  border-radius: var(--r-full); box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cc-iter-btn:hover { transform: scale(1.08); background: var(--accent); }
.cc-iter-btn i { font-size: 11px; }
.adm-iter-tag { cursor: pointer; }

.dj-modal { position: fixed; inset: 0; z-index: 1200; }
.dj-modal[hidden] { display: none; }
.dj-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.dj-sheet {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(680px, 94vw); max-height: 88vh; overflow: auto;
  background: var(--bg-raised); border: 1px solid var(--bd-strong);
  border-radius: var(--r-4); box-shadow: 0 24px 70px rgba(0,0,0,.5);
  padding: 20px;
}
.dj-close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bg-sunken); border: 1px solid var(--bd); border-radius: var(--r-full); color: var(--tx-2);
}
.dj-close:hover { color: var(--tx-1); border-color: var(--bd-strong); }
.dj-head { display: flex; gap: 14px; margin-bottom: 16px; }
.dj-face { flex: none; width: 84px; height: 84px; border-radius: var(--r-3); overflow: hidden; background: var(--bg-sunken); }
.dj-face img { width: 100%; height: 100%; object-fit: cover; }
.dj-noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--tx-3); }
.dj-title { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--tx-1); display: flex; align-items: center; gap: 6px; }
.dj-title i { color: var(--accent); }
.dj-sub { font-size: 12.5px; color: var(--tx-2); margin: 3px 0 8px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.dj-stat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; background: var(--bg-sunken); color: var(--tx-2); border: 1px solid var(--bd); }
.dj-stat i { font-size: 12px; }
.dj-stat.running { color: #16b364; background: color-mix(in srgb, #16b364 12%, transparent); border-color: color-mix(in srgb, #16b364 30%, transparent); }
.dj-stat.stopped { color: var(--tx-3); }
.dj-stat.iter { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.dj-timeline { position: relative; padding-left: 6px; }
.dj-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--bd); position: relative; }
.dj-row:last-child { border-bottom: 0; }
.dj-row-dot { flex: none; width: 10px; height: 10px; border-radius: var(--r-full); background: var(--tx-3); margin: 0 4px; }
.dj-row.run .dj-row-dot { background: #16b364; box-shadow: 0 0 0 3px color-mix(in srgb, #16b364 25%, transparent); }
.dj-row-body { flex: 1; min-width: 0; }
.dj-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dj-ver { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--tx-1); }
.dj-state { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: .03em; }
.dj-state.run { color: #16b364; background: color-mix(in srgb, #16b364 14%, transparent); }
.dj-state.stop { color: var(--tx-3); background: var(--bg-sunken); }
.dj-lowimp { font-size: 10px; font-weight: 600; color: #eab308; }
.dj-ad { font-family: var(--font-mono); font-size: 10.5px; color: var(--tx-3); }
.dj-row-dates { font-size: 11.5px; color: var(--tx-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.dj-open { flex: none; }

/* ═══ Live scraping state (run dashboard while a scrape is running) ═══ */
.rv-tag.live { color: #16b364; background: color-mix(in srgb, #16b364 12%, transparent); border-color: color-mix(in srgb, #16b364 32%, transparent); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #16b364; box-shadow: 0 0 0 0 rgba(22,179,100,.6); animation: livePulse 1.4s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(22,179,100,.55);} 70% { box-shadow: 0 0 0 7px rgba(22,179,100,0);} 100% { box-shadow: 0 0 0 0 rgba(22,179,100,0);} }
.rv-scraping {
  max-width: 620px; margin: 8vh auto 0; text-align: center;
  padding: 40px 28px; background: var(--bg-raised);
  border: 1px solid var(--bd); border-radius: var(--r-4);
}
.rv-scr-icon { font-size: 40px; color: var(--accent); margin-bottom: 14px; }
.rv-scr-icon .spin { animation: spin 1.4s linear infinite; display: inline-block; }
.rv-scr-head { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--tx-2); margin-bottom: 18px; }
.rv-scr-num { margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.rv-scr-num .big { font-family: var(--font-mono); font-size: 46px; font-weight: 800; color: var(--tx-1); line-height: 1; }
.rv-scr-num .of { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--tx-3); }
.rv-scr-bar { height: 10px; background: var(--bg-sunken); border-radius: var(--r-full); overflow: hidden; margin-bottom: 6px; }
.rv-scr-bar .fill { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, color-mix(in srgb,var(--accent) 70%, #16b364), var(--accent)); transition: width .5s var(--ease); }
.rv-scr-pct { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 20px; }
.rv-scr-note { font-size: 12.5px; line-height: 1.6; color: var(--tx-3); max-width: 46ch; margin: 0 auto; }