/* ============================================================================
   HitOrNot — Studio Print
   Warm-paper editorial direction. Mobile-first. Typography-led.
   Legacy structural styles below the token block read color + type from
   these variables so swapping tokens shifts the entire visual language.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

img, svg, video { display: block; max-width: 100%; height: auto; }

:root {
  /* Tell the browser our UI is light-mode native — without this, system
     dark-mode can apply heuristic color inversion that breaks the YouTube-
     native palette (white surfaces become near-black, accents shift). */
  color-scheme: light;

  /* YouTube-native palette: white + brand red */
  --paper:           #FFFFFF;   /* pure white surface */
  --paper-2:         #F9F9F9;   /* card gray (YouTube's actual card surface) */
  --paper-3:         #F0F0F0;   /* deeper inset */
  --ink:             #0F0F0F;   /* YouTube body-text near-black */
  --ink-soft:        #3F3F3F;   /* secondary text */
  --ink-muted:       #606060;   /* YouTube secondary metadata color */
  --ink-faint:       #909090;   /* placeholder, hint */
  --accent:          #FF0033;   /* YouTube brand red — high-score + primary CTA */
  --accent-soft:     #CC0000;   /* subscribe-button red, used on hover */
  --accent-bg:       #FFE9ED;   /* faint red-tinted surface for highlights */

  /* Gold/amber secondary — achievement states, save tags, Pro tier highlight,
     hero accents. Used sparingly: never as primary CTA, never for chrome. */
  --gold:            #F59E0B;   /* warm amber */
  --gold-soft:       #D97706;   /* hover */
  --gold-bg:         #FEF3D5;   /* faint amber-tinted surface */

  /* Hairlines */
  --hairline:        rgba(15, 15, 15, 0.08);
  --hairline-strong: rgba(15, 15, 15, 0.18);
  --hairline-bold:   rgba(15, 15, 15, 0.32);

  /* Legacy aliases — keep working with existing components */
  --bg:              var(--paper);
  --surface:         var(--paper-2);
  --border:          var(--hairline);
  --text:            var(--ink);
  --muted:           var(--ink-muted);

  /* Score states — single neutral-to-red ramp. Red is "high/win" because
     in YouTube context red = brand. Mid is full ink, low is muted gray.
     Three shades on one ramp — no stoplight, no third color introduced. */
  --green:           var(--accent);     /* high → red */
  --amber:           var(--ink);        /* mid → black */
  --danger:          var(--ink-muted);  /* low → gray, NOT alarmist red */
  --red:             var(--accent);
  --red-light:       var(--accent);

  --radius:          8px;

  /* Type stacks — Inter throughout (no serif body in a YouTube-native look) */
  --font-display: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Opacity hierarchy */
  --opacity-1: 0.95;
  --opacity-2: 0.62;
  --opacity-3: 0.38;
}

body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}

::selection { background: var(--accent); color: var(--paper); }

/* ── Header ── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 2rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo img {
  height: 80px;
  width: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.quota-badge {
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}

.quota-badge.pro { color: var(--green); border-color: #1a5c35; background: #0d2b1a; }
.quota-badge.creator { color: #a78bfa; border-color: #4c1d95; background: #1e1040; }
.quota-badge.low { color: var(--amber); }
.quota-badge.empty { color: var(--danger); }

.cancel-chip {
  font-size: 0.74rem;
  font-weight: 600;
  color: #ffb380;
  background: #1f1208;
  border: 1px solid #5b3210;
  border-radius: 20px;
  padding: 0.28rem 0.7rem;
  white-space: nowrap;
  cursor: help;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-name { font-size: 0.88rem; color: var(--muted); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.btn:hover { opacity: 0.88; }
.btn-primary { background: linear-gradient(90deg, var(--red), #FF4444); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost  { background: transparent; color: var(--muted); padding: 0.4rem 0.6rem; }
.btn-sm { font-size: 0.8rem; padding: 0.35rem 0.8rem; }
.btn-full { width: 100%; justify-content: center; font-size: 1rem; padding: 0.75rem; }

/* ── Layout ── */
main {
  flex: 1;
  display: grid;
  grid-template-columns: 420px 1fr;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  gap: 2rem;
}

@media (max-width: 900px) {
  main { display: flex; flex-direction: column; padding: 1rem; }
  .results-section { order: -1; }
  header { padding: 0.75rem 1rem; }
  .logo img { height: 64px; }
}

/* Tight mobile: logo + buttons + footer fit comfortably on a 360-414px viewport */
@media (max-width: 480px) {
  header {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }
  .logo img { height: 44px; }
  .header-right {
    gap: 0.35rem;
    justify-content: flex-end;
  }
  .header-right .btn,
  .hdr-nav .btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
  }

  footer {
    padding: 1rem 0.75rem 1.5rem;
    line-height: 1.9;
  }
  footer a {
    display: inline-block;
    margin: 0.15rem 0.4rem;
  }
}

/* ── Poster-style results (single screen, bold, compact) ────────────────── */

body.has-result main {
  grid-template-columns: 1fr;
  max-width: 100%;
  padding: 1.5rem 2rem;
  gap: 0;
}
body.has-result .predict-form,
body.has-result .page-head,
body.has-result #studioBanner { display: none; }
body.has-result .results { padding: 0; }

.poster {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.6rem 1.6rem 1.2rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

/* Tier-tinted radial wash sits behind everything */
.poster::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.poster[data-tier="strong"]::before {
  background: radial-gradient(70% 60% at 50% 0%, rgba(46, 233, 155, 0.16) 0%, transparent 70%);
}
.poster[data-tier="okay"]::before {
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 179, 71, 0.16) 0%, transparent 70%);
}
.poster[data-tier="weak"]::before {
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 77, 109, 0.16) 0%, transparent 70%);
}
.poster > * { position: relative; z-index: 1; }

/* HERO */
.poster-hero {
  text-align: center;
  margin-bottom: 1.4rem;
}

/* ── Verdict-first hero (north-star) ───────────────────────────────────────
   The decision tag is the biggest element on the page. The score and the
   reach range are demoted to small support metadata below the input. Reads
   as: VERDICT → why → your title → score/reach as evidence.
   Mobile-first sizes; desktop scales up via clamp().
*/
.poster-verdict {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.1rem;
  margin: 0 auto 0.85rem;
  padding: 0.55rem 1.1rem 0.7rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.poster-verdict-decision {
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  font-feature-settings: 'tnum';
}
.poster-verdict-confidence {
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
  max-width: 22ch;
  text-align: left;
}
.poster-verdict-hit  .poster-verdict-decision    { color: #2EE99B; }
.poster-verdict-hit                              { border-color: rgba(46, 233, 155, 0.35); background: rgba(46, 233, 155, 0.06); }
.poster-verdict-maybe .poster-verdict-decision   { color: #FFB347; }
.poster-verdict-maybe                            { border-color: rgba(255, 179, 71, 0.35); background: rgba(255, 179, 71, 0.06); }
.poster-verdict-flop  .poster-verdict-decision   { color: #FF4D6D; }
.poster-verdict-flop                             { border-color: rgba(255, 77, 109, 0.35); background: rgba(255, 77, 109, 0.06); }

/* WS3 — band-context line sits directly under the verdict tag for
   Below Average (30-55) and Average (55-70) scores. Italic + muted so
   it reads as evidence, not as a competing headline. The verdict tag
   above still owns the visual hierarchy. */
.poster-verdict-band-context {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0.5rem auto 0;
  max-width: 30rem;
  text-align: center;
}
.poster-verdict-band-context em {
  font-style: italic;
  font-weight: 500;
}

/* Cohort confidence badge — Tier 1 Week 3.
   Surfaces when the (niche × channel-size-bucket) cohort has lower model
   confidence than the global verdict hit_rate suggests. v9 cohort
   calibration showed Spearman spans 0.52-0.88 across cohorts; the global
   hit_rate doesn't apply equally to a nano-beauty creator vs a mid-tier
   education creator. Subtle by design: informs without overwhelming the
   verdict. Hidden entirely for high-confidence cohorts — silence is the
   signal there. */
.poster-cohort-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0.5rem auto 0;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.3;
  max-width: 30rem;
  text-align: center;
}
.poster-cohort-badge-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
}
.poster-cohort-badge-text {
  font-weight: 500;
}
.poster-cohort-low {
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Verdict info trigger — small "?" affordance that expands the empirical
   explainer below. Subtle by default; brightens on hover. */
.poster-verdict-info {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: 0.3rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.poster-verdict-info:hover {
  color: var(--text);
  border-color: var(--muted);
}
.poster-verdict-info[aria-expanded="true"] {
  color: var(--text);
  background: var(--surface, rgba(0, 0, 0, 0.05));
  border-color: var(--muted);
}

/* Explainer panel — sits directly below the verdict tag, full-width
   centered. Reads like a footnote, looks like part of the verdict block. */
.poster-verdict-explainer {
  max-width: 540px;
  margin: 0.4rem auto 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface, rgba(0, 0, 0, 0.025));
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.5;
}
.poster-verdict-explainer-head {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.poster-verdict-explainer-body {
  color: var(--text);
}
.poster-verdict-explainer-body strong { font-weight: 700; }
.poster-verdict-explainer-body em     { font-style: italic; color: var(--text); }
.poster-verdict-explainer-foot {
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}
/* Source line — shown in the verdict explainer when bands came from
   per-cohort calibration (Tier 1 Week 4). Shows both cohort + global
   numbers when they diverge meaningfully so cohort-specific feels
   transparent, not arbitrary. */
.poster-verdict-explainer-source {
  margin-top: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: rgba(37, 99, 235, 0.05);
  border-left: 3px solid rgba(37, 99, 235, 0.3);
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
}
.poster-verdict-explainer-source strong {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
  font-weight: 700;
}

.poster-verdict-reasons {
  max-width: min(480px, 100%);
  margin: 0 auto 1.1rem;
  text-align: center;
}
.poster-verdict-reason {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
}
.poster-verdict-reason + .poster-verdict-reason {
  margin-top: 0.35rem;
}
.poster-verdict-reason-icon {
  font-weight: 800;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.poster-verdict-reason-positive .poster-verdict-reason-icon { color: #2EE99B; }
.poster-verdict-reason-negative .poster-verdict-reason-icon { color: #FF4D6D; }
.poster-verdict-reason-neutral  .poster-verdict-reason-icon { color: var(--muted); }

/* Compact support row — score + reach + percentile demoted below the verdict.
   Score is small (no longer the visual anchor). Layout stacks on phone,
   inline on desktop. */
.poster-support-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.poster-score-mini {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.poster-score-mini-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 700;
}
.poster-score-mini-val {
  font-size: 1.2rem;
  font-weight: 800;
  font-feature-settings: 'tnum';
  color: var(--text);
}
.poster-score-mini .poster-vary-delta {
  font-size: 0.78rem;
  padding: 0.15rem 0.45rem;
}
.poster-support-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: center;
}
.poster-support-line {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

@media (min-width: 600px) {
  .poster-support-row {
    flex-direction: row;
    justify-content: center;
    gap: 1.2rem;
  }
  .poster-support-meta { text-align: left; }
}

/* Option A — channel-neutral diagnostic. One sentence between the score
   support row and the progress bar on the predict result card, OR between
   the live-verdict head and reasons on the workspace preview. Color tint
   (amber for headwind, green for tailwind) is intentionally muted — the
   main verdict still owns the page's color signal. */
.poster-option-a,
.ideas-live-option-a {
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0.6rem auto;
  max-width: 28rem;
  text-align: center;
  color: var(--ink);
}
.poster-option-a strong,
.ideas-live-option-a strong { font-weight: 600; }

.option-a--headwind {
  color: #8a5a00;          /* muted amber ink */
  background: rgba(255, 184, 0, 0.08);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.option-a--tailwind {
  color: #1f6f2c;          /* muted green ink */
  background: rgba(28, 161, 64, 0.08);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}

/* The workspace live-preview is tighter — drop the padding so it sits
   compactly between head and reasons. */
.ideas-live-option-a {
  margin: 0.4rem 0;
  text-align: left;
  font-size: 0.8rem;
}

.poster-eyebrow {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 700;
  margin-bottom: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.poster-eyebrow::after {
  content: '✏️ tap to edit';
  font-size: 0.65rem;
  text-transform: none;
  letter-spacing: 0.3px;
  font-weight: 500;
  color: var(--muted);
  opacity: 0.7;
  font-style: italic;
}

/* Editable title — visibly an input, but styled big and clean */
.poster-title-edit {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 1rem;
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.95rem;
  font-family: inherit;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
}
.poster-title-edit::placeholder { color: var(--muted); opacity: 0.5; }
.poster-title-edit:hover {
  border-color: var(--muted);
}
.poster-title-edit:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.15);
}

.poster-headline {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}
.poster[data-tier="strong"] .poster-headline { color: #2EE99B; }
.poster[data-tier="okay"]   .poster-headline { color: #FFB347; }
.poster[data-tier="weak"]   .poster-headline { color: #FF4D6D; }

.poster-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: 0.5rem;
}
.poster-score-block {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.poster-score {
  font-size: clamp(4rem, 9vw, 6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -3px;
  font-feature-settings: 'tnum';
  background: linear-gradient(135deg, var(--text) 0%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background 0.4s ease;
}
.poster-score-row .poster-vary-delta {
  font-size: 1.05rem;
  padding: 0.3rem 0.7rem;
}
.poster-subtext {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.poster-subtext-line {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Hero progress bar lives below the score row */
.poster-hero .poster-vary-bar {
  max-width: 28rem;
  margin: 0.4rem auto 0;
}

/* View-range block — second-biggest element after the verdict tag.
   The view prediction is the quantitative answer creators came for
   ("HIT, but how big?") so it gets headline-tier sizing. Was buried in
   support-meta small text before 2026-05-13. */
.poster-view-range {
  text-align: center;
  margin: 1rem 0 0.6rem;
}
.poster-view-range-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted, var(--ink-muted));
  margin-bottom: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.poster-view-range-flag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(255, 179, 71, 0.12);
  color: #b07020;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 179, 71, 0.3);
}
.poster-view-range-num {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.8rem, 5.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1.05;
  color: var(--text);
  font-feature-settings: 'tnum';
}
.poster-view-range-dash {
  display: inline-block;
  margin: 0 0.35rem;
  opacity: 0.5;
  font-weight: 700;
}
/* Cohort context line under the big number — reframes the range as
   "typical for cohort" + "breakout potential" so users see both the
   honest typical floor and the upper-tail ceiling. Without this line,
   the big "7K-12K" looked like a point prediction; outlier videos
   that broke past it (e.g. MusclePong 17K in 8d) read as model
   failure rather than as expected long-tail behavior. */
.poster-view-range-tiers {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted, #6b7280);
}
.poster-view-range-tier-label { font-style: italic; }
.poster-view-range-tier-sep   { opacity: 0.4; font-weight: 700; }
.poster-view-range-tier-breakout {
  font-weight: 600;
  color: var(--text, #111);
}
.poster-view-range-tier-breakout::before {
  content: '⤴';
  display: inline-block;
  margin-right: 0.2rem;
  opacity: 0.6;
}

/* Re-analyze affordance — appears when the live editor's title differs
   from the original. Was a heavy banner; now a single inline button.
   The verdict/score/reasoning already live-update via score-quick, so
   the banner copy was misleading clutter (removed 2026-05-13). */
.poster-state {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  text-align: center;
  animation: stateAppear 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Inline Studio CTA — appears in the result panel for non-Studio users.
   Mobile-first: stacks vertically by default; rows side-by-side on tablet+. */
.studio-cta-inline {
  margin: 1.1rem 0 0.4rem;
  padding: 0.95rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  animation: stateAppear 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.studio-cta-inline-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.studio-cta-inline-headline {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.studio-cta-inline-msg {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}
.studio-cta-inline-msg em {
  color: var(--text);
  font-style: italic;
  font-weight: 600;
}
.studio-cta-inline-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.2;
  gap: 0.15rem;
}
.studio-cta-inline-bonus {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.85;
}
@media (min-width: 600px) {
  .studio-cta-inline {
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
  }
  .studio-cta-inline-body { flex: 1; }
  .studio-cta-inline-headline { font-size: 1rem; }
  .studio-cta-inline-msg { font-size: 0.84rem; }
}
@keyframes stateAppear {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.poster-state-msg {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.45;
}
.poster-state-msg strong { color: var(--amber); font-weight: 800; }
.poster-state-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.poster-state-revert {
  flex: 0 0 auto;
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.poster-state-revert:hover { border-color: var(--text); color: var(--text); }
.poster-state-reanalyze {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.poster-state-reanalyze:hover {
  border-color: var(--red);
  color: var(--red);
}
.poster-state-reanalyze:hover { filter: brightness(1.08); }
.poster-state-reanalyze:disabled { opacity: 0.6; cursor: wait; }
.poster-state-cost {
  font-weight: 600;
  opacity: 0.85;
  font-size: 0.78rem;
}

/* CHIPS */
.poster-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.7rem;
}
.poster-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.poster-chip:hover { transform: translateY(-1px); }
.poster-chip-icon { font-size: 0.9rem; line-height: 1; }
.poster-chip-hurting .poster-chip-icon { color: var(--danger); }
.poster-chip-helping .poster-chip-icon { color: var(--green); }
.poster-chip-hurting:hover { border-color: rgba(255, 68, 68, 0.4); }
.poster-chip-helping:hover { border-color: rgba(0, 200, 81, 0.4); }
.poster-chip.is-active.poster-chip-hurting {
  background: rgba(255, 68, 68, 0.12);
  border-color: rgba(255, 68, 68, 0.5);
}
.poster-chip.is-active.poster-chip-helping {
  background: rgba(0, 200, 81, 0.12);
  border-color: rgba(0, 200, 81, 0.5);
}

.poster-chip-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease, margin 0.22s ease;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0;
}
.poster-chip-detail.is-open {
  max-height: 220px;
  opacity: 1;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.2rem;
}
.poster-chip-detail-headline {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 0.35rem;
}
.poster-chip-detail-action {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Delta pill (used in hero score row) */
.poster-vary-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  animation: deltaPop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.4) both;
}
.poster-vary-delta.vary-delta-up   { color: var(--green);  border-color: rgba(0, 200, 81, 0.4); }
.poster-vary-delta.vary-delta-down { color: var(--danger); border-color: rgba(255, 68, 68, 0.4); }

/* Score progress bar (used in hero). Brand-red fill on a visible
   paper-3 track — reads as a meter, not a divider. Height bumped from
   4px → 10px so low scores (e.g. 14%) still show a meaningful sliver
   of fill instead of vanishing. */
.poster-vary-bar {
  width: 100%;
  height: 10px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.poster-vary-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Suggestions block — Claude's title alternatives */
.poster-suggestions {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.poster-suggestions-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--muted);
  margin-bottom: 0.55rem;
}
.poster-vary-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.95rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
  line-height: 1.4;
}
.poster-vary-suggestion:hover {
  border-color: var(--red);
  transform: translateY(-1px);
  background: rgba(255, 0, 0, 0.04);
}
.poster-vary-suggestion.vary-suggestion-applied {
  border-color: var(--green) !important;
  background: rgba(0, 200, 81, 0.10);
  animation: varyApplied 0.55s ease;
}

/* ML-validated suggestion layout: title text on the left, score chip + delta
   on the right. Each surviving suggestion has cleared the score-quick gate
   so the chip is always positive. */
.poster-vary-suggestion-validated {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.poster-vary-suggestion-text {
  flex: 1 1 auto;
  min-width: 0;
}
.poster-vary-suggestion-score {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-feature-settings: "tnum";
}
.poster-vary-suggestion-score .psv-num {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink, var(--text));
}
.poster-vary-suggestion-score.psv-positive .psv-delta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green, #22C58B);
  background: rgba(34, 197, 139, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}
/* "Your title held up" reassurance shown when none of Claude's suggestions
   beat the original — better than rendering inferior alternatives. */
.poster-suggestions-empty {
  font-family: var(--font-ui, inherit);
  font-size: 0.85rem;
  color: var(--ink-muted, var(--muted));
  font-style: italic;
  padding: 0.5rem 0;
}

/* Always-visible Full Analysis below suggestions */
.poster-analysis {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

/* ACTIONS */
.poster-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  align-items: center;
}
.poster-action-btn {
  padding: 0.7rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 700;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.poster-action-btn:hover { border-color: var(--red); transform: translateY(-1px); }
.poster-action-btn.primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.poster-action-btn.primary:hover { filter: brightness(1.08); }

/* (Full Analysis is now always visible inside .poster-analysis — no dropdown.) */

/* ── Structured Full Analysis ──────────────────────────────────────────── */
.fa-root {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fa-section {
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(8px);
  animation: faFadeIn 0.5s ease forwards;
}
.fa-section:nth-child(1) { animation-delay: 0.05s; }
.fa-section:nth-child(2) { animation-delay: 0.15s; }
.fa-section:nth-child(3) { animation-delay: 0.25s; }
.fa-section:nth-child(4) { animation-delay: 0.35s; }
.fa-section:first-child {
  padding-top: 0;
  border-top: none;
}
.fa-section:last-child { padding-bottom: 0; }

@keyframes faFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section head: numbered + uppercase title (no icons, all type) */
.fa-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.fa-section-num {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.5px;
  opacity: 0.7;
}
.fa-section-title {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--text);
}

/* Sub-scores tiles */
.fa-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.fa-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.95rem 0.9rem;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.fa-tile:hover { transform: translateY(-2px); border-color: var(--muted); }
.fa-tile-value {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.5px;
  font-feature-settings: 'tnum';
  margin-bottom: 0.3rem;
}
.fa-tile-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
/* Plain-language meaning under each sub-score number, e.g. "solid demand
   fit for the niche". Keeps creators from staring at a number with no idea
   if 65 is good or bad. */
.fa-tile-meaning {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 0.55rem;
  line-height: 1.3;
  min-height: 1.9em;
}
.fa-tile-bar {
  height: 8px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.fa-tile-bar-fill {
  height: 100%;
  background: var(--accent);   /* brand red — JS no longer sets color inline */
  border-radius: 999px;
  width: 0;
  animation: faTileFill 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards;
}
@keyframes faTileFill {
  from { width: 0; }
  /* the inline style sets the target width — animation interpolates from 0 */
}

/* Helping / Hurting / Neutral groups */
.fa-group {
  margin-bottom: 0.85rem;
}
.fa-group:last-child { margin-bottom: 0; }
.fa-group-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.fa-group-good { color: var(--green); }
.fa-group-bad  { color: var(--danger); }

.fa-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0;
}
.fa-insight-row + .fa-insight-row { border-top: 1px dashed var(--border); }
.fa-insight-icon {
  font-size: 0.95rem;
  line-height: 1.4;
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}
.fa-insight-helping .fa-insight-icon { color: var(--green); }
.fa-insight-hurting .fa-insight-icon { color: var(--danger); }
.fa-insight-body { flex: 1; min-width: 0; }
.fa-insight-headline {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.fa-insight-action {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

.fa-neutral-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}
.fa-neutral-icon { color: var(--muted); opacity: 0.7; }

/* fix the tile-bar-fill animation: scaleX 0→1 honours the inline width */
.fa-tile-bar-fill {
  transform-origin: left;
  animation: faTileFill 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}
@keyframes faTileFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Niche context — big stat blocks */
.fa-niche-card {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.fa-niche-card > div {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
}
.fa-niche-range-num,
.fa-niche-median-num,
.fa-niche-count-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--text);
  font-feature-settings: 'tnum';
  margin-bottom: 0.3rem;
}
.fa-niche-range-num { font-size: 1.55rem; }
.fa-niche-range-label,
.fa-niche-median-label,
.fa-niche-count-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--muted);
  font-weight: 700;
}

.fa-top-titles-block { margin-top: 0.5rem; }
.fa-subhead {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.fa-top-titles {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fa-top-titles li {
  font-size: 0.88rem;
  color: var(--text);
  padding: 0.55rem 0;
  line-height: 1.45;
  font-weight: 500;
  border-top: 1px dashed var(--border);
}
.fa-top-titles li:first-child { border-top: none; padding-top: 0; }

/* Your channel — pills */
.fa-channel-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* Personal baseline — appears for Studio-connected creators with ≥5 videos.
   Compact 4-column distribution grid, monospace numerals for scanability. */
.fa-section-sub {
  margin-left: 0.6rem;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.fa-baseline-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.fa-baseline-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.7rem;
  letter-spacing: -0.005em;
}
.fa-baseline-grid {
  /* Mobile-first: 2 columns by default; 4 columns kicks in on tablet+. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}
@media (min-width: 600px) {
  .fa-baseline-grid { grid-template-columns: repeat(4, 1fr); }
}
.fa-baseline-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fa-baseline-cell-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--muted);
  font-weight: 700;
}
.fa-baseline-cell-val {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fa-baseline-unit {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  margin-left: 0.1em;
}
.fa-baseline-meta {
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.fa-baseline-meta-item strong {
  font-family: var(--font-mono, "Geist Mono", monospace);
  color: var(--text);
  font-weight: 600;
}

/* Title-pattern overlay — grid showing user's title features against
   top-quartile niche distribution. Pure data display, no advice prose.
   See _faTitlePatterns in app.js. */
.fa-pattern-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* Rendered when the filter finds zero divergences — user's title already
   matches winner patterns on every checked dimension. Neutral framing
   (not a green congratulations), matches the rest of the verdict UI. */
.fa-pattern-empty {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-muted, #888);
}
.fa-pattern-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1.8fr 1.5fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.4rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.fa-pattern-label {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text);
}
.fa-pattern-user {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}
.fa-pattern-cohort {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted, #888);
}
.fa-pattern-arrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand, #FF0033);
  text-align: right;
}
@media (max-width: 600px) {
  .fa-pattern-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "label user" "cohort arrow";
    row-gap: 0.2rem;
  }
  .fa-pattern-label  { grid-area: label; }
  .fa-pattern-user   { grid-area: user; text-align: right; }
  .fa-pattern-cohort { grid-area: cohort; }
  .fa-pattern-arrow  { grid-area: arrow; }
}

/* Title-variant generator — button + result list. Each variant row shows
   the delta vs baseline (red prefix), the variant title, and its absolute
   score. See _faTitleVariants in app.js. */
.fa-variants-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.fa-variants-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fa-variant-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.fa-variant-delta {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--brand, #FF0033);
  min-width: 38px;
  font-size: 12px;
}
.fa-variant-title {
  font-family: var(--font-ui);
  color: var(--text);
}
.fa-variant-score {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted, #888);
  white-space: nowrap;
}

/* Similar past videos — vertical card list for Studio creators. Each card
   is a click-through to the YouTube video. Thumb on left, title + meta on
   right. Similarity tag floats on the thumb. */
.fa-similar-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.fa-similar-card {
  display: flex;
  gap: 0.85rem;
  padding: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fa-similar-card:hover {
  border-color: var(--brand);
  transform: translateY(-1px);
}
.fa-similar-thumb {
  /* Mobile-first: 110px thumb fits phone viewports without crowding the title;
     widens to 132px on tablet+. */
  position: relative;
  flex-shrink: 0;
  width: 110px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.fa-similar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fa-similar-tag {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  line-height: 1;
}
.fa-similar-tag-very-similar { background: var(--brand); }
.fa-similar-tag-similar      { background: rgba(0, 0, 0, 0.78); }
.fa-similar-tag-loosely-similar { background: rgba(0, 0, 0, 0.55); }
.fa-similar-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;  /* allow flex truncation */
}
.fa-similar-title {
  /* Mobile-first font size; bumps up at tablet+. */
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.005em;
}
.fa-similar-meta {
  /* Mobile-first: tighter gap + smaller text. Widens at tablet+. */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.fa-similar-meta strong {
  font-family: var(--font-mono, "Geist Mono", monospace);
  color: var(--text);
  font-weight: 600;
}
.fa-similar-age {
  color: var(--muted);
  font-style: italic;
}
@media (min-width: 600px) {
  .fa-similar-thumb { width: 132px; }
  .fa-similar-title { font-size: 0.95rem; }
  .fa-similar-meta { font-size: 0.78rem; gap: 0.7rem; }
}

/* "What if" hypothetical channel panel — Section 06 of Full Analysis.
   Mobile-first: rows stack as a table-ish list, each row is a tap-friendly
   ≥48px height. Anchor row (user's actual channel) accented in brand red. */
.fa-whatif {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.7rem 0.7rem;
}
.fa-whatif-rows {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.fa-whatif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.55rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fa-whatif-row.is-anchor {
  background: var(--bg);
  border-color: var(--brand);
  border-left-width: 3px;
  padding-left: calc(0.7rem - 2px);
}
.fa-whatif-subs {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.fa-whatif-subs-val {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.fa-whatif-subs-tier {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.fa-whatif-score {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  min-width: 2.4em;
  text-align: right;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.fa-whatif-score.is-anchor {
  color: var(--brand);
}
.fa-whatif-spinner {
  display: inline-block;
  color: var(--muted);
  animation: whatifPulse 1s ease-in-out infinite;
}
@keyframes whatifPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1.0; }
}
.fa-whatif-hint {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.45;
}
@media (min-width: 600px) {
  /* Tablet+: slightly more breathing room and larger anchor score. */
  .fa-whatif-row { padding: 0.7rem 0.9rem; min-height: 52px; }
  .fa-whatif-row.is-anchor { padding-left: calc(0.9rem - 2px); }
  .fa-whatif-subs-val { font-size: 1rem; }
  .fa-whatif-score { font-size: 1.2rem; }
}
.fa-channel-pill {
  flex: 1 1 0;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
}
.fa-channel-pill-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--muted);
  font-weight: 700;
}
.fa-channel-pill-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.fa-channel-note {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  font-style: italic;
}
.fa-channel-empty {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  background: var(--surface);
  border: 1px dashed var(--border);
  padding: 1rem 1.1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.fa-channel-empty-msg { margin: 0; }
.fa-channel-connect-btn {
  /* Sits inline with the empty-state copy. Uses the existing .btn-primary
     palette — no new color tokens, just promotes the action from inline
     prose to a clickable affordance creators won't miss. */
  align-self: flex-start;
  text-decoration: none;
}
.fa-channel-empty-fine {
  font-size: 0.78rem;
  color: var(--ink-muted, var(--muted));
  margin: 0;
  font-style: italic;
}

/* Persistent "Studio connected" pill in the user header. Visible across all
   pages once the user has linked YouTube Studio — replaces the "Connect
   Studio" CTA that only shows when not connected. Single source of truth
   for connection state, survives page refresh. */
.studio-connected-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 197, 139, 0.10);
  border: 1px solid rgba(34, 197, 139, 0.30);
  color: var(--green, #22C58B);
  font-family: var(--font-ui, inherit);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-connected-pill .scp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green, #22C58B);
  flex: 0 0 6px;
  box-shadow: 0 0 0 3px rgba(34, 197, 139, 0.18);
}

/* The Take — punchy callout, typography-driven */
.fa-take {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 3px solid var(--red);
  padding: 0.5rem 0 0.5rem 1.1rem;
}
.fa-take-line {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text);
  padding: 0.65rem 0;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-8px);
  animation: faTakeIn 0.45s ease forwards;
  animation-delay: calc(0.4s + var(--i) * 0.12s);
}
.fa-take-line + .fa-take-line { border-top: 1px dashed var(--border); }
@keyframes faTakeIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 540px) {
  .fa-tiles { grid-template-columns: 1fr 1fr 1fr; gap: 0.45rem; }
  .fa-tile { padding: 0.7rem 0.55rem; }
  .fa-tile-value { font-size: 1.8rem; }
  .fa-niche-card { grid-template-columns: 1fr 1fr; }
  .fa-niche-card > div:first-child { grid-column: 1 / -1; }
  .fa-channel-pill { flex-basis: 100%; }
}

@media (max-width: 540px) {
  .poster { padding: 1.2rem 1rem 1rem; }
  .poster-score-row { flex-direction: column; gap: 0.6rem; }
  .poster-subtext { text-align: center; }
  .poster-vary-row { grid-template-columns: 1fr; }
  .poster-vary-result { justify-content: flex-start; }
  .poster-vary-suggestion { flex: 1 1 100%; }
  .poster-details { margin-left: 0; flex: 1 1 100%; }
}

/* Full breakdown CTA — proper card, not a tiny dropdown */
.breakdown-section {
  padding: 0;
  overflow: hidden;
}
.breakdown-summary {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color 0.15s ease;
}
.breakdown-summary::-webkit-details-marker { display: none; }
.breakdown-summary:hover { background: var(--bg); }

.breakdown-summary-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.breakdown-summary-text { flex: 1; min-width: 0; }
.breakdown-summary-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.1px;
}
.breakdown-summary-sub {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 0.15rem;
}
.breakdown-summary-chev {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}
.breakdown-section[open] .breakdown-summary-chev { transform: rotate(180deg); }
.breakdown-section[open] .breakdown-summary {
  border-bottom: 1px solid var(--border);
}

/* ── Form ── */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: color 0.15s ease;
}
.field:focus-within > label { color: var(--text); }

.field input, .field textarea, .field select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  padding: 0.78rem 0.95rem;
  font-size: 0.94rem;
  font-family: inherit;
  resize: vertical;
  caret-color: var(--red);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.15s ease;
}
.field input:hover:not(:focus),
.field textarea:hover:not(:focus),
.field select:hover:not(:focus) {
  border-color: var(--muted);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.14);
  background-color: var(--bg);
}
.field input::placeholder, .field textarea::placeholder {
  color: var(--muted);
  opacity: 0.55;
  font-style: italic;
}

/* Custom chevron for selects — themed and recolors on focus */
.field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239898A6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  padding-right: 2.4rem;
  background-color: var(--surface);
}
.field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23FF0000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field textarea { min-height: 88px; line-height: 1.5; }

.toggles {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}

.toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
  cursor: pointer;
}

/* ── Segmented control (Short / Long-form toggle) ── */
.seg-control {
  display: inline-flex;
  background: var(--paper, #fff);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  padding: 2px;
  gap: 2px;
}

.seg-option {
  position: relative;
  flex: 1;
  cursor: pointer;
}

.seg-option input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.seg-option > span {
  display: block;
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--ink-muted);
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
}

.seg-option input[type="radio"]:checked + span {
  background: var(--accent, #FF0033);
  color: #fff;
  font-weight: 600;
}

/* ── Step indicator ── */
.step-indicator {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.75rem;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.step-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-top: 9px;
  transition: background 0.3s;
}

.step-connector.done { background: var(--green); }

.step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--muted);
  transition: all 0.2s;
}

.step-item.active .step-dot {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.step-item.completed .step-dot {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.step-item-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--border);
  font-weight: 700;
  white-space: nowrap;
}

.step-item.active .step-item-label    { color: var(--text); }
.step-item.completed .step-item-label { color: var(--muted); }

/* ── Form steps ── */
.form-step { display: none; }

.form-step.active {
  display: block;
  animation: stepIn 0.22s ease;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Step navigation buttons ── */
.step-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.step-next-btn { flex: 1; justify-content: center; }

.step-nav-back-only { margin-top: 0.5rem; }

.field-label-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: #555;
}

/* ── Results ── */
.results-section h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 1.25rem;
}

.empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
}

.empty-tagline {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.empty-hint {
  font-size: 0.8rem;
  color: #555;
  margin-top: 1rem;
}

/* ── Demo ghost preview ── */
.demo-preview {
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
}

.demo-lines {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 1rem;
}

.demo-line {
  height: 9px;
  background: var(--border);
  border-radius: 4px;
}

/* ── Advanced / Customize section ── */
.advanced-section {
  margin-bottom: 1.25rem;
}

.advanced-section > summary {
  list-style: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  padding: 0.35rem 0;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.advanced-section > summary::-webkit-details-marker { display: none; }

/* The chevron used to be rendered as a CSS ::after pseudo-element with
   "▾". We now use an inline SVG (.advanced-chevron) in the HTML for cleaner
   control and animation — the old pseudo-element rule was left behind and
   produced a *second* chevron rendered on top of the SVG. Removed. */

.advanced-section[open] > summary {
  color: var(--text);
  margin-bottom: 0.75rem;
}

/* ── Pre-analysis panel ── */
.pre-panel {
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}

.pre-panel-header {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.pre-panel-desc { font-size: 0.83rem; color: #aaa; margin-bottom: 0.85rem; }

.pre-cards {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pre-card {
  background: #1a1a2e;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  flex: 1;
  min-width: 110px;
}

.pre-card-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
}

.pre-card-value { font-size: 0.88rem; font-weight: 600; }
.pre-card-sub { font-size: 0.75rem; color: #555; }

/* ── Score boxes ── */
.scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* ── 600px — large phone ── */
@media (max-width: 600px) {
  .scores { grid-template-columns: repeat(2, 1fr); }

  .logo img { height: 52px; }
  header { padding: 0.6rem 0.75rem; gap: 0.5rem; }
  .header-right { gap: 0.4rem; }

  /* Hide user name, shrink avatar — keep avatar for identity */
  .user-name { display: none; }
  .user-avatar { width: 28px; height: 28px; }

  /* Shrink header buttons */
  .btn-sm { font-size: 0.72rem; padding: 0.28rem 0.55rem; }
  .quota-badge { font-size: 0.72rem; padding: 0.25rem 0.5rem; }

  /* iOS Safari: inputs < 16px trigger auto-zoom — prevent it */
  .field input,
  .field textarea,
  .field select { font-size: 16px; }

  /* Toggles can wrap */
  .toggles { flex-wrap: wrap; gap: 0.6rem; }

  /* Pre-cards stack vertically */
  .pre-cards { flex-direction: column; }
  .pre-card { min-width: unset; }

  /* Prevent long AI output words from breaking layout */
  .result-card { word-break: break-word; overflow-wrap: break-word; }
}

/* ── Leaderboard Widget ── */
.lb-widget {
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lb-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.85rem 1.1rem 0.7rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.lb-title { font-weight: 700; font-size: 0.95rem; }
.lb-sub { font-size: 0.72rem; color: var(--muted); }
.lb-list { background: var(--surface); }
.lb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: rgba(255,255,255,0.03); }
.lb-left { display: flex; align-items: center; gap: 0.55rem; min-width: 0; flex: 1; }
.lb-medal { font-size: 1rem; flex-shrink: 0; }
.lb-rank {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}
.lb-idea {
  font-size: 0.82rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.lb-niche {
  font-size: 0.68rem;
  color: var(--muted);
  background: var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.lb-score {
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
  min-width: 2rem;
  text-align: right;
}

/* ── Share Modal ── */
.share-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  padding: 1rem;
}
.share-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.share-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  max-width: 400px;
  width: 100%;
  position: relative;
}
.share-modal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  line-height: 1;
  transition: background 0.15s;
}
.share-modal-close:hover { background: var(--border); }
.share-modal-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
}
.share-canvas-preview {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  display: block;
  margin-bottom: 1rem;
}
.share-modal-actions {
  display: flex;
  gap: 0.6rem;
}
.share-modal-actions .btn { flex: 1; font-size: 0.85rem; padding: 0.55rem 0.5rem; }

.share-btn-new {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  border: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.share-btn-new:hover { background: linear-gradient(135deg, #6d28d9, #9333ea); }

/* ── 400px — small phone (SE, Galaxy A) ── */
@media (max-width: 400px) {
  .logo img { height: 44px; }
  header { padding: 0.5rem 0.6rem; }

  .score-number { font-size: 2rem; }
  .score-box { padding: 0.85rem 0.5rem; }

  .btn-full { font-size: 0.92rem; }

  .history-item .h-date { display: none; }
}

.score-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 0.75rem;
  text-align: center;
}

.score-box-hero {
  background: linear-gradient(145deg, var(--surface), #16161F);
  border-color: rgba(255,255,255,0.08);
}
.score-box-hero .score-number { font-size: 3rem; }

.score-number {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
}

.score-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 0.3rem;
}

.score-context {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 0.2rem;
  letter-spacing: 0.5px;
}

.performance-badge {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.perf-context {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}

.progress-bar {
  height: 8px;
  background: var(--paper-3);
  border-radius: 999px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);   /* brand red, no gradient */
  transition: width 0.6s ease;
}

/* ── Result card ── */
.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.7;
}

.result-card p { margin-bottom: 0.6rem; }
.result-card strong { color: var(--text); }
.result-card ul, .result-card ol { padding-left: 1.4rem; margin-bottom: 0.6rem; }
.result-card li { margin-bottom: 0.3rem; }
.result-card h2, .result-card h3 { margin: 0.75rem 0 0.4rem; font-size: 1rem; }
.result-card hr { border: none; border-top: 1px solid var(--border); margin: 0.75rem 0; }

/* ── Result card section enhancement (applied by enhanceResultCard()) ── */
.rcs-header { margin-top: 1.25rem !important; padding-left: 0.85rem !important; border-left: 3px solid; }
.rcs-problems-header { color: var(--danger) !important; border-left-color: var(--danger); }
.rcs-fixes-header    { color: var(--green)  !important; border-left-color: var(--green); }
.rcs-titles-header   { color: #60A5FA      !important; border-left-color: #60A5FA; }
.rcs-meta            { color: var(--muted) !important; font-size: 0.82rem !important; margin-bottom: 0.25rem !important; }

.rcs-problems-list {
  background: rgba(255, 68, 68, 0.05);
  border-radius: 6px;
  padding: 0.45rem 0.45rem 0.45rem 1.75rem;
  border-left: 2px solid rgba(255, 68, 68, 0.25);
}
.rcs-fixes-list {
  background: rgba(0, 200, 81, 0.05);
  border-radius: 6px;
  padding: 0.45rem 0.45rem 0.45rem 1.75rem;
  border-left: 2px solid rgba(0, 200, 81, 0.25);
}

/* ── Alerts ── */
.alert {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.alert a { font-weight: 700; }
.alert-warning { background: #1a0a00; border: 1px solid #cc4400; color: #FF9966; }
.alert-warning a { color: #FF6622; }
.alert-info { background: #0a0f1a; border: 1px solid #1a3a5c; color: #6699CC; }
.alert-success { background: #0d2b1a; border: 1px solid #1a5c35; color: #4ade80; }
.alert-error { background: #1a0505; border: 1px solid #5c1a1a; color: #FF8888; }

/* ── Studio banner ── */
.studio-banner {
  background: #1a0a00;
  border: 1px solid #cc4400;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}
.studio-banner strong { color: #FF6622; display: block; margin-bottom: 0.2rem; }
.studio-banner span { color: #aaa; }
.studio-banner a { color: #FF6622; font-weight: 600; text-decoration: none; }

/* ── WS Retention — workspace nudge banner ────────────────────────────────
   Subtle brand-red accent, sits above the predict form on /app when the
   user has a stale draft idea. Non-blocking — predict form below still
   renders fully. Two actions inline: continue (primary) and dismiss
   (ghost). Mobile-stacked. */
.idea-nudge {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  background: var(--accent-bg, #FFE9ED);
  border: 1px solid rgba(255, 0, 51, 0.25);
  border-radius: 10px;
  font-family: var(--font-ui);
}
.idea-nudge-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.idea-nudge-body {
  flex: 1;
  min-width: 0;
}
.idea-nudge-text {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
  margin-bottom: 0.6rem;
}
.idea-nudge-text strong {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 700;
}
.idea-nudge-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Upgrade wall ── */
.upgrade-wall {
  background: var(--surface);
  border: 1px solid #3a1212;
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  text-align: center;
}

.uw-icon { font-size: 2.5rem; margin-bottom: 1rem; }

.upgrade-wall h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.uw-sub {
  color: var(--ink-muted, var(--muted));
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 44ch;
  margin: 0 auto 1.5rem;
}

.uw-meter {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.uw-meter-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.uw-meter-count { color: var(--danger); font-weight: 700; }

.uw-features {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.5rem;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
}

.uw-features li {
  font-size: 0.92rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  line-height: 1.4;
}

.uw-check {
  color: var(--green);
  font-weight: 800;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
}

.uw-plans {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.uw-plan-btn {
  flex: 1;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Save chip sits on top of a red primary button — needs high contrast,
   not the dim green it had. White-on-darker-red reads cleanly without
   competing with the button copy. */
.uw-save {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
  white-space: nowrap;
}
.btn-outline .uw-save {
  background: rgba(46, 233, 155, 0.12);
  color: #1a7d4d;
  border-color: rgba(46, 233, 155, 0.4);
}

.uw-fine { font-size: 0.76rem; color: #555; }

.uw-tier-cards {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.uw-tier-card {
  flex: 1 1 0;
  min-width: 0;          /* let cards shrink without overflowing children */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 0.95rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Plan buttons stack vertically INSIDE a tier card — both cards × both
   plans on one row was clipping the Annual button (with the SAVE chip)
   off the right edge of the wall. Single-card walls (the Creator-only
   Title Compare upgrade) override this back to horizontal below. */
.uw-tier-card .uw-plans {
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0;
}
.uw-tier-card .uw-plan-btn {
  width: 100%;
  padding: 0.6rem 0.6rem;
  font-size: 0.84rem;
}

/* Creator card — subtle highlight to mark it as the upgraded tier on the
   dual-card wall, on-brand (no off-theme purple). */
.uw-tier-card-creator {
  border-color: rgba(255, 0, 51, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 0, 51, 0.04), transparent 70%),
    var(--bg);
}

.uw-tier-badge-small {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--red, #FF0033);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 0.2rem;
}

.uw-tier-name {
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
}

.uw-tier-price {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.uw-tier-price span { font-size: 0.8rem; font-weight: 400; color: var(--muted); }

.creator-wall { border-color: rgba(255, 0, 51, 0.32); }

/* Sandbox usage badge — shows "X / 3 this month · Free tier" so the
   per-tier cap is visible at a glance. Sits in the /sandbox page-head. */
.sandbox-usage {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: var(--paper-2, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--hairline, var(--border));
  font-size: 0.82rem;
}
.sandbox-usage-tier {
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--muted, var(--ink-muted));
}
.sandbox-usage-count {
  color: var(--text, var(--ink));
  font-variant-numeric: tabular-nums;
}
.sandbox-usage-upgrade {
  font-weight: 700;
  color: var(--red, #FF0033);
  text-decoration: none;
}
.sandbox-usage-upgrade:hover { text-decoration: underline; }
.sandbox-usage.is-cap {
  background: rgba(255, 0, 51, 0.06);
  border-color: rgba(255, 0, 51, 0.28);
}
.sandbox-usage.is-cap .sandbox-usage-count {
  color: var(--red, #FF0033);
  font-weight: 700;
}

/* Stack tier cards on tablet too — two cards side-by-side need ~620px
   inside the wall to fit cleanly with stacked plan buttons. Below that,
   single column reads better than squeezed pair. */
@media (max-width: 720px) {
  .uw-tier-cards { flex-direction: column; }
}
@media (max-width: 500px) {
  .upgrade-wall { padding: 1.5rem 1.25rem; }
}

/* Inside .uw-tier-card the features stay one column always (the dual-col
   grid from the legacy single-card wall didn't apply here anyway — this
   is belt-and-suspenders). */
.uw-tier-card .uw-features {
  margin: 0 0 0.85rem;
  max-width: none;
}
.uw-tier-card .uw-features li {
  font-size: 0.85rem;
}

/* ── Header upgrade dropdown ── */
.upgrade-menu { position: relative; }

.upgrade-menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 6px;
  z-index: 200;
  min-width: 210px;
}

.upgrade-menu-dropdown-inner {
  background: #1a1a2e;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.upgrade-menu:hover .upgrade-menu-dropdown,
.upgrade-menu:focus-within .upgrade-menu-dropdown,
.upgrade-menu.is-open .upgrade-menu-dropdown { display: block; }

.upgrade-menu-dropdown button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.65rem 1rem;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.upgrade-menu-dropdown button:last-child { border-bottom: none; }
.upgrade-menu-dropdown button:hover { background: rgba(255,255,255,0.05); }
.upgrade-menu-dropdown button em { color: var(--green); font-style: normal; font-size: 0.75rem; margin-left: 0.3rem; }

.upgrade-menu-section {
  font-size: 0.68rem;
  font-weight: 800;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0.5rem 1rem 0.2rem;
}

.upgrade-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 0.3rem 0;
}

.upgrade-menu-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: #a78bfa;
  font-style: normal;
  margin-left: 0.25rem;
}

/* ── Spinner ── */
.spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  color: var(--muted);
}

.spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── History sidebar (collapsible) ── */
.history-toggle {
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.history-list { margin-top: 0.75rem; display: none; }
.history-list.open { display: block; }

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.83rem;
  border: 1px solid transparent;
  margin-bottom: 0.3rem;
  gap: 0.5rem;
}
.history-item:hover { background: var(--surface); border-color: var(--border); }
.history-item.active { background: var(--surface); border-color: #FF444455; }
.history-item .h-title { color: #ccc; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item .h-score { font-weight: 700; white-space: nowrap; }
.history-item .h-date { color: #555; font-size: 0.75rem; white-space: nowrap; }

/* ── A/B Test form ── */
.ab-toggle-row {
  margin-top: 0.35rem;
}

.ab-toggle-btn {
  font-size: 0.78rem;
  font-weight: 600;
  color: #555;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ab-toggle-btn:hover { color: var(--muted); }
.ab-toggle-btn.ab-active { color: #FF6B6B; }

.ab-compare-label {
  font-size: 0.72rem;
  color: #555;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.3rem;
}

.ab-predictions-note {
  font-size: 0.74rem;
  color: #555;
  text-align: center;
  margin-top: 0.4rem;
}

.ab-gate-badge {
  font-size: 0.62rem;
  font-weight: 800;
  color: #a78bfa;
  background: #1e1040;
  border: 1px solid #4c1d95;
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Variation rows (form) ── */
.ab-variations-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.ab-variation-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ab-variation-tag {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1e1040;
  color: #a78bfa;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid #4c1d95;
}

.ab-variation-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  min-width: 0;
}

.ab-variation-input:focus {
  outline: none;
  border-color: #a78bfa;
}

.ab-variation-remove {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #555;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0.45rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.ab-variation-remove:hover { color: var(--danger); background: rgba(255,255,255,0.04); }

.ab-add-btn {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  width: 100%;
  transition: color 0.15s, border-color 0.15s;
}

.ab-add-btn:hover { color: #a78bfa; border-color: #4c1d95; }

/* ── Compare results ── */
.ab-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.ab-winner {
  background: #050f08;
  border: 1px solid #1a5c35;
  border-radius: 8px;
  padding: 0.85rem;
  margin-bottom: 0.65rem;
}

.ab-winner-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.ab-rank {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.ab-winner-score { font-size: 1.7rem; font-weight: 900; line-height: 1; }

.ab-winner-title {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.4;
  font-weight: 600;
}

.ab-verdict {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green);
  text-align: center;
}

.ab-section-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.ab-rank-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.ab-rank-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}

.ab-rank-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.ab-rank-num {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.ab-rank-score { font-size: 1.2rem; font-weight: 800; line-height: 1; }

.ab-rank-title {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.ab-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.ab-insight {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--muted);
}

.ab-insight-hurting { color: #ff8a8a; border-color: #5b1a1a; background: #1a0808; }
.ab-insight-helping { color: #6fe3a4; border-color: #1a5c35; background: #050f08; }

.ab-insight-icon { font-size: 0.7rem; }

.ab-disclaimer {
  font-size: 0.72rem;
  color: #555;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ── Title Compare — verdict-engine identity (v2, redesigned 2026-05-13) ──
   Single-frame cards. Big score anchors the winner. Other titles are
   uniform rows with a colored side-stripe for verdict tier. Mobile-first;
   desktop tightens by letting the lead column be auto-sized.
*/

.ab-verdict-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid transparent;
  font-feature-settings: 'tnum';
}
.ab-verdict-chip-hit   { color: #2EE99B; background: rgba(46, 233, 155, 0.10); border-color: rgba(46, 233, 155, 0.30); }
.ab-verdict-chip-maybe { color: #FFB347; background: rgba(255, 179, 71, 0.10); border-color: rgba(255, 179, 71, 0.30); }
.ab-verdict-chip-flop  { color: #FF4D6D; background: rgba(255, 77, 109, 0.10); border-color: rgba(255, 77, 109, 0.30); }
.ab-verdict-chip-sm    { padding: 0.16rem 0.45rem; font-size: 0.65rem; letter-spacing: 1px; }

/* Winner — one card, no nested boxes */
.ab-winner-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1.1rem;
  background: var(--bg);
  position: relative;
  transition: border-color 0.25s ease;
}
.ab-winner-card[data-tier="strong"] { border-color: rgba(46, 233, 155, 0.45); }
.ab-winner-card[data-tier="okay"]   { border-color: rgba(255, 179, 71, 0.45); }
.ab-winner-card[data-tier="weak"]   { border-color: rgba(255, 77, 109, 0.45); }

.ab-winner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.ab-winner-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: var(--surface, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border);
}

.ab-winner-score-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}
.ab-winner-score-num {
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  font-feature-settings: 'tnum';
}
.ab-winner-score-num[data-tier="strong"] { color: #2EE99B; }
.ab-winner-score-num[data-tier="okay"]   { color: #FFB347; }
.ab-winner-score-num[data-tier="weak"]   { color: #FF4D6D; }
.ab-winner-score-sub {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
  flex: 1 1 12ch;
  min-width: 0;
}

.ab-winner-title {
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.75rem;
  word-wrap: break-word;
}
.ab-winner-reasons {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin-bottom: 0.6rem;
}
.ab-winner-headline {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border);
}

/* Other titles — uniform rows; rank/verdict/score in a tight lead group,
   title flows beneath. The colored left-stripe communicates tier without
   a heavy border. */
.ab-rank-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.ab-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 0.65rem 0.85rem 0.7rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ab-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 10px 0 0 10px;
}
.ab-row[data-tier="strong"]::before { background: #2EE99B; }
.ab-row[data-tier="okay"]::before   { background: #FFB347; }
.ab-row[data-tier="weak"]::before   { background: #FF4D6D; }

.ab-row-lead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ab-row-rank {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--muted);
  text-transform: uppercase;
  min-width: 2ch;
  font-feature-settings: 'tnum';
}
.ab-row-score {
  margin-left: auto;
  font-size: 1.15rem;
  font-weight: 900;
  font-feature-settings: 'tnum';
  line-height: 1;
}
.ab-row-score[data-tier="strong"] { color: #2EE99B; }
.ab-row-score[data-tier="okay"]   { color: #FFB347; }
.ab-row-score[data-tier="weak"]   { color: #FF4D6D; }
.ab-row-title {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tied-top card — same frame as .ab-winner-card but communicates "we
   can't rank these" instead of crowning one. Pill is neutral, no big
   hero score; the title rows inside carry their own scores. */
.ab-tied-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.1rem 1.2rem 1.1rem;
  margin-bottom: 1.1rem;
  background: var(--bg);
  position: relative;
}
.ab-tied-card[data-tier="strong"] { border-color: rgba(46, 233, 155, 0.45); }
.ab-tied-card[data-tier="okay"]   { border-color: rgba(255, 179, 71, 0.45); }
.ab-tied-card[data-tier="weak"]   { border-color: rgba(255, 77, 109, 0.45); }
.ab-tied-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.ab-tied-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: var(--hairline, rgba(0,0,0,0.04));
}
.ab-tied-msg {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 0.85rem;
}
.ab-tied-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ab-tied-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper, var(--bg));
  padding: 0.55rem 0.75rem 0.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ab-tied-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
}
.ab-tied-row[data-tier="strong"]::before { background: #2EE99B; }
.ab-tied-row[data-tier="okay"]::before   { background: #FFB347; }
.ab-tied-row[data-tier="weak"]::before   { background: #FF4D6D; }
.ab-tied-row-lead {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Same-band banner — overlays above the top card when every scored title
   lands in the same HIT/MAYBE/FLOP bucket. Honest "title isn't the
   lever" framing pushes the user toward thumbnail/hook instead. */
.ab-band-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.025);
  font-size: 0.85rem;
  line-height: 1.45;
}
.ab-band-banner[data-decision="hit"]   { border-color: rgba(46, 233, 155, 0.40); background: rgba(46, 233, 155, 0.05); }
.ab-band-banner[data-decision="flop"]  { border-color: rgba(255, 77, 109, 0.40); background: rgba(255, 77, 109, 0.05); }
.ab-band-banner[data-decision="maybe"] { border-color: rgba(255, 179, 71, 0.40); background: rgba(255, 179, 71, 0.06); }
.ab-band-banner-icon {
  flex: 0 0 auto;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.4;
}
.ab-band-banner-text {
  color: var(--text);
  font-weight: 500;
}

.ab-section-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem 0.15rem;
}

/* ── Historical result header ── */
.history-result-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.history-result-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-result-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.result-meta-tag {
  font-size: 0.7rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

.history-result-date {
  font-size: 0.75rem;
  color: #555;
  white-space: nowrap;
}

/* ── Thumbnail upload ── */
.thumb-dropzone {
  border: 2px dashed var(--border);
  border-radius: 9px;
  padding: 1.6rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.15s ease;
}

.thumb-dropzone:hover {
  border-color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
}
.thumb-dropzone.drag-over {
  border-color: var(--red);
  background: rgba(255, 0, 0, 0.06);
  transform: translateY(-1px);
}

.thumb-drop-icon { font-size: 1.75rem; margin-bottom: 0.35rem; }

.thumb-drop-text { font-size: 0.88rem; color: var(--muted); }

.thumb-link { color: #FF6B6B; text-decoration: underline; }

.thumb-drop-sub { font-size: 0.74rem; color: #555; margin-top: 0.2rem; }

.thumb-preview { position: relative; }

.thumb-preview img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

.thumb-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.thumb-remove:hover { background: rgba(180, 0, 0, 0.85); }

/* "Thumbnail *" required indicator — small red asterisk on the label. */
.field-required { color: var(--brand, #FF0033); margin-left: 2px; font-weight: 600; }

/* ── Make it Better ── */
.btn-improve {
  margin-top: 0.75rem;
  background: linear-gradient(90deg, #1a0533, #2d1057);
  border: 1px solid #4c1d95;
  color: #c4b5fd;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.btn-improve:hover:not(:disabled) { opacity: 0.88; border-color: #7c3aed; }
.btn-improve:disabled { opacity: 0.5; cursor: not-allowed; }

.improve-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #4c1d95;
  border-top-color: #a78bfa;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

.improve-panel {
  background: #0c0818;
  border: 1px solid #2d1057;
  border-radius: var(--radius);
  padding: 1.1rem;
  margin-top: 0.75rem;
}

.improve-header {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.improve-weak-tag {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: 1px solid;
  border-radius: 5px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.improve-explanation {
  font-size: 0.83rem;
  color: #aaa;
  line-height: 1.45;
}

.improve-titles {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.improve-title-option {
  background: #100825;
  border: 1px solid #2d1057;
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.improve-title-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.improve-title-why {
  font-size: 0.78rem;
  color: #888;
  line-height: 1.4;
}

.improve-use-btn {
  align-self: flex-start;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-color: #4c1d95;
  color: #a78bfa;
}
.improve-use-btn:hover { border-color: #7c3aed; color: #c4b5fd; }

.improve-tips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.improve-tip {
  background: #100825;
  border: 1px solid #2d1057;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}

.improve-tip-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #6d28d9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}

.improve-tip-text {
  font-size: 0.8rem;
  color: #ccc;
  line-height: 1.5;
}

.improve-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #0f0a00;
  border: 1px solid #cc4400;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  margin-top: 0.65rem;
  font-size: 0.83rem;
  color: #FF9966;
  flex-wrap: wrap;
}

.improve-disclaimer {
  font-size: 0.76rem;
  color: #555;
  border-top: 1px solid #1a1a3e;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  line-height: 1.5;
}

@keyframes fieldHighlight {
  0%   { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.2); }
  100% { border-color: var(--border); box-shadow: none; }
}

.field-highlight { animation: fieldHighlight 1.5s ease-out forwards; }

@media (max-width: 600px) {
  .improve-tips { grid-template-columns: 1fr; }
  .improve-gate { flex-direction: column; align-items: flex-start; }
}

/* ── Analyze row (analyze + save buttons) ── */
.analyze-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.btn-analyze {
  flex: 1;
}

.btn-save-idea {
  flex-shrink: 0;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  white-space: nowrap;
  border: 1px solid var(--border);
}
.btn-save-idea:hover { border-color: var(--muted); }

/* ── History full link ── */
.history-full-link {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
  margin-top: 0.5rem;
  padding: 0.35rem;
}
.history-full-link:hover { color: var(--text); }

/* ── Why this score? section ── */
.why-section {
  margin-top: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.why-summary {
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.why-summary::-webkit-details-marker { display: none; }
.why-summary::after { content: " ▾"; font-size: 0.72rem; }
.why-section[open] .why-summary::after { content: " ▴"; }
.why-summary:hover { color: var(--text); }

.why-body {
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.why-block-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.why-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.why-bullets li {
  font-size: 0.83rem;
  color: #ccc;
  line-height: 1.45;
  padding-left: 1.1rem;
  position: relative;
}
.why-bullets li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--danger);
}

.why-context {
  font-size: 0.84rem;
  color: #ccc;
  line-height: 1.5;
}

.why-analyzed {
  font-size: 0.75rem;
  color: #555;
}

.why-top-titles {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.why-top-titles li {
  font-size: 0.8rem;
  color: #aaa;
  line-height: 1.45;
  padding: 0.35rem 0.55rem;
  background: rgba(255,255,255,0.03);
  border-radius: 5px;
  border-left: 2px solid var(--green);
}

/* ── Channel Authority ── */
.authority-high   { color: var(--green)  !important; }
.authority-medium { color: var(--amber)  !important; }
.authority-low    { color: var(--danger) !important; }

.pre-authority-note {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.5rem;
  padding: 0 0.25rem;
  line-height: 1.4;
}

/* ── History in results panel ── */
.hr-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.hr-panel-header {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.hr-list { display: flex; flex-direction: column; }

.hr-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.hr-item:last-child { border-bottom: none; }
.hr-item:hover { background: var(--bg); }

.hr-score {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  width: 2.5rem;
  text-align: center;
  flex-shrink: 0;
}

.hr-info { flex: 1; min-width: 0; }

.hr-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}

.hr-date { font-size: 0.72rem; color: #555; }

.hr-arrow { font-size: 1.2rem; color: #444; flex-shrink: 0; }

/* ── Result sections ── */
.result-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  margin-bottom: 0.6rem;
}

.result-section-header {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.result-section-header-problems {
  color: var(--danger);
  border-bottom-color: rgba(255, 68, 68, 0.2);
}

/* Flat result card inside a section (no double border) */
.result-card-flat {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* Collapsible section */
.result-section-collapsible {
  padding: 0;
  overflow: hidden;
}

.result-section-summary {
  padding: 0.85rem 1.25rem;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.result-section-summary::-webkit-details-marker { display: none; }
.result-section-summary::after { content: " ▾"; font-size: 0.72rem; }
.result-section-collapsible[open] .result-section-summary::after { content: " ▴"; }
.result-section-collapsible[open] .result-section-summary {
  border-bottom: 1px solid var(--border);
}
.result-section-summary:hover { color: var(--text); }

.result-section-body {
  padding: 1rem 1.25rem;
}

/* ── Tabbed result UI ────────────────────────────────────────────────────── */

.result-hero {
  padding: 0.95rem 1.1rem;
}

.hero-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-row .score-box-hero {
  flex-shrink: 0;
  padding: 0.5rem 0.65rem;
  margin: 0;
}
.hero-row .score-box-hero .score-number {
  font-size: 2.6rem;
  line-height: 1;
}
.hero-row .score-box-hero .score-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin-top: 0.25rem;
}

.hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hero-info .performance-badge {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: transparent;
  padding: 0;
  margin: 0;
}
.hero-info .perf-label {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.perf-strong .perf-label  { color: var(--green); }
.perf-okay   .perf-label  { color: var(--amber); }
.perf-weak   .perf-label  { color: var(--danger); }

.hero-info .perf-context {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

.hero-views {
  font-size: 0.85rem;
  color: var(--muted);
}
.hero-views strong { color: var(--text); font-weight: 600; }

.hero-trend {
  font-size: 0.78rem;
  color: var(--muted);
}

.result-hero .progress-bar {
  margin-top: 0.7rem;
  margin-bottom: 0;
  /* height left to default (8px) — see canonical .progress-bar above */
}

@media (max-width: 480px) {
  .hero-row { gap: 0.7rem; }
  .hero-row .score-box-hero .score-number { font-size: 2.2rem; }
  .hero-info .perf-label { font-size: 0.95rem; }
}

.result-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.result-tabs::-webkit-scrollbar { display: none; }

.result-tab {
  flex: 1 1 auto;
  min-width: max-content;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  margin-bottom: -1px;          /* overlap parent border */
  font-family: inherit;
}
.result-tab:hover { color: var(--text); }
.result-tab.is-active {
  color: var(--red);
  border-bottom-color: var(--red);
}

.result-tab-panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  animation: panelFade 0.22s ease both;
}
.result-tab-panel.is-active { display: block; }

@keyframes panelFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Diagnostic items shared by Wrong / Good tabs */
.diag-summary {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

.diag-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.diag-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.92rem;
  line-height: 1.4;
}
.diag-bad {
  border-color: rgba(255, 68, 68, 0.25);
  background: linear-gradient(0deg, rgba(255, 68, 68, 0.04), rgba(255, 68, 68, 0.04)), var(--bg);
}
.diag-good {
  border-color: rgba(0, 200, 81, 0.25);
  background: linear-gradient(0deg, rgba(0, 200, 81, 0.04), rgba(0, 200, 81, 0.04)), var(--bg);
}
.diag-icon { font-size: 1.05rem; line-height: 1.3; }
.diag-bad .diag-icon { color: var(--danger); }
.diag-good .diag-icon { color: var(--green); }
.diag-text { flex: 1; color: var(--text); font-weight: 500; }

.diag-verdict {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
}
.diag-verdict-bad   { color: var(--danger); background: rgba(255, 68, 68, 0.08); }
.diag-verdict-warn  { color: var(--amber);  background: rgba(255, 136, 0, 0.10); }

.diag-block { margin-bottom: 1.1rem; }
.diag-block:last-child { margin-bottom: 0; }
.diag-block-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  margin-bottom: 0.55rem;
}

.diag-actions, .diag-suggestions {
  margin: 0;
  padding-left: 1.2rem;
}
.diag-actions li {
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
.diag-suggestions { list-style: none; padding: 0; }
.diag-suggestions li { margin-bottom: 0.4rem; }

.diag-suggestion-btn {
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
  font-family: inherit;
}
.diag-suggestion-btn:hover {
  border-color: var(--green);
  transform: translateY(-1px);
}

.diag-empty {
  text-align: center;
  padding: 2rem 0.5rem;
  color: var(--muted);
}
.diag-empty-icon {
  font-size: 2.5rem;
  color: var(--green);
  margin-bottom: 0.6rem;
}
.diag-empty-headline {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.diag-empty-sub { font-size: 0.85rem; }

/* ── Variations tab — side-by-side compare cards ─────────────────────────── */

.vary-stage { display: flex; flex-direction: column; gap: 1rem; }

.vary-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.vary-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.vary-card-original {
  opacity: 0.78;
  filter: saturate(0.85);
}

.vary-card-edited {
  border-color: rgba(0, 200, 81, 0.25);
  box-shadow: 0 0 0 0 rgba(0, 200, 81, 0.0);
}
.vary-card-edited.vary-card-loading {
  border-color: var(--amber);
  animation: varyPulse 1.4s ease-in-out infinite;
}
@keyframes varyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 136, 0, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 136, 0, 0.15); }
}

.vary-card-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
}
.vary-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  min-height: 2.5em;
}
.vary-card-title-empty {
  font-style: italic;
  color: var(--muted);
  font-weight: 400;
}

.vary-card-score {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  font-feature-settings: 'tnum';
}
.vary-card-original .vary-card-score { color: var(--muted); }
.vary-card-edited   .vary-card-score { color: var(--text); }

.vary-card-bar {
  width: 100%;
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
}
.vary-card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--danger) 0%, var(--amber) 50%, var(--green) 100%);
  background-size: 100% 100%;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Delta arrow + number between cards */
.vary-delta {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  animation: deltaPop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.4) both;
}
.vary-delta-up   { color: var(--green);  border-color: rgba(0, 200, 81, 0.35); }
.vary-delta-down { color: var(--danger); border-color: rgba(255, 68, 68, 0.35); }
.vary-delta-arrow { font-size: 1.2rem; }
@keyframes deltaPop {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* What changed list */
.vary-changed {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.vary-changed ul { list-style: none; padding: 0; margin: 0; }
.vary-changed li {
  font-size: 0.88rem;
  color: var(--text);
  padding: 0.25rem 0;
}

/* Editor input */
.vary-edit-row { display: flex; flex-direction: column; gap: 0.4rem; }
.vary-edit-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
}
.vary-edit-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vary-edit-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 200, 81, 0.15);
}

/* Suggestions */
.vary-suggestions { display: flex; flex-direction: column; gap: 0.45rem; }
.vary-suggestion {
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.vary-suggestion:hover {
  border-color: var(--green);
  transform: translateY(-1px);
}
.vary-suggestion-applied {
  border-color: var(--green) !important;
  background: rgba(0, 200, 81, 0.10);
  animation: varyApplied 0.55s ease;
}
@keyframes varyApplied {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* History */
.vary-history summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  padding: 0.4rem 0;
}
.vary-history summary::-webkit-details-marker { display: none; }
.vary-history summary::after { content: ' ▾'; }
.vary-history[open] summary::after { content: ' ▴'; }
.vary-history ul { list-style: none; padding: 0.5rem 0 0; margin: 0; }
.vary-history li {
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.vary-history li .vh-score {
  display: inline-block;
  min-width: 2.2em;
  font-weight: 800;
  color: var(--text);
  font-feature-settings: 'tnum';
  margin-right: 0.4em;
}

@media (max-width: 540px) {
  .vary-cards { grid-template-columns: 1fr; }
}

/* ── SHAP Attribution Panel ───────────────────────────────────────────────── */
.attr-cards {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.attr-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.attr-hurting {
  border-color: rgba(255, 68, 68, 0.25);
  background: linear-gradient(0deg, rgba(255, 68, 68, 0.04), rgba(255, 68, 68, 0.04)), var(--bg);
}

.attr-helping {
  border-color: rgba(0, 200, 81, 0.25);
  background: linear-gradient(0deg, rgba(0, 200, 81, 0.04), rgba(0, 200, 81, 0.04)), var(--bg);
}

.attr-icon {
  font-size: 1rem;
  line-height: 1.4;
  width: 1.1rem;
  text-align: center;
}
.attr-hurting .attr-icon { color: var(--danger); }
.attr-helping .attr-icon { color: var(--green); }

.attr-body { min-width: 0; }

.attr-headline {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
}

.attr-action {
  margin-top: 0.35rem;
  font-size: 0.81rem;
  color: var(--muted);
  line-height: 1.45;
}

.attr-impact {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  height: fit-content;
}
.attr-hurting .attr-impact {
  color: var(--danger);
  background: rgba(255, 68, 68, 0.12);
}
.attr-helping .attr-impact {
  color: var(--green);
  background: rgba(0, 200, 81, 0.12);
}

.attr-conf-low {
  grid-column: 2 / 4;
  font-size: 0.68rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.25rem;
}

.attr-context {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.attr-context-label {
  font-weight: 700;
  color: var(--text);
  margin-right: 0.45rem;
}

.attr-context-item {
  display: inline-block;
}

.attr-footer {
  margin-top: 0.7rem;
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
  opacity: 0.75;
}

/* Mobile: stack impact pill below body */
@media (max-width: 480px) {
  .attr-card {
    grid-template-columns: auto 1fr;
  }
  .attr-impact {
    grid-column: 2 / 3;
    justify-self: start;
    margin-top: 0.4rem;
  }
}

/* Competitor block inside video details */
.competitor-block {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

/* Predicted views display */
.predicted-views {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
}

.pv-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  white-space: nowrap;
}

.pv-range-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pv-range {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.pv-breakout {
  font-size: 0.75rem;
  color: var(--green);
  font-weight: 600;
}

.pv-trend {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

/* Action bar */
.result-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.result-new-btn {
  font-size: 0.8rem;
  color: var(--muted);
}
.result-new-btn:hover { color: var(--text); border-color: var(--muted); }

/* ── Share row ── */
.share-row {
  display: flex;
  justify-content: flex-end;
  margin: 0.25rem 0;
}

.share-btn {
  font-size: 0.72rem;
  padding: 0.25rem 0.65rem;
  color: var(--muted);
}
.share-btn:hover { color: var(--text); }

/* ── Re-analyze button ── */
.reanalyze-btn {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

/* ── Results fade-in ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#resultsArea > * { animation: fadeUp 0.28s ease; }

/* ── Demo result card (empty state) ── */
.demo-result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.demo-result-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), #7C3AED);
}
.demo-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.demo-badge {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
}
.demo-niche-tag { font-size: 0.75rem; color: #555; }
.demo-idea-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.65;
  font-style: italic;
  margin-bottom: 1rem;
}
.demo-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.demo-why-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}
.demo-why-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.45rem;
}
.demo-why-block-problems .demo-why-label { color: var(--danger); }
.demo-why-block-titles   .demo-why-label { color: #60A5FA; }
.demo-why-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.demo-why-block ul li {
  font-size: 0.8rem;
  color: #aaa;
  line-height: 1.4;
  padding-left: 0.85rem;
  position: relative;
}
.demo-why-block-problems ul li::before { content: "—"; position: absolute; left: 0; color: var(--danger); }
.demo-title-item {
  font-size: 0.8rem;
  color: #aaa;
  font-style: italic;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}
.demo-title-item:last-child { border-bottom: none; }
.demo-result-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.74rem;
  color: #555;
  flex-wrap: wrap;
  justify-content: center;
}
.demo-dot { color: #333; }
.demo-cta-row { margin-top: 1rem; }
@media (max-width: 600px) {
  .demo-why-grid { grid-template-columns: 1fr; }
}

/* ── Footer ── */
footer {
  text-align: center;
  padding: 1rem 2rem;
  border-top: 1px solid var(--border);
  color: #444;
  font-size: 0.78rem;
}
footer a { color: #666; text-decoration: none; margin: 0 0.5rem; }
footer a:hover { color: var(--muted); }

/* ============================================================================
   Studio Print overrides
   These ride on top of the legacy structural CSS to swap the visual language
   from dark-mode + red-accent to warm-paper editorial. Token swaps above carry
   most of the work; the rules here patch the spots that hardcoded dark-mode
   treatments (gradients, neon glows, near-black surfaces).
   ========================================================================== */

/* Sticky header — fully opaque so content scrolling under is fully covered */
header {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

/* Footer in mono, hairline */
footer {
  background: transparent;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 2;
  text-transform: uppercase;
}
footer a { color: var(--ink-muted); border-bottom: 1px solid transparent; padding: 2px 0; transition: color 120ms, border-color 120ms; }
footer a:hover { color: var(--ink); border-bottom-color: var(--hairline-bold); }

/* Headlines and h-tags use Inter for hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* Buttons — the dark-mode gradient on .btn-primary is the loudest mismatch */
.btn-primary {
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius);
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.btn-primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn-primary:active { transform: translateY(1px); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-ui);
  font-weight: 600;
}
.btn-outline:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-weight: 500;
}
.btn-ghost:hover { color: var(--ink); background: var(--paper-2); }

/* Gold variants — achievement / bonus / save states. Used sparingly:
   Connect Studio bonus, achievement CTAs, never as primary. */
.btn-gold {
  background: var(--gold) !important;
  color: var(--paper) !important;
  border: 1px solid var(--gold) !important;
  font-family: var(--font-ui);
  font-weight: 600;
}
.btn-gold:hover { background: var(--gold-soft) !important; border-color: var(--gold-soft) !important; }
.btn-gold-outline {
  background: var(--gold-bg);
  color: var(--gold-soft);
  border: 1px solid rgba(245, 158, 11, 0.40);
  font-family: var(--font-ui);
  font-weight: 600;
}
.btn-gold-outline:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: var(--gold);
  color: var(--gold-soft);
}

/* Inputs — warm paper, hairline borders, ink text */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  /* background-color (not shorthand): preserves the chevron SVG +
     background-repeat: no-repeat that .field select sets above. The
     shorthand resets those, which used to tile the red focus chevron
     across the whole select. */
  background-color: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 16px;   /* prevents iOS zoom-on-focus */
  transition: border-color 120ms;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }

/* Labels — uppercase Inter */
label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* Quota badge — mono, hairline pill */
.quota-badge {
  background: transparent !important;
  border-color: var(--hairline-strong) !important;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.quota-badge.pro     { color: var(--accent); border-color: rgba(31, 58, 46, 0.32) !important; }
.quota-badge.creator { color: var(--accent); border-color: rgba(31, 58, 46, 0.40) !important; background: var(--accent-bg) !important; }

/* Cards / surface containers — flatten the dark-mode shadow/glow stuff */
.card, .surface, .result-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  box-shadow: none;
}

/* Kill the dark-mode radial banners — they read as colored smears on paper */
.poster::before, .poster::after,
[class*="-banner"]::before, [class*="-banner"]::after {
  background: none !important;
}

/* The score numeral — Geist Mono Heavy, tabular */
.score-number, .poster-score-number, .score-big, .demo-result-card .score-number {
  font-family: var(--font-display);
  font-feature-settings: "tnum", "calt" 0;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

.score-denom, .poster-score-denom {
  font-family: var(--font-display);
  font-weight: 500;
  opacity: var(--opacity-3);
  color: var(--ink);
}

/* Score sub-numbers (topic / engage / retain) */
.score-box .score-number {
  font-size: clamp(28px, 8vw, 44px);
}

.score-box-hero .score-number {
  font-size: clamp(56px, 18vw, 96px);
}

.score-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

/* Scores wrapper — hairline-divided cells instead of dark-mode boxes */
.scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.score-box {
  background: var(--paper-2);
  padding: 16px 12px;
  text-align: center;
}
.score-box-hero {
  grid-column: 1 / -1;
  background: var(--paper);
  padding: 24px 16px;
}

@media (min-width: 600px) {
  .scores { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .score-box-hero { grid-column: 1 / 2; }
}

/* Result prose container — Inter at comfortable reading rhythm */
.result-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  font-feature-settings: "kern", "liga";
  max-width: 720px;
}
.result-card p, .result-card li { font-family: var(--font-body); line-height: 1.6; }
.result-card h1, .result-card h2, .result-card h3 { font-family: var(--font-ui); }
.result-card h2 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.result-card h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-top: 20px;
  margin-bottom: 6px;
}
.result-card strong { color: var(--ink); font-weight: 600; }
.result-card a {
  color: var(--accent);
  border-bottom: 1px solid rgba(31, 58, 46, 0.32);
}

/* Performance badge — flat pill */
.performance-badge {
  background: var(--accent-bg);
  border: 1px solid rgba(31, 58, 46, 0.24);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
}

/* "Why" grid — hairline cards on paper */
.demo-why-grid, .why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .demo-why-grid, .why-grid { grid-template-columns: 1fr 1fr; }
}
.demo-why-block, .why-block {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: none;
}
.demo-why-label, .why-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

/* Step indicator — hairline + numerals */
.step-indicator { gap: 8px; }
.step-dot {
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}
.step-item.active .step-dot {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.step-item.complete .step-dot {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.step-connector { background: var(--hairline-strong); }
.step-item-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* Thumbnail dropzone */
.thumb-dropzone {
  background: var(--paper-2);
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--radius);
  color: var(--ink-muted);
  transition: border-color 120ms, background 120ms;
}
.thumb-dropzone:hover, .thumb-dropzone.drag-over {
  border-color: var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.thumb-link { color: var(--accent); text-decoration: underline; }

/* Title compare — variation rows */
.ab-toggle-btn { color: var(--ink-muted); }
.ab-toggle-btn:hover { color: var(--ink); }
.ab-toggle-btn.ab-active { color: var(--accent); }
.ab-gate-badge {
  background: var(--accent-bg);
  border: 1px solid rgba(31, 58, 46, 0.32);
  color: var(--accent);
  font-family: var(--font-mono);
}
.ab-variation-tag {
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
  font-family: var(--font-mono);
}
.ab-variation-input { background: var(--paper); }
.ab-add-btn {
  background: transparent;
  border: 1px dashed var(--hairline-strong);
  color: var(--ink-muted);
  font-family: var(--font-ui);
}
.ab-add-btn:hover { border-color: var(--ink); color: var(--ink); }

/* AB results */
.ab-header {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.ab-winner {
  background: var(--accent-bg);
  border: 1px solid rgba(31, 58, 46, 0.24);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.ab-winner-score, .ab-rank-score {
  font-family: var(--font-display);
  font-feature-settings: "tnum";
  font-weight: 800;
  color: var(--ink);
}
.ab-winner-score { color: var(--accent); }
.ab-rank-row {
  background: var(--paper);
  border: 1px solid var(--hairline);
}
.ab-rank-num {
  font-family: var(--font-mono);
  color: var(--ink-muted);
}
.ab-insight {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
}
.ab-insight-hurting { background: rgba(122, 34, 34, 0.06); border-color: rgba(122, 34, 34, 0.20); color: var(--danger); }
.ab-insight-helping { background: var(--accent-bg); border-color: rgba(31, 58, 46, 0.24); color: var(--accent); }
.ab-disclaimer { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }

/* Upgrade walls */
/* Upgrade walls — vibrant brand treatment 2026-05-13. White base with
   brand-red accents at corners; subtle gradient lift so the card feels
   "premium" without leaving the white + #FF0033 palette. */
.upgrade-wall {
  background:
    radial-gradient(circle at top right, rgba(255, 0, 51, 0.06), transparent 55%),
    var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 36px 28px 32px;
  text-align: center;
  position: relative;
  box-shadow: 0 6px 24px rgba(15, 15, 15, 0.04);
  overflow: hidden;
}
/* Bold brand stripe across the top — turns the wall from "alert card" to
   "premium offer". */
.upgrade-wall::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red, #FF0033) 0%, #ff4d6d 100%);
}

.uw-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--red, #FF0033);
  background: rgba(255, 0, 51, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.uw-headline {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.4rem, 3.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink, #161513);
  margin: 0 auto 10px;
  max-width: 26ch;
}

.uw-icon { font-size: 32px; margin-bottom: 8px; }
.uw-tier-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px;
}
.uw-tier-card-creator { border-color: rgba(31, 58, 46, 0.32); }
.uw-tier-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.uw-tier-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.uw-features li {
  color: var(--ink-soft);
}
.uw-check { color: var(--accent); }
.uw-fine { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }

/* Upgrade dropdown menu */
.upgrade-menu-dropdown {
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 12px 32px rgba(22, 21, 19, 0.08);
}
.upgrade-menu-section {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  padding: 8px 12px 4px;
}
.upgrade-menu-tag {
  font-family: var(--font-mono);
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}
.upgrade-menu-divider { background: var(--hairline); height: 1px; }

/* Studio banner */
.studio-banner-row, .studio-banner {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
}

/* Spinner */
.spinner-ring {
  border: 1.5px solid var(--hairline-bold);
  border-top-color: var(--ink);
}
.spinner { color: var(--ink-muted); }

/* Alerts */
.alert {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  border-radius: var(--radius);
}
.alert-warning { border-color: rgba(140, 109, 31, 0.24); background: rgba(140, 109, 31, 0.06); color: var(--ink); }
.alert-error   { border-color: rgba(122, 34, 34, 0.24); background: rgba(122, 34, 34, 0.05); color: var(--ink); }
.alert-success { border-color: rgba(31, 58, 46, 0.24);  background: var(--accent-bg);         color: var(--ink); }

/* History page predictions cards */
.pred-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: none;
}
.pred-card:hover { border-color: var(--hairline-strong); }
.pred-score {
  font-family: var(--font-display);
  font-feature-settings: "tnum";
}
.pred-badge {
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}
.pred-badge-published { color: var(--accent); border-color: rgba(31, 58, 46, 0.24); }
.pred-badge-actual    { color: var(--ink); border-color: var(--hairline-strong); }

/* ── WS1 — personal calibration panel ──────────────────────────────────────
   Renders at the top of /history (above predictions list). Mobile-first
   single-column grid; KPI tiles expand to 4-wide on ≥720px viewports.
   Color signal: .cal-good (green) for strong calibration metrics,
   .cal-bad (brand red) for weak ones. Neutral (no class) for directional
   signals like signed gap where "good/bad" isn't well-defined. */
.cal-panel {
  background: var(--paper-2);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.5rem;
}
.cal-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.cal-panel-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cal-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
  padding: 0.2rem 0.55rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.cal-message {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-bottom: 1rem;
}
.cal-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  margin-bottom: 1rem;
}
@media (min-width: 720px) {
  .cal-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
.cal-kpi-tile {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
}
.cal-kpi-val {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.55rem;
  color: var(--ink);
  line-height: 1.1;
  font-feature-settings: "tnum";
}
.cal-kpi-val.cal-good { color: #1a8a3b; }
.cal-kpi-val.cal-bad  { color: #c92a2a; }
.cal-kpi-label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.25rem;
}
.cal-kpi-foot {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-top: 0.4rem;
  opacity: 0.85;
  line-height: 1.3;
}

/* By-niche breakdown */
.cal-section-label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.45rem;
}
.cal-by-niche { margin-bottom: 1.1rem; }
.cal-niche-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cal-niche-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.4rem 0.7rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
}
.cal-niche-name { color: var(--ink); font-weight: 600; }
.cal-niche-n,
.cal-niche-stat {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-feature-settings: "tnum";
}
@media (max-width: 540px) {
  /* On narrow screens, the 5-column niche row gets cramped. Drop to
     2-row layout: name spans full width, stats below it. */
  .cal-niche-row {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "name name n"
      "g    sp   hit";
  }
  .cal-niche-name { grid-area: name; }
  .cal-niche-n    { grid-area: n; text-align: right; }
  .cal-niche-row .cal-niche-stat:nth-of-type(1) { grid-area: g;   }
  .cal-niche-row .cal-niche-stat:nth-of-type(2) { grid-area: sp;  }
  .cal-niche-row .cal-niche-stat:nth-of-type(3) { grid-area: hit; text-align: right; }
}

/* Last-10 table */
.cal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cal-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.82rem;
}
.cal-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--hairline-strong);
}
.cal-table tbody td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--ink);
}
.cal-cell-date { font-family: var(--font-mono); color: var(--ink-muted); white-space: nowrap; }
.cal-cell-idea {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-cell-num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.cal-cell-num.cal-good { color: #1a8a3b; font-weight: 700; }
.cal-cell-num.cal-bad  { color: #c92a2a; font-weight: 700; }
.cal-cell-verdict {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-left: 0.3rem;
}
.cal-cell-right { text-align: center; }
.cal-mark-yes { color: #1a8a3b; font-weight: 800; }
.cal-mark-no  { color: #c92a2a; font-weight: 800; }

/* History stats */
.stat-box {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
}
.stat-val { font-family: var(--font-display); color: var(--ink); }
.stat-label { color: var(--ink-muted); font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }

/* Account page */
.acct-section {
  background: var(--paper);
  border: 1px solid var(--hairline);
}
.acct-row-label { color: var(--ink-muted); font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.acct-row-value { color: var(--ink); }

/* Demo card on landing */
.demo-result-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.demo-eyebrow { color: var(--ink-muted); }
.demo-badge {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.demo-niche-tag { color: var(--ink-muted); font-family: var(--font-ui); font-size: 12px; }
.demo-idea-text { color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.5; font-style: italic; }
.demo-title-item { color: var(--ink); font-family: var(--font-body); }
.demo-result-footer { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }
.demo-dot { opacity: 0.5; }

/* Markdown a / strong inside results */
.result-card pre, .result-card code { background: var(--paper-2); color: var(--ink); }

/* Kill any remaining dark-mode glow / shadow effects */
.poster, .result-card, .ab-header, .ab-rank-row, .pred-card, .stat-box, .uw-tier-card, .acct-section, .upgrade-wall, .demo-result-card {
  text-shadow: none;
  box-shadow: none;
}

/* Mobile-first tightening for very small screens */
@media (max-width: 480px) {
  body { font-size: 16px; }
  header { padding: 10px 14px; }
  .logo img { height: 36px; }
  .header-right { gap: 6px; }
  .header-right .btn, .hdr-nav .btn { padding: 8px 10px; font-size: 12px; min-height: 40px; }
  footer { padding: 16px 12px 24px; line-height: 1.9; font-size: 10px; }
  footer a { display: inline-block; margin: 2px 6px; }
  .scores { grid-template-columns: 1fr 1fr; }
  .score-box-hero { grid-column: 1 / -1; }
}

/* ============================================================================
   PHASE 2.2 — Studio Dashboard Layout
   YT-Studio-like sidebar + main content. Mobile-first: sidebar is a drawer
   on small screens, fixed column on desktop.
   ========================================================================== */

.app-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  /* Fully opaque white so content scrolling under is fully covered */
  background: var(--paper);
  position: sticky;
  top: 0;
  /* Must be above .sidebar (z-index 200) so the logo never gets clipped
     by the sticky sidebar on scroll — was tied at 200 and the sidebar
     won by DOM order. */
  z-index: 300;
  gap: 12px;
}

.app-header-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  border: none;
  transition: background 120ms;
}
.nav-toggle:hover { background: var(--paper-2); }
.nav-toggle:active { background: var(--paper-3); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .app-header { padding: 12px 24px; }
}

.app-header .logo img { height: 36px; }

@media (min-width: 900px) {
  .app-header .logo img { height: 40px; }
}

/* App shell — flex row on desktop */
.app-shell {
  display: flex;
  flex: 1;
  width: 100%;
  position: relative;
  min-height: 0;
}

/* Sidebar — mobile: fixed drawer; desktop: sticky column */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 84vw;
  background: var(--paper);
  border-right: 1px solid var(--hairline);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  flex-direction: column;
  padding: 70px 12px 16px;   /* leaves space below the sticky header */
  overflow-y: auto;
}

.sidebar.is-open { transform: translateX(0); }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.32);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms;
}

.sidebar-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .sidebar {
    position: sticky;
    top: 64px;
    transform: none;
    width: 232px;
    max-width: 232px;
    height: calc(100vh - 64px);
    padding: 24px 12px 16px;
    border-right: 1px solid var(--hairline);
  }
  .sidebar-backdrop { display: none; }
}

/* Side nav */
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.side-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, color 120ms;
  text-align: left;
  border: none;
  background: transparent;
  width: 100%;
  min-height: 40px;
}

.side-nav-item:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.side-nav-item:active {
  background: var(--paper-3);
}

.side-nav-item.is-active {
  background: var(--paper-3);
  color: var(--ink);
  font-weight: 600;
}

.side-nav-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.side-nav-item.is-active .side-nav-icon { opacity: 1; color: var(--accent); }

.side-nav-label { flex: 1; }

.side-nav-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 3px 6px;
  border-radius: 4px;
  line-height: 1;
}

/* Sidebar foot — quota + upgrade */
.sidebar-foot {
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb-quota {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sb-quota-num {
  font-weight: 600;
  color: var(--ink);
}

.sb-progress {
  width: 100%;
  height: 6px;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}

.sb-progress-fill {
  height: 100%;
  background: var(--accent);   /* brand red across all states */
  border-radius: 999px;
  transition: width 320ms ease-out;
}

/* Variants kept for the JS hook but visually unified — bar is always
   accent. Hooks remain in case we want to darken/desaturate later. */
.sb-progress-fill.is-low,
.sb-progress-fill.is-empty { background: var(--accent); }

/* Override legacy main grid — main fills available space, content
   inside (predict-form, results) caps for readable measure. */
main, main.dashboard {
  display: block;
  grid-template-columns: none;
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 16px 48px;
  gap: 0;
}

@media (min-width: 600px) {
  main, main.dashboard { padding: 32px 24px 64px; }
}

@media (min-width: 900px) {
  main, main.dashboard { padding: 40px 56px 80px; }
}

/* App shell — centered on the viewport, capped on ultra-wide screens.
   The sidebar stays flush to the shell's left edge; the dashboard fills
   the rest. This is the YT-Studio pattern. */
.app-shell {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* Inside the dashboard, cap content for readability. The page-head,
   predict-form, results, and history-row all share a single measure
   so the page feels like one coherent column. */
.page-head,
.predict-form,
.results,
.history-row,
#studioBanner,
#ideaNudgeBanner,
.acct-section,
.acct .acct-modal-target {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* History page tabs + content also follow the same measure */
.dashboard .hist-tabs,
.dashboard #panelPredictions,
.dashboard #panelIdeas {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1100px) {
  .page-head,
  .predict-form,
  .results,
  .history-row,
  #studioBanner,
  #ideaNudgeBanner,
  .acct-section,
  .dashboard .hist-tabs,
  .dashboard #panelPredictions,
  .dashboard #panelIdeas {
    max-width: 760px;
  }
}

/* Page head — reset the bare `header { display: flex }` rule at line 90
   that was meant for the top app-bar but also catches <header class="page-head">.
   Page-head should stack: title → sub → optional badge, not lay them out
   side-by-side. */
.page-head {
  display: block;
  padding: 0;
  border-bottom: none;
  position: static;
  background: transparent;
  margin-bottom: 28px;
}

.page-title {
  font-family: var(--font-display, var(--font-ui));
  font-size: clamp(1.65rem, 4.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: 22ch;
}

.page-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 56ch;
  margin: 0;
}

/* Predict form */
.predict-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}

.predict-form .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.predict-form label {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
}

.field-label-row label {
  margin-bottom: 0;
}

.field-hint {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
  font-style: italic;
  line-height: 1.4;
}

/* Subscriber-count input readout — shows "6.9K subscribers · Small tier"
   below the field as the user types. Distinct from .field-hint (which is
   the persistent "Detected from Studio" message); .field-readout is the
   live derived value. Mobile-first: same on all sizes, no media queries. */
.field-readout {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.3;
}

/* The numeric input itself: monospace numerals for legibility at scale.
   Keep the existing .field input padding; just override font-family. */
#subscriberCount {
  font-family: var(--font-mono, "Geist Mono", monospace);
  letter-spacing: -0.005em;
}

/* Studio-locked subscriber field — when a creator has connected YouTube
   Studio on /app, the editable subscriber input is hidden entirely. The
   underlying <input> stays in the DOM so val('subscriberCount') and
   getSubscriberCount() can still read its auto-filled value at form
   submit, but there's no visual element in the form grid. /sandbox is
   the canonical path for "what if I had a different sub count"
   workflows; sidebar links there.
   Initially shipped 2026-05-17 with an inline readout, but the readout
   broke the form-grid layout (cramped 2-column slot next to Niche).
   Simpler answer: just hide. */
.field-studio-locked {
  display: none !important;
}

/* Channel-lookup row — input + Look up button.
   Mobile-first: button stacks below input on phone; row layout on tablet+. */
.channel-lookup-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.channel-lookup-row #channelLookup {
  width: 100%;
}
.channel-lookup-row button {
  align-self: flex-start;
  white-space: nowrap;
  min-height: 40px;
}
.field-optional {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted, var(--ink-muted));
  letter-spacing: 0;
  text-transform: none;
  font-style: italic;
}
#channelLookupStatus strong { color: var(--text, var(--ink)); font-weight: 700; }
#channelLookupStatus a {
  color: var(--brand);
  text-decoration: underline;
  margin-left: 0.3rem;
}
@media (min-width: 600px) {
  .channel-lookup-row {
    flex-direction: row;
    gap: 0.5rem;
    align-items: stretch;
  }
  .channel-lookup-row #channelLookup { flex: 1; }
  .channel-lookup-row button { align-self: auto; }
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Inputs in the predict form override legacy padding. NOTE: use
   `background-color:` rather than the `background:` shorthand — the
   shorthand resets background-repeat and background-position, which the
   chevron SVG defined elsewhere relies on. The bug was a focused select
   tiling the red focus-chevron across its entire width. */
.predict-form input[type="text"],
.predict-form input[type="email"],
.predict-form input[type="number"],
.predict-form textarea,
.predict-form select {
  width: 100%;
  padding: 12px 14px;
  background-color: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
}

.predict-form textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.55;
}

.predict-form input:focus,
.predict-form textarea:focus,
.predict-form select:focus {
  outline: none;
  border-color: var(--ink);
}

/* Title compare button next to title input */
.predict-form .ab-toggle-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: color 120ms;
}
.predict-form .ab-toggle-btn:hover { color: var(--ink); }
.predict-form .ab-toggle-btn.ab-active { color: var(--accent); }

/* Title variation rows */
.ab-variations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.ab-variation-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ab-variation-tag {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--hairline-strong);
}

.ab-variation-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px !important;
  background: var(--paper) !important;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px !important;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
}

.ab-variation-remove {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: color 120ms, background 120ms;
}
.ab-variation-remove:hover { color: var(--accent); background: var(--paper-2); }

.ab-add-btn {
  background: transparent;
  border: 1px dashed var(--hairline-strong);
  border-radius: 8px;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
  cursor: pointer;
  width: 100%;
  transition: color 120ms, border-color 120ms;
}
.ab-add-btn:hover { color: var(--ink); border-color: var(--hairline-bold); }

/* Thumbnail dropzone refresh */
.thumb-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px;
  background: var(--paper);
  border: 1.5px dashed var(--hairline-strong);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 120ms, background 120ms;
  color: var(--ink-soft);
}

.thumb-dropzone:hover, .thumb-dropzone.drag-over {
  border-color: var(--ink);
  background: var(--paper-2);
}

.thumb-drop-icon {
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.thumb-drop-text {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
}

.thumb-drop-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.thumb-link {
  color: var(--accent);
  text-decoration: underline;
}

.thumb-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
}

.thumb-preview img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.thumb-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15, 15, 15, 0.78);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* Advanced section */
.advanced-section {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
  overflow: hidden;
}

.advanced-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  user-select: none;
  text-transform: none;
  letter-spacing: 0;
}

.advanced-section summary::-webkit-details-marker { display: none; }
.advanced-section summary::marker { display: none; }

.advanced-chevron {
  transition: transform 200ms;
  color: var(--ink-muted);
}

.advanced-section[open] .advanced-chevron {
  transform: rotate(180deg);
}

.advanced-section[open] {
  background: var(--paper-2);
}

.advanced-section[open] > summary {
  border-bottom: 1px solid var(--hairline);
}

.advanced-section .field {
  padding: 14px 14px 0;
}

.advanced-section .field:last-of-type {
  padding-bottom: 14px;
}

.toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}

.toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

/* Form actions */
.form-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn-analyze {
  flex: 1;
  min-width: 200px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
}

.btn-save-idea {
  min-height: 48px;
  font-size: 13px;
}

.form-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 16px;
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
  background: var(--paper);
}

.empty-state svg { color: var(--ink-faint); }

.empty-state-text {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0;
}

/* Hero score (new result hero) */
.hero-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 20px 28px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  margin-bottom: 16px;
  text-align: center;
}

.hero-score-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.hero-score-numeral {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  font-feature-settings: "tnum", "calt" 0;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.hero-score-num {
  font-size: clamp(72px, 22vw, 132px);
  color: var(--ink);
  transition: color 200ms;
}

.hero-score-num.is-high { color: var(--accent); }
.hero-score-num.is-mid  { color: var(--ink); }
.hero-score-num.is-low  { color: var(--ink-muted); }

.hero-score-denom {
  font-size: clamp(18px, 4.5vw, 22px);
  font-weight: 500;
  color: var(--ink-muted);
  opacity: 0.62;
}

.hero-score-context {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
}

.hero-score-context strong { color: var(--accent); font-weight: 600; }

.hero-progress {
  width: 100%;
  max-width: 320px;
  height: 4px;
  background: var(--paper-2);
  border-radius: 999px;
  overflow: hidden;
}

.hero-progress-fill {
  height: 100%;
  background: var(--ink);
  transition: width 800ms cubic-bezier(0.2, 0, 0, 1);
}

.hero-progress-fill.is-high { background: var(--accent); }

/* Sub-scores row */
.sub-scores {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}

.sub-score {
  background: var(--paper);
  padding: 14px 8px;
  text-align: center;
}

.sub-score-num {
  font-family: var(--font-display);
  font-feature-settings: "tnum", "calt" 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 4px;
}

@media (min-width: 600px) {
  .sub-score-num { font-size: 32px; }
  .sub-score { padding: 18px 12px; }
}

.sub-score-num.is-high { color: var(--accent); }
.sub-score-num.is-mid  { color: var(--ink); }
.sub-score-num.is-low  { color: var(--ink-muted); }

.sub-score-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

@media (min-width: 600px) {
  .sub-score-label { font-size: 11px; }
}

/* History accordion */
.history-row {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px 0;
  transition: color 120ms;
}

.history-toggle:hover { color: var(--ink); }

#historyArrow { transition: transform 200ms; color: var(--ink-muted); }

.history-row.is-open #historyArrow { transform: rotate(90deg); }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.history-full-link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  transition: color 120ms, border-color 120ms;
}

.history-full-link:hover {
  color: var(--ink);
  border-bottom-color: var(--hairline-bold);
}

/* Skeleton loader */
.skel {
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: skel-pulse 1.4s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes skel-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skel-block { height: 16px; margin-bottom: 8px; }
.skel-block.lg    { height: 96px; }
.skel-block.md    { height: 48px; }
.skel-block.short { width: 60%; }

.results-skeleton {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

/* Stagger fade-in for prose blocks */
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-stagger { animation: stagger-in 320ms ease-out both; }
.fade-stagger:nth-child(1) { animation-delay:   0ms; }
.fade-stagger:nth-child(2) { animation-delay:  80ms; }
.fade-stagger:nth-child(3) { animation-delay: 160ms; }
.fade-stagger:nth-child(4) { animation-delay: 240ms; }
.fade-stagger:nth-child(5) { animation-delay: 320ms; }
.fade-stagger:nth-child(6) { animation-delay: 400ms; }
.fade-stagger:nth-child(7) { animation-delay: 480ms; }

/* Mobile sidebar lock body scroll when open */
body.sidebar-locked { overflow: hidden; }

/* Scroll-to-results focus styling */
/* Smooth scrolling is the default. Flipped from the previous opt-in style:
   the majority of users want motion, and accessibility guidance treats
   motion as the default with `prefers-reduced-motion: reduce` opting out. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Kill animations + transitions for users who've expressed motion sensitivity
     at the OS level. Matches the WCAG 2.3.3 (Animation from Interactions)
     guidance — the page is still functional without them. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Focus ring — keyboard-visible only.
   Replaces the scattered `:focus { outline: none }` pattern across the
   codebase. Uses :focus-visible so mouse users don't see rings on click,
   but keyboard users get a clear 2-px brand-red indicator with a paper-
   colored offset that works on both white and gray surfaces.
   ────────────────────────────────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Inputs/textareas/selects already have a visible border — use box-shadow
   ring instead of outline so the ring sits inside their existing layout. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 0, 51, 0.18);
}

/* ============================================================================
   END Phase 2.2 Studio Dashboard
   ========================================================================== */

/* ============================================================================
   PHASE 2.4 — Final sweep: kill every lingering dark surface
   These rules sit at the very end so they win specificity wars without !important.
   Targets every hardcoded dark background, gradient text effect, and neon hue
   from the legacy stylesheet.
   ========================================================================== */

/* Upgrade menu dropdown — the dropdown was reading dark on non-free tiers */
.upgrade-menu-dropdown-inner {
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 15, 15, 0.10), 0 2px 6px rgba(15, 15, 15, 0.05);
  overflow: hidden;
  padding: 4px;
}

.upgrade-menu-dropdown button {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms;
}

.upgrade-menu-dropdown button:hover {
  background: var(--paper-2);
}

/* Override the global :focus-visible red outline on dropdown items. The
   ring was rendering AS IF the click had turned the background red — visually
   wrong on a list-item-style menu. Use a subtle inset box-shadow for keyboard
   nav instead so accessibility stays intact without the "selected red"
   appearance. */
.upgrade-menu-dropdown button:focus,
.upgrade-menu-dropdown button:focus-visible {
  outline: none;
  background: var(--paper-2);
  box-shadow: inset 2px 0 0 var(--accent);
}

.upgrade-menu-dropdown button:last-child { border-bottom: none; }

.upgrade-menu-dropdown em {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  font-style: normal;
  margin-left: 6px;
}

.upgrade-menu-section {
  padding: 8px 12px 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  background: transparent;
}

.upgrade-menu-section em.upgrade-menu-tag {
  font-family: var(--font-mono);
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.upgrade-menu-divider {
  height: 1px;
  background: var(--hairline);
  margin: 4px 0;
}

.upgrade-menu-trigger {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
}

/* Alerts — distinct, readable color states. Previous values used 5-6%
   background opacity that read as plain gray boxes; bumped saturation so
   warning/error/success are immediately recognizable from across the page. */
.alert {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--font-ui);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  border-left-width: 4px;
}

.alert-warning {
  background: #FFF7E6;
  border-color: #F5C24A;
  color: #6B4A00;
}
.alert-warning a { color: #6B4A00; font-weight: 700; text-decoration: underline; }

.alert-info {
  background: #EAF4FF;
  border-color: #6FA8E0;
  color: #114B86;
}
.alert-info a { color: #114B86; font-weight: 700; text-decoration: underline; }

.alert-success {
  background: #E6F7EF;
  border-color: #4ABE82;
  color: #0F6E40;
}
.alert-success a { color: #0F6E40; font-weight: 700; text-decoration: underline; }

.alert-error {
  background: #FFEEEE;
  border-color: #E8606A;
  color: #8B1820;
}
.alert-error a { color: #8B1820; font-weight: 700; text-decoration: underline; }

/* Poster (the result hero) — flatten gradients and neon colors */
.poster {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}

.poster::before, .poster::after { display: none !important; }
.poster[data-tier]::before { display: none !important; }

.poster-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.poster-eyebrow::after {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  font-style: normal;
  opacity: 1;
}

.poster-title-edit {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
  font-family: var(--font-ui);
  font-weight: 600;
  border-radius: 8px;
  text-align: left;
  font-size: 18px;
}

.poster-title-edit:hover { border-color: var(--ink-muted); }

.poster-title-edit:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 0, 51, 0.10);
}

.poster-title-edit::placeholder { color: var(--ink-faint); opacity: 1; }

.poster-headline {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.poster[data-tier="strong"] .poster-headline { color: var(--accent); }
.poster[data-tier="okay"]   .poster-headline { color: var(--ink); }
.poster[data-tier="weak"]   .poster-headline { color: var(--ink-muted); }

.poster-score {
  font-family: var(--font-display);
  font-feature-settings: "tnum", "calt" 0;
  font-weight: 800;
  letter-spacing: -0.04em;
  /* Kill the gradient text effect — solid color on paper */
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}

.poster[data-tier="strong"] .poster-score {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

.poster-vary-delta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 2px 6px;
}

.poster-subtext {
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
}

.poster-subtext-line { color: var(--ink-soft); }

.poster-state, .poster-state-msg {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
}

.poster-state-msg strong { color: var(--accent); }

.poster-state-revert,
.poster-state-actions button {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}

.poster-state-revert:hover,
.poster-state-actions button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* .poster-vary-bar styles unified into the canonical block above —
   brand red fill on paper-3 track, no per-tier overrides. The verdict
   tag color already conveys tier; the bar's job is pure magnitude. */

/* Poster chips (insight pills) */
.poster-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.poster-chip {
  background: var(--paper-2);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}

.poster-chip:hover { border-color: var(--ink); color: var(--ink); }

.poster-chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.poster-chip-hurting {
  color: var(--accent);
  border-color: rgba(255, 0, 51, 0.24);
}
.poster-chip-hurting.is-active {
  background: var(--accent);
  color: var(--paper);
}

.poster-chip-helping {
  color: var(--ink);
  border-color: var(--hairline-bold);
}

.poster-chip-icon { display: inline-block; margin-right: 4px; }

.poster-chip-detail {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.poster-chip-detail-headline { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.poster-chip-detail-action { color: var(--ink-soft); }

/* Pre-cards (intent / type strip) */
.pre-card {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

.pre-card-label {
  font-family: var(--font-ui);
  color: var(--ink-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pre-card-value { color: var(--ink); font-family: var(--font-ui); }
.pre-card-sub { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }

/* Share modal overlay — soften the backdrop */
.share-modal-overlay {
  background: rgba(15, 15, 15, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.share-modal {
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 64px rgba(15, 15, 15, 0.12);
}

.share-modal-title {
  font-family: var(--font-ui);
  color: var(--ink);
  font-weight: 600;
}

.share-modal-close {
  color: var(--ink-muted);
  border-radius: 6px;
}
.share-modal-close:hover { background: var(--paper-2); color: var(--ink); }

/* Share buttons — kill the purple gradient */
.share-btn-new {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: none;
}
.share-btn-new:hover { background: var(--ink-soft) !important; }

/* Make the .btn-primary global rule consistent — was a red linear-gradient */
.btn-primary {
  background: var(--accent) !important;
  color: var(--paper) !important;
  border: 1px solid var(--accent) !important;
}
.btn-primary:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent-soft) !important;
}

/* Result text — Inter not legacy default */
.result-card, .result-card * { color: var(--ink); }
.result-card { background: var(--paper); border: 1px solid var(--hairline); }

/* Studio banner (Connect Studio prompt) */
.studio-banner-row, .studio-banner {
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
  border-radius: 8px;
}

/* Step indicator override — flatten any tier glow */
.step-dot {
  box-shadow: none !important;
}

/* History list rows (the recent predictions accordion items) */
.history-item {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  text-decoration: none;
}
.history-item:hover { border-color: var(--hairline-bold); background: var(--paper-2); }
.history-item.active {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.history-item .h-score {
  font-family: var(--font-display);
  font-feature-settings: "tnum";
  font-weight: 700;
  color: var(--ink);
}
.history-item .h-title { color: var(--ink-soft); font-family: var(--font-ui); font-size: 13px; }
.history-item .h-date { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }

/* Make sure all generic var(--surface) dark surfaces flip light */
[class*="-card"], [class*="-banner"], [class*="-section"] {
  background-color: var(--paper);
}

/* Body should inherit warm-paper white, not the legacy dark */
body { background: var(--paper) !important; color: var(--ink) !important; }

/* Footer one-final-time fix */
footer { background: transparent; color: var(--ink-muted); }
footer a { color: var(--ink-muted); }

/* Kill text-shadow / box-shadow on key surfaces */
.poster, .result-card, .ab-header, .ab-rank-row, .ab-winner, .pred-card,
.stat-box, .uw-tier-card, .acct-section, .upgrade-wall,
.demo-result-card, .upgrade-menu-dropdown-inner {
  text-shadow: none;
}

/* ============================================================================
   END final sweep
   ========================================================================== */

/* ── Studio gate (predict + compare) ──────────────────────────────────────
   Replaces #predictForm when the signed-in user hasn't connected Studio.
   Visually quiet — paper background, brand-red CTA, no urgency. The
   purpose is to make Studio-connect feel like the next obvious step, not
   to nag. Matches the beta-wall treatment from earlier in style.css. */
.studio-gate {
  background: var(--paper);
  border: 1px solid var(--hairline, var(--border));
  border-radius: 16px;
  padding: 2.2rem 1.6rem;
  text-align: center;
  margin-bottom: 1.5rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.studio-gate-icon {
  font-size: 2.4rem;
  margin-bottom: 0.6rem;
  opacity: 0.85;
}
.studio-gate-headline {
  font-family: var(--font-ui);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.6rem;
  line-height: 1.25;
}
.studio-gate-sub {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--ink-muted, #555);
  line-height: 1.5;
  margin: 0 auto 1.25rem;
  max-width: 460px;
}
/* Step 9 — benefit list. 3 short value bullets between the sub and the
   primary CTA, so the gate reads as "here's what you unlock" instead of
   "here's the wall." Each bullet is icon + text in a checklist-style row,
   left-aligned inside the centered card. */
.studio-gate-benefits {
  list-style: none;
  padding: 0;
  margin: 0 auto 1.5rem;
  max-width: 420px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.studio-gate-benefit {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--ink, #1a1a1a);
  line-height: 1.4;
}
.studio-gate-benefit-check {
  color: #1a8a3b;
  font-weight: 800;
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
}
.studio-gate .btn {
  min-width: 240px;
}
/* Step 9 — secondary "not ready" exit ramp. Sits between the primary
   Connect button and the privacy disclaimer. Keeps hesitant users
   in-funnel by offering the no-auth sandbox path instead of bouncing. */
.studio-gate-alt {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--ink-muted, #666);
  margin: 0.9rem auto 0;
  max-width: 460px;
}
.studio-gate-alt a {
  color: var(--brand, #FF0033);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.studio-gate-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted, #777);
  line-height: 1.5;
  margin: 1.4rem auto 0;
  max-width: 480px;
}
.studio-gate-foot a {
  color: var(--brand, #FF0033);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Workspace (/ideas) — grid, cards, modal, new-idea form ────────────────
   The planning surface for in-flight video ideas. Visual language mirrors
   the verdict engine (HIT/MAYBE/FLOP chips, tier-tinted accents) so the
   /ideas page reads as continuous with /predict — same product, different
   timing. See [[beta-graduation]] for the strategic context.

   IMPORTANT: class names are scoped to /ideas only — they don't share
   selectors with .ab-* (Title Compare) or .fa-* (full-analysis sections)
   to keep blast-radius small if we restyle one without the other. */

/* New-idea inline form at top of page */
.ideas-new {
  background: var(--paper);
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.5rem;
}
.ideas-new-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.ideas-new-title {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.ideas-new-collapse {
  background: none;
  border: none;
  color: var(--ink-muted, #666);
  font-size: 12px;
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.ideas-new-collapse:hover { color: var(--text); }
.ideas-new-form { display: flex; flex-direction: column; gap: 0.75rem; }
.ideas-new-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.25rem;
}
.ideas-new-status {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted, #666);
}

/* ── Retrospective panel (inside edit modal) ──────────────────────────────
   Shows after the user links an idea to a published video. Three render
   states: empty (no link / sync pending), early (1-6 days), stable (7+).
   Two-column predicted-vs-actual grid + per-metric strip. Comparison
   chip ("matched"/"outperformed"/"underperformed") in the header. */
.retrospective-panel {
  background: var(--paper);
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-top: 0.6rem;
}
.retro-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted, #666);
  line-height: 1.5;
}
.retro-empty strong { color: var(--text); }
.retro-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.retro-title {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.retro-maturity {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted, #666);
}
.retro-cmp {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
}
.retro-cmp-matched        { background: rgba(0,0,0,0.06);            color: var(--text); }
.retro-cmp-outperformed   { background: rgba(46, 233, 155, 0.15);    color: #1a8f5e; }
.retro-cmp-underperformed { background: rgba(255, 77, 109, 0.15);    color: #b32a45; }

.retro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.retro-col {
  background: var(--paper-2, rgba(0,0,0,0.025));
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  text-align: center;
}
.retro-col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted, #888);
  margin-bottom: 0.3rem;
}
.retro-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.35rem;
}
.retro-chip-hit   { background: rgba(46, 233, 155, 0.15); color: #1a8f5e; }
.retro-chip-maybe { background: rgba(255, 179, 71, 0.18); color: #a26a0f; }
.retro-chip-flop  { background: rgba(255, 77, 109, 0.15); color: #b32a45; }
.retro-score {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 900;
  font-feature-settings: "tnum";
  letter-spacing: -0.5px;
}
.retro-score[data-tier="strong"] { color: #2EE99B; }
.retro-score[data-tier="okay"]   { color: #FFB347; }
.retro-score[data-tier="weak"]   { color: #FF4D6D; }
.retro-of {
  font-size: 0.65rem;
  color: var(--ink-muted, #888);
  font-weight: 600;
  margin-left: 0.15rem;
}
.retro-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  padding: 0.55rem 0.2rem 0;
  border-top: 1px dashed var(--hairline, var(--border));
}
.retro-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}
.retro-metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted, #888);
}
.retro-metric-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
}
.retro-link {
  margin-top: 0.55rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
}
.retro-link a {
  color: var(--brand, #FF0033);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Live verdict — debounced preview of cached_score before save. Lives
   above the Create / Save button so users see what they're committing
   to. Mirrors the verdict-engine color system (HIT green / MAYBE
   amber / FLOP red) so the live state reads as continuous with the
   /predict result page and the grid card chips. */
.ideas-live-verdict {
  background: var(--paper);
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  margin-top: 0.4rem;
  font-family: var(--font-ui);
}
.ideas-live-loading {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted, #666);
}
.ideas-live-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.ideas-live-head[data-tier="strong"] {
  /* slight tint on the box when the verdict is HIT */
}
.ideas-live-verdict-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 5px;
}
.ideas-live-verdict-chip-hit   { background: rgba(46, 233, 155, 0.15); color: #1a8f5e; }
.ideas-live-verdict-chip-maybe { background: rgba(255, 179, 71, 0.18); color: #a26a0f; }
.ideas-live-verdict-chip-flop  { background: rgba(255, 77, 109, 0.15); color: #b32a45; }
.ideas-live-score {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 900;
  font-feature-settings: "tnum";
  letter-spacing: -1px;
  line-height: 1;
}
.ideas-live-score[data-tier="strong"] { color: #2EE99B; }
.ideas-live-score[data-tier="okay"]   { color: #FFB347; }
.ideas-live-score[data-tier="weak"]   { color: #FF4D6D; }
.ideas-live-of {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted, #666);
}
.ideas-live-reasons {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--hairline, var(--border));
}
.ideas-live-reason {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.85rem;
  line-height: 1.4;
}
.ideas-live-reason-icon {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  min-width: 0.8em;
  text-align: center;
}
.ideas-live-reason-positive .ideas-live-reason-icon { color: #1a8f5e; }
.ideas-live-reason-negative .ideas-live-reason-icon { color: #b32a45; }
.ideas-live-reason-neutral  .ideas-live-reason-icon { color: var(--ink-muted, #666); }
.ideas-live-reason-text { color: var(--text); }
/* Read-only channel readout — replaces the old "Channel size" dropdown.
   Soft brand tint so it reads as info, not a field the user can edit.
   See main.py:_derive_channel_size_from_studio for the data path. */
.ideas-new-channel {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted, #666);
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  border: 1px solid var(--hairline, var(--border));
}
.ideas-modal-channel {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted, #666);
  margin: -0.3rem 0 0.2rem;
}

/* Filter pills */
.ideas-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.ideas-filter {
  border: 1px solid var(--hairline, var(--border));
  background: var(--paper);
  color: var(--ink-muted, #666);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ideas-filter:hover { color: var(--text); }
.ideas-filter.is-active {
  background: var(--text);
  border-color: var(--text);
  color: var(--paper);
}

/* Grid + cards. Cards are tappable on mobile, hover-lift on desktop. The
   data-tier attribute drives the left-stripe color (strong/okay/weak). */
.ideas-grid-wrap { margin-top: 0.4rem; }
.ideas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}
.idea-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline, var(--border));
  border-radius: 12px;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 130px;
}
/* Cards with thumbnails get the image flush to the top edge — the
   internal padding only applies to the text below. The wrapper takes
   the negative-margin trick so the image bleeds to the card border. */
.idea-card.has-thumb {
  padding-top: 0;
}
.idea-card-thumb-wrap {
  margin: 0 -1rem 0.5rem -1.1rem;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-2, rgba(0,0,0,0.04));
}
.idea-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.idea-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
}
.idea-card[data-tier="strong"]::before { background: #2EE99B; }
.idea-card[data-tier="okay"]::before   { background: #FFB347; }
.idea-card[data-tier="weak"]::before   { background: #FF4D6D; }
.idea-card:hover {
  border-color: var(--text);
  transform: translateY(-1px);
}
.idea-card[data-pinned="1"] {
  border-color: var(--brand, #FF0033);
}

.idea-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.idea-card-verdict {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
}
.idea-card-verdict-hit   { background: rgba(46, 233, 155, 0.15); color: #1a8f5e; }
.idea-card-verdict-maybe { background: rgba(255, 179, 71, 0.18); color: #a26a0f; }
.idea-card-verdict-flop  { background: rgba(255, 77, 109, 0.15); color: #b32a45; }
.idea-card-score {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 900;
  font-feature-settings: "tnum";
  letter-spacing: -1px;
  line-height: 1;
}
.idea-card-score[data-tier="strong"] { color: #2EE99B; }
.idea-card-score[data-tier="okay"]   { color: #FFB347; }
.idea-card-score[data-tier="weak"]   { color: #FF4D6D; }
.idea-card-title {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.idea-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted, #666);
}
/* Niche is the primary metadata (drives the model's niche-aware features)
   — slightly emphasized text. Format is the secondary tag. Keep both
   muted; the card hero is the score + verdict, not these. */
.idea-card-niche  { font-weight: 600; color: var(--text); }
.idea-card-format { opacity: 0.85; }
.idea-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
}
.idea-card-status {
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}
.idea-card-status-draft         { background: rgba(0,0,0,0.05); color: var(--ink-muted, #666); }
.idea-card-status-ready_to_film { background: rgba(46, 233, 155, 0.12); color: #1a8f5e; }
.idea-card-status-filmed        { background: rgba(255, 179, 71, 0.18); color: #a26a0f; }
.idea-card-status-published     { background: rgba(255, 0, 51, 0.10); color: var(--brand, #FF0033); }
.idea-card-time { color: var(--ink-muted, #888); }

/* Empty state */
.ideas-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1.5px dashed var(--hairline-strong, var(--border));
  border-radius: 14px;
  background: var(--paper-2, var(--paper));
}
.ideas-empty-icon { font-size: 2.4rem; margin-bottom: 0.5rem; }
.ideas-empty-title {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.4rem;
}
.ideas-empty-sub {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--ink-muted, #666);
  max-width: 480px;
  margin: 0 auto 1.25rem;
  line-height: 1.5;
}
.ideas-empty-ctas {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ── Edit modal ─────────────────────────────────────────────────────────── */
.ideas-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 1rem 2rem;
  overflow-y: auto;
}
.ideas-modal-overlay.is-open { display: flex; }
body.modal-locked { overflow: hidden; }
.ideas-modal {
  background: var(--paper);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  padding: 1.5rem 1.4rem 1.4rem;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.ideas-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--ink-muted, #666);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  line-height: 1;
}
.ideas-modal-close:hover { color: var(--text); }
.ideas-modal-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding-right: 2rem; /* breathing room for close button */
}
.ideas-modal-verdict {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
}
.ideas-modal-verdict-hit   { background: rgba(46, 233, 155, 0.15); color: #1a8f5e; }
.ideas-modal-verdict-maybe { background: rgba(255, 179, 71, 0.18); color: #a26a0f; }
.ideas-modal-verdict-flop  { background: rgba(255, 77, 109, 0.15); color: #b32a45; }
.ideas-modal-score {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 900;
  font-feature-settings: "tnum";
  color: var(--text);
}
.ideas-modal-score[data-tier="strong"] { color: #2EE99B; }
.ideas-modal-score[data-tier="okay"]   { color: #FFB347; }
.ideas-modal-score[data-tier="weak"]   { color: #FF4D6D; }

.ideas-modal-form { display: flex; flex-direction: column; gap: 0.75rem; }
.ideas-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
/* Right-side action group: "Run full prediction" + Save sit together,
   visually paired as the positive-action side. .ideas-modal-actions
   itself uses space-between, so this div anchors right while Delete
   anchors left. On narrow viewports (<480px) the parent wraps and
   this group falls below Delete — still readable, just stacked. */
.ideas-modal-actions-right {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ideas-modal-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted, #666);
  text-align: right;
  margin: 0.4rem 0 0;
  min-height: 1.2em;
}

/* ── Beta-mode banner + beta-aware upgrade walls ────────────────────────────
   Persistent thin strip rendered at top-of-body when the server is in
   BETA_MODE. Soft green tint (calibration / "growing" tone), uses brand
   palette tokens so theming stays consistent. See app.js:renderBetaBanner.
   [[beta-graduation]] explains the strategic context. */
.beta-banner {
  width: 100%;
  background: linear-gradient(90deg, rgba(46, 233, 155, 0.10), rgba(46, 233, 155, 0.05));
  border-bottom: 1px solid rgba(46, 233, 155, 0.30);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  font-family: var(--font-ui);
  z-index: 50;
  position: relative;
}
.beta-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  text-align: center;
}
.beta-banner strong {
  font-weight: 700;
  color: var(--text);
}
.beta-banner-link {
  color: var(--brand, #FF0033);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.beta-banner-link:hover { opacity: 0.8; }
/* Countdown chip — small visual emphasis on the deadline. Appears in the
   last 60 days of beta. Same brand-red as links so the urgency reads
   without introducing a new color. */
.beta-banner-countdown {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-feature-settings: "tnum";
  color: var(--brand, #FF0033);
  margin-left: 0.15rem;
}

/* Beta-aware upgrade wall — replaces the Stripe pricing tiers when beta is
   on. Visually distinct (soft green border) so it doesn't read as a
   paywall; the CTA shifts to "connect Studio" instead of "checkout." */
.upgrade-wall.beta-wall {
  border: 1px solid rgba(46, 233, 155, 0.30);
  background:
    radial-gradient(circle at top right, rgba(46, 233, 155, 0.05), transparent 55%),
    var(--paper);
}
.upgrade-wall.beta-wall .uw-eyebrow {
  color: rgba(30, 130, 90, 0.95);
  background: rgba(46, 233, 155, 0.12);
}

/* ── WS3 — borderline archive confirmation modal ─────────────────────
   Fires only when archiving an idea whose cached_score is in the
   Below Average (30-55) or Average (55-70) band. Shape mirrors the
   ideas-modal pattern (same overlay class, same close affordance) so
   it inherits backdrop + keyboard handling. */
.archive-borderline-modal {
  max-width: 28rem;
  padding: 1.4rem 1.6rem;
}
.archive-borderline-body {
  text-align: center;
  margin-top: 0.5rem;
}
.archive-borderline-headline {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}
.archive-borderline-score {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.archive-borderline-score strong {
  color: var(--ink);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  font-feature-settings: 'tnum';
}
.archive-borderline-evidence {
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0 0 0.9rem;
  line-height: 1.5;
  background: var(--paper-3);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
}
.archive-borderline-question {
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.archive-borderline-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1rem;
}
.archive-borderline-actions .btn {
  min-width: 8rem;
}

/* ── WS2 — workspace outcome surfaces ──────────────────────────────
   "resolved" chip on idea cards whose linked prediction has a real
   outcome. Counter line above the grid summarizing how many ideas
   are ready to retrospect. Both are pull-only (no notification) per
   the beta-phase decision. */
.idea-card-resolved {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  padding: 0.18rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1f6f2c;
  background: rgba(28, 161, 64, 0.10);
  border-radius: 999px;
  text-transform: lowercase;
}
.idea-card.has-outcome {
  /* Subtle border accent so resolved cards stand out in the grid even
     before the badge is read. Stays compatible with the ::before tier
     stripe. */
  border-color: rgba(28, 161, 64, 0.25);
}

.ideas-outcomes-counter {
  font-size: 0.92rem;
  color: var(--ink);
  background: rgba(28, 161, 64, 0.06);
  border: 1px solid rgba(28, 161, 64, 0.18);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  margin: 0 0 1rem;
  line-height: 1.45;
}
.ideas-outcomes-counter strong {
  color: #1f6f2c;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
}

/* ════════════════════════════════════════════════════════════════════
   ML-only diagnosis panel (Tier 1 Week 4 — shipped 2026-05-25)
   ════════════════════════════════════════════════════════════════════
   Sits between the verdict hero and the long-form analysis. Surfaces
   per-category SHAP attribution, real cohort gaps, and counterfactual
   re-prediction lifts. Every claim is ML/data-derived; the UI here
   renders the diagnosis structure verbatim from /api/predict's
   `diagnosis` field (see ml_model.compute_diagnosis). Zero Claude
   prose in this surface — that's the architectural rule. */

.diag-panel {
  margin: 1.25rem 0;
  padding: 1rem 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
}
.diag-header {
  margin-bottom: 0.5rem;
}
.diag-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.diag-subtitle {
  font-size: 0.78rem;
  color: var(--muted, #6b7280);
  margin: 0.15rem 0 0;
  font-style: italic;
}

/* Summary row — baseline / score / gap */
.diag-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.85rem;
  background: #f9fafb;
  border-radius: 8px;
  font-size: 0.85rem;
}
.diag-summary-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.diag-summary-k {
  color: var(--muted, #6b7280);
  font-size: 0.78rem;
}
.diag-summary-v {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  font-feature-settings: 'tnum';
}
.diag-summary-sep {
  color: var(--muted, #6b7280);
  opacity: 0.5;
}
.diag-gap-neg { color: #b91c1c; }
.diag-gap-pos { color: #1f6f2c; }

/* Category grid — 2-col on desktop, 1-col on mobile */
.diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
}

.diag-cat {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}
.diag-cat-neg {
  border-color: rgba(185, 28, 28, 0.25);
  background: rgba(185, 28, 28, 0.025);
}
.diag-cat-pos {
  border-color: rgba(31, 111, 44, 0.25);
  background: rgba(31, 111, 44, 0.025);
}

.diag-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}
.diag-cat-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.diag-cat-cost {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-feature-settings: 'tnum';
}
.diag-cat-cost-neg {
  background: rgba(185, 28, 28, 0.1);
  color: #b91c1c;
}
.diag-cat-cost-pos {
  background: rgba(31, 111, 44, 0.1);
  color: #1f6f2c;
}
.diag-cat-cost-neutral {
  background: rgba(100, 116, 139, 0.08);
  color: #475569;
}

.diag-facts {
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.45;
}
.diag-facts li {
  padding: 0.2rem 0;
}
.diag-fact-label {
  color: var(--muted, #6b7280);
}

/* Counterfactual block — "If you changed X → +N pts" */
.diag-cf {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border, #e5e7eb);
}
.diag-cf-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  margin: 0 0 0.3rem;
}
.diag-cf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.diag-cf-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  background: rgba(31, 111, 44, 0.04);
  border-radius: 6px;
  font-size: 0.83rem;
}
.diag-cf-change {
  flex: 1;
}
.diag-cf-lift {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  color: #1f6f2c;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}

.diag-cat-note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted, #6b7280);
}

/* ════════════════════════════════════════════════════════════════════
   Arena — Battle Mode (multi-variant pre-publish decision tool)
   ════════════════════════════════════════════════════════════════════
   Shipped Phase 2 of the Battle Arena (see project_arena_battle_xray_plan
   in memory). Three states share the same page:
     1. .arena-setup   — variant uploaders + channel context
     2. .arena-loading — animated spinner during /api/battle
     3. .arena-results — winner banner + ranked variant cards
   Mobile-first: each variant card stacks vertically, results grid wraps. */

.arena-setup,
.arena-loading,
.arena-results {
  margin-top: 1rem;
}
/* Override: explicit display rules (e.g. .arena-loading flex centering)
   beat the user-agent [hidden] { display: none } rule. Force [hidden]
   to win so the view-state toggling in arena.js works as expected. */
.arena-setup[hidden],
.arena-loading[hidden],
.arena-results[hidden] {
  display: none !important;
}

/* ── Channel context strip ── */
.arena-channel-context {
  margin-bottom: 1.25rem;
}
.arena-context-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
@media (max-width: 720px) {
  .arena-context-row { grid-template-columns: 1fr; }
}
.seg-control-compact { font-size: 0.85rem; }

/* ── Variant uploader grid ── */
.arena-variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.875rem;
  margin-bottom: 1rem;
}
.arena-variant-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, #fff);
}
.arena-variant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arena-variant-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.arena-variant-letter {
  color: var(--text);
  font-size: 0.95rem;
  margin-left: 4px;
}
.arena-variant-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.arena-variant-remove:hover {
  color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.06);
}

.arena-variant-thumb-drop {
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 1rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
  color: var(--muted);
}
.arena-variant-thumb-drop:hover {
  border-color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.04);
}
.arena-variant-thumb-text {
  font-size: 0.85rem;
  margin-top: 0.375rem;
}
.thumb-link { color: var(--accent, #2563eb); text-decoration: underline; }

.arena-variant-thumb-preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
}
.arena-variant-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.arena-variant-thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  cursor: pointer;
}
.arena-variant-title {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.625rem;
  font-size: 0.9rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

/* ── Variant card entry animation — only on user-added cards.
   Initial pair + re-renders pass skipAnim=true and bypass this. */
.arena-variant-card-entering {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
}
.arena-variant-card-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 220ms ease-out, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Add-variant row (its own line, ghost style) ── */
.arena-add-row {
  display: flex;
  justify-content: center;
  margin-top: 0.625rem;
  margin-bottom: 1rem;
}
.arena-add-btn {
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.arena-add-btn:hover:not(:disabled) {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.04);
}
.arena-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Run-Battle row (its own line, primary action) ── */
.arena-run-row {
  margin-top: 0.5rem;
}
.arena-run-btn {
  width: 100%;
  padding: 0.875rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
}

/* ── Auto-detected sub pill (replaces manual input for Studio users) ── */
.arena-subs-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  background: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(22, 163, 74, 0.2);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  height: 38px;
  box-sizing: border-box;
}
.arena-subs-pill-icon {
  color: #16a34a;
  font-size: 0.6rem;
  line-height: 1;
}
.arena-subs-pill-text {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
}

/* ── Loading state ── */
.arena-loading {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}
.arena-loading-inner { text-align: center; max-width: 360px; }
.arena-loading-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent, #2563eb);
  animation: arena-spin 800ms linear infinite;
  margin: 0 auto 1rem;
}
@keyframes arena-spin { to { transform: rotate(360deg); } }
.arena-loading-text { font-weight: 500; margin: 0; }
.arena-loading-sub { font-size: 0.85rem; color: var(--muted); margin-top: 0.25rem; }

/* ── Results: winner banner ── */
.arena-winner-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.08), rgba(37, 99, 235, 0.06));
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 14px;
  margin-bottom: 1.25rem;
}
@media (max-width: 720px) {
  .arena-winner-banner { flex-direction: column; align-items: stretch; text-align: center; }
}
.arena-winner-trophy { font-size: 2rem; }
.arena-winner-body { flex: 1; }
.arena-winner-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.arena-winner-sub {
  color: var(--muted);
  font-size: 0.9rem;
}
.arena-winner-actions .btn { white-space: nowrap; }

/* ── Results grid ── */
.arena-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.arena-result-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 150ms, transform 150ms;
}
.arena-result-card.is-winner {
  border-color: rgba(22, 163, 74, 0.4);
  box-shadow: 0 4px 18px rgba(22, 163, 74, 0.12);
}
.arena-result-card.is-picked {
  border-color: var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.03);
}

.arena-result-rank-row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}
.arena-result-rank {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 1rem;
  color: var(--muted);
}
.arena-result-letter {
  font-weight: 600;
  font-size: 0.85rem;
  flex: 1;
}
.arena-result-score {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
}
.arena-tier-great .arena-result-score,
.arena-tier-good  .arena-result-score { color: #1f6f2c; }
.arena-tier-warning .arena-result-score { color: #b45309; }
.arena-tier-danger  .arena-result-score { color: #b91c1c; }
.arena-tier-neutral .arena-result-score { color: var(--text); }

.arena-result-verdict {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.arena-tier-great .arena-result-verdict,
.arena-tier-good  .arena-result-verdict { color: #1f6f2c; }
.arena-tier-warning .arena-result-verdict { color: #b45309; }
.arena-tier-danger  .arena-result-verdict { color: #b91c1c; }

.arena-result-cohort-badge {
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.arena-result-thumb-stack { display: flex; flex-direction: column; gap: 0.5rem; }
.arena-result-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}
.arena-result-thumb-big { width: 100%; height: 100%; object-fit: cover; display: block; }
.arena-result-thumb-mini-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--muted);
}
.arena-result-thumb-mini-label { font-family: 'Geist Mono', ui-monospace, monospace; }
.arena-result-thumb-mini  { width: 100px; height: 56px; object-fit: cover; border-radius: 4px; }
.arena-result-thumb-mini2 { width: 160px; height: 90px; object-fit: cover; border-radius: 4px; }

.arena-result-title {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}

.arena-result-similar { margin-top: 0.25rem; }
.arena-result-similar-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.375rem;
}
.arena-result-similar-empty { color: var(--muted); font-size: 0.8rem; }
.arena-result-similar-scroll {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}
.arena-similar-card {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 120ms;
}
.arena-similar-card:hover { transform: translateY(-2px); }
.arena-similar-thumb-wrap {
  position: relative;
  width: 130px;
  height: 73px;
  background: #f3f4f6;
  border-radius: 6px;
  overflow: hidden;
}
.arena-similar-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.arena-similar-sim {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 3px;
}
.arena-similar-meta { padding: 4px 0; }
.arena-similar-title {
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.arena-similar-stats {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
}

.arena-result-pick-btn { width: 100%; margin-top: 0.25rem; }

.arena-results-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ── Pick confirmation banner (after Save-to-Ideas succeeds) ── */
.arena-pick-confirm {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(22, 163, 74, 0.3);
  border-radius: 12px;
  margin-bottom: 1rem;
}
@media (max-width: 720px) {
  .arena-pick-confirm { flex-direction: column; align-items: stretch; text-align: center; }
}
.arena-pick-confirm-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #16a34a;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.arena-pick-confirm-body { flex: 1; }
.arena-pick-confirm-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.arena-pick-confirm-sub {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}
.arena-pick-confirm-actions {
  display: flex;
  gap: 0.5rem;
}
.arena-pick-confirm-actions .btn { white-space: nowrap; }
@media (max-width: 720px) {
  .arena-pick-confirm-actions { flex-direction: column; }
  .arena-pick-confirm-actions .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   Arena — Mode tabs (Battle | X-Ray)
   ════════════════════════════════════════════════════════════════════ */
.arena-tabs {
  display: flex;
  gap: 4px;
  margin: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.arena-tab {
  padding: 0.55rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
  margin-bottom: -1px;   /* overlap the parent border so active state aligns */
}
.arena-tab:hover { color: var(--text, #111); }
.arena-tab.is-active {
  color: var(--text, #111);
  border-bottom-color: var(--brand-red, #FF0033);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   X-Ray Mode (paste URL → reverse-engineer published video)
   ════════════════════════════════════════════════════════════════════ */
.arena-xray-setup {
  margin-top: 1rem;
}
.arena-xray-input-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.arena-xray-input-row input {
  flex: 1;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}
.arena-xray-niche-select {
  padding: 0.7rem 0.7rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
  min-width: 140px;
  flex-shrink: 0;
}
.arena-xray-input-row .arena-xray-run-btn {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .arena-xray-input-row { flex-direction: column; }
  .arena-xray-input-row .arena-xray-run-btn { width: 100%; }
  .arena-xray-niche-select { width: 100%; }
}

/* ── X-Ray loading shares the existing .arena-loading-spinner ── */
.arena-xray-loading {
  display: flex;
  justify-content: center;
  padding: 3rem 1rem;
}
.arena-xray-loading[hidden] { display: none !important; }
.arena-xray-setup[hidden]   { display: none !important; }
.arena-xray-results[hidden] { display: none !important; }
.arena-xray-niche-fallback[hidden] { display: none !important; }

/* ── X-Ray result card ── */
.xray-card {
  margin-top: 1rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
}

.xray-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
@media (max-width: 720px) {
  .xray-header { flex-direction: column; }
}
.xray-thumb {
  width: 200px;
  height: 113px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .xray-thumb { width: 100%; height: auto; aspect-ratio: 16/9; }
}
.xray-meta { flex: 1; min-width: 0; }
.xray-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  line-height: 1.35;
}
.xray-sub {
  font-size: 0.85rem;
  color: var(--muted, #6b7280);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
  margin-bottom: 0.45rem;
}
.xray-niche-row {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.xray-niche-tag,
.xray-bucket-tag,
.xray-format-tag {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

.xray-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 720px) {
  .xray-body { grid-template-columns: 1fr; }
}
/* X-Ray narrative — verdict-vs-reality headline + plain-English copy.
   Replaces the side-by-side predicted/actual percentile cards (creators were
   conflating the two numbers with the predict-mode score). */
.xray-narrative {
  padding: 1.2rem 1.4rem 1.3rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  text-align: center;
  margin: 0 auto 1rem;
  max-width: 760px;
}
.xray-narrative-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #6b7280);
  font-weight: 600;
}
.xray-narrative-headline {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.45rem;
  color: var(--ink);
}
.xray-narrative-reality {
  font-size: 1.02rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  color: var(--ink);
}
.xray-narrative-judgment {
  font-size: 0.95rem;
  margin-top: 0.7rem;
  color: var(--ink-muted, #4b5563);
  font-style: italic;
}
.xray-narrative.xray-tier-great { border-color: rgba(31, 111, 44, 0.30); background: rgba(31, 111, 44, 0.04); }
.xray-narrative.xray-tier-good  { border-color: rgba(31, 111, 44, 0.25); background: rgba(31, 111, 44, 0.03); }
.xray-narrative.xray-tier-warning { border-color: rgba(180, 83, 9, 0.28); background: rgba(180, 83, 9, 0.04); }
.xray-narrative.xray-tier-danger  { border-color: rgba(185, 28, 28, 0.28); background: rgba(185, 28, 28, 0.04); }
.xray-supporting-math {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.7rem;
  margin: 0 auto 1rem;
  font-size: 0.8rem;
  color: var(--ink-muted, #6b7280);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.xray-supp-sep { opacity: 0.4; }
.xray-section {
  padding: 0.85rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}
.xray-section-prediction.xray-tier-great { border-color: rgba(31, 111, 44, 0.3); background: rgba(31, 111, 44, 0.03); }
.xray-section-prediction.xray-tier-good  { border-color: rgba(31, 111, 44, 0.25); background: rgba(31, 111, 44, 0.02); }
.xray-section-prediction.xray-tier-warning { border-color: rgba(180, 83, 9, 0.25); background: rgba(180, 83, 9, 0.03); }
.xray-section-prediction.xray-tier-danger  { border-color: rgba(185, 28, 28, 0.25); background: rgba(185, 28, 28, 0.03); }
.xray-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  margin-bottom: 0.45rem;
}
.xray-pred-score {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.xray-tier-great .xray-pred-score, .xray-tier-good .xray-pred-score { color: #1f6f2c; }
.xray-tier-warning .xray-pred-score { color: #b45309; }
.xray-tier-danger .xray-pred-score  { color: #b91c1c; }
.xray-pred-verdict {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.xray-pred-rate {
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
}

.xray-actual-rank {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.xray-actual-meta {
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: baseline;
}

.xray-gap {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 10px;
}
.xray-gap-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
  margin-bottom: 0.35rem;
}
.xray-gap-text {
  font-size: 0.92rem;
  line-height: 1.45;
}
.xray-gap-foot {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
}

.xray-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}
@media (max-width: 720px) {
  .xray-actions { flex-direction: column; }
  .xray-actions .btn { width: 100%; }
}

/* ── Toast notifications ── */
.arena-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text, #111);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 150ms, transform 150ms;
  pointer-events: none;
  z-index: 9999;
  max-width: 90vw;
  text-align: center;
}
.arena-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.arena-toast-error { background: #b91c1c; }
.arena-toast-ok    { background: #1f6f2c; }