/* ═══════════════════════════════════════════════════════════════════════════
   ASYNTIS DESIGN SYSTEM — canonical token source
   ───────────────────────────────────────────────────────────────────────────
   All visual decisions originate here.

   RULES:
   • Never hardcode hex values in components — always use a token from :root.
   • Brand colours: Teal Green (product UI) + Orange–Purple accent (high-intent CTAs) + Accent Rose (marketing).
   • Teal: --teal-green-grad (fills) · --teal-green (text/icons). Accent: --accent-orange-purple-grad · --accent-rose.
   • Deprecated brand hex (never use): #168C84, var(--teal-green), var(--teal-green), var(--teal-green-to) — always --teal-green-* tokens.
   • Before commit: python3 scripts/fix_ui_brand_colors.py && bash scripts/check_ui_brand_colors.sh
   • Never add a new token without documenting it in the Design System page.
   • Favicons: master ui/assets/source/AIRepScore-favicon.png → scripts/generate_favicons.py
   • Do not create page-specific visual patterns when a shared component exists.
   • Only one primary action (btn / .btn-primary) per panel.
   • Destructive / reset actions must use .btn-danger styling.
   • Internal pipeline labels (AUTO, weak_signal, mapping_method) must not
     visually dominate analyst-facing content.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom webfonts ───────────────────────────────────────────────────────
   Display: Space Grotesk (via Google Fonts in index.html).
   UI/body: Inter.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Teal Green (brand gradient) — canonical ──
     60° from top-left #5CA6C9 → #3BC3A9 (matches logo AI icon block) */
  --teal-green-from:       #5CA6C9;
  --teal-green-to:         #3BC3A9;
  --teal-green:            #4CB9B9;   /* solid midpoint — text, icons, borders */
  --teal-green-grad:       linear-gradient(60deg, var(--teal-green-from) 0%, var(--teal-green-to) 100%);
  --teal-green-grad-hover: linear-gradient(60deg, #5299BA 0%, #35B59A 100%);
  --teal-green-bg:         #EBF5F9;   /* chips, selected rows, soft fills */
  --teal-green-bg-hover:   #D0EAF2;
  --teal-green-rgb:        76, 185, 185;

  /* Orange–Purple accent (marketing logo, high-intent CTAs) — see docs/DESIGN_SYSTEM.md */
  --accent-orange-purple-from: #E97045;
  --accent-orange-purple-to:   #8c287c;
  --accent-orange-purple-grad: linear-gradient(135deg, var(--accent-orange-purple-from) 0%, var(--accent-orange-purple-to) 100%);
  --accent-rose:               #CA5870;   /* hero “AI” accent text */

  /* decorative placeholders (cards, heroes) — never use #278A75 / #1A6B5A / #168C84 */
  --brand-grad-a:          linear-gradient(145deg, var(--teal-green-from) 0%, var(--teal-green-to) 100%);
  --brand-grad-b:          linear-gradient(145deg, var(--teal-green) 0%, var(--teal-green-to) 100%);
  --brand-grad-c:          linear-gradient(145deg, var(--teal-300) 0%, var(--teal-green-from) 100%);
  --brand-grad-banner:     linear-gradient(135deg, var(--teal-green-from) 0%, var(--teal-green-to) 100%);
  --brand-grad-hero:       linear-gradient(135deg, var(--teal-900) 0%, var(--teal-800) 40%, var(--teal-green-from) 75%, var(--teal-green-to) 100%);

  /* brand aliases — always reference --teal-green-* tokens */
  --asyntis-accent: var(--teal-green);
  --accent:         var(--teal-green);
  --accent-hover:   #32A892;
  --focus-ring:     rgba(92, 166, 201, 0.35);

  /* surface */
  --bg: #f9fafb;
  --bg-card: #ffffff;
  --ui-bg: #ffffff;
  --ui-bg-soft: #f9fafb;
  --input-bg: #ffffff;           /* form inputs, code blocks */
  --accent-light: #f0f4f8;       /* selected-row tint */
  --border-light: #f0f4f8;       /* section dividers, subtle separators */

  /* text */
  --text: #111111;
  --text-muted: #6b7280;
  --ui-text: #111111;
  --ui-muted: #6b7280;

  /* borders */
  --border: #e5e7eb;
  --ui-border: #e5e7eb;

  /* button primitives — primary uses brand gradient */
  --ui-primary:       var(--teal-green-grad);
  --ui-primary-hover: var(--teal-green-grad-hover);
  --ui-secondary-bg: #f3f4f6;
  --ui-secondary-hover: #e5e7eb;

  /* status */
  --ui-draft-bg: #f3f4f6;
  --ui-draft-text: #374151;
  --ui-validated-bg: #e6f4ff;
  --ui-validated-text: #1d4ed8;
  --ui-rejected-bg: #fef2f2;
  --ui-rejected-text: #b91c1c;

  /* error */
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #991b1b;

  --radius: 8px;

  /* Article + Knowledge Hub listing column (align list pages with blog body) */
  --article-page-max: 1200px;
  --article-page-pad-x: 60px;
  --radius-sm: 6px;
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", monospace;
  --font-display: 'Space Grotesk', var(--font-sans);

  /* ── Teal supporting tints (harmonized with Teal Green gradient) ── */
  --teal-50:  var(--teal-green-bg);
  --teal-100: #D0EAF2;
  --teal-200: #A5D4E4;
  --teal-300: #72C0D5;
  --teal-400: #51B5BE;
  --teal-500: var(--teal-green);
  --teal-600: #32A892;
  --teal-700: #278A75;
  --teal-800: #1A6B5A;
  --teal-900: #0F4539;

  /* ── Status palette (from style guide) ── */
  --color-positive:    #25C32E;
  --color-neutral:     #E58635;
  --color-negative:    #D74444;
  --color-win:         #25D215;
  --color-positive-bg: #e8f9e9;
  --color-neutral-bg:  #fdf3e7;
  --color-negative-bg: #fce8e8;

  /* ── 6-band score scale (AIRepScore + Brand Perception) — balanced v2 ── */
  /* Solid = text, dots, gauge strokes. Gradient = bars, fills, distribution. */
  --score-strong:           #21A154;
  --score-strong-grad:      linear-gradient(90deg, #47CF78, #3AC1B1);
  --score-strong-grad-from: #47CF78;
  --score-strong-grad-to:   #3AC1B1;
  --score-strong-bg:        #F1FDF6;
  --score-good:             #369769;
  --score-good-grad:        var(--teal-green-grad);
  --score-good-grad-from:   var(--teal-green-from);
  --score-good-grad-to:     var(--teal-green-to);
  --score-good-bg:          #EBF6F1;
  --score-moderate:         #6698BA;
  --score-moderate-grad:    linear-gradient(90deg, #D1E3F3, #98BDDD);
  --score-moderate-grad-from: #D1E3F3;
  --score-moderate-grad-to:   #98BDDD;
  --score-moderate-bg:      #EEF5FB;
  --score-below-avg:        #D37F19;
  --score-below-avg-grad:   linear-gradient(90deg, #FDDB6F, #F88D3A);
  --score-below-avg-grad-from: #FDDB6F;
  --score-below-avg-grad-to:   #F88D3A;
  --score-below-avg-bg:     #FFFBF5;
  --score-weak:             #D73B3B;
  --score-weak-grad:        linear-gradient(90deg, #FCA562, #E24A4A);
  --score-weak-grad-from:   #FCA562;
  --score-weak-grad-to:     #E24A4A;
  --score-weak-bg:          #FEF3F3;
  --score-very-weak:        #9D2C2C;
  --score-very-weak-grad:   linear-gradient(90deg, #E24F4F, #983F3F);
  --score-very-weak-grad-from: #E24F4F;
  --score-very-weak-grad-to:   #983F3F;
  --score-very-weak-bg:     #FDF2F2;
}

body.theme-dark {
  --score-strong:           #5DDB90;
  --score-strong-grad:      linear-gradient(90deg, #28BFA0, #38D4BE);
  --score-strong-grad-from: #28BFA0;
  --score-strong-grad-to:   #38D4BE;
  --score-strong-bg:        rgba(33, 161, 84, .135);
  --score-good:             #54BB87;
  --score-good-grad:        var(--teal-green-grad);
  --score-good-grad-from:   var(--teal-green-from);
  --score-good-grad-to:     var(--teal-green-to);
  --score-good-bg:          rgba(54, 151, 105, .135);
  --score-moderate:         #87B0D0;
  --score-moderate-grad:    linear-gradient(90deg, #B0CCEC, #82AAC8);
  --score-moderate-grad-from: #B0CCEC;
  --score-moderate-grad-to:   #82AAC8;
  --score-moderate-bg:      rgba(102, 152, 186, .135);
  --score-below-avg:        #E09248;
  --score-below-avg-grad:   linear-gradient(90deg, #E59248, #EE8838);
  --score-below-avg-grad-from: #E59248;
  --score-below-avg-grad-to:   #EE8838;
  --score-below-avg-bg:     rgba(211, 127, 25, .135);
  --score-weak:             #EF7C7C;
  --score-weak-grad:        linear-gradient(90deg, #FC9848, #E05050);
  --score-weak-grad-from:   #FC9848;
  --score-weak-grad-to:     #E05050;
  --score-weak-bg:          rgba(215, 59, 59, .135);
  --score-very-weak:        #EC9D9D;
  --score-very-weak-grad:   linear-gradient(90deg, #E85858, #942828);
  --score-very-weak-grad-from: #E85858;
  --score-very-weak-grad-to:   #942828;
  --score-very-weak-bg:     rgba(157, 44, 44, .145);

  --teal-green-from:       #6EB8D6;
  --teal-green-to:         #45D4B5;
  --teal-green:            #58C6C5;
  --teal-green-grad:       linear-gradient(60deg, var(--teal-green-from) 0%, var(--teal-green-to) 100%);
  --teal-green-grad-hover: linear-gradient(60deg, #5DA8C4 0%, #3BC4A3 100%);
  --teal-green-bg:         rgba(92, 166, 201, 0.12);
  --teal-green-bg-hover:   rgba(92, 166, 201, 0.2);
  --teal-green-rgb:        88, 198, 197;
  --accent-hover:          #45D4B5;
  --focus-ring:            rgba(110, 184, 214, 0.3);
}

/* ── Teal Green brand gradient — production utilities ── */
.bg-teal-green-grad     { background: var(--teal-green-grad); }
.text-teal-green        { color: var(--teal-green); }
.border-teal-green       { border-color: var(--teal-green); }
.stroke-teal-green-grad { stroke: url(#tealGreenGrad); }
.fill-teal-green-grad    { fill: url(#tealGreenGrad); }

/* ── 6-band score scale — production classes (Balanced v2.0) ─────────────── */
.score-very-weak     { color: var(--score-very-weak); }
.score-weak          { color: var(--score-weak); }
.score-below-average { color: var(--score-below-avg); }
.score-moderate      { color: var(--score-moderate); }
.score-good          { color: var(--score-good); }
.score-strong        { color: var(--score-strong); }
.score-minimal       { color: var(--score-very-weak); }

.cell-very-weak      { color: var(--score-very-weak);     background: var(--score-very-weak-bg); }
.cell-weak           { color: var(--score-weak);          background: var(--score-weak-bg); }
.cell-below-average  { color: var(--score-below-avg);      background: var(--score-below-avg-bg); }
.cell-moderate       { color: var(--score-moderate);      background: var(--score-moderate-bg); }
.cell-good           { color: var(--score-good);          background: var(--score-good-bg); }
.cell-strong         { color: var(--score-strong);        background: var(--score-strong-bg); }
.cell-minimal        { color: var(--score-very-weak);     background: var(--score-very-weak-bg); }

.air-hero-rating.score-very-weak,
.air-hero-rating.score-minimal,
.ov-hero-rating.score-very-weak { background: var(--score-very-weak-bg); color: var(--score-very-weak); }
.air-hero-rating.score-weak,
.ov-hero-rating.score-weak      { background: var(--score-weak-bg); color: var(--score-weak); }
.air-hero-rating.score-below-average,
.ov-hero-rating.score-below-average { background: var(--score-below-avg-bg); color: var(--score-below-avg); }
.air-hero-rating.score-moderate,
.ov-hero-rating.score-moderate  { background: var(--score-moderate-bg); color: var(--score-moderate); }
.air-hero-rating.score-good,
.ov-hero-rating.score-good      { background: var(--score-good-bg); color: var(--score-good); }
.air-hero-rating.score-strong,
.ov-hero-rating.score-strong    { background: var(--score-strong-bg); color: var(--score-strong); }

.air-gauge-arc.score-very-weak,
.ov-gauge-arc.score-very-weak   { stroke: url(#scoreGradVeryWeak); }
.air-gauge-arc.score-weak,
.ov-gauge-arc.score-weak        { stroke: url(#scoreGradWeak); }
.air-gauge-arc.score-below-average,
.ov-gauge-arc.score-below-average { stroke: url(#scoreGradBelowAvg); }
.air-gauge-arc.score-moderate,
.ov-gauge-arc.score-moderate    { stroke: url(#scoreGradModerate); }
.air-gauge-arc.score-good,
.ov-gauge-arc.score-good        { stroke: url(#scoreGradGood); }
.air-gauge-arc.score-strong,
.ov-gauge-arc.score-strong      { stroke: url(#scoreGradStrong); }
.air-gauge-arc.score-minimal    { stroke: url(#scoreGradVeryWeak); }

.trend-dot.score-very-weak     { fill: url(#scoreGradVeryWeak); }
.trend-dot.score-weak          { fill: url(#scoreGradWeak); }
.trend-dot.score-below-average { fill: url(#scoreGradBelowAvg); }
.trend-dot.score-moderate      { fill: url(#scoreGradModerate); }
.trend-dot.score-good          { fill: url(#scoreGradGood); }
.trend-dot.score-strong        { fill: url(#scoreGradStrong); }
.trend-dot.score-minimal       { fill: url(#scoreGradVeryWeak); }

.score-very-weak .air-dim-card-rating { background: var(--score-very-weak-bg); color: var(--score-very-weak); }
.score-weak .air-dim-card-rating      { background: var(--score-weak-bg); color: var(--score-weak); }
.score-below-average .air-dim-card-rating { background: var(--score-below-avg-bg); color: var(--score-below-avg); }
.score-moderate .air-dim-card-rating  { background: var(--score-moderate-bg); color: var(--score-moderate); }
.score-good .air-dim-card-rating      { background: var(--score-good-bg); color: var(--score-good); }
.score-strong .air-dim-card-rating    { background: var(--score-strong-bg); color: var(--score-strong); }
.score-minimal .air-dim-card-rating   { background: var(--score-very-weak-bg); color: var(--score-very-weak); }

.dim-chip-label.score-very-weak     { background: var(--score-very-weak-bg); color: var(--score-very-weak); }
.dim-chip-label.score-weak          { background: var(--score-weak-bg); color: var(--score-weak); }
.dim-chip-label.score-below-average { background: var(--score-below-avg-bg); color: var(--score-below-avg); }
.dim-chip-label.score-moderate      { background: var(--score-moderate-bg); color: var(--score-moderate); }
.dim-chip-label.score-good          { background: var(--score-good-bg); color: var(--score-good); }
.dim-chip-label.score-strong        { background: var(--score-strong-bg); color: var(--score-strong); }

.air-score-circle.score-very-weak     { background: var(--score-very-weak-bg); color: var(--score-very-weak); }
.air-score-circle.score-weak          { background: var(--score-weak-bg); color: var(--score-weak); }
.air-score-circle.score-below-average { background: var(--score-below-avg-bg); color: var(--score-below-avg); }
.air-score-circle.score-moderate      { background: var(--score-moderate-bg); color: var(--score-moderate); }
.air-score-circle.score-good          { background: var(--score-good-bg); color: var(--score-good); }
.air-score-circle.score-strong        { background: var(--score-strong-bg); color: var(--score-strong); }

.air-old-dim-rating.score-very-weak     { background: var(--score-very-weak-bg); color: var(--score-very-weak); }
.air-old-dim-rating.score-weak          { background: var(--score-weak-bg); color: var(--score-weak); }
.air-old-dim-rating.score-below-average { background: var(--score-below-avg-bg); color: var(--score-below-avg); }
.air-old-dim-rating.score-moderate      { background: var(--score-moderate-bg); color: var(--score-moderate); }
.air-old-dim-rating.score-good          { background: var(--score-good-bg); color: var(--score-good); }
.air-old-dim-rating.score-strong        { background: var(--score-strong-bg); color: var(--score-strong); }

.sca-score.score-very-weak     { color: var(--score-very-weak); }
.sca-score.score-weak          { color: var(--score-weak); }
.sca-score.score-below-average { color: var(--score-below-avg); }
.sca-score.score-moderate      { color: var(--score-moderate); }
.sca-score.score-good          { color: var(--score-good); }
.sca-score.score-strong        { color: var(--score-strong); }

/* Score numbers — always neutral (gradients only on arcs, bars, dots) */
.ov-score-num,
.ov-score-num[class*="score-"] {
  color: #111827;
  background: none;
  -webkit-text-fill-color: initial;
}
.ov-signal-score,
.ov-signal-score[class*="score-"],
.ov-signal-score.conf-high,
.ov-signal-score.conf-moderate,
.ov-signal-score.conf-low {
  color: #111827;
  background: none;
  -webkit-text-fill-color: initial;
}
.air-hero-score-num,
.air-hero-score-num[class*="score-"],
.dim-chip-score[class*="score-"],
.air-dim-card-score[class*="score-"] {
  color: inherit;
  background: none;
  -webkit-text-fill-color: initial;
}
.bp-radar-score,
.bp-radar-score[class*="score-"] {
  fill: #111827;
}

.ov-dim-dot.score-very-weak     { background: var(--score-very-weak-grad); }
.ov-dim-dot.score-weak          { background: var(--score-weak-grad); }
.ov-dim-dot.score-below-average { background: var(--score-below-avg-grad); }
.ov-dim-dot.score-moderate      { background: var(--score-moderate-grad); }
.ov-dim-dot.score-good          { background: var(--score-good-grad); }
.ov-dim-dot.score-strong        { background: var(--score-strong-grad); }

/* AI Confidence labels — same tokens as 6-band scale (Overview + model dimension pills) */
.ov-signal-rating.conf-high,
.ov-conf-model-val.conf-high,
.air-old-dim-rating.conf-high     { color: var(--score-good); }
.ov-signal-rating.conf-moderate,
.ov-conf-model-val.conf-moderate,
.air-old-dim-rating.conf-moderate { color: var(--score-moderate); }
.ov-signal-rating.conf-low,
.ov-conf-model-val.conf-low,
.air-old-dim-rating.conf-low      { color: var(--score-weak); }
.air-old-dim-rating.conf-high     { background: var(--score-good-bg); }
.air-old-dim-rating.conf-moderate { background: var(--score-moderate-bg); }
.air-old-dim-rating.conf-low      { background: var(--score-weak-bg); }

.ov-signal-rating.score-very-weak     { color: var(--score-very-weak); }
.ov-signal-rating.score-weak          { color: var(--score-weak); }
.ov-signal-rating.score-below-average { color: var(--score-below-avg); }
.ov-signal-rating.score-moderate      { color: var(--score-moderate); }
.ov-signal-rating.score-good          { color: var(--score-good); }
.ov-signal-rating.score-strong        { color: var(--score-strong); }

/* Model divergence bars */
.bar-low    { background: var(--score-good-grad); }
.bar-medium { background: var(--score-below-avg-grad); }
.bar-high   { background: var(--score-weak-grad); }

.ov-signal-div-level.score-weak      { color: var(--score-weak); }
.ov-signal-div-level.score-moderate  { color: var(--score-moderate); }
.ov-signal-div-level.score-good      { color: var(--score-good); }

.bp-balance-bar.score-strong,
.bp-tbl-bar.score-strong,
.bp-dist-bar--strong,
.bp-glance-bar.bp-bar-strong { background: var(--score-strong-grad); }
.bp-balance-bar.score-good,
.bp-tbl-bar.score-good,
.bp-dist-bar--good { background: var(--score-good-grad); }
.bp-balance-bar.score-moderate,
.bp-tbl-bar.score-moderate,
.bp-dist-bar--moderate { background: var(--score-moderate-grad); }
.bp-balance-bar.score-below-average,
.bp-tbl-bar.score-below-average,
.bp-dist-bar--below-average { background: var(--score-below-avg-grad); }
.bp-balance-bar.score-weak,
.bp-tbl-bar.score-weak,
.bp-dist-bar--weak,
.bp-glance-bar.bp-bar-weak { background: var(--score-weak-grad); }
.bp-balance-bar.score-very-weak,
.bp-tbl-bar.score-very-weak,
.bp-dist-bar--very-weak { background: var(--score-very-weak-grad); }

.bp-radar-dot.score-strong        { fill: url(#scoreGradStrong); }
.bp-radar-dot.score-good          { fill: url(#scoreGradGood); }
.bp-radar-dot.score-moderate      { fill: url(#scoreGradModerate); }
.bp-radar-dot.score-below-average { fill: url(#scoreGradBelowAvg); }
.bp-radar-dot.score-weak          { fill: url(#scoreGradWeak); }
.bp-radar-dot.score-very-weak     { fill: url(#scoreGradVeryWeak); }

.bp-tbl-mcell.cell-strong        { color: var(--score-strong);        background: var(--score-strong-bg); }
.bp-tbl-mcell.cell-good          { color: var(--score-good);          background: var(--score-good-bg); }
.bp-tbl-mcell.cell-moderate      { color: var(--score-moderate);      background: var(--score-moderate-bg); }
.bp-tbl-mcell.cell-below-average { color: var(--score-below-avg);      background: var(--score-below-avg-bg); }
.bp-tbl-mcell.cell-weak          { color: var(--score-weak);          background: var(--score-weak-bg); }
.bp-tbl-mcell.cell-very-weak     { color: var(--score-very-weak);     background: var(--score-very-weak-bg); }

.bp-glance-bar-score.bp-bar-strong { color: var(--score-strong); }
.bp-glance-bar-score.bp-bar-weak   { color: var(--score-weak); }

#view-brand-perception .trend-line { stroke: url(#scoreGradGood); stroke-width: 2.5; stroke-linecap: round; }
#view-brand-perception .trend-area { fill: url(#bpTrendArea); }
#view-brand-perception .bp-map-dot-brand { fill: url(#bpMapGood); }
.bp-legend-brand { background: var(--score-good-grad); }

.air-trend-svg .trend-line,
.sent-trend-wrap .trend-line { stroke: url(#scoreGradGood); }

* { box-sizing: border-box; }

/* Ensure [hidden] always wins regardless of display rules on specific IDs */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────
   APP SHELL — persistent sidebar layout
   ─────────────────────────────────────────────────────────── */

:root {
  --shell-sidebar-width: 216px;
  --shell-sidebar-collapsed-width: 52px;
  --shell-header-height: 46px;
  --topbar-height: 56px;
  --shell-sidebar-bg: #ffffff;
  --shell-sidebar-border: var(--border);
  --shell-item-active-bg: var(--accent-light);
  --shell-item-active-text: var(--text);
  --shell-item-hover-bg: var(--ui-secondary-bg);
  --shell-item-text: var(--text-muted);
  --shell-item-icon-size: 18px;
}

html {
  height: 100%;
  overflow: hidden;
  max-width: 100%;
  color-scheme: light;
}
body.theme-dark {
  color-scheme: dark;
}
body { height: 100%; }

body {
  display: grid;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;   /* Safari: containment context */
}

.app-shell {
  display: grid;
  grid-template-columns: var(--shell-sidebar-width) 1fr;
  grid-template-rows: 1fr;
  height: 100%;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  transition: grid-template-columns 0.2s ease;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: var(--shell-sidebar-collapsed-width) 1fr;
}

/* Signed-out: no app sidebar — marketing / KH / pricing only via top bar */
body.auth-guest .app-sidebar {
  display: none !important;
}
body.auth-guest .app-shell,
body.auth-guest .app-shell.sidebar-collapsed {
  grid-template-columns: 1fr;
}
/* Keep toggle slot so logo alignment matches signed-in topbar */
body.auth-guest #sidebar-toggle {
  visibility: hidden;
  pointer-events: none;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.app-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--shell-sidebar-bg);
  border-right: 1px solid var(--shell-sidebar-border);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.sidebar-brand {
  display: none; /* brand moved to app-topbar */
}

.app-logo {
  height: 24px;
  width: auto;
  display: block;
}

.sidebar-logo {
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.sidebar-toggle:hover {
  background: var(--shell-item-hover-bg);
  color: var(--text);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidebar-nav-primary,
.sidebar-nav-secondary {
  display: flex;
  flex-direction: column;
}

.sidebar-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 4px 12px;
}

.sidebar-section-label {
  padding: 6px 16px 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 14px;
  border: none;
  background: transparent;
  color: var(--shell-item-text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  margin: 1px 6px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s, color 0.1s;
  text-decoration: none;
  line-height: 1.35;
}

.sidebar-item .sidebar-item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--ui-muted);
  transition: color 0.1s;
}

.sidebar-shield-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.45;
  transition: opacity 0.1s;
}

.sidebar-item:hover .sidebar-shield-icon,
.sidebar-item.active .sidebar-shield-icon {
  opacity: 0.85;
}

/* Light mode: show dark shield, hide light shield */
.shield-dark { display: none; }
.shield-light { display: inline; }

/* Dark mode: show light shield, hide dark shield */
body.theme-dark .shield-dark { display: inline; }
body.theme-dark .shield-light { display: none; }
}

.sidebar-item .sidebar-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.sidebar-item:hover {
  background: var(--shell-item-hover-bg);
  color: var(--text);
}

.sidebar-item:hover .sidebar-item-icon {
  color: var(--text);
}

/* ── AI-box icon — rounded square with "AI" text ─── */
.nav-icon-aibox .aib-box   { transition: fill 0.15s, stroke 0.15s; }
.nav-icon-aibox .aib-text  { transition: fill 0.15s; }

.sidebar-item:hover .nav-icon-aibox .aib-box,
.sidebar-item.active .nav-icon-aibox .aib-box {
  fill: currentColor;
  stroke: currentColor;
}
.sidebar-item:hover .nav-icon-aibox .aib-text,
.sidebar-item.active .nav-icon-aibox .aib-text {
  fill: var(--bg);
}
body.theme-dark .sidebar-item:hover .nav-icon-aibox .aib-text,
body.theme-dark .sidebar-item.active .nav-icon-aibox .aib-text {
  fill: var(--bg);
}

.sidebar-item.active {
  background: var(--shell-item-active-bg);
  color: var(--shell-item-active-text);
  font-weight: 600;
}

.sidebar-item.active .sidebar-item-icon {
  color: var(--text);
}

.sidebar-account {
  flex-shrink: 0;
  border-top: 1px solid var(--shell-sidebar-border);
  padding: 6px 0;
}

.sidebar-account-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 14px;
  border: none;
  background: transparent;
  color: var(--shell-item-text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  margin: 1px 6px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 12px);
  transition: background 0.1s, color 0.1s;
}

.sidebar-account-theme:hover {
  background: var(--shell-item-hover-bg);
  color: var(--text);
}

/* ── Collapsed sidebar ────────────────────────────────────── */
.app-shell.sidebar-collapsed .sidebar-item-label,
.app-shell.sidebar-collapsed .sidebar-section-label,
.app-shell.sidebar-collapsed .sidebar-account-label {
  opacity: 0;
  pointer-events: none;
  width: 0;
  overflow: hidden;
}

.app-shell.sidebar-collapsed .sidebar-brand .app-logo {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

.app-shell.sidebar-collapsed .sidebar-divider {
  margin: 4px 8px;
}

.app-shell.sidebar-collapsed .sidebar-item {
  justify-content: center;
  padding: 7px;
  margin: 1px 4px;
}

.app-shell.sidebar-collapsed .sidebar-account-theme {
  justify-content: center;
  padding: 7px;
  margin: 1px 4px;
  width: calc(100% - 8px);
}

.app-shell.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding: 0 10px;
}

/* ── Main area ────────────────────────────────────────────── */
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* ── Persistent top bar (full viewport width) ─────────────── */
.app-topbar {
  height: var(--topbar-height);
  background: var(--ui-bg);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  /* Mirror left inset: toggle slot + logo margin (8px) */
  padding: 0 calc(var(--topbar-height) + 8px) 0 0;
  flex-shrink: 0;
  z-index: 100;
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: visible;
}

.topbar-left {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;              /* Safari: allow flex child to shrink */
  overflow: hidden;
}

.topbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--topbar-height);
  height: var(--topbar-height);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

.topbar-toggle:hover {
  background: var(--ui-secondary-bg);
  color: var(--text);
}

.topbar-logo {
  height: 20px;
  width: auto;
  display: block;
  margin-left: 6px;
}

.topbar-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 14px;
  flex-shrink: 0;
}

.topbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: nowrap;
}

.topbar-nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s;
}

.topbar-nav-link:hover {
  color: var(--accent);
}

.topbar-nav-link sup {
  font-size: 9px;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
}

.topbar-nav-sep {
  color: var(--text-muted);
  font-size: 13px;
  user-select: none;
  opacity: 0.55;
}

.topbar-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-left: 6px;
}
.topbar-brand-name sup {
  font-size: 9px;
  font-weight: 600;
  vertical-align: super;
  letter-spacing: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.topbar-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
}

.topbar-lang-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

/* Light mode — AIRepScore teal pill switch */
body:not(.theme-dark) .topbar-lang-switch {
  border: 1.5px solid rgba(76, 185, 185, 0.35);
  background: var(--teal-green-bg);
}

body:not(.theme-dark) .topbar-lang-btn {
  color: var(--text-muted);
}

body:not(.theme-dark) .topbar-lang-btn.is-active,
body:not(.theme-dark) .topbar-lang-btn[aria-pressed="true"] {
  background: var(--teal-green-grad);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

body:not(.theme-dark) .topbar-lang-btn:hover:not(.is-active):not([aria-pressed="true"]) {
  color: var(--teal-green);
  background: var(--teal-green-bg-hover);
}

/* Dark mode — unchanged */
body.theme-dark .topbar-lang-switch {
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border, #374151);
  background: var(--surface-elevated, #1f2937);
}

body.theme-dark .topbar-lang-btn {
  color: var(--text-muted, #9ca3af);
  padding: 4px 8px;
  border-radius: 6px;
}

body.theme-dark .topbar-lang-btn.is-active,
body.theme-dark .topbar-lang-btn[aria-pressed="true"] {
  background: var(--accent-soft, rgba(124, 58, 237, 0.12));
  color: var(--accent);
}

body.theme-dark .topbar-lang-btn:hover {
  color: var(--text, #e5e7eb);
}

.profile-lang-switch {
  justify-content: flex-start;
}

/* Marketing top bar — phone */
@media (max-width: 768px) {
  body.auth-guest .topbar-search-wrap {
    display: none;
  }
  body.auth-guest #sidebar-toggle {
    display: flex;
    visibility: visible;
    pointer-events: auto;
  }
  body.auth-guest .app-topbar {
    gap: 8px;
    padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
    grid-template-columns: minmax(0, 1fr) auto;
  }
  body.auth-guest .topbar-left {
    min-width: 0;
    overflow: visible;
    justify-content: flex-start;
    gap: 2px;
  }
  body.auth-guest .app-logo-link {
    flex-shrink: 0;
  }
  body.auth-guest .topbar-logo-img {
    margin-left: 0;
  }
  body.auth-guest .topbar-nav {
    display: none;
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    z-index: 115;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6px 12px 14px;
    background: var(--ui-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
    max-height: calc(100dvh - var(--topbar-height));
    overflow-y: auto;
  }
  body.auth-guest.guest-mobile-nav-open .topbar-nav {
    display: flex;
  }
  body.auth-guest.guest-mobile-nav-open .app-topbar {
    z-index: 120;
  }
  body.auth-guest.guest-mobile-nav-open .app-main::before {
    content: "";
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 114;
  }
  body.auth-guest .topbar-nav-link {
    display: block;
    padding: 13px 8px;
    font-size: 15px;
    border-bottom: 1px solid var(--border-light, #eef2f6);
  }
  body.auth-guest .topbar-nav-link:last-of-type {
    border-bottom: none;
  }
  body.auth-guest .topbar-nav-sep {
    display: none;
  }
  body.auth-guest .topbar-btn {
    padding: 7px 10px;
    font-size: 11px;
  }
  body.auth-guest .topbar-right {
    gap: 8px;
    flex-shrink: 0;
  }
  /* Compact lang toggle: show only the other language as a text link */
  body.auth-guest .topbar-lang-switch {
    border: none;
    background: transparent;
    padding: 0;
    gap: 0;
    flex-shrink: 0;
  }
  body.auth-guest .topbar-lang-btn[aria-pressed="true"] {
    display: none;
  }
  body.auth-guest .topbar-lang-btn[aria-pressed="false"] {
    background: transparent;
    color: var(--teal-green);
    box-shadow: none;
    padding: 4px 2px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  body.auth-guest .topbar-lang-btn[aria-pressed="false"]:hover {
    background: transparent;
    color: var(--teal-green);
    opacity: 0.85;
  }
  body.theme-dark.auth-guest .topbar-lang-btn[aria-pressed="false"] {
    color: var(--teal-green);
  }
  body.theme-dark.auth-guest .topbar-nav-link {
    border-bottom-color: #2a3145;
  }
}

.topbar-btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.topbar-btn--outline {
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
}

.topbar-btn--outline:hover {
  background: var(--teal-green-bg);
}

.topbar-btn--primary {
  border: none;
  background: var(--teal-green-grad);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

body.auth-guest .topbar-btn--primary {
  background: var(--accent-orange-purple-grad);
  border-radius: 8px;
  box-shadow: none;
}

.topbar-btn--primary:hover {
  background: var(--teal-green-grad-hover);
}

body.auth-guest .topbar-btn--primary:hover {
  filter: brightness(1.06);
  background: var(--accent-orange-purple-grad);
}

.topbar-auth-user {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  z-index: 5;
}

.topbar-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--teal-green-grad);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  line-height: 1;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.topbar-profile-btn:hover,
.topbar-profile-btn[aria-expanded="true"] {
  background: var(--teal-green-grad-hover);
}

.topbar-profile-btn:focus-visible {
  outline: 2px solid var(--accent, #7c3aed);
  outline-offset: 2px;
}

.topbar-profile-initials {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.topbar-profile-menu {
  position: fixed;
  top: 0;
  right: 0;
  min-width: 220px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
  z-index: 300;
  padding: 6px 0;
  overflow: hidden;
}

.topbar-profile-menu-head {
  display: block;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
}

.topbar-profile-menu-head:hover {
  background: var(--ui-secondary-bg);
}

.topbar-profile-menu-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.topbar-profile-menu-email {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-all;
}

.topbar-profile-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  box-sizing: border-box;
}

.topbar-profile-menu-item:hover {
  background: var(--ui-secondary-bg);
}

.topbar-profile-menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.topbar-profile-menu-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.topbar-profile-menu-chevron {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1;
}

.topbar-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--ui-secondary-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0 14px 0 11px;
  height: 30px;
  transition: border-color 0.15s;
  position: relative;
}

.topbar-search-wrap:focus-within {
  border-color: var(--accent);
}

.topbar-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.topbar-search-input {
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  outline: none;
  box-shadow: none;
  width: 160px;
  -webkit-appearance: none;
  appearance: none;
}

.topbar-search-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.topbar-search-input::-webkit-search-decoration,
.topbar-search-input::-webkit-search-cancel-button,
.topbar-search-input::-webkit-search-results-button,
.topbar-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.topbar-search-input::placeholder {
  color: var(--text-muted);
}

/* ── Search dropdown ──────────────────────────────────────── */
.search-dropdown {
  position: fixed;   /* fixed: immune to parent overflow/stacking context */
  /* top/left/width set dynamically by JS */
  width: 380px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  z-index: 200;
  overflow: hidden;
  display: none;
}
.search-dropdown.open { display: block; }

.search-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px 4px;
}

.search-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 0;
  text-decoration: none;
  color: var(--text);
}
.search-result:hover,
.search-result.active {
  background: var(--ui-secondary-bg, #f5f7f9);
}
.search-result-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--ui-secondary-bg, #f0f2f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a6070;
  margin-top: 1px;
}
body.theme-dark .search-result-icon { background: #2a3040; color: #8a95ab; }
.search-result-text { min-width: 0; }
.search-result-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}
.search-result-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-highlight { color: #5a7c00; font-weight: 600; }
body.theme-dark .search-result-highlight { color: var(--asyntis-accent); }

.search-empty {
  padding: 20px 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.search-footer {
  border-top: 1px solid var(--border, #e5e7eb);
  padding: 8px 14px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}
.search-footer kbd {
  background: var(--ui-secondary-bg, #f5f7f9);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: var(--font-sans);
}

body.theme-dark .search-dropdown {
  background: #1c2029;
  border-color: #2d3445;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
body.theme-dark .search-result:hover,
body.theme-dark .search-result.active { background: #232a37; }
body.theme-dark .search-result-icon { background: #232a37; }
body.theme-dark .search-footer { border-color: #2d3445; }

/* ── In-page header (scrolls with content) ────────────────── */
.page-header {
  flex-shrink: 0;
  background: var(--ui-bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px 0;
}

.page-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  line-height: 1.3;
}

.module-back-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1;
}
.module-back-link:hover { color: var(--text); }
.module-back-link svg { display: block; }

.page-title.is-back-nav { cursor: pointer; }
.page-title.is-back-nav:hover { color: var(--text-muted); }

.page-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 0;
  line-height: 1.4;
}

/* When page-header has no subnav add bottom padding */
.page-header:not(:has(.module-subnav:not([hidden]))) {
  padding-bottom: 10px;
}

/* Keep legacy .module-title / .module-subtitle in sync */
.module-title { font-size: 14px; font-weight: 600; margin: 0; color: var(--text); line-height: 1.3; }
.module-subtitle { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; line-height: 1.4; }
.module-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.module-print-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.module-print-btn svg { display: block; }
.module-print-btn:hover {
  opacity: 1;
  color: var(--text);
  background: var(--ui-secondary-bg, rgba(0, 0, 0, 0.04));
}
body.theme-dark .module-print-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Module-level subnav (replaces visible .lib-subtabs) */
.module-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 6px 0 10px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.module-subnav-item {
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  color: var(--ui-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}

.module-subnav-item:hover {
  background: var(--ui-secondary-bg);
  color: var(--ui-text);
}

.module-subnav-item.active {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

/* Project Actor profile edit — structured fields (same spirit as BMC edit grid) */
.pap-section-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pap-field-edit {
  min-width: 0;
}
.pap-field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  margin-bottom: 4px;
}
.pap-field-edit .bmc-edit-textarea {
  min-height: 56px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--ui-bg, #fff);
  margin-top: 0;
}
.pap-field-edit .bmc-edit-textarea:focus {
  border-color: var(--asyntis-accent);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(212, 231, 0, 0.35));
  outline: none;
}
.pap-field-edit .pap-field-input-array {
  min-height: 100px;
}
body.theme-dark .pap-field-edit .bmc-edit-textarea {
  background: var(--card-bg, #1e1e2e);
  border-color: var(--border-color, #334155);
}

/* Module content — flex column so workbench views can fill available space */
.module-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  min-height: 0;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
}

/* View sections inside module-content */
.view-section {
  padding: 1.25rem 1.5rem;
  min-height: 0;
}

/* Full-height workbench views fill the available space */
#view-claim-library,
#view-scenario-lab,
#view-design-system,
#view-knowledge-hub {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
}

/* Guest/marketing views: natural height — module-content scrolls (flex:1 shrinks = clipped content) */
#view-home,
#view-upgrade,
#view-marketing-public,
#view-trust-center,
#view-about-airepscore {
  flex: 0 0 auto;
  display: block;
  padding: 0;
  min-height: auto;
  overflow: visible;
  max-width: 100%;
}

#view-knowledge-hub {
  overflow: visible;
}

/* Guest: long-form pages scroll via module-content, not a fixed inner viewport */
body.auth-guest #view-blog-article,
body.auth-guest #view-knowledge-hub,
body.auth-guest #view-marketing-public,
body.auth-guest #view-trust-center,
body.auth-guest #view-about-airepscore {
  flex: 0 0 auto;
  height: auto;
  min-height: auto;
  overflow: visible;
}

/* Content views manage their own spacing */
#view-home {
  overflow-x: clip;
  overflow-y: visible;
}

#view-home,
#view-projects,
#view-overview,
#view-alerts,
#view-time-tracking,
#view-consultancy,
#view-about,
#view-register,
#view-profile,
#view-upgrade,
#view-upgrade-v2,
#view-settings {
  padding: 0;
}

#view-upgrade {
  overflow: visible;
}

/* Profile — monthly token usage progress */
.pv2-token-usage-bar-wrap {
  height: 8px;
  background: var(--border, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 12px;
}
.pv2-token-usage-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 0.3s ease;
  background: linear-gradient(90deg, var(--teal-green-from) 0%, var(--teal-green-to) 100%);
}
.pv2-token-usage-bar--warn {
  background: var(--score-below-avg-grad);
}
.pv2-token-usage-bar--danger {
  background: var(--score-weak-grad);
}

.pv2-plan-upgrade-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
}

.pv2-plan-upgrade-link:hover {
  text-decoration: underline;
}

.pv2-plan-upgrade-link[hidden] {
  display: none;
}

/* ── Placeholder module pages ─────────────────────────────── */
.module-placeholder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 48px 32px;
  max-width: 520px;
}

/* ── Settings groups (white card style) ─────────────────────── */
.settings-group {
  width: 100%;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 20px 24px 22px;
  margin-bottom: 16px;
  accent-color: var(--teal-green);
}
.settings-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111);
  margin: 0 0 5px 0;
}
.settings-group-desc {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin: 0 0 14px 0;
  line-height: 1.5;
}
.settings-autosave-status {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 10px;
  min-height: 16px;
}
body.theme-dark .settings-group {
  background: var(--surface, #1c2029);
  border-color: var(--border, #2d3445);
}

/* ── Settings: database backups ─────────────────────────────────────────── */
.settings-backups-meta {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin: 0 0 12px 0;
  line-height: 1.5;
}
.settings-backups-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.settings-backups-actions .settings-autosave-status {
  margin-top: 0;
  min-height: 0;
}
.settings-backups-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.settings-backups-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.settings-backups-table th,
.settings-backups-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e5e7eb);
  vertical-align: top;
}
.settings-backups-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  background: var(--surface-muted, #f9fafb);
}
.settings-backups-table tbody tr:last-child td {
  border-bottom: none;
}
.settings-backups-empty {
  text-align: center;
  color: var(--text-muted, #6b7280);
  padding: 18px 10px !important;
}
.settings-backups-source {
  font-size: 11px;
}
.settings-backups-status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.settings-backups-status-active {
  background: #dcfce7;
  color: #166534;
}
.settings-backups-status-purged {
  background: #f3f4f6;
  color: #6b7280;
}
.settings-backups-row-purged td {
  color: var(--text-muted, #6b7280);
}
.settings-backups-row-next-purge {
  background: #fffbeb;
}
body.theme-dark .settings-backups-row-next-purge {
  background: rgba(251, 191, 36, 0.08);
}
body.theme-dark .settings-backups-table th {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Settings: LWS weight slider ───────────────────────────────────────── */
.settings-lws-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.settings-lws-slider-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.settings-lws-slider {
  --pct: 50%;
  --thumb-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--thumb-size);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}
.settings-lws-slider:focus { outline: none; }
.settings-lws-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--teal-green) 0%,
    var(--teal-green) var(--pct),
    var(--ui-border, #d1d5db) var(--pct),
    var(--ui-border, #d1d5db) 100%
  );
}
.settings-lws-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--teal-green);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.settings-lws-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--ui-border, #d1d5db);
}
.settings-lws-slider::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--teal-green-grad);
}
.settings-lws-slider::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--teal-green);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
body.theme-dark .settings-lws-slider::-webkit-slider-thumb,
body.theme-dark .settings-lws-slider::-moz-range-thumb {
  background: #eef1f8;
}
.settings-lws-label {
  font-size: 14px;
  font-weight: 700;
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text, #111);
}

/* ── Settings inputs & selects ───────────────────────────────────────────── */
.settings-label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--c-text-muted, #6b7280); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 4px;
}
.settings-input {
  border: 1px solid var(--c-border, #e5e7eb); border-radius: 6px;
  padding: 5px 10px; font-size: 13px; background: var(--c-card, #fff);
  color: var(--c-text, #111); outline: none; width: 100%;
}
.settings-input--sm { width: 90px; }
.settings-input:focus { border-color: var(--teal-green); }
.settings-select {
  border: 1px solid var(--c-border, #e5e7eb); border-radius: 6px;
  padding: 5px 10px; font-size: 13px; background: var(--c-card, #fff);
  color: var(--c-text, #111); outline: none;
}
.settings-select--sm { width: auto; }
.settings-group-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  background: #ccf0ed; color: #0d6e68;
  padding: 1px 7px; border-radius: 10px; margin-left: 8px;
  vertical-align: middle;
}

/* ── Weight config editor ────────────────────────────────────────────────── */
.wc-editor {
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 10px; padding: 20px;
  background: var(--c-surface, #f8f9fc);
  margin-top: 4px;
}
.wc-editor-header { margin-bottom: 18px; }
.wc-weights-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 640px) { .wc-weights-grid { grid-template-columns: 1fr; } }
.wc-weights-col { display: flex; flex-direction: column; gap: 6px; }
.wc-col-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--c-text-muted); margin: 0 0 2px;
}
.wc-col-desc { font-size: .72rem; color: var(--c-text-muted); margin: 0 0 10px; }
.wc-sliders { display: flex; flex-direction: column; gap: 10px; }
.wc-slider-row { display: flex; align-items: center; gap: 10px; }
.wc-slider-label {
  font-size: .8rem; font-weight: 500; min-width: 130px; flex-shrink: 0;
  color: var(--c-text, #111);
}
.wc-slider {
  flex: 1; accent-color: var(--teal-green);
  cursor: pointer; height: 4px;
}
.wc-slider-val {
  font-size: .8rem; font-weight: 700; min-width: 36px;
  text-align: right; color: var(--teal-green);
}
body.theme-dark .wc-editor { background: #161b27; border-color: #2a3145; }
body.theme-dark .settings-input,
body.theme-dark .settings-select { background: #1c2029; border-color: #2a3145; color: #e0e6f0; }

/* ── 404 Not Found page ───────────────────────────────────── */
.not-found-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  min-height: 60vh;
}
.not-found-code {
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: var(--border, #e5e7eb);
  letter-spacing: -4px;
  margin-bottom: 16px;
}
.not-found-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
}
.not-found-body {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 360px;
  margin: 0 0 32px;
  line-height: 1.6;
}
.not-found-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.not-found-btn-primary {
  background: var(--text);
  color: var(--ui-bg);
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s;
}
.not-found-btn-primary:hover { opacity: 0.8; }
.not-found-btn-secondary {
  background: transparent;
  color: var(--text-muted);
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.not-found-btn-secondary:hover { border-color: var(--text-muted); color: var(--text); }

.module-placeholder-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--border-light);
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 16px;
}

.module-placeholder-heading {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.3;
}

/* ── Upgrade / pricing page ─────────────────────────────────────────────── */
.upgrade-page {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 56px;
  box-sizing: border-box;
}

body.auth-guest .upgrade-page {
  flex: 0 0 auto;
  padding-bottom: 20px;
}

.upgrade-page__header {
  margin-bottom: 28px;
}

.upgrade-page__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #111);
  margin: 12px 0 10px;
  line-height: 1.2;
}

.upgrade-page__lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted, #6b7280);
  margin: 0;
  max-width: 52ch;
}

.upgrade-current {
  margin-bottom: 24px;
  border-left: 3px solid var(--teal-green);
}

.upgrade-current__line {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text, #111);
}

.upgrade-current__next {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--teal-green);
  font-weight: 600;
  line-height: 1.45;
}

.upgrade-billing-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--surface-2, #f5f7fa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
}

.upgrade-billing-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.upgrade-billing-toggle {
  display: inline-flex;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface, #fff);
}

.upgrade-billing-opt {
  border: none;
  background: transparent;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.upgrade-billing-opt--active {
  background: var(--teal-green-bg);
  color: var(--text, #111);
}

.upgrade-billing-save {
  font-size: 10px;
  font-weight: 700;
  color: var(--teal-green);
  margin-left: 4px;
}

.upgrade-billing-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

@media (min-width: 720px) {
  .upgrade-billing-hint {
    flex: 1 1 auto;
    margin: 0 0 0 auto;
    text-align: right;
  }
}

.upgrade-plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 720px) {
  .upgrade-plans-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.upgrade-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 22px 20px 20px;
  overflow: hidden;
  min-height: 0;
}

.upgrade-plan-card--featured {
  border: 2px solid var(--teal-green);
  box-shadow: 0 8px 28px rgba(var(--teal-green-rgb), 0.12);
}

.upgrade-plan-card--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-grad-banner);
  border-radius: 10px 10px 0 0;
}

.upgrade-plan-card--current {
  background: var(--teal-green-bg);
}

.upgrade-plan-card__ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--teal-green-grad);
  padding: 3px 8px;
  border-radius: 4px;
}

.upgrade-plan-card__current-badge {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  max-width: max-content;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal-green);
  border: 1px solid var(--teal-green);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 8px;
}

.upgrade-plan-card__name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}

.upgrade-plan-card__badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.upgrade-plan-price {
  margin: 16px 0 12px;
}

.upgrade-plan-price__amount {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

.upgrade-plan-price__period {
  font-size: 14px;
  color: var(--text-muted);
  margin-left: 2px;
}

.upgrade-plan-price__annual {
  display: block;
  font-size: 12px;
  color: var(--teal-green);
  font-weight: 600;
  margin-top: 6px;
}

.upgrade-plan-price__annual--muted {
  color: var(--text-muted);
  font-weight: 500;
}

.upgrade-plan-limits,
.upgrade-plan-tokens {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 4px;
  line-height: 1.45;
}

.upgrade-plan-features {
  list-style: none;
  margin: 14px 0 12px;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.upgrade-plan-features li {
  font-size: 13px;
  padding: 5px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.upgrade-plan-features__icon {
  flex-shrink: 0;
  width: 18px;
  font-weight: 700;
}

.upgrade-plan-features__on {
  color: var(--text);
}

.upgrade-plan-features__on .upgrade-plan-features__icon {
  color: var(--teal-green);
}

.upgrade-plan-features__off {
  color: var(--text-muted);
}

.upgrade-plan-features__note {
  font-size: 11px;
  color: var(--text-muted);
}

.upgrade-plan-footnote {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.4;
}

.upgrade-plan-cta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  flex-shrink: 0;
  padding-top: 8px;
  min-height: 44px;
}

#view-upgrade .upgrade-plan-cta-row .btn,
#view-upgrade .upgrade-plan-cta-row .upgrade-plan-cta {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 40px;
}

.upgrade-plan-cta {
  width: 100%;
  text-align: center;
  text-decoration: none;
  justify-content: center;
}

.upgrade-plan-cta--current,
#view-upgrade .upgrade-plan-cta--current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  text-align: center;
  margin: 0;
  border-radius: 8px;
  background: var(--brand-grad-banner) !important;
  cursor: default;
}

.upgrade-plan-cta--upgrade {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 0;
  border: none;
  border-radius: 8px;
  color: #fff !important;
  background: var(--accent-orange-purple-grad) !important;
}

.upgrade-plan-cta--upgrade:hover:not(:disabled) {
  filter: brightness(1.06);
  color: #fff !important;
}

.upgrade-plan-cta--downgrade {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 0;
  border-radius: 8px;
  color: #6b7280 !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
}

.upgrade-plan-cta--downgrade:hover:not(:disabled) {
  background: #f9fafb !important;
  color: #4b5563 !important;
  border-color: #9ca3af !important;
}

body.theme-dark .upgrade-plan-cta--downgrade {
  color: #9ca3af !important;
  background: var(--surface-elevated, #1e293b) !important;
  border-color: #4b5563 !important;
}

body.theme-dark .upgrade-plan-cta--downgrade:hover:not(:disabled) {
  background: var(--surface-hover, #334155) !important;
  color: #d1d5db !important;
  border-color: #6b7280 !important;
}

.upgrade-plan-cta--internal-note {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 4px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.upgrade-plan-cta-hint {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}

.upgrade-portal-hint {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

.upgrade-plan-confirm-card {
  max-width: 440px;
  width: calc(100% - 32px);
}

#upgrade-plan-confirm-modal .upgrade-plan-confirm-actions.asyntis-modal-actions {
  justify-content: stretch;
  flex-wrap: nowrap;
}

.upgrade-plan-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
  width: 100%;
}

.upgrade-plan-confirm-actions .upgrade-plan-confirm-btn {
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.upgrade-plan-confirm-actions .upgrade-plan-confirm-btn--cancel {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

.upgrade-plan-confirm-actions .upgrade-plan-confirm-btn--cancel:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

.upgrade-plan-confirm-actions .upgrade-plan-confirm-btn--upgrade {
  border: none;
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--accent-orange-purple-from) 0%,
    var(--accent-rose) 100%
  );
}

.upgrade-plan-confirm-actions .upgrade-plan-confirm-btn--upgrade:hover:not(:disabled) {
  filter: brightness(1.06);
}

.upgrade-plan-confirm-actions .upgrade-plan-confirm-btn--downgrade {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

.upgrade-plan-confirm-actions .upgrade-plan-confirm-btn--downgrade:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}

body.theme-dark .upgrade-plan-confirm-actions .upgrade-plan-confirm-btn--cancel,
body.theme-dark .upgrade-plan-confirm-actions .upgrade-plan-confirm-btn--downgrade {
  background: var(--surface, #1e293b);
  border-color: #475569;
  color: #e2e8f0;
}

.upgrade-plan-confirm-actions .upgrade-plan-confirm-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.upgrade-plan-confirm-from-to {
  font-weight: 600;
  margin: 0 0 8px;
}

.upgrade-plan-confirm-due {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text-primary, #0f172a);
}

.upgrade-plan-confirm-note {
  margin: 0;
}

.upgrade-plan-confirm-error {
  margin: 10px 0 0;
  color: #b45309;
  font-size: 13px;
}

.upgrade-training-banner {
  margin-bottom: 16px;
  border-left: 4px solid var(--teal-green);
}

.upgrade-enterprise {
  margin-bottom: 16px;
}

.upgrade-compare {
  margin-bottom: 16px;
  overflow: visible;
}

.upgrade-compare-scroll {
  overflow: visible;
  margin-top: 8px;
}

.upgrade-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.upgrade-compare-table th,
.upgrade-compare-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.upgrade-compare-table thead th {
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2, #f5f7fa);
}

.upgrade-compare-table tbody th {
  font-weight: 500;
  color: var(--text-muted);
}

.upgrade-compare-section th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-green);
  background: var(--teal-green-bg);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.upgrade-compare-table td.upgrade-compare-ondemand {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-green);
  white-space: nowrap;
}

.upgrade-compare-ast {
  position: relative;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--teal-green);
  margin-left: 1px;
  vertical-align: super;
  line-height: 0;
  cursor: help;
  text-decoration: none;
  outline: none;
}

/* Floating tooltip (body) — avoids overflow clip on .upgrade-compare-scroll */
.upgrade-copilot-tooltip-float {
  position: fixed;
  z-index: 10050;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text, #111);
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.upgrade-copilot-tooltip-float--visible {
  opacity: 1;
  visibility: visible;
}

body.theme-dark .upgrade-copilot-tooltip-float {
  background: var(--surface, #1c2029);
  border-color: var(--border, #2d3445);
  color: var(--text, #e8eaed);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.upgrade-faq-item {
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding: 10px 0;
}

.upgrade-faq-item:last-child {
  border-bottom: none;
}

.upgrade-faq-item summary {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
}

.upgrade-faq-item p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 8px 0 4px;
}

.upgrade-footnote {
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 0;
}

.upgrade-footnote a {
  color: var(--teal-green);
  font-weight: 600;
}

body.theme-dark .upgrade-billing-bar {
  background: var(--surface-2, #161c28);
  border-color: var(--border, #2a3145);
}

body.theme-dark .upgrade-billing-toggle {
  background: var(--surface, #1c2029);
  border-color: var(--border, #2a3145);
}

body.theme-dark .upgrade-plan-card {
  background: var(--surface, #1c2029);
  border-color: var(--border, #2a3145);
}

body.theme-dark .upgrade-plan-card--current {
  background: var(--teal-green-bg);
}

body.theme-dark .upgrade-compare-table thead th {
  background: #161c28;
}

.module-placeholder-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Knowledge Hub panes */
.kh-pane { padding: 0; }

/* Cost Lab — internal tabs */
.kh-cl-subtabs {
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.kh-cl-panel-users {
  padding-top: 4px;
}
.kh-cl-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 12px;
}
.kh-cl-toolbar-label {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  margin-right: 4px;
}
.kh-cl-users-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.kh-cl-users-search {
  flex: 0 1 260px;
  min-width: 180px;
  width: 260px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.kh-cl-users-summary {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 12px;
}
.kh-cl-users-table-wrap {
  overflow-x: auto;
}
.kh-cl-users-table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
  font-size: 13px;
  margin-bottom: 0;
  border-collapse: collapse;
}
.kh-cl-users-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
}
.kh-cl-users-table tbody td {
  border-bottom: 1px solid #f2f2f2;
}
.kh-cl-users-table tbody tr:hover td {
  background: var(--teal-green-bg, #ebf5f9);
}
.kh-cl-users-table col.col-user   { width: 24%; min-width: 220px; }
.kh-cl-users-table col.col-org    { width: 16%; min-width: 140px; }
.kh-cl-users-table col.col-plan   { width: 10%; min-width: 96px; }
.kh-cl-users-table col.col-tokens { width: 9%;  min-width: 88px; }
.kh-cl-users-table col.col-usage  { width: 18%; min-width: 160px; }
.kh-cl-users-table col.col-calls  { width: 6%;  min-width: 56px; }
.kh-cl-users-table col.col-cost   { width: 8%;  min-width: 72px; }
.kh-cl-users-table col.col-last   { width: 9%;  min-width: 120px; }
.kh-cl-users-table th,
.kh-cl-users-table td {
  padding: 10px 12px;
  vertical-align: top;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
}
.kh-cl-users-table .kh-cl-th-num,
.kh-cl-users-table .kh-cl-td-num {
  text-align: right;
  white-space: nowrap;
}
.kh-cl-users-table .kh-cl-th-last,
.kh-cl-users-table .kh-cl-td-last {
  white-space: nowrap;
  font-size: 12px;
}
.kh-cl-cell-user .kh-cl-user-email {
  display: block;
  font-weight: 600;
  color: var(--text, #111);
  word-break: break-all;
}
.kh-cl-cell-user .kh-cl-user-meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
}
.kh-cl-cell-org,
.kh-cl-cell-plan {
  word-break: break-word;
}
.kh-cl-usage-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.kh-cl-usage-bar-wrap {
  height: 6px;
  background: var(--border, #e5e7eb);
  border-radius: 999px;
  overflow: hidden;
}
.kh-cl-usage-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-green-from) 0%, var(--teal-green-to) 100%);
}
.kh-cl-usage-bar-fill--warn { background: var(--score-below-avg-grad); }
.kh-cl-usage-bar-fill--danger { background: var(--score-weak-grad); }
.kh-cl-usage-pct {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

/* ─────────────────────────────────────────────────────────────
   HOMEPAGE
   ─────────────────────────────────────────────────────────── */

.home-page {
  position: relative;
  padding-bottom: 0;
  overflow-x: clip;
  overflow-y: visible;
  max-width: 100%;
  width: 100%;
}

/* Seaweed rechts — hero (origineel) */
.home-page-bg {
  position: absolute;
  left: 22%;
  right: 0;
  top: 0;
  height: min(80vh, 780px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Links zacht uit; onderaan pas fade (geen gat in het midden) */
  -webkit-mask-image:
    linear-gradient(to left, #000 52%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  mask-image:
    linear-gradient(to left, #000 52%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Brede laptop/monitor (16:10, 16:9): hero + stats worden hoger dan oude 680px-cap */
@media (min-width: 961px) and (min-aspect-ratio: 8/5) {
  .home-page-bg {
    height: min(94vh, 920px);
    -webkit-mask-image:
      linear-gradient(to left, #000 52%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 93%, transparent 100%);
    mask-image:
      linear-gradient(to left, #000 52%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 93%, transparent 100%);
  }
}

/* Seaweed + logo-badges: zelfde tempo (10s), logo's bewegen meer */
.home-hero-visual-drift {
  position: absolute;
  inset: 0;
}
.home-hero-seaweed-slot {
  position: absolute;
  inset: 0;
  transform-origin: 82% 78%;
  animation: home-seaweed-drift-slot 10s ease-in-out infinite;
}
.home-hero-seaweed-slot .home-seaweed-svg,
.home-page-bg .home-seaweed-svg {
  width: 168%;
  height: 100%;
  display: block;
  opacity: 0.92;
  margin-left: 2%;
  max-width: none;
  animation: none;
  transform-origin: 82% 78%;
}

/* Zwevende AI-model banners — alleen achtergrond 62%; logo 100% opaque */
.home-hero-logos {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 58% 48%;
  animation: home-hero-logos-drift 10s ease-in-out infinite;
}
.home-hero-logo {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  height: 40px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: center center;
}
.home-hero-logo img {
  display: block;
  height: 32px;
  width: auto;
  max-height: 32px;
  max-width: 112px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.home-hero-logo--claude img,
.home-hero-logo--gemini img {
  height: 24px;
  max-height: 24px;
  max-width: 88px;
}
.home-hero-logo--chatgpt img,
.home-hero-logo--copilot img,
.home-hero-logo--deepseek img {
  height: 24px;
  max-height: 24px;
  max-width: 88px;
}
/* Badges boven/op het seaweed — elk eigen fase/richting t.o.v. de rest */
.home-hero-logo--claude {
  top: 10%; right: 14%; left: auto;
  animation-name: home-hero-logo-float-a;
  animation-delay: 0s;
}
.home-hero-logo--chatgpt {
  top: calc(22% + 20px);
  right: calc(32% - 85px);
  left: auto;
  animation-name: home-hero-logo-float-b;
  animation-delay: -1.6s;
}
.home-hero-logo--gemini {
  top: 36%; right: 20%; left: auto;
  animation-name: home-hero-logo-float-c;
  animation-delay: -3.2s;
}
.home-hero-logo--copilot {
  top: 46%; left: 48%; right: auto;
  animation-name: home-hero-logo-float-b;
  animation-delay: -4.8s;
}
.home-hero-logo--perplexity {
  top: 52%; left: 66%; right: auto;
  animation-name: home-hero-logo-float-c;
  animation-delay: -6.4s;
}
.home-hero-logo--mistral {
  top: calc(68% - 75px); left: 54%; right: auto;
  animation-name: home-hero-logo-float-a;
  animation-delay: -8s;
}
.home-hero-logo--deepseek {
  top: calc(30% + 30px); right: 32%; left: auto;
  animation-name: home-hero-logo-float-b;
  animation-delay: -9.6s;
}

/* Tweede seaweed — framework (1:1 kopie hero-rechts; vaste px) */
.home-fw-seaweed-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -335px;
  height: 680px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(to left, #000 65%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
  mask-image:
    linear-gradient(to left, #000 65%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.home-fw-seaweed-bg .home-seaweed-svg {
  position: relative;
  top: -80px;
  left: -520px;
  width: 135%;
  height: 100%;
  display: block;
  opacity: 0.92;
  margin-left: 0;
  max-width: none;
  transform: scaleY(-1);
  transform-origin: 82% 78%;
  animation: home-seaweed-drift-fw-flip-y 10s ease-in-out infinite;
}

/* home-seaweed-hflip.svg — spiegel in bestand, xMinYMid links, geen horizontale rekt */
.home-fw-seaweed-bg[data-hflip="1"] {
  left: 0;
  right: 40%;
  top: -19px;
  height: 920px;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 88%);
  mask-image: linear-gradient(to right, #000 55%, transparent 88%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.home-fw-seaweed-bg[data-hflip="1"] .home-seaweed-svg {
  left: -520px;
  top: 0;
  width: auto;
  height: 100%;
  max-width: none;
  margin: 0;
  opacity: 0.92;
  transform: scaleY(-1.45);
  transform-origin: 22% 32%;
  animation: home-seaweed-drift-fw-flip-y-145 10s ease-in-out infinite;
}

.home-seaweed-strand path {
  vector-effect: non-scaling-stroke;
}

@keyframes home-seaweed-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6px, -10px); }
}
@keyframes home-seaweed-drift-slot {
  0%, 100% { transform: translateX(-10%) translate(0, 0); }
  50%      { transform: translateX(-10%) translate(6px, -10px); }
}
@keyframes home-hero-logos-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(10px, -16px); }
}
@keyframes home-hero-logo-float-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(12px, -18px); }
}
@keyframes home-hero-logo-float-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-11px, -20px); }
}
@keyframes home-hero-logo-float-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(9px, -14px); }
}
@keyframes home-seaweed-drift-fw-flip-y {
  0%, 100% { transform: scaleY(-1) translate(0, 0); }
  50%      { transform: scaleY(-1) translate(6px, -10px); }
}
@keyframes home-seaweed-drift-fw-flip-y-145 {
  0%, 100% { transform: scaleY(-1.45) translate(0, 0); }
  50%      { transform: scaleY(-1.45) translate(6px, -10px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-seaweed-svg { animation: none; }
  .home-hero-seaweed-slot { animation: none; transform: translateX(-10%); }
  .home-hero-logos { animation: none; }
  .home-hero-logo { animation: none; }
  .home-seaweed-strand animateTransform { display: none; }
}

.home-page > :not(.home-page-bg) {
  position: relative;
  z-index: 1;
}
.home-page > .home-signup-cta {
  z-index: 10;
}
.home-page > .home-footer {
  z-index: 0;
  pointer-events: none;
}
.home-page > .home-footer .home-footer-meta {
  pointer-events: auto;
}

/* Hero — gecentreerd in linkerhelft */
.home-hero {
  width: 50%;
  max-width: 560px;
  margin: 0;
  margin-left: calc(clamp(32px, 5vw, 72px) + 10%);
  text-align: left;
  padding: 36px 32px 32px 0;
  min-height: min(62vh, 580px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-radius: 0;
  position: relative;
  background: transparent;
}
.home-hero--has-image {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  padding: 80px 40px 80px;
  min-height: 420px;
  background-color: #0f172a;
}
.home-hero--has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.6) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.home-hero--has-image .home-hero-title,
.home-hero--has-image .home-hero-subtitle {
  position: relative;
  z-index: 1;
  color: #fff;
}
.home-hero--has-image .home-hero-title-accent { color: var(--accent-rose); }
.home-hero--has-image .home-hero-tag {
  color: #b8f0e8;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.home-hero--has-image .home-hero-actions,
.home-hero--has-image .home-hero-stats {
  position: relative;
  z-index: 1;
}

.home-hero-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #2f8f8f;
  background: rgba(var(--teal-green-rgb), 0.1);
  border: 1px solid rgba(var(--teal-green-rgb), 0.28);
  padding: 6px 12px;
  border-radius: 8px;
  margin: 0 0 14px;
  font-family: var(--font-sans);
}

.home-hero-title {
  font-size: 60px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.12;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  max-width: 580px;
}
.home-hero-title-line {
  display: block;
}
.home-hero-title-line--nowrap {
  white-space: nowrap;
}
.home-hero-title-accent {
  color: var(--accent-rose);
  white-space: nowrap;
}

.home-hero-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 0 24px;
  line-height: 1.55;
  max-width: 440px;
  margin-left: 0;
  margin-right: auto;
}

.home-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.home-hero-btn {
  background: var(--accent-orange-purple-grad);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-sans);
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.home-hero-btn:hover {
  filter: brightness(1.06);
}

.home-hero-btn--secondary {
  background: transparent;
  color: var(--teal-green);
  border: 1.5px solid var(--teal-green);
}
.home-hero-btn--secondary:hover { background: rgba(var(--teal-green-rgb), 0.06); }

/* ── Homepage KPI stats bar ──────────────────────────────────────────────── */
.home-hero-stats {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  margin-top: 48px;
}
.home-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
}
.home-hero-stat__value {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}
.home-hero-stat__label {
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--text-muted);
}
.home-hero-stat-divider {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  margin: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--text-muted);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
  opacity: 0.55;
}
body.theme-dark .home-hero-stat__value  { color: #fff; }
body.theme-dark .home-hero-stat__label  { color: rgba(255,255,255,0.55); }
body.theme-dark .home-hero-stat-divider { color: rgba(255,255,255,0.35); opacity: 1; }

@media (max-width: 960px) {
  .home-hero {
    width: 100%;
    max-width: none;
    margin-left: 0;
    min-height: auto;
    padding: 28px 24px 24px;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .home-hero-title { font-size: clamp(32px, 7vw, 42px); max-width: none; }
  .home-hero-subtitle { margin-left: auto; margin-right: auto; }
  .home-hero-actions { justify-content: center; }
  .home-hero-stat { align-items: center; padding: 0 24px; }
  .home-hero-logos { display: none; }
  .home-page-bg {
    left: 0;
    height: min(48vh, 420px);
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
  }
  .home-page-bg .home-seaweed-svg,
  .home-hero-seaweed-slot .home-seaweed-svg {
    width: 120%;
    margin-left: 16%;
  }
  .home-fw-wrap {
    margin-top: 0;
    padding-top: 40px;
    background: var(--bg, #f8fafc);
  }
  body.theme-dark .home-fw-wrap {
    background: #0e1621;
  }
  .home-fw-seaweed-bg {
    left: 0;
    top: -40px;
    height: 420px;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
  }
  .home-fw-seaweed-bg .home-seaweed-svg {
    width: 120%;
    margin-left: 20%;
  }
  .home-fw-seaweed-bg[data-hflip="1"] {
    height: 520px;
  }
  .home-fw-seaweed-bg[data-hflip="1"] .home-seaweed-svg {
    left: 0;
    width: auto;
  }
  .home-section { padding: 24px 16px 40px; }
  .home-fw-wrap + .home-section { margin-top: -30px; padding-top: 12px; }
  .home-articles { grid-template-columns: 1fr; gap: 24px; }
  .home-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-banner {
    max-width: none;
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }
  .home-module-grid {
    grid-template-columns: 1fr;
    margin: 0 16px 32px;
  }
  .home-featured {
    grid-template-columns: 1fr;
    margin: 0 16px 40px;
  }
}

/* ── AIRepScore home module grid ──────────────────────────────────────── */
.home-module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 24px 40px;
}

.home-module-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px;
  background: var(--bg-card);
  text-decoration: none;
  color: var(--text);
  transition: background 0.12s;
}
.home-module-card:hover { background: var(--ui-bg-soft); }

.home-module-icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

.home-module-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.home-module-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.home-module-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.home-poweredby {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 24px 48px;
  opacity: 0.7;
}

/* Featured 2-up article cards */
.home-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 24px 52px;
  border-radius: 14px;
  overflow: hidden;
}

.home-feat-card {
  position: relative;
  height: 290px;
  overflow: hidden;
  cursor: pointer;
}

.home-feat-card:first-child { border-radius: 14px 0 0 14px; }
.home-feat-card:last-child  { border-radius: 0 14px 14px 0; }

.home-feat-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}

.home-feat-card:hover .home-feat-bg { transform: scale(1.04); }

.home-feat-bg-1 { background: var(--brand-grad-a); }
.home-feat-bg-2 { background: var(--brand-grad-b); }

.home-feat-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
}

.home-feat-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 24px 22px;
  color: #fff;
}

.home-feat-label {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.home-feat-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 14px;
}

.home-feat-actions {
  display: flex;
  gap: 8px;
}

.btn-home-feat {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.15s;
}

.btn-home-feat:hover { background: rgba(255,255,255,0.32); }

/* Article sections — solid layer above framework pyramid */
.home-section {
  position: relative;
  z-index: 4;
  padding: 28px 24px 48px;
  background: var(--bg, #f8fafc);
}

.home-fw-wrap + .home-section {
  margin-top: -50px;
  padding-top: 16px;
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 54px,
    var(--bg, #f8fafc) 54px
  );
}

.home-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.home-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.3;
  font-family: var(--font-display);
}

.home-see-all {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 3px 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.home-see-all:hover { background: var(--ui-secondary-bg); color: var(--text); }

.home-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.home-article-card { cursor: pointer; }

.home-article-img {
  height: 156px;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

.home-article-img-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.home-card-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  -webkit-object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.home-img--themed-wrap {
  width: 100%;
  height: 100%;
}
.home-card-img--dark { display: none; }
body.theme-dark .home-card-img--light { display: none; }
body.theme-dark .home-card-img--dark { display: block; }

/* Light/dark image variants for homepage block screenshots */
.home-img--themed {
  background-image: var(--img-light);
}
body.theme-dark .home-img--themed {
  background-image: var(--img-dark, var(--img-light));
}

.home-article-card:hover .home-article-img-inner,
.home-article-card:hover .home-card-img { transform: scale(1.05); }

.home-article-bg-1 { background: var(--brand-grad-b); }
.home-article-bg-2 { background: var(--brand-grad-a); }
.home-article-bg-3 { background: var(--brand-grad-c); }

.home-article-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.35;
}

.home-article-body {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}

.home-article-readmore {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  cursor: pointer;
  display: block;
  margin-top: auto;
  padding-top: 4px;
}

/* Quote block */
.home-quote-block {
  padding: 60px 24px;
  text-align: center;
  display: flex;
  justify-content: center;
}

.home-quote {
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin: 0;
  border: none;
  padding: 0;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  max-width: min(720px, 78%);
}
.home-quote-body {
  text-align: center;
}
.home-quote-line {
  display: block;
}
.home-quote-mark {
  display: inline;
  font-family: Georgia, serif;
  font-size: 1.55em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: 0.28em;
  color: var(--asyntis-accent);
  opacity: 0.88;
  font-weight: 400;
}
.home-quote-mark--close {
  top: 0.3em;
  margin-left: 0.05em;
}
/* ── AIRepScore Framework Pyramid ───────────────────────────────────────── */
.home-fw-wrap {
  position: relative;
  z-index: 1;
  margin-top: -32px;
  padding-top: 48px;
  overflow-x: clip;
  overflow-y: visible;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    #f8fafc 42%,
    #f8fafc 100%
  );
}
.home-fw-inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 4px;
  overflow: visible;
}

/* Sticky behavior: when scrolling through wrapper, pin inner */
.home-fw-wrap.fw-sticky-active .home-fw-inner {
  position: sticky;
  top: 0;
}

.home-fw-hd {
  text-align: center;
  margin-bottom: 32px;
}

.home-fw-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text, #111);
  margin: 0 0 12px;
}

.home-fw-cols-hd {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  max-width: 900px;
  margin: 0 auto;
}
.home-fw-cols-hd span {
  cursor: pointer;
  transition: color 0.2s;
}
.home-fw-cols-hd span:hover {
  color: var(--teal-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 3-column layout */
.home-fw-stage {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 440px) 1fr;
  gap: 24px 32px;
  align-items: stretch; /* side columns fill SVG height, annotations auto-divide */
}

.home-fw-pyramid-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
  width: 100%;
  flex-shrink: 0;
}
.home-fw-copyright {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 100%;
  font-size: 10px;
  color: var(--text-muted, #9ca3af);
  text-align: right;
  margin: 10px 0 0;
  padding-right: 4px;
  letter-spacing: 0.03em;
}

.home-fw-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Hover highlight on SVG layers */
.fw-layer polygon {
  transition: opacity 0.25s ease;
}
.fw-layer:hover {
  opacity: 0.88;
}
.fw-layer.fw-layer-dim {
  opacity: 0.28;
}
.fw-layer.fw-layer-highlight {
  opacity: 1;
}

/* Side annotation columns — flex:1 children auto-align with SVG layers */
.home-fw-side {
  display: flex;
  flex-direction: column;
}

/* Each annotation takes an equal share of the column height (= 1 SVG layer) */
.home-fw-ann {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.home-fw-ann--l {
  transform: translateX(-28px);
  text-align: right;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}
.home-fw-ann--l .fw-ann-name,
.home-fw-ann--l .fw-ann-desc {
  text-shadow: 0 0 14px #f8fafc, 0 0 6px #f8fafc;
}
body.theme-dark .home-fw-ann--l .fw-ann-name,
body.theme-dark .home-fw-ann--l .fw-ann-desc {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 16px rgba(15, 20, 25, 0.95),
    0 0 32px rgba(15, 20, 25, 0.85);
}

.home-fw-ann--r {
  transform: translateX(28px);
  text-align: left;
  align-items: flex-start;
}

.home-fw-ann.fw-vis {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger handled by JS; no CSS delay needed */

.fw-ann-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-green);
  display: block;
  margin-bottom: 4px;
  line-height: 1.3;
}

.fw-ann-desc {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  margin: 0;
}

/* Footer quote */
.home-fw-quote {
  text-align: center;
  font-family: var(--font-display, Georgia, serif);
  font-size: 18px;
  font-style: italic;
  color: var(--teal-green);
  margin: 24px auto 0;
  max-width: 640px;
  padding: 0 24px;
  border: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.home-fw-quote .home-quote-mark {
  font-size: 1.45em;
  top: 0.22em;
  opacity: 0.85;
}

.home-fw-quote.fw-vis {
  opacity: 1;
  transform: translateY(0);
}

/* Dark mode */
body.theme-dark .home-fw-wrap {
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    #0e1621 42%,
    #0e1621 100%
  );
}
body.theme-dark .home-fw-title   { color: #e2e8f0; }
body.theme-dark .home-fw-cols-hd { color: #b8c0cc; }
body.theme-dark .home-fw-cols-hd span:hover { color: #7ee8d8; }
/* Left labels sit over seaweed — use light neutrals, not teal */
body.theme-dark .home-fw-ann--l .fw-ann-name { color: #e8eaed; }
body.theme-dark .home-fw-ann--l .fw-ann-desc { color: #a8b0bc; }
body.theme-dark .home-fw-ann--r .fw-ann-name { color: #7ee8d8; }
body.theme-dark .home-fw-ann--r .fw-ann-desc { color: #a8b0bc; }
body.theme-dark .home-fw-side { position: relative; z-index: 2; }
body.theme-dark .home-fw-copyright { color: #6b788e; }
body.theme-dark .home-fw-quote   { color: #7ee8d8; }
/* Pyramid + footer waves — muted teal blues for dark backgrounds */
body.theme-dark {
  --fw-pyramid-0-a: #1a4f62;
  --fw-pyramid-0-b: #154a52;
  --fw-pyramid-1-a: #1b5a68;
  --fw-pyramid-1-b: #165a55;
  --fw-pyramid-2-a: #206272;
  --fw-pyramid-2-b: #1a6068;
  --fw-pyramid-3-a: #256a7a;
  --fw-pyramid-3-b: #1f6670;
  --home-wave-from: #1a4f58;
  --home-wave-to: #1e5568;
}
body.theme-dark .home-fw-svg line.fw-divider {
  stroke: rgba(255, 255, 255, 0.28);
}
body.theme-dark .home-fw-svg .fw-icon line,
body.theme-dark .home-fw-svg .fw-icon path {
  stroke: #ffffff;
}

/* Pyramid mobile detail panel (tap-to-reveal) */
.home-fw-mobile-detail {
  display: none;
}
.home-fw-mobile-detail-block + .home-fw-mobile-detail-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e5e7eb);
}
body.theme-dark .home-fw-mobile-detail-block + .home-fw-mobile-detail-block {
  border-top-color: #2a3145;
}

/* Responsive: stack on small screens */
@media (max-width: 700px) {
  .home-fw-stage { grid-template-columns: 1fr; gap: 0; }
  .home-fw-side--l { order: 2; }
  .home-fw-pyramid-wrap { order: 1; }
  .home-fw-side--r { order: 3; }
  .home-fw-ann {
    height: auto;
    padding: 10px 0;
    text-align: left;
    align-items: flex-start;
    opacity: 1;
    transform: none;
  }
  .home-fw-ann--l { transform: none; }
  .home-fw-ann--r { transform: none; }
  .home-fw-cols-hd { display: none; }
  .home-fw-quote {
    opacity: 1;
    transform: none;
  }
  .home-fw-wrap.fw-sticky-active .home-fw-inner {
    position: static;
  }
}

@media (max-width: 768px) {
  .home-fw-side {
    display: none !important;
  }
  .home-fw-ann {
    opacity: 0 !important;
    transform: none !important;
  }
  .home-fw-quote {
    display: none !important;
  }
  .home-fw-mobile-detail {
    display: block;
    width: 100%;
    padding: 14px 4px 0;
    text-align: left;
    min-height: 0;
  }
  .home-fw-mobile-detail.is-empty {
    display: none;
  }
  .home-fw-mobile-detail .fw-ann-name {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .home-fw-mobile-detail .fw-ann-desc {
    font-size: 13px;
    line-height: 1.55;
  }
}

/* Case studies */
.home-cases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.home-case-card { cursor: pointer; }

.home-case-img {
  height: 138px;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.home-case-img-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.home-case-card:hover .home-case-img-inner,
.home-case-card:hover .home-card-img { transform: scale(1.05); }

.home-case-bg-1 { background: var(--brand-grad-a); }
.home-case-bg-2 { background: var(--brand-grad-b); }
.home-case-bg-3 { background: var(--brand-grad-c); }
.home-case-bg-4 { background: var(--brand-grad-a); }
.home-case-bg-5 { background: var(--brand-grad-b); }

.home-case-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}
.home-case-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
  margin: 3px 0 0;
  line-height: 1.4;
}

/* Banner */
.home-banner {
  position: relative;
  height: 110px;
  border-radius: 12px;
  margin: 32px auto;
  max-width: 50%;
  overflow: hidden;
  cursor: pointer;
}

.home-banner-bg {
  position: absolute;
  inset: 0;
  background: var(--brand-grad-banner);
}

.home-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, transparent 60%);
}

.home-banner-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 20px;
}

.home-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.home-banner-text {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 3px;
  font-family: var(--font-display);
}

.home-banner-action {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.home-quote-final { padding-top: 60px; }

/* ── Homepage demo dashboard (marketing preview) ─────────────────────────── */
.home-demo-dash {
  --demo-p: 0;
  position: relative;
  z-index: 2;
  margin: 48px clamp(16px, 4vw, 48px) 32px;
  padding: 0;
}
.home-demo-dash-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 28px;
}
.home-demo-dash-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-green);
  background: var(--teal-green-bg);
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.home-demo-dash-title {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
  margin: 0 0 10px;
}
.home-demo-dash-lead {
  font-size: 15px;
  line-height: 1.55;
  color: #64748b;
  margin: 0;
}

.home-demo-frame {
  border-radius: 20px;
  background: linear-gradient(145deg, #f8fafc 0%, #eef6f9 45%, #e8f4f2 100%);
  padding: clamp(12px, 2vw, 20px);
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.06),
    0 24px 64px rgba(76, 185, 185, 0.12);
}
.home-demo-dash.is-live .home-demo-frame {
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.08),
    0 32px 80px rgba(76, 185, 185, 0.18);
}

.home-demo-shell {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  gap: 0;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  overflow: hidden;
  min-height: 420px;
}
.home-demo-side {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-right: 1px solid #e2e8f0;
  padding: 18px 14px;
}
.home-demo-side-brand {
  margin-bottom: 20px;
  padding: 0 4px;
}
.home-demo-side-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 28px;
  object-fit: contain;
  object-position: left center;
}
.home-demo-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-demo-nav-item {
  font-size: 12px;
  color: #64748b;
  padding: 8px 10px;
  border-radius: 8px;
}
.home-demo-nav-item.is-active {
  background: var(--teal-green-bg);
  color: var(--teal-700, #0d6e6a);
  font-weight: 600;
}

.home-demo-main {
  padding: 16px 18px 20px;
  background: #fff;
}
.home-demo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.home-demo-topbar-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.home-demo-pill {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid #e2e8f0;
}

.home-demo-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.home-demo-row2 {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.85fr;
  gap: 12px;
}

.home-demo-card {
  background: #fff;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  padding: 14px 14px 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.home-demo-dash.is-live .home-demo-card {
  box-shadow: 0 8px 24px rgba(76, 185, 185, 0.1);
}

.home-demo-card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 10px;
}
.home-demo-card--highlight {
  background: linear-gradient(160deg, #fffbeb 0%, #fff 55%);
  border-color: #fde68a;
}

.home-demo-donut-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.home-demo-donut {
  width: 128px;
  height: 128px;
}
.home-demo-donut-track {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 9;
}
.home-demo-donut-arc {
  fill: none;
  stroke: url(#tealGreenGrad);
  stroke-width: 9;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.home-demo-donut-val {
  font-size: 19.8px;
  font-weight: 700;
  fill: #111827;
}
.home-demo-donut-sub {
  font-size: 11px;
  fill: #64748b;
}

.home-demo-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 100px;
}
.home-demo-chip--up {
  color: #15803d;
  background: #dcfce7;
}
.home-demo-donut-wrap .home-demo-chip {
  position: absolute;
  top: 4px;
  right: 4px;
}

.home-demo-metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-bottom: 8px;
}
.home-demo-metric--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.home-demo-metric-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
}
.home-demo-metric--stack .home-demo-metric-lbl {
  margin-top: 2px;
}
.home-demo-metric-val {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.home-demo-metric-val--rank small {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}
.home-demo-metric-lbl {
  font-size: 12px;
  color: #64748b;
}
.home-demo-muted {
  font-size: 11px;
  color: #94a3b8;
  margin: 0 0 8px;
}

.home-demo-spark {
  width: 100%;
  height: 48px;
  display: block;
}
.home-demo-spark-area {
  fill: url(#tealGreenGrad);
  opacity: 0.32;
}
.home-demo-spark-line {
  fill: none;
  stroke: url(#tealGreenGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-demo-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 44px;
  margin-top: 4px;
}
.home-demo-bars--tall {
  height: 52px;
}
.home-demo-bar {
  display: block;
  flex: 1 1 0;
  align-self: flex-end;
  min-width: 0;
  height: var(--bar-h, 3px);
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--teal-green-grad);
  opacity: 0.92;
}
/* Ascending trend shape (JS sets px height on scroll) */
.home-demo-bars--trend:not(.home-demo-bars--tall) .home-demo-bar:nth-child(1) { height: 38%; }
.home-demo-bars--trend:not(.home-demo-bars--tall) .home-demo-bar:nth-child(2) { height: 48%; }
.home-demo-bars--trend:not(.home-demo-bars--tall) .home-demo-bar:nth-child(3) { height: 58%; }
.home-demo-bars--trend:not(.home-demo-bars--tall) .home-demo-bar:nth-child(4) { height: 70%; }
.home-demo-bars--trend:not(.home-demo-bars--tall) .home-demo-bar:nth-child(5) { height: 84%; }
.home-demo-bars--trend.home-demo-bars--tall .home-demo-bar:nth-child(1) { height: 34%; }
.home-demo-bars--trend.home-demo-bars--tall .home-demo-bar:nth-child(2) { height: 44%; }
.home-demo-bars--trend.home-demo-bars--tall .home-demo-bar:nth-child(3) { height: 56%; }
.home-demo-bars--trend.home-demo-bars--tall .home-demo-bar:nth-child(4) { height: 72%; }
.home-demo-bars--trend.home-demo-bars--tall .home-demo-bar:nth-child(5) { height: 84%; }
.home-demo-bars--trend.home-demo-bars--tall .home-demo-bar:nth-child(6) { height: 94%; }

.home-demo-hbars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-demo-hbars li {
  display: grid;
  grid-template-columns: 1fr minmax(0, 2fr) 32px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #475569;
}
.home-demo-hbar {
  height: 8px;
  background: #eef2f6;
  border-radius: 100px;
  overflow: hidden;
}
.home-demo-hbar i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--teal-green-grad);
  width: calc(var(--bar-w, 0) * 1%);
}
.home-demo-hbars em {
  font-style: normal;
  font-weight: 600;
  color: #0f172a;
  text-align: right;
}

.home-demo-radar-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.home-demo-radar {
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
  display: block;
}
.home-demo-radar-grid {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 1;
}
.home-demo-radar-axis {
  stroke: #eef2f6;
  stroke-width: 1;
}
.home-demo-radar-data {
  transform: scale(var(--radar-fill-scale, 0.55));
  transform-origin: 100px 100px;
}
.home-demo-radar-fill {
  fill: rgba(76, 185, 185, 0.38);
  opacity: var(--radar-fill-opacity, 0);
}
.home-demo-radar-stroke {
  fill: none;
  stroke: url(#tealGreenGrad);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: var(--radar-fill-opacity, 0);
}

.home-demo-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: #475569;
  display: grid;
  grid-template-columns: 8px max-content 2rem;
  column-gap: 8px;
  row-gap: 6px;
  align-items: center;
}
.home-demo-legend li {
  display: contents;
}
.home-demo-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--teal-green));
  justify-self: center;
}
.home-demo-legend-label {
  white-space: nowrap;
}
.home-demo-legend b {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #0f172a;
}

.home-demo-star {
  font-size: 28px;
  color: #eab308;
  line-height: 1;
  margin-bottom: 6px;
}
.home-demo-highlight-txt {
  font-size: 13px;
  line-height: 1.45;
  color: #334155;
  margin: 0 0 4px;
}
.home-demo-gold-spark {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  display: block;
}
.home-demo-gold-area {
  fill: #fde68a;
  opacity: var(--gold-opacity, 0);
}
.home-demo-gold-line {
  fill: none;
  stroke: #eab308;
  stroke-width: 2;
}

@media (max-width: 1100px) {
  .home-demo-kpis { grid-template-columns: repeat(2, 1fr); }
  .home-demo-row2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .home-demo-shell { grid-template-columns: 1fr; }
  .home-demo-side { display: none; }
  .home-demo-kpis { grid-template-columns: 1fr; }
}

/* ── Homepage BP demo dashboard (narrower marketing preview) ─────────────── */
.home-bp-demo-dash {
  --bp-demo-p: 0;
  position: relative;
  z-index: 2;
  max-width: 1020px;
  margin: 52px auto 0;
  padding: 0 clamp(16px, 3vw, 24px) 56px;
}
.home-bp-demo-dash + .home-signup-cta {
  margin-top: 64px;
}
.home-quote-pre-signup {
  padding-top: 48px;
  padding-bottom: 48px;
}
.home-quote-pre-signup + .home-signup-cta {
  margin-top: 64px;
}
.home-bp-demo-quote {
  margin: 0 auto 36px;
  max-width: min(720px, 78%);
  text-align: center;
}
.home-bp-demo-quote .home-quote-body {
  display: block;
  text-align: center;
}
.home-bp-demo-dash + .home-signup-cta + .home-footer {
  margin-top: -120px;
}
.home-bp-demo-dash + .home-signup-cta + .home-footer .home-footer-wave-wrap {
  top: -72px;
  height: calc(100% + 72px);
}
.home-signup-cta + .home-footer {
  margin-top: -120px;
  height: clamp(200px, 30vh, 300px);
}
.home-signup-cta + .home-footer .home-footer-wave-wrap {
  top: -72px;
  height: calc(100% + 72px);
}
/* legacy: bp-demo directly above footer (no signup block) */
.home-bp-demo-dash + .home-footer {
  margin-top: -200px;
}
.home-bp-demo-dash + .home-footer .home-footer-wave-wrap {
  top: -100px;
  height: calc(100% + 100px);
}
.home-bp-demo-frame {
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fafc 0%, #eef6f9 45%, #e8f4f2 100%);
  padding: clamp(10px, 1.8vw, 16px);
  box-shadow:
    0 4px 24px rgba(15, 23, 42, 0.06),
    0 20px 56px rgba(76, 185, 185, 0.1);
}
.home-bp-demo-dash.is-live .home-bp-demo-frame {
  box-shadow:
    0 8px 28px rgba(15, 23, 42, 0.08),
    0 28px 72px rgba(76, 185, 185, 0.16);
}
.home-bp-demo-shell {
  min-height: 360px;
}
.home-bp-demo-glance {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-bp-demo-glance-hdr {
  padding: 0 2px;
}
.home-bp-demo-glance-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 32px;
  align-items: start;
}
.home-bp-demo-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding: 0 8px 0 0;
}
.home-bp-demo-eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  text-align: left;
}
.home-bp-demo-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #94a3b8;
  text-align: left;
}
.home-bp-demo-radar-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.home-bp-demo-radar {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.home-bp-demo-radar-grid {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 1;
}
.home-bp-demo-radar-axis {
  stroke: #e5e7eb;
  stroke-width: 1;
}
.home-bp-demo-radar-ref {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.55;
}
.home-bp-demo-radar-shape {
  transform: scale(calc(0.08 + 0.92 * var(--bp-demo-p, 0)));
  transform-origin: 100px 100px;
}
.home-bp-demo-radar-fill {
  fill: url(#tealGreenGradFill);
  opacity: calc(0.12 + 0.88 * var(--bp-demo-p, 0));
}
.home-bp-demo-radar-stroke {
  fill: none;
  stroke: url(#tealGreenGrad);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: calc(0.2 + 0.8 * var(--bp-demo-p, 0));
}
.home-bp-demo-radar-labels {
  pointer-events: none;
}
.home-bp-demo-radar-label {
  font-size: 8.5px;
  fill: #374151;
  font-family: var(--font-sans);
  font-weight: 500;
}
.home-bp-demo-radar[data-label-mode="full"] .home-bp-demo-radar-label {
  font-size: 7.25px;
}
.home-bp-demo-radar-score {
  font-size: 9px;
  font-weight: 700;
  fill: #111827;
  font-family: var(--font-sans);
}
.home-bp-demo-radar-dot {
  fill: url(#tealGreenGradFill);
}
.home-bp-demo-legend {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  align-self: center;
  width: 100%;
  margin-top: 10px;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}
.home-bp-demo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.home-bp-demo-legend-line {
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  flex-shrink: 0;
}
.home-bp-demo-legend-line--brand {
  background: var(--teal-green-grad);
}
.home-bp-demo-legend-line--avg {
  width: 22px;
  height: 0;
  border-top: 2px dashed #94a3b8;
  background: none;
}
.home-bp-demo-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
  min-width: 0;
}
.home-bp-demo-panel {
  background: #f9fafb;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
}
.home-bp-demo-panel-title {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #374151;
}
.home-bp-demo-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-bp-demo-bars li {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(48px, 1fr) 26px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #374151;
}
.home-bp-demo-bars li > span {
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
}
@media (max-width: 720px) {
  .home-bp-demo-bars li {
    grid-template-columns: 108px 1fr 26px;
  }
  .home-bp-demo-bars li > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (min-width: 900px) {
  .home-bp-demo-glance-body {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
.home-bp-demo-bar-track {
  height: 7px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.home-bp-demo-bar {
  display: block;
  height: 100%;
  border-radius: 4px;
  width: calc(var(--bp-bar-w, 0) * 1%);
}
.home-bp-demo-bar--strong {
  background: var(--score-strong-grad);
}
.home-bp-demo-bar--weak {
  background: var(--score-weak-grad);
}
.home-bp-demo-bars em {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  text-align: right;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.home-bp-demo-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal-green);
}
.home-bp-demo-balance-text {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.45;
  font-style: italic;
  color: #4b5563;
}
.home-bp-demo-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}
.home-bp-demo-balance-pole {
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}
.home-bp-demo-balance-track {
  flex: 1;
  height: 8px;
  background: var(--bp-balance-grad, linear-gradient(90deg, #4B7BE5, #3BC3A9));
  border-radius: 10px;
  position: relative;
  overflow: visible;
}
.home-bp-demo-balance-indicator {
  position: absolute;
  top: -11px;
  left: calc(var(--bp-balance-pos, 45.5) * 1%);
  transform: translateX(-50%) scaleY(var(--bp-demo-p, 1));
  width: 12px;
  height: 10px;
  background: #334155;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  pointer-events: none;
  opacity: var(--bp-demo-p, 1);
  transition: left 0.4s ease;
}
.home-bp-demo-balance-scores {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 820px) {
  .home-bp-demo-glance-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .home-bp-demo-left {
    margin-bottom: 4px;
    padding-right: 0;
  }
}
@media (max-width: 720px) {
  .home-bp-demo-shell .home-demo-side {
    display: none;
  }
}

/* Footer — flip op wave-wrap; tekst ín dezelfde (geflippte) box met tegen-flip */
.home-signup-cta {
  position: relative;
  z-index: 4;
  margin: 0 clamp(16px, 4vw, 48px) 0;
  isolation: isolate;
}
.home-signup-cta-shell {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, #eef6f9 0%, #f3fbf9 55%, #ffffff 100%);
  border: 1px solid rgba(76, 185, 185, 0.28);
  box-shadow:
    0 20px 56px rgba(92, 166, 201, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.home-signup-cta-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-orange-purple-grad);
}
.home-signup-cta-inner {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  align-items: center;
  gap: 40px 52px;
  padding: 44px 52px 40px;
}
.home-signup-cta-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.home-signup-cta-donut-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 10px;
}
.home-signup-cta-donut-label sup {
  font-size: 0.65em;
}
.home-signup-cta-gauge-wrap {
  position: relative;
  width: 168px;
  height: 168px;
  margin-bottom: 10px;
  transition: filter 0.6s ease;
}
.home-signup-cta.is-live .home-signup-cta-gauge-wrap {
  filter: drop-shadow(0 6px 28px rgba(59, 195, 169, 0.28));
}
.home-signup-cta-gauge {
  width: 100%;
  height: 100%;
  display: block;
}
.home-signup-cta-gauge-track {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 10;
}
.home-signup-cta-gauge-arc {
  fill: none;
  stroke: url(#scoreGradGood);
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
}
.home-signup-cta-gauge-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.home-signup-cta-gauge-val {
  font-size: 36px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
  letter-spacing: -0.02em;
}
.home-signup-cta-gauge-denom {
  font-size: 13px;
  color: #9ca3af;
  margin-top: 3px;
}
.home-signup-cta-badge {
  margin-bottom: 6px;
}
.home-signup-cta-meta {
  margin: 0;
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.35;
}
.home-signup-cta-meta--corrected {
  color: var(--teal-green);
  margin-bottom: 2px;
}
.home-signup-cta-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.home-signup-cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--text, #0f172a);
}
.home-signup-cta-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
}
.home-signup-cta-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 0;
}
.home-signup-cta-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.home-signup-cta-input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(76, 185, 185, 0.35);
  border-radius: 10px;
  font-size: 14px;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.home-signup-cta-input:focus {
  border-color: var(--teal-green);
  box-shadow: 0 0 0 3px rgba(76, 185, 185, 0.22);
}
.home-signup-cta-btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 10px;
  background: var(--accent-orange-purple-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(233, 112, 69, 0.35);
  transition: filter 0.15s, transform 0.1s;
}
.home-signup-cta-btn:hover {
  filter: brightness(1.06);
}
.home-signup-cta-btn:active { transform: translateY(1px); }
.home-signup-cta-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}
.home-signup-cta-error {
  margin: 0;
  padding: 0 40px 20px;
  font-size: 13px;
  color: #dc2626;
}
body.theme-dark .home-signup-cta-shell {
  background: linear-gradient(145deg, rgba(92, 166, 201, 0.12) 0%, rgba(59, 195, 169, 0.08) 55%, rgba(18, 24, 36, 0.95) 100%);
  border-color: rgba(76, 185, 185, 0.22);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}
body.theme-dark .home-signup-cta-title { color: var(--text); }
body.theme-dark .home-signup-cta-donut-label { color: #c8d0e0; }
body.theme-dark .home-signup-cta-gauge-track { stroke: #2a3145; }
body.theme-dark .home-signup-cta-gauge-val { color: var(--text); }
body.theme-dark .home-signup-cta-meta { color: #5a6480; }
body.theme-dark .home-signup-cta-label { color: #c8d0e0; }
body.theme-dark .home-signup-cta-input {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}

.home-footer {
  position: relative;
  width: 100%;
  height: clamp(220px, 30vh, 300px);
  margin-top: 24px;
  padding: 0;
  z-index: 2;
}

.home-footer-wave-wrap {
  position: absolute;
  inset: 0;
  transform: scaleY(-1);
  transform-origin: center bottom;
  overflow: visible;
}

.home-footer-wave-wrap .home-wave-svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: hidden;
}

.home-footer-wave-wrap .home-wave-layer {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: home-footer-wave-layer 10s ease-in-out infinite;
  opacity: 0.48;
}

.home-footer-wave-wrap .home-wave-layer:nth-child(1) { animation-delay: 0s; }
.home-footer-wave-wrap .home-wave-layer:nth-child(2) { animation-delay: -2s; }
.home-footer-wave-wrap .home-wave-layer:nth-child(3) { animation-delay: -4s; }
.home-footer-wave-wrap .home-wave-layer:nth-child(4) { animation-delay: -6s; }
.home-footer-wave-wrap .home-wave-layer:nth-child(5) { animation-delay: -8s; }

@keyframes home-footer-wave-layer {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.42;
  }
  50% {
    transform: translateY(-12px);
    opacity: 0.58;
  }
}

/* top i.p.v. bottom: parent is scaleY(-1) → visueel onderaan op de waves */
.home-footer-meta {
  position: absolute;
  right: clamp(20px, 4vw, 44px);
  top: clamp(44px, 8vh, 72px);
  bottom: auto;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  max-width: min(100% - 32px, 920px);
  text-align: right;
  transform: scaleY(-1);
  transform-origin: 100% 0;
  pointer-events: auto;
}

.home-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.1em 0;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.home-footer-product {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.1em 0;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.home-footer-product a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(12, 58, 72, 0.45);
}

.home-footer-product a:hover {
  text-decoration: underline;
}

.home-footer-legal a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(12, 58, 72, 0.45);
}

.home-footer-legal a:hover {
  text-decoration: underline;
}

.home-footer-sep {
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0.35em;
  user-select: none;
}

.home-footer-text {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(12, 58, 72, 0.45);
}

/* Wide viewports: 2 footer rows (legal + copyright share row 2) */
@media (min-width: 900px) {
  .home-footer-meta {
    left: clamp(20px, 4vw, 44px);
    right: clamp(20px, 4vw, 44px);
    max-width: none;
    align-items: stretch;
    text-align: left;
    transform-origin: 50% 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 5px;
  }

  .home-footer-product {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin: 0;
  }

  .home-footer-legal {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    min-width: 0;
  }

  .home-footer-text {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    align-self: center;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-footer-wave-wrap .home-wave-layer {
    animation: none;
  }
}

body.theme-dark .home-footer-text,
body.theme-dark .home-footer-legal a {
  color: #6b788e;
  text-shadow: none;
}

body.theme-dark .home-footer-sep {
  color: rgba(107, 120, 142, 0.72);
}

body.theme-dark .home-footer-wave-wrap .home-wave-layer {
  animation-name: home-footer-wave-layer-dark;
  opacity: 0.24;
}

@keyframes home-footer-wave-layer-dark {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-12px);
    opacity: 0.3;
  }
}

/* ── Marketing homepage — phone ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .home-hero {
    padding: 20px 16px 28px;
  }
  .home-hero-title {
    font-size: clamp(28px, 8.2vw, 34px);
    line-height: 1.15;
    margin-bottom: 12px;
  }
  .home-hero-title-line--nowrap {
    white-space: normal;
  }
  .home-hero-tag {
    font-size: 10px;
    padding: 5px 10px;
    margin-bottom: 12px;
  }
  .home-hero-subtitle {
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .home-hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .home-hero-btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 20px;
  }
  .home-hero-stats {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    width: 100%;
  }
  .home-hero-stat-divider {
    display: none;
  }
  .home-hero-stat {
    align-items: center;
    padding: 0;
  }
  .home-hero-stat__label {
    white-space: normal;
    text-align: center;
    max-width: 220px;
  }
  .home-page-bg {
    height: min(38vh, 260px);
    opacity: 0.42;
  }

  /* Phone-only: hide decorative seaweed */
  .home-page-bg,
  .home-fw-seaweed-bg {
    display: none !important;
  }

  /* Pyramid tap-detail: keep articles section below */
  .home-fw-wrap + .home-section {
    margin-top: 28px;
    padding-top: 24px;
  }
  .home-fw-pyramid-wrap.has-mobile-detail {
    margin-bottom: 8px;
  }
  .home-fw-mobile-detail {
    margin-bottom: 20px;
    padding-bottom: 8px;
  }

  .home-demo-dash {
    margin: 28px 12px 20px;
  }
  .home-demo-frame {
    padding: 10px;
    border-radius: 14px;
  }
  .home-demo-main {
    padding: 12px;
  }
  .home-demo-topbar-title {
    font-size: 16px;
  }
  .home-demo-card {
    padding: 12px;
  }
  .home-demo-metric-val {
    font-size: 24px;
  }
  .home-demo-hbars li {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) 28px;
    gap: 6px;
    font-size: 11px;
  }
  .home-demo-radar-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .home-demo-radar {
    max-width: 160px;
  }

  .home-fw-inner {
    padding: 0 16px 16px;
  }
  .home-fw-title {
    font-size: 22px;
  }
  .home-fw-hd {
    margin-bottom: 18px;
  }
  .home-fw-seaweed-bg {
    display: none !important;
  }
  .home-fw-quote {
    font-size: 15px;
    line-height: 1.45;
    padding: 0 4px;
    margin-top: 16px;
  }
  .fw-ann-name {
    font-size: 12px;
  }
  .fw-ann-desc {
    font-size: 11px;
  }

  .home-section-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .home-article-title {
    font-size: 17px;
  }
  .home-article-img {
    height: 140px;
  }

  /* Article + case carousels (one card visible, swipe sideways) */
  .home-articles,
  .home-cases {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 16px 14px;
    margin-left: -16px;
    margin-right: -16px;
    scrollbar-width: none;
    grid-template-columns: unset;
  }
  .home-articles::-webkit-scrollbar,
  .home-cases::-webkit-scrollbar {
    display: none;
  }
  .home-article-card,
  .home-case-card {
    flex: 0 0 calc(100% - 32px);
    scroll-snap-align: center;
    min-width: 0;
  }

  .home-case-img {
    height: 120px;
  }

  .home-quote-block {
    padding: 32px 16px;
  }
  .home-quote {
    font-size: clamp(18px, 5.4vw, 22px);
    max-width: 100%;
    line-height: 1.5;
  }
  /* Natural sentence wrapping instead of forced line-per-i18n-key */
  .home-quote-line {
    display: inline;
  }
  .home-quote-line + .home-quote-line::before {
    content: " ";
  }
  .home-quote-mark {
    white-space: nowrap;
  }
  .home-quote-final {
    padding-top: 32px;
  }

  .home-bp-demo-quote {
    max-width: 100%;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    text-align: center;
  }
  .home-bp-demo-quote .home-quote-body,
  .home-bp-demo-quote .home-quote-line {
    text-align: center;
  }

  .home-banner {
    max-width: none;
    width: 100%;
    margin: 24px 0;
    border-radius: 0;
    height: auto;
    min-height: 0;
  }
  .home-banner-content {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 18px 16px;
    gap: 12px;
  }
  .home-banner-content .home-banner-cta,
  .home-banner-content .btn-home-feat {
    margin-left: 0 !important;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .home-banner-text {
    font-size: 15px;
  }
  .home-banner-action {
    font-size: 12px;
  }
  .home-banner-icon {
    width: 40px;
    height: 40px;
  }

  .home-footer {
    height: clamp(140px, 22vh, 180px);
    margin-top: 12px;
  }
  .home-bp-demo-dash + .home-footer {
    margin-top: -140px;
  }
  .home-bp-demo-dash + .home-signup-cta + .home-footer,
  .home-signup-cta + .home-footer {
    margin-top: -72px;
    height: clamp(160px, 26vh, 220px);
  }
  .home-bp-demo-dash + .home-signup-cta + .home-footer .home-footer-wave-wrap,
  .home-signup-cta + .home-footer .home-footer-wave-wrap {
    top: -48px;
    height: calc(100% + 48px);
  }
  .home-bp-demo-dash + .home-footer .home-footer-wave-wrap {
    top: -72px;
    height: calc(100% + 72px);
  }
  .home-footer-meta {
    right: 16px;
    top: 32px;
    max-width: calc(100% - 32px);
  }

  .home-footer-legal,
  .home-footer-text {
    font-size: 10px;
  }

  .home-signup-cta {
    margin: 48px 16px 0;
  }
  .home-signup-cta-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 24px 28px;
  }
  .home-signup-cta-donut {
    padding-bottom: 4px;
  }
  .home-signup-cta-gauge-wrap {
    width: 152px;
    height: 152px;
  }
  .home-signup-cta-gauge-val {
    font-size: 32px;
  }
  .home-signup-cta-right {
    gap: 18px;
  }
  .home-signup-cta-form {
    flex-direction: column;
    align-items: stretch;
  }
  .home-signup-cta-btn {
    width: 100%;
  }
  .home-signup-cta-error {
    padding: 0 20px 16px;
  }

  .home-start-modal-inner {
    width: auto;
    max-width: min(420px, calc(100vw - 32px));
    margin: 0 16px;
  }

  .home-hero--has-image {
    padding: 48px 16px 56px;
    min-height: 320px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG ARTICLE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

#view-blog-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
  padding: 0;
}

/* Guest articles: natural document height — module-content scrolls (no white fill) */
body.auth-guest #view-blog-article {
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  overflow: visible;
}

/* ── Header image ──────────────────────────────────────────────────────── */
.ba-header {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  flex-shrink: 0;
}

.ba-header-img {
  position: absolute;
  inset: 0;
  background: var(--brand-grad-hero);
  background-size: cover;
  background-position: center;
}

.ba-header-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.05) 100%);
}

.ba-header-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 var(--article-page-pad-x) 36px;
  color: #fff;
}

.ba-category-tag {
  display: inline-block;
  background: var(--teal-green-grad);
  color: #111;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
}

.ba-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #fff;
  margin: 0 0 12px;
  max-width: 100%;
}

.ba-date {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* ── Meta bar ──────────────────────────────────────────────────────────── */
.ba-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--article-page-pad-x);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  gap: 24px;
}

.ba-author-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ba-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-grad-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

.ba-author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.ba-author-role {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.3;
}

.ba-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ba-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ba-action-btn:hover {
  background: var(--ui-secondary-bg);
  color: var(--text);
  border-color: var(--ui-border);
}

.ba-action-btn svg { flex-shrink: 0; }

/* ── Body: two columns ─────────────────────────────────────────────────── */
.ba-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  max-width: var(--article-page-max);
  margin: 0 auto;
  padding: 48px var(--article-page-pad-x) 80px;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
}

/* ── Left column: article content ──────────────────────────────────────── */
.ba-content { min-width: 0; }

.ba-locale-fallback-notice {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
body.theme-dark .ba-locale-fallback-notice {
  color: #fcd34d;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.28);
}

.ba-intro,
.ba-content p.ae-intro {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 22px;
  font-family: var(--font-sans);
}

.ba-content p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 14px;
  font-family: var(--font-sans);
}

.ba-h2,
.ba-content h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 32px 0 12px;
  line-height: 1.3;
}
.ba-content h2 *,
.ba-content h3 *,
.ba-h2 *,
.ba-h3 * {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.ba-h3,
.ba-content h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 22px 0 8px;
  line-height: 1.35;
  font-family: var(--font-sans);
}

/* Half-width image block */
.ba-image-half {
  float: right;
  width: 48%;
  margin: 4px 0 24px 32px;
  border-radius: 10px;
  overflow: hidden;
}

.ba-image-half-inner {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(145deg, #1b5c6e 0%, #0d3c4c 100%);
  background-size: cover;
  background-position: center;
}

.ba-image-caption {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 0 0;
  line-height: 1.4;
  font-style: italic;
}

/* Full-width illustration */
.ba-illustration {
  clear: both;
  width: 100%;
  margin: 32px 0;
  border-radius: 12px;
  overflow: hidden;
}

.ba-illustration-inner {
  width: 100%;
  background: var(--brand-grad-hero);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-illustration img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0;
}

/* Markdown / playbook images rendered as standalone <img> in a paragraph */
.ba-content p:has(> img:only-child) {
  margin: 32px 0;
}
.ba-content p > img:only-child,
.ba-content .ba-illustration img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
}

.ba-illustration-label {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 0 0;
  font-style: italic;
  text-align: center;
}

/* Quote block */
.ba-quote {
  clear: both;
  margin: 36px 0;
  padding: 24px 32px;
  border-left: 3px solid var(--asyntis-accent);
  background: var(--ui-bg-soft);
  border-radius: 0 10px 10px 0;
}

.ba-quote-text {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
  font-style: italic;
}

.ba-clearfix { clear: both; }

/* ── Right sidebar ─────────────────────────────────────────────────────── */
.ba-sidebar {
  position: sticky;
  top: 24px;
}

.ba-sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.ba-reading-time {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.ba-reading-time-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-orange-purple-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.ba-reading-time-text strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.ba-insights-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.ba-insights-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ba-insights-list li {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.ba-insight-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-green-grad);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Related articles footer ───────────────────────────────────────────── */
.ba-related {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 48px 60px 60px;
}

.ba-related-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 28px;
}

.ba-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.ba-related-card {
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: box-shadow 0.15s;
}

.ba-related-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

.ba-related-img {
  height: 140px;
  background: var(--brand-grad-b);
  background-size: cover;
  background-position: center;
}

.ba-related-img-2 { background: linear-gradient(145deg, #1b5c6e 0%, #0d3c4c 100%); }
.ba-related-img-3 { background: var(--brand-grad-hero); }

.ba-related-body {
  padding: 16px;
}

.ba-related-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.ba-related-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin: 0 0 8px;
}

.ba-related-date {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

/* ── Blog article dark mode ─────────────────────────────────────────────── */
body.theme-dark #view-blog-article { background: var(--bg); }
body.theme-dark .ba-meta-bar { background: var(--bg-card); }
body.theme-dark .ba-quote { background: rgba(255,255,255,0.04); }
body.theme-dark .ba-sidebar-card { background: var(--bg-card); border-color: #2d3445; }
body.theme-dark .ba-related { background: var(--bg-card); border-top-color: #2d3445; }
body.theme-dark .ba-related-card { background: var(--bg); border-color: #2d3445; }
body.theme-dark .ba-action-btn { border-color: #2d3445; }
body.theme-dark .ba-action-btn:hover { background: rgba(255,255,255,0.06); }

/* ── Blog article print (article + images only, full scrollable content) ─ */
@media print {
  @page {
    size: A4 portrait;
    margin: 16mm 14mm;
  }

  html,
  body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body {
    display: block !important;
    grid-template-rows: none !important;
    height: auto !important;
    background: #fff !important;
  }

  .app-topbar,
  .app-sidebar,
  .page-header,
  .auth-screen,
  .search-dropdown,
  .top-tabs,
  .ba-actions,
  .ba-related,
  .ba-sidebar,
  .ba-copy-table-btn,
  .view-section:not(#view-blog-article) {
    display: none !important;
  }

  body[data-print-module] .view-section {
    display: none !important;
  }
  body[data-print-module="overview"] #view-overview,
  body[data-print-module="ai-reputation"] #view-ai-reputation,
  body[data-print-module="brand-perception"] #view-brand-perception,
  body[data-print-module="ai-comparison"] #view-ai-comparison,
  body[data-print-module="ai-recommendation"] #view-ai-recommendation {
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body[data-print-module] #view-blog-article {
    display: none !important;
  }
  body[data-print-module] #view-overview[hidden],
  body[data-print-module] #view-ai-reputation[hidden],
  body[data-print-module] #view-brand-perception[hidden],
  body[data-print-module] #view-ai-comparison[hidden],
  body[data-print-module] #view-ai-recommendation[hidden] {
    display: block !important;
  }

  #view-blog-article[hidden] {
    display: none !important;
  }

  .app-shell {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
  }

  .app-main,
  .module-content,
  #view-blog-article:not([hidden]),
  #ba-root {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    flex: none !important;
    width: 100% !important;
  }

  body[data-print-module]:not([data-print-module="overview"]) .module-content {
    padding: 0 !important;
    margin: 0 !important;
  }

  #view-blog-article:not([hidden]) {
    padding: 0 !important;
    background: #fff !important;
  }

  body[data-print-module] .air-ctx-bar,
  body[data-print-module] .air-nav-tabs,
  body[data-print-module] .air-module-tabs-bar,
  body[data-print-module] .air-ctx-run-wrap,
  body[data-print-module] .module-placeholder .btn,
  body[data-print-module] .air-help,
  body[data-print-module] .ov-text-link,
  body[data-print-module] .cmp-settings-btn,
  body[data-print-module] .cmp-refresh-btn,
  body[data-print-module] .cmp-modal-overlay {
    display: none !important;
  }

  body[data-print-module] #view-overview .fw-overview-page,
  body[data-print-module] #view-ai-reputation .air-rep-page,
  body[data-print-module] #view-brand-perception .bp-page,
  body[data-print-module] #view-ai-comparison .cmp-page,
  body[data-print-module] #view-ai-recommendation .rec-page {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    max-width: none !important;
    background: #fff !important;
  }
  body[data-print-module="overview"] #fw-root,
  body[data-print-module="overview"] #fw-cockpit {
    margin: 0 !important;
    padding: 0 !important;
  }
  body[data-print-module="overview"] #view-overview .fw-overview-stack {
    margin: 0 !important;
    padding: 0 !important;
    gap: 14px !important;
  }

  /* Force high-contrast print text even when dark mode is active and
     "Background graphics" is disabled in the browser print dialog. */
  body[data-print-module] #view-overview,
  body[data-print-module] #view-ai-reputation,
  body[data-print-module] #view-brand-perception,
  body[data-print-module] #view-ai-comparison,
  body[data-print-module] #view-ai-recommendation {
    color: #111 !important;
  }
  body[data-print-module] #view-overview *,
  body[data-print-module] #view-ai-reputation *,
  body[data-print-module] #view-brand-perception *,
  body[data-print-module] #view-ai-comparison *,
  body[data-print-module] #view-ai-recommendation * {
    color: #111 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #111 !important;
  }
  body[data-print-module] #view-overview .ov-card,
  body[data-print-module] #view-overview .ov-hero-card,
  body[data-print-module] #view-overview .fw-overview-block,
  body[data-print-module] #view-ai-reputation .ov-card,
  body[data-print-module] #view-ai-reputation .ov-hero-card,
  body[data-print-module] #view-brand-perception .ov-card,
  body[data-print-module] #view-brand-perception .ov-hero-card,
  body[data-print-module] #view-ai-comparison .ov-card,
  body[data-print-module] #view-ai-recommendation .ov-card {
    background: #fff !important;
    border-color: #d1d5db !important;
  }
  body[data-print-module] #view-overview svg text,
  body[data-print-module] #view-ai-reputation svg text,
  body[data-print-module] #view-brand-perception svg text,
  body[data-print-module] #view-ai-comparison svg text,
  body[data-print-module] #view-ai-recommendation svg text {
    fill: #111 !important;
  }
  body[data-print-module="overview"] #view-overview .ov-hero-card {
    display: grid !important;
    grid-template-columns: 210px 1fr 260px !important;
    gap: 18px !important;
    align-items: start !important;
    overflow: visible !important;
  }
  body[data-print-module="overview"] #view-overview .ov-hero-score {
    border-right: 1px solid #e5e7eb !important;
    padding-right: 12px !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body[data-print-module="overview"] #view-overview .fw-overview-block__center {
    display: block !important;
    padding: 0 10px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body[data-print-module="overview"] #view-overview .ov-hero-priorities {
    border-left: 1px solid #e5e7eb !important;
    padding-left: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body[data-print-module="overview"] #view-overview .fw-air-dim-col {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body[data-print-module="overview"] #view-overview .fw-air-dim-body {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body[data-print-module="overview"] #view-overview .fw-overview-block__center .ov-dim-table {
    font-size: 11px !important;
  }
  body[data-print-module="overview"] #view-overview .fw-overview-block__center .bp-radar-wrap,
  body[data-print-module="overview"] #view-overview .fw-overview-block__center .bp-glance-left,
  body[data-print-module="overview"] #view-overview .fw-overview-block__center .cmp-position-map {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  body[data-print-module="overview"] #view-overview .fw-overview-block__center .bp-radar-svg,
  body[data-print-module="overview"] #view-overview .fw-overview-block__center .cmp-map-svg {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  body[data-print-module] #view-overview .ov-stack,
  body[data-print-module] #view-ai-reputation #air-tab-overview,
  body[data-print-module] #view-brand-perception #bp-tab-overview,
  body[data-print-module] #view-ai-comparison #cmp-tab-overview,
  body[data-print-module] #view-ai-recommendation #rec-tab-overview {
    display: block !important;
  }

  body[data-print-module] .air-tab-panel[hidden],
  body[data-print-module] .ov-card[hidden] {
    display: none !important;
  }

  body[data-print-module] #air-cockpit[hidden],
  body[data-print-module] #bp-cockpit[hidden],
  body[data-print-module] #cmp-cockpit[hidden],
  body[data-print-module] #rec-cockpit[hidden],
  body[data-print-module] #fw-cockpit[hidden] {
    display: block !important;
  }

  /* ── Module print layout (not Framework Overview) ─────────────────────── */
  body[data-print-module]:not([data-print-module="overview"]) .air-rep-page,
  body[data-print-module]:not([data-print-module="overview"]) .bp-page,
  body[data-print-module]:not([data-print-module="overview"]) .cmp-page,
  body[data-print-module]:not([data-print-module="overview"]) .rec-page,
  body[data-print-module]:not([data-print-module="overview"]) #air-cockpit,
  body[data-print-module]:not([data-print-module="overview"]) #bp-cockpit,
  body[data-print-module]:not([data-print-module="overview"]) #cmp-cockpit,
  body[data-print-module]:not([data-print-module="overview"]) #rec-cockpit {
    min-height: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body[data-print-module]:not([data-print-module="overview"]) #view-ai-reputation .air-tab-panel,
  body[data-print-module]:not([data-print-module="overview"]) #view-brand-perception .air-tab-panel,
  body[data-print-module]:not([data-print-module="overview"]) #view-ai-comparison .air-tab-panel,
  body[data-print-module]:not([data-print-module="overview"]) #view-ai-recommendation .air-tab-panel {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  body[data-print-module]:not([data-print-module="overview"]) .ov-stack {
    padding: 0 !important;
    gap: 14px !important;
  }

  body[data-print-module] .air-rep-loading,
  body[data-print-module] .air-rep-empty,
  body[data-print-module] .air-rep-no-runs {
    display: none !important;
  }

  body[data-print-module]:not([data-print-module="overview"]) .air-ctx-bar,
  body[data-print-module]:not([data-print-module="overview"]) .air-nav-tabs,
  body[data-print-module]:not([data-print-module="overview"]) .air-module-tabs-bar {
    position: static !important;
    transform: none !important;
  }

  body[data-print-module="ai-reputation"] #air-tab-models,
  body[data-print-module="ai-reputation"] #air-tab-history,
  body[data-print-module="ai-reputation"] #air-model-tabs-bar,
  body[data-print-module="brand-perception"] #bp-tab-models,
  body[data-print-module="brand-perception"] #bp-tab-history,
  body[data-print-module="brand-perception"] #bp-model-tabs-bar,
  body[data-print-module="ai-recommendation"] #rec-tab-models,
  body[data-print-module="ai-recommendation"] #rec-tab-history,
  body[data-print-module="ai-recommendation"] #rec-tab-scenarios,
  body[data-print-module="ai-recommendation"] #rec-tab-builder,
  body[data-print-module="ai-recommendation"] #rec-tab-personas,
  body[data-print-module="ai-recommendation"] #rec-tab-persona-builder,
  body[data-print-module="ai-recommendation"] #rec-model-tabs-bar {
    display: none !important;
  }

  body[data-print-module]:not([data-print-module="overview"]) .ov-hero-card {
    display: grid !important;
    grid-template-columns: 180px 1fr 220px !important;
    gap: 16px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  body[data-print-module]:not([data-print-module="overview"]) .ov-card,
  body[data-print-module]:not([data-print-module="overview"]) .ov-hero-card,
  body[data-print-module]:not([data-print-module="overview"]) .ov-col-main,
  body[data-print-module]:not([data-print-module="overview"]) .ov-col-side {
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-before: auto;
    break-before: auto;
    page-break-after: auto;
    break-after: auto;
    box-shadow: none !important;
    margin-top: 0 !important;
  }

  body[data-print-module]:not([data-print-module="overview"]) .ov-two-col-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    page-break-inside: auto;
    break-inside: auto;
  }

  body[data-print-module]:not([data-print-module="overview"]) .ov-section-hdr {
    page-break-after: avoid;
    break-after: avoid;
  }

  body[data-print-module]:not([data-print-module="overview"]) svg,
  body[data-print-module]:not([data-print-module="overview"]) canvas,
  body[data-print-module]:not([data-print-module="overview"]) .air-trend-wrap,
  body[data-print-module]:not([data-print-module="overview"]) .cmp-position-map,
  body[data-print-module]:not([data-print-module="overview"]) .cmp-score-dist,
  body[data-print-module]:not([data-print-module="overview"]) .cmp-bp-radar {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* ── Framework Overview print (deprioritized — keep existing rules) ─────── */
  body[data-print-module="overview"] .ov-card,
  body[data-print-module="overview"] .ov-hero-card,
  body[data-print-module="overview"] .fw-overview-block {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none !important;
  }
  body[data-print-module] .fw-overview-block-wrap {
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-before: auto;
    break-before: auto;
    page-break-after: auto;
    break-after: auto;
  }
  body[data-print-module="overview"] .fw-overview-block-wrap {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  body[data-print-module] .fw-overview-trend-card {
    page-break-before: avoid;
    break-before: avoid;
  }
  body[data-print-module="overview"] .fw-overview-block,
  body[data-print-module="overview"] .ov-card,
  body[data-print-module="overview"] .ov-hero-card {
    page-break-before: avoid;
    break-before: avoid;
    margin-top: 0 !important;
  }

  .ba-header {
    height: auto !important;
    min-height: 0 !important;
    page-break-after: avoid;
    break-after: avoid;
    background: #fff !important;
  }

  .ba-header-img {
    display: none !important;
  }

  .ba-header-gradient {
    display: none !important;
  }

  .ba-header-content {
    position: static !important;
    padding: 0 32px 8px !important;
    color: #111 !important;
  }

  .ba-category-tag {
    color: #111 !important;
    background: #e8e8e8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .ba-title {
    color: #111 !important;
    font-size: 28px !important;
  }

  .ba-date {
    color: #333 !important;
  }

  .ba-meta-bar {
    padding: 16px 32px !important;
    page-break-after: avoid;
    break-after: avoid;
  }

  .ba-body {
    display: block !important;
    grid-template-columns: 1fr !important;
    max-width: none !important;
    padding: 24px 32px 48px !important;
  }

  .ba-content {
    max-width: 100% !important;
  }

  .ba-image-half {
    float: none !important;
    width: 100% !important;
    margin: 20px 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .ba-illustration,
  .ba-content figure,
  .ba-content table {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .ba-content img {
    max-width: 100% !important;
    height: auto !important;
  }

  .ba-h2,
  .ba-h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  .ba-content p,
  .ba-content li {
    orphans: 3;
    widows: 3;
  }

  .ba-header-img,
  .ba-image-half-inner,
  .ba-category-tag {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── Blog index card ────────────────────────────────────────────────────── */
.blog-index {
  padding: 24px;
}

.blog-index-heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 24px;
}

.blog-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-card);
  transition: box-shadow 0.15s;
  text-decoration: none;
}

.blog-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

.blog-card-img {
  height: 100%;
  min-height: 140px;
  background: var(--brand-grad-hero);
  background-size: cover;
  background-position: center;
}

.blog-card-body {
  padding: 20px 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blog-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

.blog-card-summary {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

.blog-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: auto;
  padding-top: 4px;
}

body.theme-dark .blog-card { background: var(--bg-card); border-color: #2d3445; }

/* ── KH content index (shared: blog, how-tos, terms, legal, FAQ) ─────── */
#view-knowledge-hub .kh-content-index {
  max-width: var(--article-page-max);
  margin-left: auto;
  margin-right: auto;
  padding: 28px var(--article-page-pad-x) 48px;
  width: 100%;
  box-sizing: border-box;
}
.kh-index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
}
.kh-index-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0;
}
.kh-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kh-empty {
  font-size: 14px;
  color: var(--text-muted);
  padding: 24px 0;
}
.kh-loading {
  font-size: 14px;
  color: var(--text-muted);
  padding: 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── FAQ accordion ────────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  background: var(--bg-card, #fff);
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--text);
  transition: background 0.12s;
}
.faq-q:hover { background: var(--bg-hover); }
.faq-q-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
  color: var(--text-muted);
}
.faq-item.open .faq-q-chevron { transform: rotate(180deg); }
.faq-a {
  padding: 0 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  background: var(--bg-card, #fff);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.15s ease;
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding: 0 20px 16px;
}
body.theme-dark .faq-item { border-color: #2d3445; }
body.theme-dark .faq-q { background: var(--bg-card); }
body.theme-dark .faq-a { background: var(--bg-card); }
body.theme-dark .kh-terms-letter { color: var(--asyntis-accent); }

/* ── Terms & Definitions list ─────────────────────────────────────────── */
/* ── Translation glossary (KH) ───────────────────────────────────────── */
.kh-glossary-wrap { max-width: 1100px; }
.kh-glossary-intro {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 20px;
  max-width: 720px;
}
.kh-glossary-intro code {
  font-size: 12px;
  background: var(--ui-secondary-bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.kh-glossary-principles {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--ui-secondary-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.kh-glossary-h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}
.kh-glossary-principles ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.kh-glossary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.kh-glossary-table th,
.kh-glossary-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.kh-glossary-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.kh-glossary-cat {
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 12px;
}
.kh-glossary-policy {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.kh-glossary-policy--keep_en {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.kh-glossary-policy--translate {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}
.kh-glossary-policy--case_by_case {
  background: rgba(180, 83, 9, 0.1);
  color: #b45309;
}
.kh-glossary-notes {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 280px;
}
.kh-glossary-keys {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  opacity: 0.75;
}

.kh-terms-letter-group { margin-bottom: 28px; }
.kh-terms-letter {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1f2e;
  padding: 4px 0 8px;
  border-bottom: 2px solid var(--asyntis-accent);
  margin-bottom: 4px;
  display: block;
}
.kh-term-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
}
.kh-term-row:hover .kh-term-name { color: var(--asyntis-accent); }
.kh-term-name {
  font-weight: 500;
  font-size: 14px;
  min-width: 200px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.kh-term-summary {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   Article Editor — ae-* (block-based CMS editor)
   ══════════════════════════════════════════════════════════ */

#view-article-editor {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.ae-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.ae-locale-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 20px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle, #f9fafb);
}

.ae-locale-bar-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ae-locale-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.ae-translation-status-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.ae-translation-status-select {
  width: auto;
  min-width: 120px;
  padding: 4px 8px;
  font-size: 12px;
}

.ae-locale-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}

.ae-locale-tab {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
}

.ae-locale-tab.is-active {
  background: var(--accent-soft, rgba(124, 58, 237, 0.12));
  color: var(--accent, #7c3aed);
}

.ae-locale-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.ae-translate-btn,
.ae-save-translation-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  cursor: pointer;
}

.ae-translate-btn--primary {
  border-color: var(--accent, #7c3aed);
  background: var(--accent-soft, rgba(124, 58, 237, 0.12));
  color: var(--accent, #7c3aed);
}

.ae-translate-btn--primary:hover:not(:disabled) {
  background: var(--accent, #7c3aed);
  color: #fff;
}

.ae-translate-btn:disabled,
.ae-save-translation-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ae-translate-progress {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-muted, #f8fafc);
  border: 1px solid var(--border-color, #e5e7eb);
}

.ae-translate-progress-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
}

.ae-translate-progress-overlay[hidden] {
  display: none !important;
}

.ae-translate-progress-card {
  width: min(420px, calc(100% - 32px));
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

.ae-translate-progress-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.ae-translate-progress-track {
  height: 8px;
}

.ae-translate-progress-inner {
  margin-top: 0;
  max-width: none;
}

body.theme-dark .ae-translate-progress {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color, #2e3447);
}

body.theme-dark .ae-translate-progress-card {
  background: var(--bg-surface, #1e2230);
  border-color: var(--border-color, #2e3447);
}

.ae-translation-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.ae-translation-status--draft { color: #b45309; border-color: #fcd34d; }
.ae-translation-status--reviewed { color: #2563eb; border-color: #93c5fd; }
.ae-translation-status--published { color: #15803d; border-color: #86efac; }

/* Top bar */
.ae-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
  z-index: 2;
}

.ae-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.ae-back-btn:hover { color: var(--text); background: var(--bg-hover); }

.ae-topbar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ae-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ae-preview-btn {
  font-size: 12px;
  padding: 6px 14px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.ae-preview-btn:hover { background: var(--bg-hover); }

.ae-delete-btn {
  font-size: 12px;
  padding: 6px 14px;
  background: none;
  border: 1px solid #fca5a5;
  border-radius: 5px;
  cursor: pointer;
  color: #b91c1c;
  transition: background 0.15s;
}
.ae-delete-btn:hover { background: #fef2f2; }
body.theme-dark .ae-delete-btn { border-color: #7f1d1d; color: #fca5a5; }
body.theme-dark .ae-delete-btn:hover { background: #450a0a; }

.ae-save-btn {
  font-size: 12px;
  padding: 6px 16px;
  background: var(--teal-green-grad);
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.15s;
}
.ae-save-btn:hover { opacity: 0.85; }

/* Three-column layout */
.ae-layout {
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Shared panel styles */
.ae-settings-panel,
.ae-sidebar-panel {
  padding: 16px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ae-sidebar-panel { border-right: none; border-left: 1px solid var(--border); }

.ae-panel-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ae-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
}

.ae-input {
  width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input, var(--bg-surface));
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ae-input:focus { border-color: var(--accent); }

.ae-textarea-sm { resize: vertical; min-height: 50px; }
.ae-select-sm { margin-bottom: 6px; }

.ae-file-input {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 100%;
}

.ae-img-preview {
  width: 100%;
  height: 80px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: var(--ui-bg, #f5f7fa);
  margin-top: 6px;
  border: 1px solid var(--border);
  display: block;
}

.ae-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 4px 0;
}

.ae-save-status {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 8px;
}
.ae-save-status.success { background: #d4edda; color: #155724; }
.ae-save-status.error   { background: #f8d7da; color: #721c24; }

/* AI Generate button */
.ae-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 3px 8px;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  cursor: pointer;
  margin-left: auto;
  transition: background 0.15s;
}
.ae-generate-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ae-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ae-reading-time-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  padding: 8px 10px;
  background: var(--bg-hover);
  border-radius: 5px;
}

/* Block list panel */
.ae-blocks-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Rich text toolbar */
.ae-rich-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}

.ae-tb-group { display: flex; align-items: center; gap: 2px; }

.ae-tb-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 6px;
  flex-shrink: 0;
}

.ae-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  white-space: nowrap;
  line-height: 1;
}
.ae-tb-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); }
.ae-tb-btn.ae-tb-active { background: var(--teal-green-grad); color: #fff; border-color: var(--accent); }
.ae-tb-btn strong { font-weight: 800; font-size: 13px; }
.ae-tb-btn em { font-style: italic; font-size: 13px; }
.ae-tb-btn u { text-decoration: underline; font-size: 13px; }

/* Rich text editor area */
.ae-rich-editor {
  flex: 1;
  overflow-y: auto;
  padding: 28px 36px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  outline: none;
  min-height: 300px;
  font-family: var(--font-sans);
  caret-color: var(--accent);
}
.ae-rich-editor:empty::before {
  content: 'Start writing your article here…';
  color: var(--text-muted);
  pointer-events: none;
}
.ae-rich-editor p { margin: 0 0 14px; }
.ae-rich-editor p.ae-intro {
  font-size: 18px;
  line-height: 1.85;
  margin-bottom: 22px;
  color: var(--text);
}
.ae-rich-editor h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 32px 0 12px;
  line-height: 1.3;
  font-family: var(--font-display);
  color: var(--text);
}
.ae-rich-editor h2 *,
.ae-rich-editor h3 * {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.ae-rich-editor h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 22px 0 8px;
  color: var(--text);
}
.ae-rich-editor blockquote {
  margin: 24px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--asyntis-accent);
  background: var(--bg-hover);
  font-style: italic;
  font-size: 16px;
  border-radius: 0 4px 4px 0;
  color: var(--text);
}
.ae-rich-editor blockquote p { margin: 0; }
.ae-rich-editor a { color: var(--accent); text-decoration: underline; }
.ae-rich-editor a:hover { opacity: 0.8; }
.ae-rich-editor strong, .ae-rich-editor b { font-weight: 700; }
.ae-rich-editor em, .ae-rich-editor i { font-style: italic; }
.ae-rich-editor u { text-decoration: underline; }
.ae-rich-editor figure {
  margin: 22px 0;
  display: block;
  position: relative; /* for figure toolbar overlay */
}
.ae-rich-editor figure.ae-img-half {
  float: left;
  width: 44%;
  margin: 4px 24px 16px 0;
}
.ae-rich-editor figure.ae-img-illus {
  width: 100%;
  clear: both;
}
.ae-rich-editor figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
  background: var(--bg-hover);
  min-height: 60px;
}
.ae-rich-editor figure.ae-img-illus img { max-height: none; }
.ae-rich-editor figure figcaption {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0 0;
  font-style: italic;
  outline: none;
}
.ae-rich-editor ul, .ae-rich-editor ol {
  padding-left: 26px;
  margin: 0 0 14px;
}
.ae-rich-editor li { margin: 5px 0; line-height: 1.6; }

/* Lime-colored bullets and numbers in editor */
.ae-rich-editor ul { list-style: none; }
.ae-rich-editor ul li {
  position: relative;
  padding-left: 6px;
}
.ae-rich-editor ul li::before {
  content: '•';
  position: absolute;
  left: -18px;
  color: var(--asyntis-accent);
  font-size: 1.1em;
  line-height: 1.6;
}
.ae-rich-editor ol {
  list-style: none;
  counter-reset: ae-ol;
}
.ae-rich-editor ol li {
  position: relative;
  padding-left: 6px;
  counter-increment: ae-ol;
}
.ae-rich-editor ol li::before {
  content: counter(ae-ol) '.';
  position: absolute;
  left: -22px;
  color: var(--asyntis-accent);
  font-weight: 700;
  font-size: 0.88em;
  line-height: 1.8;
  min-width: 20px;
  text-align: right;
}

/* Same styling in blog view */
.ba-content ul, .ba-content ol {
  padding-left: 26px;
  margin: 0 0 14px;
}
.ba-content li { margin: 5px 0; line-height: 1.6; }

/* ── Tables inside article content ───────────────────────────────────── */
.ba-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 24px;
  color: var(--text, #1a1f2e);
}
.ba-content table thead tr {
  background: var(--text, #1a1f2e);
  color: #fff;
}
.ba-content table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  border: 1px solid var(--text, #1a1f2e);
  white-space: nowrap;
}
.ba-content table td {
  padding: 7px 12px;
  border: 1px solid var(--border-color, #dde0e8);
  vertical-align: top;
}
.ba-content table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.025);
}
.ba-content table tbody tr:hover {
  background: rgba(var(--teal-green-rgb),0.07);
}
/* First column (e.g. score range): bold + no-wrap */
.ba-content table td:first-child {
  font-weight: 600;
  white-space: nowrap;
  color: var(--text, #1a1f2e);
}
/* Second column: slightly accented */
.ba-content table td:nth-child(2) {
  font-weight: 500;
}
body.theme-dark .ba-content table {
  color: var(--text, #e8eaf0);
}
body.theme-dark .ba-content table thead tr {
  background: rgba(255,255,255,0.10);
}
body.theme-dark .ba-content table th {
  border-color: rgba(255,255,255,0.15);
  color: #e8eaf0;
}
body.theme-dark .ba-content table td {
  border-color: rgba(255,255,255,0.08);
}
body.theme-dark .ba-content table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.03);
}
body.theme-dark .ba-content table tbody tr:hover {
  background: rgba(var(--teal-green-rgb),0.06);
}
body.theme-dark .ba-content table td:first-child {
  color: var(--text, #e8eaf0);
}

.ba-content ul { list-style: none; }
.ba-content ul li {
  position: relative;
  padding-left: 6px;
}
.ba-content ul li::before {
  content: '•';
  position: absolute;
  left: -18px;
  color: var(--asyntis-accent);
  font-size: 1.1em;
  line-height: 1.6;
}
.ba-content ol {
  list-style: none;
  counter-reset: ba-ol;
}
.ba-content ol li {
  position: relative;
  padding-left: 6px;
  counter-increment: ba-ol;
}
.ba-content ol li::before {
  content: counter(ba-ol) '.';
  position: absolute;
  left: -22px;
  color: var(--asyntis-accent);
  font-weight: 700;
  font-size: 0.88em;
  line-height: 1.8;
  min-width: 20px;
  text-align: right;
}

/* Figure edit/delete toolbar (editor only) */
.ae-fig-toolbar {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  z-index: 10;
  cursor: grab;
  user-select: none;
}
.ae-fig-toolbar:active { cursor: grabbing; }
.ae-fig-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  transition: background 0.12s;
}
.ae-fig-btn:hover { background: #000; }
.ae-fig-del { background: #b91c1c; }
.ae-fig-del:hover { background: #991b1b; }

/* ── Blog view: styles for editor-generated HTML (body_md) ──────────────
   The blog view renders raw innerHTML from the rich editor, so we need
   CSS here that mirrors the editor styles for these classes.            */
.ba-content figure { margin: 22px 0; display: block; position: relative; }
.ba-content figure.ae-img-half {
  float: left;
  width: 44%;
  margin: 4px 24px 20px 0;
}
.ba-content figure.ae-img-illus {
  width: 100%;
  clear: both;
}
.ba-content figure img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  max-height: none;
}
.ba-content figure.ae-img-half img {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  max-height: 300px;
  object-fit: cover;
}
.ba-content figure.ae-img-illus img { max-height: none; }
.ba-content figure figcaption {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 6px 0 0;
  outline: none;
}
.ba-content figure figcaption:empty {
  display: none;
  padding: 0;
  margin: 0;
}
/* Hide editor toolbars when rendered in blog view */
.ba-content .ae-fig-toolbar { display: none !important; }

/* Blockquotes from editor (no ba-quote class needed) */
.ba-content blockquote {
  margin: 24px 0;
  padding: 14px 22px;
  border-left: 3px solid var(--asyntis-accent);
  background: var(--bg-hover, #f5f7f5);
  font-style: italic;
  font-size: 16px;
  border-radius: 0 5px 5px 0;
  color: var(--text);
}
.ba-content blockquote p { margin: 0; }

.ba-content strong,
.ba-content b { font-weight: 700; }
.ba-content em,
.ba-content i { font-style: italic; }
.ba-content u { text-decoration: underline; }
.ba-content a { color: var(--accent); text-decoration: underline; }
.ba-content a:hover { opacity: 0.8; }

/* Modal overlay */
.ae-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.ae-modal-overlay[hidden] { display: none !important; }

.ae-modal-box {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  overflow: hidden;
  position: relative;
  z-index: 1001;
}

.ae-modal-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  background: var(--ui-bg, #f8f9fa);
  border-bottom: 1px solid var(--border, #e5e7eb);
  cursor: grab;
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
}
.ae-modal-handle:active { cursor: grabbing; }

.ae-modal-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ae-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}

/* Dark mode for editor */
body.theme-dark .ae-rich-editor blockquote { background: rgba(255,255,255,0.04); }
body.theme-dark .ba-content blockquote      { background: rgba(255,255,255,0.04); }

/* Override inline color/background styles pasted from external sources */
body.theme-dark .ba-content *:not(a) { color: inherit !important; background-color: transparent !important; }
body.theme-dark .ba-content a        { color: var(--asyntis-accent) !important; }
body.theme-dark .ae-rich-editor *:not(a) { color: inherit !important; background-color: transparent !important; }
body.theme-dark .ae-rich-editor a    { color: var(--asyntis-accent) !important; }
body.theme-dark .ae-save-status.success { background: #1a3d1a; color: #6dd56d; }
body.theme-dark .ae-save-status.error   { background: #4a1313; color: #ff7b7b; }

/* Dynamic blog article view — ba-edit-btn */
.ba-edit-btn { display: flex; align-items: center; gap: 5px; }

/* Dark mode homepage */
body.theme-dark .home-seaweed-svg { opacity: 0.5; }
/* Logo PNGs use dark label text — keep a light pill in dark mode for contrast */
body.theme-dark .home-hero-logo {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(226, 232, 240, 0.65);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}
body.theme-dark .home-hero-logo img {
  opacity: 1;
}
body.theme-dark .home-hero-subtitle { color: #7a8499; }
body.theme-dark .home-hero-btn {
  background: var(--accent-orange-purple-grad);
  color: #fff;
}
body.theme-dark .home-hero-btn--secondary { background: transparent; border-color: var(--teal-green); color: var(--teal-green); }
body.theme-dark .home-quote { color: #e6e8ee; }

/* Marketing dashboard preview — dark mode */
body.theme-dark .home-demo-dash-title { color: #e8eaed; }
body.theme-dark .home-demo-dash-lead { color: #9aa0a6; }
body.theme-dark .home-demo-frame {
  background: linear-gradient(145deg, #151a24 0%, #121820 45%, #0f1419 100%);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 24px 64px rgba(76, 185, 185, 0.08);
}
body.theme-dark .home-demo-dash.is-live .home-demo-frame {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 32px 80px rgba(76, 185, 185, 0.12);
}
body.theme-dark .home-demo-shell {
  background: #1a2030;
  border-color: rgba(255, 255, 255, 0.1);
}
body.theme-dark .home-demo-side {
  background: linear-gradient(180deg, #1e2433 0%, #181d2a 100%);
  border-right-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .home-demo-nav-item { color: #8b95a8; }
body.theme-dark .home-demo-nav-item.is-active {
  background: rgba(76, 185, 185, 0.14);
  color: var(--teal-green-from, #5fd4d4);
}
body.theme-dark .home-demo-main { background: #1a2030; }
body.theme-dark .home-demo-topbar-title { color: #e8eaed; }
body.theme-dark .home-demo-pill {
  color: #9aa0a6;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
body.theme-dark .home-demo-card {
  background: #222a3c;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
body.theme-dark .home-demo-dash.is-live .home-demo-card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}
body.theme-dark .home-demo-card-title { color: #8b95a8; }
body.theme-dark .home-demo-card--highlight {
  background: linear-gradient(160deg, rgba(234, 179, 8, 0.14) 0%, #222a3c 55%);
  border-color: rgba(234, 179, 8, 0.35);
}
body.theme-dark .home-demo-donut-track { stroke: #2d3445; }
body.theme-dark .home-demo-donut-val { fill: #e8eaed; }
body.theme-dark .home-demo-donut-sub { fill: #9aa0a6; }
body.theme-dark .home-demo-chip--up {
  color: #86efac;
  background: rgba(34, 197, 94, 0.16);
}
body.theme-dark .home-demo-metric-val { color: #e8eaed; }
body.theme-dark .home-demo-metric-val--rank small { color: #9aa0a6; }
body.theme-dark .home-demo-metric-lbl,
body.theme-dark .home-demo-muted { color: #8b95a8; }
body.theme-dark .home-demo-hbars li { color: #9aa0a6; }
body.theme-dark .home-demo-hbar { background: #2d3445; }
body.theme-dark .home-demo-hbars em { color: #e8eaed; }
body.theme-dark .home-demo-radar-grid { stroke: #2d3445; }
body.theme-dark .home-demo-radar-axis { stroke: #252d3d; }
body.theme-dark .home-demo-radar-fill { fill: rgba(76, 185, 185, 0.22); }
body.theme-dark .home-demo-legend { color: #9aa0a6; }
body.theme-dark .home-demo-legend b { color: #e8eaed; }
body.theme-dark .home-demo-highlight-txt { color: #c4cad4; }
body.theme-dark .home-demo-highlight-txt strong { color: #e8eaed; }

/* Marketing BP dashboard preview — dark mode */
body.theme-dark .home-bp-demo-frame {
  background: linear-gradient(145deg, #151a24 0%, #121820 45%, #0f1419 100%);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 24px 64px rgba(76, 185, 185, 0.08);
}
body.theme-dark .home-bp-demo-dash.is-live .home-bp-demo-frame {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 32px 80px rgba(76, 185, 185, 0.12);
}
body.theme-dark .home-bp-demo-eyebrow { color: #8b95a8; }
body.theme-dark .home-bp-demo-sub { color: #9aa0a6; }
body.theme-dark .home-bp-demo-radar-grid { stroke: #2d3445; }
body.theme-dark .home-bp-demo-radar-axis { stroke: #252d3d; }
body.theme-dark .home-bp-demo-radar-ref {
  stroke: #6b788e;
  opacity: 0.75;
}
body.theme-dark .home-bp-demo-radar-fill {
  fill: rgba(76, 185, 185, 0.22);
}
body.theme-dark .home-bp-demo-radar-label { fill: #9aa0a6; }
body.theme-dark .home-bp-demo-radar-score { fill: #e8eaed; }
body.theme-dark .home-bp-demo-legend { color: #9aa0a6; }
body.theme-dark .home-bp-demo-legend-line--avg { border-top-color: #6b788e; }
body.theme-dark .home-bp-demo-panel {
  background: #222a3c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
body.theme-dark .home-bp-demo-dash.is-live .home-bp-demo-panel {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}
body.theme-dark .home-bp-demo-panel-title { color: #8b95a8; }
body.theme-dark .home-bp-demo-bars li { color: #9aa0a6; }
body.theme-dark .home-bp-demo-bar-track { background: #2d3445; }
body.theme-dark .home-bp-demo-bars em { color: #e8eaed; }
body.theme-dark .home-bp-demo-balance-text { color: #c4cad4; }
body.theme-dark .home-bp-demo-balance-pole { color: #8b95a8; }
body.theme-dark .home-bp-demo-balance-track { background: var(--bp-balance-grad, linear-gradient(90deg, #4B7BE5, #3BC3A9)); }
body.theme-dark .home-bp-demo-balance-scores { color: #9aa0a6; }
body.theme-dark .home-bp-demo-balance-indicator {
  background: #c5cee0;
}

/* ── Home Start modal ──────────────────────────────────────────────────── */
.home-start-modal-inner { width: 420px; }
.home-start-challenge-preview {
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  font-style: italic;
  margin: -4px 0 20px;
  line-height: 1.5;
  word-break: break-word;
}
.home-start-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.home-start-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  width: 100%;
}
.home-start-btn--new {
  background: #32554F;
  color: #fff;
  border: none;
}
.home-start-btn--new:hover { background: #2a4942; }
.home-start-cancel {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  padding: 4px;
  font-family: inherit;
}
.home-start-cancel:hover { color: var(--text, #1e293b); }
body.theme-dark .home-start-btn--new { background: #32554F; }
body.theme-dark .home-start-cancel:hover { color: #e2e8f0; }
body.theme-dark .home-section {
  background: var(--bg, #0e1621);
}
body.theme-dark .home-fw-wrap + .home-section {
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 54px,
    var(--bg, #0e1621) 54px
  );
}
body.theme-dark .home-article-title,
body.theme-dark .home-section-title,
body.theme-dark .home-case-title { color: #e6e8ee; }
body.theme-dark .home-article-body,
body.theme-dark .home-article-readmore { color: #7a8499; }

/* ─────────────────────────────────────────────────────────────
   HOMEPAGE LOADING STATE
   ─────────────────────────────────────────────────────────── */

.home-skeleton {
  background: linear-gradient(90deg, var(--ui-secondary-bg) 25%, var(--border) 50%, var(--ui-secondary-bg) 75%);
  background-size: 200% 100%;
  animation: home-shimmer 1.4s infinite;
  border-radius: 10px;
}

@keyframes home-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─────────────────────────────────────────────────────────────
   CONTENT MANAGER
   ─────────────────────────────────────────────────────────── */

.cm-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Toolbar */
.cm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: wrap;
}

.cm-type-tabs {
  display: flex;
  gap: 4px;
}

.cm-type-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.cm-type-tab:hover { background: var(--ui-secondary-bg); color: var(--text); }

.cm-type-tab.active {
  background: var(--ui-secondary-bg);
  color: var(--text);
  border-color: var(--border);
}

.cm-slot-filter {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--ui-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 0 8px;
  cursor: pointer;
  max-width: 180px;
}

.cm-case-card-preview {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-width: 280px;
  background: var(--ui-bg);
}

.cm-case-card-preview-img {
  height: 120px;
  background: var(--brand-grad-a);
  background-size: cover;
  background-position: center;
}

.cm-case-card-preview-img--empty {
  background: var(--brand-grad-a);
}

.cm-case-card-preview-title {
  font-size: 12px;
  font-weight: 600;
  margin: 8px 10px 0;
  line-height: 1.35;
  color: var(--text);
}

.cm-case-card-preview-sub {
  font-size: 11px;
  margin: 3px 10px 10px;
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
}

.cm-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-status-filter {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--ui-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 0 8px;
  cursor: pointer;
}

/* Split layout */
.cm-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* List column */
.cm-list-col {
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.cm-list { padding: 6px 0; }

.cm-empty {
  padding: 32px 20px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.cm-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}

.cm-list-item:hover { background: var(--ui-secondary-bg); }

.cm-list-item.active {
  background: var(--accent-light);
  border-left-color: var(--accent);
}

.cm-list-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 3px;
}

.cm-list-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cm-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid;
}

.cm-badge--draft    { color: var(--text-muted);  border-color: var(--border);  background: transparent; }
.cm-badge--published{ color: #1a7a40;             border-color: #a8d5b5;        background: #eaf7ee; }
.cm-badge--article  { color: #1e5fa0;             border-color: #b8d4f0;        background: #eaf2fc; }
.cm-badge--case     { color: #7a4400;             border-color: #f0c878;        background: #fdf5e4; }
.cm-badge--page     { color: #5a2d80;             border-color: #d4b0f0;        background: #f5eafc; }
.cm-badge--block    { color: #1a6b7a;             border-color: #a8d5de;        background: #eaf7fa; }

.cm-list-item-featured {
  color: #e5a800;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

.cm-new-article-btn {
  font-size: 11px;
  padding: 5px 10px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.cm-new-article-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.cm-edit-article-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 4px 8px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cm-edit-article-btn:hover {
  background: var(--teal-green-grad);
  color: #fff;
  border-color: var(--accent);
}

/* Editor column */
.cm-editor-col {
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cm-editor-empty {
  padding: 48px 32px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.cm-editor-form {
  padding: 20px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
}

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

.cm-field--title { grid-column: 1 / -1; }

.cm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cm-field-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ui-secondary-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.cm-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cm-label-hint {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: 0.75;
}

.cm-input {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--ui-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.cm-input:focus { border-color: var(--accent); }

.cm-input--mono { font-family: var(--font-mono, monospace); }

.cm-textarea {
  height: auto;
  padding: 8px 10px;
  resize: vertical;
  line-height: 1.5;
}

.cm-textarea--sm { rows: 2; min-height: 56px; }

.cm-field--inline { flex: 1; }

.cm-field--check { justify-content: flex-end; padding-top: 18px; }

.cm-check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.cm-meta-row { align-items: flex-end; }

.cm-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.cm-delete-btn {
  margin-left: auto;
  color: var(--error, #c0392b);
  border-color: currentColor;
}

.cm-delete-btn:hover { background: #fdecea; }

/* Image upload row */
.cm-input-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.cm-input-row .cm-input {
  flex: 1;
  min-width: 0;
}

.cm-upload-btn {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--ui-secondary-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}

.cm-upload-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.cm-upload-btn.cm-uploading {
  opacity: 0.6;
  cursor: wait;
}

.cm-upload-preview {
  margin-top: 6px;
  min-height: 0;
}

.cm-upload-preview img {
  max-height: 80px;
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
  object-fit: cover;
}

.cm-upload-persist-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
  background: var(--surface-alt, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
}

.cm-upload-persist-note strong {
  color: var(--text, #0f172a);
}

.cm-upload-persist-note code {
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
}

.cm-upload-status {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted, #64748b);
}

.cm-upload-status--ok {
  color: #15803d;
}

.cm-upload-status--warn {
  color: #b45309;
}

.cm-upload-status--missing {
  color: #b91c1c;
}

.cm-upload-status--external {
  color: var(--text-muted, #64748b);
}

.cm-upload-pin-btn {
  margin-left: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent, #2563eb);
  font-size: inherit;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cm-upload-pin-btn:hover {
  color: var(--accent-hover, #1d4ed8);
}

/* Time-based image rows */
.cm-time-images {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.cm-time-image-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface-alt, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
}

.cm-time-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
}

body.theme-dark .cm-time-image-row {
  background: var(--surface-alt, #1e2535);
  border-color: var(--border, #2d3445);
}

body.theme-dark .cm-time-label {
  color: var(--text-primary, #f1f5f9);
}

body.theme-dark .cm-upload-btn {
  background: #232a37;
  border-color: #2d3445;
  color: #e6e8ee;
}

body.theme-dark .cm-upload-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--accent);
}

body.theme-dark .cm-upload-persist-note {
  background: #1e2535;
  border-color: #2d3445;
  color: #94a3b8;
}

body.theme-dark .cm-upload-persist-note strong {
  color: #e6e8ee;
}

body.theme-dark .cm-upload-persist-note code {
  background: rgba(255, 255, 255, 0.08);
}

body.theme-dark .cm-upload-status--ok { color: #4ade80; }
body.theme-dark .cm-upload-status--warn { color: #fbbf24; }
body.theme-dark .cm-upload-status--missing { color: #f87171; }

.cm-save-status {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  min-height: 16px;
}

/* Dark mode */
body.theme-dark .cm-type-tab.active,
body.theme-dark .cm-type-tab:hover { background: rgba(255,255,255,0.06); color: #e6e8ee; }
body.theme-dark .cm-status-filter  { background: #1c2029; border-color: #2d3445; color: #e6e8ee; }
body.theme-dark .cm-list-item.active { background: rgba(255,255,255,0.06); }
body.theme-dark .cm-list-item:hover  { background: rgba(255,255,255,0.04); }
body.theme-dark .cm-list-item-title  { color: #e6e8ee; }
body.theme-dark .cm-field-group { background: #232a37; border-color: #2d3445; }
body.theme-dark .cm-input { background: #1c2029; border-color: #2d3445; color: #e6e8ee; }
body.theme-dark .cm-badge--draft { color: #7a8499; border-color: #2d3445; }
body.theme-dark .cm-badge--published { color: #4caf80; border-color: #2a5040; background: #1a3028; }
body.theme-dark .cm-badge--article   { color: #6aa8e0; border-color: #1e3a5a; background: #1a2a3a; }
body.theme-dark .cm-badge--case      { color: #e0aa60; border-color: #5a3a10; background: #2a2010; }
body.theme-dark .cm-badge--block     { color: #60c0d0; border-color: #1a4050; background: #1a2830; }

/* ─────────────────────────────────────────────────────────────
   DARK MODE — app shell overrides
   ─────────────────────────────────────────────────────────── */
body.theme-dark .app-sidebar {
  background: #1c2029;
  border-right-color: #2d3445;
}

body.theme-dark .sidebar-brand {
  border-bottom-color: #2d3445;
}

body.theme-dark .sidebar-account {
  border-top-color: #2d3445;
}

body.theme-dark .sidebar-item {
  color: #7a8499;
}

body.theme-dark .sidebar-item:hover {
  background: rgba(255,255,255,0.05);
  color: #e6e8ee;
}

body.theme-dark .sidebar-item:hover .sidebar-item-icon {
  color: #e6e8ee;
}

body.theme-dark .sidebar-item.active {
  background: rgba(255,255,255,0.07);
  color: #e6e8ee;
}

body.theme-dark .sidebar-item.active .sidebar-item-icon {
  color: #e6e8ee;
}

body.theme-dark .sidebar-divider {
  border-top-color: #2d3445;
}

body.theme-dark .sidebar-account-theme {
  color: #7a8499;
}

body.theme-dark .sidebar-account-theme:hover {
  background: rgba(255,255,255,0.05);
  color: #e6e8ee;
}

body.theme-dark .app-topbar {
  background: #1c2029;
  border-bottom-color: #2d3445;
}

body.theme-dark .topbar-toggle {
  color: #7a8499;
}

body.theme-dark .topbar-toggle:hover {
  background: rgba(255,255,255,0.05);
  color: #e6e8ee;
}

body.theme-dark .topbar-divider {
  background: #2d3445;
}

body.theme-dark .topbar-nav-link {
  color: var(--text);
}

body.theme-dark .topbar-nav-link:hover {
  color: var(--accent);
}

body.theme-dark .topbar-profile-menu {
  background: var(--bg-card);
  border-color: var(--border);
}

body.theme-dark .topbar-search-wrap {
  background: #232a37;
  border-color: #2d3445;
}

body.theme-dark .topbar-search-input {
  color: #e6e8ee;
}

body.theme-dark .topbar-search-input::placeholder {
  color: #7a8499;
}

body.theme-dark .page-header {
  background: #1c2029;
  border-bottom-color: #2d3445;
}

body.theme-dark .page-title,
body.theme-dark .module-title {
  color: #e6e8ee;
}

body.theme-dark .page-subtitle,
body.theme-dark .module-subtitle {
  color: #7a8499;
}

body.theme-dark .module-header {
  background: #1c2029;
  border-bottom-color: #2d3445;
}

body.theme-dark .module-subnav-item {
  background: #1c2029;
  border-color: #2d3445;
  color: #7a8499;
}

body.theme-dark .module-subnav-item:hover:not(.active) {
  background: rgba(255,255,255,0.04);
  color: #e6e8ee;
}

body.theme-dark .module-subnav-item.active {
  background: #eef1f8;
  color: #0f172a;
  border-color: #eef1f8;
}

/* Header */
.app-header {
  padding: 12px 28px 10px 28px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Theme toggle button */
.btn-theme-toggle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  background: var(--ui-bg);
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.btn-theme-toggle:hover {
  background: var(--ui-secondary-bg);
  border-color: var(--ui-muted);
  color: var(--ui-text);
}

.app-logo-link {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.app-logo-link:hover { opacity: 0.82; }

.topbar-logo-img {
  height: 28px;
  width: auto;
  display: block;
  margin-left: 8px;
}
.topbar-logo-img--dark  { display: none; }
.topbar-logo-img--light { display: block; }
body.theme-dark .topbar-logo-img--light { display: none; }
body.theme-dark .topbar-logo-img--dark  { display: block; }

/* Powered by Asyntis */
.topbar-powered-by {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity .15s;
  margin-left: 16px;
  flex-shrink: 0;
}
.topbar-powered-by:hover { opacity: 1; }
.topbar-powered-label {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  white-space: nowrap;
  font-weight: 500;
}
.topbar-asyntis-logo {
  height: 18px;
  width: auto;
  display: block;
}
/* Show light (black) logo in light mode, dark (white) logo in dark mode */
.topbar-asyntis-logo--dark  { display: none; }
.topbar-asyntis-logo--light { display: block; }
body.theme-dark .topbar-asyntis-logo--light { display: none; }
body.theme-dark .topbar-asyntis-logo--dark  { display: block; }

.app-logo {
  height: 28px;
  width: auto;
  display: block;
}

.app-tagline {
  font-size: 13px;
  color: var(--ui-muted);
  letter-spacing: 0.02em;
}

@media (max-width: 700px) {
  .app-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .app-logo {
    height: 32px;
  }
}

/* Top-level tabs (Claim Library / Scenario Lab) */

.view-section {
  padding: 1.25rem 1.5rem;
  /* Removed min-height: 100vh which caused Safari overflow */
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

#view-knowledge-hub.view-section,
#view-blog-article.view-section {
  padding: 0;
}

/* ── Claims split workspace ───────────────────────────────── */
.claims-workspace {
  --claims-left-width: 50%;
  display: grid;
  grid-template-columns: minmax(380px, var(--claims-left-width)) 8px minmax(320px, 1fr);
  align-items: start;
  gap: 0;
  min-height: 520px;
}

.claims-list-pane {
  min-width: 0;
  overflow: hidden;
  padding-right: 4px;
}

/* Resizable divider */
.claims-splitter {
  cursor: col-resize;
  align-self: stretch;
  background: transparent;
  position: relative;
  z-index: 5;
}
.claims-splitter::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--ui-border);
  transition: background 0.15s, width 0.1s;
}
.claims-splitter:hover::after,
.claims-splitter.dragging::after {
  background: var(--teal-green-grad);
  width: 2px;
}

.claim-detail-pane {
  min-width: 0;
  display: block;
  position: sticky;
  top: 12px;
  align-self: start;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 10px;
  padding: 16px 18px;
  min-height: 160px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* When a claim IS selected the pane gets a sharper feel */
.claim-detail-pane.has-claim {
  background: var(--ui-bg);
  border-color: var(--ui-border);
}

.claim-detail-empty {
  color: #b0b7c3;
  font-size: 13px;
  text-align: center;
  padding: 28px 0;
  letter-spacing: 0.01em;
}

.claim-detail-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-border);
}

.claim-detail-key {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ui-text);
  margin-bottom: 5px;
  word-break: break-all;
}

.claim-detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.claim-detail-back-action {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ui-border);
}

/* Scenario usage section */
.claim-usage-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
}

.claim-usage-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-muted);
  margin-bottom: 8px;
}

.claim-usage-empty {
  font-size: 13px;
  color: var(--ui-muted);
}

.claim-usage-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.claim-usage-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--ui-bg-soft);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s, border-color 0.12s;
  text-decoration: none;
}

.claim-usage-item:hover {
  background: #eef3ff;
  border-color: #bccbf5;
}

.claim-usage-sid {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-primary);
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.claim-usage-name {
  flex: 1;
  color: var(--ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.claim-usage-score {
  font-size: 11px;
  color: var(--ui-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Rows in the checkbox multi-selection set (lighter) */
.lib-row.row-selected {
  background: #f4f7fb;
}

/* The claim currently open in the detail pane (stronger) */
.lib-row.selected-claim {
  background: #eef4ff !important;
  box-shadow: inset 3px 0 0 var(--teal-green) !important;
}

/* Hover states */
.lib-table tbody tr:hover {
  background: #f0f4f8;
}
.lib-table tbody tr.selected-claim:hover {
  background: #e6f0ff;
}

/* Override 2-column claim-edit-panel to single column inside detail pane */
.claim-detail-pane .claim-edit-panel {
  grid-template-columns: 1fr;
  padding: 0;
}
.claim-detail-pane .claim-edit-col-left {
  border-right: none;
  padding-right: 0;
}
.claim-detail-pane .claim-edit-col-right {
  padding-left: 0;
}
.claim-detail-pane .claim-edit-banner {
  margin-bottom: 10px;
}

/* Collapse to single column on narrow viewports */
@media (max-width: 1100px) {
  .claims-workspace {
    display: block;
  }
  .claims-list-pane {
    padding-right: 0;
  }
  .claims-splitter {
    display: none;
  }
  .claim-detail-pane {
    min-width: 0;
    width: 100% !important;
    margin-top: 20px;
    display: block;
    position: static;
    max-height: none;
    top: auto;
  }
}

/* Claim Library */
.lib-subtabs {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
}
.lib-subtab {
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  color: var(--ui-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
  line-height: 1.4;
}
.lib-subtab:hover { background: var(--ui-secondary-bg); color: var(--ui-text); }
.lib-subtab.active {
  background: var(--ui-primary);
  color: #ffffff;
  border-color: var(--ui-primary);
}

/* Workbench subtabs (sources, claims, etc.) need padding */

#lib-subtab-content-clusters .lib-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  min-height: 200px;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.lib-placeholder { color: var(--text-muted); font-size: 0.875rem; }
/* ── Sources two-column workspace ─────────────────────────────────── */
.lib-sources-toolbar.card { display: none; }
.lib-sources-summary { margin: 0; font-size: 0.8125rem; color: var(--text-muted); }
.lib-sources-table { margin-top: 0; table-layout: fixed; width: 100%; }
.lib-sources-table .source-filename { font-family: var(--font-mono); font-size: 0.8125rem; }
.lib-sources-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.lib-sources-table thead th.sortable:hover { background: var(--ui-bg-soft, #f5f6f8); }

.src-list-pane  { min-width: 0; overflow-y: auto; height: 100%; padding-right: 4px; }
.src-detail-pane { overflow-y: auto; height: 100%; }
@media (max-width: 900px) {
  
  .src-list-pane  { height: auto; overflow-y: visible; }
  .src-detail-pane { height: auto; }
}

/* Sources table columns — 5-column layout */
.src-col-name      { width: auto; }
.src-col-type      { width: 120px; }
.src-col-sector    { width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-col-authority { width: 80px; text-align: center; }
.src-col-status    { width: 80px; }
/* Legacy columns hidden in new layout */
.src-col-region   { display: none; }
.src-col-claims   { display: none; }
.src-col-foresight { display: none; }
.src-col-actions  { display: none; }
/* Keep legacy classes harmless — except src-col-date which is now active */
.src-col-scope, .src-col-org, .src-col-relevance { display: none; }
.src-col-date { width: 96px; font-size: 12px; color: var(--ui-muted); white-space: nowrap; }

/* Clickable source rows */

/* Source name cell */
.src-name-main { font-size: 13px; font-weight: 500; color: var(--ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-name-org  { font-size: 11px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.src-name-file { font-size: 10px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* ── Source detail panel (right pane) ────────────────────────────── */

/* Edit button */

/* Inline edit form */

.src-detail-filelink { font-size: 12px; color: var(--ui-accent, #3b82f6); text-decoration: none; font-weight: 500; }
.src-detail-filelink:hover { text-decoration: underline; }

/* Authority hero card — prominent full-width block */

/* Archive warning */

/* Extract Claims button in detail panel */

/* Checkbox column in sources table */
.src-col-check { width: 36px; text-align: center; }

/* Lime-green accent checkboxes in sources table — matches Raw Claims */
.lib-sources-table input[type="checkbox"],
#src-thead-check {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--teal-green);
}

/* Empty / not-yet-extracted placeholder text */

/* Sources delete button — dark gray, not red */

/* Source type badge */
.src-type-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--ui-secondary-bg);
  color: var(--ui-text);
  white-space: nowrap;
}

/* Import status badge */
.src-status-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 500;
}
.src-status-ok         { background: #e6f4ea; color: #1a7f37; }
.src-status-scanned    { background: #dbeafe; color: #1d4ed8; }
.src-status-transcribed{ background: #f3e8ff; color: #6b21a8; }
.src-status-fail       { background: #fde8e8; color: #b42318; }
.src-status-pending    { background: #fff3cd; color: #7d5a00; }

/* Quality dots */
.quality-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.7;
}
.qdot-high   { background: #1a7f37; }
.qdot-med    { background: #e6a817; }
.qdot-low    { background: #b42318; }

/* Claim sub count */
.src-claim-sub { font-size: 11px; color: var(--ui-muted); }

/* Source detail panel (expandable row) */
.src-detail-row td { padding: 0 !important; }
.src-detail-panel {
  background: var(--ui-bg-soft);
  border-top: 1px solid var(--ui-border);
  border-bottom: 2px solid var(--asyntis-accent);
  padding: 14px 20px 16px;
}
.src-doc-summary {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f5f8ff;
  border: 1px solid #d6e0f5;
  border-radius: 6px;
}
.src-doc-summary-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.src-doc-summary-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ui-text);
  margin: 0;
}
.src-detail-grid {
  display: grid;
  grid-template-columns: 140px 1fr 140px 1fr;
  gap: 4px 12px;
  font-size: 12.5px;
}
.src-detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ui-muted);
  padding-top: 4px;
}
.src-detail-value { padding: 3px 0 3px; color: var(--ui-text); }
.src-detail-notes { color: var(--ui-muted); font-style: italic; }
.src-detail-link { color: var(--ui-text); text-decoration: underline; word-break: break-all; }

/* Import section labels */
.lib-import-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ui-muted);
  font-weight: 600;
  margin: 10px 0 4px;
  border-bottom: 1px solid var(--ui-border);
  padding-bottom: 3px;
}

/* Dark mode */
body.theme-dark .src-type-badge     { background: var(--bg-soft); color: var(--text); }
body.theme-dark .src-status-ok      { background: #0d2e1a; color: #4ade80; }
body.theme-dark .src-status-scanned     { background: #1e3a5f; color: #93c5fd; }
body.theme-dark .src-status-transcribed { background: #3b1a5f; color: #d8b4fe; }
body.theme-dark .src-status-fail    { background: #2e0d0d; color: #f87171; }
body.theme-dark .src-status-pending { background: #2e2400; color: #fcd34d; }
body.theme-dark .src-detail-panel   { background: var(--bg-soft); border-color: var(--border); }
body.theme-dark .src-doc-summary    { background: #1a2035; border-color: #2d3a55; }

/* "Import source" button accent */
.btn-import-source {
  background: var(--ui-primary);
  color: #fff;
}
.btn-import-source:hover { background: #333; }

/* ── Import panel ─────────────────────────────────────── */
.lib-import-panel {
  margin-top: 0.75rem;
  padding: 18px 20px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-bg-soft);
}
.lib-import-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lib-import-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text);
  letter-spacing: .02em;
}
.lib-import-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--ui-muted);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.lib-import-panel-close:hover { background: var(--ui-secondary-bg); color: var(--ui-text); }
.lib-import-hint {
  font-size: 12px;
  color: var(--ui-muted);
  margin: 0 0 14px;
}
.lib-import-hint-inline {
  font-size: 11px;
  color: var(--ui-muted);
  font-weight: 400;
}
.lib-import-form { display: flex; flex-direction: column; gap: 10px; }
.lib-import-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.lib-import-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.lib-import-field-wide { flex: 1 1 260px; }
.lib-import-field-grow { flex: 1 1 200px; }
.lib-import-field-narrow { flex: 0 0 100px; }
.lib-import-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ui-muted);
  font-weight: 500;
}
.lib-import-required { color: #e53e3e; }
.lib-import-required[data-air-tip] { cursor: help; }

/* ── Meta-fields reveal (shown after AI scan) ─────────────────── */
#lib-import-meta-fields {
  animation: meta-fade-in 0.25s ease;
}
@keyframes meta-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lib-import-meta-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
}
.lib-import-meta-divider::before,
.lib-import-meta-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ui-border);
}
.lib-import-meta-divider-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--asyntis-accent);
  white-space: nowrap;
}
.lib-import-input,
.lib-import-select,
.lib-import-file {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  color: var(--ui-text);
  width: 100%;
  box-sizing: border-box;
}
.lib-import-select { padding-right: 28px; }
.lib-import-file {
  padding: 0 8px;
  line-height: 30px;
  cursor: pointer;
}
.lib-import-input:focus,
.lib-import-select:focus,
.lib-import-file:focus {
  outline: none;
  border-color: var(--asyntis-accent);
  box-shadow: 0 0 0 2px rgba(var(--teal-green-rgb),.2);
}
.lib-import-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-border);
}
.lib-import-submit {
  background: var(--ui-primary);
  color: #fff;
  min-width: 110px;
}
.lib-import-submit:hover { background: #333; }
.lib-import-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.lib-import-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 4px;
  font-size: 13px;
  color: var(--ui-muted);
}
@keyframes lib-import-spin { to { transform: rotate(360deg); } }
.lib-import-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ui-border);
  border-top-color: var(--ui-text);
  border-radius: 50%;
  animation: lib-import-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* Dark mode overrides for import panel */
body.theme-dark .lib-import-panel { background: var(--bg-soft); border-color: var(--border); }
body.theme-dark .lib-import-input,
body.theme-dark .lib-import-select,
body.theme-dark .lib-import-file {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
body.theme-dark .lib-import-footer { border-top-color: var(--border); }

/* ── Redesigned import panel — Phase 1: upload row ───────────────────── */
.imp-upload-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.imp-upload-row .lib-import-field:first-child { flex: 0 0 auto; min-width: 260px; }
.imp-upload-row .lib-import-field-grow { flex: 1; }

/* ── Review panel header (shown after scan) ──────────────────────────── */
.imp-review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--asyntis-accent);
}
.imp-review-header-text {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--asyntis-accent);
}
body.theme-dark .imp-review-header { border-bottom-color: var(--asyntis-accent); }

/* ── Review sections ─────────────────────────────────────────────────── */
.imp-section {
  margin: 14px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ui-border);
}
.imp-section:last-child { border-bottom: none; }
.imp-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ui-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.imp-section-note {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ui-muted);
}
body.theme-dark .imp-section { border-bottom-color: var(--border); }

/* ── Grid layouts ────────────────────────────────────────────────────── */
.imp-grid {
  display: grid;
  gap: 10px;
}
.imp-grid-2 { grid-template-columns: 1fr 1fr; }
.imp-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) {
  .imp-grid-2, .imp-grid-3 { grid-template-columns: 1fr; }
}

/* ── Document summary textarea ───────────────────────────────────────── */
.imp-summary-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  color: var(--ui-text);
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.imp-summary-textarea:focus {
  outline: none;
  border-color: var(--asyntis-accent);
  box-shadow: 0 0 0 2px rgba(var(--teal-green-rgb),.2);
}
body.theme-dark .imp-summary-textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}

/* ── Foresight scores in review panel ───────────────────────────────── */
.imp-section-scores .scan-scores-row {
  margin-bottom: 12px;
}
.imp-scores-row .scan-score-card {
  flex: 1;
  min-width: 100px;
}
.scan-period-value {
  font-size: 13px;
  font-weight: 600;
}

/* ── Extract settings row ────────────────────────────────────────────── */
.imp-extract-settings {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.imp-score-input {
  width: 72px !important;
  flex: none !important;
}

/* ── Authority row in import form ────────────────────────────────────── */
.imp-authority-row { display: flex; align-items: center; gap: 8px; }
.imp-authority-label {
  font-size: 12px;
  color: var(--ui-muted);
  white-space: normal;
  line-height: 1.3;
  font-style: italic;
}

/* ── Sources table — Foresight column ─────────────────────────────────── */
.foresight-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.foresight-badge.rel-high { background: #dcfce7; color: #166534; }
.foresight-badge.rel-med  { background: #fef9c3; color: #854d0e; }
.foresight-badge.rel-low  { background: #fee2e2; color: #991b1b; }
.foresight-badge.rel-none { background: transparent; color: var(--ui-muted); }
body.theme-dark .foresight-badge.rel-high { background: #14532d; color: #bbf7d0; }
body.theme-dark .foresight-badge.rel-med  { background: #713f12; color: #fef08a; }
body.theme-dark .foresight-badge.rel-low  { background: #7f1d1d; color: #fecaca; }

/* ── Sources table — Authority column ─────────────────────────────────── */
.authority-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.authority-badge.auth-high { background: #dbeafe; color: #1d4ed8; }
.authority-badge.auth-med  { background: #ede9fe; color: #5b21b6; }
.authority-badge.auth-low  { background: #f3f4f6; color: #4b5563; }
.authority-badge.auth-none { background: transparent; color: var(--ui-muted); }
body.theme-dark .authority-badge.auth-high { background: #1e3a5f; color: #93c5fd; }
body.theme-dark .authority-badge.auth-med  { background: #2e1065; color: #c4b5fd; }
body.theme-dark .authority-badge.auth-low  { background: #374151; color: #9ca3af; }

/* Authority row in import form — see .imp-authority-row above */
.lib-import-authority-row { display: flex; align-items: center; gap: 8px; }
/* Legacy scan result labels (kept for any residual references) */
.scan-authority-label { font-size: 11px; color: var(--ui-muted); margin-top: 2px; line-height: 1.3; }
.scan-pubdate-value { font-size: 14px; }

/* Copy table button in article viewer */
.ba-table-wrap { position: relative; margin: 1em 0; }
.ba-copy-table-btn { font-size: 11px; margin-bottom: 4px; }

/* Archived status badge */
.src-status-archived   { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }
body.theme-dark .src-status-archived   { background: #374151; color: #9ca3af; border-color: #4b5563; }
.src-status-queued     { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.src-status-processing { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.src-status-failed     { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
body.theme-dark .src-status-queued     { background: #1e3a5f; color: #93c5fd; border-color: #1d4ed8; }
body.theme-dark .src-status-processing { background: #451a03; color: #fcd34d; border-color: #b45309; }
body.theme-dark .src-status-failed     { background: #450a0a; color: #fca5a5; border-color: #b91c1c; }

/* Recommended claims sub-text */
.src-claim-rec { color: #a3e635; font-size: 10px; }

/* Archive warning inside scan result panel */
.scan-archive-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #9a3412;
  margin-bottom: 12px;
  line-height: 1.5;
}
body.theme-dark .scan-archive-warning {
  background: #431407;
  border-color: #9a3412;
  color: #fdba74;
}

/* Source type chip in scan result themes row */
.scan-type-chip { font-weight: 600; background: var(--ui-primary); color: var(--ui-bg) !important; border-color: var(--ui-primary); }
body.theme-dark .scan-type-chip { background: var(--ui-text); color: var(--bg) !important; }

/* Scan button */
.btn-scan { border-color: #a3e635; color: #365314; }
body.theme-dark .btn-scan { border-color: #84cc16; color: #d9f99d; }

/* ── Source Intelligence panel (inside import panel, shown after scan) ── */
.lib-scan-result {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.scan-result-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.scan-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ui-text);
}
.scan-filename-badge {
  font-size: 11px;
  color: var(--ui-muted);
  background: var(--ui-secondary-bg);
  padding: 2px 8px;
  border-radius: 8px;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scan-scores-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.scan-score-card {
  background: var(--ui-secondary-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.scan-score-label {
  font-size: 11px;
  color: var(--ui-muted);
  margin-bottom: 4px;
}
.scan-score-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ui-text);
  line-height: 1.1;
  margin-bottom: 6px;
}
.scan-rec-large { font-size: 26px; }
.scan-score-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.scan-score-fill {
  height: 100%;
  background: var(--teal-green-grad);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.scan-fwd-fill { background: #60a5fa; }
.scan-summary-text {
  font-size: 13px;
  color: var(--ui-muted);
  line-height: 1.55;
  margin: 0 0 14px;
}
.scan-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-muted);
  margin-bottom: 6px;
}
.scan-signals-section { margin-bottom: 12px; }
.scan-signals-list {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 12px;
  color: var(--ui-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scan-signals-list li::marker { color: var(--asyntis-accent); }
.scan-themes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.scan-theme-chip {
  font-size: 11px;
  padding: 3px 9px;
  background: var(--ui-secondary-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ui-text);
}
.scan-extract-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.scan-extract-btn { font-weight: 600; }

/* "View Claims →" — primary action shown after extraction */
.btn-view-claims {
  font-weight: 600;
  background: #0e7490;
  color: #fff;
  border-color: #0e7490;
}
.btn-view-claims:hover { background: #0c6480; border-color: #0c6480; color: #fff; }
body.theme-dark .btn-view-claims { background: #0e7490; border-color: #22d3ee; color: #fff; }
body.theme-dark .btn-view-claims:hover { background: #0c6480; }

/* Count badge shown after extraction ("N claims extracted") */
.scan-extracted-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 12px;
  background: #d1fae5;
  color: #065f46;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #6ee7b7;
}
body.theme-dark .scan-extracted-count {
  background: #064e3b;
  color: #6ee7b7;
  border-color: #065f46;
}

/* Dark mode for scan result panel */
body.theme-dark .scan-score-card    { background: var(--bg-soft); border-color: var(--border); }
body.theme-dark .scan-theme-chip    { background: var(--bg-soft); border-color: var(--border); }
body.theme-dark .scan-filename-badge { background: var(--bg-soft); }

/* ── Source Intelligence in detail panel (src-detail-panel) ────────────── */
.src-intel-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.src-intel-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ui-muted);
  margin-bottom: 10px;
}
.src-intel-scores {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.src-intel-score-item {
  display: grid;
  grid-template-columns: 130px 1fr 42px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.src-intel-label { color: var(--ui-muted); }
.src-intel-bar {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.src-intel-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.35s ease;
}
.rel-fill { background: var(--teal-green-grad); }
.fwd-fill { background: #60a5fa; }
.src-intel-pct {
  font-weight: 600;
  color: var(--ui-text);
  text-align: right;
}
.src-intel-summary {
  font-size: 12px;
  color: var(--ui-muted);
  line-height: 1.5;
  margin: 0 0 8px;
}
.src-intel-signals {
  margin: 4px 0 8px;
  padding-left: 16px;
  font-size: 12px;
  color: var(--ui-text);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.src-intel-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.src-intel-theme {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--ui-secondary-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--ui-text);
}

/* ── Filter card ─────────────────────────────────────── */
.lib-filters.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 12px;
}

.filter-source-row {
  align-items: flex-end;
}

.filter-btn-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Each label+control pair */
.filter-ctrl {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.filter-ctrl label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin: 0;
}
.filter-ctrl select,
.filter-ctrl input[type="text"],
.filter-ctrl input[type="number"] {
  height: 32px;
  padding: 0 8px;
  font-size: 0.8125rem;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: inherit;
  width: auto;
  min-width: 90px;
}
.filter-ctrl select {
  padding-right: 22px; /* breathing room for native arrow */
  appearance: auto;
}
.filter-ctrl-wide input { min-width: 180px; }
.filter-ctrl-narrow input { max-width: 60px; min-width: 60px; }
.filter-ctrl-grow { flex: 1; }

/* Source input + clear cluster */
.filter-source-cluster {
  display: flex;
  align-items: center;
  gap: 0;
  height: 32px;
}
.filter-source-cluster input {
  height: 32px;
  flex: 1;
  min-width: 200px;
  border-radius: 6px 0 0 6px;
  border-right: none;
  padding: 0 8px;
  font-size: 0.8125rem;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: inherit;
}
.filter-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 30px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--ui-border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: var(--ui-bg);
  color: var(--ui-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.1s;
}
.filter-clear-btn:hover { background: #f0f0f0; color: var(--ui-text); }

.filter-refresh-btn {
  height: 32px;
  margin-top: 0;
  align-self: flex-end;
  white-space: nowrap;
  margin-left: 6px;
}

/* ── Bulk action bar ─────────────────────────────────── */
.lib-bulk.card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 7px 12px;
}
.lib-bulk-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lib-bulk-controls label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin: 0;
  white-space: nowrap;
}
.lib-bulk-controls select {
  height: 28px;
  padding: 0 6px;
  font-size: 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: inherit;
  width: 140px;
}
.lib-bulk-controls .btn {
  margin-top: 0;
  height: 28px;
  padding: 0 8px;
  font-size: 0.75rem;
}
.lib-bulk-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0;
  width: 100%;
}
.lib-bulk-progress {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
/* Sticky filter bar (page scroll) */

/* Scrollable table container — owns vertical scroll so header can pin inside it */
#lib-subtab-content-claims .lib-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  min-height: 200px;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Generic table wrap keeps horizontal scroll only */
.lib-table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
}

/* Sticky thead inside scrolling table wrap */
.lib-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card);
  box-shadow: 0 1px 0 #f0f0f0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  padding: 8px 12px;
}

.lib-table {
  font-size: 13px;
}

.lib-table tbody td {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid #f2f2f2;
}

.lib-table tbody tr:hover td {
  border-bottom-color: #ebebeb;
}

/* claim_text — most prominent; column fills remaining table width */

/* Fixed-layout table — 5 columns: cb / status / claim_text / source / actions */
.lib-table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}

/* Larger, easier-to-click checkboxes */
.lib-table input[type="checkbox"],
#lib-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--teal-green);
}
.lib-table td:first-child,
.lib-table th:first-child {
  text-align: center;
  vertical-align: middle;
}

/* Column widths — col 3 (claim) fills all remaining space.
   Keep these as narrow as readable so the claim column gets maximum width. */
.lib-table thead th:nth-child(1),
.lib-table tbody td:nth-child(1) { width: 42px; }           /* checkbox */
.lib-table thead th:nth-child(2),
.lib-table tbody td:nth-child(2) { width: 80px; }           /* status */
.lib-table thead th:nth-child(4),
.lib-table tbody td:nth-child(4) { width: 120px; }          /* source */
.lib-table thead th:nth-child(5),
.lib-table tbody td:nth-child(5) { width: 96px; }           /* actions */

/* claim cell td — sizing only; clamp lives in the inner div */
.lib-table td.claim-cell {
  vertical-align: top;
}

.claim-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ui-text);
  word-break: normal;
  overflow-wrap: break-word;
}

/* source — single-line ellipsis */
.lib-table td:nth-child(4),
.lib-table td.lib-col-source {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  font-size: 0.78rem;
  color: var(--ui-muted);
}

/* Sortable column headers */
.lib-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.lib-table thead th.sortable:hover { background: #f5f6f8; }
.lib-table thead th .sort-indicator {
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.65em;
  opacity: 0.25;
  vertical-align: middle;
}
.lib-table thead th.sort-asc .sort-indicator,
.lib-table thead th.sort-desc .sort-indicator {
  opacity: 1;
  color: var(--accent);
}

.lib-table .lib-row.selected { background: #e0f2fe; }
.lib-loading {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Expanded detail row — full-width panel */
.lib-table tr.lib-expanded-detail td {
  background: var(--bg);
  padding: 0 !important;
  vertical-align: top;
  border-top: 2px solid var(--accent);
}

.lib-interpretations-section { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.lib-interpretations-section .lib-interpretations-container { margin: 0.5rem 0; min-height: 1.5rem; }
.lib-interp-list { display: flex; flex-direction: column; gap: 1rem; }
.lib-interp-card { padding: 0.75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.lib-interp-card label { display: block; font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; color: var(--text-muted); }
.lib-interp-card textarea { width: 100%; margin-top: 0.25rem; padding: 0.4rem; font-size: 0.8125rem; font-family: inherit; resize: vertical; }
.lib-interp-actions { margin-left: 0.5rem; }
.lib-interp-card .interp-status { margin-right: 0.25rem; }
.lib-no-interps { font-style: italic; color: var(--text-muted); }
.lib-status-buttons .lib-btn-status { margin-right: 0.25rem; }
.lib-status-buttons .lib-btn-status.active { background: var(--teal-green-grad); color: #ffffff; border-color: var(--accent); }
.lib-btn-generate-interp { margin-top: 0.5rem; }

/* Editable claim detail panel — 2-column grid */
.claim-edit-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  padding: 1rem 1.25rem;
  background: var(--bg);
}

/* Full-width rows: callout banner + footer actions */
.claim-edit-banner,
.claim-edit-footer {
  grid-column: 1 / -1;
}
.claim-edit-banner {
  margin-bottom: 0.75rem;
}
.claim-edit-footer {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

/* Left column: claim_text + source */
.claim-edit-col-left {
  padding-right: 1rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Right column: system statement, pressure, rationale, scope/tags */
.claim-edit-col-right {
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Collapse to single column on narrow screens */
@media (max-width: 900px) {
  .claim-edit-panel {
    grid-template-columns: 1fr;
  }
  .claim-edit-col-left {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.75rem;
  }
  .claim-edit-col-right {
    padding-left: 0;
  }
}

.edit-field-group { display: flex; flex-direction: column; gap: 0.2rem; }
.edit-field-row { flex-direction: row !important; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.edit-field-grow { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.edit-field-label { font-size: 12px; font-weight: 500; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.claim-edit-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.55;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  resize: vertical;
  min-height: 4.5rem;
}
.claim-edit-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.claim-edit-select { font-family: inherit; font-size: 0.8125rem; padding: 0.35rem 0.45rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); }
.claim-edit-input { width: 100%; font-family: inherit; font-size: 0.8125rem; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); }
.claim-edit-select:focus, .claim-edit-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.claim-edit-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lib-btn-regenerate { margin-left: 0.75rem; }

/* Read-only field text */
.claim-edit-readonly-value {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  margin: 0;
}

/* Tags column + chips */
.tags-cell { font-size: 0.75rem; color: var(--text-muted); max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-chip { display: inline-block; font-size: 0.68rem; padding: 1px 5px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; margin-right: 0.15rem; color: var(--text-muted); }
.scope-badge { display: inline-block; font-size: 0.68rem; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.scope-macro { background: #ede9fe; color: #5b21b6; }
.scope-sector { background: #dbeafe; color: #1d4ed8; }
.scope-project { background: #dcfce7; color: #15803d; }

/* Two-column layout (Scenario Lab / Market Tracking) — resizable via JS */
.layout {
  --sl-left-width: 360px;
  --mt-left-width: 300px;
  display: grid;
  grid-template-columns: minmax(260px, var(--sl-left-width)) 8px 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  min-height: 600px;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* Left: form column */
.form-column {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  background: var(--bg-card);
}
@media (max-width: 900px) {
  .form-column { border-right: none; border-bottom: 1px solid var(--border); }
}

/* Right: results column */
.results-column {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  background: var(--bg);
}

/* ═══════════════════════════════════════════════════════
   CLAIM RADAR
   ═══════════════════════════════════════════════════════ */

.radar-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
}

/* ── Radar overlay (popup over radar for Ready-to-generate, Loading, Error) ── */
.radar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 40;
  border-radius: 8px;
}
body.theme-dark .radar-overlay {
  background: rgba(18, 22, 34, 0.88);
}
.radar-overlay-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
body.theme-dark .radar-overlay-card {
  background: var(--card-bg, #1e2330);
  border-color: var(--border-color, #2e3447);
}
/* Remove previous standalone padding on resultsPreview (now inside overlay) */
#resultsPreview {
  padding: 0;
}

.radar-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.radar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1a1f2e);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.radar-hint {
  font-size: 12px;
  color: var(--text-muted, #888);
  flex: 1;
}

/* Zoom control buttons in toolbar */
.radar-zoom-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}
.radar-zoom-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #ddd);
  background: var(--bg-card, #fff);
  color: var(--text, #1a1f2e);
  cursor: pointer;
  line-height: 1.6;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.radar-zoom-btn:hover {
  border-color: var(--asyntis-accent);
  background: rgba(var(--teal-green-rgb),0.08);
}

.radar-btn-clear {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color, #ddd);
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
}
.radar-btn-clear:hover {
  border-color: var(--asyntis-accent);
  color: var(--text, #1a1f2e);
}

/* Full-width wrap — matches the selection strip width */
.radar-wrap {
  position: relative;
  width: 100%;
}
.radar-svg {
  width: 100%;
  height: auto;
  display: block;
  cursor: grab;
  border-radius: 8px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #eee);
}
.radar-svg:active { cursor: grabbing; }

/* SVG elements */
.radar-sector-even {
  fill: rgba(0,0,0,0.018);
  stroke: none;
}
.radar-sector-odd {
  fill: rgba(0,0,0,0.042);
  stroke: none;
}
.radar-sector-entrant-even {
  fill: rgba(30, 90, 180, 0.055);
  stroke: none;
}
.radar-sector-entrant-odd {
  fill: rgba(30, 90, 180, 0.10);
  stroke: none;
}
.radar-sector-entrant-even--green {
  fill: rgba(30, 120, 60, 0.06);
  stroke: none;
}
.radar-sector-entrant-odd--green {
  fill: rgba(30, 120, 60, 0.11);
  stroke: none;
}
.radar-outer-ring {
  fill: none;
  stroke: var(--border-color, #d0d0d0);
  stroke-width: 1.2;
}
.radar-ring {
  fill: none;
  stroke: var(--border-color, #e0e0e0);
  stroke-width: 0.8;
  stroke-dasharray: 4 3;
}
.radar-spoke {
  stroke: var(--border-color, #ddd);
  stroke-width: 0.8;
}
.radar-domain-label {
  font-size: 9.5px;
  font-weight: 700;
  fill: var(--text-muted, #999);
  font-family: inherit;
  letter-spacing: 0.07em;
  pointer-events: none;
}
.radar-center-dot {
  fill: var(--asyntis-accent);
  stroke: none;
}
.radar-claim {
  fill: #9aa0b4;
  stroke: #fff;
  stroke-width: 1;
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 0.12s, r 0.1s;
}
.radar-claim:hover {
  opacity: 1;
  stroke-width: 2;
}
.radar-claim.deselected {
  fill: transparent;
  stroke: #9aa0b4;
  stroke-width: 1.5;
  opacity: 0.5;
}
.radar-claim.deselected:hover {
  opacity: 0.8;
}
.radar-claim.scenario-selected {
  fill: var(--asyntis-accent);
  stroke: var(--teal-green-to);
  stroke-width: 2;
  opacity: 1;
}
.radar-claim.selected {
  fill: var(--asyntis-accent);
  stroke: var(--teal-green-to);
  stroke-width: 2;
  opacity: 1;
}

/* Cluster popup (Funda-style) */
/* Hover tooltip — shows claim text on mouseenter before popup opens */
.radar-tooltip {
  position: absolute;
  background: rgba(26, 31, 46, 0.91);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 6px;
  max-width: 210px;
  pointer-events: none;
  z-index: 55;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
  white-space: normal;
  word-break: break-word;
  transition: opacity 0.1s;
}
body.theme-dark .radar-tooltip {
  background: rgba(220, 225, 240, 0.93);
  color: #1a1f2e;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* rcp-footer hidden state for read-only tabs */

.radar-cluster-popup {
  position: absolute;
  bottom: 12px;
  left: 12px;
  top: auto;
  width: 260px;
  height: 310px;
  min-height: 310px;
  max-height: 310px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  z-index: 60;
  font-size: 13px;
  color: var(--text, #1a1f2e);
  overflow: hidden;
}

/* header bar always shown for both single and multi-claim */

/* Cluster badge */
.radar-cluster-circle {
  fill: #3a4060;       /* dark circle in light mode */
  stroke: none;
  cursor: pointer;
}
.radar-cluster-circle.has-selection {
  fill: var(--asyntis-accent);
  stroke: var(--teal-green-to);
  stroke-width: 1.5;
}
.radar-cluster-badge.has-deselection .radar-cluster-circle {
  fill: transparent;
  stroke: #3a4060;
  stroke-width: 2;
}
.radar-cluster-badge.has-deselection .radar-cluster-count {
  fill: #1a1f2e;
}
.radar-cluster-count {
  font-size: 8.5px;
  font-weight: 700;
  fill: #ffffff;       /* white number in light mode */
  pointer-events: none;
  font-family: inherit;
}
.radar-cluster-badge {
  cursor: pointer;
}
.radar-cluster-badge:hover {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.18);
}
  stroke: var(--asyntis-accent);
  stroke-width: 1.8;
}

/* Legend */
/* Legend + deselected strip — stacked with explicit spacing */
.radar-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted, #888);
}
.radar-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.radar-legend-center {
  font-style: italic;
}

/* Legend dots — mirror exact fill/stroke of radar claims & clusters */
.radar-legend-claim {
  fill: #9aa0b4;
  stroke: #8890a8;
  stroke-width: 1.5;
  opacity: 0.85;
}
.radar-legend-deselected {
  fill: transparent;
  stroke: #9aa0b4;
  stroke-width: 1.5;
}
.radar-legend-selected {
  fill: var(--asyntis-accent);
  stroke: var(--teal-green-to);
  stroke-width: 2;
}
/* Cluster: dark circle + white number + dark border */
.radar-legend-cluster {
  fill: #3a4060;
  stroke: #1a1f2e;
  stroke-width: 1.5;
}
.radar-legend-cluster-count {
  fill: #fff;
}
/* Centrum: lime-green dot, no stroke */
.radar-legend-centrum {
  fill: var(--asyntis-accent);
  stroke: none;
}
body.theme-dark .radar-legend-claim    { fill: #5a6280; stroke: #3a4060; }
body.theme-dark .radar-legend-deselected { fill: transparent; stroke: #5a6280; }
body.theme-dark .radar-legend-cluster  { fill: #0a0d16; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
body.theme-dark .radar-legend-cluster-count { fill: #fff; }
body.theme-dark .radar-legend-centrum  { fill: var(--asyntis-accent); stroke: none; }

/* Selection strip */
.radar-selection {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--bg-card, #f9f9f9);
  border: 1px solid var(--asyntis-accent);
  border-radius: 8px;
  font-size: 12px;
  margin-top: 16px;
}
.radar-selection.desel-mode {
  border-color: #c8cdd8;
  background: var(--bg-card, #fff);
}
.radar-selection-label {
  font-weight: 600;
  color: var(--text-muted, #666);
  white-space: nowrap;
  padding-top: 2px;
}
.radar-selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.radar-sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  background: var(--teal-green-grad);
  color: #1a1f2e;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
}
.radar-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.radar-desel-chip {
  background: transparent;
  border: 1px solid #9aa0b4;
  color: var(--text, #1a1f2e);
}
.radar-sel-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
  color: #555;
  flex-shrink: 0;
}
.radar-sel-chip-remove:hover { color: #c00; }

/* ── Dark mode overrides ── */
body.theme-dark .radar-svg {
  background: var(--bg-card, #1e2330);
  border-color: var(--border-color, #2e3447);
}
body.theme-dark .radar-sector-even { fill: rgba(255,255,255,0.015); }
body.theme-dark .radar-sector-odd  { fill: rgba(255,255,255,0.035); }
body.theme-dark .radar-sector-entrant-even { fill: rgba(100, 160, 255, 0.06); }
body.theme-dark .radar-sector-entrant-odd  { fill: rgba(100, 160, 255, 0.11); }
body.theme-dark .radar-sector-entrant-even--green { fill: rgba(80, 200, 100, 0.06); }
body.theme-dark .radar-sector-entrant-odd--green  { fill: rgba(80, 200, 100, 0.11); }
body.theme-dark .radar-outer-ring  { stroke: var(--border-color, #3a4060); }
body.theme-dark .radar-ring  { stroke: var(--border-color, #2a3045); }
body.theme-dark .radar-spoke { stroke: var(--border-color, #2a3045); }
body.theme-dark .radar-domain-label { fill: var(--text-muted, #555); }

.radar-domain-label--entrant { fill: #1e3a6e; }
body.theme-dark .radar-domain-label--entrant { fill: #7aa6e8; }

.radar-domain-label--entrant-green { fill: #1a5c2a; }
body.theme-dark .radar-domain-label--entrant-green { fill: #6ecf7f; }
body.theme-dark .radar-claim { fill: #5a6280; stroke: #2a3045; }
body.theme-dark .radar-claim.deselected { fill: transparent; stroke: #5a6280; }
body.theme-dark .radar-claim.selected,
body.theme-dark .radar-claim.scenario-selected { fill: var(--asyntis-accent); stroke: var(--teal-green-to); }
body.theme-dark .radar-cluster-circle { fill: #0a0d16; stroke: rgba(255,255,255,0.22); stroke-width: 1.5; }
body.theme-dark .radar-cluster-circle.has-selection { fill: #0a0d16; stroke: var(--asyntis-accent); stroke-width: 2; }
body.theme-dark .radar-cluster-badge.has-deselection .radar-cluster-circle { fill: transparent; stroke: rgba(255,255,255,0.5); stroke-width: 2; }
body.theme-dark .radar-cluster-badge.has-deselection .radar-cluster-count { fill: rgba(255,255,255,0.8); }
body.theme-dark .radar-cluster-count { fill: #ffffff; }
body.theme-dark .radar-cluster-popup {
  background: var(--bg-card, #1e2330);
  border-color: var(--border-color, #2e3447);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}

/* rcp-single header same as multi-claim: always show the bar */

body.theme-dark .radar-selection {
  background: #1a2010;
  border-color: var(--asyntis-accent);
}
body.theme-dark .radar-sel-chip { color: #1a1f2e; }
body.theme-dark .radar-title { color: var(--text, #e8eaf0); }
body.theme-dark .radar-zoom-btn {
  background: var(--bg-card, #1e2330);
  border-color: var(--border-color, #2e3447);
  color: var(--text, #e8eaf0);
}
body.theme-dark .radar-zoom-btn:hover {
  border-color: var(--asyntis-accent);
  background: rgba(var(--teal-green-rgb),0.08);
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
}
.card h2 {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Form */
label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.65rem 0 0.2rem;
}
label:first-of-type { margin-top: 0; }
.field-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Slider inputs */
.slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border-color, #ddd);
  outline: none;
  padding: 0;
  border: none;
  cursor: pointer;
  margin: 4px 0 2px;
}
.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal-green-grad);
  border: 2px solid var(--teal-green-to);
  cursor: pointer;
}
.slider-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal-green-grad);
  border: 2px solid var(--teal-green-to);
  cursor: pointer;
}
.slider-value {
  font-weight: 700;
  color: var(--text, #1a1f2e);
  font-variant-numeric: tabular-nums;
}
.slider-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted, #aaa);
  margin-bottom: 2px;
}
body.theme-dark .slider-input {
  background: var(--border-color, #2e3447);
}

input, select, textarea {
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
}
input:focus:not(.topbar-search-input),
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
textarea { resize: vertical; min-height: 60px; }
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 500px) { .row { grid-template-columns: 1fr; } }

/* Domain other input */
.domain-other-wrap { margin-top: 0.35rem; }
.domain-other-wrap input { font-family: var(--font-mono); }

/* ── Domain multi-select chips ─────────────────────────────────────────── */
.domain-chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.field-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}
.domain-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 20px;
  border: 1px solid var(--border, #d1d9e0);
  background: var(--bg-surface, #f4f7fb);
  color: var(--text-secondary, #555);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.domain-chip:hover {
  border-color: var(--asyntis-accent);
  color: var(--text);
}
.domain-chip.is-checked {
  background: var(--teal-green-grad);
  border-color: var(--asyntis-accent);
  color: #1a1f2e;
}
body.theme-dark .domain-chip {
  background: #1e2435;
  border-color: #2d3445;
  color: #9aa3b8;
}
body.theme-dark .domain-chip:hover {
  border-color: var(--asyntis-accent);
  color: #e8ecf4;
}
body.theme-dark .domain-chip.is-checked {
  background: var(--teal-green-grad);
  border-color: var(--asyntis-accent);
  color: #1a1f2e;
}

/* MT2 entrant chips — dark blue text to distinguish from competitor chips */

/* MT2 entrant chips — dark green (Demand-Supply Radar customers) */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 5px 11px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--ui-primary);
  color: #ffffff;
  font-family: inherit;
  margin-top: 0.5rem;
  line-height: 1.4;
  transition: filter 0.15s ease, background 0.15s ease;
}
.btn:hover {
  background: var(--ui-primary-hover);
  filter: brightness(0.94);
}
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:active {
  text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 5px 10px;
  font-size: 0.8125rem;
  font-weight: 400;
  border: 1px solid #e0e2e6;
  border-radius: 6px;
  cursor: pointer;
  background: #f7f8fa;
  color: var(--ui-text);
  font-family: inherit;
  margin-top: 0;
  line-height: 1.4;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn-secondary:hover { background: #eef0f3; border-color: #d0d3d9; }
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-small {
  padding: 3px 8px;
  font-size: 0.75rem;
}

.btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.btn-spinner.btn-spinner-dark {
  border-color: rgba(0,0,0,0.15);
  border-top-color: #374151;
}

/* Loading state (results column) */
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--text-muted);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: #555;
  font-size: 15px;
}
.loading-container .loading-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* ── Scope preview panel (pre-generation summary) ── */
#resultsPreview {
  padding: 24px;
}
.scope-preview-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 10px;
  padding: 28px 32px 32px;
  max-width: 480px;
}
.scope-preview-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #1a1f2e);
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}
.scope-preview-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.scope-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-color, #e8e8e8);
  padding-bottom: 8px;
}
.scope-preview-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.scope-preview-label {
  color: var(--text-muted, #888);
  flex-shrink: 0;
  min-width: 130px;
}
.scope-preview-value {
  color: var(--text-primary, #1a1f2e);
  font-weight: 500;
  text-align: right;
}
.scope-preview-start {
  width: 100%;
  justify-content: center;
}
.scope-preview-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.scope-preview-actions .scope-preview-start {
  flex: 1;
  width: auto;
}
.btn-outline-cancel {
  background: transparent;
  color: var(--text-primary, #1a1f2e);
  border: 1.5px solid var(--border-color, #c0c5d0);
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.btn-outline-cancel:hover {
  border-color: var(--text-primary, #1a1f2e);
}
body.theme-dark .btn-outline-cancel {
  color: var(--text-primary, #e8eaf0);
  border-color: var(--border-color, #3e4560);
}
body.theme-dark .btn-outline-cancel:hover {
  border-color: var(--text-primary, #e8eaf0);
}
.scope-preview-start:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.scope-preview-warn {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #856404;
  margin-bottom: 14px;
  line-height: 1.4;
}
body.theme-dark .scope-preview-warn {
  background: #2d2500;
  border-color: #665200;
  color: #ffd666;
}
.scope-preview-value--warn {
  color: #c0392b !important;
}
body.theme-dark .scope-preview-value--warn {
  color: #ff7675 !important;
}
body.theme-dark .scope-preview-card {
  background: var(--card-bg, #1e2330);
  border-color: var(--border-color, #2e3447);
}
body.theme-dark .scope-preview-title,
body.theme-dark .scope-preview-value {
  color: var(--text-primary, #e8eaf0);
}
body.theme-dark .scope-preview-row {
  border-color: var(--border-color, #2e3447);
}

/* ── Generation progress bar ── */
.loading-progress-wrap {
  width: 100%;
  max-width: 320px;
  margin-top: 14px;
}
.loading-progress-track {
  height: 4px;
  background: var(--border-color, #e0e0e0);
  border-radius: 4px;
  overflow: hidden;
}
.loading-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--teal-green-grad);
  border-radius: 4px;
  transition: width 0.8s ease;
}
.loading-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, #888);
}
body.theme-dark .loading-progress-track {
  background: var(--border-color, #2e3447);
}
.loading-dots::after {
  content: '';
  display: inline-block;
  width: 1em;
  text-align: left;
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}
.loading-subtext {
  font-size: 13px;
  color: #777;
}

/* Results area */
.results-header {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.results-header .meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.sort-by-score-wrap { margin-left: 1rem; font-size: 0.8125rem; color: var(--text-muted); font-weight: normal; }
.sort-by-score-wrap input { width: auto; margin-right: 0.35rem; }

.score-overall { font-size: 1rem; margin-bottom: 0.75rem; }
.score-categories h4, .score-section h4 { font-size: 0.8125rem; margin: 0.75rem 0 0.35rem; color: var(--text-muted); }
.score-categories ul, .score-section ul { margin: 0; padding-left: 1.25rem; }
.score-section { margin-top: 0.5rem; }

/* Detail panel */
.detail-panel {
  margin-top: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.detail-panel .panel-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1rem 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.detail-panel .panel-tab {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text-muted);
  border: none;
  background: none;
  font-family: inherit;
  border-radius: var(--radius-sm);
}
.detail-panel .panel-tab:hover { color: var(--text); }
.detail-panel .panel-tab.active { color: var(--ui-text); font-weight: 600; background: var(--bg-card); border-bottom: 2px solid var(--asyntis-accent); }
.detail-panel .panel-content {
  padding: 1.25rem;
  max-height: 70vh;
  overflow-y: auto;
}
.detail-panel .panel-content h3 { font-size: 0.9375rem; margin: 0 0 0.5rem; }
.detail-panel .panel-content p { margin: 0 0 0.5rem; }
.detail-panel .panel-content ul { margin: 0.25rem 0; padding-left: 1.25rem; }

/* Narrative: strip "Implication:" visually */
.narrative-bullet { list-style: disc; }
.narrative-bullet::marker { color: var(--text-muted); }

/* Claims table */
.info-banner {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--text);
}
.info-banner-summary { margin: 0 0 0.35rem; }
.info-banner-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.info-banner-toggle:hover { color: var(--accent-hover); }
.info-banner-detail { margin-top: 0.5rem; }
.info-banner-detail ul { margin: 0.35rem 0 0; padding-left: 1.25rem; color: var(--text-muted); }
.info-banner-detail li { margin: 0.2rem 0; }

.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.segmented-btn {
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  border: none;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.segmented-btn:last-child { border-right: none; }
.segmented-btn:hover { background: var(--bg); color: var(--text); }
.segmented-btn.active {
  background: var(--ui-primary);
  color: #ffffff;
  font-weight: 500;
}

.claims-filter { margin-bottom: 0.75rem; }
.claims-filter input { max-width: 280px; }
.claims-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.claims-table th, .claims-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--ui-border); }
.claims-table th { font-weight: 600; color: #9ca3af; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--ui-bg); }
.claims-table tr.expandable { cursor: pointer; }
.claims-table tr.expandable:hover { background: var(--ui-bg-soft); }
.claims-table tr.expanded-detail td { background: var(--ui-bg-soft); font-size: 0.8125rem; color: var(--ui-muted); padding-top: 0; }
.claims-table .claim-key { font-family: var(--font-mono); font-size: 0.8125rem; }

/* ── Scenario: View Sources drill-down ───────────────────────────────────── */
.btn-view-sources {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border, #d1d9e0);
  background: transparent;
  color: var(--text-secondary, #555);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.btn-view-sources:hover {
  border-color: var(--asyntis-accent);
  background: var(--bg-surface, #f4f7fb);
}
.src-panel-row td { background: var(--bg-surface, #f4f7fb) !important; padding: 0 !important; }
.src-panel-inner { padding: 10px 12px; }
.src-panel-loading, .src-panel-empty { font-size: 12px; color: var(--text-muted); margin: 0; }
.src-sub-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.src-sub-table th, .src-sub-table td { padding: 4px 8px; border-bottom: 1px solid var(--border, #e2e8f0); text-align: left; }
.src-sub-table th { font-weight: 600; color: var(--text-muted); font-size: 11px; }
.src-sub-text { max-width: 480px; color: var(--text-secondary); }
.claim-row-validated { background: rgba(var(--teal-green-rgb), 0.04); }
body.theme-dark .btn-view-sources { color: #9aa3b8; border-color: #2d3445; }
body.theme-dark .btn-view-sources:hover { border-color: var(--asyntis-accent); background: #1e2435; }
body.theme-dark .src-panel-row td { background: #1a1f2e !important; }
body.theme-dark .src-sub-table th, body.theme-dark .src-sub-table td { border-color: #2d3445; }
body.theme-dark .src-sub-text { color: #9aa3b8; }

/* Edges */
.edges-list { list-style: none; padding: 0; margin: 0; }
.edges-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.edges-list li:last-child { border-bottom: none; }
.edges-list .edge-from-to { font-family: var(--font-mono); }
.edges-list .edge-type { display: inline-block; margin-left: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
.edges-list .edge-why { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.25rem; }
.edges-empty { color: var(--text-muted); font-size: 0.875rem; }

/* Monitoring */
.monitoring-section { margin-bottom: 1rem; }
.monitoring-section h4 { font-size: 0.8125rem; margin: 0 0 0.35rem; color: var(--text-muted); }
.monitoring-section ul { margin: 0; padding-left: 1rem; }

/* JSON tab */
.json-actions { margin-bottom: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.json-actions .btn { margin-top: 0; }
.json-actions .btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.json-actions .btn-secondary:hover { background: var(--border); }

/* Badge (pill) */
.badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge-status { font-family: var(--font-mono); }

/* Small buttons */
.btn-small {
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  margin-top: 0;
  margin-right: 0.25rem;
}
.claim-actions .btn-small { margin-bottom: 0.15rem; margin-right: 0.25rem; }
.claim-actions .lib-status-select {
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
  min-width: 6rem;
  max-width: 8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  vertical-align: middle;
}
.claim-actions .lib-btn-apply-status { margin-bottom: 0.15rem; }
.claim-actions .btn-validate,
.lib-btn-validate,
.claim-actions .lib-btn-validate { background: #059669; color: #fff; }
.claim-actions .btn-validate:hover,
.lib-btn-validate:hover { background: #047857; }
.claim-actions .btn-reject { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
.claim-actions .btn-reject:hover { background: var(--error-bg); color: var(--error-text); }
.claim-actions {
  white-space: normal;
  min-width: 0;
}

/* Action buttons inside the table should be compact and quiet */
.claim-actions .btn,
.claim-actions .btn-small {
  padding: 3px 7px;
  font-size: 0.72rem;
  font-weight: 400;
  border-radius: 5px;
  background: var(--ui-secondary-bg);
  color: var(--ui-text);
  border: 1px solid #e0e2e6;
  margin-top: 0;
  margin-right: 3px;
  line-height: 1.4;
  min-height: 24px;
}
.claim-actions .btn:hover,
.claim-actions .btn-small:hover {
  background: #eef0f3;
  border-color: #d0d3d9;
}

/* Source block (expanded claim) */
.source-block {
  margin-top: 0.5rem;
  padding: 10px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #ececec;
  font-size: 0.8125rem;
}
.source-block a { color: var(--accent); text-decoration: none; }
.source-block a:hover { text-decoration: underline; }
.source-block .source-line { margin-bottom: 0.25rem; }
.source-block .source-quote-label { margin-top: 0.5rem; margin-bottom: 0.2rem; }
.source-block .traceability-line { margin-top: 0.35rem; font-size: 0.75rem; color: var(--text-muted); }
.quote {
  display: block;
  margin: 0.35rem 0 0;
  padding: 8px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: #f7f7f7;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
/* ── Claim structure panel ───────────────────────────────────────────────── */
/* ── Grouped claims view ───────────────────────────────────────────────── */

/* Summary bar above the table */
.lib-group-summary {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  background: #f0f4ff;
  border: 1px solid #d0daf5;
  border-radius: 6px;
  margin: 6px 0 4px;
  font-size: 12px;
  color: #3a4a7a;
}
.group-summary-pills { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.group-summary-notice {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 5px 10px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 4px;
  color: #7a5c00;
  font-size: 11px;
  line-height: 1.4;
}

/* Group header rows */
.canonical-group-header {
  cursor: pointer;
  user-select: none;
  border-top: 2px solid transparent;
}
.canonical-group-header td {
  padding: 9px 12px;
  vertical-align: middle;
  line-height: 1.3;
}
.canonical-group-header:hover td { filter: brightness(0.96); }

.canonical-group-clustered {
  background: #e8effe;
  border-top-color: #b0c4f0;
}
.canonical-group-unclustered {
  background: #f2f2f4;
  border-top-color: #d0d0d8;
}

.canonical-group-chevron {
  display: inline-block;
  width: 16px;
  font-size: 10px;
  color: #5570a8;
  margin-right: 4px;
}
.canonical-group-icon {
  display: inline-block;
  margin-right: 5px;
  font-size: 13px;
  color: #3366cc;
  vertical-align: -1px;
}
.canonical-group-label {
  font-size: 12px;
  font-weight: 600;
  color: #1a2e6c;
  margin-right: 10px;
}
.canonical-group-unclustered .canonical-group-label { color: #555; }
.canonical-group-count {
  display: inline-block;
  padding: 1px 9px;
  background: #3366cc;
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}
.canonical-group-unclustered .canonical-group-count { background: #888; }

/* Slight left indent for member rows in grouped mode */
.canonical-group-clustered + tr.lib-row td:nth-child(3) { padding-left: 20px; }

/* Dark mode */
body.theme-dark .lib-group-summary {
  background: #16203a;
  border-color: #2a3660;
  color: #8ca0d8;
}
body.theme-dark .group-summary-notice {
  background: #2a220a;
  border-color: #6a4f00;
  color: #e0c060;
}
body.theme-dark .canonical-group-clustered {
  background: #1a2240;
  border-top-color: #2d3a60;
}
body.theme-dark .canonical-group-unclustered {
  background: #1e1e24;
  border-top-color: #38383f;
}
body.theme-dark .canonical-group-label  { color: #8ca0f5; }
body.theme-dark .canonical-group-unclustered .canonical-group-label { color: #aaa; }
body.theme-dark .canonical-group-chevron { color: #7090d0; }
body.theme-dark .canonical-group-icon    { color: #6090e8; }
body.theme-dark .canonical-group-count  { background: #2952a3; }
body.theme-dark .canonical-group-unclustered .canonical-group-count { background: #555; }

/* Canonical claim cluster panel (claim detail) */
.canonical-claim-panel {
  margin-top: 1rem;
  padding: 10px 12px;
  background: #f0f7f4;
  border: 1px solid #b8dece;
  border-radius: 8px;
  font-size: 12px;
}
.canonical-claim-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3a7d60;
  margin-bottom: 4px;
}
.canonical-claim-text {
  margin: 0 0 6px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #1a3d2c;
  font-style: italic;
}
.canonical-count-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #3a7d60;
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}
/* ═══════════════════════════════════════════════════════════
   QUEUE TAB
   ═══════════════════════════════════════════════════════════ */
.queue-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.queue-toolbar-left  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.queue-toolbar-right { display: flex; gap: 8px; align-items: center; }
.queue-summary-text  { font-size: 12px; color: var(--text-secondary, #666); }

/* Progress area */
.queue-run-progress {
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--bg-card, #fff);
}
.queue-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.queue-progress-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #111);
}
.queue-progress-bar-wrap {
  height: 6px;
  background: var(--bg-hover, #f0f0f0);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.queue-progress-bar-fill {
  height: 100%;
  background: var(--teal-green-grad);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.queue-progress-current {
  font-size: 12px;
  color: var(--text-secondary, #555);
  min-height: 16px;
}
.queue-progress-cost {
  font-size: 12px;
  color: var(--text-secondary, #555);
  margin-top: 4px;
}

/* Queue table rows */
.queue-drag-handle {
  cursor: grab;
  color: var(--text-muted, #bbb);
  user-select: none;
  width: 24px;
  text-align: center;
  font-size: 16px;
}
.queue-col-name     { max-width: 320px; }
.queue-doc-name     { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-col-cost     { font-variant-numeric: tabular-nums; }
.queue-col-time     { font-size: 11px; color: var(--text-secondary, #666); }
.queue-max-input    { width: 52px; padding: 2px 4px; font-size: 12px; border: 1px solid var(--border, #ddd); border-radius: 4px; text-align: center; }
.queue-elapsed-time { font-size: 11px; color: var(--text-secondary, #888); margin: 0 8px; font-variant-numeric: tabular-nums; }

.queue-dragging     { opacity: .4; }
.queue-drag-target  { outline: 2px dashed var(--color-primary, #2563eb); outline-offset: -2px; }

/* Queue status badges */
.queue-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
}
.lib-subtab .queue-tab-badge {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.lib-subtab.active .queue-tab-badge {
  background: rgba(255,255,255,0.35);
}

.queue-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary, #666);
  font-size: 14px;
}

/* Dark mode */

body.theme-dark .queue-progress-bar-fill { background: var(--teal-green-grad); }
body.theme-dark .queue-tab-badge { background: #e5e7eb; color: #111; }

/* ── Scanner schedule bar ────────────────────────────────── */

/* Status badge on canonical clusters */
.canonical-status-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 4px;
}
.canonical-status-badge.status-draft     { background: #f0e68c; color: #7a6000; }
.canonical-status-badge.status-reviewed  { background: #b0d4f1; color: #1a4a7a; }
.canonical-status-badge.status-approved  { background: #a8e6c0; color: #155c32; }
.canonical-status-badge.status-rejected  { background: var(--ui-rejected-bg, #fef2f2); color: var(--ui-rejected-text, #b91c1c); }
/* Confidence label badge */
.canonical-confidence-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 4px;
}
.canonical-confidence-badge.conf-low    { background: #f5c6c6; color: #7a1a1a; }
.canonical-confidence-badge.conf-medium { background: #fde9b2; color: #7a4d00; }
.canonical-confidence-badge.conf-high   { background: #b7f0c9; color: #155c32; }
/* Short title line above canonical statement */
.canonical-claim-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #555);
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Filter row for canonical dropdown */
.filter-row-canonical {
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.filter-ctrl-canonical {
  min-width: 280px;
}
.filter-ctrl-canonical select {
  min-width: 260px;
}
.canonical-filter-hint {
  font-size: 11px;
  color: var(--text-muted, #888);
}
.filter-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 0;
  flex-wrap: wrap;
}
.recluster-status-msg {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  max-width: 480px;
}

/* Consolidate toolbar status (running / done / error + dismiss) */

.cl-expert-tools-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.recluster-running { background: #e8f0fe; color: #3366cc; }
.recluster-done    { background: #e6f4ea; color: #1e7e34; }
.recluster-error   { background: #fce8e6; color: #c5221f; }

/* Spinner for long-running operations */
@keyframes spin { to { transform: rotate(360deg); } }
.btn-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 5px;
}
.btn-active {
  background: var(--accent, #3366cc) !important;
  color: #fff !important;
  border-color: var(--accent, #3366cc) !important;
}

.claim-structure-panel {
  margin-top: 1rem;
  padding: 10px 12px;
  background: #f5f8ff;
  border: 1px solid #d6e0f5;
  border-radius: 8px;
  font-size: 12px;
}
.claim-time-section {
  margin-top: 0.75rem;
  padding: 10px 12px;
  background: #f5f8ff;
  border: 1px solid #d6e0f5;
  border-radius: 8px;
  font-size: 12px;
}
.claim-time-header {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.claim-structure-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.claim-structure-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.cs-row { display: flex; gap: 8px; align-items: baseline; }
.cs-label {
  min-width: 52px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  flex-shrink: 0;
}
.cs-value { color: var(--text-primary); line-height: 1.4; }
.claim-structure-badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* Consolidate: leading raw claim narrative (mirrors Claims detail) */
.cr-leading-text-block { margin-bottom: 12px; }
.cr-leading-text-block:last-of-type { margin-bottom: 0; }
.cr-leading-text-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.cr-leading-text-value {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
}
.cr-leading-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.cl-leading-coverage { margin-top: 0.75rem; }
.cr-leading-hint { margin: 0 0 8px; }
.cs-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.03em;
}
.cs-pattern  { background: #e8eeff; color: #3a52b8; }
.cs-layer    { background: #e8f5e9; color: #2e7d32; }
.cs-domain-value  { font-weight: 600; color: var(--ui-text); }
.cs-subdomain-value { font-weight: 400; color: var(--text-muted); font-style: italic; }
.claim-org-tag {
  display: inline-block;
  background: #eef4ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 7px;
  margin-right: 4px;
}
body.theme-dark .claim-org-tag {
  background: #1e3a5f;
  color: #93c5fd;
  border-color: #2d5a9e;
}
.cs-horizon  { background: #fff3e0; color: #e65100; }
.cs-direction { background: #fce4ec; color: #880e4f; }

.quote-muted {
  opacity: 0.75;
  font-style: italic;
}
.quote-normalized {
  background: #f0f9f4;
  border-color: #b2dfc5;
  color: #1a6640;
}
.source-original-lang { opacity: 0.85; }
.source-normalized label { color: #1a6640 !important; }
.status-pill {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  background: #f3f4f6;
  color: #374151;
  border: none;
  letter-spacing: 0.01em;
}
/* Status-specific colours */
.status-pill--validated {
  background: #e6f0ff;
  color: #2c5cc5;
}
.status-pill--draft {
  background: #f3f4f6;
  color: #374151;
}
.status-pill--rejected {
  background: #fde8e8;
  color: #b42318;
}
/* Generic .status-badge used on Consolidate page (same colours as status-pill) */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  background: #f3f4f6;
  color: #374151;
  letter-spacing: 0.01em;
}
.status-badge.status-draft     { background: #f3f4f6; color: #374151; }
.status-badge.status-reviewed  { background: #b0d4f1; color: #1a4a7a; }
.status-badge.status-validated { background: #e6f0ff; color: #2c5cc5; }
.status-badge.status-rejected  { background: #fde8e8; color: #b42318; }
.source-block .btn-secondary {
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  margin-top: 0.35rem;
  margin-right: 0.35rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.source-block .btn-secondary:hover { background: var(--border); }
.source-block .btn-validate { background: #059669; color: #fff; border: none; }
.source-block .btn-validate:hover { background: #047857; }
.source-block .btn-reject { background: var(--bg); color: var(--text-muted); }
.source-block .btn-reject:hover { background: var(--error-bg); color: var(--error-text); }

.claims-validated-wrap { display: inline-flex; align-items: center; margin-left: 1rem; font-size: 0.8125rem; color: var(--text-muted); }
.claims-validated-wrap input { width: auto; margin-right: 0.35rem; }

pre.json-block {
  margin: 0;
  padding: 1rem;
  font-size: 0.8rem;
  overflow-x: auto;
  background: var(--bg);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Loading & error */
.outcome-loading {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.outcome-error {
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  font-size: 0.875rem;
}
.no-narrative { color: var(--text-muted); font-size: 0.875rem; font-style: italic; }
.results-errors { font-size: 0.8125rem; color: var(--error-text); margin-top: 0.5rem; }

/* Toast */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  padding: 0.5rem 1rem;
  background: var(--text);
  color: var(--ui-bg);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
body.theme-dark .toast {
  background: #2a3145;
  color: #eef1f8;
  border: 1px solid #3d4a63;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* Synthetic / no-source badges */
.badge-synthetic {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: #ede9fe;
  color: #6d28d9;
  vertical-align: middle;
}
.badge-nosource {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: #f3f4f6;
  color: #9ca3af;
  vertical-align: middle;
}
.badge-nosource-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  vertical-align: middle;
  margin-left: 0.25em;
}

/* Callout banners in expanded rows */
.synthetic-callout {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  background: #f5f0ff;
  border-left: 4px solid #7c3aed;
  font-size: 0.85rem;
  color: #4c1d95;
}
.nosource-callout {
  margin-bottom: 0.75rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  background: #f9fafb;
  border-left: 4px solid #9ca3af;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Claim importance highlighting ────────────────────────── */
.lib-row.importance-high {
  border-left: 3px solid var(--asyntis-accent);
}
.lib-row.importance-medium {
  border-left: 3px solid #e0e3e7;
}
.lib-row.importance-low {
  border-left: 3px solid transparent;
}

.importance-chip {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  margin-left: 5px;
  vertical-align: middle;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.importance-chip.high {
  background: #f5ffaa;
  color: #626e00;
}
.importance-chip.medium {
  background: #f3f4f6;
  color: #6b7280;
}
.importance-chip.low {
  display: none; /* low = no chip, just silent */
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE  —  body.theme-dark
   ═══════════════════════════════════════════════════════════ */

/* Softer dark palette — not pure black */
body.theme-dark {
  color-scheme: dark;

  --bg:              #0e1117;
  --bg-card:         #161c2c;
  --ui-bg:           #161c2c;
  --ui-bg-soft:      #1d2436;
  --input-bg:        #1e2638;
  --border-light:    #252e42;
  --accent-light:    #1c2437;
  --text:            #eef1f8;
  --text-muted:      #8a95ab;
  --ui-text:         #eef1f8;
  --ui-muted:        #8a95ab;
  --border:          #253044;
  --ui-border:       #253044;
  --accent:          var(--teal-green);
  --accent-hover:    var(--teal-green-to);
  --asyntis-accent:  var(--teal-green);
  --ui-primary:      var(--teal-green-grad);
  --ui-primary-hover:var(--teal-green-grad-hover);
  --ui-secondary-bg: #1e2638;
  --ui-secondary-hover:#253044;
  --ui-draft-bg:     #1e2638;
  --ui-draft-text:   #8a95ab;
  --ui-validated-bg: #0e1e38;
  --ui-validated-text:#60a5fa;
  --ui-rejected-bg:  #2a0f0f;
  --ui-rejected-text:#f87171;
  --error-bg:        #2a0f0f;
  --error-border:    #5c1a1a;
  --error-text:      #f87171;
  --surface:         #1c2029;
  --surface-muted:   #161b27;
  --surface-alt:     #232a37;
}

/* Dark mode scrollbars */
body.theme-dark ::-webkit-scrollbar       { width: 10px; height: 10px; }
body.theme-dark ::-webkit-scrollbar-track { background: #0a0d14; }
body.theme-dark ::-webkit-scrollbar-thumb { background: #253044; border-radius: 6px; }
body.theme-dark ::-webkit-scrollbar-thumb:hover { background: #2e3d57; }

/* ── Dark mode: hardcoded-white component overrides ───────────────────────── */

/* Actor view section cards */
body.theme-dark .av-section-card {
  background: var(--bg-card);
  border-color: var(--ui-border);
}
body.theme-dark .av-section-card h2 {
  border-bottom-color: var(--ui-border);
  color: var(--text-muted);
}
body.theme-dark .av-section-card--next-steps {
  background: rgba(99,102,241,0.09);
  border-left-color: #818cf8;
}
body.theme-dark .av-next-step-cta { color: #818cf8; }
body.theme-dark .av-next-step-cta:hover { background: rgba(99,102,241,0.12); }
body.theme-dark .av-next-step-cta--investigate { color: var(--teal-green); }
body.theme-dark .av-next-step-cta--investigate:hover { background: rgba(var(--teal-green-rgb),0.08); }

/* Actor view header card */
body.theme-dark #av-header-card { background: var(--bg-card); border-color: var(--ui-border); }

/* Five Forces boxes */

/* Five Forces cards (scrollable lower section) */

/* Tabs */

body.theme-dark .bmc-tab-btn { color: #8a95ab; }
body.theme-dark .bmc-tab-btn.sl-tab-active { background: var(--teal-green-grad); color: #0f172a; border-color: var(--teal-green-to); }

/* Modals */
body.theme-dark .sl-modal { background: var(--bg-card); border-color: var(--ui-border); }
body.theme-dark .asyntis-modal-card { background: var(--bg-card); border-color: var(--ui-border); }

/* Ecosystem toggle & chips */
body.theme-dark .pap-eco-view-toggle { background: var(--ui-secondary-bg); border-color: var(--ui-border); }
body.theme-dark .pap-eco-chip--in-scope { background: rgba(var(--teal-green-rgb),0.07); }
body.theme-dark .pap-eco-chip { background: var(--ui-secondary-bg); border-color: var(--ui-border); color: #c8d0e0; }
body.theme-dark .pap-eco-chip-name { color: #c8d0e0; }
body.theme-dark .pap-eco-chip-type { color: #6b788e; }

/* Form inputs, textareas, selects inside actor views */
body.theme-dark .av-field-textarea,
body.theme-dark .bmc-edit-textarea,
body.theme-dark .proj-input,
body.theme-dark .proj-textarea,
body.theme-dark .proj-select {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--ui-border);
}
body.theme-dark .proj-input::placeholder,
body.theme-dark .proj-textarea::placeholder { color: #4e5a70; }

/* Version toolbar (av) */
body.theme-dark #av-version-toolbar { border-color: var(--ui-border); }

/* Signal / trend labels */
body.theme-dark .av-signal-cat-label { color: #8a95ab; }
body.theme-dark .av-signal-card { background: var(--ui-secondary-bg); border-color: var(--ui-border); }
body.theme-dark .av-signal-card-text { color: #c8d0e0; }
body.theme-dark .av-signal-source { color: #6b788e; }

/* Pressure badges */
body.theme-dark .av-pressure-badge { background: rgba(239,68,68,0.12); color: #f87171; }
body.theme-dark .av-pressure-rationale { color: #8a95ab; }

/* Project profile cards */
body.theme-dark .pap-section-card { background: var(--bg-card); border-color: var(--ui-border); }
body.theme-dark .pap-field-label { color: #6b788e; }
body.theme-dark .pap-field-value { color: #c8d0e0; }

/* ── Fix 1: Five Forces center button (--ui-primary is near-white in dark) ── */

/* ── Fix 2: Inside-Out Document Kind hero (was .dark-mode, should be .theme-dark) ── */
body.theme-dark .io-dp-kind-hero {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
body.theme-dark .io-dp-kind-hero.io-kind-strategy    { background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.25); }
body.theme-dark .io-dp-kind-hero.io-kind-capabilities{ background: rgba(168,85,247,.12);  border-color: rgba(168,85,247,.25); }
body.theme-dark .io-dp-kind-hero.io-kind-interview   { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.25); }
body.theme-dark .io-dp-kind-hero.io-kind-external    { background: rgba(236,72,153,.12);  border-color: rgba(236,72,153,.25); }
body.theme-dark .io-dp-kind-hero.io-kind-other       { background: var(--ui-secondary-bg); border-color: var(--ui-border); }
body.theme-dark .io-dp-kind-label { color: #8a95ab; }
body.theme-dark .io-dp-kind-value { color: #eef1f8; }

/* ── Fix 2b: Inside-Out project badge (light lime falls back) ── */
body.theme-dark .io-project-badge {
  background: rgba(163,230,53,0.12);
  color: #a3e635;
  border-color: rgba(163,230,53,0.3);
}

/* ── Fix 3: Error/warning boxes — ensure dark backgrounds and legible text ── */
/* radar-overlay-card text */
body.theme-dark .radar-overlay-card {
  background: var(--bg-card);
  border-color: var(--ui-border);
  color: var(--text);
}
/* outcome-error: error-bg token is already set (#2a0f0f), ensure text is visible */
body.theme-dark .outcome-error { color: #f87171; }
/* generic inline warning/info notices */
body.theme-dark .group-summary-notice { background: #1c2235; border-color: #253044; color: #8a95ab; }
/* scanner form error */

/* queue error button */
body.theme-dark .queue-error-btn { background: #2a0f0f; color: #f87171; border-color: #5c1a1a; }
/* scan source archive warning (already has dark, but reinforce) */

/* authority hero tints in dark */

/* ── Scanner detail panel & intel cards ──────────────────────────────────── */

body.theme-dark .sc-change-summary   { background: #2d1c00; border-color: #92400e; color: #fcd34d; }
body.theme-dark .sc-change-summary-neutral { color: #6b788e; }

body.theme-dark .sc-item-row td        { background: var(--bg-card); }
body.theme-dark .sc-item-row:hover td  { background: var(--ui-secondary-bg); }
body.theme-dark .sc-item-row.sc-item-row-open td { background: var(--ui-secondary-bg); }
body.theme-dark .sc-item-detail td     { background: var(--bg-card) !important; }

body.theme-dark .sc-item-title { color: #c8d0e0; }
body.theme-dark .sc-item-url   { color: #6b788e; }

/* — surfaces — */
body.theme-dark .card,
body.theme-dark .lib-filters.card,
body.theme-dark .lib-bulk.card {
  background: var(--bg-card);
  border-color: var(--ui-border);
}

/* — table — */
body.theme-dark .lib-table thead th {
  background: #1c2029;
  color: #7a8499;
  box-shadow: 0 1px 0 #2d3445;
}
body.theme-dark .lib-table tbody td {
  border-bottom-color: #232a37;
}
body.theme-dark .lib-table tbody tr:hover {
  background: #232a37 !important;
}
body.theme-dark .lib-table tbody tr:hover td {
  border-bottom-color: #2b3444;
}

/* — selected rows — */
body.theme-dark .lib-row.row-selected {
  background: #1c2535;
}
body.theme-dark .lib-row.selected-claim {
  background: #1f2e45 !important;
  box-shadow: inset 3px 0 0 var(--teal-green) !important;
}

body.theme-dark .lib-table tbody tr.selected-claim:hover {
  background: #1a2840 !important;
}

/* — importance accent — */
body.theme-dark .lib-row.importance-high {
  border-left-color: var(--teal-green);
}

/* — status pills — */
body.theme-dark .status-pill--validated { background: #102040; color: #60a5fa; }
body.theme-dark .status-pill--draft     { background: #232a37; color: #9ca6b6; }
body.theme-dark .status-pill--rejected  { background: #301212; color: #f87171; }
body.theme-dark .status-pill            { background: #232a37; color: #9ca6b6; }
body.theme-dark .status-badge           { background: #232a37; color: #9ca6b6; }
body.theme-dark .status-badge.status-draft     { background: #232a37; color: #9ca6b6; }
body.theme-dark .status-badge.status-reviewed  { background: #0d2a42; color: #6cb8e8; }
body.theme-dark .status-badge.status-validated { background: #102040; color: #60a5fa; }
body.theme-dark .status-badge.status-rejected  { background: #301212; color: #f87171; }

/* — splitter — */
body.theme-dark .claims-splitter::after { background: #2d3445; }
body.theme-dark .claims-splitter:hover::after,
body.theme-dark .claims-splitter.dragging::after { background: var(--teal-green-grad); }

/* — detail pane — */
body.theme-dark .claim-detail-pane {
  background: #1c2029;
  border-color: #2d3445;
}
body.theme-dark .claim-detail-pane.has-claim {
  background: #1c2029;
  border-color: #2d3445;
}
body.theme-dark .claim-detail-empty { color: #4b5672; }

/* ── Prompt Library detail pane ─────────────────────────────────────────── */
.pl-detail-body {
  padding: 20px 24px;
  overflow-y: auto;
  height: 100%;
}
.pl-detail-header { margin-bottom: 16px; }
.pl-detail-name   { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.pl-detail-meta   { font-size: 12px; color: var(--text-muted); }
.pl-detail-section { margin-bottom: 14px; }
.pl-detail-purpose {
  font-size: 13px;
  color: var(--text-secondary, #555);
  line-height: 1.5;
  margin-top: 4px;
}
.pl-detail-text {
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-surface, #f4f7fb);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 12px 14px;
  line-height: 1.55;
  margin: 4px 0 0;
  max-height: 65vh;
  overflow-y: auto;
  color: var(--text);
}

body.theme-dark .pl-detail-name    { color: #e8ecf4; }
body.theme-dark .pl-detail-purpose { color: #9aa3b8; }
body.theme-dark .pl-detail-text {
  background: #12161e;
  border-color: #2d3445;
  color: #c8d0e0;
}

/* — source block & quote — */
body.theme-dark .source-block {
  background: #202633;
  border-color: #2d3445;
}
body.theme-dark .quote {
  background: #151821;
  border-color: #2d3445;
  color: #9ca6b6;
}
body.theme-dark .quote-normalized {
  background: #0e2218;
  border-color: #1d5c36;
  color: #4ec87a;
}
body.theme-dark .source-normalized label { color: #4ec87a !important; }
body.theme-dark .canonical-claim-panel {
  background: #0d2218;
  border-color: #1f4d36;
}
body.theme-dark .canonical-claim-label { color: #4ec87a; }
body.theme-dark .canonical-claim-text  { color: #8fbfa8; }
body.theme-dark .canonical-count-badge { background: #1f4d36; color: #4ec87a; }
body.theme-dark .canonical-status-badge.status-draft    { background: #3a3210; color: #f0d060; }
body.theme-dark .canonical-status-badge.status-reviewed { background: #0d2a42; color: #6cb8e8; }
body.theme-dark .canonical-status-badge.status-approved { background: #0d3020; color: #4ec87a; }
body.theme-dark .canonical-status-badge.status-rejected { background: #2d0d0d; color: #f08080; }
body.theme-dark .canonical-confidence-badge.conf-low    { background: #3d0d0d; color: #f08080; }
body.theme-dark .canonical-confidence-badge.conf-medium { background: #3a2b0d; color: #f0b048; }
body.theme-dark .canonical-confidence-badge.conf-high   { background: #0d2e18; color: #4ec87a; }
body.theme-dark .canonical-claim-title { color: var(--text-muted, #999); }

body.theme-dark .claim-structure-panel {
  background: #1a2035;
  border-color: #2d3a55;
}
body.theme-dark .claim-time-section {
  background: #1a2035;
  border-color: #2d3a55;
}
body.theme-dark .cs-pattern  { background: #1e2a52; color: #8ca0f5; }
body.theme-dark .cs-layer    { background: #0e2218; color: #4ec87a; }
body.theme-dark .cs-horizon  { background: #2a1e08; color: #f5a623; }
body.theme-dark .cs-direction { background: #2a1020; color: #f06292; }

/* — edit panel textareas / inputs — */
body.theme-dark textarea,
body.theme-dark input[type="text"],
body.theme-dark input[type="number"],
body.theme-dark select {
  background: #1f2531;
  color: var(--ui-text);
  border-color: #333b4c;
}
body.theme-dark textarea:focus,
body.theme-dark input:focus,
body.theme-dark select:focus {
  outline-color: var(--focus-ring);
  border-color: #3a4a60;
}

/* — buttons — */
body.theme-dark .btn {
  background: #e6e8ee;
  color: #111;
}
body.theme-dark .btn:hover { background: #fff; }
body.theme-dark .btn-secondary {
  background: #232a37;
  color: #e6e8ee;
  border-color: #2d3445;
}
body.theme-dark .btn-secondary:hover { background: #2b3444; }
body.theme-dark .btn-small {
  background: #232a37;
  color: #9ca6b6;
  border-color: #2d3445;
}
body.theme-dark .btn-small:hover { background: #2b3444; color: #e6e8ee; }

/* — action buttons in table rows — */
body.theme-dark .claim-actions .btn,
body.theme-dark .claim-actions .btn-small {
  background: #232a37;
  color: #9ca6b6;
  border-color: #2d3445;
}
body.theme-dark .claim-actions .btn:hover,
body.theme-dark .claim-actions .btn-small:hover {
  background: #2b3444;
  color: #e6e8ee;
}

/* — tabs — */
body.theme-dark .top-tabs,
body.theme-dark .lib-subtabs { background: #1c2029; border-bottom-color: #2d3445; }

body.theme-dark .top-tab.active,
body.theme-dark .lib-subtab.active { background: #e7e9ee; color: #111111; }
body.theme-dark .lib-subtab  { color: #7a8499; }
body.theme-dark .lib-subtab.active { background: transparent; border-bottom-color: var(--teal-green); color: #e6e8ee; }
body.theme-dark .lib-subtab:hover:not(.active) { background: rgba(255,255,255,.04); }

/* — scenario cards — */

/* — badges — */
body.theme-dark .badge-synthetic { background: #2d1f4a; color: #b39dff; }
body.theme-dark .badge-nosource  { background: #232a37; color: #9ca6b6; }

/* — claim usage items — */
body.theme-dark .claim-usage-item { background: #232a37; border-color: #2d3445; }
body.theme-dark .claim-usage-item:hover { background: #2b3444; }

/* — filter controls — */
body.theme-dark .filter-clear-btn {
  background: #232a37;
  color: #9ca6b6;
  border-color: #2d3445;
}
body.theme-dark .filter-clear-btn:hover { background: #2b3444; color: #e6e8ee; }
body.theme-dark .filter-refresh-btn {
  background: #232a37;
  border-color: #2d3445;
  color: #9ca6b6;
}
body.theme-dark .filter-refresh-btn:hover { background: #2b3444; color: #e6e8ee; }

/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM PAGE
   ═══════════════════════════════════════════════════════════ */

/* Layout */
.ds-layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  min-height: 600px;
}

/* Sidebar */
.ds-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 28px 0 28px 0;
  border-right: 1px solid var(--ui-border);
  height: calc(100vh - var(--topbar-height) - 10px);
  overflow-y: auto;
}
.ds-sidebar-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ui-muted);
  padding: 0 20px;
  margin: 0 0 10px;
}
.ds-nav-link {
  display: block;
  padding: 6px 20px;
  font-size: 13px;
  color: var(--ui-muted);
  text-decoration: none;
  border-radius: 0;
  transition: color .12s, background .12s;
}
.ds-nav-link:hover {
  color: var(--ui-text);
  background: var(--ui-secondary-bg);
}

/* Content area */
.ds-content {
  padding: 36px 48px 64px 48px;
  max-width: 860px;
}

/* Intro */
.ds-page-title {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--ui-text);
  font-family: var(--font-display);
}
.ds-page-subtitle {
  font-size: 14px;
  color: var(--ui-muted);
  line-height: 1.6;
  margin: 0 0 48px;
  max-width: 560px;
}

/* Sections */
.ds-section {
  margin-bottom: 52px;
  padding-top: 4px;
}
.ds-section-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ui-text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-border);
}
.ds-section-desc {
  font-size: 13px;
  color: var(--ui-muted);
  margin: 10px 0 20px;
  line-height: 1.6;
}
.ds-subsection-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ui-muted);
  margin: 20px 0 10px;
}

/* Rulebook: ordered/unordered rule lists */
.ds-rule-list {
  margin: 0 0 16px 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ui-text);
}
.ds-rule-list li { margin-bottom: 4px; }
.ds-rule-list code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--ui-secondary-bg);
  padding: 1px 5px;
  border-radius: 3px;
}
.ds-rule-list--dont li::marker { color: var(--error-text, #b91c1c); }

/* Rulebook: compact rule table */
.ds-rule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 16px;
}
.ds-rule-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ui-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--ui-border);
}
.ds-rule-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light, #f0f4f8);
  vertical-align: top;
  line-height: 1.5;
}
.ds-rule-table td:first-child { font-weight: 600; white-space: nowrap; }
.ds-rule-table code, .ds-rule-table kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--ui-secondary-bg);
  padding: 1px 4px;
  border-radius: 3px;
}
.ds-rule-table kbd {
  border: 1px solid var(--ui-border);
  font-style: normal;
}
body.theme-dark .ds-rule-table th { border-bottom-color: #2d3445; }
body.theme-dark .ds-rule-table td { border-bottom-color: #1e2334; }
body.theme-dark .ds-rule-list code { background: #1e2334; }
body.theme-dark .ds-rule-table code, body.theme-dark .ds-rule-table kbd { background: #1e2334; border-color: #2d3445; }

/* Color grid */
.ds-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
}
.ds-color-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 10px 14px 10px 10px;
  min-width: 160px;
}
.ds-color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex-shrink: 0;
}
.ds-color-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-color-hex {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-text);
}
.ds-color-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-text);
}
.ds-color-var {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--ui-muted);
}

/* Teal Green brand gradient — DS showcase */
.ds-teal-green-hero {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 20px;
}
.ds-teal-green-grad-swatch {
  flex: 1 1 280px;
  min-height: 88px;
  border-radius: 10px;
  background: var(--teal-green-grad);
  border: 1px solid var(--ui-border);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.ds-teal-green-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  margin-top: 16px;
}
.ds-teal-green-example {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
}
.ds-teal-green-example-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ui-muted);
}
.ds-teal-green-progress {
  width: 160px;
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.ds-teal-green-progress-fill {
  height: 100%;
  width: 68%;
  background: var(--teal-green-grad);
  border-radius: 999px;
}
.ds-teal-green-donut {
  width: 80px;
  height: 80px;
}
.ds-teal-green-grad-bar {
  display: inline-block;
  width: 72px;
  height: 14px;
  border-radius: 3px;
  background: var(--teal-green-grad);
  vertical-align: middle;
}
.ds-accent-hero {
  margin: 12px 0 16px;
  padding: 20px 24px;
  border-radius: 10px;
  background: var(--accent-orange-purple-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.ds-accent-grad-bar {
  display: inline-block;
  width: 72px;
  height: 14px;
  border-radius: 3px;
  background: var(--accent-orange-purple-grad);
  vertical-align: middle;
}
.ds-accent-cta-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  background: var(--accent-orange-purple-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: default;
}
.ds-accent-read-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-orange-purple-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

/* Type scale */
.ds-type-scale {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  overflow: hidden;
}
.ds-type-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ui-border);
}
.ds-type-row:last-child { border-bottom: none; }
.ds-type-label {
  font-size: 11px;
  color: var(--ui-muted);
  white-space: nowrap;
  min-width: 160px;
  flex-shrink: 0;
}
.ds-type-example {
  color: var(--ui-text);
  font-family: var(--font-sans);
}

/* Spacing */
.ds-spacing-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ds-spacing-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--ui-muted);
}
.ds-spacing-bar {
  height: 20px;
  background: var(--teal-green-grad);
  border-radius: 3px;
  flex-shrink: 0;
  opacity: .85;
}

/* Component rows */
.ds-component-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
}
.ds-component-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.ds-component-label {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--ui-muted);
}

/* Card grid */
.ds-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Table legend */
.ds-table-legend {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ds-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ui-muted);
}
.ds-legend-dot {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--ui-border);
  flex-shrink: 0;
}

/* Icons */
.ds-icon-row {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.ds-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ui-muted);
}

/* Logo samples */
.ds-logo-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ds-logo-sample {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 28px;
  border-radius: 8px;
  border: 1px solid var(--ui-border);
  font-size: 12px;
  color: var(--ui-muted);
}
.ds-logo-light { background: #ffffff; }
.ds-logo-dark-bg { background: #151821; }
.ds-logo-dark-bg span { color: #9ca6b6; }

/* Dark mode overrides */
body.theme-dark .ds-sidebar { border-right-color: #2d3445; }
body.theme-dark .ds-color-card { background: #1c2029; border-color: #2d3445; }
body.theme-dark .ds-type-scale { border-color: #2d3445; }
body.theme-dark .ds-type-row { border-bottom-color: #2d3445; }
body.theme-dark .ds-spacing-bar { opacity: .7; }
body.theme-dark .ds-logo-light { background: #f9fafb; }

/* Logo font note */
.ds-font-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  max-width: 480px;
}
.ds-font-note-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ui-muted);
}
.ds-font-note-value {
  font-size: 13px;
  color: var(--ui-text);
}
.ds-font-link {
  font-size: 12px;
  color: var(--ui-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--ui-border);
  transition: color .12s, border-color .12s;
}
.ds-font-link:hover {
  color: var(--ui-text);
  border-bottom-color: var(--ui-text);
}
.ds-font-note-desc {
  font-size: 12px;
  color: var(--ui-muted);
  line-height: 1.55;
  margin-top: 2px;
}
body.theme-dark .ds-font-note { background: #1c2029; border-color: #2d3445; }

/* Brand Philosophy */
.ds-brand-philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 600px) { .ds-brand-philosophy-grid { grid-template-columns: 1fr; } }
.ds-bp-col {}
.ds-bp-list {
  margin: 10px 0 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
}
.ds-bp-list--yes li::marker { color: var(--teal-green); font-weight: 700; }
.ds-bp-list--no li::marker { color: #D74444; font-weight: 700; }
.ds-bp-heading {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Favicons */
.ds-favicon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
.ds-favicon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ds-favicon-preview {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: #f9fafb;
}
body.theme-dark .ds-favicon-preview { background: #1a1d27; border-color: #2d3445; }
.ds-favicon-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.ds-favicon-use {
  font-size: 11px;
  color: var(--text-muted);
}

/* ── DS: 6-band score scale showcase ── */
.ds-score-proposal-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--score-good-bg);
  color: var(--score-good);
  border-radius: 4px;
  padding: 2px 8px;
  vertical-align: middle;
}
body.theme-dark .ds-score-proposal-badge { background: var(--score-good-bg); color: var(--score-good); }
.ds-score-proposal-note {
  padding: 12px 16px;
  background: var(--score-moderate-bg);
  border-left: 3px solid var(--score-moderate);
  border-radius: 0 6px 6px 0;
  margin-top: 12px !important;
}
body.theme-dark .ds-score-proposal-note { background: var(--score-moderate-bg); }

.ds-score-migration-table td:nth-child(2) { white-space: nowrap; }

.ds-score-label-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.ds-score-label-pill--strong     { background: var(--score-strong-bg);     color: var(--score-strong); }
.ds-score-label-pill--good       { background: var(--score-good-bg);       color: var(--score-good); }
.ds-score-label-pill--moderate   { background: var(--score-moderate-bg);   color: var(--score-moderate); }
.ds-score-label-pill--below      { background: var(--score-below-avg-bg);  color: var(--score-below-avg); }
.ds-score-label-pill--weak       { background: var(--score-weak-bg);       color: var(--score-weak); }
.ds-score-label-pill--very-weak  { background: var(--score-very-weak-bg);  color: var(--score-very-weak); }

.ds-score-scale-overview {
  display: flex;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.ds-score-scale-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ds-score-scale-col + .ds-score-scale-col {
  border-left: 1px solid rgba(255, 255, 255, .35);
}
body.theme-dark .ds-score-scale-col + .ds-score-scale-col {
  border-left-color: rgba(255, 255, 255, .12);
}
.ds-score-scale-strip {
  display: flex;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--border);
}
.ds-score-scale-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 32px;
  flex: 1;
}
.ds-score-scale-label {
  display: block;
  padding: 7px 4px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  hyphens: auto;
}
.ds-score-scale-seg span {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.ds-score-scale-seg--strong     { background: var(--score-strong-grad); }
.ds-score-scale-seg--good       { background: var(--score-good-grad); }
.ds-score-scale-seg--moderate   { background: var(--score-moderate-grad); }
.ds-score-scale-seg--below      { background: var(--score-below-avg-grad); }
.ds-score-scale-seg--weak       { background: var(--score-weak-grad); }
.ds-score-scale-seg--very-weak  { background: var(--score-very-weak-grad); }

.ds-score-token-table code { font-size: 11px; }
.ds-score-token-table td { vertical-align: middle; }
.ds-score-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.ds-score-grad-bar {
  display: inline-block;
  width: 64px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
}

.ds-score-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.ds-score-preview-card {
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ds-score-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ds-score-preview-band {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.ds-score-preview-bar {
  height: 8px;
  border-radius: 4px;
  max-width: 100%;
  margin-bottom: 8px;
}
.ds-score-preview-solid {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.ds-score-badge { font-size: 11px !important; padding: 2px 8px !important; border-radius: 4px !important; }
.ds-score-badge--strong     { background: var(--score-strong-bg) !important;     color: var(--score-strong) !important; }
.ds-score-badge--good       { background: var(--score-good-bg) !important;       color: var(--score-good) !important; }
.ds-score-badge--moderate   { background: var(--score-moderate-bg) !important;   color: var(--score-moderate) !important; }
.ds-score-badge--below      { background: var(--score-below-avg-bg) !important;  color: var(--score-below-avg) !important; }
.ds-score-badge--weak       { background: var(--score-weak-bg) !important;       color: var(--score-weak) !important; }
.ds-score-badge--very-weak  { background: var(--score-very-weak-bg) !important;  color: var(--score-very-weak) !important; }

.ds-score-dist-demo {
  margin-top: 12px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-score-dist-row {
  display: grid;
  grid-template-columns: 160px 1fr 28px;
  align-items: center;
  gap: 12px;
}
.ds-score-dist-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.ds-score-dist-track {
  height: 8px;
  background: var(--ui-secondary-bg);
  border-radius: 4px;
  overflow: hidden;
}
.ds-score-dist-fill {
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
}
.ds-score-dist-count {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--text);
}

/* ── DS section group headers ── */
.ds-section-group-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal-green);
  border-bottom: 2px solid var(--teal-green);
  padding-bottom: 8px;
  margin: 40px 0 0;
}

/* ── DS Tone of Voice + Design Principles grid ── */
.ds-tov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.ds-tov-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal-green);
  border-radius: 6px;
  padding: 14px 16px;
}
.ds-tov-card strong { font-size: 13px; font-weight: 600; color: var(--text); display: block; margin-bottom: 4px; }
.ds-tov-card p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }

/* ── DS Brand Architecture ── */
.ds-brand-arch-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.ds-brand-arch-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 180px;
}
.ds-brand-arch-main { border-color: var(--teal-green); }
.ds-ba-desc { font-size: 12px; color: var(--text-muted); margin: 0; }
.ds-brand-arch-divider { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* ==========================================================================
   Candidates tab — watchlist-driven source discovery
   ========================================================================== */

/* Toolbar */
.cand-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cand-filter-status {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--bg-page);
  color: var(--ui-text);
  font-size: 13px;
  cursor: pointer;
}
.cand-spinner {
  font-size: 13px;
  color: var(--ui-muted);
  font-style: italic;
}

/* Watchlists management panel */
.cand-watchlists-panel {
  margin-bottom: 16px;
  padding: 20px 24px;
}
.cand-watchlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ui-border);
}
.cand-wl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cand-wl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}
.cand-wl-field-wide {
  flex: 2;
  min-width: 240px;
}
.cand-wl-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cand-form-status {
  font-size: 12px;
  color: var(--ui-muted);
}
.cand-wl-list-wrap {
  margin-top: 8px;
}
.cand-wl-table {
  width: 100%;
}
.cand-mode-badge {
  font-size: 11px;
  background: var(--bg-page);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ui-muted);
}

/* Candidates table card */
.cand-table-card {
  padding: 0;
  overflow: hidden;
}
.cand-table {
  width: 100%;
}
.cand-title-cell {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cand-actions-cell {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Score badges */
.cand-score-high { color: #16a34a; font-weight: 600; }
.cand-score-mid  { color: #ca8a04; font-weight: 600; }
.cand-score-low  { color: #dc2626; font-weight: 600; }
.cand-score-na   { color: var(--ui-muted); }

/* Recommended action */
.cand-rec {
  font-size: 12px;
  color: var(--ui-muted);
  cursor: help;
}

/* Extra-small buttons */
.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 5px;
  height: auto;
  min-height: unset;
}

/* Dark mode */
body.theme-dark .cand-filter-status {
  background: #1c2029;
  border-color: #2d3445;
  color: #e2e8f0;
}
body.theme-dark .cand-mode-badge {
  background: #1c2029;
  border-color: #2d3445;
  color: #94a3b8;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CANONICAL REVIEW TAB
   ──────────────────────────────────────────────────────────────────────────── */

/* Toolbar */
.cr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cr-toolbar-left  { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 1; }
.cr-toolbar-right { display: flex; align-items: center; gap: 0.5rem; }
.cr-search {
  flex: 1;
  min-width: 180px;
  padding: 5px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  background: var(--input-bg, #fff);
  color: var(--text, #222);
}
.cr-count-label { font-size: 12px; color: var(--text-muted, #888); white-space: nowrap; }

/* Bulk count — accent matches Claims tab */
.cr-bulk-count { font-weight: 600; color: var(--text, #111); }

/* Member count badge in table cells */
.cr-item-count {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: var(--ui-secondary-bg, #f3f4f6);
  color: var(--text-muted, #555);
  border-radius: 10px;
  padding: 1px 7px;
}
body.theme-dark .cr-item-count { background: #1e2334; color: #94a3b8; }

.cr-error { color: var(--error, #c0392b); }
.cr-detail-body { padding: 16px 20px 24px; }

/* Keyboard shortcut hint in empty state */
.cr-kbd-hint {
  font-size: 11px;
  color: var(--text-muted, #aaa);
  margin-top: 8px;
}
.cr-kbd-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--border-light, #f0f4f8);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 3px;
  padding: 1px 4px;
}

/* Detail section dividers — standard spacing between content blocks */
.cr-detail-section {
  margin-bottom: 14px;
}
.cr-detail-section + .cr-detail-section {
  padding-top: 12px;
  border-top: 1px solid var(--border-light, #f0f4f8);
}
.cr-section-title-block { margin-bottom: 0; }

/* Action bar — primary action left, secondary center, utility right */
.cr-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 10px;
  border-top: 1px solid var(--border-light, #f0f4f8);
  border-bottom: 1px solid var(--border-light, #f0f4f8);
  margin-bottom: 12px;
}
.cr-action-bar kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  background: var(--border-light, #f0f4f8);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 3px;
  padding: 1px 3px;
  margin-left: 3px;
  opacity: 0.7;
}
body.theme-dark .cr-action-bar { border-color: #1e2334; }
body.theme-dark .cr-kbd-hint kbd { background: #1e2334; border-color: #2d3445; }
body.theme-dark .cr-action-bar kbd { background: #1e2334; border-color: #2d3445; }
body.theme-dark .cr-detail-section + .cr-detail-section { border-top-color: #1e2334; }

/* Detail header */
.cr-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light, #f0f4f8);
}
.cr-detail-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-detail-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cr-member-count-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ui-secondary-bg, #f3f4f6);
  color: var(--text-muted, #555);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

/* Editable fields */
.cr-edit-section { margin-bottom: 16px; }
.cr-edit-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #666);
  margin-bottom: 4px;
  margin-top: 12px;
}
.cr-edit-label:first-child { margin-top: 0; }
.cr-edit-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  background: var(--input-bg, #fff);
  color: var(--text, #222);
}
.cr-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  background: var(--input-bg, #fff);
  color: var(--text, #222);
  line-height: 1.5;
}
.cr-edit-textarea-sm { font-size: 12px; }
.cr-edit-select {
  padding: 6px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 13px;
  background: var(--input-bg, #fff);
  color: var(--text, #222);
  min-width: 110px;
}
.cr-inline-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 12px;
}
.cr-updated-at-label { display: flex; flex-direction: column; }
.cr-meta-value { font-size: 12px; color: var(--text-muted, #888); padding: 6px 0; }

/* Save feedback */
.cr-save-feedback {
  margin-top: 8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
}
.cr-feedback-running { background: #fffbe6; color: #7a6000; }
.cr-feedback-done    { background: #e6f4ef; color: #1a6640; }
.cr-feedback-error   { background: #fde8e8; color: #c0392b; }

/* Evidence section */
.cr-evidence-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light, #f0f4f8);
}
.cr-evidence-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cr-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #666);
}
.cr-members-list { list-style: none; margin: 0; padding: 0; }
.cr-member-empty {
  font-size: 13px;
  color: var(--text-muted, #999);
  padding: 12px 0;
}
.cr-member-item {
  padding: 10px 0;
  border-top: 1px solid var(--border-light, #f0f4f8);
  margin-bottom: 0;
  background: transparent;
}
.cr-member-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.cr-member-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #aaa);
  min-width: 16px;
}
.cr-member-text {
  font-size: 13px;
  color: var(--text, #222);
  line-height: 1.5;
  margin-bottom: 4px;
}
.cr-member-original {
  font-size: 11px;
  color: var(--text-muted, #888);
  font-style: italic;
  margin-bottom: 4px;
}
.cr-orig-lang {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--border, #e2e8f0);
  color: var(--text-muted, #666);
  padding: 1px 4px;
  border-radius: 4px;
  margin-right: 4px;
}
.cr-member-quote {
  margin: 4px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--accent, #3a7d60);
  color: var(--text-muted, #666);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  background: var(--hover-bg, #f7f9fc);
  border-radius: 0 4px 4px 0;
}
.cr-member-footer { margin-top: 6px; }
.cr-member-src { font-size: 11px; color: var(--text-muted, #888); }
.cr-member-src-line { margin: 4px 0 2px; }
.cr-member-field { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.cr-member-field-label { font-size: 10px; font-weight: 600; color: var(--text-muted, #888); text-transform: uppercase; letter-spacing: 0.04em; }
.cr-member-field-value { font-size: 12px; color: var(--text-primary, #333); line-height: 1.4; }
.cr-member-interp { padding: 6px 8px; background: var(--hover-bg, #f7f9fc); border-radius: 4px; margin: 4px 0; display: flex; flex-direction: column; gap: 6px; }
.cr-member-conf { font-size: 11px; font-weight: 600; color: var(--text-muted, #888); margin-left: auto; }

/* Internal pipeline labels — deliberately muted so analyst content stays primary.
   Do NOT add color-coded variants here; these are implementation details. */
.cr-claim-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--border-light, #f0f4f8);
  color: var(--text-muted, #888);
}
.cr-claim-quality {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--border-light, #f0f4f8);
  color: var(--text-muted, #888);
}
/* Quality and mapping variants are intentionally neutral — same base style. */
.cr-quality-valid_claim,
.cr-quality-strategic_claim,
.cr-quality-weak_signal,
.cr-quality-discard { /* neutral only — do not add color-coded overrides */ }

.cr-mapping-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 6px;
  text-transform: uppercase;
  background: var(--border-light, #f0f4f8);
  color: var(--text-muted, #aaa);
}
.cr-mapping-auto, .cr-mapping-manual { /* same neutral style — AUTO is internal */ }

/* Evidence summary bar above the member list */
.cr-evidence-summary {
  display: flex;
  gap: 16px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border-light, #f0f4f8);
  margin-bottom: 4px;
}
.cr-evidence-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cr-evidence-summary-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #111);
  line-height: 1;
}
.cr-evidence-summary-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
}

/* ── Dark mode overrides ───────────────────────────────────────────────────── */
body.theme-dark .cr-bulk-bar { border-bottom-color: #1e2334; }
body.theme-dark .cr-bulk-bar label { color: #64748b; }
body.theme-dark .cr-toolbar { background: #1c2029; border-color: #2d3445; }
body.theme-dark .cr-search  { background: #0e1117; border-color: #2d3445; color: #e2e8f0; }
body.theme-dark .cr-list-item { border-bottom-color: #1e2334; }
body.theme-dark .cr-list-item:hover { background: #1c2029; }
body.theme-dark .cr-list-item-active { background: #0d2a1e !important; border-left-color: #4ec87a; }
body.theme-dark .cr-item-label { color: #e2e8f0; }
body.theme-dark .cr-item-sub   { color: #94a3b8; }
body.theme-dark .cr-item-meta  { color: #64748b; }
body.theme-dark .cr-detail-header { border-bottom-color: #1e2334; }
body.theme-dark .cr-edit-label { color: #94a3b8; }
body.theme-dark .cr-edit-input    { background: #0e1117; border-color: #2d3445; color: #e2e8f0; }
body.theme-dark .cr-edit-textarea { background: #0e1117; border-color: #2d3445; color: #e2e8f0; }
body.theme-dark .cr-edit-select   { background: #0e1117; border-color: #2d3445; color: #e2e8f0; }
body.theme-dark .cr-meta-value { color: #64748b; }
body.theme-dark .cr-feedback-running { background: #2d2700; color: #f0d060; }
body.theme-dark .cr-feedback-done    { background: #0d2e18; color: #4ec87a; }
body.theme-dark .cr-feedback-error   { background: #2d0d0d; color: #f08080; }
body.theme-dark .cr-evidence-section { border-top-color: #1e2334; }
body.theme-dark .cr-section-title { color: #64748b; }
body.theme-dark .cr-member-item   { background: transparent; border-top-color: #1e2334; }
body.theme-dark .cr-member-text   { color: #e2e8f0; }
body.theme-dark .cr-member-original { color: #64748b; }
body.theme-dark .cr-orig-lang       { background: #1e2334; color: #94a3b8; }
body.theme-dark .cr-member-quote  { background: #0e1117; border-left-color: #4ec87a; color: #94a3b8; }
body.theme-dark .cr-member-src    { color: #64748b; }
body.theme-dark .cr-member-conf   { color: #64748b; }
body.theme-dark .cr-claim-status  { background: #1e2334; color: #64748b; }
body.theme-dark .cr-claim-quality { background: #1e2334; color: #64748b; }
body.theme-dark .cr-mapping-badge { background: #1e2334; color: #64748b; }
body.theme-dark .cr-evidence-summary { border-bottom-color: #1e2334; }
body.theme-dark .cr-evidence-summary-value { color: #e2e8f0; }
body.theme-dark .cr-evidence-summary-label { color: #64748b; }

/* ── Improve Claim section ──────────────────────────────────────────────── */
.improve-claim-section {
  border-top: 1px solid var(--ui-border, #e5e7eb);
  margin-top: 1.5rem;
  padding-top: 1rem;
  grid-column: 1 / -1;
}

.improve-claim-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-muted, #6b7280);
  margin-bottom: .75rem;
}

.improve-original-block {
  margin-bottom: .75rem;
}

.improve-original-text {
  font-size: 13px;
  color: var(--ui-muted, #6b7280);
  background: var(--ui-surface-alt, #f9fafb);
  border-left: 3px solid var(--ui-border, #e5e7eb);
  padding: .5rem .75rem;
  margin: .25rem 0 0;
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.improve-claim-actions {
  margin-top: .5rem;
}

.improve-suggestion-block {
  margin-top: 1rem;
  padding: .75rem;
  background: var(--ui-surface-alt, #f0fdf4);
  border: 1px solid #bbf7d0;
  border-radius: 6px;
}

.improve-suggestion-text {
  font-size: 13px;
  color: var(--ui-text, #111827);
  margin: .25rem 0 .75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.improve-suggestion-actions {
  display: flex;
  gap: .5rem;
}

/* ── Expand context button + expanded view ──────────────────────────────── */
.expand-context-controls {
  margin-top: .5rem;
}

.context-expanded {
  margin-top: .5rem;
}

.context-text {
  font-size: 12px;
  color: var(--ui-muted, #374151);
  background: var(--ui-surface-alt, #f9fafb);
  border-left: 3px solid var(--ui-border, #d1d5db);
  padding: .5rem .75rem;
  border-radius: 0 4px 4px 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

.context-text mark {
  background: #fef08a;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.context-text--fallback {
  border-left-color: #93c5fd;
}

.context-note {
  font-size: 11px;
  color: var(--ui-muted, #6b7280);
  margin-top: .25rem;
  font-style: italic;
}

/* dark mode */
body.theme-dark .improve-original-text { background: #151b29; border-left-color: #2d3445; color: #94a3b8; }
body.theme-dark .improve-claim-section  { border-top-color: #1e2334; }
body.theme-dark .improve-suggestion-block { background: #0d2a1e; border-color: #166534; }
body.theme-dark .improve-suggestion-text  { color: #e2e8f0; }
body.theme-dark .context-text { background: #151b29; border-left-color: #2d3445; color: #94a3b8; }
body.theme-dark .context-text mark { background: #713f12; color: #fef9c3; }

/* ── Clusters / Consolidate page ────────────────────────────────────────────── */

.cl-header-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--ui-chip-bg, #e2e8f0);
  color: var(--ui-chip-text, #334155);
  margin-right: 4px;
  letter-spacing: .01em;
}
.cl-header-chip-geo  { background: #dbeafe; color: #1e40af; }
.cl-header-chip-time { background: #ede9fe; color: #5b21b6; }

.cl-header-section {
  background: var(--ui-bg-subtle, #f8fafc);
  border-radius: 6px;
  padding: 12px 14px 10px;
  margin-bottom: 2px;
}
/* MC-{id} badge at top of main claim box — mirrors raw claim key style */
.cl-mc-id-badge {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ui-text);
  margin-bottom: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-border);
  word-break: break-all;
}
body.theme-dark .cl-mc-id-badge {
  color: var(--ui-text, #e8eaf0);
  border-bottom-color: var(--ui-border, #2e3447);
}
.cl-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
  min-height: 20px;
}

.cl-domain-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
  white-space: nowrap;
}

.cl-rep-hint {
  font-size: 11px;
  color: var(--ui-muted, #6b7280);
  margin-top: 4px;
  font-style: italic;
}

.cl-rep-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: #fef9c3;
  color: #854d0e;
  margin-left: 4px;
  letter-spacing: .02em;
}

.cl-member-rep {
  background: #fffbeb !important;
  border-top-color: #fde68a !important;
}

.cl-member-meta {
  display: inline-block;
  font-size: 11px;
  color: var(--ui-muted, #6b7280);
  margin-left: 6px;
  background: var(--ui-chip-bg, #f1f5f9);
  padding: 1px 6px;
  border-radius: 8px;
}

.cl-set-rep-btn {
  font-size: 11px;
  padding: 2px 8px;
  margin-left: auto;
}

.cl-classification-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  margin-top: 6px;
}

.cr-section-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ui-muted, #6b7280);
  margin-bottom: 6px;
}

/* dark mode */
body.theme-dark .cl-header-section  { background: #151b29; }
body.theme-dark .cl-header-chip     { background: #1e2334; color: #94a3b8; }
body.theme-dark .cl-header-chip-geo { background: #0d2042; color: #60a5fa; }
body.theme-dark .cl-header-chip-time{ background: #1e1244; color: #a78bfa; }
body.theme-dark .cl-domain-badge    { background: #0d2042; color: #60a5fa; }
body.theme-dark .cl-rep-badge       { background: #3a2700; color: #fbbf24; }
body.theme-dark .cl-member-rep      { background: #1e1800 !important; border-top-color: #854d0e !important; }
body.theme-dark .cl-member-meta     { background: #1e2334; color: #64748b; }

/* Similarity badge */
.cl-sim-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  margin-left: 4px;
  letter-spacing: .02em;
}

/* Expand toggle buttons for quote / context */
.cl-expand-btn {
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 11px;
  color: var(--ui-link, #2563eb);
  cursor: pointer;
  display: block;
  margin-top: 4px;
}
.cl-expand-btn:hover { text-decoration: underline; }

/* Similar unlinked claims hint */
.cl-similar-hint {
  font-size: 11px;
  color: var(--ui-muted, #6b7280);
  margin-bottom: 8px;
  font-style: italic;
}

body.theme-dark .cl-expand-btn  { color: #60a5fa; }
body.theme-dark .cl-similar-hint { color: #64748b; }

/* ── Consolidate: expert tools + modals ───────────────────────────────────── */
.cl-expert-tools {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.cl-expert-tools-summary {
  cursor: pointer;
  user-select: none;
  color: var(--ui-muted, #6b7280);
  font-weight: 500;
}
.cl-expert-tools-body {
  margin-top: 8px;
  padding: 8px 0 4px;
  border-left: 2px solid var(--border, #e5e7eb);
  padding-left: 10px;
}
.cl-expert-tools-hint {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted, #888);
}
.btn-danger-outline {
  border-color: var(--danger, #dc2626) !important;
  color: var(--danger, #dc2626) !important;
  background: transparent !important;
}
.btn-danger-outline:hover {
  background: rgba(220, 38, 38, 0.08) !important;
}
.btn-danger {
  background: var(--danger, #dc2626) !important;
  color: #fff !important;
  border-color: var(--danger, #dc2626) !important;
}
.btn-danger:hover {
  filter: brightness(1.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASYNTIS DESIGN SYSTEM — Modals (dialog overlays)
   Use the shared markup: .asyntis-modal > .asyntis-modal-backdrop + .asyntis-modal-card
   Never use window.alert / window.confirm / window.prompt for in-app flows; use
   window.asyntisAlert / window.asyntisConfirm / window.asyntisPrompt from app.js
   so behaviour and styling stay consistent (including dark theme).
   ═══════════════════════════════════════════════════════════════════════════ */

.asyntis-modal-body {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary, #555);
}
.asyntis-modal-body--pre {
  white-space: pre-wrap;
  word-break: break-word;
}
.asyntis-modal-card.asyntis-modal-card--danger {
  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.12);
}

.asyntis-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.asyntis-modal[style*="display:none"] {
  display: none !important;
}
.asyntis-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.asyntis-modal-card {
  position: relative;
  z-index: 1;
  background: var(--bg-card, #fff);
  border-radius: 10px;
  padding: 22px 26px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.asyntis-modal-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
}
.asyntis-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.asyntis-modal-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  margin: 0;
}
.asyntis-modal-check input {
  margin-top: 3px;
}

body.theme-dark .asyntis-modal-card { background: #1a1f2e; color: #e2e8f0; }
body.theme-dark .asyntis-modal-body { color: #cbd5e1; }

/* ── Project guard modal (unsaved changes / active project) ─────────────── */
.proj-guard-modal-card {
  max-width: 480px;
}
.proj-guard-icon {
  font-size: 1.6rem;
  margin-bottom: 10px;
  line-height: 1;
}
.proj-guard-actions .proj-guard-cancel-btn {
  margin-right: auto;
}
body.theme-dark .cl-expert-tools-body { border-left-color: #334155; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS MODULE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Workspace split ──────────────────────────────────────────────────────── */
#view-projects .view-section,
.proj-workspace {
  background: var(--ui-bg-soft, #f9fafb);
}

#view-projects .air-ctx-bar {
  max-width: 100%;
  margin: 0;
}

#view-projects {
  --proj-left-width: 32%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

#view-projects.proj-admin-scope {
  --proj-left-width: 38%;
}

#view-projects .proj-ctx-bar {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
  flex-shrink: 0;
}

.proj-quota-banner {
  max-width: 1280px;
  margin: 0 auto 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.35);
  box-sizing: border-box;
}

.proj-quota-banner a {
  color: var(--accent-primary, #6b4ce6);
  font-weight: 600;
  text-decoration: none;
}

.proj-quota-banner a:hover {
  text-decoration: underline;
}

body.theme-dark .proj-quota-banner {
  background: rgba(255, 193, 7, 0.08);
  border-color: rgba(255, 193, 7, 0.25);
}

.proj-ctx-bar-inner {
  padding-top: 0;
  padding-bottom: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  width: 100%;
}

.proj-ctx-shell-grid {
  align-items: center;
  grid-template-columns: minmax(240px, var(--proj-left-width)) 8px minmax(360px, 1fr);
}

.proj-ctx-shell-grid.proj-ctx-shell-grid--admin {
  grid-template-columns: auto minmax(240px, var(--proj-left-width)) 8px minmax(360px, 1fr);
}

.proj-ctx-scope-col {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 12px;
  flex-shrink: 0;
}

.proj-ctx-scope-col[hidden] {
  display: none !important;
}

.proj-ctx-left-col {
  min-width: 0;
  padding-right: 4px;
  overflow: visible;
}

.proj-ctx-right-col {
  min-width: 0;
}

.proj-ctx-left-col .proj-list-toolbar {
  width: 100%;
  overflow: visible;
}

.proj-ctx-meta {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: auto;
  padding-left: 8px;
  font-size: 11px;
}

#view-projects #proj-scope-toggle-wrap[hidden] {
  display: none !important;
}

#view-projects #proj-scope-toggle-wrap:not([hidden]) {
  display: inline-flex !important;
}

.proj-scope-segment .proj-scope-segment-opt {
  padding: 5px 12px;
  font-size: 11px;
}

.proj-team-access-host {
  max-width: 100%;
}
.proj-team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.proj-team-table th,
.proj-team-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--ui-border, #e5e7eb);
}
.proj-team-table th {
  font-weight: 600;
  color: var(--ui-text-muted);
}
.proj-team-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.proj-team-all {
  font-size: 10px;
  color: var(--ui-text-muted);
}
.proj-team-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.proj-team-status--yes {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
}
.proj-team-status--all_org {
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.1);
}
.proj-team-status--no {
  color: #b45309;
  background: rgba(180, 83, 9, 0.1);
}
.proj-team-owner-btn {
  white-space: nowrap;
  font-size: 11px;
  padding: 4px 8px;
}
.proj-team-owner-badge {
  font-size: 11px;
  font-weight: 600;
  color: #0f766e;
}
.up-pa-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.up-pa-panel {
  max-width: 560px;
}
.up-pa-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.up-pa-org {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}
.up-pa-status {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ui-secondary-bg, #f3f4f6);
  color: var(--text-muted, #6b7280);
}
.up-pa-status--restricted {
  background: #fef3c7;
  color: #92400e;
}
.up-pa-status--full {
  background: #dcfce7;
  color: #15803d;
}
.up-pa-hint {
  margin-top: 0;
  margin-bottom: 12px;
}
.up-pa-plan-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #6b7280);
  background: var(--ui-bg-soft, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.up-pa-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.up-pa-filter {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
}
.up-pa-count {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}
.up-pa-bulk {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.up-pa-bulk-sep {
  color: var(--text-muted, #9ca3af);
  font-size: 12px;
}
.up-pa-link-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--ui-accent, #2563eb);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.up-pa-link-btn:hover {
  color: var(--ui-accent-hover, #1d4ed8);
}
.up-pa-projects-host {
  max-height: min(42vh, 360px);
  overflow-y: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--ui-bg-soft, #f9fafb);
  padding: 8px;
}
.up-pa-projects-host .um-empty,
.up-pa-projects-host .um-loading,
.up-pa-projects-host .um-error {
  padding: 16px 8px;
}
.up-pa-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  cursor: pointer;
  margin: 0;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--bg-card, #fff);
  border: 1px solid transparent;
  color: var(--text, #111827);
  transition: border-color 0.12s, background 0.12s;
}
.up-pa-row:hover {
  border-color: var(--border, #e5e7eb);
}
.up-pa-name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
  text-align: left;
  font-size: 13px;
  color: inherit;
}
.up-pa-row input[type="checkbox"].up-pa-cb {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}
.up-pa-row.is-hidden {
  display: none;
}
body.theme-dark .up-pa-projects-host {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}
body.theme-dark .up-pa-row {
  background: var(--bg-card, #1e2330);
}
body.theme-dark .up-pa-plan-note {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

#view-projects .proj-ctx-meta .air-ctx-label:first-child {
  font-weight: 600;
  color: var(--ui-text, #111);
}

.proj-page-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 16px;
  box-sizing: border-box;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.proj-shell-grid {
  display: grid;
  grid-template-columns: minmax(240px, var(--proj-left-width)) 8px minmax(360px, 1fr);
  align-items: center;
  gap: 0;
}

.proj-shell-gap {
  width: 8px;
}

.proj-workspace {
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-top: 20px;
}

.proj-list-pane {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.proj-detail-pane {
  position: static;
  align-self: stretch;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-left: 8px;
}

/* ── Left panel: toolbar + list ───────────────────────────────────────────── */
.proj-list-header {
  padding: 8px 12px 14px 12px;
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 10px;
}

.proj-list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.proj-page-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ui-text);
  margin: 0;
}

.proj-page-subtitle {
  font-size: 12px;
  color: var(--ui-text-muted);
  margin: 0;
}

.proj-list-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
}

.proj-ctx-left-col .proj-filter-input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.proj-filter-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border, #d5dae4);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1.4;
  height: 30px;
  background: var(--surface-1, #fff);
  color: var(--text-primary, #1a2233);
  box-sizing: border-box;
}
.proj-filter-input:focus {
  outline: none;
  border-color: var(--teal-green);
}

#view-projects .proj-list-toolbar .btn-small {
  height: 30px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.proj-list-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.proj-list-pane .proj-list-item {
  width: 100%;
  box-sizing: border-box;
}

.proj-list-empty {
  font-size: 13px;
  color: var(--ui-text-muted);
  padding: 16px 12px;
  line-height: 1.5;
}

/* Workspace ↔ Customer scope toggle (platform admin) */
.proj-scope-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.proj-scope-toggle-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ui-text-muted, #6b7280);
  white-space: nowrap;
}
.proj-scope-toggle-label--active {
  color: var(--ui-text, #111);
  font-weight: 600;
}
body.theme-dark .proj-scope-toggle-label--active {
  color: var(--ui-text, #e5e7eb);
}
.proj-scope-toggle {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}
.proj-scope-toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #d1d5db;
  position: relative;
  transition: background 0.2s ease;
}
.proj-scope-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.proj-scope-toggle[aria-checked="true"] .proj-scope-toggle-track {
  background: #d97706;
}
.proj-scope-toggle[aria-checked="true"] .proj-scope-toggle-knob {
  transform: translateX(20px);
}
body.theme-dark .proj-scope-toggle-track {
  background: #4b5563;
}
body.theme-dark .proj-scope-toggle[aria-checked="true"] .proj-scope-toggle-track {
  background: #b45309;
}

/* Customer-projects mode — warm context bars (superuser Customer tab on Projects) */
#proj-ctx-bar.proj-ctx-bar--customer-mode,
body.platform-customer-context #view-overview .air-ctx-bar,
body.platform-customer-context #view-ai-reputation .air-ctx-bar,
body.platform-customer-context #view-brand-perception .air-ctx-bar,
body.platform-customer-context #view-ai-comparison .air-ctx-bar,
body.platform-customer-context #view-ai-recommendation .air-ctx-bar {
  background: #f3e8dc !important;
  border-bottom-color: #e0cdb8 !important;
}
body.theme-dark #proj-ctx-bar.proj-ctx-bar--customer-mode,
body.theme-dark.platform-customer-context #view-overview .air-ctx-bar,
body.theme-dark.platform-customer-context #view-ai-reputation .air-ctx-bar,
body.theme-dark.platform-customer-context #view-brand-perception .air-ctx-bar,
body.theme-dark.platform-customer-context #view-ai-comparison .air-ctx-bar,
body.theme-dark.platform-customer-context #view-ai-recommendation .air-ctx-bar {
  background: #2c2419 !important;
  border-bottom-color: #4a3d30 !important;
}

/* Market scan projects mode — yellow context bars (superuser Market tab on Projects) */
#proj-ctx-bar.proj-ctx-bar--market-mode,
body.platform-market-context #view-overview .air-ctx-bar,
body.platform-market-context #view-ai-reputation .air-ctx-bar,
body.platform-market-context #view-brand-perception .air-ctx-bar,
body.platform-market-context #view-ai-comparison .air-ctx-bar,
body.platform-market-context #view-ai-recommendation .air-ctx-bar {
  background: #fef9c3 !important;
  border-bottom-color: #fde047 !important;
}
body.theme-dark #proj-ctx-bar.proj-ctx-bar--market-mode,
body.theme-dark.platform-market-context #view-overview .air-ctx-bar,
body.theme-dark.platform-market-context #view-ai-reputation .air-ctx-bar,
body.theme-dark.platform-market-context #view-brand-perception .air-ctx-bar,
body.theme-dark.platform-market-context #view-ai-comparison .air-ctx-bar,
body.theme-dark.platform-market-context #view-ai-recommendation .air-ctx-bar {
  background: #422006 !important;
  border-bottom-color: #ca8a04 !important;
}

.proj-customer-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(180, 83, 9, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
}

.proj-market-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a16207;
  background: rgba(234, 179, 8, 0.18);
  border-radius: 4px;
  padding: 2px 6px;
}

.proj-sample-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-green, #0d6e68);
  background: var(--teal-green-bg, rgba(92, 166, 201, 0.12));
  border-radius: 4px;
  padding: 2px 6px;
}

.proj-support-banner {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(13, 148, 136, 0.35);
  background: rgba(13, 148, 136, 0.08);
}
.proj-support-banner-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text, #111);
}
.proj-support-banner-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ui-text-muted, #6b7280);
}
body.theme-dark .proj-support-banner {
  border-color: rgba(59, 195, 169, 0.35);
  background: rgba(59, 195, 169, 0.1);
}
body.theme-dark .proj-support-banner-title {
  color: var(--ui-text, #e5e7eb);
}

.proj-list-item {
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.proj-list-item:hover {
  border-color: var(--ui-border-hover, #475569);
  background: var(--ui-hover-bg, rgba(255,255,255,0.04));
}

.proj-item-selected {
  border-color: var(--teal-green) !important;
  background: rgba(var(--teal-green-rgb), 0.12) !important;
}
body.theme-dark .proj-item-selected {
  border-color: var(--teal-green-from) !important;
  background: rgba(var(--teal-green-rgb), 0.08) !important;
}

.proj-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.proj-item-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-item-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.proj-item-org {
  display: block;
  font-size: 11px;
  color: var(--ui-text-muted);
  margin-top: 4px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-item-creator {
  display: block;
  font-size: 11px;
  color: var(--ui-text-muted);
  margin-top: 2px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-active-chip--support {
  color: #b45309;
  background: rgba(180, 83, 9, 0.14);
}

.proj-active-chip--market {
  color: #422006;
  background: linear-gradient(135deg, #fde047 0%, #eab308 100%);
}

.proj-active-chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--teal-green-grad);
  border-radius: 4px;
  padding: 2px 7px;
}
.proj-set-active-btn {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.proj-set-active-btn:hover {
  background: #f1f5f9;
  color: #475569;
  border-color: #94a3b8;
}
body.theme-dark .proj-set-active-btn {
  color: #64748b;
  border-color: rgba(255,255,255,0.15);
}
body.theme-dark .proj-set-active-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
}

/* ── Active banner (top of right panel) ───────────────────────────────────── */
.proj-active-banner {
  background: rgba(var(--teal-green-rgb), 0.12);
  border: 1px solid rgba(var(--teal-green-rgb), 0.35);
  border-radius: 8px;
  color: var(--teal-green);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  margin-bottom: 16px;
}

/* ── Form wrapper ─────────────────────────────────────────────────────────── */
.proj-form {
  padding: 0 4px 32px 4px;
}

/* ── Section ──────────────────────────────────────────────────────────────── */
.proj-section {
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--ui-bg);
}

.proj-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.proj-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

/* ── Field ────────────────────────────────────────────────────────────────── */
.proj-field {
  margin-bottom: 12px;
}

.proj-field:last-child {
  margin-bottom: 0;
}

.proj-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-text-muted);
  margin-bottom: 5px;
}

.proj-hint {
  font-weight: 400;
  font-style: italic;
  font-size: 11px;
  color: var(--ui-text-subtle, #64748b);
}

.proj-input,
.proj-select {
  width: 100%;
  background: var(--ui-input-bg, var(--ui-bg));
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ui-text);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.proj-input:focus,
.proj-select:focus {
  border-color: var(--teal-green);
}

.proj-input--invalid,
.proj-input--invalid:focus {
  border-color: #e53e3e;
}

.proj-textarea {
  width: 100%;
  background: var(--ui-input-bg, var(--ui-bg));
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ui-text);
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.5;
  font-family: inherit;
  transition: border-color 0.15s;
}

.proj-textarea:focus {
  border-color: var(--teal-green);
}

/* ── 2-column grid ────────────────────────────────────────────────────────── */
.proj-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.proj-grid-2 .proj-field {
  margin-bottom: 0;
}

/* ── Tag chips ────────────────────────────────────────────────────────────── */
.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 10px;
  margin-bottom: 6px;
}

.proj-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  background: var(--ui-hover-bg, rgba(255,255,255,0.07));
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  padding: 3px 8px 3px 6px;
  color: var(--ui-text);
  cursor: default;
  user-select: none;
}
.proj-tag-handle {
  font-size: 12px;
  color: var(--ui-text-muted, #aaa);
  cursor: grab;
  opacity: 0.5;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.proj-tag-chip:hover .proj-tag-handle {
  opacity: 1;
}
.proj-tag-chip.proj-tag-dragging {
  opacity: 0.35;
  border-style: dashed;
}
.proj-tag-chip.proj-tag-over {
  border-color: var(--asyntis-accent);
  background: rgba(var(--teal-green-rgb), 0.12);
  box-shadow: -3px 0 0 0 var(--asyntis-accent);
}

.proj-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ui-text-muted);
  font-size: 11px;
  padding: 0;
  line-height: 1;
  transition: color 0.1s;
}

.proj-tag-remove:hover {
  color: #f87171;
}

.proj-tag-add-row {
  display: flex;
  gap: 6px;
}

.proj-tag-input {
  flex: 1;
  background: var(--ui-input-bg, var(--ui-bg));
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--ui-text);
  outline: none;
  transition: border-color 0.15s;
}

.proj-tag-input:focus {
  border-color: var(--teal-green);
}

/* ── Ecosystem autofill row ───────────────────────────────────────────────── */
.proj-ecosystem-autofill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(var(--teal-green-rgb), 0.05);
  border: 1px dashed rgba(var(--teal-green-rgb), 0.3);
  border-radius: 7px;
}

.proj-autofill-hint {
  font-size: 11px;
  color: var(--ui-text-muted);
  font-style: italic;
}

/* Spinner shown during AI generation */
@keyframes proj-spin {
  to { transform: rotate(360deg); }
}
.proj-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--teal-green-rgb), 0.3);
  border-top-color: var(--teal-green);
  border-radius: 50%;
  animation: proj-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ── Strategic priorities ─────────────────────────────────────────────────── */
.proj-priorities-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.proj-priority-item {
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: grab;
  transition: background 0.1s, border-color 0.1s;
  user-select: none;
  box-sizing: border-box;
}

.proj-priority-item:hover {
  background: var(--ui-hover-bg, rgba(255,255,255,0.04));
  border-color: var(--ui-border);
}

.proj-priority-item.proj-prio-dragging {
  opacity: 0.4;
}

.proj-priority-item.proj-prio-over {
  border-color: var(--teal-green);
  background: rgba(var(--teal-green-rgb), 0.07);
}

.proj-prio-handle {
  color: var(--ui-text-subtle, #64748b);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  cursor: grab;
}

.proj-priority-cb {
  flex-shrink: 0;
  accent-color: var(--teal-green);
  cursor: pointer;
}

.proj-prio-text {
  font-size: 12px;
  color: #111111;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

body.theme-dark .proj-prio-text {
  color: #e2e8f0;
}

/* ── Business function: constrained width ─────────────────────────────────── */
#proj-biz-fn {
  max-width: 280px;
}

/* ── Actions bar ──────────────────────────────────────────────────────────── */
.proj-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px 0;
  flex-wrap: wrap;
}

.proj-actions .btn {
  height: 34px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  margin-top: 0;
}

/* Per-block save button row */
.proj-section-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--ui-border, #e5e7eb);
}

/* Delete button — grey with white text */
.proj-delete-btn {
  background: #4b5563 !important;
  border-color: #4b5563 !important;
  color: #fff !important;
}
.proj-delete-btn:hover {
  background: #374151 !important;
  border-color: #374151 !important;
  color: #fff !important;
}

/* ── Responsive: collapse to single column below 1000px ─────────────────── */
@media (max-width: 1000px) {
  #view-projects {
    overflow: visible;
    flex: none;
  }
  .proj-page-shell {
    overflow: visible;
    flex: none;
  }
  .proj-shell-grid {
    grid-template-columns: 1fr;
  }
  .proj-shell-gap {
    display: none;
  }
  .proj-workspace {
    overflow: visible;
    flex: none;
  }
  .proj-workspace .claims-splitter {
    display: none;
  }
  .proj-list-pane {
    overflow: visible;
    max-height: none;
  }
  .proj-detail-pane {
    position: static;
    max-height: none;
    overflow: visible;
    padding-left: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   Scenario Lab — Active Project card + dual-handle time slider
   ══════════════════════════════════════════════════════════════ */

/* Active Project card (replaces Decision Context) */
.sl-project-card {
  cursor: default;
  user-select: none;
}
.sl-proj-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sl-proj-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sl-proj-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sl-proj-org {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.sl-proj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.sl-proj-meta-item {
  font-size: 11px;
  background: var(--bg, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text-muted, #374151);
}
.sl-proj-hint {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  margin-top: 6px;
  margin-bottom: 0;
}
.sl-proj-empty p {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin: 0;
}

/* Geo row: text left, "To Project →" right */
.sl-proj-geo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.sl-proj-geo {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.sl-proj-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #9ca3af);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.sl-proj-link:hover { color: var(--text, #374151); text-decoration: underline; }
body.theme-dark .sl-proj-link { color: var(--asyntis-accent); }
body.theme-dark .sl-proj-link:hover { color: #e8f76e; }

/* Claims mode toggle switch */
.sl-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 4px;
}
.sl-mode-btn {
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  color: var(--text-muted, #6b7280);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.sl-mode-btn + .sl-mode-btn {
  border-left: 1px solid var(--border, #e5e7eb);
}
.sl-mode-btn.sl-mode-active {
  background: var(--teal-green-grad);
  color: #1a1f2e;
  font-weight: 700;
}
body.theme-dark .sl-mode-toggle { border-color: rgba(255,255,255,0.15); }
body.theme-dark .sl-mode-btn + .sl-mode-btn { border-left-color: rgba(255,255,255,0.15); }
body.theme-dark .sl-mode-btn.sl-mode-active { color: #0f1623; }

/* ── Scenario Set Tabs ─────────────────────────────────────────────────── */
#sl-set-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0 0;
}

/* When tabs are visible, remove the top border-radius of the build card so it connects */
#sl-set-tabs-bar:not([style*="display:none"]) + #sl-build-card,
#sl-set-tabs-bar[style="display: flex;"] + #sl-build-card {
  border-top-left-radius: 0;
}

/* ── Save / Load action row inside Build Scenario card ─────────────────── */
.sl-card-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.sl-card-actions .btn,
.sl-card-btn {
  padding: 8px 14px;
  font-size: 13px;
  height: auto;
  line-height: 1.4;
  white-space: nowrap;
  margin-top: 0;
}
.btn-danger {
  background: #fff;
  color: #dc2626;
  border: 1px solid #fca5a5;
}
.btn-danger:hover { background: #fef2f2; border-color: #dc2626; }
body.theme-dark .btn-danger { background: #2d1a1a; color: #f87171; border-color: #7f1d1d; }
body.theme-dark .btn-danger:hover { background: #3d2020; }

/* ── Scenario Modals ───────────────────────────────────────────────────── */
.sl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.sl-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 380px;
  max-width: 95vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.sl-modal--wide { width: 640px; }
.sl-modal-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
}
.sl-modal-body { margin-bottom: 16px; }
.sl-modal-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text, #1e293b);
}
.sl-modal-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}
.sl-modal-meta {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
}
.sl-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
body.theme-dark .sl-modal { background: #1e2736; color: #e2e8f0; }
body.theme-dark .sl-modal-input { background: #263044; color: #e2e8f0; border-color: rgba(255,255,255,0.15); }

/* ── Load modal table ──────────────────────────────────────────────────── */
.sl-load-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sl-load-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid var(--border, #e2e8f0);
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}
.sl-load-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  vertical-align: middle;
}
.sl-load-topic { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-dark .sl-load-table th,
body.theme-dark .sl-load-table td { border-color: rgba(255,255,255,0.1); }

/* Dual-handle time horizon slider */
.sl-time-range-wrap {
  padding: 6px 0 10px;
}
/* Spacing fix: gap between domain chips / MT2 section and Time Horizon label */

.sl-mt2-divider {
  border-top: 1px solid var(--border, #e2e8f0);
  margin: 16px 0 4px;
}
.sl-time-range-display {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.sl-time-dash {
  margin: 0 4px;
  color: var(--text-muted, #9ca3af);
}
.sl-time-track-wrap {
  position: relative;
  height: 16px;   /* exact thumb height */
}
/* Track and fill centred in the 16px wrapper: top=6px → centre at 8px */
.sl-time-track-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 4px;
  background: var(--border-color, #ddd);
  border-radius: 2px;
  pointer-events: none;
}
.sl-time-fill {
  position: absolute;
  top: 6px;
  height: 4px;
  background: var(--teal-green-grad);
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}
/* Range inputs: height = track height (4px), positioned at the track centre.
   The thumb uses margin-top: -6px to pull itself up so its own centre = track centre.
   Formula: margin-top = (track-height - thumb-height) / 2 = (4 - 16) / 2 = -6px  */
.sl-range-input {
  position: absolute;
  top: 6px;       /* same as track top */
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
}
.sl-range-input:focus { outline: none; border: none; box-shadow: none; }
.sl-range-input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border: none;
  outline: none;
}
.sl-range-input:focus::-webkit-slider-runnable-track { border: none; outline: none; }
.sl-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;   /* centres 16px thumb on 4px track */
  border-radius: 50%;
  background: var(--teal-green-grad);
  border: 2px solid var(--teal-green-to);
  box-shadow: none;
  pointer-events: all;
  cursor: grab;
  position: relative;
  z-index: 2;
}
.sl-range-input:focus::-webkit-slider-thumb { outline: none; box-shadow: none; }
.sl-range-input::-moz-range-track          { height: 4px; background: transparent; border: none; }
.sl-range-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal-green-grad);
  border: 2px solid var(--teal-green-to);
  box-shadow: none;
  pointer-events: all;
  cursor: grab;
}
.sl-range-input:focus::-moz-range-thumb      { outline: none; box-shadow: none; }
.sl-range-input:active::-webkit-slider-thumb { cursor: grabbing; }
.sl-range-input:active::-moz-range-thumb     { cursor: grabbing; }

.sl-time-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-muted, #9ca3af);
}

/* Scenario Lab workspace override (in case .layout is also set) */

@media (max-width: 900px) {
  
  #sl-splitter  { display: none; }
}

/* Market Tracking workspace (reuses view-scenario-lab HTML) */

body.theme-dark .sl-time-track-bg  { background: rgba(255,255,255,0.12); }
body.theme-dark .sl-proj-meta-item { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: #cbd5e0; }
body.theme-dark .sl-proj-name      { color: #f1f5f9; }
body.theme-dark .sl-proj-org       { color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════
   ACTOR VIEW — Competitor / actor intelligence profile page
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────── */
#av-workspace {
  --av-left-width: 880px;
  display: grid;
  grid-template-columns: minmax(300px, var(--av-left-width)) 8px 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
}

@media (max-width: 900px) {
  #av-workspace { grid-template-columns: 1fr; }
  #av-splitter  { display: none; }
}

/* Tighter horizontal padding in actor view so cards tile 3-wide sooner */
#av-form-column {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ── Left column cards — CSS grid tile layout ──────── */
.av-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 4px 0;
}

.av-cards-grid .pap-ecosystem-card,
.av-cards-grid .av-section-card--full {
  grid-column: 1 / -1;
}

.av-section-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: 18px 18px 16px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 10px;
  background: #fff;
}

.av-section-card h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  padding-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.av-section-card h2 .av-section-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted, #9ca3af);
  opacity: 0.7;
}

.av-section-card--accent {
  border-left: 3px solid var(--teal-green);
}

/* ── Next Steps card ─────────────────────────────────────────────────────── */
.av-section-card--next-steps {
  border-left: 3px solid #6366f1;
  background: #fafaf9;
}

.av-next-steps-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.av-next-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  transition: background 0.12s;
}
.av-next-step:hover {
  background: #f0f0ff;
}

.av-next-step-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4f46e5;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.av-next-step--investigate .av-next-step-num {
  background: #fef9c3;
  color: #854d0e;
}

.av-next-step-content {
  flex: 1;
  min-width: 0;
}

.av-next-step-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

.av-next-step-desc {
  font-size: 0.68rem;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.35;
}

.av-next-step-cta {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  color: #6366f1;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e0e7ff;
  white-space: nowrap;
  background: #fff;
  margin-top: 1px;
}
.av-next-step-cta:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.av-next-steps-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 6px 0;
}

.av-next-step--investigate .av-next-step-title {
  color: #78350f;
  font-style: italic;
}

@media (max-width: 1024px) {
  .av-cards-grid #av-section-implications { grid-column: 1 / -1; }
  .av-cards-grid #av-section-next-steps   { grid-column: 1 / -1; }
}

.av-section-card .av-section-body {
  flex: 1;
}

/* Strategic narrative order — applies across actor types but only project shows
   all sections. Hidden cards (display:none via data-av-types) don't take grid space,
   so customer/competitor/etc. layouts are unaffected (their unordered cards land first). */
.av-cards-grid #av-section-pap-ecosystem  { order: 100; }
.av-cards-grid #av-section-market-position { order: 200; }
.av-cards-grid #av-section-capabilities    { order: 210; }
.av-cards-grid #av-section-dependencies    { order: 220; }
.av-cards-grid #av-section-strategic-intent { order: 300; }
.av-cards-grid #av-section-evolution       { order: 310; }
.av-cards-grid #av-section-pressure-points { order: 320; }
.av-cards-grid #av-section-implications    { order: 400; grid-column: span 2; }
.av-cards-grid #av-section-next-steps      { order: 401; grid-column: span 1; }

@media (max-width: 1024px) {
  .av-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .av-cards-grid { grid-template-columns: 1fr; }
}

/* ── Project Profile Ecosystem Section ──────────────────────────────────── */
.pap-ecosystem-card {
  grid-column: 1 / -1;
}
.pap-eco-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.pap-eco-title {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 6px;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted, #6b7280) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
}
.pap-eco-title .av-section-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.pap-eco-subtitle {
  margin: 0 !important;
  font-size: 12px;
  color: var(--ui-muted, #6b7280);
  max-width: 580px;
}
.pap-eco-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.pap-eco-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.pap-eco-view-btn {
  background: transparent;
  border: 0;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--ui-muted, #6b7280);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, color 0.15s ease;
}
.pap-eco-view-btn + .pap-eco-view-btn {
  border-left: 1px solid var(--border-color, #e5e7eb);
}
.pap-eco-view-btn:hover {
  background: var(--ui-bg-soft, #f9fafb);
  color: var(--text, #111);
}
.pap-eco-view-btn.is-active {
  background: var(--text, #111);
  color: #fff;
}
body.theme-dark .pap-eco-view-toggle { background: #1e293b; border-color: #334155; }
body.theme-dark .pap-eco-view-btn { color: #94a3b8; }
body.theme-dark .pap-eco-view-btn.is-active { background: var(--teal-green-grad); color: #111; }

/* Compact view: only first 6 chips per group, hide tail divider + add row */
.pap-eco-compact .pap-eco-chip--out-scope { display: none !important; }
.pap-eco-compact .pap-eco-scope-divider { display: none !important; }
.pap-eco-compact .pap-eco-add-row { display: none !important; }
.pap-eco-compact .pap-eco-group-hint { display: none !important; }
.pap-eco-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .pap-eco-groups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pap-eco-groups { grid-template-columns: 1fr; }
}
.pap-eco-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pap-eco-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-muted, #6b7280);
  margin-bottom: 2px;
}
.pap-eco-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 36px;
  padding: 2px;
  border-radius: 6px;
  border: 1px dashed transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pap-eco-chips.is-drop-target {
  background: #fbffe6;
  border-color: var(--teal-green);
}
.pap-eco-chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--ui-bg-soft, #f9fafb);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  min-width: 0;
}
.pap-eco-chip > .pap-eco-chip-name { overflow: hidden; }
.pap-eco-chip-name {
  flex: 1 1 auto;
  font-weight: 500;
  color: var(--text, #111);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Info / Add-note button on chip */
.pap-eco-chip-info {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.pap-eco-chip-info:hover {
  color: var(--text, #111);
  background: rgba(0, 0, 0, 0.04);
}
.pap-eco-chip.has-note .pap-eco-chip-info {
  color: var(--brand-primary, #5da37d);
}
.pap-eco-chip.has-note .pap-eco-chip-info:hover {
  color: var(--text, #111);
}

/* Inline editor (hidden by default, shown when .is-editing) */
.pap-eco-chip-editor {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-light, #e5e7eb);
}
.pap-eco-chip-note-input {
  width: 100%;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 11.5px;
  font-family: inherit;
  color: var(--text, #111);
  background: #fff;
  resize: vertical;
  min-height: 38px;
  line-height: 1.4;
  outline: none;
}
.pap-eco-chip-note-input:focus {
  border-color: var(--brand-primary, #5da37d);
}
.pap-eco-chip-editor-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.pap-eco-chip-editor-actions button {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-light, #e5e7eb);
  background: #fff;
  color: var(--text, #111);
  transition: background 0.15s ease;
}
.pap-eco-chip-note-save {
  background: var(--text, #111) !important;
  color: #fff !important;
  border-color: var(--text, #111) !important;
}
.pap-eco-chip-note-save:hover { opacity: 0.85; }
.pap-eco-chip-note-cancel:hover { background: var(--ui-bg-soft, #f9fafb); }
.pap-eco-chip.is-editing { cursor: default; }
.pap-eco-chip.is-editing .pap-eco-chip-info { background: rgba(0, 0, 0, 0.06); color: var(--text, #111); }

/* ── Custom hover tooltip for ecosystem chips (fast, Claim-Radar style) ── */
.pap-eco-tooltip {
  position: absolute;
  background: rgba(26, 31, 46, 0.93);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.45;
  padding: 6px 10px;
  border-radius: 6px;
  max-width: 260px;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  white-space: normal;
  word-break: break-word;
  opacity: 0;
  transition: opacity 0.08s ease;
}
.pap-eco-tooltip.is-visible { opacity: 1; }
body.theme-dark .pap-eco-tooltip {
  background: rgba(220, 225, 240, 0.95);
  color: #1a1f2e;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

/* ── Dark mode for ecosystem chips ─────────────────────────────────────── */
body.theme-dark .pap-eco-chip {
  background: #1e2533;
  border-color: #2c3447;
  color: #cbd5e1;
}
body.theme-dark .pap-eco-chip-name { color: #e2e8f0; }
body.theme-dark .pap-eco-chip--in-scope {
  background: #232b3b;
  border-left-color: var(--teal-green);
  border-color: #2c3447;
}
body.theme-dark .pap-eco-chip--in-scope .pap-eco-chip-name { color: #f1f5f9; }
body.theme-dark .pap-eco-chip--out-scope {
  background: #1a212d;
  opacity: 0.55;
}
body.theme-dark .pap-eco-chip--out-scope .pap-eco-chip-name { color: #94a3b8; }
body.theme-dark .pap-eco-chip.is-drop-target {
  background: #2a3422;
  border-color: var(--teal-green);
}
body.theme-dark .pap-eco-chip-info { color: #475569; }
body.theme-dark .pap-eco-chip-info:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.06);
}
body.theme-dark .pap-eco-chip.has-note .pap-eco-chip-info { color: var(--teal-green); }
body.theme-dark .pap-eco-chip-remove { color: #475569; }
body.theme-dark .pap-eco-chip-remove:hover { color: #ef4444; }
body.theme-dark .pap-eco-drag-handle { color: #334155; }
body.theme-dark .pap-eco-chip:hover .pap-eco-drag-handle { color: #64748b; }

/* Inline editor — dark */
body.theme-dark .pap-eco-chip-editor { border-top-color: #2c3447; }
body.theme-dark .pap-eco-chip-note-input {
  background: #0f1623;
  border-color: #2c3447;
  color: #e2e8f0;
}
body.theme-dark .pap-eco-chip-note-input:focus { border-color: var(--teal-green); }
body.theme-dark .pap-eco-chip-editor-actions button {
  background: #1e2533;
  border-color: #2c3447;
  color: #cbd5e1;
}
body.theme-dark .pap-eco-chip-note-save {
  background: var(--teal-green-grad) !important;
  color: #111 !important;
  border-color: var(--teal-green) !important;
}
body.theme-dark .pap-eco-chip-note-cancel:hover { background: #232b3b; }

/* Add row + buttons — dark */
body.theme-dark .pap-eco-add-input {
  background: #0f1623;
  border-color: #2c3447;
  color: #e2e8f0;
}
body.theme-dark .pap-eco-add-input:focus { border-color: var(--teal-green); }
body.theme-dark .pap-eco-add-btn {
  background: #1e2533;
  border-color: #2c3447;
  color: #cbd5e1;
}
body.theme-dark .pap-eco-add-btn:hover { background: #232b3b; }
body.theme-dark .pap-eco-scope-divider {
  background: repeating-linear-gradient(to right, #2c3447 0 4px, transparent 4px 8px);
}
.pap-eco-chip-notes::placeholder {
  color: var(--ui-muted, #9ca3af);
  font-style: italic;
}
.pap-eco-chip-remove {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--ui-muted, #9ca3af);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.pap-eco-chip-remove:hover { color: var(--danger, #ef4444); }
.pap-eco-add-row {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.pap-eco-add-input {
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  color: var(--text, #111);
  outline: none;
}
.pap-eco-add-input:focus { border-color: var(--accent, #111); }
.pap-eco-add-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  color: var(--text, #111);
}
.pap-eco-add-btn:hover { background: var(--ui-bg-soft, #f9fafb); }

/* Draggable chips + top-6 in-scope emphasis */
.pap-eco-group-hint {
  font-size: 10.5px;
  color: var(--ui-muted, #6b7280);
  font-style: italic;
  margin: 2px 0 4px;
  letter-spacing: 0.01em;
}
.pap-eco-chip {
  cursor: grab;
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.pap-eco-chip.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.pap-eco-chip.is-drop-target {
  border-color: var(--teal-green);
  background: #fbffe6;
}
.pap-eco-chip--in-scope {
  border-left: 2px solid var(--teal-green);
  background: #fff;
}
.pap-eco-chip--in-scope .pap-eco-chip-name {
  font-weight: 600;
  color: var(--text, #111);
}
.pap-eco-chip--out-scope {
  opacity: 0.65;
  background: #fafbfc;
}
.pap-eco-chip--out-scope .pap-eco-chip-name {
  color: var(--ui-muted, #6b7280);
  font-weight: 500;
}
.pap-eco-drag-handle {
  flex: 0 0 auto;
  color: #cbd5e1;
  cursor: grab;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  user-select: none;
}
.pap-eco-chip:hover .pap-eco-drag-handle { color: #94a3b8; }
.pap-eco-scope-divider {
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--border-light, #e5e7eb) 0 4px,
    transparent 4px 8px
  );
  margin: 4px 0;
  position: relative;
}

/* Lime-green splitter hover — matches Future Lab drag handle */
#av-splitter:hover,
#av-splitter.is-dragging {
  background: #a3e635;
}

/* Connect tabs bar to header card visually */
#av-actor-tabs-bar:not([style*="display:none"]) + #av-header-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ── Actor header card ──────────────────────────────────── */
.av-actor-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.av-actor-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.av-actor-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.av-actor-type-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.av-autofill-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.av-autofill-btn {
  flex-shrink: 0;
}

.av-spinner {
  flex-shrink: 0;
}

.av-autofill-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Autofill context block — shows profiles + claims used for last generation */
.av-context-block {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 6px;
  background: var(--bg-subtle, #f8fafc);
  font-size: 0.76rem;
}
.av-context-title {
  display: block;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  margin-bottom: 5px;
}
.av-context-body { color: var(--text-secondary, #475569); line-height: 1.6; }
.av-context-body ul { margin: 0; padding-left: 14px; }
.av-context-body li { margin: 1px 0; }
.av-context-section { margin-top: 4px; font-weight: 500; }
body.theme-dark .av-context-block { background: #1e293b; border-color: #334155; }
body.theme-dark .av-context-body  { color: #94a3b8; }

/* Hint row: hint text on left, context toggle on right */
.av-hint-context-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.av-hint-context-row .av-autofill-hint {
  margin: 0;
  flex: 1;
}
.av-context-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}
.av-context-toggle:hover { color: var(--accent, #6366f1); }
.av-context-arrow { font-size: 0.65rem; }

/* Actor view inline edit mode */
.av-edit-section { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.av-edit-field   { display: flex; flex-direction: column; gap: 3px; }
.av-field-textarea {
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: 5px;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-card);
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.45;
  transition: border-color 0.15s;
}
.av-field-textarea:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
}
body.theme-dark .av-field-textarea {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

/* Manual update badge in context block */
.av-manual-badge {
  color: var(--text-secondary, #475569);
  font-size: 0.76rem;
  margin-bottom: 4px;
  font-style: italic;
}

/* Website URL field for actor disambiguation */
.av-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.av-url-row .av-label {
  white-space: nowrap;
  flex-shrink: 0;
}

.av-url-row .proj-input {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
}

.av-reset-btn {
  margin-left: auto;
  color: var(--text-muted);
}

/* ── Section body — fields ──────────────────────────────── */
.av-section-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.av-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.av-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.av-field-value {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Array fields rendered as bullet list */
.av-field-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
}

.av-field-list li {
  margin-bottom: 1px;
}

.av-field-value.is-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* Change badge — inline pill on field rows */
.av-change-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
}

.av-change-badge.up {
  background: var(--ui-validated-bg);
  color: var(--ui-validated-text);
}

.av-change-badge.down {
  background: var(--ui-rejected-bg);
  color: var(--ui-rejected-text);
}

.av-change-badge.neutral {
  background: var(--ui-draft-bg, #f0f4f8);
  color: var(--text-muted);
}

/* Strength badge */
.av-strength-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent-light, rgba(79,140,255,0.1));
  color: var(--accent, #4f8cff);
  margin-left: 6px;
  vertical-align: middle;
}

/* Pressure point badges */
.av-pressure-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}
.av-pressure-high     { background: rgba(220,38,38,0.10); color: #dc2626; }
.av-pressure-moderate { background: rgba(245,158,11,0.12); color: #b45309; }
.av-pressure-low      { background: rgba(34,197,94,0.10);  color: #16a34a; }
.av-pressure-rationale {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

/* ── Empty state ────────────────────────────────────────── */
.av-empty-state {
  text-align: center;
  padding: 20px 12px;
}

/* ── Right column — radar stack ─────────────────────────── */
.av-radar-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

/* ── Radar panels (reuse .radar-panel; override sizing) ─── */
#av-signal-radar-panel,
#av-trend-radar-panel {
  position: relative;
  flex-shrink: 0;
}

.av-radar-wrap {
  position: relative;
  padding: 8px 16px 16px;
}

/* Ensure radar title has visible breathing room above chart */
#av-signal-radar-panel .radar-toolbar,
#av-trend-radar-panel  .radar-toolbar {
  padding-bottom: 6px;
}

.av-radar-svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
}

/* Overlay for empty state */
#av-signal-radar-panel .radar-overlay,
#av-trend-radar-panel  .radar-overlay {
  background: var(--bg-card);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  position: relative;
}

/* ── Signal list ────────────────────────────────────────── */
.av-signal-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light, var(--border));
}

.av-signal-row:last-child {
  border-bottom: none;
}

.av-signal-title {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.4;
}

.av-signal-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.av-signal-category {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #4f8cff);
}

.av-signal-source {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.av-signal-source-link {
  color: var(--color-accent, #2563eb);
  text-decoration: none;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.av-signal-source-link:hover {
  text-decoration: underline;
}

.av-signal-confidence {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Domain chip view link (next to competitor chips) ────── */
.domain-chip-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.domain-chip-view-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 0 6px 6px 0;
  background: transparent;
  border: 1px solid var(--border);
  border-left: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  vertical-align: middle;
  flex-shrink: 0;
}

.domain-chip-view-link:hover {
  background: var(--accent-light, rgba(79,140,255,0.1));
  color: var(--accent, #4f8cff);
  border-color: var(--accent, #4f8cff);
}

/* When the chip wrapper is adjacent, round the chip right edge squarely */
.domain-chip-wrapper .domain-chip {
  border-radius: 6px 0 0 6px;
}

/* ── Dark mode ──────────────────────────────────────────── */
body.theme-dark .av-field-value        { color: #e2e8f0; }
body.theme-dark .av-label              { color: #94a3b8; }
body.theme-dark .av-autofill-hint      { color: #64748b; }
body.theme-dark .av-actor-name         { color: #f1f5f9; }
body.theme-dark .domain-chip-view-link { border-color: rgba(255,255,255,0.15); color: #64748b; }
body.theme-dark .domain-chip-view-link:hover { background: rgba(79,140,255,0.15); color: #93c5fd; border-color: #93c5fd; }

/* ══════════════════════════════════════════════════════════════════════════════
   INSIGHTS STATUS PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* Active project block */
.is-project-block {
  padding: 16px 20px;
  margin-bottom: 28px;
  max-width: 520px;
}
.is-no-project {
  font-size: 13px;
  color: var(--text-muted);
}

/* Section */

/* Metrics row */
.is-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.is-metrics-row--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Metric card */
.is-metric-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px 20px;
  gap: 6px;
  min-height: 170px;
}

/* Donut SVG */

/* Empty donut placeholder (for "not yet defined" actors) */

/* Card label (appears below donut or above count) */
.is-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #374151);
  margin-top: 2px;
}

/* Description line at bottom */
.is-card-desc {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
}
.is-card-desc--muted {
  font-style: italic;
}

/* Big count value */
.is-count-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary, #111827);
  line-height: 1;
  letter-spacing: -0.02em;
}
.is-card-sub {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}

/* Skeleton loader */
.is-skeleton {
  width: 60%;
  height: 14px;
  border-radius: 4px;
  background: var(--bg-hover, #f3f4f6);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Coming soon block */
.is-coming-soon {
  justify-content: center;
  padding: 24px;
  min-height: 80px;
}
.is-coming-soon-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #9ca3af);
}

/* Linked / clickable cards */
.is-metric-card.is-linked {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.is-metric-card.is-linked:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

/* Dark mode */

body.theme-dark .is-count-value { color: #f1f5f9; }
body.theme-dark .is-card-label { color: #cbd5e1; }

/* ── Auth screens (AIRepScore brand — teal gradient) ───────────────────────── */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #f8fafc 0%, #eef6f8 45%, #e8f4f6 100%);
  padding: 24px;
}

.auth-screen.auth-screen--modal {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
}
.auth-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 44px 36px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 8px 40px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(76, 185, 185, 0.12);
  border: 1px solid rgba(76, 185, 185, 0.12);
}
.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}
.auth-logo-img {
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
}
.auth-logo-img--dark { display: none; }
body.theme-dark .auth-logo-img--light { display: none; }
body.theme-dark .auth-logo-img--dark  { display: block; }
.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.auth-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 24px;
  line-height: 1.55;
}
.auth-subtitle strong {
  color: #334155;
  font-weight: 600;
}
.auth-invite-hint {
  margin-top: -12px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #94a3b8;
}
.auth-dev-hint {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.auth-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.auth-hint {
  font-weight: 400;
  color: #94a3b8;
}
.auth-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #0f172a;
  background: #ffffff;
  transition: border-color 0.15s;
  outline: none;
}
.auth-input:focus {
  border-color: var(--teal-green);
  box-shadow: 0 0 0 3px rgba(76, 185, 185, 0.22);
}
.auth-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
}
.auth-input-code {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-align: center;
  height: 56px;
  font-family: 'Courier New', monospace;
}
.auth-error {
  font-size: 13px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px;
}
.auth-submit-btn {
  height: 44px;
  background: var(--teal-green-grad);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s, transform 0.1s;
  margin-top: 4px;
  box-shadow: 0 2px 10px rgba(60, 166, 185, 0.35);
}
.auth-submit-btn:hover {
  background: var(--teal-green-grad-hover);
  filter: brightness(1.03);
}
.auth-submit-btn:active { transform: translateY(1px); }
.auth-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  transform: none;
}
.auth-terms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 0;
  cursor: pointer;
  user-select: none;
}
.auth-terms-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--teal-green);
  cursor: pointer;
}
.auth-terms-text {
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}
.auth-terms-link {
  color: var(--teal-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-terms-link:hover { color: var(--teal-green-from); }
.auth-resend-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--teal-green);
  cursor: pointer;
  text-align: center;
  padding: 6px 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.auth-resend-btn:hover { color: var(--teal-green-from); }

/* Auth screens — dark mode */
body.theme-dark .auth-screen:not(.auth-screen--modal) {
  background: linear-gradient(160deg, #0e1117 0%, #121820 45%, #161c2c 100%);
}
body.theme-dark .auth-screen.auth-screen--modal {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}
body.theme-dark .auth-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(88, 198, 197, 0.08);
}
body.theme-dark .auth-title { color: var(--text); }
body.theme-dark .auth-subtitle { color: var(--text-muted); }
body.theme-dark .auth-subtitle strong { color: #c8d0e0; }
body.theme-dark .auth-invite-hint,
body.theme-dark .auth-dev-hint { color: var(--text-muted); }
body.theme-dark .auth-terms-text { color: var(--text-muted); }
body.theme-dark .auth-label { color: #c8d0e0; }
body.theme-dark .auth-hint { color: var(--text-muted); }
body.theme-dark .auth-input {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}
body.theme-dark .auth-input::placeholder { color: #6b788e; }
body.theme-dark .auth-input:focus {
  border-color: var(--teal-green);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
body.theme-dark .auth-input:disabled {
  background: var(--ui-bg-soft);
  color: var(--text-muted);
}
body.theme-dark .auth-input-code {
  background: var(--input-bg);
  color: var(--text);
}
body.theme-dark .auth-error {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.35);
}
body.theme-dark .auth-submit-btn {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
body.theme-dark .auth-resend-btn { color: var(--teal-green); }
body.theme-dark .auth-resend-btn:hover { color: var(--teal-green-to); }

/* ── Radar icon pulse animation (Market Lab sidebar icon) ───────────────── */
@keyframes radar-broadcast {
  0%, 100% { opacity: 0.2; }
  40%, 60% { opacity: 1; }
}

.sidebar-item:hover .nav-icon-radar .ri-c {
  animation: radar-broadcast 0.4s ease-in-out 1;
  animation-delay: 0s;
}
.sidebar-item:hover .nav-icon-radar .ri-1 {
  animation: radar-broadcast 0.4s ease-in-out 1;
  animation-delay: 0.08s;
}
.sidebar-item:hover .nav-icon-radar .ri-2 {
  animation: radar-broadcast 0.4s ease-in-out 1;
  animation-delay: 0.16s;
}

/* ── Sidebar icon hover animations ─────────────────────────────────────── */

/* Shared keyframes */
@keyframes icon-float-up {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-2.5px); }
  100% { transform: translateY(0); }
}
@keyframes icon-tilt {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-6deg); }
  70%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes icon-wobble {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-8deg); }
  75%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}
@keyframes icon-scale-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes icon-spin-nudge {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(35deg); }
  100% { transform: rotate(0deg); }
}
@keyframes icon-zap-flash {
  0%, 100% { opacity: 1; }
  30%       { opacity: 0.25; }
  60%       { opacity: 1; }
  80%       { opacity: 0.35; }
}
@keyframes icon-slide-lr {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-2.5px); }
  70%  { transform: translateX(2.5px); }
  100% { transform: translateX(0); }
}
@keyframes icon-moon-drift {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}
@keyframes icon-sun-rays-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}
@keyframes icon-page-flip {
  0%   { transform: scaleX(1); }
  45%  { transform: scaleX(0); }
  55%  { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Home — zweeft omhoog */
.sidebar-item:hover .nav-icon-home {
  animation: icon-float-up 0.4s ease-in-out 1;
}

/* Projects — kantelt als een opengeslagen map */
.sidebar-item:hover .nav-icon-folder {
  animation: icon-tilt 0.4s ease-in-out 1;
  transform-origin: bottom center;
}

/* Future Lab (flask) — wiebelt als een reageerbuisje */
.sidebar-item:hover .nav-icon-flask {
  animation: icon-wobble 0.45s ease-in-out 1;
  transform-origin: bottom center;
}

/* Business Lab (briefcase) — schuift links en rechts */
.sidebar-item:hover .nav-icon-briefcase {
  animation: icon-slide-lr 0.4s ease-in-out 1;
}

/* Knowledge Hub (book) — linker pagina klapt om vanuit de rug */
.sidebar-item:hover .nav-icon-book .bk-page {
  animation: icon-page-flip 0.5s ease-in-out 1;
  transform-box: fill-box;
  transform-origin: right center;
}

/* About Asyntis (shield) */
.sidebar-item:hover .sidebar-shield-icon {
  animation: icon-scale-pulse 0.4s ease-in-out 1;
}

/* Dark mode (moon) — subtiel 15deg draaien */
.sidebar-account-theme:hover .nav-icon-moon,
.sidebar-item:hover .nav-icon-moon {
  animation: icon-moon-drift 0.45s ease-in-out 1;
  transform-origin: center;
}

/* Light mode (sun) — stralen draaien subtiel */
.sidebar-account-theme:hover .nav-icon-sun .sun-rays,
.sidebar-item:hover .nav-icon-sun .sun-rays {
  animation: icon-sun-rays-spin 0.5s ease-in-out 1;
  transform-origin: 12px 12px;
}

/* Users (user-plus) — plus-teken springt omhoog */
.sidebar-item:hover .nav-icon-userplus .up-plus {
  animation: icon-float-up 0.35s ease-in-out 1;
}

/* Profile (user) — schaal pulse */
.sidebar-item:hover .nav-icon-user {
  animation: icon-scale-pulse 0.35s ease-in-out 1;
}

/* Upgrade plan (zap) — snelle flits */
.sidebar-item:hover .nav-icon-zap {
  animation: icon-zap-flash 0.5s ease-in-out 1;
}

/* Settings (gear) — subtiele 35deg draai en terug */
.sidebar-item:hover .nav-icon-settings {
  animation: icon-spin-nudge 0.45s ease-in-out 1;
  transform-origin: center;
}

/* Sign out — pijl schuift naar rechts */
.sidebar-item:hover .nav-icon-logout .lo-arrow {
  animation: icon-slide-right 0.35s ease-in-out 1;
}
@keyframes icon-slide-right {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* ── AIRepScore icon animations ─────────────────────────────────────────── */

/* AI Reputation (shield) — vinkje verschijnt kort in het schild */
.nav-icon-shield .shield-check {
  opacity: 0;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
}
@keyframes shield-check-draw {
  0%   { opacity: 0; stroke-dashoffset: 16; }
  25%  { opacity: 1; stroke-dashoffset: 0; }
  70%  { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
.sidebar-item:hover .nav-icon-shield .shield-check {
  animation: shield-check-draw 0.65s ease-out 1;
}

/* AI Brand Perception (eye) — knipoog: oog sluit even */
@keyframes icon-eye-wink {
  0%   { transform: scaleY(1); }
  28%  { transform: scaleY(0.06); }
  55%  { transform: scaleY(0.06); }
  100% { transform: scaleY(1); }
}
.sidebar-item:hover .nav-icon-eye {
  animation: icon-eye-wink 0.55s ease-in-out 1;
  transform-origin: 12px 12px;
  transform-box: fill-box;
}

/* AI Comparison (scale) — weegschaal raakt uit balans */
@keyframes icon-scale-tip {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-16deg); }
  65%  { transform: rotate(12deg); }
  100% { transform: rotate(0deg); }
}
.sidebar-item:hover .nav-icon-scale {
  animation: icon-scale-tip 0.65s ease-in-out 1;
  transform-origin: 12px 18px;
  transform-box: fill-box;
}

/* AI Recommendation (bubble) — drie puntjes stuiteren één voor één */
@keyframes sb-dot-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}
.sidebar-item:hover .nav-icon-bubble .sb-dot-1 {
  animation: sb-dot-bounce 0.35s ease-in-out 1;
  transform-box: fill-box; transform-origin: center;
}
.sidebar-item:hover .nav-icon-bubble .sb-dot-2 {
  animation: sb-dot-bounce 0.35s ease-in-out 1;
  animation-delay: 0.09s;
  transform-box: fill-box; transform-origin: center;
}
.sidebar-item:hover .nav-icon-bubble .sb-dot-3 {
  animation: sb-dot-bounce 0.35s ease-in-out 1;
  animation-delay: 0.18s;
  transform-box: fill-box; transform-origin: center;
}

/* Alerts (bell) — belletje rammelt */
@keyframes icon-bell-ring {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-16deg); }
  35%  { transform: rotate(13deg); }
  55%  { transform: rotate(-9deg); }
  75%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.sidebar-item:hover .nav-icon-bell {
  animation: icon-bell-ring 0.5s ease-in-out 1;
  transform-origin: 12px 4px;
  transform-box: fill-box;
}

/* Reports (filelist) — document schuift kort heen en weer */
.sidebar-item:hover .nav-icon-filelist {
  animation: icon-slide-lr 0.4s ease-in-out 1;
}

/* Insights Lab (inbox) — pijl daalt neer en verdwijnt in het bakje */
.nav-icon-inbox .il-arrow {
  opacity: 0;
}
.sidebar-item:hover .nav-icon-inbox .il-arrow {
  animation: inbox-arrow-drop 0.55s ease-in 1;
  animation-fill-mode: forwards;
}
@keyframes inbox-arrow-drop {
  0%   { opacity: 0; transform: translateY(-8px); }
  35%  { opacity: 1; transform: translateY(0); }
  60%  { opacity: 1; transform: translateY(3px); }
  100% { opacity: 0; transform: translateY(6px); }
}

/* ── User Management page ─────────────────────────────────────────────────── */
.um-page-section {
  padding: 1.25rem 1.5rem 2rem;
}

.um-page {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.um-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.um-page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.um-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.um-modal:not([hidden]) {
  display: flex;
}

.um-modal-panel {
  background: var(--bg-card, #fff);
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.um-modal-panel--wide {
  max-width: 560px;
}

.um-modal-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.um-modal-lead {
  margin: 0 0 18px;
  font-size: 0.88rem;
  color: var(--text-muted, #888);
  line-height: 1.5;
}

.um-modal-lead--tight {
  margin-bottom: 14px;
}

.um-pilot-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.um-pilot-step {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #9ca3af);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ui-bg-soft, #f3f4f6);
}

.um-pilot-step--active {
  color: var(--text, #111);
  background: rgba(13, 148, 136, 0.12);
}

.um-field {
  margin-bottom: 14px;
}

.um-field-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.um-field--grow {
  flex: 1 1 180px;
  min-width: 0;
}

.um-field--checkbox {
  flex: 0 0 auto;
  padding-bottom: 10px;
}

.um-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #555);
  margin-bottom: 6px;
}

.um-label-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted, #888);
}

.um-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  font-size: 0.9rem;
  outline: none;
  background: var(--bg, #fff);
  color: var(--text, #111);
  font-family: var(--font-sans);
}

.um-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text, #111);
  cursor: pointer;
  white-space: nowrap;
}

.um-modal-error {
  margin-bottom: 12px;
  font-size: 0.82rem;
  color: #dc2626;
}

.um-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 8px;
}

.um-pilot-done-msg {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text, #111);
}

.um-plan-stripe-warn {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
}

.um-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text, #111);
}

.um-invite-result[hidden] {
  display: none !important;
}

.um-table-host .um-loading,
.um-table-host .um-empty,
.um-table-host .um-error {
  font-size: 14px;
  color: var(--text-muted, #6b7280);
  margin: 0;
}

.um-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-card, #fff);
}

.um-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}

.um-table thead tr {
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--ui-bg-soft, #f9fafb);
}

.um-table th {
  text-align: left;
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}

.um-table tbody tr { border-bottom: 1px solid var(--border, #e5e7eb); }
.um-table tbody tr:last-child { border-bottom: none; }
.um-table tbody tr:hover { background: var(--ui-bg-soft, #f9fafb); }

.um-table td {
  padding: 14px;
  color: var(--text, #111);
  vertical-align: top;
}

.um-col-email { min-width: 200px; }
.um-col-name  { min-width: 120px; }
.um-col-role  { min-width: 200px; }
.um-col-status { min-width: 100px; white-space: nowrap; }
.um-col-date  { min-width: 130px; white-space: nowrap; }
.um-col-actions { min-width: 180px; }

.um-email {
  display: block;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
}

.um-date {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
}

.um-role-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.um-role-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #111);
}

.um-role-org {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted, #6b7280);
  max-width: 240px;
}

.um-role-select {
  display: block;
  width: 100%;
  min-width: 160px;
  max-width: 220px;
  min-height: 36px;
  padding: 8px 32px 8px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text, #111);
  background-color: var(--bg, #fff);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  cursor: pointer;
  -webkit-appearance: menulist;
  appearance: menulist;
}

.um-role-select:focus {
  outline: none;
  border-color: var(--asyntis-accent, #4cb9b9);
  box-shadow: 0 0 0 3px rgba(76, 185, 185, 0.25);
}

.um-role {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #111);
}

.um-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.um-badge-active   { background: #dcfce7; color: #15803d; }
.um-badge-inactive { background: var(--ui-secondary-bg, #f3f4f6); color: var(--text-muted, #6b7280); }
.um-badge-pending  { background: #fef9c3; color: #854d0e; }

.um-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.um-btn {
  min-height: 32px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: #fff;
  color: var(--text, #111);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.um-btn:hover { background: var(--ui-bg-soft, #f9fafb); }
.um-btn-danger { color: #dc2626; border-color: #fca5a5; }
.um-btn-danger:hover { background: #fef2f2; }
body.theme-dark .um-btn { background: var(--bg-card, #1e2330); color: var(--text, #e2e8f0); border-color: var(--border); }
body.theme-dark .um-btn:hover { background: var(--ui-bg-soft, #2d3748); }
body.theme-dark .um-table-scroll { background: var(--bg-card, #1e2330); border-color: var(--border); }
body.theme-dark .um-table thead tr { background: rgba(255,255,255,0.04); }
body.theme-dark .um-table tbody tr:hover { background: rgba(255,255,255,0.04); }
body.theme-dark .um-role-select {
  background-color: var(--bg-card, #1e2330);
  color: var(--text, #e2e8f0);
  border-color: var(--border);
}

.um-invite-result {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 8px;
}
.um-invite-ok  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.um-invite-email-warn {
  display: block;
  margin: 8px 0 0;
  font-size: 13px;
  color: #854d0e;
  line-height: 1.45;
}
.um-invite-err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.um-invite-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.um-invite-link-input {
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--ui-bg-soft, #f9fafb);
  color: var(--text, #111);
}

.um-loading, .um-empty { font-size: 13px; color: var(--text-muted, #6b7280); padding: 12px 0; }
.um-error { font-size: 13px; color: #dc2626; padding: 12px 0; }

/* ── Business Model Canvas — toolbar, tabs, edit, states ────────────── */

/* Outer scroll container for the whole BMC view */

.bmc-project-card {
  margin-bottom: 16px;
  max-width: 100%;
}

.bmc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bmc-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.bmc-toolbar-right {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.bmc-delete-btn {
  color: var(--ui-danger, #dc2626) !important;
}

/* Profile active / set-active button in toolbar */
.pap-status-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 2px;
}
.pap-activate-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pap-activate-btn.is-active {
  color: #0f172a;
  background: var(--teal-green-grad);
  border: 1px solid var(--teal-green-to);
  cursor: default;
}
.pap-activate-btn:not(.is-active) {
  color: #94a3b8;
  background: transparent;
  border: 1px solid #cbd5e1;
}
.pap-activate-btn:not(.is-active):hover {
  background: #f1f5f9;
  color: #475569;
  border-color: #94a3b8;
}
body.theme-dark .pap-activate-btn.is-active {
  color: #0f172a;
  background: var(--teal-green-grad);
  border-color: var(--teal-green-to);
}
body.theme-dark .pap-activate-btn:not(.is-active) {
  color: #64748b;
  border-color: rgba(255,255,255,0.15);
}
body.theme-dark .pap-activate-btn:not(.is-active):hover {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
}

/* Actor view version activate button (mirrors pap-activate-btn) */
.av-activate-btn {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.av-activate-btn.is-active {
  color: #0f172a;
  background: var(--teal-green-grad);
  border: 1px solid var(--teal-green-to);
  cursor: default;
}
.av-activate-btn:not(.is-active) {
  color: #94a3b8;
  background: transparent;
  border: 1px solid #cbd5e1;
}
.av-activate-btn:not(.is-active):hover {
  background: #f1f5f9;
  color: #475569;
  border-color: #94a3b8;
}
body.theme-dark .av-activate-btn.is-active {
  color: #0f172a;
  background: var(--teal-green-grad);
  border-color: var(--teal-green-to);
}
body.theme-dark .av-activate-btn:not(.is-active) {
  color: #64748b;
  border-color: rgba(255,255,255,0.15);
}
body.theme-dark .av-activate-btn:not(.is-active):hover {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
}

.bmc-state-msg {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  padding: 24px 0;
}

.bmc-empty-cell {
  font-size: 0.8rem;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
  margin: 6px 0 0;
}

.bmc-edit-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-secondary, #374151);
  font-family: inherit;
  padding: 0;
  margin-top: 4px;
}

.bmc-edit-textarea:focus {
  outline: none;
}

body.theme-dark .bmc-edit-textarea {
  color: var(--text-secondary, #d1d5db);
}

/* Active tab style (reuse sl-tab-active) */
.bmc-tabs .sl-set-tab.sl-tab-active {
  background: var(--teal-green-grad);
  color: #111;
  border-color: var(--asyntis-accent);
}

.bmc-header {
  margin-bottom: 20px;
}

.bmc-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0 0 4px;
}

.bmc-subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}

/* Override view-section default padding — BMC handles its own */
#view-consultancy.view-section {
  padding: 0;
}

/* Cell base */

.bmc-for-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin: 8px 0 2px;
}

/* ── Grid placement ────────────────────────────────────────────────── */

/* Outer columns: standalone cells */

/* Middle column wrappers — each is one grid cell containing stacked cells */
.bmc-col-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-row: 1;
}
.bmc-col-activities { grid-column: 2; }
.bmc-col-vp         { grid-column: 3; }
.bmc-col-rel        { grid-column: 4; }

/* Cells inside a stack share height equally */

/* Value Proposition gets 2× space, Differentiation gets 1× */

/* Value proposition: accent left border */

/* Dark mode */

/* Responsive: stack on small screens */

/* ── Cost Dashboard ─────────────────────────────────────────────────────────── */
.cd-card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted, #64748b);
  margin-bottom: 4px;
}

.cd-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #1e293b);
  line-height: 1.1;
}

body.theme-dark .cd-card-value {
  color: var(--text-primary, #f1f5f9);
}

/* ── Substitutes panel list ──────────────────────────────────────── */
.mt-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg-card, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
  margin-bottom: 6px;
}
body.theme-dark .mt-sub-item {
  background: #1e293b;
  border-color: #334155;
}
.mt-sub-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #0f172a);
  flex: 1;
  margin-right: 10px;
}
.mt-sub-link {
  font-size: 12px;
  color: var(--brand, #2563eb);
  text-decoration: none;
  white-space: nowrap;
}
.mt-sub-link:hover { text-decoration: underline; }

/* ── Substitute Actor View — full-width section cards ───────────── */
.sub-section-full {
  grid-column: 1 / -1;
}

/* ── Strategic Snapshot context (customer lens / bypass logic) ───── */
.sub-snap-context {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--bg-subtle, #f8fafc);
  border-left: 3px solid var(--brand-primary, #2bbfa6);
  border-radius: 6px;
}
body.theme-dark .sub-snap-context {
  background: #1e293b;
  border-left-color: var(--brand-primary, #2bbfa6);
}
.sub-snap-context-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.45;
}
.sub-snap-context-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #94a3b8);
  flex-shrink: 0;
  min-width: 110px;
}
.sub-snap-context-value {
  color: var(--text-primary, #1e293b);
  flex: 1;
}
body.theme-dark .sub-snap-context-value { color: #e2e8f0; }

/* ── Strategic Snapshot grid ─────────────────────────────────────── */
.sub-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .sub-snapshot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sub-snapshot-grid { grid-template-columns: 1fr; }
}
.sub-snap-cell {
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 8px;
  padding: 12px 14px;
}
body.theme-dark .sub-snap-cell {
  background: #1e293b;
  border-color: #334155;
}
.sub-snap-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 8px;
}
.sub-snap-threat { display: flex; flex-direction: column; gap: 6px; }
.sub-snap-reason { font-size: 12px; color: var(--text-secondary, #475569); margin: 0; }

/* Threat level badges */
.sub-threat-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  width: fit-content;
}
.sub-badge-low    { background: #dcfce7; color: #166534; }
.sub-badge-medium { background: #fef9c3; color: #854d0e; }
.sub-badge-high   { background: #fee2e2; color: #991b1b; }
body.theme-dark .sub-badge-low    { background: #14532d; color: #86efac; }
body.theme-dark .sub-badge-medium { background: #713f12; color: #fde68a; }
body.theme-dark .sub-badge-high   { background: #7f1d1d; color: #fca5a5; }

/* ── Competition Logic table ─────────────────────────────────────── */
.sub-comp-table { width: 100%; border-collapse: collapse; }
.sub-comp-header {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid var(--border-light, #e2e8f0);
  margin-bottom: 4px;
}
.sub-comp-row {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 8px;
  padding: 10px 10px;
  border-bottom: 1px solid var(--border-light, #e2e8f0);
  align-items: start;
}
.sub-comp-row:last-child { border-bottom: none; }
.sub-comp-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  padding-top: 2px;
}
body.theme-dark .sub-comp-name { color: var(--text-primary, #f1f5f9); }
.sub-comp-wins .av-field-list,
.sub-comp-loses .av-field-list { list-style: none; padding-left: 0; }
.sub-comp-wins .av-field-list li,
.sub-comp-loses .av-field-list li { display: flex; gap: 6px; align-items: baseline; }
.sub-comp-wins .av-field-list li::before  { content: "+"; color: #16a34a; font-weight: 700; flex-shrink: 0; }
.sub-comp-loses .av-field-list li::before { content: "−"; color: #dc2626; font-weight: 700; flex-shrink: 0; }

/* ── Strategic Implications — highlighted ────────────────────────── */
.sub-section-implications {
  border-left: 3px solid #a3e635;
}
.sub-section-implications h2 { color: var(--text-primary, #0f172a); }
.sub-section-implications .av-field-list li {
  font-weight: 500;
  color: var(--text-primary, #0f172a);
}

/* ── Metadata footer ─────────────────────────────────────────────── */
.sub-section-meta {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.sub-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  padding: 4px 0;
}
.sub-metadata span { display: flex; align-items: center; gap: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FIVE FORCES — Strategic Intelligence Tab
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────────────── */

/* ── Empty state ─────────────────────────────────────────────────────────── */

/* ── Ecosystem Diagram Grid ──────────────────────────────────────────────── */

/* ── Diagram text cells (corners / sides) ───────────────────────────────── */

/* ── Force boxes ─────────────────────────────────────────────────────────── */

/* ── Box header ──────────────────────────────────────────────────────────── */

/* ── Project center ──────────────────────────────────────────────────────── */

/* ── Competition description inside center box ───────────────────────────── */

/* ── Actor chips ──────────────────────────────────────────────────────────── */

/* Profile indicator dot inside actor chips */

/* ── Strength badge ──────────────────────────────────────────────────────── */

/* ── Force Cards ─────────────────────────────────────────────────────────── */

/* ── Card header ──────────────────────────────────────────────────────────── */

/* ── Snapshot block ──────────────────────────────────────────────────────── */

/* ── Card sections ───────────────────────────────────────────────────────── */

/* ── Lists ───────────────────────────────────────────────────────────────── */

/* ── Card footer ─────────────────────────────────────────────────────────── */

/* ── Responsive: stack on narrow viewport ────────────────────────────────── */

/* ============================================================================
   INSIDE-OUT INSIGHTS IMPORT — module styling
   Reuses existing .card token, follows the lib-subtab spacing rhythm.
   ============================================================================ */
.io-page { display: flex; flex-direction: column; gap: 18px; padding: 4px 0 32px; }

.io-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.io-title    { font-size: 22px; font-weight: 600; margin: 0 0 4px; color: var(--text, #111); }
.io-subtitle { margin: 0; color: var(--text-muted, #6b7280); font-size: 14px; line-height: 1.5; max-width: 880px; }
.io-project-badge {
  background: var(--asyntis-line-soft, #ecfccb);
  color: var(--text, #111);
  border: 1px solid var(--asyntis-line, #a3e635);
  font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}

.io-card { padding: 20px 22px; }
.io-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.io-card-title { font-size: 16px; font-weight: 600; margin: 0; color: var(--text, #111); }

/* ── Mode toggle ─────────────────────────────────────────────────────────── */
.io-mode-toggle {
  display: inline-flex; gap: 4px;
  background: var(--bg-subtle, #f4f4f5);
  border-radius: 8px; padding: 3px;
}
.io-mode-btn {
  background: transparent; border: 0; padding: 5px 12px;
  font-size: 13px; font-weight: 500; color: var(--text-muted, #6b7280);
  border-radius: 6px; cursor: pointer; transition: all .12s ease;
}
.io-mode-btn:hover { color: var(--text, #111); }
.io-mode-btn.active { background: var(--bg, #fff); color: var(--text, #111); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ── Form ────────────────────────────────────────────────────────────────── */
.io-form { display: flex; flex-direction: column; gap: 14px; }
.io-row { display: flex; gap: 12px; flex-wrap: wrap; }
.io-field { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; }
.io-field-narrow { flex: 0 0 220px; }
.io-label {
  font-size: 12px; font-weight: 500;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase; letter-spacing: .04em;
}
.io-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted, #9ca3af); font-size: 11px; }
.io-hint-block { margin: 6px 0 0; }
.io-input, .io-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
  padding: 8px 10px; font: inherit; font-size: 14px;
  background: var(--bg, #fff); color: var(--text, #111);
}
.io-input:focus, .io-textarea:focus {
  outline: none; border-color: var(--asyntis-line, #a3e635);
  box-shadow: 0 0 0 3px var(--asyntis-line-soft, rgba(163,230,53,.25));
}
.io-textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
.io-file { padding: 6px; }
.io-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.io-status { font-size: 13px; color: var(--text-muted, #6b7280); }
.io-status--loading { color: var(--text-muted, #6b7280); }
.io-status--ok      { color: #16a34a; }
.io-status--error   { color: #dc2626; }
.io-status--warn    { color: #d97706; }

.io-link-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--asyntis-line-strong, #65a30d);
  padding: 4px 8px; border-radius: 4px;
}
.io-link-btn:hover { background: var(--bg-subtle, #f4f4f5); }
.io-link-btn-danger { color: #dc2626; }

/* ── Document list ───────────────────────────────────────────────────────── */
.io-doc-list { display: flex; flex-direction: column; gap: 8px; }
.io-empty {
  margin: 0; padding: 14px;
  background: var(--bg-subtle, #f9fafb);
  border: 1px dashed var(--border, #e5e7eb); border-radius: 6px;
  font-size: 13px; color: var(--text-muted, #6b7280);
}
.io-empty--error { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.io-doc-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; padding: 12px 14px; background: var(--bg, #fff);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.io-doc-row:hover { border-color: var(--asyntis-line, #a3e635); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.io-doc-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.io-doc-title { font-size: 14px; font-weight: 500; color: var(--text, #111); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.io-doc-meta  { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.io-doc-when  { font-size: 12px; color: var(--text-muted, #9ca3af); margin-left: auto; }
.io-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--asyntis-line-soft, #ecfccb);
  color: var(--text, #111);
  border: 1px solid var(--asyntis-line, #a3e635);
}
.io-chip-mute { background: var(--bg-subtle, #f4f4f5); border-color: var(--border, #e5e7eb); color: var(--text-muted, #6b7280); }
.io-chip-ok   { background: #dcfce7; border-color: #86efac; color: #166534; }
.io-chip-warn { background: #fef3c7; border-color: #fcd34d; color: #92400e; }

/* ── Review panel ────────────────────────────────────────────────────────── */

/* Structured strategic blocks: 2-col on wide, 1-col on narrow */
.io-structured-blocks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px;
}
.io-block {
  background: var(--bg-subtle, #fafafa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; padding: 14px 16px;
}
.io-block-title {
  font-size: 13px; font-weight: 600; margin: 0 0 10px;
  color: var(--text, #111);
  text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 6px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.io-block-fields { display: flex; flex-direction: column; gap: 12px; }
.io-block-field-label {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted, #6b7280); margin-bottom: 4px;
}
.io-block-list {
  margin: 0; padding-left: 18px;
  font-size: 13px; line-height: 1.55; color: var(--text, #111);
}
.io-block-list li { margin: 2px 0; }
.io-block-field-empty .io-block-field-empty-text {
  font-size: 13px; color: var(--text-muted, #c4c4c4); font-style: italic;
}

/* Claims list */
.io-claims-list { display: flex; flex-direction: column; gap: 10px; }
.io-claim-row {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; padding: 10px 12px; background: var(--bg, #fff);
}
.io-claim-text  { font-size: 14px; line-height: 1.5; color: var(--text, #111); }
.io-claim-meta  { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.io-claim-quote {
  margin-top: 8px; padding: 8px 10px;
  background: var(--bg-subtle, #fafafa);
  border-left: 3px solid var(--asyntis-line, #a3e635);
  font-size: 12px; color: var(--text-muted, #6b7280); line-height: 1.5; border-radius: 0 4px 4px 0;
}

/* Source preview */
.io-source-toolbar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 8px;
}
.io-source-status { font-size: 12px; color: var(--text-muted, #6b7280); }
.io-source-preview {
  background: var(--bg-subtle, #fafafa); border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; padding: 14px;
  font-size: 12px; line-height: 1.5; color: var(--text, #111);
  max-height: 600px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}

/* ── Tab counts (small grey count next to tab label) ─────────────────────── */
.io-tab-count { font-size: 11px; color: var(--text-muted, #9ca3af); margin-left: 4px; font-weight: 400; }

/* ── Page provenance chips (used inside structured insights + claims) ────── */
.io-page-chips { display: inline-flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; vertical-align: middle; }
.io-page-chip {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 500;
  padding: 1px 6px; border-radius: 4px;
  background: var(--asyntis-line-soft, #ecfccb);
  color: var(--asyntis-line-strong, #4d7c0f);
  border: 1px solid var(--asyntis-line, #a3e635);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.io-page-chip-more { background: var(--bg-subtle, #f4f4f5); border-color: var(--border, #e5e7eb); color: var(--text-muted, #6b7280); }
.io-block-list li { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; padding-left: 0; }
.io-block-list { list-style: none; padding-left: 0; }
.io-block-item-text { flex: 1 1 auto; min-width: 60%; }
.io-chip-type { background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.30); color: #1d4ed8; }

/* ── Entities tab ────────────────────────────────────────────────────────── */
.io-entities-list { display: flex; flex-direction: column; gap: 18px; }
.io-entity-group-title {
  font-size: 12px; font-weight: 600; margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text, #111);
  padding-bottom: 6px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.io-entity-group-count { color: var(--text-muted, #9ca3af); font-weight: 400; }
.io-entity-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.io-entity-row {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; padding: 8px 10px; background: var(--bg, #fff);
}
.io-entity-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.io-entity-name { font-size: 13px; font-weight: 500; color: var(--text, #111); }
.io-entity-snippet { font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 4px; line-height: 1.45; }

/* ── Chunks tab ──────────────────────────────────────────────────────────── */
.io-chunks-list { display: flex; flex-direction: column; gap: 8px; max-height: 700px; overflow-y: auto; }
.io-chunk-row {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; padding: 8px 10px; background: var(--bg, #fff);
}
.io-chunk-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.io-chunk-text {
  font-size: 12px; line-height: 1.45; color: var(--text, #111);
  white-space: pre-wrap; word-break: break-word;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */
.dark-mode .io-block,
body.dark-mode .io-block,
[data-theme="dark"] .io-block {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
}
.dark-mode .io-doc-row,
body.dark-mode .io-doc-row,
[data-theme="dark"] .io-doc-row {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
}
.dark-mode .io-input,
.dark-mode .io-textarea,
body.dark-mode .io-input,
body.dark-mode .io-textarea {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: #f3f4f6;
}
.dark-mode .io-empty,
body.dark-mode .io-empty {
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.10);
}
.dark-mode .io-claim-row,
body.dark-mode .io-claim-row {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
}
.dark-mode .io-source-preview,
body.dark-mode .io-source-preview {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
  color: #f3f4f6;
}
.dark-mode .io-mode-toggle,
body.dark-mode .io-mode-toggle {
  background: rgba(255,255,255,.05);
}
.dark-mode .io-mode-btn.active,
body.dark-mode .io-mode-btn.active {
  background: rgba(255,255,255,.10);
  color: #f3f4f6;
}
.dark-mode .io-entity-row,
.dark-mode .io-chunk-row,
body.dark-mode .io-entity-row,
body.dark-mode .io-chunk-row {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
}
.dark-mode .io-page-chip,
body.dark-mode .io-page-chip {
  background: rgba(163, 230, 53, 0.10);
  color: #d9f99d;
  border-color: rgba(163, 230, 53, 0.25);
}
.dark-mode .io-page-chip-more,
body.dark-mode .io-page-chip-more {
  background: rgba(255,255,255,.05);
  color: #9ca3af;
  border-color: rgba(255,255,255,.10);
}
.dark-mode .io-chip-type,
body.dark-mode .io-chip-type {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.40);
}

/* ============================================================================
   INSIDE-OUT — Sources-style split workspace
   Mirrors .src-workspace / .src-list-pane / .src-detail-pane.
   ============================================================================ */

.io-list-pane .lib-table-wrap { max-height: calc(100vh - 320px); overflow: auto; }

.lib-import-panel {
  padding: 18px 20px 20px;
  border: 1px solid var(--asyntis-line, #a3e635);
  background: var(--asyntis-line-soft, #fafff0);
}

/* ── Document-list table rows ────────────────────────────────────────────── */
.io-table-row { cursor: pointer; }
.io-table-row:hover td { background: var(--bg-subtle, #fafafa); }

.io-cell-name { padding-right: 8px; }
.io-cell-title {
  font-size: 13px; font-weight: 500; color: var(--text, #111);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.io-cell-snippet {
  font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 2px;
  line-height: 1.4; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.io-cell-num  { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted, #6b7280); }
.io-cell-date { font-size: 12px; color: var(--text-muted, #6b7280); white-space: nowrap; }
.io-empty-row { text-align: center; padding: 24px; color: var(--text-muted, #9ca3af); font-size: 13px; font-style: italic; }

/* ── Document Kind badges (used in table + header + hero) ────────────────── */
.io-kind-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid transparent;
}
.io-kind-strategy     { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.io-kind-capabilities { background: #fae8ff; color: #6b21a8; border-color: #d8b4fe; }
.io-kind-interview    { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.io-kind-external     { background: #fce7f3; color: #9d174d; border-color: #f9a8d4; }
.io-kind-other        { background: var(--bg-subtle, #f4f4f5); color: var(--text-muted, #6b7280); border-color: var(--border, #e5e7eb); }

/* ── Detail pane header — mirrors .src-dp-* ──────────────────────────────── */
.io-detail-pane .io-dp-header { padding-bottom: 12px; }
.io-dp-title {
  font-size: 18px; font-weight: 600; line-height: 1.3;
  color: var(--text, #111); margin-bottom: 4px;
}
.io-dp-filename-sub {
  font-size: 12px; color: var(--text-muted, #9ca3af);
  margin-bottom: 6px; word-break: break-all;
}
.io-dp-org {
  font-size: 13px; color: var(--text-muted, #6b7280); margin-bottom: 10px;
}
.io-dp-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* Kind hero — mirrors .src-dp-authority-hero geometry, but neutral colors per kind */
.io-dp-kind-hero {
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--bg-subtle, #fafafa);
  display: flex; flex-direction: column; gap: 4px;
}
.io-dp-kind-hero.io-kind-strategy     { background: linear-gradient(135deg, #dbeafe, #eff6ff); border-color: #93c5fd; }
.io-dp-kind-hero.io-kind-capabilities { background: linear-gradient(135deg, #fae8ff, #fdf4ff); border-color: #d8b4fe; }
.io-dp-kind-hero.io-kind-interview    { background: linear-gradient(135deg, #fef3c7, #fffbeb); border-color: #fcd34d; }
.io-dp-kind-hero.io-kind-external     { background: linear-gradient(135deg, #fce7f3, #fdf2f8); border-color: #f9a8d4; }
.io-dp-kind-hero.io-kind-other        { background: var(--bg-subtle, #f4f4f5); border-color: var(--border, #e5e7eb); }
.io-dp-kind-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted, #6b7280);
}
.io-dp-kind-value {
  font-size: 22px; font-weight: 600; color: var(--text, #111); line-height: 1.1;
}
.io-dp-kind-desc { font-size: 12px; color: var(--text-muted, #6b7280); }

/* Metric cards row */
.io-dp-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 18px;
}

/* Summary text */
.io-dp-summary {
  font-size: 14px; line-height: 1.6; color: var(--text, #111); margin: 0;
}

/* Theme chips below classification */
.io-dp-themes { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Tabs section inside detail panel */
.io-dp-tabs-section { padding-top: 16px; }

.io-dp-tabs-section .io-structured-blocks {
  grid-template-columns: 1fr; /* single column inside detail pane (narrower) */
  gap: 12px;
}
@media (min-width: 1280px) {
  .io-dp-tabs-section .io-structured-blocks {
    grid-template-columns: repeat(2, 1fr);
  }
}

.io-dp-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border, #e5e7eb);
}

/* Dark mode overlay */
.dark-mode .io-dp-kind-hero,
body.dark-mode .io-dp-kind-hero {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.dark-mode .io-dp-kind-hero.io-kind-strategy,
body.dark-mode .io-dp-kind-hero.io-kind-strategy { background: rgba(59,130,246,.10); }
.dark-mode .io-dp-kind-hero.io-kind-capabilities,
body.dark-mode .io-dp-kind-hero.io-kind-capabilities { background: rgba(168,85,247,.10); }
.dark-mode .io-dp-kind-hero.io-kind-interview,
body.dark-mode .io-dp-kind-hero.io-kind-interview { background: rgba(245,158,11,.10); }
.dark-mode .io-dp-kind-hero.io-kind-external,
body.dark-mode .io-dp-kind-hero.io-kind-external { background: rgba(236,72,153,.10); }

.dark-mode .lib-import-panel,
body.dark-mode .lib-import-panel {
  background: rgba(163, 230, 53, 0.06);
  border-color: rgba(163, 230, 53, 0.30);
}

@media (max-width: 760px) {
  .io-field-narrow { flex: 1 1 100%; }
  .io-structured-blocks { grid-template-columns: 1fr; }
  .io-doc-when { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Site Crawler — fetch mode badges & delta view
═══════════════════════════════════════════════════════════ */

/* Mode badge in sources table */

/* Delta row badges (NEW / CHANGED) */

/* Clickable item row */
.sc-item-row { cursor: pointer; }
.sc-item-row:hover td { background: var(--color-surface-2, #f9fafb); }

/* Detail expansion row */
.sc-item-detail td { padding: 0 !important; }

/* Intel panel inside detail row */

/* Change summary bar (amber) */
.sc-change-summary {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #92400e;
  margin-bottom: 10px;
}
.sc-change-icon { font-size: 1rem; flex-shrink: 0; }

/* Neutral change summary (no diff) */
.sc-change-summary-neutral {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}

/* Intel grid — responsive card layout */

/* Individual intel card */

/* ── Strategic signals panel ───────────────────────────────────────────── */
.sc-signals-panel {
  padding: 10px 14px 14px;
}
.sc-signals-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sc-page-type-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: #e0e7ff;
  color: #4338ca;
}
.sc-page-type-pill {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: #e0e7ff;
  color: #4338ca;
  margin-right: 4px;
  vertical-align: middle;
}
.sc-signals-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
}
.sc-signals-count {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-text, #374151);
}
.sc-signal-card { min-width: 180px; }
.sc-sig-count-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 0 5px;
  margin-left: 4px;
  color: var(--color-text-muted, #6b7280);
  vertical-align: middle;
}
.sc-sig-list { margin: 0; padding: 0; list-style: none; }
.sc-sig-item {
  padding: 5px 0;
  border-bottom: 1px solid var(--color-border, #f0f0f0);
  font-size: 0.8rem;
  line-height: 1.45;
}
.sc-sig-item:last-child { border-bottom: none; }
.sc-sig-text { color: var(--color-text, #111827); }
.sc-sig-stability {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}
.sc-sig-stability-emerging   { background: #dcfce7; color: #166534; }
.sc-sig-stability-experimental { background: #fef9c3; color: #854d0e; }
.sc-sig-stability-temporary  { background: #fee2e2; color: #991b1b; }
.sc-sig-stability-uncertain  { background: #f3f4f6; color: #6b7280; }
.sc-sig-quote {
  font-size: 0.73rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  margin-top: 3px;
  padding-left: 6px;
  border-left: 2px solid #e5e7eb;
}
.sc-signal-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4338ca;
  background: #e0e7ff;
  padding: 1px 6px;
  border-radius: 3px;
}

body.theme-dark .sc-page-type-label,
body.theme-dark .sc-page-type-pill { background: #1e3a5f; color: #93c5fd; }
body.theme-dark .sc-sig-count-badge { background: #1f2937; border-color: #374151; }
body.theme-dark .sc-sig-quote { border-left-color: #374151; }
body.theme-dark .sc-signal-count { background: #1e3a5f; color: #93c5fd; }

@media (prefers-color-scheme: dark) {
  
  
  
  
  
  .sc-change-summary { background: #451a03; border-color: #92400e; color: #fcd34d; }
  
  
}

/* ── Scanner redesign: source rows ─────────────────────────────────────── */

/* Inactive source: muted appearance */

/* ── Toggle switch ─────────────────────────────────────────────────────── */

/* ── Scanner source detail header ──────────────────────────────────────── */

/* ── Source detail stats pills ─────────────────────────────────────────── */

.sc-stat-item {
  font-size: 0.8rem;
  color: var(--color-text, #374151);
  white-space: nowrap;
}
.sc-stat-new strong { color: #15803d; }
.sc-stat-muted { color: var(--text-muted, #6b7280); font-size: 0.76rem; }

/* ── Item rows in source detail ────────────────────────────────────────── */
.sc-item-page-cell {
  max-width: 0;
  overflow: hidden;
  text-align: left;
}
.sc-item-title-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-align: left;
  overflow: hidden;
}
.sc-item-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text, #111827);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.sc-item-url {
  font-size: 0.74rem;
  color: var(--text-muted, #9ca3af);
  margin-top: 2px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-item-row-open { background: var(--color-surface-2, #f9fafb); }
.sc-item-row-open td { border-bottom: none !important; }

/* Ensure intel panel text is left-aligned */

/* Source detail panel fills the right pane */

/* Fixed layout so page cell ellipsis works */

/* Dark mode additions for scanner redesign */

body.theme-dark .sc-item-title { color: #f3f4f6; }
body.theme-dark .sc-item-url { color: #6b7280; }
body.theme-dark .sc-stat-item { color: #d1d5db; }

/* Settings — AI Provider option cards */
.settings-llm-option:hover {
  border-color: var(--primary) !important;
  background: var(--primary-subtle, rgba(99,102,241,0.04)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AIRepScore — AI Reputation Page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
/* ── AI Reputation version tabs ─────────────────────────────────────── */
/* ── Sticky model sub-tabs bar (shared by AI Reputation + Brand Perception) ── */
.air-module-tabs-bar {
  position: sticky;
  top: 89px;          /* fallback — JS overrides with measured ctx-bar + nav-tabs height */
  z-index: 18;
  background: #fff;
  width: 100%;
  border-bottom: 2px solid var(--border, #e0e4ea);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.air-module-tabs-bar .air-rep-tabs {
  padding: 6px 20px;
  border-bottom: none;
  background: transparent;
}

.air-rep-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 28px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-wrap: nowrap;
  background: var(--bg-card);
}

.air-rep-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.air-rep-tab:hover {
  background: var(--accent-light);
  color: var(--text);
  border-color: var(--accent);
}

.air-rep-tab--active {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.air-rep-tab--error {
  color: #b91c1c;
  border-color: #fca5a5;
  background: #fff1f1;
}
.air-rep-tab--error.air-rep-tab--active {
  background: #fee2e2;
  border-color: #ef4444;
}

/* Error state inside model panel */
.air-model-error {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  background: #fff8f8;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  margin: 16px 0;
}
.air-model-error-icon {
  font-size: 28px;
  color: #ef4444;
  line-height: 1;
  flex-shrink: 0;
}
.air-model-error-body strong {
  display: block;
  font-size: 15px;
  color: #b91c1c;
  margin-bottom: 6px;
}
.air-model-error-body p {
  margin: 0 0 8px;
  color: #374151;
  font-size: 14px;
}
.air-model-error-body details {
  margin-top: 8px;
}
.air-model-error-body summary {
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
}
.air-model-error-body pre {
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 8px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 6px;
}

.air-rep-tab--avg {
  margin-left: 8px;
  border-style: dashed;
}

.air-rep-tab--avg.air-rep-tab--active {
  background: rgba(var(--teal-green-rgb), 0.12);
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
}

/* ── AIRepScore System Assessment section ───────────────────────────────── */

.air-system-assessment {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 20px 24px 16px;
  margin-bottom: 0;
}

.air-sys-header {
  margin-bottom: 16px;
}

.air-sys-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1e293b);
  letter-spacing: .01em;
}

.air-sys-subtitle {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

.air-sys-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.air-sys-card {
  background: var(--bg, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 14px 16px;
}

.air-sys-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 8px;
}

.air-sys-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: none;
  background: rgba(var(--teal-green-rgb), 0.08);
  color: var(--accent);
  border: 1px solid rgba(var(--teal-green-rgb), 0.2);
}

.air-sys-error-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.air-sys-basis {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-top: 4px;
}

.air-sys-score {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.air-sys-score-denom {
  font-size: 16px;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 2px;
}

.air-sys-rating {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}

/* ── Cross-model comparison table ────────────────────────────────────────── */

.air-model-compare-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.air-compare-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 8px;
}

.air-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.air-compare-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  padding: 4px 8px 6px 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.air-compare-table td {
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--border-subtle, #f1f5f9);
  color: var(--text, #1e293b);
}

/* ── Session bar ─────────────────────────────────────────────────────────── */

.air-session-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0 12px;
}

.air-session-bar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.air-session-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}

.air-session-btn:hover {
  background: var(--bg-hover, #f1f5f9);
  border-color: var(--primary, #6366f1);
  color: var(--text, #1e293b);
}

.air-session-btn--active {
  background: rgba(var(--teal-green-rgb), 0.1);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.air-session-count {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: .02em;
}

/* ── Synthesis section ───────────────────────────────────────────────────── */

.air-synthesis {
  margin-top: 16px;
}

.air-synthesis-inner {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 20px 24px;
}

.air-synthesis-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #1e293b);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.air-synthesis-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary, #6366f1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  letter-spacing: .03em;
  text-transform: none;
}

.air-synthesis-narrative {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text, #1e293b);
  margin: 0 0 14px;
}

.air-synthesis-divergence {
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  line-height: 1.55;
  margin: 0 0 14px;
}

.air-synthesis-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.air-synthesis-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 6px;
}

.air-synthesis-col-title--strength { color: #2d8a4e; }
.air-synthesis-col-title--gap      { color: #c0392b; }

.air-synthesis-list {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  line-height: 1.6;
}

.air-synthesis-list--ordered {
  padding-left: 18px;
  color: var(--text, #1e293b);
}

.air-synthesis-recs {
  padding-top: 14px;
  border-top: 1px solid var(--border, #e2e8f0);
}

.air-synthesis-error {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  padding: 12px 0;
}

/* ── Model panel ─────────────────────────────────────────────────────────── */

.air-model-panel-header {
  padding: 14px 4px 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  margin-bottom: 4px;
}

.air-model-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1e293b);
  margin-bottom: 4px;
}

.air-model-panel-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
}

.air-model-panel-meta span { white-space: nowrap; }
.air-model-panel-meta strong { color: var(--text-secondary, #64748b); }

/* Dark mode overrides */
body.theme-dark .air-system-assessment {
  background: #1c2029;
  border-color: #2d3445;
}
body.theme-dark .air-sys-card {
  background: #242938;
  border-color: #2d3445;
}
body.theme-dark .air-synthesis-inner {
  background: #1c2029;
  border-color: #2d3445;
}
body.theme-dark .air-rep-tabs {
  background: #1c2029;
  border-bottom-color: #2d3445;
}
body.theme-dark .air-rep-tab {
  border-color: #2d3445;
  color: #7a8499;
}
body.theme-dark .air-rep-tab:hover {
  background: rgba(255,255,255,0.05);
  color: #e6e8ee;
  border-color: #3d4a60;
}
body.theme-dark .air-rep-tab--active {
  background: rgba(var(--teal-green-rgb),0.15);
  color: #4ecdc4;
  border-color: var(--teal-green);
}
body.theme-dark .air-rep-tab--error {
  color: #fca5a5;
  border-color: #7f1d1d;
  background: #2a1515;
}
body.theme-dark .air-model-error {
  background: #1f1515;
  border-color: #7f1d1d;
}
body.theme-dark .air-model-error-body strong { color: #fca5a5; }
body.theme-dark .air-model-error-body p { color: #d1d5db; }
body.theme-dark .air-model-error-body pre { background: #111827; color: #9ca3af; }
body.theme-dark .air-session-btn {
  background: #1c2029;
  border-color: #2d3445;
  color: #7a8499;
}
body.theme-dark .air-session-btn--active {
  background: rgba(var(--teal-green-rgb),0.12);
  border-color: var(--teal-green);
  color: #4ecdc4;
}
body.theme-dark .air-model-compare-wrap {
  border-top-color: #2d3445;
}
body.theme-dark .air-compare-table th,
body.theme-dark .air-compare-table td {
  border-color: #2d3445;
}
body.theme-dark .air-synthesis-recs {
  border-top-color: #2d3445;
}

/* ─────────────────────────────────────────────────────────────────────── */

.air-rep-page {
  display: flex;
  flex-direction: column;
  padding: 0 0 64px;
  min-height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.air-rep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.air-rep-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
}

.air-rep-meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.air-rep-meta-value {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}

.air-rep-meta-sep {
  color: var(--border);
  margin: 0 2px;
}

.air-rep-run-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Accent CTA — high-intent actions (orange–purple); default .btn stays teal — see docs/DESIGN_SYSTEM.md */
.air-rep-run-btn,
#scanner-run-btn,
#cmp-settings-btn.cmp-settings-btn--accent,
#bp-empty-run-scan-btn,
#cmp-empty-configure-peers-btn,
#rec-empty-scenario-builder-btn,
.fw-overview-empty-btn[data-fw-run-scan],
.fw-overview-empty-btn[data-fw-configure-cmp-peers],
.fw-overview-empty-btn[data-fw-open-rec-builder],
#view-projects .proj-block-save-btn,
#proj-peers-save-btn,
#proj-new-btn,
#proj-team-access-save,
#rq-add-btn,
#cmp-summary-refresh-btn {
  background: var(--accent-orange-purple-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.air-rep-run-btn:hover:not(:disabled),
#scanner-run-btn:hover:not(:disabled),
#cmp-settings-btn.cmp-settings-btn--accent:hover:not(:disabled),
#cmp-summary-refresh-btn:hover:not(:disabled),
#bp-empty-run-scan-btn:hover:not(:disabled),
#cmp-empty-configure-peers-btn:hover:not(:disabled),
#rec-empty-scenario-builder-btn:hover:not(:disabled),
.fw-overview-empty-btn[data-fw-run-scan]:hover,
.fw-overview-empty-btn[data-fw-configure-cmp-peers]:hover,
.fw-overview-empty-btn[data-fw-open-rec-builder]:hover,
#view-projects .proj-block-save-btn:hover:not(:disabled),
#proj-peers-save-btn:hover:not(:disabled),
#proj-new-btn:hover:not(:disabled),
#proj-team-access-save:hover:not(:disabled),
#rq-add-btn:hover:not(:disabled) {
  background: var(--accent-orange-purple-grad) !important;
  filter: brightness(1.06);
}

#proj-new-btn.proj-new-btn--at-limit {
  opacity: 0.72;
}

.proj-peer-create-btn--disabled {
  opacity: 0.72;
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.air-rep-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 28px;
}

.air-rep-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.air-rep-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: air-spin 0.8s linear infinite;
}

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

.air-rep-loading-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.6;
  transition: opacity 0.4s;
}

.air-rep-loading-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  min-height: 1.4em;
}

.air-rep-progress-wrap {
  width: 280px;
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px;
}

.air-rep-progress-bar {
  height: 100%;
  background: var(--teal-green-grad);
  border-radius: 99px;
  transition: width 1s linear;
}

.air-rep-loading-time {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.rec-loading-live {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #2563eb);
  margin: 0;
  max-width: 420px;
}

.rec-loading-live--idle {
  color: var(--text-muted);
  font-weight: 500;
}

.rec-loading-live--ok {
  color: #15803d;
}

.rec-loading-live--warn {
  color: #b45309;
}

.rec-loading-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  max-width: 420px;
  line-height: 1.45;
}

.rec-loading-history-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent, #2563eb);
  font-size: inherit;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rec-loading-history-link:hover {
  color: var(--accent-hover, #1d4ed8);
}

body.theme-dark .rec-loading-live--ok { color: #4ade80; }
body.theme-dark .rec-loading-live--warn { color: #fbbf24; }

/* ── Empty / no runs ─────────────────────────────────────────────────────── */
.air-rep-empty,
.air-rep-no-runs {
  padding: 0;
}

/* ── Result container ────────────────────────────────────────────────────── */
.air-rep-result {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Overall score block ─────────────────────────────────────────────────── */
#air-overall {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 28px 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.air-overall-score {
  flex-shrink: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  border: 3px solid;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--font-sans);
  letter-spacing: -2px;
}

.air-overall-label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-top: 2px;
}

.air-overall-right {
  flex: 1;
  min-width: 240px;
}

.air-overall-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.air-overall-summary {
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
  margin: 0 0 12px;
}

.air-run-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
}

.air-run-meta span { display: flex; gap: 4px; align-items: center; }

.air-status-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--ui-draft-bg);
  color: var(--ui-draft-text);
  text-transform: capitalize;
}

/* ── Dimension cards ─────────────────────────────────────────────────────── */
.air-dimensions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}

.air-dim-card {
  background: var(--bg-card);
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.air-dim-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.air-dim-score {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: 2.5px solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-sans);
}

.air-dim-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.air-dim-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.air-dim-rating {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  width: fit-content;
}

.air-dim-confidence {
  font-size: 11px;
  color: var(--text-muted);
}

.air-dim-reasoning {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

.air-dim-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.air-tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 10px;
}

.air-tag--strength {
  background: rgba(var(--teal-green-rgb), 0.1);
  color: var(--teal-green-to);
}

.air-tag--weakness {
  background: rgba(192, 57, 43, 0.08);
  color: #c0392b;
}

/* ── Score / Cause / Action Matrix ──────────────────────────────────────── */
.air-matrix-wrap {
  padding: 24px 28px 20px;
}

.air-matrix-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 14px;
}

.air-score-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.air-score-matrix th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.air-score-matrix td {
  padding: 10px 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

.air-col-score {
  width: 64px;
  text-align: center;
}

.air-matrix-dim {
  font-weight: 600;
  white-space: nowrap;
}

.air-matrix-score {
  font-size: 16px;
  font-weight: 700;
}

.air-matrix-list {
  margin: 0;
  padding: 0 0 0 16px;
  line-height: 1.7;
}

.air-matrix-list li {
  color: var(--text);
}

/* ── History ─────────────────────────────────────────────────────────────── */
.air-history {
  padding: 20px 28px 8px;
}

.air-history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.air-history-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
}

.air-history-row--current {
  font-weight: 600;
}

.air-history-score {
  font-size: 16px;
  font-weight: 700;
  min-width: 28px;
}

.air-history-date {
  color: var(--text-muted);
  font-size: 12px;
}

.air-history-status {
  font-size: 11px;
  color: var(--text-muted);
}

.air-history-current-label {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}

.air-history-load-btn {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
body.theme-dark .air-dim-card { background: #1c2029; }
body.theme-dark .air-score-matrix th { color: #7a8499; }
body.theme-dark .air-tag--strength { background: rgba(var(--teal-green-rgb), 0.15); color: var(--teal-green-from); }
body.theme-dark .air-tag--weakness { background: rgba(192, 57, 43, 0.12); color: #e07068; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .air-dimensions { grid-template-columns: 1fr; }
  #air-overall { flex-direction: column; }
  .air-score-matrix { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AIRepScore™ Management Cockpit — v0.3
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Context bar ──────────────────────────────────────────────────────────── */
.air-ctx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--surface-2, #f5f7fa);
  border-bottom: 1px solid var(--border, #e0e4ea);
  font-size: 13px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}
.air-ctx-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.air-ctx-right { display: flex; align-items: center; gap: 10px; }
.air-ctx-label { color: var(--text-muted, #8896a8); font-weight: 500; font-size: 12px; }
.air-ctx-value { font-weight: 600; color: var(--text-primary, #1a2233); }
.air-ctx-sep   { color: var(--border, #d0d5e0); }
.air-ctx-select {
  border: 1px solid var(--border, #d5dae4);
  border-radius: 6px;
  padding: 4px 28px 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111827);
  width: auto;
  min-width: 180px;
  max-width: min(320px, 42vw);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  /* Shorthand beats body.theme-dark select { background } — must include no-repeat */
  background: var(--input-bg, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23667'/%3E%3C/svg%3E") no-repeat right 8px center;
}

.air-rep-empty .module-placeholder,
.bp-empty .module-placeholder,
#cmp-empty .module-placeholder,
#rec-empty .module-placeholder {
  margin: 48px auto;
  max-width: 520px;
  align-items: center;
  text-align: center;
}

/* Period selector */
.air-ctx-period { display: flex; gap: 4px; }
.air-period-btn {
  padding: 4px 10px;
  border: 1px solid var(--border, #d5dae4);
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary, #5a677c);
  transition: background 0.15s, color 0.15s;
}
.air-period-btn:hover { background: var(--surface-2, #f0f2f6); }
.air-period-btn--active {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
  font-weight: 600;
}

/* ── Nav tabs (Overview / Models / History / Actions) ────────────────────── */
/* ── AI Reputation: ctx-bar + nav-tabs full-width, flush to top ──────────── */
#view-ai-reputation.view-section {
  padding: 0;
}
#view-ai-reputation .air-rep-page {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
/* Re-apply the max-width constraint only for the tab content (blocks below) */
#view-ai-reputation .air-tab-panel {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  box-sizing: border-box;
  width: 100%;
}

.air-nav-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border, #e0e4ea);
  margin-bottom: 0;
  padding: 0 20px;
  position: sticky;
  top: 57px;           /* fallback — JS overrides with measured ctx-bar height */
  z-index: 19;
  background: #fff;
}
.air-nav-tab {
  padding: 10px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #5a677c);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.air-nav-tab:hover { color: var(--accent, #2563eb); }
.air-nav-tab--active {
  color: var(--accent, #2563eb);
  border-bottom-color: var(--accent, #2563eb);
  font-weight: 700;
}
.air-tab-panel { padding-bottom: 40px; }

/* Safari: sticky ctx-bar / nav-tabs show a 1px flickering gap while scrolling.
   Box-shadow separators + 1px overlap — WebKit-only (Chrome/Firefox unaffected). */
_::-webkit-full-page-media, _:future, :root .page-header {
  position: relative;
  z-index: 21;
  border-bottom-width: 0;
  margin-bottom: -1px;
  box-shadow: 0 1px 0 0 var(--border);
}
_::-webkit-full-page-media, _:future, :root .air-ctx-bar {
  top: -1px;
  margin-top: -1px;
  margin-bottom: -1px;
  padding-top: 11px;
  padding-bottom: 11px;
  border-top-width: 0;
  border-bottom-width: 0;
  box-shadow:
    inset 0 1px 0 var(--border, #e0e4ea),
    inset 0 -1px 0 var(--border, #e0e4ea);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
_::-webkit-full-page-media, _:future, :root .air-nav-tabs {
  margin-top: -2px;
  border-bottom-width: 0;
  box-shadow:
    inset 0 1px 0 var(--border, #e0e4ea),
    inset 0 -2px 0 var(--border, #e0e4ea);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
_::-webkit-full-page-media, _:future, :root .air-module-tabs-bar {
  margin-top: -2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
_::-webkit-full-page-media, _:future, :root body.theme-dark .page-header {
  box-shadow: 0 1px 0 0 #2d3445;
}
_::-webkit-full-page-media, _:future, :root body.theme-dark .air-ctx-bar {
  box-shadow:
    inset 0 1px 0 #2a3145,
    inset 0 -1px 0 #2a3145;
}
_::-webkit-full-page-media, _:future, :root body.theme-dark .air-nav-tabs {
  box-shadow:
    inset 0 1px 0 #2a3145,
    inset 0 -2px 0 #2a3145;
}

/* ── Hero row ─────────────────────────────────────────────────────────────── */
.air-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 680px) { .air-hero-row { grid-template-columns: 1fr; } }
.air-hero-card {
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e0e4ea);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.air-hero-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #8896a8);
  margin-bottom: 6px;
}
.air-hero-label { font-size: 16px; font-weight: 700; color: var(--text-primary, #1a2233); margin-bottom: 8px; }
.air-hero-score {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.air-hero-denom { font-size: 22px; font-weight: 500; opacity: 0.55; }
.air-hero-rating { font-size: 14px; font-weight: 600; }
.air-hero-sub { font-size: 12px; color: var(--text-muted, #8896a8); margin-top: 6px; }

/* ── Dimension chips ──────────────────────────────────────────────────────── */
.air-dim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.dim-chip {
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e0e4ea);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 110px;
  flex: 1;
  max-width: 160px;
}
.dim-chip-name  { font-size: 11px; font-weight: 600; color: var(--text-muted, #8896a8); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.dim-chip-score { font-size: 22px; font-weight: 800; }
.dim-chip-label { font-size: 11px; font-weight: 600; }
.dim-chip-src   { font-size: 10px; color: var(--text-muted, #a0aab8); margin-top: 2px; }
.dim-chip-src--platform { color: var(--accent, #2563eb); }

/* ── Narrative ────────────────────────────────────────────────────────────── */
.air-narrative { margin-bottom: 24px; }
.air-narrative-text { font-size: 14px; line-height: 1.6; color: var(--text-secondary, #3a4558); }

/* ── Generic section wrapper ──────────────────────────────────────────────── */
.air-section { margin-bottom: 28px; }
.air-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #1a2233);
  margin: 0 0 12px 0;
}

/* ── Model Comparison Matrix ──────────────────────────────────────────────── */
.air-matrix-wrap { overflow-x: auto; }
.air-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.air-matrix-table th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted, #8896a8);
  border-bottom: 2px solid var(--border, #e0e4ea);
}
.air-matrix-table td { padding: 8px 12px; border-bottom: 1px solid var(--border, #f0f2f6); }
.matrix-dim-name { font-weight: 500; color: var(--text-primary, #1a2233); }
.matrix-avg-row td { font-weight: 700; border-top: 2px solid var(--border, #e0e4ea); }
.matrix-avg  { font-weight: 700; }
.matrix-cell { text-align: right; }

/* Matrix cell colors — see 6-band score scale block */

/* ── Consensus insight ────────────────────────────────────────────────────── */
.air-consensus     { margin-bottom: 24px; }
.air-consensus-row { display: flex; gap: 12px; flex-wrap: wrap; }
.consensus-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  border: 1px solid;
}
.consensus-agree   { background: rgba(39,174,96,0.08);  border-color: rgba(39,174,96,0.3);  color: #1a7a46; }
.consensus-diverge { background: rgba(230,126,34,0.08); border-color: rgba(230,126,34,0.3); color: #924d0a; }

/* ── Trend chart ──────────────────────────────────────────────────────────── */
.air-trend-wrap { background: var(--surface-1,#fff); border: 1px solid var(--border,#e0e4ea); border-radius: 8px; padding: 16px; }
.air-trend-svg  { width: 100%; height: auto; overflow: visible; display: block; }
.air-trend-grid-line {
  stroke: #c5cdd8;
  stroke-width: 0.5;
  stroke-dasharray: 4 3;
}
.air-trend-grid-line--major {
  stroke: #9ca3af;
  stroke-width: 1;
}

/* Flex row: chart takes remaining width, legend panel is fixed on the right */
.trend-chart-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.trend-chart-row .air-trend-svg {
  flex: 1 1 0;
  min-width: 0;
  max-height: none;
  height: auto;
}
.trend-legend-panel {
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 0 24px 16px;
  border-left: 1px solid var(--border, #e0e4ea);
  margin-left: 12px;
}
.trend-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trend-legend-swatch {
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.trend-legend-swatch--corrected {
  background: var(--teal-green-grad);
}
.trend-legend-swatch--trained {
  background: #94a3b8;
  border-top: 2px dashed #94a3b8;
  height: 0;
}
.trend-legend-label {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-muted, #64748b);
  white-space: normal;
}
.trend-area     { fill: rgba(37,99,235,0.07); }
.trend-line     { fill: none; stroke: var(--accent,#2563eb); stroke-width: 2; }
.trend-dot      { fill: var(--accent,#2563eb); stroke: #fff; stroke-width: 2; }
.trend-label    { font-size: 10px; fill: var(--text-muted,#8896a8); text-anchor: middle; }

/* Score-colored dots — see 6-band score scale block */

/* ── Synthesis ────────────────────────────────────────────────────────────── */
.air-badge-synth {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #8896a8);
  background: var(--surface-2, #f5f7fa);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: middle;
}
.synth-exec { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.synth-sub  { font-size: 13px; font-weight: 700; margin: 14px 0 6px; }
.synth-list { font-size: 13px; line-height: 1.6; padding-left: 20px; }

/* ── Models tab explainer ─────────────────────────────────────────────────── */
.air-models-explainer { display: none; }

/* ── Model panel ──────────────────────────────────────────────────────────── */
.model-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #e0e4ea);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.model-panel-name { font-weight: 700; font-size: 15px; }
.model-panel-time { font-size: 12px; color: var(--text-muted, #8896a8); }
.model-panel-ver  { font-size: 11px; color: var(--text-muted, #a0aab8); background: var(--surface-2, #f5f7fa); padding: 2px 6px; border-radius: 4px; }
.air-dim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.air-dim-card {
  background: var(--surface-1, #fff);
  border: 1px solid var(--border, #e0e4ea);
  border-radius: 8px;
  padding: 14px 16px;
}
.air-dim-card-name   { font-size: 11px; font-weight: 600; color: var(--text-muted,#8896a8); text-transform: uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.air-dim-card-score  { font-size: 28px; font-weight: 800; }
.air-dim-card-rating { font-size: 11px; font-weight: 600; margin-bottom: 6px; }
.air-dim-card-cause  { font-size: 12px; color: var(--text-secondary,#4a5568); margin:0; line-height:1.5; }

/* Score/Cause/Action table */
.air-sca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 16px;
}
.air-sca-table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted,#8896a8);
  border-bottom: 2px solid var(--border,#e0e4ea);
}
.air-sca-table td { padding: 8px 10px; border-bottom: 1px solid var(--border,#f0f2f6); vertical-align: top; }
.sca-score { font-weight: 700; text-align: right; }

/* Error state */
.air-model-error {
  padding: 16px 20px;
  background: rgba(192,57,43,0.05);
  border: 1px solid rgba(192,57,43,0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #c0392b;
}
.air-error-icon { font-size: 18px; margin-right: 8px; }
.tab-err-icon   { font-size: 14px; opacity: 0.8; }
.air-rescan-model-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--teal-green-grad);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.air-rescan-model-btn:hover  { background: #0f766e; }
.air-rescan-model-btn:disabled { background: #6b7280; cursor: default; }

/* ── History tab ──────────────────────────────────────────────────────────── */
.air-history-toolbar { margin-bottom: 14px; }
.air-history-filters { display: flex; gap: 6px; }
.air-filter-btn {
  padding: 5px 12px;
  border: 1px solid var(--border,#d5dae4);
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary,#5a677c);
}
.air-filter-btn--active {
  background: var(--accent,#2563eb);
  color: #fff;
  border-color: var(--accent,#2563eb);
  font-weight: 600;
}
.air-hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.air-hist-table th {
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted,#8896a8);
  border-bottom: 2px solid var(--border,#e0e4ea);
}
.air-hist-table td { padding: 9px 12px; border-bottom: 1px solid var(--border,#f0f2f6); }
.hist-row--active td { background: rgba(37,99,235,0.04); font-weight: 600; }
.hist-status { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 7px; }
.hist-status--ok   { background: rgba(39,174,96,0.1);  color: #1a7a46; }
.hist-status--warn { background: rgba(230,126,34,0.1); color: #924d0a; }
.hist-view-btn { background: none; border: none; cursor: pointer; color: var(--accent,#2563eb); font-size: 13px; padding: 0; text-decoration: underline; }

/* ── Actions tab ──────────────────────────────────────────────────────────── */
.air-actions-header  { margin-bottom: 14px; }
.air-actions-sub { font-size: 13px; color: var(--text-muted,#8896a8); margin-top: 4px; }
.air-actions-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.air-actions-table th {
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted,#8896a8);
  border-bottom: 2px solid var(--border,#e0e4ea);
}
.air-actions-table td { padding: 9px 12px; border-bottom: 1px solid var(--border,#f0f2f6); vertical-align: top; }
.action-idx   { font-weight: 700; color: var(--text-muted,#8896a8); width: 28px; }
.action-text  { font-weight: 600; }
.action-models { font-size: 12px; color: var(--text-muted,#8896a8); }
.action-impact { font-weight: 700; font-size: 12px; }
.action-impact--high   { color: #c0392b; }
.action-impact--medium { color: #e67e22; }
.action-impact--low    { color: #27ae60; }

/* ── Empty sub-text ───────────────────────────────────────────────────────── */
.air-empty-sub { color: var(--text-muted,#8896a8); font-style: italic; font-size: 13px; padding: 16px 0; }

/* ── Project hint text ─────────────────────────────────────────────────────── */
.proj-hint { font-size: 12px; color: var(--text-muted,#8896a8); margin: 4px 0 0; }

/* ── Dark mode overrides ──────────────────────────────────────────────────── */
/* AI Reputation — dimension table + matrix (dark) */
body.theme-dark #view-ai-reputation .ov-dim-avg-row td,
body.theme-dark .air-dim-chips .ov-dim-avg-row td { background: #1e2638 !important; }
body.theme-dark #view-ai-reputation .lws-corr--pos,
body.theme-dark .air-dim-chips .lws-corr--pos { color: #6ee7a0 !important; background: rgba(34, 197, 94, 0.14) !important; }
body.theme-dark #view-ai-reputation .lws-corr--neg,
body.theme-dark .air-dim-chips .lws-corr--neg { color: #fca5a5 !important; background: rgba(220, 38, 38, 0.14) !important; }
body.theme-dark #view-ai-reputation .lws-corr--flat,
body.theme-dark .air-dim-chips .lws-corr--flat { color: #6b788e !important; background: transparent !important; }
body.theme-dark .air-matrix-table .matrix-dim-name,
body.theme-dark .matrix-dim-name { color: #c5cee0; }
body.theme-dark .matrix-avg-row td { border-top-color: #2a3145; }

body.theme-dark .air-ctx-bar        { background: #161c28; border-color: #2a3145; }
body.theme-dark .air-ctx-value      { color: #c5cee0; }
body.theme-dark .air-ctx-label      { color: #7a8499; }
body.theme-dark .air-ctx-sep        { color: #3d4558; }
body.theme-dark .air-hero-card      { background: #1c2029; border-color: #2a3145; }
body.theme-dark .dim-chip           { background: #1c2029; border-color: #2a3145; }
body.theme-dark .air-nav-tabs {
  background: var(--bg, #0e1117);
  border-bottom-color: #2a3145;
}
body.theme-dark .air-nav-tab        { color: #7a8499; }
body.theme-dark .air-nav-tab--active { color: var(--teal-green); border-bottom-color: var(--teal-green); }
/* Takeaway box + synth badge — dark mode */
body.theme-dark .ov-takeaway-box { background: #1e2638; }
body.theme-dark .ov-takeaway-ttl { color: #5a6480; }
body.theme-dark .ov-takeaway-item { color: #b0bbd0; }
body.theme-dark .ov-takeaway-check { color: var(--teal-green); }
body.theme-dark .air-badge-synth { background: #1e2638; color: #7a8499; }
body.theme-dark .ov-synth-p { color: #b0bbd0; }
body.theme-dark .ov-synth-note { color: #b0bbd0; }
body.theme-dark .ov-synth-findings { border-top-color: #2a3145; }
body.theme-dark .ov-synth-findings-ttl { color: #5a6480; }
body.theme-dark .ov-synth-findings-list li { color: #b0bbd0; }
body.theme-dark .air-dim-card       { background: #1c2029; border-color: #2a3145; }
body.theme-dark .air-ctx-select {
  color: var(--text, #eef1f8);
  border-color: #2a3145;
  background: var(--input-bg, #1e2638) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a8b0bc'/%3E%3C/svg%3E") no-repeat right 8px center;
}
body.theme-dark .air-ctx-select option {
  background: var(--input-bg, #1e2638);
  color: var(--text, #eef1f8);
}
body.theme-dark.platform-customer-context .air-ctx-select {
  color: #f3e8dc;
  border-color: #4a3d30;
  background: #3a3028 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d4c4b0'/%3E%3C/svg%3E") no-repeat right 8px center;
}
body.theme-dark .air-trend-wrap     { background: #1c2029; border-color: #2a3145; }
body.theme-dark .consensus-agree    { background: rgba(39,174,96,0.12); color: var(--teal-green-from); }
body.theme-dark .consensus-diverge  { background: rgba(230,126,34,0.12); color: #f0a466; }
body.theme-dark .hist-status--ok    { background: rgba(39,174,96,0.15); color: var(--teal-green-from); }
body.theme-dark .hist-status--warn  { background: rgba(230,126,34,0.12); color: #f0a466; }

/* ═══════════════════════════════════════════════════════════════════════════
   AIRepScore™ — STRATEGIC INTELLIGENCE COCKPIT v0.4 CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Radial gauge ────────────────────────────────────────────────────────── */
.air-hero-gauge-wrap {
  position: relative;
  width: 160px; height: 160px;
  margin: 0 auto 8px;
}
.air-gauge-svg { width: 100%; height: 100%; display: block; }
.air-gauge-bg  { stroke: #e8eaf0; }
.air-gauge-arc {
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}

.air-hero-gauge-inner {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.air-hero-score-num {
  font-size: 2.4rem; font-weight: 800; line-height: 1;
  font-feature-settings: "tnum";
}
.air-hero-score-denom { font-size: .85rem; color: var(--c-text-muted); }

/* ── Hero row ────────────────────────────────────────────────────────────── */
/* ── Overview top: hero block + right block side-by-side ─────────────────── */
.air-overview-top {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: stretch;
}
.air-hero-right-block {
  flex: 1;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  min-height: 200px;
}
@media (max-width: 800px) {
  .air-overview-top { flex-direction: column; }
}

.air-hero-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  align-items: start;
  flex: 1;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .air-hero-row { grid-template-columns: 1fr; }
}
.air-hero-score-panel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* AIRepScore™ label above the gauge — larger, with ? button */
.air-hero-score-label-top {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 1rem; font-weight: 700; color: var(--text-primary, #1a2233);
  margin-bottom: 10px;
}
.air-hero-score-label { font-size: .8rem; color: var(--c-text-muted); margin-bottom: 4px; }
.air-hero-rating {
  font-size: 1.05rem; font-weight: 700;
  padding: 3px 12px; border-radius: 20px;
  margin-top: 4px;
}
.air-hero-delta { font-size:.8rem; color: var(--c-text-muted); margin-top:6px; }
.air-hero-conf  { margin-top:8px; }
.air-hero-basis { font-size:.75rem; color: var(--c-text-muted); margin-top:8px; }

/* ── Confidence badge ────────────────────────────────────────────────────── */
.conf-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .75rem; font-weight: 600;
  text-transform: capitalize;
  cursor: default;
}
.conf-badge--high   { background:#e8f5e9; color:#1b5e20; }
.conf-badge--medium { background:#fff3e0; color:#e65100; }
.conf-badge--low    { background:#fce4ec; color:#880e4f; }

/* ── Strategic summary panel ─────────────────────────────────────────────── */
.air-hero-strategic-panel {
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
}
.air-hero-strat-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-text-muted);
  margin-bottom: 2px;
}
.air-strat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--c-surface);
}
.air-strat-label {
  font-size: .75rem; color: var(--c-text-muted);
  min-width: 100px; flex-shrink: 0;
}
.air-strat-dim { font-size: .9rem; font-weight: 600; }
.air-strat-score {
  font-size: 1rem; font-weight: 800;
  margin-left: 8px;
}
.air-urgency--high   { color: #c62828; font-size:.75rem; font-weight:700; background:#fce4ec; padding:2px 8px; border-radius:10px; }
.air-urgency--medium { color: #e65100; font-size:.75rem; font-weight:700; background:#fff3e0; padding:2px 8px; border-radius:10px; }
.air-urgency--low    { color: #1565c0; font-size:.75rem; font-weight:700; background:#e3f2fd; padding:2px 8px; border-radius:10px; }

/* ── Strategic analysis panel (3rd column of hero row) ───────────────────── */
.air-hero-analysis-panel {
  display: flex; flex-direction: column; gap: 10px;
}
.air-hero-strat-badge {
  display: inline-block;
  font-size: .7rem; font-weight: 500; color: var(--c-text-muted);
  background: var(--c-surface);
  padding: 2px 8px; border-radius: 10px;
  margin-left: 8px;
}
.air-hero-synth-text {
  font-size: .85rem; color: var(--text-primary, #1a2233);
  line-height: 1.55; margin: 0;
}
.air-hero-synth-findings {
  margin-top: 8px;
}
.air-hero-synth-findings strong { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted); }
.air-hero-synth-findings ul { margin: 6px 0 0 0; padding-left: 18px; }
.air-hero-synth-findings li { font-size: .82rem; line-height: 1.5; color: var(--text-primary, #1a2233); margin-bottom: 3px; }

/* ── Synthesis section (below trend) ─────────────────────────────────────── */
.synth-exec      { font-size: .9rem; line-height: 1.6; margin: 0 0 8px; }
.synth-context   { font-size: .85rem; line-height: 1.55; color: var(--c-text-muted); margin: 0 0 6px; font-style: italic; }
.synth-alignment { font-size: .85rem; line-height: 1.55; color: var(--c-text-muted); margin: 0 0 10px; }
.synth-findings  { margin-top: 10px; }
.synth-findings strong { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); }
.synth-findings ul { margin: 8px 0 0; padding-left: 18px; }
.synth-findings li { font-size: .85rem; line-height: 1.55; margin-bottom: 4px; }

/* ── Delta indicators ────────────────────────────────────────────────────── */
.delta-up   { color: #2e7d32; font-weight: 700; }
.delta-down { color: #c62828; font-weight: 700; }
.delta-flat { color: var(--c-text-muted); }

/* ── Dimension chips (overview) ──────────────────────────────────────────── */
.air-dim-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dim-chip {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow .15s;
}
.dim-chip:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.dim-chip-name  { font-size: .75rem; color: var(--c-text-muted); font-weight:600; }
.dim-chip-score { font-size: 1.6rem; font-weight: 800; line-height:1; }
.dim-chip-label { font-size: .7rem; font-weight: 600; }
.dim-chip-delta { font-size: .75rem; }
.dim-chip-header {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  margin-bottom: 4px;
}

/* ── Section headers ─────────────────────────────────────────────────────── */
.air-section { margin-bottom: 28px; }
.air-section-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-text-muted);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.air-section-subtitle {
  font-weight: 400; font-size: .7rem; letter-spacing: 0;
  text-transform: none; color: var(--c-text-muted);
}

/* ── Cross-model matrix ──────────────────────────────────────────────────── */
.air-matrix-wrap { overflow-x: auto; margin-bottom: 16px; }
.air-matrix-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.air-matrix-table th {
  padding: 8px 10px; text-align: center;
  background: var(--c-surface); font-size: .75rem; font-weight: 700;
  color: var(--c-text-muted); border-bottom: 2px solid var(--c-border);
}
.air-matrix-table th:first-child { text-align: left; }
.air-matrix-table td { padding: 7px 10px; text-align: center; border-bottom: 1px solid var(--c-border); }
.air-matrix-table td:first-child { text-align: left; font-weight: 600; }
.matrix-dim-name { font-size:.85rem; }
.matrix-avg  { font-weight: 700; }
.matrix-var  { font-size: .75rem; color: var(--c-text-muted); }
.matrix-var-col { width: 70px; }
.var-high { color: #c62828 !important; }
.var-med  { color: #e65100 !important; }
.var-low  { color: #2e7d32 !important; }

/* ── Consensus pills ─────────────────────────────────────────────────────── */
.air-consensus-inner { display: flex; flex-direction: column; gap: 12px; }
.air-consensus-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.consensus-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 20px;
  font-size: .78rem; font-weight: 500;
}
.consensus-agree   { background:#e8f5e9; color:#2e7d32; }
.consensus-diverge { background:#fff3e0; color:#e65100; }
.consensus-score   { background:#e3f2fd; color:#0d47a1; }
.air-align-note    { font-size:.85rem; color:var(--c-text-muted); margin:0; }

/* ── Trend chart ─────────────────────────────────────────────────────────── */
.air-trend-svg { width:100%; height:auto; overflow:visible; }
.sent-trend-wrap .air-trend-svg { max-height:180px; }
.trend-area  { fill: rgba(66,165,245,.08); }
.trend-line  { fill:none; stroke:#42a5f5; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.trend-dot   { stroke:white; stroke-width:2; cursor:default; }
.trend-grid  { stroke:#e8eaf0; stroke-width:1; stroke-dasharray:4 3; }
.trend-label { font-size:10px; fill:var(--c-text-muted,#888); text-anchor:middle; }
.trend-axis-label { font-size:12px; fill:var(--c-text-muted,#888); }

/* ── Synthesis narrative ─────────────────────────────────────────────────── */
.synth-exec    { font-size:.95rem; font-weight:500; line-height:1.65; }
.synth-context { font-size:.85rem; color:var(--c-text-muted); line-height:1.6; }
.synth-sub     { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-muted); margin:14px 0 6px; }
.synth-list    { margin:0; padding-left:18px; font-size:.88rem; line-height:1.7; }

/* ── Models tab: collapsible dimension cards ─────────────────────────────── */
.air-dim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.air-dim-card-full {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.air-dim-card-full:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.dim-card-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
}
.air-dim-card-name   { font-size:.85rem; font-weight:600; flex:1; }
.air-dim-card-score  { font-size:1.4rem; font-weight:800; min-width:38px; text-align:right; }
.air-dim-card-rating { font-size:.7rem; font-weight:700; min-width:58px; text-align:center; padding:2px 8px; border-radius:10px; }

.dim-card-toggle {
  background: none; border: none;
  font-size: .72rem; color: var(--c-primary, #3b5bdb);
  cursor: pointer; padding: 3px 6px; border-radius:6px; flex-shrink:0;
}
.dim-card-toggle:hover { background: var(--c-surface); }

.dim-card-detail {
  padding: 0 16px 14px;
  font-size: .83rem; line-height: 1.65;
  border-top: 1px solid var(--c-border);
}
.dim-detail-reasoning { color: var(--c-text-muted); font-style: italic; margin-top: 10px; }
.dim-detail-strengths ul, .dim-detail-weaknesses ul, .dim-detail-causes ul { margin:4px 0; padding-left:16px; }
.dim-detail-strengths strong { color: #2e7d32; }
.dim-detail-weaknesses strong { color: #c62828; }
.dim-detail-conf { font-size:.78rem; color:var(--c-text-muted); margin-top:8px; }

/* ── Action cards ────────────────────────────────────────────────────────── */
.air-action-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 14px;
  transition: box-shadow .15s;
  position: relative;
}
.air-action-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.air-action-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.air-action-idx {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-primary, #3b5bdb);
  color: white; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.air-action-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.air-action-badge {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: capitalize;
}
.air-action-badge--high { background: #fee2e2; color: #b91c1c; }
.air-action-badge--medium { background: #fef3c7; color: #a16207; }
.air-action-badge--low { background: #e0f2fe; color: #0369a1; }
.air-action-why   { font-size:.88rem; color:var(--c-text-muted); margin-bottom:6px; }
.air-action-rationale { font-size:.82rem; color:var(--c-text-muted); font-style:italic; margin-bottom:10px; }
.air-action-impacts, .air-action-sources { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.air-action-meta-label { font-size:.72rem; font-weight:700; color:var(--c-text-muted); text-transform:uppercase; letter-spacing:.07em; }
.impact-dim { background:#e3f2fd; color:#0d47a1; font-size:.75rem; padding:2px 10px; border-radius:12px; font-weight:600; }
.source-model { background:var(--c-surface); border:1px solid var(--c-border); font-size:.72rem; padding:1px 8px; border-radius:10px; }

/* ── History table ───────────────────────────────────────────────────────── */
.air-hist-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.air-hist-table th { padding:8px 10px; text-align:left; background:var(--c-surface); font-size:.75rem; font-weight:700; color:var(--c-text-muted); border-bottom:2px solid var(--c-border); }
.air-hist-table td { padding:8px 10px; border-bottom:1px solid var(--c-border); }
.hist-row--active td { background: rgba(59,91,219,.05); }
.hist-score { font-size:.95rem; font-weight:800; }
.hist-status { display:inline-block; padding:2px 10px; border-radius:12px; font-size:.72rem; font-weight:600; }
.hist-status--ok   { background:#e8f5e9; color:#2e7d32; }
.hist-status--warn { background:#fff3e0; color:#e65100; }
.btn-link { background:none; border:none; color:var(--c-primary,#3b5bdb); font-size:.82rem; cursor:pointer; padding:0; text-decoration:underline; }

/* ── Tooltip bubble ──────────────────────────────────────────────────────── */
.air-tooltip-bubble {
  position: absolute;
  max-width: 280px;
  background: #1a2035;
  color: #fff;
  font-size: .78rem;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.air-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  background: transparent;
  color: #9ca3af;
  font-size: .6rem; font-weight: 600;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  cursor: default;
  vertical-align: middle;
  margin-left: 3px;
  user-select: none;
  line-height: 1;
  flex-shrink: 0;
}
.air-help:hover, .air-help:focus {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #9ca3af;
  outline: none;
}

/* ── Model error note (hero) ─────────────────────────────────────────────── */
.air-model-err-note { color: #c62828; font-weight: 600; }

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
body.theme-dark .air-hero-row    { background: #1c2029; border-color: #2a3145; }
body.theme-dark .air-gauge-bg    { stroke: #2a3145; }
body.theme-dark .dim-chip        { background: #1c2029; border-color: #2a3145; }
body.theme-dark .air-action-card { background: #1c2029; border-color: #2a3145; }
body.theme-dark .air-action-badge--high { background: #3f1d1d; color: #fca5a5; }
body.theme-dark .air-action-badge--medium { background: #3d3010; color: #fcd34d; }
body.theme-dark .air-action-badge--low { background: #1e3a5f; color: #93c5fd; }
body.theme-dark .air-dim-card-full { background: #1c2029; border-color: #2a3145; }
body.theme-dark .air-matrix-table th { background: #161b27; }
body.theme-dark .conf-badge--high   { background:#0d2618; color:#a5d6a7; }
body.theme-dark .conf-badge--medium { background:#3e2d10; color:#ffcc80; }
body.theme-dark .conf-badge--low    { background:#3e1e24; color:#ef9a9a; }
body.theme-dark .air-tooltip-bubble { background:#0d1525; }
body.theme-dark .consensus-agree   { background:rgba(39,174,96,.15); color:#a5d6a7; }
body.theme-dark .consensus-diverge { background:rgba(230,126,34,.15); color:#ffcc80; }
body.theme-dark .consensus-score   { background:rgba(66,165,245,.15); color:#90caf9; }
body.theme-dark .impact-dim        { background:rgba(66,165,245,.15); color:#90caf9; }
body.theme-dark .hist-status--ok   { background:rgba(39,174,96,.15); color:#a5d6a7; }
body.theme-dark .hist-status--warn { background:rgba(230,126,34,.15); color:#ffcc80; }
body.theme-dark .trend-grid        { stroke:#2a3145; }
body.theme-dark .air-trend-grid-line { stroke: #2a3145; }
body.theme-dark .air-trend-grid-line--major { stroke: #3d4a60; }
body.theme-dark .air-trend-svg .trend-pt-label { fill: #c5cee0; }
body.theme-dark .air-trend-svg .trend-pt-label--trained { fill: #9aa5ba; }
body.theme-dark .air-trend-svg .trend-axis-label { fill: #7a8499; }

/* ═══════════════════════════════════════════════════════════════════════════
   AIRepScore™ UX update — May 2026 (v0.4 visual)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Context bar: separate Run Scan from period buttons ──────────────────── */
.air-ctx-run-wrap {
  border-left: 1px solid var(--c-border);
  padding-left: 16px;
  margin-left: 8px;
}

/* ── Hero row: gauge + synthesis panel ───────────────────────────────────── */
.air-hero-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 20px;
  align-items: start;
}
@media (max-width: 640px) { .air-hero-row { grid-template-columns: 1fr; } }

/* Left panel */
.air-hero-score-panel {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.air-hero-gauge-wrap {
  position: relative; width: 160px; height: 160px; margin: 0 auto 4px;
}
.air-gauge-svg   { width: 100%; height: 100%; display: block; }
.air-gauge-bg    { stroke: #e8eaf0; }
.air-gauge-arc   { stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1); }
.air-hero-gauge-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.air-hero-score-num  { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.air-hero-score-denom { font-size: .85rem; color: var(--c-text-muted); }
.air-hero-score-label { font-size: .8rem; color: var(--c-text-muted); }
.air-hero-rating {
  font-size: 1rem; font-weight: 700; padding: 3px 14px; border-radius: 20px;
}
.conf-badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:.75rem; font-weight:600; cursor:default; }
.conf-badge--high   { background:#e8f5e9; color:#1b5e20; }
.conf-badge--medium { background:#fff3e0; color:#e65100; }
.conf-badge--low    { background:#fce4ec; color:#880e4f; }
.air-hero-basis { font-size:.72rem; color:var(--c-text-muted); }
.air-model-err-note { color:#c62828; font-weight:600; }

/* Right panel: synthesis text */
.air-hero-synthesis-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 4px;
}
.air-hero-synth-badge {
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-text-muted); margin-bottom:2px;
}
.air-hero-synth-text {
  font-size:.95rem; line-height:1.7; margin:0;
}
.air-hero-synth-findings strong {
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c-text-muted); display:block; margin-bottom:6px;
}
.air-hero-synth-findings ul {
  margin:0; padding-left:18px; font-size:.88rem; line-height:1.75;
}
.air-hero-synth-findings li { margin-bottom:3px; }

/* ── Dimension chips: compact single-row ─────────────────────────────────── */
.air-dim-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.dim-chip-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: 8px; padding: 8px 14px;
  flex: 1; min-width: 140px;
}
.dim-chip-name  { font-size:.82rem; font-weight:600; flex:1; }
.dim-chip-score { font-size:1.3rem; font-weight:800; min-width:32px; text-align:right; }
.dim-chip-label { font-size:.72rem; font-weight:700; min-width:56px; text-align:center; padding:2px 8px; border-radius:10px; }
.dim-chip-platform-tag { color:var(--c-text-muted); font-size:.65rem; }

/* ── Matrix: first col narrow, model cols compact ────────────────────────── */
.air-matrix-table   { width:100%; border-collapse:collapse; font-size:.84rem; table-layout:fixed; }
.matrix-th-dim      { width: 140px; text-align:left; }
.matrix-th-model    { width: auto; text-align:center; }
.matrix-th-avg      { width: 60px; text-align:center; }
.air-matrix-table th {
  padding:7px 8px; background:var(--c-surface); font-size:.73rem; font-weight:700;
  color:var(--c-text-muted); border-bottom:2px solid var(--c-border);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.air-matrix-table th:first-child { text-align:left; }
.air-matrix-table td { padding:7px 8px; text-align:center; border-bottom:1px solid var(--c-border); }
.air-matrix-table td:first-child { text-align:left; font-weight:600; font-size:.83rem; }
.matrix-avg  { font-weight:700; }

/* ── Strategic Analysis section ──────────────────────────────────────────── */
.synth-context   { font-size:.88rem; color:var(--c-text-muted); line-height:1.65; margin:0 0 8px; }
.synth-alignment { font-size:.85rem; color:var(--c-text-muted); font-style:italic; margin:0; }

/* ── Models tab: OLD circular badge cards (restored) ─────────────────────── */
.air-old-dim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}
@media (max-width: 720px) { .air-old-dim-grid { grid-template-columns: 1fr; } }

.air-old-dim-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px;
  min-width: 0;
  overflow: hidden;
}
.air-score-circle {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800;
}

.air-old-dim-body  { flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; overflow:hidden; }
.air-old-dim-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.air-old-dim-name  { font-size:.95rem; font-weight:700; }
.air-old-dim-rating {
  font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:10px;
}
.air-old-dim-conf  { font-size:.73rem; color:var(--c-text-muted); margin-left:auto; }
.air-old-dim-text  { font-size:.84rem; line-height:1.6; color:var(--c-text); margin:4px 0 6px; word-break:break-word; }
.air-old-dim-tags  { display:flex; flex-wrap:wrap; gap:5px; }

/* ── + / − remarks (replace tag pills) ──────────────────────────────────── */
.air-dim-remarks { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.air-remark {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: .8rem; line-height: 1.4;
  overflow: hidden;
}
.air-remark-icon {
  flex-shrink: 0;
  font-size: .85rem; font-weight: 800; line-height: 1.4;
  width: 14px; text-align: center;
}
.air-remark-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.air-remark--pos .air-remark-icon { color: #2e7d32; }
.air-remark--pos .air-remark-text { color: var(--c-text, #1a2233); }
.air-remark--neg .air-remark-icon { color: #c62828; }
.air-remark--neg .air-remark-text { color: var(--c-text, #1a2233); }
body.theme-dark .air-remark--pos .air-remark-icon { color: #81c784; }
body.theme-dark .air-remark--neg .air-remark-icon { color: #e57373; }
body.theme-dark .air-remark--pos .air-remark-text,
body.theme-dark .air-remark--neg .air-remark-text { color: #c5cee0; }

/* ── Sentiment Analysis block ──────────────────────────────────────────────── */
/* New two-panel layout: left = drivers, right = web signals */
.sent-analysis-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) { .sent-analysis-wrap { grid-template-columns: 1fr; } }

.sent-drivers-panel {
  min-width: 0;
}
.sent-panel-ttl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6b7280;
  margin-bottom: 14px;
}
/* Two-column positive / negative grid inside the drivers panel */
.sent-drivers-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .sent-drivers-grid-2col { grid-template-columns: 1fr; } }
.sent-drv-col { min-width: 0; }
.sent-drv-col .air-remark { margin-bottom: 7px; white-space: normal; }
.sent-drv-col .air-remark-text { white-space: normal; overflow: visible; text-overflow: unset; }

.sent-signals-panel {
  min-width: 0;
}

/* Drivers column title (shared) */
.sent-drivers-ttl {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 10px;
}
.sent-drivers-ttl--pos { color: #2e7d32; }
.sent-drivers-ttl--neg { color: #c62828; }

/* Kept for dark mode overrides */
body.theme-dark .sent-drivers-ttl--pos { color: #81c784; }
body.theme-dark .sent-drivers-ttl--neg { color: #e57373; }
/* Dark mode */
body.theme-dark .sent-drivers-ttl--pos { color: #81c784; }
body.theme-dark .sent-drivers-ttl--neg { color: #e57373; }
body.theme-dark .sent-single-score     { color: var(--teal-green); }
.air-tag { font-size:.72rem; padding:2px 10px; border-radius:20px; }
.tag-weak  { background:#fce4ec; color:#880e4f; }
.tag-cause { background:#e3f2fd; color:#0d47a1; }

/* ── SCA table (Score / Cause / Action) ──────────────────────────────────── */
.air-sca-table {
  width: 100%; border-collapse: collapse; font-size: .84rem;
  margin-top: 20px; background: var(--c-card); border-radius: 10px; overflow: hidden;
}
.air-sca-table th {
  padding: 9px 12px; text-align: left;
  background: var(--c-surface); font-size: .73rem; font-weight: 700;
  color: var(--c-text-muted); border-bottom: 2px solid var(--c-border);
}
.air-sca-table td { padding: 8px 12px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.sca-dim    { font-weight: 700; width: 120px; }
.sca-score  { font-size: 1rem; font-weight: 800; width: 60px; text-align: center; }
.sca-causes ul, .sca-actions ul { margin:0; padding-left:14px; }
.sca-causes li, .sca-actions li { margin-bottom: 3px; }

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
body.theme-dark .air-hero-row       { background:#1c2029; border-color:#2a3145; }
body.theme-dark .air-gauge-bg       { stroke:#2a3145; }
body.theme-dark .dim-chip-row       { background:#1c2029; border-color:#2a3145; }
body.theme-dark .air-old-dim-card   { background:#1c2029; border-color:#2a3145; }
body.theme-dark .air-sca-table      { background:#1c2029; }
body.theme-dark .air-sca-table th   { background:#161b27; }

/* ══════════════════════════════════════════════════════════════════════════
   OVERVIEW TAB — Institutional Design System  (ov-*)
   Light mode only. Premium / executive intelligence briefing aesthetic.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Stack layout ────────────────────────────────────────────────────────── */
.ov-hero-scan-ts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .75rem;
  color: #9ca3af;
  margin-bottom: 6px;
  letter-spacing: .01em;
}

.ov-sample-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--teal-green, #58c6c5);
  background: var(--teal-green-bg, rgba(92, 166, 201, 0.12));
  border-radius: 4px;
  padding: 2px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.ov-hero-proj-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #111827);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.ov-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 0 48px;
}

/* ── Base card ───────────────────────────────────────────────────────────── */
.ov-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 22px 26px;
}

/* ── Section header ──────────────────────────────────────────────────────── */
.ov-section-hdr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 16px;
}
/* Tight spacing when title is immediately followed by a subtitle paragraph */
.ov-section-hdr + .ov-matrix-sub {
  margin-top: -14px;
}
.ov-section-ttl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0;
}
.ov-section-sub {
  font-size: 11.5px;
  color: #9ca3af;
  font-weight: 400;
}
.ov-text-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--teal-green);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.ov-text-link:hover { text-decoration: underline; }

/* ══ 1. HERO CARD ════════════════════════════════════════════════════════════ */
.ov-hero-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 30px 28px;
  display: grid;
  grid-template-columns: 210px 1fr 260px;
  gap: 28px;
  align-items: start;
}

/* LEFT — Score panel */
.ov-hero-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-right: 20px;
  border-right: 1px solid #f0f0f0;
}
.ov-hero-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ov-gauge-wrap {
  position: relative;
  width: 190px;
  height: 190px;
  margin-bottom: 10px;
}
.ov-gauge-svg { width: 190px; height: 190px; }
.ov-gauge-bg  { stroke: #e5e7eb; }
.ov-gauge-arc { stroke: var(--score-moderate); transition: stroke-dashoffset 0.6s ease; }
.ov-gauge-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ov-score-num {
  font-size: 39.6px; /* 90% of 44px — fits gauge centre */
  font-weight: 700;
  line-height: 1;
  color: #111827;
  letter-spacing: -0.02em;
}
.ov-score-num--compact {
  font-size: 19.8px; /* 90% of 22px (stacked REC gauges) */
}
.ov-score-denom {
  font-size: 14px;
  color: #9ca3af;
  margin-top: 2px;
}
.ov-hero-rating {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 14px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.ov-hero-delta {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
}
.ov-delta--up   { color: #16a34a; }
.ov-delta--down { color: #dc2626; }
.ov-delta--flat { color: #9ca3af; }
.ov-hero-basis  { font-size: 11px; color: #9ca3af; margin-top: 2px; }

/* ── Live Web Signal block (AIR hero & Rec assisted block) ─── */
.lws-block {
  margin-top: 10px;
  padding: 8px 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 11px;
}
.lws-block-title {
  font-weight: 700;
  color: #15803d;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}
.lws-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.lws-block-label { color: #374151; }
.lws-block-score { font-weight: 700; color: #1a2e44; }
.lws-block-delta { margin-top: 4px; }
.lws-delta        { font-size: 11px; font-weight: 600; }
.lws-delta--up    { color: #16a34a; }
.lws-delta--down  { color: #dc2626; }
.lws-delta--flat  { color: #9ca3af; }

/* CENTER — Executive summary */
.ov-hero-summary {
  padding: 0 20px;
}
.ov-hero-col-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.ov-hero-summary p {
  font-size: 12.5px;
  line-height: 1.65;
  color: #374151;
  margin: 0 0 9px;
}
.ov-hero-summary p:last-of-type { margin-bottom: 12px; }
.ov-summary-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--teal-green);
  cursor: pointer;
  text-decoration: none;
}
.ov-summary-link:hover { text-decoration: underline; }
#cmp-summary-refresh-btn {
  margin-top: 12px;
  margin-bottom: 0;
}
.ov-empty-summary { font-size: 12.5px; color: #9ca3af; font-style: italic; margin: 0; }
.ov-empty-summary-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ov-empty-summary-wrap .ov-empty-summary { font-style: normal; line-height: 1.45; }
.ov-empty-summary-reload { margin: 0; }

/* RIGHT — Strategic priorities */
.ov-hero-priorities {
  border-left: 1px solid #f0f0f0;
  padding-left: 20px;
}
.ov-priority-item {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.ov-priority-item:last-child { margin-bottom: 0; }
.ov-priority-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-orange-purple-grad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ov-priority-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
  line-height: 1.35;
}
.ov-priority-desc {
  font-size: 11.5px;
  color: #6b7280;
  margin-bottom: 5px;
  line-height: 1.5;
}
.ov-impact {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.ov-impact--high   { background: #fee2e2; color: #dc2626; }
.ov-impact--medium { background: #fef9c3; color: #a16207; }
.ov-impact--low    { background: #f0fdf4; color: #16a34a; }
.ov-impact--urgent { background: #fee2e2; color: #dc2626; }

/* ══ 2. AI INTELLIGENCE SIGNALS ══════════════════════════════════════════════ */
.ov-signals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 14px;
}
.ov-signal-card {
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 18px;
}
.ov-signal-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
.ov-signal-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}
.ov-signal-score {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
/* Per-model confidence breakdown */
.ov-conf-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
}
.ov-conf-model {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
}
.ov-conf-model-val { font-weight: 600; }
.ov-signal-denom {
  font-size: 13px;
  font-weight: 400;
  color: #9ca3af;
}
.ov-signal-rating {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 2px;
  margin-bottom: 8px;
}
/* Sparkline */
.ov-sparkline { margin-bottom: 8px; height: 32px; }
.ov-spark-svg { width: 100%; height: 32px; overflow: visible; display: block; }
.ov-spark-line {
  fill: none;
  stroke: var(--teal-green);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ov-signal-interp {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 8px;
}
.ov-signal-explain {
  border-top: 1px solid #f0f0f0;
  padding-top: 8px;
  margin-top: 6px;
}
.ov-explain-icon {
  font-size: 11px;
  color: var(--teal-green);
  cursor: default;
  display: block;
  margin-bottom: 4px;
}
.ov-explain-text {
  font-size: 11.5px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}
/* Model Divergence card overrides */
.ov-signal-card--div { grid-column: span 1; }
.ov-signal-div-level {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1;
}
.ov-div-bars { margin: 8px 0 6px; }
.ov-div-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #9ca3af;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ov-div-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.ov-div-dim {
  font-size: 11.5px;
  color: #374151;
  min-width: 110px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-div-bar-wrap {
  flex: 1;
  height: 5px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}
.ov-div-bar { height: 100%; border-radius: 3px; min-width: 4px; transition: width 0.4s ease; }
.ov-div-val {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  min-width: 22px;
  text-align: right;
}

/* ══ 3+4. DIMENSION TABLE + MATRIX ══════════════════════════════════════════ */
.ov-two-col-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ov-col-main, .ov-col-side {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 20px 22px;
}
.ov-matrix-sub {
  font-size: 12px;
  color: #9ca3af;
  margin: 0 0 12px;
  line-height: 1.4;
}
/* Dimension table */
.ov-dim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ov-dim-table thead th {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 0 6px 10px 0;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  white-space: nowrap;
}
.ov-dim-table thead th:not(:first-child) { text-align: center; }
.ov-dim-table tbody tr { border-bottom: 1px solid #f9fafb; }
.ov-dim-table tbody tr:last-child { border-bottom: none; }
.ov-dim-table tbody td { padding: 9px 6px 9px 0; vertical-align: middle; }
.ov-dim-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #374151;
  font-weight: 500;
}
.ov-dim-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #9ca3af;
}
.ov-dim-score {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.ov-dim-denom {
  font-size: 10.5px;
  color: #9ca3af;
  font-weight: 400;
}
.ov-dim-rating { font-size: 11.5px; font-weight: 500; text-align: center; }
.ov-dim-delta  { font-size: 11.5px; color: #6b7280; text-align: center; }
.ov-dim-trend  { font-size: 11.5px; color: #9ca3af; text-align: center; }

/* AIRepScore by Dimension — correction table */
.ov-dim-th-num   { text-align: center !important; white-space: nowrap; }
.ov-dim-th-corr  { text-align: center !important; white-space: nowrap; }
.ov-dim-corr-cell { text-align: center; }
.lws-corr {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
.lws-corr--pos  { color: #15803d; background: #f0fdf4; }
.lws-corr--neg  { color: #b91c1c; background: #fef2f2; }
.lws-corr--flat { color: #9ca3af; }

/* Web Search Signals card */
.ws-card {
  margin-top: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
}
.ws-card-header {
  padding: 10px 14px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ws-card-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #374151;
}
.ws-card-sub {
  font-size: 11px;
  color: #9ca3af;
}
.ws-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 520px) { .ws-cols { grid-template-columns: 1fr; } }
.ws-col {
  padding: 10px 12px;
}
.ws-col:first-child { border-right: 1px solid #f3f4f6; }
.ws-col-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.ws-col-header--pos { color: #15803d; }
.ws-col-header--neg { color: #b91c1c; }
.ws-signal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ws-signal-item {
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.ws-signal-icon {
  font-size: 14px;
  line-height: 1.2;
  flex-shrink: 0;
}
.ws-signal-item--positive .ws-signal-icon { color: #15803d; }
.ws-signal-item--negative .ws-signal-icon { color: #b91c1c; }
.ws-signal-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-signal-summary { color: #374151; line-height: 1.4; }
.ws-signal-source  { font-size: 10px; color: #9ca3af; }
.ws-signal-empty   { color: #9ca3af; font-style: italic; padding: 4px 0; }

.lws-corr-row {
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.5;
}
.lws-corr-label { color: var(--text-muted, #6b7280); }
.lws-corr-val { font-weight: 600; color: var(--text, #111827); }
.lws-corr-val.lws-corr--pos,
.lws-corr-val.lws-corr--neg,
.lws-corr-val.lws-corr--flat {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
.lws-corr-val.lws-corr--pos  { color: #15803d; background: #f0fdf4; }
.lws-corr-val.lws-corr--neg  { color: #b91c1c; background: #fef2f2; }
.lws-corr-val.lws-corr--flat { color: #9ca3af; background: transparent; }

body.theme-dark .ws-card {
  border-color: #2a3145;
  background: #1c2029;
}
body.theme-dark .ws-card-header {
  background: #1e2638;
  border-bottom-color: #2a3145;
}
body.theme-dark .ws-card-title { color: #c5cee0; }
body.theme-dark .ws-card-sub  { color: #7a8499; }
body.theme-dark .ws-col { background: #1c2029; }
body.theme-dark .ws-col:first-child { border-right-color: #2a3145; }
body.theme-dark .ws-col-header--pos { color: #6ee7a0; }
body.theme-dark .ws-col-header--neg { color: #fca5a5; }
body.theme-dark .ws-signal-summary { color: #c5cee0; }
body.theme-dark .ws-signal-source  { color: #7a8499; }
body.theme-dark .ws-signal-empty   { color: #7a8499; }
body.theme-dark .ws-signal-item--positive .ws-signal-icon { color: #6ee7a0; }
body.theme-dark .ws-signal-item--negative .ws-signal-icon { color: #fca5a5; }

body.theme-dark .lws-corr-label { color: #7a8499; }
body.theme-dark .lws-corr-val  { color: #c5cee0; }
body.theme-dark .lws-corr-val.lws-corr--pos { color: #6ee7a0 !important; background: rgba(22, 101, 52, 0.35) !important; }
body.theme-dark .lws-corr-val.lws-corr--neg { color: #fca5a5 !important; background: rgba(127, 29, 29, 0.35) !important; }
body.theme-dark .lws-corr-val.lws-corr--flat { color: #6b788e !important; background: transparent !important; }

body.theme-dark .model-panel-ver {
  background: #1e2638;
  color: #b8c4d8;
  border: 1px solid #2a3145;
}
body.theme-dark .model-panel-time {
  color: #c5cee0;
}
body.theme-dark .model-panel-name {
  color: #eef1f8;
}
body.theme-dark .lws-panel-section-ttl { color: #7a8499; }
body.theme-dark .air-old-dim-text { color: #b0bbd0; }

/* Trend chart — trained-only dashed line */
.trend-line--trained {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.trend-dot--trained { fill: #94a3b8; }

/* ══ 5. TREND ════════════════════════════════════════════════════════════════ */
.ov-trend-row {
  display: block;
}
.ov-takeaway-box {
  background: #f9fafb;
  border-radius: 8px;
  padding: 14px 16px;
}
.ov-takeaway-ttl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 10px;
}
.ov-takeaway-list { list-style: none; padding: 0; margin: 0; }
.ov-takeaway-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  color: #374151;
  line-height: 1.5;
  margin-bottom: 9px;
}
.ov-takeaway-item:last-child { margin-bottom: 0; }
.ov-takeaway-check {
  color: var(--teal-green);
  flex-shrink: 0;
  font-size: 12px;
  margin-top: 1px;
}

/* ══ 6. STRATEGIC ANALYSIS ═══════════════════════════════════════════════════ */
.ov-synth-body {}
.ov-synth-p {
  font-size: 13px;
  line-height: 1.7;
  color: #374151;
  margin: 0 0 10px;
}
.ov-synth-note {
  color: #374151;
  font-style: normal;
}
/* LWS influence note in synthesis */
.ov-synth-lws-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #374151;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  padding: 9px 12px;
  margin: 4px 0 12px;
  line-height: 1.5;
}
.ov-synth-lws-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
/* Dimension table averages footer */
.ov-dim-avg-row {
  border-top: 2px solid #e5e7eb;
}
.ov-dim-avg-row td {
  padding-top: 10px;
  background: #f9fafb;
}
.ov-synth-findings {
  margin-top: 14px;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}
.ov-synth-findings-ttl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 8px;
}
.ov-synth-findings-list {
  padding-left: 18px;
  margin: 0;
}
.ov-synth-findings-list li {
  font-size: 12.5px;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 4px;
}

/* ══ Responsive ══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .ov-hero-card { grid-template-columns: 180px 1fr 220px; gap: 20px; }
  .ov-signals-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 900px) {
  .ov-hero-card { grid-template-columns: 1fr; gap: 24px; }
  .ov-hero-score { border-right: none; padding-right: 0; }
  .ov-hero-summary { padding: 0; border-top: 1px solid #f0f0f0; padding-top: 16px; }
  .ov-hero-priorities { border-left: none; padding-left: 0; border-top: 1px solid #f0f0f0; padding-top: 16px; }
  .ov-two-col-wrap { grid-template-columns: 1fr; }
  .ov-signals-grid { grid-template-columns: 1fr 1fr; }
  .ov-trend-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ov-signals-grid { grid-template-columns: 1fr; }
}

/* ══ DARK MODE OVERRIDES — ov-* Overview Components ═════════════════════════
   All ov-* components use hardcoded light hex values above.
   These overrides align them with the Design System dark palette.
   ═════════════════════════════════════════════════════════════════════════ */

/* Base cards */
body.theme-dark .ov-card,
body.theme-dark .ov-hero-card,
body.theme-dark .ov-col-main,
body.theme-dark .ov-col-side { background: #1c2029; border-color: #2a3145; }
body.theme-dark .ov-signal-card { background: #161b27; border-color: #2a3145; }

/* Dividers */
body.theme-dark .ov-hero-score { border-right-color: #2a3145; }
body.theme-dark .ov-hero-priorities { border-left-color: #2a3145; }
body.theme-dark .ov-hero-summary { border-top-color: #2a3145; }
body.theme-dark .ov-hero-priorities { border-top-color: #2a3145; }
body.theme-dark .ov-conf-breakdown { border-top-color: #2a3145; }
body.theme-dark .ov-signal-explain { border-top-color: #2a3145; }

/* Text colors */
body.theme-dark .ov-section-ttl       { color: #7a8499; }
body.theme-dark .ov-section-sub       { color: #5a6480; }
body.theme-dark .ov-hero-label        { color: #c5cee0; }
body.theme-dark .ov-hero-proj-name    { color: var(--text, #eef1f8); }
body.theme-dark .ov-hero-col-title    { color: #eef1f8; }
body.theme-dark .ov-hero-summary p    { color: #b0bbd0; }
body.theme-dark .ov-score-denom       { color: #5a6480; }
body.theme-dark .ov-hero-basis        { color: #5a6480; }
body.theme-dark .ov-signal-title      { color: #7a8499; }
body.theme-dark .ov-score-num,
body.theme-dark .ov-score-num[class*="score-"] { color: #eef1f8; }
body.theme-dark .ov-signal-score,
body.theme-dark .ov-signal-score[class*="score-"],
body.theme-dark .ov-signal-score.conf-high,
body.theme-dark .ov-signal-score.conf-moderate,
body.theme-dark .ov-signal-score.conf-low { color: #eef1f8; }
body.theme-dark .bp-radar-label { fill: #c5cee0; }
body.theme-dark .bp-radar-score,
body.theme-dark .bp-radar-score[class*="score-"] { fill: #eef1f8; }
body.theme-dark .ov-signal-rating     { color: #b0bbd0; }
body.theme-dark .ov-signal-interp     { color: #7a8499; }
body.theme-dark .ov-explain-text      { color: #7a8499; }
body.theme-dark .ov-conf-model        { color: #7a8499; }
body.theme-dark .ov-priority-title    { color: #eef1f8; }
body.theme-dark .ov-priority-desc     { color: #7a8499; }
body.theme-dark .ov-matrix-sub        { color: #5a6480; }
body.theme-dark .ov-dim-name          { color: #c5cee0; }
body.theme-dark .ov-dim-denom         { color: #5a6480; }
body.theme-dark .ov-dim-delta         { color: #7a8499; }
body.theme-dark .ov-dim-trend         { color: #5a6480; }
body.theme-dark .ov-div-dim           { color: #b0bbd0; }
body.theme-dark .ov-div-val           { color: #c5cee0; }
body.theme-dark .ov-empty-summary     { color: #5a6480; }

/* Table borders */
body.theme-dark .ov-dim-table thead th   { color: #5a6480; border-bottom-color: #2a3145; }
body.theme-dark .ov-dim-table tbody tr  { border-bottom-color: #1e2638; }

/* Web Search correction badges */
body.theme-dark .lws-corr--pos  { color: #6ee7a0; background: rgba(34, 197, 94, 0.14); }
body.theme-dark .lws-corr--neg  { color: #fca5a5; background: rgba(220, 38, 38, 0.14); }
body.theme-dark .lws-corr--flat { color: #6b788e; }

/* Dimension table average row */
body.theme-dark .ov-dim-avg-row       { border-top-color: #2a3145; }
body.theme-dark .ov-dim-avg-row td    { background: #1e2638; }
body.theme-dark .ov-dim-avg-label     { color: #c5cee0; }

/* Gauge colors aligned to Design System */
body.theme-dark .ov-gauge-bg { stroke: #2a3145; }

/* Divergence bars — dark */
body.theme-dark .ov-div-bar-wrap { background: #2a3145; }
body.theme-dark .ov-div-bar-header { color: #5a6480; }

/* Impact badges — dark */
body.theme-dark .ov-impact--high   { background: rgba(215,68,68,.15);  color: #e07068; }
body.theme-dark .ov-impact--medium { background: rgba(229,134,53,.12); color: #f0a466; }
body.theme-dark .ov-impact--low    { background: rgba(26,175,167,.12); color: var(--teal-green-from); }
body.theme-dark .ov-impact--urgent { background: rgba(215,68,68,.15);  color: #e07068; }

/* Priority numbers */
body.theme-dark .ov-priority-num { background: var(--accent-orange-purple-grad); }

/* Links */
body.theme-dark .ov-text-link   { color: var(--teal-green); }
body.theme-dark .ov-summary-link { color: var(--teal-green); }
body.theme-dark .ov-explain-icon { color: var(--teal-green); }

/* Delta */
body.theme-dark .ov-delta--up   { color: #25C32E; }
body.theme-dark .ov-delta--down { color: #D74444; }
body.theme-dark .ov-delta--flat { color: #5a6480; }

/* Sparkline */
body.theme-dark .ov-spark-line { stroke: var(--teal-green); }

/* ═══════════════════════════════════════════════════════════════════════════
   AI Brand Perception — module-specific styles
   Reuses most .ov-*, .air-*, .ov-signal-* classes from AI Reputation.
   Only brand-perception-specific additions below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page layout — mirrors AI Reputation ──────────────────────────────────── */
#view-brand-perception.view-section {
  padding: 0;
}
#view-brand-perception .bp-page {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
#view-brand-perception .air-tab-panel {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  box-sizing: border-box;
  width: 100%;
}

/* Perception Balance — read-only indicator (not a slider) */
#view-brand-perception {
  --bp-balance-grad: linear-gradient(90deg, #4B7BE5, #3BC3A9);
}

/* ── Perception Balance card ─────────────────────────────────────────────── */
.bp-balance-wrap {
  padding: 8px 0 4px;
}
.bp-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 16px;
}
.bp-balance-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-balance-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
}
.bp-balance-score {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #1f2937;
}
.bp-balance-bar-wrap {
  height: 6px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.bp-balance-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
  background: #6b7280;
}
.bp-balance-dims {
  font-size: .72rem;
  color: #9ca3af;
  line-height: 1.4;
}
.bp-balance-insight {
  font-size: .83rem;
  color: #4b5563;
  font-style: italic;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

/* ── Dominant Associations (legacy bar list — kept for reference) ─────────── */
.bp-assoc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.bp-assoc-item {
  display: grid;
  grid-template-columns: 160px 1fr 36px 60px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.bp-assoc-label {
  font-size: .82rem;
  font-weight: 500;
  color: #1f2937;
  text-transform: capitalize;
}
.bp-assoc-bar-wrap {
  height: 6px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.bp-assoc-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 4px;
  transition: width .4s ease;
}
.bp-assoc-strength {
  font-size: .78rem;
  font-weight: 600;
  color: #4b5563;
  text-align: right;
}
.bp-assoc-models {
  font-size: .72rem;
  color: #9ca3af;
  text-align: right;
}

/* ── Brand Associations Landscape ─────────────────────────────────────────── */
.bp-landscape-wrap {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.bp-landscape-chart {
  flex: 1;
  min-width: 0;
}
.bp-landscape-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  overflow: visible;
}
.bp-landscape-panel {
  width: 188px;
  flex-shrink: 0;
  padding: 14px 16px;
  background: #f9fafb;
  border: 1px solid #f0f1f3;
  border-radius: 8px;
  align-self: flex-start;
}
.bp-lp-block {
  margin-bottom: 14px;
}
.bp-lp-block:last-child {
  margin-bottom: 0;
}
.bp-lp-ttl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #6b7280;
  margin-bottom: 5px;
}
.bp-lp-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
  line-height: 1.35;
}
.bp-lp-row strong {
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}
.bp-lp-row span {
  font-size: 10px;
  color: #9ca3af;
}
.bp-lp-desc {
  font-size: 10px;
  color: #9ca3af;
  line-height: 1.5;
}

/* ── Per-model compact landscape ──────────────────────────────────────────── */
.bp-model-landscape {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f3f4f6;
}
.bp-model-landscape-ttl {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
}

@media (max-width: 720px) {
  .bp-landscape-wrap { flex-direction: column; }
  .bp-landscape-panel { width: 100%; }
}

/* ── Trend SVG ───────────────────────────────────────────────────────────── */
.bp-trend-svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* ── Model panel: brand summary ──────────────────────────────────────────── */
.air-model-brand-summary {
  color: #4b5563;
  font-size: .88rem;
  line-height: 1.6;
  padding: 8px 12px;
  background: #f9fafb;
  border-left: 3px solid #6366f1;
  border-radius: 0 6px 6px 0;
  margin-bottom: 16px;
}

/* ── Model panel: positioning risks & opportunities ──────────────────────── */
.bp-risks-opps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}
.bp-risks strong,
.bp-opps strong {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  margin-bottom: 6px;
}
.bp-risks ul,
.bp-opps ul {
  margin: 0;
  padding: 0 0 0 14px;
  font-size: .83rem;
  color: #374151;
  line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bp-balance-grid { grid-template-columns: 1fr; gap: 16px; }
  .bp-assoc-item   { grid-template-columns: 130px 1fr 32px; }
  .bp-assoc-models { display: none; }
  .bp-risks-opps   { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI Brand Perception — v0.2 Overview styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Brand Perception at a Glance ─────────────────────────────────────────── */
.bp-glance-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.bp-glance-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bp-radar-wrap {
  width: 100%;
  max-width: 440px;
}
.bp-radar-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.bp-radar-label {
  font-size: 9.5px;
  fill: #374151;
  font-family: inherit;
  font-weight: 500;
}
body.theme-dark #view-brand-perception .bp-radar-label,
body.theme-dark .bp-radar-svg .bp-radar-label {
  fill: #c5cee0;
}
.bp-radar-score {
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
}
.bp-radar-dot { fill: var(--score-good); }
.bp-legend-avg   { background: #94a3b8; border-top: 2px dashed #94a3b8; height: 0; }
.bp-radar-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
  font-size: .76rem;
  color: #6b7280;
}
.bp-legend-item { display: flex; align-items: center; gap: 6px; }
.bp-legend-line { display: inline-block; height: 2px; width: 22px; border-radius: 2px; }

/* RIGHT panel */
.bp-glance-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bp-glance-panel {
  background: #f9fafb;
  border-radius: 10px;
  padding: 14px 16px;
}
.bp-glance-sub-ttl {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #374151;
  margin-bottom: 10px;
}
.bp-glance-sub-ttl--weak    { color: #374151; }
.bp-glance-sub-ttl--balance { color: #374151; }

.bp-glance-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 28px;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.bp-glance-bar-label {
  font-size: .8rem;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-glance-bar-wrap {
  height: 7px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.bp-glance-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.bp-glance-bar-score {
  font-size: .8rem;
  font-weight: 700;
  text-align: right;
}

/* Perception Balance — read-only indicator */
.bp-balance-insight-sm {
  font-size: .78rem;
  color: #4b5563;
  font-style: italic;
  margin: 0 0 10px;
  line-height: 1.5;
}
.bp-balance-slider-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding-top: 12px;
}
.bp-balance-pole {
  font-size: .72rem;
  color: #6b7280;
  font-weight: 600;
  white-space: nowrap;
}
.bp-balance-track {
  flex: 1;
  height: 8px;
  background: var(--bp-balance-grad, linear-gradient(90deg, #4B7BE5, #3BC3A9));
  border-radius: 10px;
  position: relative;
  overflow: visible;
}
.bp-balance-indicator {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 11px;
  background: #334155;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  pointer-events: none;
}
.bp-balance-scores {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: #6b7280;
  margin-top: 2px;
}
.bp-balance-score-val { font-weight: 600; }

/* ── Positioning Map + Distribution row ──────────────────────────────────── */
.bp-map-dist-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.bp-map-card, .bp-dist-card {
  padding: 20px 24px;
}
.bp-map-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
}
.bp-map-axis     { stroke: #9ca3af; stroke-width: 1.5; }
.bp-map-quad     { stroke: #c5cdd8; stroke-width: 1; stroke-dasharray: 4 3; }
.bp-map-axis-lbl { font-size: 9px; fill: #6b7280; font-family: inherit; }
.bp-map-quad-lbl { font-size: 8.5px; fill: #9ca3af; font-family: inherit; }
.bp-map-dot-brand {
  fill: #6366f1;
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 1px 3px rgba(99,102,241,.4));
}
.bp-map-brand-lbl {
  font-size: 10px;
  fill: #374151;
  font-weight: 600;
  font-family: inherit;
}
.bp-map-insight {
  font-size: .78rem;
  color: #6b7280;
  font-style: italic;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 6px;
}

/* Distribution */
.bp-dist-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.bp-dist-row {
  display: grid;
  grid-template-columns: minmax(150px, 168px) 1fr 40px;
  align-items: center;
  gap: 10px;
}
.bp-dist-label { font-size: .78rem; color: #374151; line-height: 1.3; }
.bp-dist-bar-wrap { height: 8px; background: #f3f4f6; border-radius: 4px; overflow: hidden; }
.bp-dist-bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
.bp-dist-pct { font-size: .8rem; font-weight: 600; color: #374151; text-align: right; }
.bp-dist-insight {
  font-size: .78rem;
  color: #4b5563;
  font-style: italic;
  margin: 12px 0 0;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 6px;
}

/* ── Perception by Dimension table ───────────────────────────────────────── */
.bp-dim-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.bp-dim-tbl thead th {
  padding: 8px 10px;
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  border-bottom: 2px solid #f3f4f6;
  white-space: nowrap;
}
.bp-dim-tbl tbody tr {
  border-bottom: 1px solid #f9fafb;
  transition: background .15s;
}
.bp-dim-tbl tbody tr:hover { background: #fafafa; }
.bp-dim-tbl td { padding: 8px 10px; vertical-align: middle; }

.bp-tbl-dim-cell {
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 160px;
}
.bp-tbl-score-cell { min-width: 120px; }
.bp-tbl-score-row { display: flex; align-items: center; gap: 8px; }
.bp-tbl-score-num {
  font-weight: 700;
  font-size: .9rem;
  min-width: 28px;
}
.bp-tbl-bar-wrap {
  flex: 1;
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}
.bp-tbl-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}

.bp-tbl-delta-cell { color: #9ca3af; text-align: center; font-size: .78rem; }
.bp-tbl-rating-cell { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.bp-tbl-trend-cell { min-width: 48px; }
.bp-tbl-spark { display: block; }
.bp-tbl-model, .bp-tbl-avg { text-align: center !important; }
.bp-tbl-mcell {
  text-align: center;
  font-weight: 600;
  font-size: .82rem;
  min-width: 52px;
}

/* ── Model panel: brand summary ──────────────────────────────────────────── */
.bp-panel-summary {
  font-size: .88rem;
  color: #4b5563;
  line-height: 1.6;
  padding: 10px 14px;
  background: #f9fafb;
  border-left: 3px solid #14b8a6;
  border-radius: 0 6px 6px 0;
  margin: 0 0 20px;
}
.bp-panel-assoc {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
}
.bp-panel-assoc strong {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  margin-bottom: 10px;
}

/* ── Associations ─────────────────────────────────────────────────────────── */
.bp-assoc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bp-assoc-item {
  display: grid;
  grid-template-columns: 160px 1fr 36px 60px;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.bp-assoc-label { font-size: .82rem; font-weight: 500; color: #1f2937; text-transform: capitalize; }
.bp-assoc-bar-wrap { height: 6px; background: #f3f4f6; border-radius: 4px; overflow: hidden; }
.bp-assoc-bar { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 4px; transition: width .4s ease; }
.bp-assoc-strength { font-size: .78rem; font-weight: 600; color: #4b5563; text-align: right; }
.bp-assoc-models   { font-size: .72rem; color: #9ca3af; text-align: right; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bp-glance-layout { grid-template-columns: 1fr 300px; gap: 24px; }
}
@media (max-width: 900px) {
  .bp-glance-layout   { grid-template-columns: 1fr; }
  .bp-glance-left     { max-width: 320px; margin: 0 auto; }
  .bp-map-dist-row    { grid-template-columns: 1fr; }
  .bp-glance-bar-row  { grid-template-columns: 110px 1fr 28px; }
  .bp-assoc-item      { grid-template-columns: 130px 1fr 32px; }
  .bp-assoc-models    { display: none; }
}
@media (max-width: 600px) {
  .bp-dim-tbl .bp-tbl-trend-cell { display: none; }
  .bp-glance-bar-row  { grid-template-columns: 90px 1fr 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI COMPARISON — page styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ DARK MODE OVERRIDES — bp-* Brand Perception Components ═════════════════
   Both v0.1 (ov-card based) and v0.2 (bp-glance, bp-map, bp-dist) styles.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Glance panels (Strongest/Weakest/Balance) ───────────────────────────── */
body.theme-dark .bp-glance-panel       { background: #1e2638; }
body.theme-dark .bp-glance-sub-ttl     { color: #b0bbd0; }
body.theme-dark .bp-glance-bar-label   { color: #b0bbd0; }
body.theme-dark .bp-glance-bar-wrap    { background: #2a3145; }

/* ── Perception Balance indicator ───────────────────────────────────────────── */
body.theme-dark .bp-balance-insight-sm { color: #8a95ab; }
body.theme-dark .bp-balance-pole       { color: #7a8499; }
body.theme-dark .bp-balance-track      { background: var(--bp-balance-grad, linear-gradient(90deg, #4B7BE5, #3BC3A9)); }
body.theme-dark .bp-balance-indicator  { background: #c5cee0; }
body.theme-dark .bp-balance-scores     { color: #7a8499; }
body.theme-dark .bp-balance-score-val  { color: #c5cee0; }

/* ── Positioning Map card ────────────────────────────────────────────────── */
body.theme-dark .bp-map-card           { background: #1c2029; border-color: #2a3145; }
body.theme-dark .bp-map-axis           { stroke: #5a6480; }
body.theme-dark .bp-map-quad           { stroke: #4a5568; }
body.theme-dark .bp-map-axis-lbl       { fill: #b0bbd0; }
body.theme-dark .bp-map-quad-lbl       { fill: #9aa5ba; }
body.theme-dark .bp-map-brand-lbl      { fill: #c5cee0; }

#view-brand-perception .trend-grid { stroke: #c5cdd8; }
body.theme-dark #view-brand-perception .trend-grid { stroke: #2a3145; }
body.theme-dark #view-brand-perception .trend-label { fill: #7a8499; }
body.theme-dark .bp-map-dot-brand      { stroke: #1c2029; }

/* ── Distribution card ───────────────────────────────────────────────────── */
body.theme-dark .bp-dist-card          { background: #1c2029; border-color: #2a3145; }
body.theme-dark .bp-dist-label         { color: #b0bbd0; }
body.theme-dark .bp-dist-bar-wrap      { background: #2a3145; }
body.theme-dark .bp-dist-pct           { color: #c5cee0; }
body.theme-dark .bp-dist-insight       { background: #1e2638; color: #8a95ab; }

/* ── bp-balance v0.1 ─────────────────────────────────────────────────────── */
body.theme-dark .bp-balance-label      { color: #7a8499; }
body.theme-dark .bp-balance-score      { color: #eef1f8; }
body.theme-dark .bp-balance-bar-wrap   { background: #2a3145; }
body.theme-dark .bp-balance-dims       { color: #5a6480; }
body.theme-dark .bp-balance-insight    { color: #8a95ab; border-top-color: #2a3145; }

/* ── Dimension table ─────────────────────────────────────────────────────── */
body.theme-dark .bp-dim-tbl thead th   { color: #5a6480; border-bottom-color: #2a3145; }
body.theme-dark .bp-dim-tbl tbody tr   { border-bottom-color: #1e2638; }
body.theme-dark .bp-dim-tbl td         { color: #b0bbd0; }

/* ── Associations / risks-opps ───────────────────────────────────────────── */
body.theme-dark .bp-assoc-item         { border-bottom-color: #1e2638; }
body.theme-dark .bp-assoc-term         { color: #eef1f8; }
body.theme-dark .bp-assoc-bar-wrap     { background: #2a3145; }
body.theme-dark .bp-risks-opps-col     { background: #1c2029; border-color: #2a3145; }
body.theme-dark .bp-col-ttl            { color: #7a8499; }
body.theme-dark .bp-risk-item,
body.theme-dark .bp-opp-item           { color: #b0bbd0; }

/* ── Map legend text ─────────────────────────────────────────────────────── */
body.theme-dark .bp-map-legend-dot     { border-color: #1c2029; }
body.theme-dark .bp-map-legend-label   { color: #7a8499; }

/* ── Map insight caption + landscape legend panel ─────────────────────────── */
body.theme-dark .bp-map-insight        { background: #1e2638; color: #8a95ab; border-color: #2a3145; }
body.theme-dark .bp-landscape-panel    { background: #1e2638; border-color: #2a3145; }
body.theme-dark .bp-lp-ttl             { color: #7a8499; }
body.theme-dark .bp-lp-row strong      { color: #c5cee0; }
body.theme-dark .bp-lp-row span        { color: #5a6480; }
body.theme-dark .bp-lp-desc            { color: #5a6480; }
body.theme-dark .bp-model-landscape    { border-top-color: #2a3145; }
body.theme-dark .bp-panel-summary {
  background: #1e2638;
  color: #b0bbd0;
  border-left-color: var(--teal-green);
}

/* ── Brand radar legend + glance layout ──────────────────────────────────── */
body.theme-dark .bp-radar-legend       { color: #7a8499; }
body.theme-dark .bp-legend-brand       { background: var(--teal-green-grad); }
body.theme-dark .bp-legend-avg         { background: #5a6480; border-top-color: #5a6480; }

.cmp-page { display: flex; flex-direction: column; min-height: 0; }

#view-ai-comparison.view-section {
  padding: 0;
}
#view-ai-comparison .cmp-page {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
#view-ai-comparison .air-tab-panel {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  box-sizing: border-box;
  width: 100%;
}
#view-ai-comparison .ov-stack {
  padding: 0 0 48px;
}

/* ── Delta helpers ────────────────────────────────────────────────────── */
.cmp-delta--pos { color: #0e9f6e; }
.cmp-delta--neg { color: #e02424; }

/* ── Hero 2.0 ─────────────────────────────────────────────────────────── */
.cmp-hero2 { padding: 20px 24px 24px; }

/* ── New 3-column hero (matches AI Rep / BP) ─────────────── */
.cmp-hero-score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  border-right: 1px solid #e5e7eb;
  min-width: 0;
}
.cmp-hero-gauges {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
.cmp-hero-gauge-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cmp-hero-gauge-lbl {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
  max-width: 110px;
}

/* Rank blocks (two stacked #N of N) */
.cmp-rank-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.cmp-rank-num {
  font-size: 3.2rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  margin: 8px 0 4px;
}
.cmp-rank-hash {
  font-size: 2rem;
  font-weight: 800;
  vertical-align: super;
  margin-right: 1px;
}
.cmp-rank-of {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
  margin-left: 4px;
}
.cmp-rank-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.cmp-peer-delta {
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
  margin-bottom: 2px;
}
.cmp-peer-delta--pos  { color: #15803d; }
.cmp-peer-delta--neg  { color: #dc2626; }
.cmp-peer-delta--neu  { color: #6b7280; }
.cmp-rank-divider {
  width: 80%;
  height: 1px;
  background: #e5e7eb;
  margin: 16px auto;
}

/* Brand pills — single horizontal row, scrollable on overflow */
.cmp-brand-pills-row {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto;
  margin-bottom: 18px; padding-bottom: 2px; scrollbar-width: none;
}
.cmp-brand-pills-row::-webkit-scrollbar { display: none; }
.cmp-brand-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 9999px; white-space: nowrap; flex-shrink: 0;
  background: #f3f4f6; border: 1px solid #e5e7eb;
  font-size: 12px; font-weight: 500; color: var(--text, #374151);
}
.cmp-brand-pill--you { background: #eff6ff; border-color: #bfdbfe; font-weight: 600; color: #1e40af; }
.cmp-brand-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmp-you-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #1e40af;
  background: #dbeafe; padding: 1px 5px; border-radius: 9999px; margin-left: 2px;
}

/* 3-column bordered card */
.cmp-hero2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}
.cmp-hero2-position { padding: 28px 28px; border-right: 1px solid #e5e7eb; }
.cmp-hero2-glance   { padding: 20px 20px; border-right: 1px solid #e5e7eb; }
.cmp-hero2-lb       { padding: 20px 16px; background: #fafafa; }

.cmp-h2-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-muted, #9ca3af); margin-bottom: 8px;
}
.cmp-hero2-name {
  font-size: 19px; font-weight: 800; color: var(--text, #111827);
  margin: 0 0 12px; line-height: 1.2; word-break: break-word;
}

/* Score blocks */
.cmp-score-row   { display: flex; gap: 28px; flex-wrap: nowrap; }
.cmp-score-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cmp-score-hdr   { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.cmp-score-icon  { width: 16px; height: 16px; flex-shrink: 0; }
.cmp-score-ttl   { font-size: 11px; color: var(--text-muted, #6b7280); font-weight: 500; }

/* Rank — the hero number */
.cmp-rank-big  {
  font-size: 56px; font-weight: 800; line-height: 1;
  letter-spacing: -0.04em; margin-bottom: 4px;
}
.cmp-rank-of   {
  font-size: 18px; font-weight: 500;
  color: var(--text-muted, #9ca3af); margin-left: 5px;
  letter-spacing: 0;
}

/* Score — secondary */
.cmp-score-sub   { font-size: 17px; font-weight: 600; color: var(--text-muted, #6b7280); line-height: 1; margin-bottom: 10px; }
.cmp-score-denom { font-size: 12px; font-weight: 400; color: var(--text-muted, #9ca3af); margin-left: 1px; }

.cmp-score-vs    { font-size: 11px; color: var(--text-muted, #9ca3af); margin-top: 2px; }
.cmp-score-delta { font-size: 14px; font-weight: 700; }
.cmp-delta-pos   { color: #059669; }
.cmp-delta-neg   { color: #dc2626; }

/* At-a-glance */
.cmp-obs-list2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cmp-obs-item  { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; color: var(--text, #374151); line-height: 1.55; }
.cmp-obs-bullet { color: #1a56db; flex-shrink: 0; font-weight: 700; margin-top: 1px; }

/* Leaderboard */
.cmp-lb2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-lb2-col  { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cmp-lb2-ttl  {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted, #9ca3af);
  margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.cmp-lb2-row { display: flex; align-items: flex-start; gap: 4px; padding: 3px 0; color: var(--text, #374151); }
.cmp-lb2-row--you { font-weight: 700; }
.cmp-lb2-rank  { font-size: 9px; color: var(--text-muted, #9ca3af); min-width: 10px; padding-top: 1px; }
.cmp-lb2-dot   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.cmp-lb2-name  { flex: 1; font-size: 11px; line-height: 1.3; word-break: break-word; min-width: 0; }
.cmp-lb2-score { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 11px; white-space: nowrap; padding-top: 1px; }

/* ── Positioning Map ──────────────────────────────────────────────────── */
.cmp-position-map { width: 100%; }
.cmp-map-svg      { display: block; width: 100%; height: auto; font-family: inherit; }
.cmp-map-legend   {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 10px 4px 2px; margin-top: 4px;
}
.cmp-map-leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text, #374151); }
.cmp-map-leg-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmp-map-leg-name em { font-style: normal; color: var(--text-muted, #9ca3af); font-size: 10px; }

/* ── Score Distribution ───────────────────────────────────────────────── */
.cmp-dist-wrap      { display: flex; flex-direction: column; gap: 48px; padding: 8px 0 4px; }
.cmp-dist-row       { display: flex; flex-direction: column; gap: 8px; }
.cmp-dist-label     { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #6b7280); }
.cmp-dist-track-wrap{ display: flex; flex-direction: column; gap: 4px; }
.cmp-dist-track {
  position: relative; height: 20px;
  background: #f3f4f6;
  border-radius: 4px; border: 1px solid #e5e7eb;
  margin: 72px 0 68px;
}
.cmp-dist-item {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.cmp-dist-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  position: relative; z-index: 1;
}
.cmp-dist-dot--you  { width: 16px; height: 16px; }

/* Score and name labels — positioned via inline style from JS */
.cmp-dist-score {
  position: absolute; font-size: 9px; font-weight: 600;
  color: var(--text, #374151); white-space: nowrap;
}
.cmp-dist-name {
  position: absolute; font-size: 9px; white-space: nowrap;
  color: var(--text-muted, #6b7280);
}
.cmp-dist-name--you { font-weight: 700; color: var(--text, #111827); }

.cmp-dist-avg {
  position: absolute; top: -100%; bottom: -100%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none; z-index: 0;
}
.cmp-dist-avg-line  { flex: 1; width: 1px; background: #9ca3af; opacity: 0.4; }
.cmp-dist-avg-label { font-size: 8px; color: #9ca3af; white-space: nowrap; }
.cmp-dist-axis {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--text-muted, #9ca3af);
}

/* ── Dimension Matrix ─────────────────────────────────────────────────── */
.cmp-mat-wrap   { overflow-x: auto; }
.cmp-mat-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  margin-bottom: 6px;
}
.cmp-mat-table  { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-mat-table thead tr { border-bottom: 2px solid #e5e7eb; }
.cmp-mat-table tbody tr { border-bottom: 1px solid #f3f4f6; }
.cmp-mat-table tbody tr:hover { background: #fafafa; }
.cmp-mat-dim    { padding: 9px 14px; color: var(--text, #374151); font-weight: 500; white-space: nowrap; }
.cmp-mat-icon   { margin-right: 6px; opacity: 0.5; font-style: normal; }
.cmp-mat-hdr    { padding: 8px 10px; font-size: 11px; font-weight: 600; text-align: center; }
.cmp-mat-hdr--primary {
  font-weight: 700; background: #f8faff;
  border-bottom: 2px solid currentColor !important;
}
.cmp-mat-you-badge {
  display: block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; opacity: 0.6; margin-bottom: 1px;
}
.cmp-mat-hdr--avg { color: var(--text-muted, #6b7280); font-style: italic; }
.cmp-mat-cell   { padding: 9px 10px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text, #374151); }
.cmp-mat-cell--primary { background: #f8faff; font-weight: 600; }
.cmp-mat-cell--high    { color: #065f46; }
.cmp-mat-cell--low     { color: #9a3412; }
.cmp-mat-cell--avg     { color: var(--text-muted, #6b7280); font-style: italic; }

/* ── BP Radar ─────────────────────────────────────────────────────────── */
.cmp-bp-radar  { display: flex; justify-content: center; }
.cmp-radar-svg { font-family: inherit; }

/* ── Strengths & Gaps ─────────────────────────────────────────────────── */
.cmp-sg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cmp-sg-col  { display: flex; flex-direction: column; gap: 0; }
.cmp-sg-hdr  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 10px; margin-bottom: 0; border-bottom: 2px solid currentColor; }
.cmp-sg-hdr--lead { color: #059669; }
.cmp-sg-hdr--gap  { color: #dc2626; }
.cmp-sg-row  { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid #f3f4f6; }
.cmp-sg-rank { font-size: 11px; font-weight: 700; color: var(--text-muted, #9ca3af); min-width: 20px; }
.cmp-sg-dim  { flex: 1; color: var(--text, #374151); font-weight: 500; }
.cmp-sg-tag  { font-size: 9px; padding: 2px 6px; border-radius: 9999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cmp-sg-tag--airep  { background: #eff6ff; color: #1a56db; }
.cmp-sg-tag--bp     { background: #f0fdf4; color: #0e9f6e; }
.cmp-sg-tag--brandperception { background: #f0fdf4; color: #0e9f6e; }
.cmp-sg-score { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text, #374151); min-width: 28px; text-align: right; }
.cmp-sg-delta { font-size: 11px; min-width: 64px; text-align: right; font-weight: 600; }
.cmp-sg-pos   { color: #059669; }
.cmp-sg-neg   { color: #dc2626; }

/* ── Association Comparison ───────────────────────────────────────────── */
.cmp-assoc-grid   { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.cmp-assoc-col    { flex: 1; min-width: 120px; border-right: 1px solid #e5e7eb; }
.cmp-assoc-col:last-child { border-right: none; }
.cmp-assoc-header {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  border-bottom: 2px solid transparent;
}
.cmp-assoc-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmp-assoc-name { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.cmp-assoc-you  { font-size: 9px; font-weight: 700; text-transform: uppercase; background: #eff6ff; color: #1a56db; padding: 1px 5px; border-radius: 9999px; }
.cmp-assoc-words {
  padding: 14px 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.cmp-assoc-word {
  display: block; color: var(--text, #1f2937); line-height: 1.35;
}

/* ── Takeaways ────────────────────────────────────────────────────────── */
.cmp-tw-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cmp-tw-card  {
  display: flex; gap: 12px; padding: 16px 18px;
  border-radius: 10px; border: 1px solid #e5e7eb;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.cmp-tw-card--leader  { border-left: 3px solid #059669; }
.cmp-tw-card--strength{ border-left: 3px solid #1a56db; }
.cmp-tw-card--gap     { border-left: 3px solid #d97706; }
.cmp-tw-card--info    { border-left: 3px solid #7c3aed; }
.cmp-tw-icon  { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.cmp-tw-body  { display: flex; flex-direction: column; gap: 4px; }
.cmp-tw-ttl   { font-size: 13px; font-weight: 700; color: var(--text, #111827); }
.cmp-tw-txt   { font-size: 12px; color: var(--text-muted, #6b7280); line-height: 1.55; }

/* ── Peer Modal ───────────────────────────────────────────────────────── */
.cmp-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.cmp-modal {
  background: #fff; border-radius: 12px; padding: 28px;
  width: 480px; max-width: 95vw; box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  display: flex; flex-direction: column; gap: 16px;
}
.cmp-modal-hdr  { display: flex; align-items: center; justify-content: space-between; }
.cmp-modal-ttl  { font-size: 16px; font-weight: 700; color: var(--text, #111827); margin: 0; }
.cmp-modal-close{ background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted, #6b7280); padding: 0 4px; }
.cmp-modal-sub  { font-size: 13px; color: var(--text-muted, #6b7280); margin: 0; }
.cmp-peer-list  { display: flex; flex-direction: column; gap: 12px; }
.cmp-peer-row   { display: flex; align-items: center; gap: 12px; }
.cmp-peer-label { font-size: 12px; font-weight: 600; min-width: 44px; color: var(--text, #374151); }
.cmp-peer-select{ flex: 1; }
.cmp-modal-footer { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid #f3f4f6; }
.cmp-modal-footer .btn,
.cmp-modal-footer .btn-secondary { margin-top: 0; }

/* ── Utility ──────────────────────────────────────────────────────────── */
.cmp-nd { color: var(--text-muted, #9ca3af); font-size: 13px; margin: 0; }

/* Configure Peers gear icon button — inline in left bar */
.cmp-cfg-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: none; border: 1px solid #d1d5db; border-radius: 4px;
  color: var(--text-muted, #6b7280); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0; margin-left: 2px;
}
.cmp-cfg-icon-btn:hover { border-color: #1a56db; color: #1a56db; background: #eff6ff; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .cmp-hero2-grid { grid-template-columns: 1fr 1fr; }
  .cmp-hero2-lb   { grid-column: 1 / -1; border-top: 1px solid #e5e7eb; border-right: none; background: #fafafa; }
  .cmp-hero2-position { border-bottom: 0; }
  .cmp-sg-grid    { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cmp-hero2      { padding: 16px; }
  .cmp-hero2-grid { grid-template-columns: 1fr; }
  .cmp-hero2-position { border-right: none; border-bottom: 1px solid #e5e7eb; }
  .cmp-hero2-glance   { border-right: none; border-bottom: 1px solid #e5e7eb; }
  .cmp-hero2-lb       { border-top: none; }
  .cmp-score-row  { flex-wrap: wrap; }
  .cmp-lb2-grid   { grid-template-columns: 1fr; }
  .cmp-assoc-grid { flex-direction: column; }
  .cmp-assoc-col  { border-right: none; border-bottom: 1px solid #e5e7eb; }
}

/* ══ DARK MODE OVERRIDES — cmp-* AI Comparison Components ═══════════════════
   ═════════════════════════════════════════════════════════════════════════ */

/* Brand pills */
body.theme-dark .cmp-brand-pill        { background: #1e2638; border-color: #2a3145; color: #c5cee0; }
body.theme-dark .cmp-brand-pill--you   { background: rgba(26,175,167,.12); border-color: var(--teal-green); color: var(--teal-green-from); }
body.theme-dark .cmp-you-tag           { background: rgba(26,175,167,.2); color: var(--teal-green-from); }

/* Hero overview card (3-column) */
body.theme-dark .cmp-hero2-grid        { background: #1c2029; border-top-color: #2a3145; }
body.theme-dark .cmp-hero2-position    { border-right-color: #2a3145; }
body.theme-dark .cmp-hero2-glance      { border-right-color: #2a3145; }
body.theme-dark .cmp-hero2-lb          { background: #161b27; border-top-color: #2a3145; border-right-color: #2a3145; }
body.theme-dark .cmp-hero2-name        { color: #eef1f8; }

/* Leaderboard rows */
body.theme-dark .cmp-lb2-row           { border-bottom-color: #1e2638; color: #c5cee0; }
body.theme-dark .cmp-lb2-row--you      { background: rgba(26,175,167,.08); }
body.theme-dark .cmp-lb2-rank          { color: #5a6480; }
body.theme-dark .cmp-lb2-name          { color: #c5cee0; }
body.theme-dark .cmp-lb2-score         { color: #eef1f8; }

/* Score ranking badges */
body.theme-dark .cmp-rank-num          { color: #eef1f8; }
body.theme-dark .cmp-rank-denom        { color: #5a6480; }
body.theme-dark .cmp-rank-sub          { color: #7a8499; }
body.theme-dark .cmp-peer-avg-delta    { color: #7a8499; }

/* Competitive Positioning Map SVG grid lines */
body.theme-dark .cmp-map-leg-item      { color: #b0bbd0; }

/* Score Distribution track */
body.theme-dark .cmp-dist-track        { background: #1e2638; border-color: #2a3145; }
body.theme-dark .cmp-dist-label        { color: #7a8499; }

/* Dimension Matrix */
body.theme-dark .cmp-mat-table thead tr{ border-bottom-color: #2a3145; }
body.theme-dark .cmp-mat-table tbody tr{ border-bottom-color: #1e2638; }
body.theme-dark .cmp-mat-table tbody tr:hover { background: #1e2638; }
body.theme-dark .cmp-mat-hdr--primary  { background: rgba(26,175,167,.1); }
body.theme-dark .cmp-mat-cell--primary { background: rgba(26,175,167,.07); }
body.theme-dark .cmp-mat-cell--high    { color: var(--teal-green-from); }
body.theme-dark .cmp-mat-cell--low     { color: #f0a466; }
body.theme-dark #view-ai-comparison .lws-corr--pos {
  color: #6ee7a0 !important;
  background: rgba(34, 197, 94, 0.14) !important;
}
body.theme-dark #view-ai-comparison .lws-corr--neg {
  color: #fca5a5 !important;
  background: rgba(220, 38, 38, 0.14) !important;
}
body.theme-dark #view-ai-comparison .lws-corr--flat {
  color: #6b788e !important;
  background: transparent !important;
}

/* Key Takeaways cards */
body.theme-dark .cmp-tw-card  { background: #1c2029; border-color: #2a3145; box-shadow: none; }
body.theme-dark .cmp-tw-card--leader   { border-left-color: var(--teal-green); }
body.theme-dark .cmp-tw-card--strength { border-left-color: #5b8dee; }
body.theme-dark .cmp-tw-card--gap      { border-left-color: #E58635; }
body.theme-dark .cmp-tw-card--info     { border-left-color: #a78bfa; }
body.theme-dark .cmp-tw-ttl            { color: #eef1f8; }
body.theme-dark .cmp-tw-txt            { color: #8a95ab; }

/* Strengths & gaps rows */
body.theme-dark .cmp-sg-row            { border-bottom-color: #1e2638; }
body.theme-dark .cmp-sg-dim            { color: #c5cee0; }
body.theme-dark .cmp-sg-rank           { color: #7a8499; }
body.theme-dark .cmp-sg-score          { color: #eef1f8; }
body.theme-dark .cmp-sg-hdr--lead      { color: #6ee7a0; }
body.theme-dark .cmp-sg-hdr--gap       { color: #fca5a5; }
body.theme-dark .cmp-sg-pos            { color: #6ee7a0; }
body.theme-dark .cmp-sg-neg            { color: #fca5a5; }
body.theme-dark .cmp-sg-tag--airep,
body.theme-dark .cmp-sg-tag--aireputation {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}
body.theme-dark .cmp-sg-tag--bp,
body.theme-dark .cmp-sg-tag--brandperception {
  background: rgba(34, 197, 94, 0.14);
  color: #6ee7a0;
}

/* At a glance items */
body.theme-dark .cmp-glance-item       { border-bottom-color: #1e2638; color: #b0bbd0; }

/* Modal */
body.theme-dark .cmp-modal             { background: #1c2029; }
body.theme-dark .cmp-modal-title       { color: #eef1f8; }
body.theme-dark .cmp-peer-label        { color: #8a95ab; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCAN QUEUE (Reports page)
   ═══════════════════════════════════════════════════════════════════════════ */

.rq-page { display: flex; flex-direction: column; min-height: 0; }
.rq-body  {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  box-sizing: border-box;
  width: 100%;
}

#view-reports.view-section {
  padding: 0;
}
#view-reports .rq-page {
  max-width: 100%;
  margin: 0;
}
#view-reports .air-ctx-bar {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ── Add form — label row + control row aligned across columns ─────────── */
.rq-add-form {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 8px;
  align-items: center;
  margin-top: 16px;
}
/* ── Add form — simple vertical blocks ─────────────────────────────────── */
.rq-form-simple {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  max-width: 560px;
}
.rq-form-block {
  padding: 18px 0;
  border-bottom: 1px solid #e5e7eb;
}
.rq-form-block:last-of-type { border-bottom: none; }
.rq-form-block-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.rq-form-block-lead {
  margin: 0 0 12px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}
.rq-input-full {
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
}
.rq-field-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.rq-module-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.rq-module-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  margin: 0;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  background: #fff;
  transition: background 0.12s;
}
.rq-module-row:last-child { border-bottom: none; }
.rq-module-row--selected { background: var(--teal-green-bg); }
.rq-module-row--locked {
  cursor: not-allowed;
  background: #f9fafb;
}
.rq-module-row--locked .rq-module-name { color: #9ca3af; }
.rq-module-cb {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--teal-green);
}
.rq-module-row--locked .rq-module-cb { pointer-events: none; }
.rq-module-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}
.rq-module-tag {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #6b7280;
}
.rq-module-tag--ok {
  background: var(--teal-green-bg-hover);
  color: var(--teal-700);
}
.rq-module-tag--locked {
  background: #fef3c7;
  color: #92400e;
}
.rq-form-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #6b7280;
}
.rq-form-hint--warn { color: #b45309; }
.rq-form-upgrade {
  margin: 10px 0 0;
  font-size: 13px;
  color: #6b7280;
}
.rq-form-upgrade a { font-weight: 600; color: var(--teal-green); }
.rq-timing-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  width: 100%;
}
/* Card = label; radio + text always in one row inside the border */
.rq-timing-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  margin: 0;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
  text-align: left;
}
.rq-timing-card--on,
.rq-timing-card:has(.rq-timing-card-radio:checked) {
  border-color: var(--teal-green);
  background: var(--teal-green-bg);
}
.rq-timing-card-radio {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 2px 0 0 0;
  padding: 0;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  background: #fff;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: static;
  opacity: 1;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}
.rq-timing-card-radio:checked {
  border-color: var(--teal-green);
  background-color: var(--teal-green-grad);
  background-image: radial-gradient(circle, #fff 32%, var(--teal-green) 34%);
}
.rq-timing-card--on .rq-timing-card-radio,
.rq-timing-card:has(.rq-timing-card-radio:checked) .rq-timing-card-radio {
  background-color: #fff;
}
.rq-timing-card--on .rq-timing-card-radio:checked,
.rq-timing-card:has(.rq-timing-card-radio:checked) .rq-timing-card-radio:checked {
  background-color: var(--teal-green-grad);
  background-image: radial-gradient(circle, #fff 32%, var(--teal-green) 34%);
}
.rq-timing-card-radio:focus-visible {
  outline: 2px solid var(--teal-green);
  outline-offset: 2px;
}
.rq-timing-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rq-timing-card-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}
.rq-timing-card-desc {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.45;
}
.rq-timing-card-desc em {
  font-style: normal;
  font-weight: 600;
  color: #374151;
}
.rq-timing-datetime {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}
.rq-timing-repeat { margin-top: 4px; }
.rq-form-footer {
  padding: 16px 0 4px;
}
.rq-th--run { width: 148px; }
.rq-td--run { font-size: 11px; color: #4b5563; }
.rq-market-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #e0f2fe;
  color: #0369a1;
  vertical-align: middle;
}
.rq-repeat-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--teal-green-bg);
  color: var(--teal-700);
}
.rq-badge--scheduled { background: #eff6ff; color: #1d4ed8; }
.rq-add-field { display: contents; }
.rq-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  line-height: 1.2;
  align-self: end;
}
.rq-add-field--project .rq-label { grid-column: 1; grid-row: 1; }
.rq-add-field--project .rq-project-select { grid-column: 1; grid-row: 2; }
.rq-add-field--scan .rq-label { grid-column: 2; grid-row: 1; }
.rq-add-field--scan .rq-type-group { grid-column: 2; grid-row: 2; }
.rq-add-btn {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  white-space: nowrap;
}
.rq-project-select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  box-sizing: border-box;
}

.rq-type-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 34px;
}
.rq-type-opt   { display: flex; align-items: center; cursor: pointer; margin: 0; }
.rq-type-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.rq-type-pill  {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  border: 1px solid var(--border, #d5dae4);
  color: var(--text-secondary, #5a677c);
  background: var(--surface-1, #fff);
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.rq-type-opt:hover .rq-type-pill {
  border-color: var(--teal-green);
  color: var(--teal-green);
  background: var(--teal-green-bg-hover, #d0eaf2);
}
.rq-type-opt input:checked + .rq-type-pill {
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  background: var(--teal-green-grad);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.rq-type-opt--disabled { opacity: 0.45; cursor: not-allowed; }
.rq-type-opt--disabled .rq-type-pill { cursor: not-allowed; }
.rq-add-notice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}
.rq-add-notice--plan {
  background: var(--teal-green-bg);
  border: 1px solid rgba(var(--teal-green-rgb), 0.28);
  color: var(--teal-800);
}
.rq-add-notice--error {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}
.rq-add-notice-msg { margin: 0 0 6px; }
.rq-add-notice-upgrade { margin: 0; font-size: 12px; }
.rq-add-notice-upgrade a { color: var(--teal-green); font-weight: 600; }

.rq-type-opt input:focus-visible + .rq-type-pill {
  outline: 2px solid var(--teal-green);
  outline-offset: 2px;
}

/* ── Running progress bar ─────────────────────────────────────────────── */
.rq-running-bar {
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px;
}
.rq-running-inner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.rq-running-progress-wrap {
  flex: 1; min-width: 120px; height: 4px;
  background: #dbeafe; border-radius: 9999px; overflow: hidden;
}
.rq-running-progress {
  height: 100%; background: #1a56db; border-radius: 9999px;
  transition: width 0.5s ease;
}
#rq-running-label { font-size: 13px; font-weight: 500; color: #1e40af; white-space: nowrap; }
.rq-running-time  { font-size: 11px; color: #6b7280; white-space: nowrap; }

/* ── Live scans (org-scoped) ─────────────────────────────────────────── */
.rq-active-list { display: flex; flex-direction: column; gap: 8px; }
.rq-active-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(var(--teal-green-rgb), 0.1), rgba(var(--teal-green-rgb), 0.02));
  border: 1px solid rgba(var(--teal-green-rgb), 0.22);
  font-size: 13px;
}
.rq-active-module  { font-weight: 600; color: var(--teal-700); }
.rq-active-project { font-weight: 500; color: #111827; }
.rq-active-time    { font-size: 11px; color: #6b7280; text-align: right; white-space: nowrap; }

/* ── Queue table ──────────────────────────────────────────────────────── */
.rq-empty { padding: 32px 0; text-align: center; color: var(--text-muted, #9ca3af); font-size: 14px; }

.rq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rq-th {
  padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280); border-bottom: 2px solid #e5e7eb;
}
.rq-th--pos    { width: 32px; }
.rq-th--models { width: 88px; text-align: center; }
.rq-td--models { text-align: center; font-variant-numeric: tabular-nums; color: #374151; }
.rq-th--time   { width: 130px; }
.rq-th--action { width: 40px; }

.rq-row { border-bottom: 1px solid #f3f4f6; transition: background 0.1s; }
.rq-row:hover { background: #f9fafb; }
.rq-row--running  { background: #f0f9ff !important; }
.rq-row--done     { opacity: 0.6; }
.rq-row--error    { background: #fff5f5 !important; }

.rq-td           { padding: 10px 12px; color: var(--text, #374151); vertical-align: middle; }
.rq-td--pos      { color: var(--text-muted, #9ca3af); font-weight: 600; }
.rq-td--name     { font-weight: 600; color: var(--text, #111827); }
.rq-td--time     { font-size: 11px; color: var(--text-muted, #9ca3af); }
.rq-td--action   { text-align: center; }

.rq-err-msg { font-size: 11px; color: #e02424; margin-top: 3px; }

/* ── Status badges ────────────────────────────────────────────────────── */
.rq-badge {
  display: inline-block; padding: 2px 8px; border-radius: 9999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.rq-badge--pending { background: #f3f4f6; color: #6b7280; }
.rq-badge--running { background: #dbeafe; color: #1d4ed8; animation: rq-pulse 1.5s ease-in-out infinite; }
.rq-badge--done    { background: var(--teal-green-bg-hover); color: var(--teal-700); }
.rq-badge--error   { background: #fee2e2; color: #991b1b; }
.rq-badge--interrupted { background: #fef3c7; color: #92400e; }
.rq-row--interrupted { background: #fffbeb; }

@keyframes rq-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ── Scan type pills (in table) ───────────────────────────────────────── */
.rq-type-badge {
  display: inline-block; padding: 2px 7px; border-radius: 9999px;
  font-size: 10px; font-weight: 600; background: #f3f4f6; color: #374151;
  margin-right: 4px;
}

/* ── Delete button ────────────────────────────────────────────────────── */
.rq-del-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted, #9ca3af); font-size: 13px;
  padding: 2px 6px; border-radius: 4px; line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.rq-del-btn:hover { color: #e02424; background: #fee2e2; }
.rq-row--running .rq-del-btn { opacity: 1; }

/* ── Responsive ───────────────────────────────────────────────────────── */
body.theme-dark .rq-type-pill {
  background: var(--surface-2, #1c2029);
  border-color: var(--border, #2a3145);
  color: var(--text-secondary, #9ca6b6);
}
body.theme-dark .rq-type-opt:hover .rq-type-pill {
  background: rgba(var(--teal-green-rgb), 0.12);
  border-color: var(--teal-green);
  color: var(--teal-green);
}
body.theme-dark .rq-type-opt input:checked + .rq-type-pill {
  color: #fff;
  background: var(--teal-green-grad);
}

/* ── Scan queue form — dark mode ───────────────────────────────────────── */
body.theme-dark #view-reports .rq-form-block {
  border-bottom-color: #2a3145;
}
body.theme-dark #view-reports .rq-form-block-title {
  color: #eef1f8;
}
body.theme-dark #view-reports .rq-form-block-lead,
body.theme-dark #view-reports .rq-form-hint,
body.theme-dark #view-reports .rq-form-upgrade {
  color: #8a95ab;
}
body.theme-dark #view-reports .rq-field-label {
  color: #c5cee0;
}
body.theme-dark #view-reports .rq-module-list {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-reports .rq-module-row {
  background: #1a2030;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-reports .rq-module-row:hover:not(.rq-module-row--locked) {
  background: #222a3d;
}
body.theme-dark #view-reports .rq-module-row--selected {
  background: rgba(var(--teal-green-rgb), 0.14);
}
body.theme-dark #view-reports .rq-module-row--locked {
  background: #161c2c;
}
body.theme-dark #view-reports .rq-module-name {
  color: #eef1f8;
}
body.theme-dark #view-reports .rq-module-row--locked .rq-module-name {
  color: #7a8499;
}
body.theme-dark #view-reports .rq-module-tag {
  background: #1e2638;
  color: #8a95ab;
}
body.theme-dark #view-reports .rq-module-tag--ok {
  background: rgba(var(--teal-green-rgb), 0.18);
  color: var(--teal-green-from);
}
body.theme-dark #view-reports .rq-module-tag--locked {
  background: rgba(234, 179, 8, 0.14);
  color: #fcd34d;
}
body.theme-dark #view-reports .rq-timing-card {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-reports .rq-timing-card:hover {
  border-color: #3d4a63;
}
body.theme-dark #view-reports .rq-timing-card--on,
body.theme-dark #view-reports .rq-timing-card:has(.rq-timing-card-radio:checked) {
  border-color: var(--teal-green);
  background: rgba(var(--teal-green-rgb), 0.14);
}
body.theme-dark #view-reports .rq-timing-card-radio {
  border-color: #5a6480;
  background-color: #1e2638;
}
body.theme-dark #view-reports .rq-timing-card-radio:checked {
  border-color: var(--teal-green);
  background-color: var(--teal-green-grad);
  background-image: radial-gradient(circle, #fff 32%, var(--teal-green) 34%);
}
body.theme-dark #view-reports .rq-timing-card--on .rq-timing-card-radio,
body.theme-dark #view-reports .rq-timing-card:has(.rq-timing-card-radio:checked) .rq-timing-card-radio {
  background-color: #1e2638;
}
body.theme-dark #view-reports .rq-timing-card--on .rq-timing-card-radio:checked,
body.theme-dark #view-reports .rq-timing-card:has(.rq-timing-card-radio:checked) .rq-timing-card-radio:checked {
  background-color: var(--teal-green-grad);
  background-image: radial-gradient(circle, #fff 32%, var(--teal-green) 34%);
}
body.theme-dark #view-reports .rq-timing-card-title {
  color: #eef1f8;
}
body.theme-dark #view-reports .rq-timing-card-desc {
  color: #8a95ab;
}
body.theme-dark #view-reports .rq-timing-card-desc em {
  color: #c5cee0;
}
body.theme-dark #view-reports .rq-timing-datetime {
  background: #1e2638;
  border-color: #2a3145;
}
body.theme-dark #view-reports .rq-date-input,
body.theme-dark #view-reports input[type="date"].rq-input-full {
  background: #1a2030;
  border: 1px solid #2a3145;
  border-radius: 6px;
  color: #eef1f8;
  color-scheme: dark;
  padding: 8px 10px;
  font-size: 13px;
}
body.theme-dark #view-reports .rq-date-input:focus,
body.theme-dark #view-reports input[type="date"].rq-input-full:focus {
  outline: none;
  border-color: var(--teal-green);
  box-shadow: 0 0 0 2px rgba(var(--teal-green-rgb), 0.15);
}
body.theme-dark #view-reports .rq-date-input::-webkit-calendar-picker-indicator,
body.theme-dark #view-reports input[type="date"].rq-input-full::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
  cursor: pointer;
}

/* ── Scan queue list, running bar & status — dark mode ─────────────────── */
body.theme-dark #view-reports .rq-running-bar {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-reports #rq-running-label {
  color: #93c5fd;
}
body.theme-dark #view-reports .rq-running-progress-wrap {
  background: #2a3145;
}
body.theme-dark #view-reports .rq-running-progress {
  background: var(--teal-green-grad);
}
body.theme-dark #view-reports .rq-running-time {
  color: #8a95ab;
}
body.theme-dark #view-reports .rq-active-project {
  color: #eef1f8;
}
body.theme-dark #view-reports .rq-active-module {
  color: var(--teal-green-from);
}
body.theme-dark #view-reports .rq-active-time {
  color: #8a95ab;
}
body.theme-dark #view-reports .rq-th {
  color: #7a8499;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-reports .rq-row {
  border-bottom-color: #2a3145;
}
body.theme-dark #view-reports .rq-row:hover {
  background: #222a3d;
}
body.theme-dark #view-reports .rq-row--running,
body.theme-dark #view-reports .rq-row--running:hover {
  background: rgba(59, 130, 246, 0.12) !important;
}
body.theme-dark #view-reports .rq-row--interrupted,
body.theme-dark #view-reports .rq-row--interrupted:hover {
  background: rgba(234, 179, 8, 0.1) !important;
}
body.theme-dark #view-reports .rq-row--error,
body.theme-dark #view-reports .rq-row--error:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}
body.theme-dark #view-reports .rq-row--done {
  opacity: 0.55;
}
body.theme-dark #view-reports .rq-row--done:hover {
  background: #1e2638;
  opacity: 0.7;
}
body.theme-dark #view-reports .rq-td {
  color: #c5cee0;
}
body.theme-dark #view-reports .rq-td--name {
  color: #eef1f8;
}
body.theme-dark #view-reports .rq-td--pos,
body.theme-dark #view-reports .rq-td--time,
body.theme-dark #view-reports .rq-td--run,
body.theme-dark #view-reports .rq-td--models {
  color: #8a95ab;
}
body.theme-dark #view-reports .rq-err-msg {
  color: #fca5a5;
}
body.theme-dark #view-reports .rq-badge--pending {
  background: #1e2638;
  color: #8a95ab;
}
body.theme-dark #view-reports .rq-badge--running {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
body.theme-dark #view-reports .rq-badge--done {
  background: rgba(var(--teal-green-rgb), 0.18);
  color: var(--teal-green-from);
}
body.theme-dark #view-reports .rq-badge--error {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
}
body.theme-dark #view-reports .rq-badge--interrupted {
  background: rgba(234, 179, 8, 0.14);
  color: #fcd34d;
}
body.theme-dark #view-reports .rq-badge--scheduled {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}
body.theme-dark #view-reports .rq-type-badge {
  background: #1e2638;
  color: #c5cee0;
  border: 1px solid #2a3145;
}
body.theme-dark #view-reports .rq-market-badge {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}
body.theme-dark #view-reports .rq-repeat-badge {
  background: rgba(var(--teal-green-rgb), 0.18);
  color: var(--teal-green-from);
}
body.theme-dark #view-reports .rq-del-btn {
  color: #7a8499;
}
body.theme-dark #view-reports .rq-del-btn:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
}
body.theme-dark #view-reports .rq-add-notice--plan {
  background: rgba(var(--teal-green-rgb), 0.12);
  border-color: rgba(var(--teal-green-rgb), 0.28);
  color: var(--teal-green-from);
}
body.theme-dark #view-reports .rq-add-notice--error {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.28);
  color: #fcd34d;
}
body.theme-dark #view-reports .rq-empty {
  color: #7a8499;
}

@media (max-width: 900px) {
  .rq-add-form {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .rq-add-field--project .rq-label,
  .rq-add-field--project .rq-project-select,
  .rq-add-field--scan .rq-label,
  .rq-add-field--scan .rq-type-group,
  .rq-add-btn {
    grid-column: 1;
    grid-row: auto;
  }
  .rq-add-btn { justify-self: start; margin-top: 4px; }
  .rq-schedule-row {
    grid-template-columns: 1fr;
  }
  .rq-project-select,
  .rq-field-control,
  .rq-datetime-input {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .rq-body       { padding: 16px; }
  .rq-td--time   { display: none; }
  .rq-th--time   { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI RECOMMENDATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page layout (exact match with BP / AI Comparison) ─────────────────── */
.rec-page { display: flex; flex-direction: column; min-height: 0; }

#view-ai-recommendation.view-section { padding: 0; }
#view-ai-recommendation .rec-page    { max-width: 100%; margin: 0; padding: 0; }
#view-ai-recommendation .air-tab-panel {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  box-sizing: border-box;
  width: 100%;
}

/* Scenario Builder tab: full-width, no max-width constraint (like Projects page) */
#view-ai-recommendation #rec-tab-builder.air-tab-panel {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ── Generic card title (used inside .ov-card) ──────────────────────────── */
.ov-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #111827);
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Generic empty state ────────────────────────────────────────────────── */
.ov-empty {
  font-size: 13px;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
  padding: 8px 0;
  margin: 0;
}

/* ── Hero card ─────────────────────────────────────────────────────────── */
.rec-hero2 {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.rec-hero2-grid {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}
.rec-hero2-main,
.rec-hero2-summary,
.rec-hero2-kpis {
  padding: 28px 24px;
}
.rec-hero2-main    { border-right: 1px solid var(--border, #e5e7eb); }
.rec-hero2-summary { border-right: 1px solid var(--border, #e5e7eb); display: flex; flex-direction: column; justify-content: flex-start; }
.rec-hero2-kpis    { display: flex; flex-direction: column; gap: 16px; justify-content: center; }

.rec-h2-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-muted, #9ca3af);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rec-hero2-score-big {
  font-size: 52px;
  font-weight: 700;
  color: var(--text, #111827);
  line-height: 1;
  margin-bottom: 6px;
}
.rec-score-denom { font-size: 22px; font-weight: 400; color: var(--text-muted, #9ca3af); margin-left: 4px; }
.rec-hero2-rating { font-size: 16px; font-weight: 600; color: var(--text-secondary, #4b5563); margin-bottom: 8px; }
.rec-hero2-meta   { font-size: 12px; color: var(--text-muted, #9ca3af); }

/* KPI blocks */
.rec-kpi-block { display: flex; align-items: baseline; gap: 10px; }
.rec-kpi-label { font-size: 12px; color: var(--text-muted, #9ca3af); min-width: 100px; }
.rec-kpi-value { font-size: 22px; font-weight: 700; color: var(--text, #111827); }

/* Insights */
.rec-insight-val        { font-size: 14px; font-weight: 600; color: var(--text, #111827); margin-bottom: 4px; }
.rec-insight-val--weak  { color: var(--red-500, #ef4444); }

/* ── Score bars ────────────────────────────────────────────────────────── */
.rec-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 48px;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.rec-bar-label { font-size: 13px; color: var(--text, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-bar-sublabel { font-size: 11px; color: #9ca3af; margin-left: 6px; font-weight: 400; }
.rec-bar-track { height: 8px; background: var(--surface-2, #f3f4f6); border-radius: 4px; overflow: hidden; }
.rec-bar-fill  { height: 100%; border-radius: 4px; transition: width .4s ease; }
.rec-bar-score { font-size: 13px; font-weight: 600; color: var(--text, #111827); text-align: right; }
.rec-bar-sub   { grid-column: 1 / -1; display: flex; gap: 12px; padding: 2px 0 8px 0; }
.rec-bar-sub-item { font-size: 11px; color: #9ca3af; }
.rec-bar-sub-item strong { color: var(--text, #374151); font-weight: 600; }

/* ── Evoked set — frequency scale (matches Perception by Dimension) ───── */
.rec-freq-tbl { font-size: .82rem; }
.rec-freq-tbl .bp-tbl-bar-wrap { min-width: 88px; max-width: 220px; }
.rec-freq-tbl--compact .bp-tbl-bar-wrap { min-width: 72px; max-width: 160px; }
.rec-freq-rank {
  font-size: .72rem;
  font-weight: 600;
  color: #9ca3af;
  min-width: 1rem;
}
.rec-freq-mentions-th,
.rec-freq-mentions-cell {
  text-align: center;
  white-space: nowrap;
}
.rec-freq-mentions-cell {
  font-weight: 600;
  font-size: .82rem;
  color: #374151;
}

/* ── Scenario table ────────────────────────────────────────────────────── */
.rec-scenario-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rec-scenario-table th,
.rec-scenario-table td { padding: 10px 12px; border-bottom: 1px solid var(--border, #e5e7eb); text-align: left; }
.rec-scenario-table th { font-weight: 600; font-size: 11px; color: var(--text-muted, #9ca3af); text-transform: uppercase; letter-spacing:.05em; background: var(--surface-1, #f9fafb); }
.rec-cell-pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--surface-2, #f3f4f6);
  color: var(--text-secondary, #4b5563);
  font-weight: 500;
  white-space: nowrap;
}
.rec-sc-status {
  display: inline-block;
  font-size: 9px;
  border-radius: 8px;
  padding: 1px 5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rec-sc-status--active {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}
.rec-sc-status--draft {
  background: #fef9c3;
  color: #a16207;
  border: 1px solid #fde047;
}
.rec-score-badge    { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; background: var(--surface-2, #f3f4f6); color: var(--text, #111827); }
.rec-score-good     { background: #dcfce7; color: #16a34a; }
.rec-score-mid      { background: #fef9c3; color: #ca8a04; }
.rec-score-low      { background: #fee2e2; color: #dc2626; }

/* Top-5 brand list (spontaneous / assisted blocks) */
.rec-top5-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rec-top5-table th {
  text-align: left;
  padding: 4px 8px 4px 0;
  color: var(--text-muted, #9ca3af);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rec-top5-row {
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--border-light, #f3f4f6);
  color: var(--text, #374151);
}
.rec-top5-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--surface-2, #f3f4f6);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  margin-right: 8px;
  color: var(--text-muted, #6b7280);
}

/* ── Score breakdown (hero, v0.2) ──────────────────────────────────────── */
.rec-score-breakdown { margin-top: 10px; padding: 8px 12px; background: var(--surface-1, #f9fafb); border-radius: 8px; border: 1px solid var(--border, #e5e7eb); font-size: 12px; }
.rec-score-row { display: flex; align-items: center; gap: 6px; line-height: 1.8; }
.rec-score-row-label { flex: 1; color: var(--text-secondary, #6b7280); }
.rec-score-row-val   { font-weight: 700; color: var(--text, #111827); min-width: 28px; text-align: right; }
.rec-score-row-weight { font-size: 10px; color: #9ca3af; min-width: 32px; }
.rec-score-gap { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border, #e5e7eb); font-size: 11px; font-weight: 600; }
.rec-score-gap--pos { color: #16a34a; }
.rec-score-gap--neg { color: #dc2626; }
.rec-score-gap--neu { color: #9ca3af; }

/* ── Assisted recommendation section in model panel ────────────────────── */
.rec-assisted-section { margin-top: 16px; border: 1px solid var(--teal-200, #99f6e4); border-radius: 8px; overflow: hidden; }
.rec-assisted-header { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--teal-50, #f0fdfa); border-bottom: 1px solid var(--teal-200, #99f6e4); flex-wrap: wrap; }
.rec-assisted-title { font-size: 12px; font-weight: 700; color: var(--teal-700, #0f766e); text-transform: uppercase; letter-spacing: .05em; flex: 1; }
.rec-assisted-order { font-size: 11px; color: #6b7280; padding: 6px 14px; background: var(--surface-1, #f9fafb); border-bottom: 1px solid var(--border, #e5e7eb); }
.rec-assisted-brand { display: inline-block; margin-right: 8px; color: var(--text, #374151); font-weight: 500; }
.rec-assisted-section .rec-run-table { margin: 0; border-radius: 0; }
.rec-assisted-section .rec-tbr-reason { padding: 0 14px 10px; margin: 0; }

/* ── Model detail (runs) ───────────────────────────────────────────────── */
.rec-run-meta { display: flex; gap: 20px; font-size: 13px; color: var(--text-secondary, #4b5563); margin-bottom: 12px; flex-wrap: wrap; }
.rec-run-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rec-run-table th,
.rec-run-table td { padding: 8px 12px; border-bottom: 1px solid var(--border, #e5e7eb); text-align: left; vertical-align: top; }
.rec-run-table th  { font-weight: 600; font-size: 11px; color: var(--text-muted, #9ca3af); text-transform: uppercase; letter-spacing:.05em; background: var(--surface-1, #f9fafb); }
.rec-run-target-row { background: #eff6ff; }
.rec-target-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; background: #3b82f6; color: #fff; margin-left: 6px; vertical-align: middle; }
.rec-tbr-reason { font-size: 12px; color: var(--text-muted, #9ca3af); margin-top: 8px; }

/* ── History table ─────────────────────────────────────────────────────── */
.rec-history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rec-history-table th,
.rec-history-table td { padding: 10px 12px; border-bottom: 1px solid var(--border, #e5e7eb); text-align: left; }
.rec-history-table th  { font-weight: 600; font-size: 11px; color: var(--text-muted, #9ca3af); text-transform: uppercase; letter-spacing:.05em; background: var(--surface-1, #f9fafb); }
.rec-status-badge   { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.rec-status-done    { background: #dcfce7; color: #16a34a; }
.rec-status-running { background: #fef9c3; color: #ca8a04; }
.rec-status-error   { background: #fee2e2; color: #dc2626; }

/* ── Scenarios manager modal rows ──────────────────────────────────────── */
.rec-sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
  gap: 12px;
}
.rec-sc-row:last-child { border-bottom: none; }
.rec-sc-row-name   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-sc-meta       { font-size: 12px; color: var(--text-muted, #9ca3af); }
.rec-sc-row-actions{ display: flex; gap: 8px; flex-shrink: 0; }

/* ── Scenario builder form ─────────────────────────────────────────────── */
.rec-builder-form { display: flex; flex-direction: column; gap: 0; }
.rec-form-row     { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.rec-form-row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex-direction: unset; margin-bottom: 14px; }
.rec-form-row--2col > div { display: flex; flex-direction: column; gap: 4px; }
.rec-form-label   { font-size: 12px; font-weight: 600; color: var(--text, #111827); }
.rec-form-hint    { font-size: 11px; font-weight: 400; color: var(--text-muted, #9ca3af); }
.rec-form-input   { padding: 8px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 13px; color: var(--text, #111827); background: #fff; width: 100%; box-sizing: border-box; }
.rec-form-input:focus { outline: none; border-color: var(--brand, #3b82f6); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.rec-form-textarea { resize: vertical; min-height: 60px; }
.rec-prompt-preview {
  background: var(--surface-1, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--text-secondary, #4b5563);
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
  max-height: 140px;
  overflow-y: auto;
  line-height: 1.5;
}
.req { color: var(--red-500, #ef4444); }

/* ── Rec model tab panels ──────────────────────────────────────────────── */
.rec-model-scenario-card {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.rec-model-scenario-card:last-child { border-bottom: none; }
.rec-model-sc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}
.rec-model-sc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #111827);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rec-model-sc-meta {
  font-size: 13px;
  color: var(--text-secondary, #4b5563);
}
.rec-model-sc-error {
  font-size: 12px;
  font-weight: 600;
  color: var(--amber-600, #d97706);
}
.tab-warn-icon {
  color: var(--amber-500, #f59e0b);
  font-size: 12px;
  margin-left: 3px;
}

/* ── Per-model evoked set ──────────────────────────────────────────────── */
.rec-model-evoked {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--surface-1, #f9fafb);
}
.rec-model-evoked-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #9ca3af);
  margin-bottom: 12px;
}
.rec-model-evoked-list { display: flex; flex-direction: column; gap: 6px; }
.rec-model-evoked-row  { display: flex; align-items: center; gap: 10px; }
.rec-model-evoked-brand { font-size: 13px; color: var(--text, #111827); min-width: 140px; }
.rec-model-evoked-count { font-size: 12px; color: var(--text-muted, #9ca3af); min-width: 24px; text-align: right; }

/* ── AI Recommendation — dark mode ─────────────────────────────────────── */
body.theme-dark #view-ai-recommendation .rec-scenario-table th {
  background: #1e2638;
  color: #7a8499;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-scenario-table td {
  color: #c5cee0;
  border-bottom-color: #1e2638;
}
body.theme-dark #view-ai-recommendation .rec-scenario-table td strong {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-cell-pill {
  background: #1e2638;
  color: #c5cee0;
  border: 1px solid #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-sc-status--active {
  background: rgba(34, 197, 94, 0.14);
  color: #6ee7a0;
  border-color: rgba(34, 197, 94, 0.28);
}
body.theme-dark #view-ai-recommendation .rec-sc-status--draft {
  background: rgba(234, 179, 8, 0.14);
  color: #fcd34d;
  border-color: rgba(234, 179, 8, 0.28);
}
body.theme-dark #view-ai-recommendation .rec-score-badge {
  background: #1e2638;
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-score-good {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #6ee7a0 !important;
}
body.theme-dark #view-ai-recommendation .rec-score-mid {
  background: rgba(234, 179, 8, 0.14) !important;
  color: #fcd34d !important;
}
body.theme-dark #view-ai-recommendation .rec-score-low {
  background: rgba(220, 38, 38, 0.14) !important;
  color: #fca5a5 !important;
}
body.theme-dark #view-ai-recommendation .rec-top5-rank,
body.theme-dark #view-ai-recommendation .fw-rec-top5-rank {
  background: #1e2638;
  color: #eef1f8;
  border: 1px solid #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-top5-row {
  color: #c5cee0;
  border-bottom-color: #1e2638;
}
body.theme-dark #view-ai-recommendation .rec-top5-table th {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .fw-rec-top5-table td {
  color: #c5cee0;
  border-bottom-color: #1e2638;
}
body.theme-dark #view-ai-recommendation .fw-rec-top5-brand--primary {
  color: var(--teal-green-from);
}
body.theme-dark #view-ai-recommendation .ov-hero-rating.score-weak {
  background: rgba(127, 29, 29, 0.35);
  color: #fca5a5;
}
body.theme-dark #view-ai-recommendation .ov-hero-rating.score-moderate {
  background: rgba(30, 58, 95, 0.45);
  color: #93c5fd;
}
body.theme-dark #view-ai-recommendation .ov-hero-rating.score-good,
body.theme-dark #view-ai-recommendation .ov-hero-rating.score-strong {
  background: rgba(22, 101, 52, 0.35);
  color: #6ee7a0;
}
body.theme-dark #view-ai-recommendation .rec-bar-label,
body.theme-dark #view-ai-recommendation .rec-bar-score {
  color: #c5cee0;
}
body.theme-dark #view-ai-recommendation .rec-bar-track {
  background: #1e2638;
}
body.theme-dark #view-ai-recommendation .rec-freq-mentions-cell {
  color: #c5cee0;
}

/* Context bar + model panel header — readable metadata (Region, date, Target, etc.) */
body.theme-dark #view-ai-recommendation .air-ctx-bar {
  background: #161c28;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .air-ctx-label {
  color: #9aa8be;
}
body.theme-dark #view-ai-recommendation .air-ctx-value {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .air-ctx-sep {
  color: #4a5568;
}
body.theme-dark #view-ai-recommendation .air-ctx-select {
  background-color: #1e2638;
  color: #eef1f8;
  border-color: #2a3145;
}

/* Models tab — scenario cards, run tables, assisted block, evoked set */
body.theme-dark #view-ai-recommendation .model-panel-header {
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .model-panel-name {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .model-panel-time {
  color: #c5cee0;
}
body.theme-dark #view-ai-recommendation .model-panel-ver {
  background: #1e2638;
  color: #b8c4d8;
  border: 1px solid #2a3145;
}
body.theme-dark #view-ai-recommendation .air-empty-sub {
  color: #b0bbd0;
}
body.theme-dark #view-ai-recommendation .rec-model-scenario-card {
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-model-sc-name {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-model-sc-meta {
  color: #c5cee0;
}
body.theme-dark #view-ai-recommendation .rec-model-sc-meta strong {
  color: #f4f6fb;
  font-weight: 600;
}
body.theme-dark #view-ai-recommendation .rec-assisted-header .rec-model-sc-meta {
  color: #c5cee0;
}
body.theme-dark #view-ai-recommendation .rec-assisted-header .rec-model-sc-meta strong {
  color: #f4f6fb;
}
body.theme-dark #view-ai-recommendation .rec-run-table th {
  background: #1e2638;
  color: #7a8499;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-run-table td {
  color: #c5cee0;
  border-bottom-color: #1e2638;
}
body.theme-dark #view-ai-recommendation .rec-run-target-row {
  background: rgba(59, 130, 246, 0.12);
}
body.theme-dark #view-ai-recommendation .rec-tbr-reason {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-assisted-section {
  border-color: rgba(76, 185, 185, 0.32);
}
body.theme-dark #view-ai-recommendation .rec-assisted-header {
  background: rgba(76, 185, 185, 0.1);
  border-bottom-color: rgba(76, 185, 185, 0.22);
}
body.theme-dark #view-ai-recommendation .rec-assisted-title {
  color: var(--teal-green-from, #7ee8d8);
}
body.theme-dark #view-ai-recommendation .rec-assisted-order {
  background: #1a2030;
  color: #a8b4c8;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-assisted-brand {
  color: #c5cee0;
}
body.theme-dark #view-ai-recommendation .rec-model-evoked {
  background: #1a2030;
  border-top-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-model-evoked-title {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-model-evoked-brand {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-model-evoked-count {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .bp-dim-tbl thead th {
  background: #1e2638;
  color: #7a8499;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .bp-dim-tbl tbody tr {
  border-bottom-color: #1e2638;
}
body.theme-dark #view-ai-recommendation .bp-dim-tbl tbody tr:hover {
  background: #222a3d;
}
body.theme-dark #view-ai-recommendation .bp-dim-tbl td {
  color: #c5cee0;
}
body.theme-dark #view-ai-recommendation .bp-tbl-dim-cell {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .bp-tbl-bar-wrap {
  background: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-freq-rank {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-freq-mentions-th {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .bp-tbl-rating-cell.score-very-weak,
body.theme-dark #view-ai-recommendation .bp-tbl-rating-cell.score-weak {
  color: #fca5a5;
}
body.theme-dark #view-ai-recommendation .bp-tbl-rating-cell.score-below-average,
body.theme-dark #view-ai-recommendation .bp-tbl-rating-cell.score-moderate {
  color: #93c5fd;
}
body.theme-dark #view-ai-recommendation .bp-tbl-rating-cell.score-good,
body.theme-dark #view-ai-recommendation .bp-tbl-rating-cell.score-strong {
  color: #6ee7a0;
}
body.theme-dark #view-ai-recommendation .rec-score-breakdown {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-score-row-label {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-score-row-val {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-history-table th {
  background: #1e2638;
  color: #7a8499;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-history-table td {
  color: #c5cee0;
  border-bottom-color: #1e2638;
}

/* ── Persona Library — dark mode ───────────────────────────────────────── */
body.theme-dark #view-ai-recommendation .rec-pl-header {
  background: #1a2030;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-pl-title {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-pl-subtitle {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-pl-filters {
  background: #1a2030;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-pl-filter-btn {
  background: #1e2638;
  border-color: #2a3145;
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-pl-filter-btn:hover {
  border-color: #3d4a63;
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-pl-filter-btn--active {
  background: rgba(var(--teal-green-rgb), 0.14);
  border-color: var(--teal-green);
  color: var(--teal-green-from);
}
body.theme-dark #view-ai-recommendation .rec-pl-search,
body.theme-dark .rec-persona-picker-modal .rec-pl-search {
  background: #1e2638;
  border-color: #2a3145;
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-pl-search::placeholder,
body.theme-dark .rec-persona-picker-modal .rec-pl-search::placeholder {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-pl-search:focus,
body.theme-dark .rec-persona-picker-modal .rec-pl-search:focus {
  border-color: var(--teal-green);
}
body.theme-dark #view-ai-recommendation .rec-pl-empty {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-pl-card {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-pl-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  border-color: #3d4a63;
}
body.theme-dark #view-ai-recommendation .rec-pl-card-header {
  background: linear-gradient(135deg, #1e2638, #222a3d);
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-pl-card-name {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-pl-card-role {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-pl-badge--b2b {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
body.theme-dark #view-ai-recommendation .rec-pl-badge--b2c {
  background: rgba(236, 72, 153, 0.18);
  color: #f9a8d4;
}
body.theme-dark #view-ai-recommendation .rec-pl-badge--generated {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}
body.theme-dark #view-ai-recommendation .rec-pl-badge--global {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7a0;
}
body.theme-dark #view-ai-recommendation .rec-pl-card-tag {
  background: rgba(var(--teal-green-rgb), 0.12);
  border-color: rgba(var(--teal-green-rgb), 0.3);
  color: var(--teal-green-from);
}
body.theme-dark #view-ai-recommendation .rec-pl-section-title {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-pl-card-summary {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-pl-card-footer {
  background: #1e2638;
  border-top-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-pl-usage {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-sb-icon-btn {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-sb-icon-btn:hover {
  color: #eef1f8;
  background: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-sb-icon-btn--danger:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
}

/* Persona picker modal (rendered on body) */
body.theme-dark .rec-persona-picker-modal {
  background: #1a2030;
}
body.theme-dark .rec-persona-picker-header {
  border-bottom-color: #2a3145;
}
body.theme-dark .rec-persona-picker-title {
  color: #eef1f8;
}
body.theme-dark .rec-persona-picker-close {
  color: #8a95ab;
}
body.theme-dark .rec-persona-picker-close:hover {
  color: #eef1f8;
  background: #2a3145;
}
body.theme-dark .rec-persona-picker-search {
  border-bottom-color: #2a3145;
}
body.theme-dark .rec-persona-picker-card {
  border-color: #2a3145;
  background: #1e2638;
}
body.theme-dark .rec-persona-picker-card:hover {
  border-color: var(--teal-green);
  background: rgba(var(--teal-green-rgb), 0.08);
}
body.theme-dark .rec-persona-picker-card--selected {
  border-color: var(--teal-green);
  background: rgba(var(--teal-green-rgb), 0.14);
}
body.theme-dark .rec-persona-picker-footer {
  background: #1e2638;
  border-top-color: #2a3145;
}
body.theme-dark .rec-picker-section-label {
  color: #7a8499;
}
body.theme-dark .rec-picker-std-badge {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7a0;
}
body.theme-dark .rec-persona-picker-card > div:last-child > div:first-child {
  color: #eef1f8 !important;
}
body.theme-dark .rec-persona-picker-card > div:last-child > div:last-child {
  color: #8a95ab !important;
}
body.theme-dark .rec-persona-picker-grid p {
  color: #7a8499 !important;
}
body.theme-dark .rec-persona-picker-overlay {
  background: rgba(0, 0, 0, 0.55);
}

/* ── Scenario Builder & Persona Builder — dark mode ─────────────────────── */
body.theme-dark #view-ai-recommendation .rec-sb-workspace {
  background: var(--bg);
}
body.theme-dark #view-ai-recommendation .rec-sb-form-wrap {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-sb-form-header {
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-sb-form-footer {
  background: #1e2638;
  border-top-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-sb-form-status-badge--draft {
  background: rgba(234, 179, 8, 0.14);
  color: #fcd34d;
  border-color: rgba(234, 179, 8, 0.28);
}
body.theme-dark #view-ai-recommendation .rec-sb-form-status-badge--active {
  background: rgba(34, 197, 94, 0.14);
  color: #6ee7a0;
  border-color: rgba(34, 197, 94, 0.28);
}
body.theme-dark #view-ai-recommendation .rec-sb-list-header {
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-sb-item {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-sb-item:hover {
  background: #222a3d;
  border-color: #3d4a63;
}
body.theme-dark #view-ai-recommendation .rec-sb-list-empty,
body.theme-dark #view-ai-recommendation .proj-list-empty {
  color: #7a8499;
}

/* Form blocks & fields */
body.theme-dark #view-ai-recommendation .rec-form-block {
  background: #1e2638;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-form-block-label,
body.theme-dark #view-ai-recommendation .rec-form-label {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-form-hint {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-form-input {
  background: #1a2030;
  border-color: #2a3145;
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-form-input:focus {
  border-color: var(--teal-green);
  box-shadow: 0 0 0 2px rgba(var(--teal-green-rgb), 0.15);
}
body.theme-dark #view-ai-recommendation .rec-form-input::placeholder {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-prompt-preview {
  background: #1a2030;
  border-color: #2a3145;
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-form-group-label {
  color: #7a8499;
  border-bottom-color: #2a3145;
}

/* Block action buttons (e.g. "Choose from library") */
body.theme-dark #view-ai-recommendation .rec-block-btn {
  background: #1a2030;
  border-color: #2a3145;
  color: #c5cee0;
}
body.theme-dark #view-ai-recommendation .rec-block-btn:hover {
  background: #222a3d;
  border-color: #3d4a63;
}
body.theme-dark #view-ai-recommendation .rec-block-btn--ghost {
  color: #8a95ab;
}

/* Situation / decision chips */
body.theme-dark #view-ai-recommendation .rec-chip {
  background: #1a2030;
  border-color: #2a3145;
  color: #c5cee0;
}
body.theme-dark #view-ai-recommendation .rec-chip:hover {
  background: #222a3d;
  border-color: #3d4a63;
}
body.theme-dark #view-ai-recommendation .rec-chip--selected {
  background: rgba(var(--teal-green-rgb), 0.14);
  border-color: var(--teal-green);
  color: var(--teal-green-from);
}

/* Decision criteria rows */
body.theme-dark #view-ai-recommendation .rec-decision-criterion-row {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-criterion-label {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-priority-btn {
  background: #1e2638;
  border-color: #2a3145;
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-priority-btn--high.rec-priority-btn--active {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.28);
}
body.theme-dark #view-ai-recommendation .rec-priority-btn--medium.rec-priority-btn--active {
  background: rgba(234, 179, 8, 0.14);
  color: #fcd34d;
  border-color: rgba(234, 179, 8, 0.28);
}
body.theme-dark #view-ai-recommendation .rec-priority-btn--low.rec-priority-btn--active {
  background: rgba(34, 197, 94, 0.14);
  color: #6ee7a0;
  border-color: rgba(34, 197, 94, 0.28);
}
body.theme-dark #view-ai-recommendation .rec-criterion-remove {
  color: #7a8499;
}

/* Linked persona card in scenario form */
body.theme-dark #view-ai-recommendation .rec-persona-linked-card {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-persona-linked-name {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-persona-linked-role {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-hint-small {
  color: #7a8499;
}

/* Tag input widgets (Persona Builder) */
body.theme-dark #view-ai-recommendation .rec-tag-input-wrap {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-tag-input-wrap:focus-within {
  border-color: var(--teal-green);
  box-shadow: 0 0 0 2px rgba(var(--teal-green-rgb), 0.12);
}
body.theme-dark #view-ai-recommendation .rec-tag-input {
  color: #eef1f8;
}

/* Persona Builder sub-tabs, generate & upload */
body.theme-dark #view-ai-recommendation .rec-pb-subtabs {
  background: #1e2638;
  border-bottom-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-pb-subtab {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-pb-subtab:hover,
body.theme-dark #view-ai-recommendation .rec-pb-subtab--active {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-pb-generate-desc {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-pb-gen-status {
  background: #1a2030;
  border-color: #2a3145;
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-pb-gen-status--error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}
body.theme-dark #view-ai-recommendation .rec-pb-upload-area {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-pb-upload-area:hover,
body.theme-dark #view-ai-recommendation .rec-pb-upload-area.rec-pb-upload-area--dragover {
  border-color: var(--teal-green);
  background: rgba(var(--teal-green-rgb), 0.08);
}
body.theme-dark #view-ai-recommendation .rec-pb-upload-label {
  color: #eef1f8;
}
body.theme-dark #view-ai-recommendation .rec-pb-upload-hint {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-pb-upload-progress {
  background: #1a2030;
  border-color: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-pb-upload-progress-label {
  color: #8a95ab;
}
body.theme-dark #view-ai-recommendation .rec-pb-upload-progress-track {
  background: #2a3145;
}
body.theme-dark #view-ai-recommendation .rec-pb-generate-divider {
  color: #7a8499;
}
body.theme-dark #view-ai-recommendation .rec-pb-generate-divider::before,
body.theme-dark #view-ai-recommendation .rec-pb-generate-divider::after {
  background: #2a3145;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rec-hero2-grid { grid-template-columns: 1fr; }
  .rec-hero2-main, .rec-hero2-summary, .rec-hero2-kpis { border-right: none; border-bottom: 1px solid var(--border, #e5e7eb); }
  .rec-bar-row { grid-template-columns: 120px 1fr 36px;   }
}

/* ══════════════════════════════════════════════════════════════
   Persona card component
   ══════════════════════════════════════════════════════════════ */

/* Persona label row (label + preview button) */
.rec-persona-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.rec-persona-actions {
  display: flex;
  gap: 6px;
}

.rec-persona-hint-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--ui-text-muted);
  background: var(--ui-bg-soft, #f3f4f6);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 2px 8px;
  letter-spacing: 0.01em;
}

.rec-persona-guide {
  font-size: 12px;
  color: var(--ui-text-muted);
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.rec-persona-guide em {
  font-style: normal;
  font-weight: 600;
  color: var(--ui-text);
}

/* Side-by-side textarea + live card */
.rec-persona-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.rec-persona-textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.6;
}

/* Live card area */
.rec-persona-card-live {
  min-height: 140px;
}

.rec-persona-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  border: 1px dashed var(--ui-border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.rec-persona-card-empty-icon {
  font-size: 24px;
  opacity: 0.4;
}

.rec-persona-card-empty p {
  font-size: 12px;
  color: var(--ui-text-muted);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .rec-persona-split {
    grid-template-columns: 1fr;
  }
}

.rec-persona-preview-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-text-muted);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.rec-persona-preview-btn:hover {
  color: var(--ui-text);
  border-color: var(--ui-border-hover, #475569);
  background: var(--ui-hover-bg, rgba(0,0,0,0.04));
}

.rec-persona-preview-btn--active {
  color: var(--ui-text);
  border-color: var(--teal-green);
  background: rgba(var(--teal-green-rgb), 0.08);
}

/* Persona card preview container */
.rec-persona-card-preview {
  margin-top: 0;
}

/* ── The Persona Card ──────────────────────────────────────── */
.persona-card {
  background: var(--ui-bg, #fff);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  overflow: hidden;
  font-size: 13px;
  color: var(--ui-text);
  line-height: 1.55;
}

.persona-card-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px 14px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--ui-border);
}

.persona-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--teal-green-grad);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.persona-card-identity {
  flex: 1;
  min-width: 0;
}

.persona-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ui-text);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.persona-card-role {
  font-size: 12px;
  color: var(--ui-text-muted);
  margin: 0;
}

.persona-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.persona-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(var(--teal-green-rgb), 0.12);
  color: var(--teal-green-to);
  border: 1px solid rgba(var(--teal-green-rgb), 0.3);
}

.persona-card-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.persona-card-desc {
  font-size: 13px;
  color: var(--ui-text);
  line-height: 1.6;
  margin: 0;
}

.persona-card-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.persona-card-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ui-text-muted);
  margin: 0;
}

.persona-card-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ui-border);
}

.persona-card-section-icon {
  font-size: 13px;
  line-height: 1;
}

.persona-card-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 4px;
}

.persona-card-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ui-text);
  line-height: 1.5;
}

.persona-card-item::before {
  content: '\B7';
  color: var(--teal-green);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
}

.persona-card-demog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

.persona-card-demog-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.persona-card-demog-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ui-text-muted);
}

.persona-card-demog-value {
  font-size: 12.5px;
  color: var(--ui-text);
}

   (mirrors .proj-workspace / .proj-list-pane / .proj-detail-pane)
   ══════════════════════════════════════════════════════════════ */
.rec-sb-workspace {
  --rec-sb-left-width: 32%;
  display: grid;
  grid-template-columns: minmax(240px, var(--rec-sb-left-width)) 8px minmax(360px, 1fr);
  align-items: start;
  gap: 0;
  min-height: 520px;
  background: var(--ui-bg-soft, #f9fafb);
}

.rec-sb-list-pane {
  min-width: 0;
  overflow: hidden;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rec-sb-detail-pane {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding-left: 8px;
}

.rec-sb-list-header {
  padding: 8px 12px 14px 12px;
  border-bottom: 1px solid var(--ui-border);
  margin-bottom: 10px;
}

.rec-sb-list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.rec-sb-list-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ui-text);
  margin: 0;
}

.rec-sb-list-subtitle {
  font-size: 12px;
  color: var(--ui-text-muted);
  margin: 0;
}

.rec-sb-list-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

/* Scenario list items */
.rec-sb-item {
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rec-sb-item:hover {
  border-color: var(--ui-border-hover, #475569);
  background: var(--ui-hover-bg, rgba(255,255,255,0.04));
}

.rec-sb-item--selected {
  border-color: var(--teal-green) !important;
  background: rgba(var(--teal-green-rgb), 0.12) !important;
}

.rec-sb-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rec-sb-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-sb-item-meta {
  font-size: 11px;
  color: var(--ui-text-muted);
  padding-left: 2px;
}

.rec-sb-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.rec-sb-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  color: var(--ui-text-muted);
  font-size: 13px;
  line-height: 1;
  transition: color 0.12s, background 0.12s;
}

.rec-sb-icon-btn:hover {
  color: var(--ui-text);
  background: var(--ui-hover-bg, rgba(0,0,0,0.06));
}

.rec-sb-icon-btn--danger:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* Toggle switch reuse */
.rec-sb-toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--ui-border);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
  flex-shrink: 0;
}

.rec-sb-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}

.rec-sb-toggle--on {
  background: var(--teal-green-grad);
}

.rec-sb-toggle--on::after {
  left: 16px;
}

/* Empty state in list */
.rec-sb-list-empty {
  font-size: 13px;
  color: var(--ui-text-muted);
  padding: 16px 12px;
  line-height: 1.5;
}

/* Empty state in right pane */
.rec-sb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
  padding: 40px 32px;
}

.rec-sb-empty p {
  font-size: 14px;
  color: var(--ui-text-muted);
  line-height: 1.6;
}

/* Form inside right pane */
.rec-sb-form-wrap {
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  overflow: hidden;
}

.rec-sb-form-header {
  padding: 14px 20px 12px 20px;
  border-bottom: 1px solid var(--ui-border);
}

.rec-sb-form-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ui-text);
}

.rec-sb-form-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 260px);
}

.rec-sb-form-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--ui-border);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  background: var(--ui-bg-soft, #f9fafb);
}

.rec-sb-form-footer .btn,
.rec-sb-form-footer .btn-secondary {
  margin-top: 0;
  min-height: 34px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  box-sizing: border-box;
}

@media (max-width: 860px) {
  .rec-sb-workspace {
    grid-template-columns: 1fr;
  }
  .rec-sb-workspace .claims-splitter {
    display: none;
  }
  .rec-sb-detail-pane {
    position: static;
    max-height: none;
    padding-left: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   Research Studio — new styles (Phase 1-3)
   ══════════════════════════════════════════════════════════════ */

/* ── Status badge on form header ───────────────────────────────── */
.rec-sb-form-header { display: flex; align-items: center; gap: 10px; }
.rec-sb-form-status-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 8px; border-radius: 10px;
}
.rec-sb-form-status-badge--draft  { background: #fef9c3; color: #a16207; border: 1px solid #fde047; }
.rec-sb-form-status-badge--active { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; }

/* ── Form blocks (card-style sections) ─────────────────────────── */
.rec-form-block {
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 14px; background: var(--surface-0, #fff);
}
.rec-form-block-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rec-form-block-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.rec-form-block-label { font-size: 13px; font-weight: 600; color: var(--text, #111827); flex: 1; }
.rec-form-block-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.rec-block-btn {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border, #e5e7eb); background: #fff; color: var(--text, #111827);
  cursor: pointer; transition: background .12s, border-color .12s; white-space: nowrap;
}
.rec-block-btn:hover { background: var(--surface-1, #f9fafb); border-color: #9ca3af; }
.rec-block-btn--ghost { color: var(--text-secondary, #6b7280); }
.rec-block-btn--primary { background: var(--teal-green-grad); border-color: var(--teal-green); color: #fff; }
.rec-block-btn--primary:hover { background: var(--teal-green-grad-hover); border-color: var(--teal-green-to); }

/* ── Chips ──────────────────────────────────────────────────────── */
.rec-chip-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rec-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  border-radius: 20px; border: 1px solid var(--border, #e5e7eb);
  background: var(--surface-1, #f9fafb); font-size: 12px; font-weight: 500;
  color: var(--text, #111827); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s; user-select: none;
}
.rec-chip:hover { border-color: #9ca3af; background: #f3f4f6; }
.rec-chip--selected { background: rgba(var(--teal-green-rgb),.15); border-color: var(--teal-green); color: var(--teal-green-to); font-weight: 600; }
.rec-chip--selected::before { content: '✓ '; font-size: 11px; }
.rec-chip-custom-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.rec-chip-custom-input { flex: 1; }
.rec-situation-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }

/* ── Decision criteria ──────────────────────────────────────────── */
.rec-decision-selected { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rec-decision-criterion-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: var(--surface-0, #fff);
}
.rec-criterion-label { flex: 1; font-size: 13px; color: var(--text, #111827); }
.rec-criterion-priority { display: flex; gap: 4px; }
.rec-priority-btn {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  border: 1px solid var(--border, #e5e7eb); background: var(--surface-1, #f9fafb);
  color: var(--text-secondary, #6b7280); cursor: pointer;
}
.rec-priority-btn--high.rec-priority-btn--active   { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.rec-priority-btn--medium.rec-priority-btn--active { background: #fef9c3; color: #ca8a04; border-color: #fde047; }
.rec-priority-btn--low.rec-priority-btn--active    { background: #dcfce7; color: #16a34a; border-color: #86efac; }
.rec-criterion-remove {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  border-radius: 4px; color: var(--text-secondary, #9ca3af); font-size: 14px; line-height: 1;
}
.rec-criterion-remove:hover { color: #ef4444; }

/* ── Persona linked card in Scenario Builder ────────────────────── */
.rec-persona-linked-card {
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 12px 14px;
  background: var(--surface-1, #f9fafb); display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
}
.rec-persona-linked-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal-green-grad); color: #fff;
  font-size: 15px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.rec-persona-linked-info { flex: 1; min-width: 0; }
.rec-persona-linked-name { font-size: 13px; font-weight: 600; color: var(--text, #111827); }
.rec-persona-linked-role { font-size: 11px; color: var(--text-secondary, #6b7280); }
.rec-hint-small { font-size: 11px; color: var(--text-muted, #9ca3af); margin-top: 4px; }
.rec-hint-small a { color: var(--teal-green-to); text-decoration: none; }
.rec-hint-small a:hover { text-decoration: underline; }
.rec-prompt-preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rec-prompt-preview-header .rec-form-label { margin: 0; }

/* ── Form group labels ──────────────────────────────────────────── */
.rec-form-group-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted, #9ca3af); padding: 0 0 6px 0; margin: 10px 0 4px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.rec-form-label--sm { font-size: 11px; }

/* ── Tag input widget ──────────────────────────────────────────── */
.rec-tag-input-wrap {
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px; padding: 6px 8px;
  display: flex; flex-wrap: wrap; gap: 5px; background: #fff; cursor: text;
  min-height: 38px; align-items: center;
}
.rec-tag-input-wrap:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.12); }
.rec-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(var(--teal-green-rgb),.15); border: 1px solid rgba(var(--teal-green-rgb),.3);
  border-radius: 12px; padding: 2px 8px; font-size: 12px; font-weight: 500; color: var(--teal-green-to);
}
.rec-tag-remove { background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; line-height: 1; color: var(--teal-green-to); opacity: .7; }
.rec-tag-remove:hover { opacity: 1; color: #ef4444; }
.rec-tag-input { border: none; outline: none; font-size: 12px; color: var(--text, #111827); flex: 1; min-width: 120px; background: transparent; padding: 2px 0; }

/* ── Persona Builder sub-tabs ──────────────────────────────────── */
.rec-pb-subtabs { display: flex; border-bottom: 1px solid var(--border, #e5e7eb); padding: 0 20px; background: var(--surface-1, #f9fafb); }
.rec-pb-subtab {
  padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--text-secondary, #6b7280);
  border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .12s, border-color .12s;
}
.rec-pb-subtab:hover { color: var(--text, #111827); }
.rec-pb-subtab--active { color: var(--text, #111827); font-weight: 600; border-bottom-color: var(--teal-green); }
.rec-pb-generate-wrap { padding: 8px 0; }
.rec-pb-generate-desc { font-size: 13px; color: var(--text-secondary, #6b7280); line-height: 1.6; margin-bottom: 16px; }
.rec-pb-gen-status { margin-top: 12px; font-size: 13px; color: var(--text-secondary, #6b7280); padding: 10px 12px; border-radius: 6px; background: var(--surface-1, #f9fafb); border: 1px solid var(--border, #e5e7eb); }
.rec-pb-gen-status--error { color: #dc2626; border-color: #fca5a5; background: #fee2e2; }

/* ══════════════════════════════════════════════════════════════
   Persona Library tab
   ══════════════════════════════════════════════════════════════ */
.rec-pl-page { padding: 0; }
.rec-pl-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 16px; border-bottom: 1px solid var(--border, #e5e7eb); background: var(--surface-0, #fff); }
.rec-pl-header-left { display: flex; flex-direction: column; gap: 2px; }
.rec-pl-header-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.rec-pl-title { font-size: 18px; font-weight: 700; color: var(--text, #111827); margin: 0; }
.rec-pl-subtitle { font-size: 13px; color: var(--text-secondary, #6b7280); margin: 0; }
.rec-pl-filters { display: flex; align-items: center; gap: 8px; padding: 12px 28px; border-bottom: 1px solid var(--border, #e5e7eb); background: var(--surface-0, #fff); flex-wrap: wrap; }
.rec-pl-filter-btn { font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border, #e5e7eb); background: var(--surface-1, #f9fafb); color: var(--text-secondary, #6b7280); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.rec-pl-filter-btn:hover { border-color: #9ca3af; color: var(--text, #111827); }
.rec-pl-filter-btn--active { background: rgba(var(--teal-green-rgb),.12); border-color: var(--teal-green); color: var(--teal-green-to); font-weight: 700; }
.rec-pl-search-wrap { margin-left: auto; }
.rec-pl-search { width: 220px; padding: 6px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 20px; font-size: 12px; color: var(--text, #111827); background: #fff; outline: none; }
.rec-pl-search:focus { border-color: #3b82f6; }
.rec-pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 24px 28px; }
.rec-pl-empty { font-size: 14px; color: var(--text-muted, #9ca3af); padding: 40px; text-align: center; grid-column: 1 / -1; }
.rec-pl-card { background: var(--surface-0, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.rec-pl-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); border-color: #c4d4e8; }
.rec-pl-card-header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-bottom: 1px solid var(--border, #e5e7eb); }
.rec-pl-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--teal-green-grad); color: #fff; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rec-pl-card-identity { flex: 1; min-width: 0; }
.rec-pl-card-name { font-size: 14px; font-weight: 700; color: var(--text, #111827); margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-pl-card-role { font-size: 11.5px; color: var(--text-secondary, #6b7280); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-pl-card-meta { display: flex; align-items: center; gap: 6px; padding: 10px 16px 8px; flex-wrap: wrap; }
.rec-pl-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 8px; }
.rec-pl-badge--b2b { background: #dbeafe; color: #1d4ed8; }
.rec-pl-badge--b2c { background: #fce7f3; color: #be185d; }
.rec-pl-badge--generated { background: #f3e8ff; color: #7c3aed; }
.rec-pl-badge--global { background: #d1fae5; color: #065f46; }
.rec-pl-card-tag { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 8px; background: rgba(var(--teal-green-rgb),.1); color: var(--teal-green-to); border: 1px solid rgba(var(--teal-green-rgb),.25); }
.rec-pl-card--global { border-left: 3px solid var(--teal-400, #2dd4bf); }
.rec-pl-avatar--global { background: var(--teal-green-grad); color: #fff; }
.rec-pl-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted, #6b7280); padding: 4px 0 10px; grid-column: 1 / -1; }
.rec-pl-section-title--global { color: var(--teal-green); margin-top: 8px; }
.rec-picker-section-label { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted, #9ca3af); padding: 8px 0 4px; }
.rec-picker-section-label--global { color: var(--teal-green); }
.rec-picker-std-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; background: #d1fae5; color: #065f46; border-radius: 6px; padding: 1px 5px; vertical-align: middle; margin-left: 4px; }
.rec-pl-card-summary { font-size: 12px; color: var(--text-secondary, #6b7280); line-height: 1.55; padding: 4px 16px 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-pl-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border, #e5e7eb); background: var(--surface-1, #f9fafb); }
.rec-pl-usage { font-size: 11px; color: var(--text-muted, #9ca3af); }
.rec-pl-card-actions { display: flex; gap: 4px; }

/* Persona picker modal */
.rec-persona-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 24px; }
.rec-persona-picker-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 760px; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,.18); }
.rec-persona-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; border-bottom: 1px solid var(--border, #e5e7eb); }
.rec-persona-picker-title { font-size: 16px; font-weight: 700; color: var(--text, #111827); }
.rec-persona-picker-close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--text-secondary, #6b7280); line-height: 1; padding: 2px 6px; border-radius: 4px; }
.rec-persona-picker-close:hover { color: var(--text, #111827); background: #f3f4f6; }
.rec-persona-picker-search { padding: 12px 24px; border-bottom: 1px solid var(--border, #e5e7eb); }
.rec-persona-picker-grid { overflow-y: auto; flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 16px 24px; align-content: start; }
.rec-persona-picker-card { border: 2px solid var(--border, #e5e7eb); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: border-color .12s, background .12s; display: flex; align-items: center; gap: 12px; }
.rec-persona-picker-card:hover { border-color: var(--teal-green); background: rgba(var(--teal-green-rgb),.04); }
.rec-persona-picker-card--selected { border-color: var(--teal-green); background: rgba(var(--teal-green-rgb),.1); }
.rec-persona-picker-footer { padding: 12px 24px; border-top: 1px solid var(--border, #e5e7eb); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-1, #f9fafb); }

/* Full-width override for builder and persona tabs */
#view-ai-recommendation #rec-tab-builder.air-tab-panel,
#view-ai-recommendation #rec-tab-personas.air-tab-panel,
#view-ai-recommendation #rec-tab-persona-builder.air-tab-panel {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ── Rec nav: tool tabs rechts uitlijnen ────────────────────────────────── */
#rec-nav-tabs { display: flex; align-items: center; }
#rec-nav-tabs .rec-nav-tab--tool:first-of-type {
  margin-left: auto;
  border-left: 1px solid var(--border, #e5e7eb);
  padding-left: 16px;
}
#rec-nav-tabs .rec-nav-tab--tool {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
}
#rec-nav-tabs .rec-nav-tab--tool.air-nav-tab--active {
  color: var(--text, #111827);
}

/* ── Rec tool-tabs rechts uitlijnen (override vorige poging) ────────────── */
#rec-nav-tabs .rec-nav-tab--tool:first-child,
#rec-nav-tabs .air-nav-tab.rec-nav-tab--tool:nth-child(5) {
  margin-left: auto;
}

/* spacer duwt tool-tabs naar rechts */
.rec-nav-tab-spacer { flex: 1; }

.cmp-pb-page {
  max-width: 720px;
  padding: 20px 0 32px;
}
.cmp-pb-header { margin-bottom: 16px; }
.cmp-pb-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
}
.cmp-pb-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
}
.cmp-pb-hint { margin: 0 0 8px; }
.cmp-pb-top4-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #6b7280);
  margin: 0 0 8px;
}
.cmp-pb-list { margin-bottom: 16px; }
.cmp-pb-row--top4 {
  border-left: 3px solid var(--accent, #4cb9b9);
  padding-left: 8px;
}
.cmp-pb-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, #4cb9b9);
}
.cmp-pb-rank--muted { color: var(--text-muted, #9ca3af); }
.cmp-pb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

#cmp-pb-autofill-btn.cmp-pb-btn--accent,
#cmp-pb-save-btn.cmp-pb-btn--accent {
  background: var(--accent-orange-purple-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
#cmp-pb-autofill-btn.cmp-pb-btn--accent:hover:not(:disabled),
#cmp-pb-save-btn.cmp-pb-btn--accent:hover:not(:disabled) {
  background: var(--accent-orange-purple-grad) !important;
  filter: brightness(1.06);
}

.cmp-pb-run-scan-btn {
  margin-top: 0;
  background: var(--teal-green-grad) !important;
  color: #fff !important;
  border: none !important;
}
.cmp-pb-run-scan-btn:hover:not(:disabled) {
  filter: brightness(0.94);
}
.cmp-pb-run-scan-btn--running,
.cmp-pb-run-scan-btn--running:disabled {
  opacity: 0.85;
  cursor: default;
}

.cmp-pb-scan-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.cmp-pb-scan-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cmp-pb-scan-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.cmp-pb-scan-pill--ok {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.cmp-pb-scan-pill--partial {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
.cmp-pb-scan-pill--missing {
  background: #f3f4f6;
  color: #9ca3af;
}
.cmp-pb-scan-loading {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
}
.cmp-pb-list .proj-peer-row {
  flex-wrap: wrap;
  gap: 8px 10px;
}

/* ── Persona upload area ────────────────────────────────────────────────── */
.rec-pb-upload-area {
  border: 2px dashed var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 24px 20px;
  text-align: center;
  background: var(--surface-1, #f9fafb);
  transition: border-color .15s, background .15s;
  margin-bottom: 8px;
}
.rec-pb-upload-area:hover,
.rec-pb-upload-area.rec-pb-upload-area--dragover {
  border-color: var(--teal-green);
  background: rgba(var(--teal-green-rgb),.04);
}
.rec-pb-upload-icon { font-size: 28px; margin-bottom: 8px; }
.rec-pb-upload-label { font-size: 13px; font-weight: 600; color: var(--text, #111827); margin: 0 0 4px; }
.rec-pb-upload-hint  { font-size: 11px; color: var(--text-muted, #9ca3af); margin: 0 0 12px; }
.rec-pb-upload-btn   { cursor: pointer; }
.rec-pb-upload-filename {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-green-to);
  background: rgba(var(--teal-green-rgb),.12);
  border: 1px solid rgba(var(--teal-green-rgb),.3);
  border-radius: 6px;
  padding: 4px 12px;
  display: inline-block;
}
.rec-pb-generate-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 16px;
  color: var(--text-muted, #9ca3af);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rec-pb-generate-divider::before,
.rec-pb-generate-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, #e5e7eb);
}

/* ── Persona upload progress bar ────────────────────────────────────────── */
.rec-pb-upload-progress {
  margin-top: 10px;
  border-radius: 8px;
  background: var(--surface-1, #f3f4f6);
  border: 1px solid var(--border, #e5e7eb);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rec-pb-upload-progress-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
}
.rec-pb-upload-progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border, #e5e7eb);
  overflow: hidden;
}
.rec-pb-upload-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--teal-green-grad);
  width: 0%;
  transition: width 0.4s ease;
}

/* ── Projects: Peers & Competitors block ────────────────────────────────── */
.proj-peers-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }

.proj-peer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-left: 3px solid var(--teal-green);
  border-radius: 8px;
  background: #fff;
  user-select: none;
}
.proj-peer-row:hover { background: var(--surface-1, #f9fafb); }
.proj-peer-handle { cursor: grab; color: var(--text-muted, #9ca3af); font-size: 14px; flex-shrink: 0; }
.proj-peer-handle:active { cursor: grabbing; }
.proj-peer-name-wrap {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.proj-peer-name  { font-size: 13px; font-weight: 500; color: var(--text, #111827); }
.proj-peer-info  { flex-shrink: 0; margin-left: 0; }
.proj-peer-del   { flex-shrink: 0; }

.proj-peer-status {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.proj-peer-status--linked  { background: rgba(var(--teal-green-rgb),.12); color: var(--teal-green-to); }
.proj-peer-status--missing { background: #f3f4f6; color: #9ca3af; }

.proj-peers-add-row {
  display: flex; gap: 8px; align-items: center;
}
.proj-peers-dd {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
  z-index: 100; max-height: 200px; overflow-y: auto; margin-top: 4px;
}
.cmp-peer-dd-item {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text, #111827);
  cursor: pointer;
}
.cmp-peer-dd-item:hover { background: var(--ui-secondary-bg, #f3f4f6); }
.cmp-peer-dd-item--hint { color: var(--text-muted, #9ca3af); cursor: default; }
.cmp-peer-dd-item--hint:hover { background: transparent; }
.proj-peers-autofill-status {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  min-height: 16px;
  margin-bottom: 10px;
}
.proj-peers-compare-field {
  margin: 14px 0 8px;
}
.proj-peers-autofill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.proj-viewer-invite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.proj-viewer-invite-row .proj-input {
  flex: 1;
  min-width: 200px;
}

body.theme-dark .proj-filter-input {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--ui-border);
}
body.theme-dark .proj-filter-input::placeholder { color: #4e5a70; }
body.theme-dark .proj-filter-input:focus { border-color: var(--teal-green); }

body.theme-dark #view-projects .proj-ctx-meta .air-ctx-value { color: #c5cee0; }
body.theme-dark #view-projects .proj-ctx-meta .air-ctx-label { color: #7a8499; }
body.theme-dark #view-projects .proj-ctx-meta .air-ctx-label:first-child { color: #eef1f8; }

body.theme-dark .proj-peer-row {
  background: var(--input-bg);
  border-color: var(--ui-border);
}
body.theme-dark .proj-peer-row:hover { background: #232a37; }
body.theme-dark .proj-peer-name { color: #c5cee0; }
body.theme-dark .proj-peer-handle { color: #5a6480; }
body.theme-dark .proj-peer-status--missing {
  background: #232a37;
  color: #7a8499;
}
body.theme-dark .proj-peers-dd {
  background: var(--input-bg);
  border-color: var(--ui-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
body.theme-dark .cmp-peer-dd-item { color: #c5cee0; }
body.theme-dark .cmp-peer-dd-item:hover { background: #232a37; }
body.theme-dark .cmp-peer-dd-item--hint { color: #7a8499; }
body.theme-dark .proj-peers-autofill-status { color: #7a8499; }
body.theme-dark .proj-peers-add-row .proj-input,
body.theme-dark #proj-peers-add-input {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--ui-border);
}
body.theme-dark .proj-section {
  background: var(--bg-card);
  border-color: var(--ui-border);
}

/* ── Projects: Create peer project modal ────────────────────────────────── */
.proj-create-peer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
}
.proj-create-peer-modal {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  display: flex; flex-direction: column; gap: 14px;
}
.proj-create-peer-title {
  font-size: 16px; font-weight: 700;
  color: var(--text, #111827); margin: 0;
}
.proj-create-peer-title em { font-style: normal; color: var(--teal-green-to); }
.proj-create-peer-body {
  font-size: 13px; color: var(--text-secondary, #6b7280); margin: 0; line-height: 1.5;
}
.proj-create-peer-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 8px; border-top: 1px solid #f3f4f6;
}

.proj-peers-compare-hint {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary, #6b7280);
}
body.theme-dark .proj-peers-compare-hint {
  color: #7a8499;
}

/* ── Core: Business Type toggle ─────────────────────────────────────────── */
.proj-biz-type-toggle {
  display: inline-flex;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
}
.proj-biz-type-opt {
  background: none;
  border: none;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.proj-biz-type-opt + .proj-biz-type-opt {
  border-left: 1px solid var(--border, #e5e7eb);
}
.proj-scope-segment-opt.proj-biz-type-opt--active[data-scope="workspace"] {
  background: var(--teal-green-grad);
  color: #fff;
  font-weight: 700;
}
.proj-scope-segment-opt.proj-biz-type-opt--active[data-scope="customer"] {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #fff;
  font-weight: 700;
}
.proj-scope-segment-opt.proj-biz-type-opt--active[data-scope="market"] {
  background: linear-gradient(135deg, #fde047 0%, #eab308 100%);
  color: #422006;
  font-weight: 700;
}
.proj-biz-type-opt--active {
  background: var(--teal-green-grad);
  color: #fff;
  font-weight: 700;
}

/* ── Core: Optional Context collapsible ─────────────────────────────────── */
.proj-field--collapsible {
  margin-bottom: 12px;
}
.proj-context-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}
.proj-context-toggle:hover .proj-context-toggle-label {
  color: var(--ui-accent, var(--teal-green));
}
.proj-context-toggle-label {
  margin-bottom: 0;
  pointer-events: none;
}
.proj-context-arrow {
  font-size: 0.55rem;
  line-height: 1;
  color: var(--ui-text-muted);
  transition: transform 0.15s, color 0.15s;
}
.proj-context-toggle:hover .proj-context-arrow {
  color: var(--ui-accent, var(--teal-green));
}
.proj-context-toggle--open .proj-context-arrow {
  transform: rotate(180deg);
}
.proj-context-body {
  margin-top: 8px;
}
.proj-context-body[hidden] {
  display: none;
}

/* ══ Framework Overview (four-layer dashboard) ═══════════════════════════ */
#view-overview.view-section {
  padding: 0;
}
#view-overview .fw-overview-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
#view-overview #fw-ctx-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  box-sizing: border-box;
}
.fw-overview-stack {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  width: 100%;
  box-sizing: border-box;
}
.fw-overview-block-wrap {
  margin-bottom: 8px;
}
.fw-overview-block-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 4px;
}
.fw-overview-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #111827);
  margin: 0;
  letter-spacing: -0.02em;
}
.fw-overview-block-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--teal-green);
  text-decoration: none;
  white-space: nowrap;
}
.fw-overview-block-link:hover { text-decoration: underline; }
.fw-overview-block.ov-hero-card {
  align-items: stretch;
}
.fw-overview-block__center {
  padding: 0 16px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.fw-overview-block__center:has(.fw-air-dim-col) {
  justify-content: flex-start;
  padding-top: 10px;
}
.fw-air-dim-col {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 220px;
  flex: 1;
}
.fw-air-dim-col .ov-section-hdr--top {
  flex-shrink: 0;
  margin-bottom: 10px;
}
.fw-air-dim-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.fw-overview-block__center .ov-section-hdr { margin-bottom: 4px; }
.fw-overview-block__center .ov-section-ttl { font-size: 12px; }
.fw-overview-block__center .ov-dim-table {
  font-size: 12px;
  width: 100%;
}
.fw-overview-block__center .bp-radar-wrap,
.fw-overview-block__center .bp-glance-left {
  width: 100%;
  max-width: 100%;
}
.fw-overview-block__center .bp-glance-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fw-overview-block__center .bp-glance-left--overview .bp-radar-wrap {
  width: 100%;
  max-width: 300px;
  min-width: 260px;
  margin: 0 auto;
}
.fw-overview-block__center .bp-radar-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.fw-overview-block__center .bp-radar-label {
  font-size: 8px;
}
.fw-overview-block__center .bp-radar-score {
  font-size: 8.5px;
}
.fw-overview-block__center .bp-radar-legend {
  font-size: 10px;
  margin-top: 8px;
}
.fw-overview-block__center .cmp-position-map,
.fw-overview-block__center .cmp-map-svg {
  max-width: 100%;
}
.fw-overview-priorities--compact .ov-priority-item {
  margin-bottom: 10px;
}
.fw-overview-priorities--compact .ov-impact {
  display: none !important;
}
.fw-rec-scores-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.fw-rec-scores-stack .fw-rec-score-panel {
  border-top: 1px solid var(--border, #e5e7eb);
  padding-top: 12px;
}
.fw-rec-scores-stack .fw-rec-score-panel:first-child {
  border-top: none;
  padding-top: 0;
}
.fw-rec-scores-stack .fw-rec-score-panel-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.fw-rec-scores-stack .fw-rec-panel-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.fw-rec-scores-stack .fw-rec-panel-gauge {
  flex-shrink: 0;
  width: 120px;
}
.fw-rec-scores-stack .fw-rec-panel-brands {
  flex: 1;
  min-width: 0;
  margin-left: 16px;
  padding-left: 12px;
}
.fw-rec-scores-stack .fw-rec-top5-brand--primary {
  font-weight: 700;
  color: var(--text, #111827);
}
.fw-rec-scores-stack .fw-rec-brands-ttl {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  line-height: 1.35;
}
.fw-rec-scores-stack .fw-rec-top5-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.fw-rec-scores-stack .fw-rec-top5-table td {
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light, #f3f4f6);
  vertical-align: middle;
}
.fw-rec-scores-stack .fw-rec-top5-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: var(--border-light, #f3f4f6);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
}
.fw-rec-scores-stack .fw-rec-top5-empty {
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
  margin: 0;
}
.fw-overview-trend-card { margin-top: 8px; }
.fw-framework-trend { width: 100%; overflow-x: auto; }
.fw-framework-trend svg { display: block; max-width: 100%; }
.fw-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.fw-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fw-trend-legend-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.fw-trend-legend-swatch--air { background: var(--teal-green-to); }
.fw-trend-legend-swatch--bp { background: var(--teal-green-from); }
.fw-trend-legend-swatch--rec { background: #d97706; }
.fw-trend-line--air { stroke: var(--teal-green-to); fill: none; stroke-width: 2; }
.fw-trend-line--bp { stroke: var(--teal-green-from); fill: none; stroke-width: 2; }
.fw-trend-line--rec { stroke: #d97706; fill: none; stroke-width: 2; }
.fw-trend-grid { stroke: #c5cdd8; stroke-width: 0.5; stroke-dasharray: 4 3; }
.fw-trend-dot--air { fill: var(--teal-green-to); }
.fw-trend-dot--bp { fill: var(--teal-green-from); }
.fw-trend-dot--rec { fill: #d97706; }
.fw-framework-trend .fw-trend-dot {
  stroke: #374151;
  stroke-width: 1.5;
}
.trend-pt-label {
  font-size: 11px;
  font-weight: 600;
  fill: #374151;
}
body.theme-dark .fw-framework-trend .fw-trend-grid { stroke: #2a3145; }
body.theme-dark .fw-framework-trend .fw-trend-dot {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2;
}
body.theme-dark .fw-framework-trend .trend-pt-label,
body.theme-dark .trend-pt-label { fill: #c5cee0; }
.fw-overview-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  max-width: 360px;
}
.fw-overview-empty {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
  margin: 0;
}
.fw-overview-empty--title {
  font-style: italic;
  font-size: 13px;
  margin-bottom: 2px;
}
.fw-overview-empty-hint {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  font-style: normal;
  line-height: 1.5;
  margin: 0 0 10px;
}
.fw-overview-empty-btn {
  margin-top: 16px;
  text-decoration: none !important;
}
button.fw-overview-empty-btn {
  font-family: inherit;
}

.fw-overview-block-wrap--scanning .ov-hero-card {
  outline: 1px solid rgba(13, 148, 136, 0.35);
  outline-offset: 2px;
}
.fw-overview-scan-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 4px;
  max-width: 320px;
}
.fw-overview-scan-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  color: var(--text, #111);
}
.fw-overview-scan-model {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  color: var(--text, #374151);
}
.fw-overview-scan-sub {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  font-style: normal;
}
.fw-overview-scan-progress .air-rep-progress-wrap {
  margin: 4px 0 2px;
  width: 100%;
  max-width: 280px;
}
.fw-overview-scan-time {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted, #9ca3af);
  font-style: normal;
}
.fw-overview-scan-error,
.module-scan-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  max-width: 360px;
}
.module-placeholder .module-scan-error {
  max-width: 480px;
}
.rec-builder-plan-blocked {
  padding: 48px 24px 64px;
  max-width: 720px;
  margin: 0 auto;
}
.fw-overview-scan-error-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
}
.fw-overview-scan-error-msg {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #6b7280);
}
.fw-overview-scan-error-upgrade {
  margin: 0;
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.fw-overview-scan-upgrade {
  color: var(--teal-green);
  font-weight: 600;
  text-decoration: none;
}
.fw-overview-scan-upgrade:hover {
  text-decoration: underline;
}
a.fw-overview-empty-btn,
a.fw-overview-empty-btn:hover,
a.fw-overview-empty-btn:focus,
a.fw-overview-empty-btn:active {
  text-decoration: none !important;
  color: #fff;
}
@media (max-width: 1100px) {
  .fw-overview-block.ov-hero-card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .fw-overview-block__center {
    padding: 0;
    min-height: 0;
  }
  .ov-hero-priorities.fw-overview-priorities--compact {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border-light, #f0f4f8);
    padding-top: 16px;
  }
}

/* ── Market Scan (superuser #alerts) ─────────────────────────────────────── */
.ms-page {
  padding: 0 0 32px;
}
.ms-access-denied {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted, #64748b);
}
.ms-brand-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ms-brand-head .ov-section-sub { display: block; margin-top: 4px; }
.ms-brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.ms-projects-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.22);
}
.ms-projects-hint p {
  margin: 0;
  font-size: 13px;
  color: var(--teal-green);
}
.ms-brand-ensure-btn--accent {
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.35);
}
.ms-progress-bar-block {
  margin: 10px 0 14px;
}
.ms-progress-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--text-muted, #64748b);
}
.ms-progress-bar-head span:first-child {
  font-weight: 600;
  color: var(--text, #0f172a);
}
.ms-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--border-light, #e2e8f0);
  overflow: hidden;
}
.ms-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--teal-green, var(--teal-green));
  transition: width 0.35s ease;
}
.ms-queue-link {
  margin: 0 0 10px;
  font-size: 13px;
}
.ms-workflow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0 16px 20px;
  padding: 12px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 10px;
  overflow-x: auto;
}
.ms-workflow-step {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 8px;
}
.ms-workflow-step--pending { opacity: 0.65; }
.ms-workflow-step--running {
  background: rgba(13, 148, 136, 0.08);
  opacity: 1;
}
.ms-workflow-step--done {
  background: rgba(13, 148, 136, 0.12);
  opacity: 1;
}
.ms-workflow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: var(--border-light, #e2e8f0);
  color: var(--text-muted, #64748b);
}
.ms-workflow-step--running .ms-workflow-num,
.ms-workflow-step--done .ms-workflow-num {
  background: var(--teal-green, var(--teal-green));
  color: #fff;
}
.ms-workflow-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #0f172a);
}
.ms-workflow-state {
  font-size: 11px;
  color: var(--text-muted, #64748b);
}
.ms-workflow-connector {
  flex: 0 0 24px;
  align-self: center;
  height: 2px;
  background: var(--border-light, #e2e8f0);
  margin-top: 12px;
}
.ms-card--step {
  border-left: 3px solid var(--teal-green, var(--teal-green));
}
.ms-step-actions {
  margin: 12px 0;
}
.ms-step-ready {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(13, 148, 136, 0.08);
  font-size: 13px;
  line-height: 1.5;
}
.ms-article-panel { min-height: 80px; }
.ms-article-empty {
  color: var(--text-muted, #64748b);
  font-size: 13px;
  margin: 0;
}
.ms-article-card {
  padding: 14px 16px;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 8px;
  background: var(--surface-alt, #f8fafc);
}
.ms-article-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ms-article-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
}
.ms-article-status--published {
  background: rgba(13, 148, 136, 0.15);
  color: var(--teal-green, var(--teal-green));
}
.ms-article-date,
.ms-article-meta {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin: 0 0 6px;
}
.ms-article-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 8px;
}
.ms-article-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}
.ms-article-hint {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin: 0;
}
.ms-month-input {
  min-width: 140px;
}
.ms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 16px;
}
.ms-card--wide {
  grid-column: 1 / -1;
}
.ms-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}
.ms-brand-table,
.ms-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ms-brand-table th,
.ms-rank-table th,
.ms-brand-table td,
.ms-rank-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light, #e8edf2);
  text-align: left;
  vertical-align: middle;
}
.ms-brand-table th,
.ms-rank-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}
.ms-cell-input {
  width: 100%;
  min-width: 0;
  font-size: 13px;
}
.ms-td-num { width: 36px; color: var(--text-muted); }
.ms-td-pid { width: 72px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.ms-td-rank { width: 48px; font-weight: 600; }
.ms-td-delta { width: 56px; }
.ms-td-score { font-weight: 600; color: var(--teal-green); }
.ms-th-hint { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.ms-legacy-warn {
  margin: 8px 0 0;
  padding: 8px 12px;
  font-size: 13px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
}
.market-rank-delta--up { color: #059669; font-weight: 600; }
.market-rank-delta--down { color: #dc2626; font-weight: 600; }
.market-rank-delta--flat { color: var(--text-muted, #64748b); }
.market-rank-delta--band { color: #6366f1; font-weight: 500; font-size: 12px; }
.ms-rank-band {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
}
.ms-rank-band--top { background: #ecfdf5; color: #047857; }
.ms-rank-band--upper_mid { background: #eff6ff; color: #1d4ed8; }
.ms-rank-band--lower_mid { background: #fff7ed; color: #c2410c; }
.ms-rank-band--tail { background: #f8fafc; color: #64748b; }
.ms-td-band { min-width: 100px; }
.ms-tied { color: var(--text-muted); font-size: 10px; margin-left: 2px; }
.ms-score-raw { color: #b45309; font-weight: 600; cursor: help; }
.ms-empty { color: var(--text-muted); text-align: center; padding: 24px !important; }
.ms-meta-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light, #e8edf2);
}
.ms-meta-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.ms-qa-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 16px;
  font-size: 13px;
}
.ms-qa-metric {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(13, 148, 136, 0.06);
  border: 1px solid rgba(13, 148, 136, 0.12);
}
.ms-qa-metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.ms-qa-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}
.ms-qa-shifts {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.ms-progress-log {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
  max-height: 200px;
  overflow-y: auto;
}
.ms-progress-line { margin-bottom: 4px; }
.ms-progress-ok { color: var(--teal-green); }
.ms-progress-err { color: #dc2626; }
.ms-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.ms-msg {
  font-size: 13px;
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 6px;
}
.ms-msg--ok { background: rgba(13, 148, 136, 0.08); color: var(--teal-green); }
.ms-msg--err { background: rgba(220, 38, 38, 0.08); color: #dc2626; }
.ms-link { color: var(--teal-green); text-decoration: none; }
.ms-link:hover { text-decoration: underline; }
.ms-err { color: #dc2626; font-weight: 700; }
.ms-brand-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light, #e8edf2);
  padding-bottom: 0;
}
.ms-brand-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ms-brand-tab:hover { color: var(--text, #0f172a); }
.ms-brand-tab--active {
  color: var(--teal-green);
  border-bottom-color: var(--teal-green);
}
.ms-brand-panel[hidden] { display: none !important; }
.ms-paste-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 6px;
  line-height: 1.45;
}
.ms-paste-example {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.ms-paste-example code {
  font-size: 11px;
  word-break: break-all;
}
.ms-paste-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.ms-paste-area {
  width: 100%;
  min-height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid var(--border-light, #e8edf2);
  border-radius: 8px;
  resize: vertical;
  box-sizing: border-box;
}
.ms-paste-status {
  font-size: 12px;
  margin: 8px 0 0;
  color: var(--text-muted);
}
.ms-paste-status.ms-msg--err { color: #dc2626; }
.ms-explainer {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted, #64748b);
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface-muted, #f8fafc);
  border-radius: 8px;
}
.ms-explainer p { margin: 0; }
.ms-timestamps {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.ms-schedule-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.ms-schedule-row .ms-meta-label { flex: 1; min-width: 200px; }
.ms-ranking-ts {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.ms-td-scans { font-size: 12px; white-space: nowrap; }
.ms-td-ts { font-size: 12px; white-space: nowrap; color: var(--text-muted); }
.ms-cov-ok { color: var(--teal-green); }
.ms-cov-warn { color: #b45309; }
.ms-cov-miss { color: #dc2626; }
.ms-cov-total { color: var(--text-muted); font-size: 11px; }
.ms-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ms-modal[hidden] { display: none !important; }
.ms-modal-card {
  background: var(--surface, #fff);
  border-radius: 12px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ms-modal-title { margin: 0; font-size: 18px; }
.ms-modal-sub { margin: 0; font-size: 13px; color: var(--text-muted); }
.ms-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 1100px) {
  .ms-grid { grid-template-columns: 1fr; }
  .ms-meta-fields { grid-template-columns: 1fr; }
}

/* Market Scan — dark mode */
body.theme-dark #view-alerts .ov-section-title {
  color: #eef1f8;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
body.theme-dark .ms-workflow {
  background: var(--surface);
  border-color: #2a3145;
}
body.theme-dark .ms-workflow-step--running {
  background: rgba(88, 198, 197, 0.1);
}
body.theme-dark .ms-workflow-step--done {
  background: rgba(88, 198, 197, 0.14);
}
body.theme-dark .ms-workflow-label {
  color: #eef1f8;
}
body.theme-dark .ms-workflow-state {
  color: #8a95ab;
}
body.theme-dark .ms-workflow-num {
  background: #2a3145;
  color: #8a95ab;
}
body.theme-dark .ms-workflow-connector {
  background: #2a3145;
}
body.theme-dark .ms-explainer {
  background: var(--surface-muted);
  border: 1px solid #2a3145;
  color: #b0bbd0;
}
body.theme-dark .ms-step-ready {
  background: rgba(88, 198, 197, 0.1);
  border: 1px solid rgba(88, 198, 197, 0.22);
  color: #c5cee0;
}
body.theme-dark .ms-progress-bar {
  background: #2a3145;
}
body.theme-dark .ms-progress-bar-head span:first-child {
  color: #eef1f8;
}
body.theme-dark .ms-progress-bar-head span:last-child {
  color: #8a95ab;
}
body.theme-dark .ms-progress-ok {
  color: #6ee7b7;
}
body.theme-dark .ms-progress-err {
  color: #fca5a5;
}
body.theme-dark .ms-article-card {
  background: var(--surface-muted);
  border-color: #2a3145;
}
body.theme-dark .ms-article-title {
  color: #eef1f8;
}
body.theme-dark .ms-article-status {
  background: #2a3145;
  color: #c5cee0;
}
body.theme-dark .ms-article-status--published {
  background: rgba(88, 198, 197, 0.18);
  color: #6ee7b7;
}
body.theme-dark .ms-article-date,
body.theme-dark .ms-article-meta,
body.theme-dark .ms-article-hint,
body.theme-dark .ms-article-empty {
  color: #8a95ab;
}
body.theme-dark #view-alerts .ms-article-links .btn-secondary {
  background: #232a37;
  border-color: #3d4558;
  color: #e6e8ee;
}
body.theme-dark #view-alerts .ms-article-links .btn-secondary:hover {
  background: #2b3444;
  border-color: #4a5568;
  color: #fff;
}
body.theme-dark #view-alerts .btn.btn-primary:disabled,
body.theme-dark #view-alerts .btn.btn-primary[disabled] {
  background: #2a3145;
  color: #8a95ab;
  opacity: 1;
  filter: none;
}
body.theme-dark .ms-brand-tabs {
  border-bottom-color: #2a3145;
}
body.theme-dark .ms-brand-tab {
  color: #8a95ab;
  background: transparent;
}
body.theme-dark .ms-brand-tab:hover {
  color: #eef1f8;
  background: rgba(255, 255, 255, 0.04);
}
body.theme-dark .ms-brand-tab--active {
  background: transparent;
  border-bottom-color: var(--teal-green);
  color: #6ee7b7;
}
body.theme-dark .ms-brand-table th,
body.theme-dark .ms-rank-table th {
  color: #8a95ab;
  border-bottom-color: #2a3145;
}
body.theme-dark .ms-brand-table td,
body.theme-dark .ms-rank-table td {
  border-bottom-color: #252e42;
  color: #eef1f8;
}
body.theme-dark .ms-td-score {
  color: #6ee7b7;
}
body.theme-dark .ms-meta-fields {
  border-top-color: #2a3145;
}
body.theme-dark .ms-meta-label {
  color: #8a95ab;
}
body.theme-dark .ms-projects-hint {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.25);
}
body.theme-dark .ms-projects-hint p {
  color: #5eead4;
}
body.theme-dark .ms-legacy-warn {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.28);
  color: #fcd34d;
}
body.theme-dark .ms-rank-band {
  background: #2a3145;
  color: #c5cee0;
}
body.theme-dark .ms-rank-band--top {
  background: rgba(52, 211, 153, 0.15);
  color: #6ee7b7;
}
body.theme-dark .ms-rank-band--upper_mid {
  background: rgba(96, 165, 250, 0.15);
  color: #93c5fd;
}
body.theme-dark .ms-rank-band--lower_mid {
  background: rgba(251, 146, 60, 0.15);
  color: #fdba74;
}
body.theme-dark .ms-rank-band--tail {
  background: #232a37;
  color: #8a95ab;
}
body.theme-dark .ms-score-raw {
  color: #fbbf24;
}
body.theme-dark .ms-cov-warn {
  color: #fbbf24;
}
body.theme-dark .ms-cov-miss,
body.theme-dark .ms-err {
  color: #fca5a5;
}
body.theme-dark .ms-cov-ok,
body.theme-dark .ms-link {
  color: #6ee7b7;
}
body.theme-dark .ms-msg--ok {
  background: rgba(88, 198, 197, 0.12);
  color: #6ee7b7;
}
body.theme-dark .ms-msg--err {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}
body.theme-dark .ms-paste-hint,
body.theme-dark .ms-paste-example {
  color: #8a95ab;
}
body.theme-dark .ms-paste-example code {
  background: #232a37;
  color: #c5cee0;
}
body.theme-dark .ms-paste-area {
  background: var(--input-bg);
  border-color: #2a3145;
  color: #eef1f8;
}
body.theme-dark .ms-qa-metric {
  background: rgba(88, 198, 197, 0.08);
  border-color: rgba(88, 198, 197, 0.18);
}
body.theme-dark .ms-qa-metric-label {
  color: #8a95ab;
}
body.theme-dark .ms-qa-metric-value {
  color: #eef1f8;
}
body.theme-dark .ms-qa-shifts {
  color: #b0bbd0;
}
body.theme-dark .ms-modal {
  background: rgba(0, 0, 0, 0.62);
}
body.theme-dark .ms-modal-card {
  background: #1c2029;
  border: 1px solid #2a3145;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
body.theme-dark .ms-modal-title {
  color: #eef1f8;
}
body.theme-dark .ms-progress-log,
body.theme-dark .ms-timestamps,
body.theme-dark .ms-ranking-ts {
  color: #8a95ab;
}
body.theme-dark .market-rank-delta--up {
  color: #6ee7b7;
}
body.theme-dark .market-rank-delta--down {
  color: #fca5a5;
}
body.theme-dark .market-rank-delta--band {
  color: #a5b4fc;
}

/* Market insight article — tables & SVG charts */
.market-table-wrap,
.ba-table-wrap {
  overflow-x: auto;
  margin: 12px 0 24px;
}
.market-rank-table,
.market-matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.market-rank-table th,
.market-rank-table td,
.market-matrix-table th,
.market-matrix-table td {
  border: 1px solid var(--border, #e5e7eb);
  padding: 12px 16px;
  vertical-align: middle;
}
.market-rank-table th,
.market-matrix-table th {
  background: var(--bg-muted, #f9fafb);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b7280);
}
.market-th-num,
.market-td-num {
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.market-th-brand,
.market-td-brand {
  text-align: left;
  min-width: 140px;
}
.market-rank-table tbody tr:nth-child(even) td {
  background: var(--bg-muted, #fafafa);
}

/* Article tables — override generic .ba-content table with AIRepScore styling */
.ba-content .market-table-wrap {
  position: relative;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card, #fff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  margin: 12px 0 28px;
  /* Single header gradient across all columns (not per-cell) */
  --market-thead-h: 45px;
}
.ba-content .market-table-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--market-thead-h);
  background: var(--teal-green-grad);
  border-radius: 11px 11px 0 0;
  pointer-events: none;
  z-index: 0;
}
.ba-content .market-table-wrap .market-rank-table,
.ba-content .market-table-wrap .market-matrix-table {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text, #1a1f2e);
}
.ba-content .market-table-wrap .market-rank-table thead tr,
.ba-content .market-table-wrap .market-matrix-table thead tr {
  background: transparent !important;
}
.ba-content .market-table-wrap .market-rank-table th,
.ba-content .market-table-wrap .market-matrix-table th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff !important;
  border: none !important;
  white-space: nowrap;
  background: transparent !important;
}
.ba-content .market-table-wrap .market-rank-table .market-th-num,
.ba-content .market-table-wrap .market-matrix-table .market-th-num {
  text-align: center;
  width: 56px;
  padding-left: 14px;
  padding-right: 14px;
}
.ba-content .market-table-wrap .market-rank-table .market-th-brand,
.ba-content .market-table-wrap .market-matrix-table .market-th-brand {
  text-align: left;
  padding-left: 22px;
  min-width: 160px;
}
.ba-content .market-table-wrap .market-rank-table td,
.ba-content .market-table-wrap .market-matrix-table td {
  padding: 13px 18px;
  border: none;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  vertical-align: middle;
}
.ba-content .market-table-wrap .market-rank-table .market-td-num,
.ba-content .market-table-wrap .market-matrix-table .market-td-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  padding-left: 14px;
  padding-right: 14px;
}
.ba-content .market-table-wrap .market-rank-table .market-td-brand,
.ba-content .market-table-wrap .market-matrix-table .market-td-brand {
  padding-left: 22px;
  font-weight: 500;
}
.ba-content .market-table-wrap .market-rank-table tbody tr:last-child td,
.ba-content .market-table-wrap .market-matrix-table tbody tr:last-child td {
  border-bottom: none;
}
.ba-content .market-table-wrap .market-rank-table tbody tr:nth-child(even) td,
.ba-content .market-table-wrap .market-matrix-table tbody tr:nth-child(even) td {
  background: rgba(var(--teal-green-rgb), 0.03);
}
.ba-content .market-table-wrap .market-rank-table tbody tr:hover td,
.ba-content .market-table-wrap .market-matrix-table tbody tr:hover td {
  background: rgba(var(--teal-green-rgb), 0.08);
}
.ba-content .market-table-wrap .market-rank-table td:first-child,
.ba-content .market-table-wrap .market-matrix-table td:first-child {
  font-weight: 600;
  color: var(--text, #1a1f2e);
}
.ba-content .market-table-wrap .market-rank-table td:nth-child(2),
.ba-content .market-table-wrap .market-matrix-table td:nth-child(2) {
  font-weight: 500;
}
body.theme-dark .ba-content .market-table-wrap {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}
body.theme-dark .ba-content .market-table-wrap::before {
  background: var(--teal-green-grad);
}
body.theme-dark .ba-content .market-table-wrap .market-rank-table th,
body.theme-dark .ba-content .market-table-wrap .market-matrix-table th {
  color: #fff !important;
  background: transparent !important;
}
body.theme-dark .ba-content .market-table-wrap .market-rank-table td,
body.theme-dark .ba-content .market-table-wrap .market-matrix-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.market-chart {
  margin: 16px 0 28px;
  padding: 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg-card, #fff);
}
.market-chart--centered {
  display: flex;
  justify-content: center;
}
/* Association comparison — same card + teal header as market ranking tables */
.market-chart--assoc {
  padding: 0;
  overflow: hidden;
}
.market-assoc-wrap {
  --market-assoc-cols: 3;
}
.cmp-assoc .market-assoc-wrap {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card, #fff);
}
.market-assoc-header,
.market-assoc-body {
  display: grid;
  grid-template-columns: repeat(var(--market-assoc-cols), 1fr);
}
.market-assoc-header {
  background: var(--teal-green-grad);
  color: #fff;
}
.market-assoc-header-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.market-assoc-header-cell:last-child {
  border-right: none;
}
.market-assoc-rank {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.market-assoc-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 14px 16px;
  text-align: center;
  border-right: 1px solid var(--border-light, #f1f5f9);
}
.market-assoc-col:last-child {
  border-right: none;
}
.market-assoc-body .market-assoc-col:nth-child(even) {
  background: rgba(var(--teal-green-rgb), 0.03);
}
.market-assoc-word {
  display: block;
  max-width: 92%;
  line-height: 1.35;
  color: var(--text, #1f2937);
  text-wrap: balance;
}
.market-assoc-word--1 { font-size: 17px; font-weight: 700; }
.market-assoc-word--2 { font-size: 15px; font-weight: 600; }
.market-assoc-word--3 { font-size: 14px; font-weight: 600; }
.market-assoc-word--4 { font-size: 13px; font-weight: 500; opacity: 0.92; }
.market-assoc-word--5 { font-size: 12px; font-weight: 500; opacity: 0.88; }
.market-assoc-word--6 { font-size: 12px; font-weight: 500; opacity: 0.85; }
.market-assoc-word--empty {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #9ca3af);
  opacity: 1;
}
body.theme-dark .market-assoc-col {
  border-right-color: rgba(255, 255, 255, 0.06);
}
body.theme-dark .market-assoc-word {
  color: var(--text, #e8eaf0);
}
.market-chart-radar-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  max-width: 100%;
}
.market-chart--radar .market-chart-legend {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 0;
  min-width: 140px;
}
.market-chart-svg {
  overflow-x: auto;
}
.market-chart--radar .market-chart-svg {
  display: flex;
  justify-content: center;
}
.market-chart-svg svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.market-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}
.market-chart-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.market-chart-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.market-chart-leg-dot--leader {
  background: linear-gradient(60deg, #5CA6C9, #3BC3A9);
}
.market-chart-leg-dot--c0 { background: #1a56db; }
.market-chart-leg-dot--c1 { background: #9061f9; }
.market-chart-leg-dot--c2 { background: #c27803; }
.market-chart-leg-dot--c3 { background: #64748b; }
.market-chart-leg-dot--c4 { background: #e02424; }
.market-chart-leg-dot--c5 { background: #ff8c42; }
.market-chart--radar .market-chart-leg-dot {
  width: 22px;
  height: 0;
  border-radius: 0;
  border-top-width: 2.5px;
  border-top-style: solid;
  background: none;
}
.market-chart--radar .market-chart-leg-dot--leader {
  border-top-color: #3BC3A9;
}
.market-chart--radar .market-chart-leg-dot--c1 { border-top-color: #9061f9; }
.market-chart--radar .market-chart-leg-dot--c2 { border-top-color: #c27803; }
.market-chart--radar .market-chart-leg-dot--c0 { border-top-color: #1a56db; }
.market-chart--radar .market-chart-leg-dot--c3 { border-top-color: #64748b; }
.market-chart--radar .market-chart-leg-dot--c4 { border-top-color: #e02424; }
.market-chart--radar .market-chart-leg-dot--c5 { border-top-color: #ff8c42; }
.market-chart-caption {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin: 0 0 8px;
}
.market-lead { font-size: 1.05rem; line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGGED-IN APP — MOBILE (≤768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Shell: drawer sidebar ───────────────────────────────────────────── */
  body:not(.auth-guest) .app-shell {
    grid-template-columns: 1fr !important;
  }
  body:not(.auth-guest) .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr !important;
  }
  body:not(.auth-guest) .app-sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-height);
    bottom: env(safe-area-inset-bottom, 0px);
    width: min(280px, 86vw);
    z-index: 120;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    max-height: calc(100dvh - var(--topbar-height) - env(safe-area-inset-bottom, 0px));
  }
  body:not(.auth-guest) .app-shell.sidebar-mobile-open .app-sidebar {
    transform: translateX(0);
  }
  body:not(.auth-guest) .app-shell.sidebar-mobile-open::before {
    content: "";
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(0, 0, 0, 0.45);
    z-index: 110;
  }
  body:not(.auth-guest) .app-shell.sidebar-mobile-open .sidebar-item-label,
  body:not(.auth-guest) .app-shell.sidebar-mobile-open .sidebar-account-label {
    opacity: 1;
    pointer-events: auto;
    width: auto;
  }
  body:not(.auth-guest) .app-shell.sidebar-mobile-open .sidebar-item {
    justify-content: flex-start;
    padding: 7px 12px 7px 16px;
    margin: 1px 8px;
    text-align: left;
  }
  body:not(.auth-guest) .app-shell.sidebar-mobile-open .sidebar-account-theme {
    justify-content: flex-start;
    padding: 7px 12px 7px 16px;
    margin: 1px 8px;
    width: calc(100% - 16px);
  }
  body:not(.auth-guest) .app-shell.sidebar-mobile-open .sidebar-nav {
    padding-left: 0;
    padding-right: 0;
  }

  /* Hide detail modules + superuser entries in sidebar */
  body:not(.auth-guest) .sidebar-item[data-hash="#ai-reputation"],
  body:not(.auth-guest) .sidebar-item[data-hash="#brand-perception"],
  body:not(.auth-guest) .sidebar-item[data-hash="#ai-comparison"],
  body:not(.auth-guest) .sidebar-item[data-hash="#ai-recommendation"],
  body:not(.auth-guest) .sidebar-item[data-hash="#alerts"],
  body:not(.auth-guest) .sidebar-item[data-hash="#user-temp"],
  body:not(.auth-guest) .sidebar-item[data-required-role="superuser"] {
    display: none !important;
  }

  /* Topbar: tighter on phone */
  body:not(.auth-guest) .topbar-search-wrap {
    display: none;
  }
  body:not(.auth-guest) .app-topbar {
    gap: 8px;
    padding-right: 12px;
  }
  body:not(.auth-guest) .topbar-nav {
    display: none;
  }
  body:not(.auth-guest) #topbar-menu-users {
    display: none !important;
  }

  /* Page header + subnav */
  body:not(.auth-guest) .page-header {
    padding: 12px 16px 0;
  }
  body:not(.auth-guest) .module-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  body:not(.auth-guest) .module-subnav::-webkit-scrollbar {
    display: none;
  }
  body:not(.auth-guest) .module-subnav-item {
    flex-shrink: 0;
  }

  /* Context bars */
  body:not(.auth-guest) .air-ctx-bar {
    padding: 8px 12px;
    gap: 8px;
  }
  body:not(.auth-guest) .air-ctx-select {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  body:not(.auth-guest) .air-ctx-project-wrap {
    flex: 1;
    min-width: 0;
  }
  body:not(.auth-guest) .air-ctx-left {
    width: 100%;
  }
  body:not(.auth-guest) .air-ctx-right {
    width: 100%;
    justify-content: flex-start;
  }
  body:not(.auth-guest) .air-ctx-period {
    flex-wrap: wrap;
  }

  /* ── Overview: drop middle column, compact blocks ──────────────────── */
  body:not(.auth-guest) #view-overview .fw-overview-stack {
    padding: 16px;
    gap: 20px;
  }
  body:not(.auth-guest) .fw-overview-block-hdr {
    flex-wrap: wrap;
    gap: 6px;
  }
  body:not(.auth-guest) .fw-overview-block-link {
    display: none;
  }
  body:not(.auth-guest) .fw-overview-block.ov-hero-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 16px;
  }
  body:not(.auth-guest) .fw-overview-block__center {
    display: none !important;
  }
  body:not(.auth-guest) .fw-overview-block .ov-hero-score {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border-light, #f0f4f8);
    padding-bottom: 14px;
  }
  body:not(.auth-guest) .fw-overview-block .ov-hero-priorities.fw-overview-priorities--compact {
    border-left: none;
    padding-left: 0;
    border-top: none;
    padding-top: 0;
  }
  body:not(.auth-guest) .fw-overview-trend-card {
    margin: 0 16px 24px;
  }
  body:not(.auth-guest) .ov-gauge-wrap {
    width: 150px;
    height: 150px;
  }
  body:not(.auth-guest) .ov-gauge-svg {
    width: 150px;
    height: 150px;
  }

  /* ── Scan queue: list only (no add form) ───────────────────────────── */
  body:not(.auth-guest) #view-reports .rq-add-card,
  body:not(.auth-guest) #view-reports #rq-active-scans {
    display: none !important;
  }
  body:not(.auth-guest) #view-reports .rq-body {
    padding: 16px;
    gap: 16px;
  }
  body:not(.auth-guest) #view-reports .rq-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.auth-guest) #view-reports .rq-th--time,
  body:not(.auth-guest) #view-reports .rq-td--time {
    display: none;
  }

  /* ── Knowledge Hub ─────────────────────────────────────────────────── */
  #view-knowledge-hub .kh-content-index {
    padding: 16px 20px 32px;
  }
  .kh-index-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .blog-card {
    grid-template-columns: 1fr;
  }
  .blog-card-img {
    min-height: 140px;
  }
  .blog-card-body {
    padding: 16px;
  }

  /* ── Articles: readable on phone (guest + logged-in) ─────────────── */
  body.auth-guest .page-header {
    padding: 12px 16px 0;
  }
  .ba-header {
    height: auto;
    min-height: 140px;
  }
  .ba-header-content {
    padding: 0 20px 24px;
  }
  .ba-title {
    font-size: 28px;
    line-height: 1.15;
  }
  .ba-meta-bar {
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .ba-body {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px 48px;
  }
  .ba-sidebar {
    display: none;
  }
  .ba-image-half {
    float: none;
    width: 100%;
    margin: 12px 0 20px;
  }
  .ba-related {
    padding: 28px 20px 40px;
  }
  .ba-related-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ba-intro,
  .ba-content p.ae-intro {
    font-size: 17px;
  }
  .ba-content p {
    font-size: 15px;
    line-height: 1.75;
  }
  .ba-h2,
  .ba-content h2 {
    font-size: 20px;
    margin-top: 28px;
  }

  /* ── Projects (basic) ──────────────────────────────────────────────── */
  body:not(.auth-guest) #view-projects .proj-ctx-bar,
  body:not(.auth-guest) #view-projects .air-ctx-bar {
    background: transparent !important;
    border-bottom: none !important;
  }
  body.theme-dark:not(.auth-guest) #view-projects .proj-ctx-bar,
  body.theme-dark:not(.auth-guest) #view-projects .air-ctx-bar {
    background: transparent !important;
    border-bottom: none !important;
  }
  body:not(.auth-guest) #view-projects .proj-ctx-bar-inner,
  body:not(.auth-guest) #view-projects .proj-page-shell {
    padding-left: 16px;
    padding-right: 16px;
  }
  body:not(.auth-guest) #view-projects .proj-ctx-shell-grid,
  body:not(.auth-guest) #view-projects .proj-workspace {
    grid-template-columns: 1fr !important;
  }
  body:not(.auth-guest) #view-projects .proj-shell-gap,
  body:not(.auth-guest) #view-projects .proj-ctx-right-col {
    display: none !important;
  }
  body:not(.auth-guest) #view-projects .proj-ctx-left-col {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }
  body:not(.auth-guest) #view-projects .proj-list-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 10px;
    width: 100%;
    align-items: center;
  }
  body:not(.auth-guest) #view-projects .proj-filter-input {
    grid-column: 1 / -1;
    width: 100%;
    flex: none;
    min-width: 0;
  }
  body:not(.auth-guest) #view-projects .proj-list-toolbar .btn-small {
    grid-column: 1;
    justify-self: start;
    margin-right: auto;
  }
  body:not(.auth-guest) #view-projects .proj-ctx-meta {
    grid-column: 2;
    margin-left: auto;
    padding-left: 0;
    padding-right: 4px;
    justify-self: end;
  }
  body:not(.auth-guest) #view-projects .proj-list-pane,
  body:not(.auth-guest) #view-projects .proj-detail-pane {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  body:not(.auth-guest) #view-projects .proj-list-container,
  body:not(.auth-guest) #view-projects .proj-form {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  body:not(.auth-guest) #view-projects .proj-list-item,
  body:not(.auth-guest) #view-projects .proj-section {
    width: 100%;
    box-sizing: border-box;
  }
  body:not(.auth-guest) #view-projects .claims-splitter {
    display: none;
  }
  body:not(.auth-guest) #view-projects .proj-detail-pane {
    position: static;
    max-height: none;
    padding-left: 0;
  }
}

/* BRAND-COLOUR-GUARDS-START — maintained by scripts/fix_ui_brand_colors.py */
.ov-priority-num { background: var(--accent-orange-purple-grad) !important; }
.ov-text-link,
.ov-summary-link { color: var(--teal-green) !important; }
.fw-overview-block-link { color: var(--teal-green); }
.bp-legend-brand { background: var(--teal-green-grad); }
body.theme-dark .ov-priority-num { background: var(--accent-orange-purple-grad) !important; }
body.theme-dark .ov-text-link,
body.theme-dark .ov-summary-link { color: var(--teal-green) !important; }
/* BRAND-COLOUR-GUARDS-END */