/* ============================================================
   COUNCIL — Built on Truth
   style.css — Complete Design System
   ============================================================ */

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  --bg:            #0C0C0E;
  --surface:       #141418;
  --surface2:      #1C1C22;
  --surface3:      #24242C;
  --border:        #2A2A34;
  --border-active: #4A4A5A;
  --text:          #E8E8ED;
  --text-dim:      #8888A0;
  --text-muted:    #55556A;

  --accent:        #F59E0B;
  --accent-soft:   rgba(245,158,11,0.12);
  --accent-glow:   rgba(245,158,11,0.08);

  --accent2:       #3B82F6;
  --accent2-soft:  rgba(59,130,246,0.12);

  --green:         #22C55E;
  --green-soft:    rgba(34,197,94,0.1);

  --red:           #EF4444;
  --red-soft:      rgba(239,68,68,0.1);

  --purple:        #A78BFA;
  --purple-soft:   rgba(167,139,250,0.1);

  --font:          'DM Sans', sans-serif;
  --mono:          'DM Mono', monospace;
  --serif:         'Instrument Serif', serif;

  --radius:        12px;
  --radius-sm:     8px;
  --radius-xs:     6px;

  --sidebar-w:     200px;
}

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

html { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); }
textarea, input, select { font-family: var(--font); }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-active); }

/* ============================================================
   APP SHELL LAYOUT
   ============================================================ */

#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 100;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border);
}

.logo-mark {
  font-size: 18px;
  color: var(--accent);
}

.logo-text {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  transition: all 0.15s;
}

.nav-item:hover {
  background: var(--surface2);
  color: var(--text);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.nav-label {
  font-size: 13px;
  font-weight: 500;
}

.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.sidebar-version {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* ── Main Content ─────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.surfaces-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── Surfaces ─────────────────────────────────────────────── */
.surface {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: none;
}

.surface.active,
.surface:not([hidden]) {
  display: block;
}

/* ============================================================
   SCREEN 1: CREATE / BRIEF INPUT
   ============================================================ */

.create-surface {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 32px 80px;
}

.create-hero {
  text-align: center;
  margin-bottom: 48px;
  position: relative;
}

.create-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 400px;
  background: radial-gradient(circle, rgba(245,158,11,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.create-hero-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.create-hero-title {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--text);
}

.create-hero-sub {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Brief Textarea */
.brief-input-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brief-textarea-wrap {
  position: relative;
}

.brief-textarea {
  width: 100%;
  min-height: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
  resize: vertical;
  transition: border-color 0.2s;
  outline: none;
}

.brief-textarea:focus {
  border-color: var(--accent);
}

.brief-textarea::placeholder {
  color: var(--text-muted);
}

.textarea-meta {
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Example briefs */
.example-briefs-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.example-brief-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.example-brief-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: left;
  transition: all 0.2s;
  cursor: pointer;
}

.example-brief-card:hover {
  border-color: var(--border-active);
  background: var(--surface2);
}

.example-brief-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.ebc-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.ebc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.ebc-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Stats bar */
.brief-stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.brief-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.brief-stat-num {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--accent);
}

.brief-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.brief-stat-sep {
  width: 1px;
  height: 32px;
  background: var(--border);
}

/* Advanced Options */
.advanced-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 8px;
  color: rgba(245, 158, 11, 0.7);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.advanced-toggle:hover { color: #F59E0B; background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); }

.advanced-toggle-arrow {
  font-size: 10px;
  transition: transform 0.2s;
}

.advanced-toggle[aria-expanded="true"] .advanced-toggle-arrow {
  transform: rotate(90deg);
}

.advanced-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-top: 8px;
}

.advanced-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.advanced-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.field-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.field-select:focus { border-color: var(--accent); }

.model-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.model-cb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}

.model-cb input[type="checkbox"] {
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
}

/* Generate Button */
.brief-cta {
  display: flex;
  justify-content: flex-end;
}

.generate-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.generate-btn:hover {
  background: #FBBF24;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(245,158,11,0.3);
}

.generate-btn:active { transform: translateY(0); }

.generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   SCREEN 2: GENERATION THEATER
   ============================================================ */

.generation-theater {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg);
  z-index: 10;
  overflow-y: auto;
}

.generation-theater[hidden] {
  display: none;
}

.theater-inner {
  width: 100%;
  max-width: 640px;
  padding: 60px 40px;
  text-align: center;
}

.theater-engine-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 48px;
}

.theater-stage {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
  min-height: 200px;
}

/* Theater Acts */
.theater-act {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  text-align: left;
}

.theater-act.visible {
  opacity: 1;
  transform: translateY(0);
}

.theater-act-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.3s;
}

.theater-act-dot.mining   { background: var(--accent-soft); color: var(--accent); }
.theater-act-dot.framing  { background: var(--accent2-soft); color: var(--accent2); }
.theater-act-dot.building { background: var(--green-soft); color: var(--green); }
.theater-act-dot.running  { background: var(--purple-soft); color: var(--purple); }
.theater-act-dot.scoring  { background: var(--purple-soft); color: var(--purple); }

.theater-act-dot.running-anim {
  animation: dotPulse 1.2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(167,139,250,0); }
}

.theater-act-content {
  flex: 1;
}

.theater-act-label {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.theater-act-detail {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
  font-family: var(--mono);
}

.theater-act-check {
  color: var(--green);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.theater-act.complete .theater-act-check {
  opacity: 1;
}

/* Model Grid inside theater (Act 6) */
.theater-model-grid {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 32px;
  text-align: left;
}

.model-grid-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.model-grid-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.model-chip {
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 11px;
  text-align: center;
  color: var(--text-muted);
  transition: all 0.3s;
}

.model-chip .mc-name {
  font-weight: 500;
  color: var(--text-dim);
  font-size: 11px;
  margin-bottom: 2px;
}

.model-chip .mc-dna {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
}

.model-chip.running {
  border-color: var(--accent);
  background: var(--accent-soft);
  animation: chipPulse 1.5s ease-in-out infinite;
}

.model-chip.running .mc-name { color: var(--accent); }
.model-chip.running .mc-dna { color: var(--accent); opacity: 0.7; }

.model-chip.complete {
  border-color: var(--green);
  background: var(--green-soft);
}

.model-chip.complete .mc-name { color: var(--green); }

/* v8.4.2: Chaos Engine swapped model chips */
.model-chip.chaos-swap {
  border-color: var(--purple);
  position: relative;
}
.model-chip.chaos-swap.running {
  border-color: var(--purple);
  background: rgba(167, 139, 250, 0.08);
  animation: chaosPulse 1.5s ease-in-out infinite;
}
.model-chip.chaos-swap.running .mc-name { color: var(--purple); }
.model-chip.chaos-swap.running .mc-dna { color: var(--purple); opacity: 0.7; }
.model-chip.chaos-swap.complete {
  border-color: var(--purple);
  background: rgba(167, 139, 250, 0.06);
}
.model-chip.chaos-swap.complete .mc-name { color: var(--purple); }
.mc-chaos-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 10px;
  line-height: 1;
}
@keyframes chaosPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0.25); }
  50% { box-shadow: 0 0 0 4px rgba(167,139,250,0); }
}

@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.2); }
  50% { box-shadow: 0 0 0 4px rgba(245,158,11,0); }
}

/* Theater footer */
.theater-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.theater-dots {
  display: flex;
  gap: 6px;
}

.theater-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  animation: theaterDotPulse 1.5s ease-in-out infinite;
}

.theater-dot:nth-child(2) { animation-delay: 0.3s; }
.theater-dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes theaterDotPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.theater-footer-text {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
   STRATEGY SURFACE SHELL
   ============================================================ */

#surface-strategy {
  overflow-y: hidden;
}

#surface-strategy.active,
#surface-strategy:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

/* Strategy tabs bar */
.strategy-tabs-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  z-index: 5;
}

.strat-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s;
  margin-bottom: -1px;
}

.strat-tab:hover { color: var(--text-dim); }

.strat-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Strategy sub-surfaces */
.strat-surface {
  flex: 1;
  overflow-y: auto;
  padding: 40px 40px 80px;
  display: none;
}

.strat-surface.active {
  display: block;
}

#stratOverview.active {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Error state */
.strategy-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 40px;
  text-align: center;
  flex: 1;
}

.error-icon { font-size: 36px; color: var(--red); }
.error-message { font-size: 16px; color: var(--text-dim); max-width: 400px; }

/* ============================================================
   SCREEN 3: STRATEGIC FOUNDATION
   ============================================================ */

.foundation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 36px;
  gap: 20px;
}

.foundation-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.foundation-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
}

.foundation-stats {
  font-size: 14px;
  color: var(--text-dim);
}

.foundation-header-right {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.insight-cards-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

/* Insight Card */
.insight-card {
  background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(167,139,250,0.04));
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.insight-card:hover { border-color: rgba(245,158,11,0.4); }

.insight-card.alt {
  background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(167,139,250,0.04));
  border-color: rgba(59,130,246,0.2);
}

.insight-card.alt:hover { border-color: rgba(59,130,246,0.4); }

.insight-card.alt .ic-label { color: var(--accent2); }
.insight-card.alt .ic-collision { border-top-color: rgba(59,130,246,0.15); }

.insight-card.alt2 {
  background: linear-gradient(135deg, rgba(167,139,250,0.06), rgba(34,197,94,0.04));
  border-color: rgba(167,139,250,0.2);
}

.insight-card.alt2 .ic-label { color: var(--purple); }
.insight-card.alt2 .ic-collision { border-top-color: rgba(167,139,250,0.15); }

.ic-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.ic-truth {
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 14px;
}

.ic-collision {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  padding-top: 14px;
  border-top: 1px solid rgba(245,158,11,0.15);
}

/* Expanded insight card */
.insight-card-expanded {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: none;
}

.insight-card.open .insight-card-expanded { display: block; }

.ic-expanded-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ic-truth-item {
  background: var(--surface2);
  border-radius: var(--radius-xs);
  padding: 12px;
}

.ic-truth-item-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ic-truth-item-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Foundation tags */
.foundation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.foundation-proceed {
  display: flex;
  justify-content: flex-end;
}

/* ============================================================
   SCREEN 4: TERRITORY MAP
   ============================================================ */

.territories-header {
  margin-bottom: 32px;
}

.territories-tab-bar {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}

.terr-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -1px;
}

.terr-tab:hover { color: var(--text-dim); }

.terr-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.territories-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Territory section */
.territory-section {
  display: block;
}

.territory-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.territory-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-right: 4px;
}

.territory-strength-bar {
  width: 100%;
  height: 3px;
  background: var(--surface3);
  border-radius: 2px;
  margin-bottom: 20px;
}

.territory-strength-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 0.6s ease;
}

.territory-concepts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Concept Card ─────────────────────────────────────────── */
.concept-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}

.concept-card:hover {
  border-color: var(--border-active);
  transform: translateY(-1px);
}

.concept-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.concept-card-header-left {
  flex: 1;
  min-width: 0;
}

.concept-card-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.concept-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.concept-card-liner {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 10px 0 14px;
}

.concept-card-scores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.score-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sp-label {
  font-size: 9px;
  font-family: var(--mono);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sp-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}

.sp-value.high { color: var(--green); }
.sp-value.mid  { color: var(--accent); }
.sp-value.low  { color: var(--red); }

.concept-total-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  margin-left: 2px;
}

.concept-total-score .sp-label { color: var(--text-dim); }

.concept-total-score .sp-value {
  font-size: 18px;
  font-weight: 600;
}

/* ============================================================
   SCREEN 5: CONCEPT DEEP DIVE (Modal)
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,12,14,0.85);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  backdrop-filter: blur(4px);
}

.modal-overlay[hidden] { display: none; }

.modal-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: auto;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  z-index: 10;
  transition: all 0.15s;
}

.modal-close:hover {
  background: var(--surface3);
  color: var(--text);
}

.modal-body {
  padding: 36px;
}

/* Concept deep dive content */
.cdv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.cdv-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 12px;
}

.cdv-liner {
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 700px;
}

.cdv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.cdv-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
}

.cdv-panel-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.cdv-panel-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
}

.cdv-panel-text strong { color: var(--text); }

/* GP Precedents */
.cdv-precedents-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.cdv-precedents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.precedent-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.precedent-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.precedent-card-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.precedent-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Stats bar at bottom of modal */
.cdv-stats {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-bottom: 24px;
}

.cdv-stat {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
}

.cdv-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cdv-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Score rationale section */
.cdv-scores-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.cdv-score-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.cdv-score-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: border-color 0.15s;
  font-size: 12px;
}

.cdv-score-pill:hover { border-color: var(--border-active); }

.cdv-score-pill .csp-label { color: var(--text-dim); }
.cdv-score-pill .csp-val { font-family: var(--mono); font-weight: 500; }
.cdv-score-pill .csp-val.high { color: var(--green); }
.cdv-score-pill .csp-val.mid  { color: var(--accent); }
.cdv-score-pill .csp-val.low  { color: var(--red); }

.cdv-score-rationale {
  display: none;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

.cdv-score-rationale.open { display: block; }

/* Action bar */
.cdv-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Media Architecture */
.cdv-media-arch {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 28px;
}

.cdv-media-arch .cdv-panel-label {
  margin-bottom: 14px;
}

.media-arch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.media-arch-item {}

.media-arch-item-label {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.media-arch-item-value {
  font-size: 12px;
  color: var(--text);
}

/* ============================================================
   SCREEN 6: CAMPAIGN ARCHITECTURE
   ============================================================ */

.architecture-header {
  margin-bottom: 32px;
}

.arch-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.arch-title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  margin-bottom: 8px;
}

.arch-meta {
  font-size: 14px;
  color: var(--text-dim);
}

.arch-layers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 36px;
}

.arch-layer {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s;
}

.arch-layer:hover { border-color: var(--border-active); }

.arch-layer-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  padding: 18px 20px;
  min-width: 130px;
  display: flex;
  align-items: center;
  background: var(--accent-soft);
  border-right: 1px solid rgba(245,158,11,0.15);
}

.arch-layer-label.ignition  { color: var(--accent); background: var(--accent-soft); border-right-color: rgba(245,158,11,0.15); }
.arch-layer-label.problem   { color: var(--accent2); background: var(--accent2-soft); border-right-color: rgba(59,130,246,0.15); }
.arch-layer-label.proof     { color: var(--green); background: var(--green-soft); border-right-color: rgba(34,197,94,0.15); }
.arch-layer-label.framework { color: var(--purple); background: var(--purple-soft); border-right-color: rgba(167,139,250,0.15); }
.arch-layer-label.emotion   { color: var(--red); background: var(--red-soft); border-right-color: rgba(239,68,68,0.15); }
.arch-layer-label.language  { color: var(--text-dim); background: var(--surface2); border-right-color: var(--border); }

.arch-layer-content {
  flex: 1;
  padding: 16px 20px;
}

.arch-layer-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.arch-layer-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}

.arch-layer-timing {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Timeline */
.arch-timeline {
  margin-bottom: 32px;
}

.arch-timeline-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.arch-timeline-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timeline-week {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  min-width: 70px;
  text-align: right;
}

.timeline-bar {
  flex: 1;
  height: 28px;
  background: var(--surface3);
  border-radius: 4px;
  overflow: hidden;
}

.timeline-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: width 0.8s ease;
}

.timeline-fill.f0 { background: var(--accent); color: #000; }
.timeline-fill.f1 { background: var(--accent2); color: #fff; }
.timeline-fill.f2 { background: var(--green); color: #000; }
.timeline-fill.f3 { background: var(--purple); color: #fff; }
.timeline-fill.f4 { background: var(--red); color: #fff; }
.timeline-fill.f5 { background: var(--text-muted); color: #fff; }

.arch-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.arch-narrative {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-top: 24px;
}

/* ============================================================
   LIBRARY SURFACE
   ============================================================ */

.library {
  padding: 40px;
}

.library-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
}

.library-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 6px;
}

.library-meta {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

.meta-sep { color: var(--border); }

.library-search-wrap {
  flex-shrink: 0;
}

.library-search {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  width: 300px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.library-search:focus { border-color: var(--accent); }
.library-search::placeholder { color: var(--text-muted); }

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.library-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.library-card:hover {
  border-color: var(--border-active);
  transform: translateY(-1px);
}

.library-card-brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.library-card-campaign {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.4;
}

.library-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.library-loading {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 0;
  color: var(--text-muted);
}

/* ============================================================
   SETTINGS SURFACE
   ============================================================ */

.settings-panel {
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 40px;
}

.settings-header {
  margin-bottom: 40px;
}

.settings-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 8px;
}

.settings-sub {
  font-size: 14px;
  color: var(--text-dim);
}

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.settings-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
}

.settings-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

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

.api-key-wrap {
  display: flex;
  gap: 8px;
}

.api-key-wrap .settings-input { flex: 1; }

.api-key-toggle {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  color: var(--text-dim);
  font-size: 12px;
  transition: all 0.15s;
}

.api-key-toggle:hover {
  background: var(--surface3);
  color: var(--text);
}

.field-note {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-test-result {
  font-size: 12px;
  color: var(--text-muted);
}

.about-council p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 20px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.about-stat {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
}

.about-stat-num {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 4px;
}

.about-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* Buttons */
.btn-primary {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: #FBBF24;
  box-shadow: 0 4px 16px rgba(245,158,11,0.25);
}

.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}

.btn-secondary:hover {
  background: var(--surface3);
  border-color: var(--border-active);
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  transition: color 0.15s;
}

.btn-ghost:hover { color: var(--text); }

.skip-to-concepts {
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 6px 0;
  transition: color 0.15s;
}

.skip-to-concepts:hover { color: var(--accent); }

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.tag.amber  { background: var(--accent-soft); color: var(--accent); }
.tag.blue   { background: var(--accent2-soft); color: var(--accent2); }
.tag.green  { background: var(--green-soft); color: var(--green); }
.tag.red    { background: var(--red-soft); color: var(--red); }
.tag.purple { background: var(--purple-soft); color: var(--purple); }
.tag.muted  { background: var(--surface3); color: var(--text-muted); }

/* Loading spinner */
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-size: 13px;
  color: var(--text-muted);
}

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

/* Side Panel */
.side-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,12,14,0.6);
  z-index: 150;
  display: flex;
  justify-content: flex-end;
}

.side-panel-overlay[hidden] { display: none; }

.side-panel {
  width: 480px;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideInRight 0.25s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.side-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.side-panel-close {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}

.side-panel-close:hover { background: var(--surface3); color: var(--text); }

.side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* Convention Map */
.convention-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 10px;
}

.convention-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.convention-item-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Toast notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text);
  pointer-events: all;
  animation: toastIn 0.3s ease;
  max-width: 340px;
}

.toast.success { border-left: 3px solid var(--green); }
.toast.warning { border-left: 3px solid var(--accent); }
.toast.error   { border-left: 3px solid var(--red); }

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

/* Budget Allocation */
.arch-budget-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.arch-budget-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.arch-budget-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arch-budget-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.arch-budget-component {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.arch-budget-cost {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}

.arch-budget-priority {
  font-size: 10px;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.hidden { display: none !important; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   SCROLLBAR in strat-surface
   ============================================================ */
#stratFoundation, #stratTerritories, #stratArchitecture {
  flex: 1;
  overflow-y: auto;
  padding: 40px 48px 80px;
}

/* ============================================================
   X-RAY & COMPETE SURFACES  (v4.1)
   ============================================================ */

/* ── Surface shell ────────────────────────────────────────── */
#surface-xray,
#surface-compete {
  overflow-y: auto;
}

/* ── X-Ray hero / input panel ─────────────────────────────── */
.xray-surface {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 40px 80px;
}

.xray-hero {
  text-align: center;
  margin-bottom: 48px;
  position: relative;
}

.xray-hero::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 350px;
  background: radial-gradient(circle, rgba(59,130,246,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.xray-hero-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 16px;
}

.xray-hero-title {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--text);
}

.xray-hero-sub {
  font-size: 15px;
  color: var(--text-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Two-column input grid ────────────────────────────────── */
.xray-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.xray-input-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xray-input-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.xray-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  resize: vertical;
  transition: border-color 0.2s;
  outline: none;
  min-height: 160px;
}

.xray-textarea:focus {
  border-color: var(--accent2);
}

.xray-textarea::placeholder {
  color: var(--text-muted);
}

/* ── Options row (language frame + CTA) ─────────────────── */
.xray-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.xray-frame-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.xray-frame-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.xray-frame-toggles {
  display: flex;
  gap: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.xray-frame-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s;
  white-space: nowrap;
}

.xray-frame-btn:last-child {
  border-right: none;
}

.xray-frame-btn:hover {
  color: var(--text);
  background: var(--surface3);
}

.xray-frame-btn.active {
  background: var(--accent2-soft);
  color: var(--accent2);
}

.xray-cta {
  flex-shrink: 0;
}

.xray-run-btn {
  background: var(--accent2);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

.xray-run-btn:hover {
  background: #5B92F6;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(59,130,246,0.3);
}

.xray-run-btn:active { transform: translateY(0); }

.xray-run-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.compete-btn {
  background: var(--purple);
}

.compete-btn:hover {
  background: #B99DF9;
  box-shadow: 0 8px 24px rgba(167,139,250,0.3);
}

/* ── X-Ray Theater ────────────────────────────────────────── */
.xray-theater {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 10;
}

.xray-theater[hidden] { display: none; }

.xray-theater-inner {
  width: 100%;
  max-width: 580px;
  padding: 60px 40px;
  text-align: center;
}

.xray-theater-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 40px;
}

.xray-theater-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
  text-align: left;
}

.xray-theater-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Individual X-Ray theater steps */
.xray-theater-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.xray-theater-step.visible {
  opacity: 1;
  transform: translateY(0);
}

.xray-step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent2-soft);
  color: var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.3s;
}

.xray-step-dot.active {
  animation: dotPulse 1.2s ease-in-out infinite;
  background: var(--accent2-soft);
  color: var(--accent2);
  box-shadow: 0 0 0 0 rgba(59,130,246,0.3);
}

@keyframes xrayDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(59,130,246,0); }
}

.xray-step-dot.done {
  background: var(--green-soft);
  color: var(--green);
  animation: none;
}

.xray-step-content {
  flex: 1;
}

.xray-step-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.xray-step-detail {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 2px;
}

.xray-step-check {
  color: var(--green);
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 3px;
  opacity: 0;
  transition: opacity 0.3s;
}

.xray-theater-step.done .xray-step-check { opacity: 1; }

/* ── X-Ray error panel ────────────────────────────────────── */
.xray-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 40px;
  text-align: center;
}

.xray-error[hidden] { display: none; }

/* ── X-Ray Result Surface ─────────────────────────────────── */
.xray-result-surface {
  padding: 0;
  overflow-y: auto;
}

.xray-result-surface[hidden] { display: none; }

.xray-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 48px 28px;
  border-bottom: 1px solid var(--border);
  gap: 20px;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.xray-result-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 8px;
}

.xray-result-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.2;
}

.xray-result-score-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.xray-score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.xsb-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.xsb-value {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
}

.xsb-value.high { color: var(--green); }
.xsb-value.mid  { color: var(--accent); }
.xsb-value.low  { color: var(--red); }

.xray-result-header-right {
  flex-shrink: 0;
}

/* ── Result body ──────────────────────────────────────────── */
.xray-result-body {
  padding: 36px 48px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* ── Improvement Moves (3-column grid) ─────────────────── */
.xray-moves-section {}

.xray-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.xray-section-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.xray-section-icon.green  { background: var(--green-soft);   color: var(--green); }
.xray-section-icon.amber  { background: var(--accent-soft);  color: var(--accent); }
.xray-section-icon.purple { background: var(--purple-soft);  color: var(--purple); }
.xray-section-icon.blue   { background: var(--accent2-soft); color: var(--accent2); }
.xray-section-icon.red    { background: var(--red-soft);     color: var(--red); }

.xray-section-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.xray-section-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}

.improvement-moves-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Improvement move card */
.move-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, transform 0.15s;
}

.move-card:hover {
  transform: translateY(-2px);
}

.move-card.amplifier { border-top: 3px solid var(--green); }
.move-card.sharpener { border-top: 3px solid var(--accent); }
.move-card.flip      { border-top: 3px solid var(--purple); }

.move-card-type {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

.move-card.amplifier .move-card-type { color: var(--green); }
.move-card.sharpener .move-card-type { color: var(--accent); }
.move-card.flip      .move-card-type { color: var(--purple); }

.move-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.move-card-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  flex: 1;
}

.move-card-change {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  background: var(--surface2);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
}

.move-card-delta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.move-delta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex: 1;
}

.mdi-label {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-align: center;
}

.mdi-value {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}

.mdi-value.up   { color: var(--green); }
.mdi-value.down { color: var(--red); }
.mdi-value.same { color: var(--text-muted); }

.move-projected-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

.mpt-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mpt-value {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}

/* ── Collapsible section cards ──────────────────────────── */
.xray-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.xray-section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  transition: background 0.15s;
  gap: 16px;
}

.xray-section-card-header:hover {
  background: var(--surface2);
}

.xray-section-card-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.xray-section-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.xray-section-card-summary {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  font-family: var(--mono);
}

.xray-section-toggle {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.xray-section-card.open .xray-section-toggle {
  transform: rotate(180deg);
}

.xray-section-card-body {
  display: none;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--border);
}

.xray-section-card.open .xray-section-card-body {
  display: block;
}

/* ── Behavior verdict badge ─────────────────────────────── */
.behavior-verdict-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.behavior-verdict-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}

.bvb-green  { background: var(--green-soft);   color: var(--green);  border: 1px solid rgba(34,197,94,0.3);  }
.bvb-amber  { background: var(--accent-soft);  color: var(--accent); border: 1px solid rgba(245,158,11,0.3); }
.bvb-red    { background: var(--red-soft);     color: var(--red);    border: 1px solid rgba(239,68,68,0.3);  }
.bvb-purple { background: var(--purple-soft);  color: var(--purple); border: 1px solid rgba(167,139,250,0.3);}

.behavior-verdict-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

.behavior-shift-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.bs-cell {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.bs-cell-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.bs-cell-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.bs-arrow {
  text-align: center;
  color: var(--accent2);
  font-size: 18px;
}

/* ── Leverage score display ─────────────────────────────── */
.leverage-scores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.lev-score-cell {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
}

.lev-score-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.lev-score-value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
}

.lev-score-bar {
  height: 3px;
  background: var(--surface3);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.lev-score-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent2), var(--green));
  transition: width 0.6s ease;
}

/* ── Risk items ──────────────────────────────────────────── */
.risk-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.risk-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.risk-item-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 2px;
}

.risk-item-content {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}

.risk-score-inline {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* ── Audience reactions ─────────────────────────────────── */
.audience-reactions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.audience-quote {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.audience-quote.fan   { border-left: 3px solid var(--green); }
.audience-quote.skeptic { border-left: 3px solid var(--red); }

.aq-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.aq-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.audience-quote.fan .aq-label     { color: var(--green); }
.audience-quote.skeptic .aq-label { color: var(--red); }

.aq-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  font-style: italic;
}

.polarization-flag {
  background: var(--accent-soft);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--accent);
  line-height: 1.5;
  margin-top: 10px;
}

/* ── Deep-dive toggle buttons ──────────────────────────── */
.xray-deepdive-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  margin-top: 24px;
}

.deepdive-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 12px;
  color: var(--text-dim);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.deepdive-btn:hover {
  background: var(--surface3);
  border-color: var(--border-active);
  color: var(--text);
}

.deepdive-btn.active {
  background: var(--surface3);
  border-color: var(--accent2);
  color: var(--accent2);
}

.deepdive-btn-icon {
  font-size: 11px;
  opacity: 0.8;
}

/* ── Deep-dive expand panels ─────────────────────────────── */
.deepdive-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 16px;
  display: none;
}

.deepdive-panel.open { display: block; }

.deepdive-panel-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* ── Full scores panel ───────────────────────────────────── */
.xray-full-scores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.xfs-item {
  background: var(--surface3);
  border-radius: var(--radius-xs);
  padding: 12px;
  text-align: center;
}

.xfs-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.xfs-value {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
}

/* ── Competitor X-Ray sections ─────────────────────────── */
.compete-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.compete-section-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
}

.compete-section-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.csn-green  { background: var(--green-soft);   color: var(--green); }
.csn-amber  { background: var(--accent-soft);  color: var(--accent); }
.csn-purple { background: var(--purple-soft);  color: var(--purple); }

.compete-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.compete-section-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.compete-section-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Counter-strategy cards ─────────────────────────────── */
.counter-strategies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.counter-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s, transform 0.15s;
}

.counter-card:hover {
  border-color: var(--border-active);
  transform: translateY(-2px);
}

.counter-card-type {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--purple);
}

.counter-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.counter-card-twelve {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--surface3);
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--purple);
}

.counter-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  flex: 1;
}

.counter-card-mechanism {
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.counter-dom-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--surface3);
  border-radius: var(--radius-xs);
}

.cds-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.cds-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
}

/* ── Compete info rows ─────────────────────────────────── */
.compete-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.compete-info-cell {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.cic-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.cic-value {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.compete-trigger-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.trigger-chip {
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--mono);
}

/* ── No-data state ────────────────────────────────────────── */
.xray-no-data {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  padding: 12px;
}

/* ── Responsive: collapse to 1-column at 768px ─────────── */
@media (max-width: 768px) {
  .xray-input-grid {
    grid-template-columns: 1fr;
  }

  .improvement-moves-grid {
    grid-template-columns: 1fr;
  }

  .counter-strategies-grid {
    grid-template-columns: 1fr;
  }

  .leverage-scores-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .audience-reactions {
    grid-template-columns: 1fr;
  }

  .xray-result-header {
    padding: 24px 20px;
    flex-direction: column;
  }

  .xray-result-body {
    padding: 24px 20px 60px;
  }

  .xray-surface {
    padding: 40px 20px 60px;
  }

  .compete-info-grid {
    grid-template-columns: 1fr;
  }

  .xray-hero-title {
    font-size: 34px;
  }
}


/* ============================================================
   COUNCIL v8.5 — COMPONENTS
   ============================================================ */

/* ── Theater Insights Container ──────────────────────────── */

.theater-insights-container {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  width: 100%;
}

.insight-fragment-card {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(245,158,11,0.05);
  padding: 14px 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.insight-fragment-enter {
  opacity: 0;
  transform: translateY(10px);
}

.insight-fragment-visible {
  opacity: 1;
  transform: translateY(0);
}

.if-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.if-content {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ── stratOverview scrollable surface ────────────────────── */

#stratOverview {
  overflow-y: auto;
  padding: 32px 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Hero Result ─────────────────────────────────────────── */

.hero-result {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-active);
  border-radius: var(--radius);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(245,158,11,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-result-inner {
  position: relative;
  padding: 32px 36px;
  z-index: 1;
}

.hero-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hero-dual-axis-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 12px;
}

.hero-rank-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 100px;
  padding: 4px 12px;
}

.hero-territory-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent2);
  background: var(--accent2-soft);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 100px;
  padding: 4px 12px;
}

.hero-concept-title {
  font-family: var(--serif);
  font-size: 26px;
  font-style: normal;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 12px;
  max-width: 700px;
}

.hero-concept-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 620px;
  margin-bottom: 28px;
}

.hero-scores-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 28px;
}

.hero-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 28px;
}

.hero-score-block:first-child {
  padding-left: 0;
}

.hero-score-num {
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
}

.hero-score-num.high { color: var(--green); }
.hero-score-num.mid  { color: var(--accent); }
.hero-score-num.low  { color: var(--red); }

.hero-score-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-score-sep {
  width: 1px;
  background: var(--border);
  margin: 4px 0;
  flex-shrink: 0;
}

.hero-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-btn-primary {
  background: var(--accent);
  color: #0C0C0E;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.hero-btn-primary:hover { opacity: 0.88; }

.hero-btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.hero-btn-secondary:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

.hero-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s;
}
.hero-btn-ghost:hover { color: var(--text); }

.hero-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Dual-Axis Chart ──────────────────────────────────────── */

.dual-axis-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.dac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.dac-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dac-download-btn {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 4px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dac-download-btn:hover { border-color: var(--border-active); color: var(--text); }

.dac-chart {
  position: relative;
  width: 100%;
  height: 300px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Quadrant backgrounds */
.dac-quadrant {
  position: absolute;
  width: 50%;
  height: 50%;
  display: flex;
  align-items: flex-end;
  padding: 8px;
}

.dac-q-tl { top: 0; left: 0; }
.dac-q-tr {
  top: 0; right: 0;
  background: rgba(34,197,94,0.04);
  align-items: flex-end;
  justify-content: flex-end;
}
.dac-q-bl { bottom: 0; left: 0; align-items: flex-start; }
.dac-q-br { bottom: 0; right: 0; align-items: flex-start; justify-content: flex-end; }

.dac-q-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.5;
}

.dac-q-featured {
  color: var(--green);
  opacity: 0.7;
}

/* Crosshairs */
.dac-crosshair-h {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}

.dac-crosshair-v {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed rgba(255,255,255,0.08);
}

/* Axis labels */
.dac-axis-label {
  position: absolute;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.6;
  pointer-events: none;
}

.dac-axis-x {
  bottom: 6px;
  right: 10px;
}

.dac-axis-y {
  top: 8px;
  left: 8px;
}

/* Dots area */
.dac-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Individual dot */
.dac-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: -6px 0 0 -6px;
  cursor: pointer;
  pointer-events: all;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.dac-dot:hover {
  transform: scale(1.4);
  z-index: 20;
}

.dac-dot-rank {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  color: rgba(0,0,0,0.7);
  line-height: 1;
  pointer-events: none;
}

/* Tooltip */
.dac-tooltip {
  position: absolute;
  background: var(--surface3);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  pointer-events: none;
  z-index: 30;
  min-width: 160px;
  max-width: 220px;
}

.dac-tip-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.dac-tip-scores {
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* Legend */
.dac-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.dac-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dac-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dac-legend-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* ── v4.2 Concept Cards (L1/L2/L3) ───────────────────────── */

.v42-cards-header {
  margin-bottom: 8px;
}

.v42-cards-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.v42-cards-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.v42-cards-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

.v42-concept-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.v42-concept-card:hover {
  border-color: var(--border-active);
}

.v42-card-featured {
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 0 0 1px rgba(245,158,11,0.1);
}

/* L1 — Overview */
.v42-card-l1 {
  padding: 22px 26px;
}

.v42-card-rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.v42-card-rank {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.v42-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 8px;
}

.v42-card-liner {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 16px;
}

.v42-card-scores {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.v42-inline-score {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vis-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.vis-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.vis-value.high { color: var(--green); }
.vis-value.mid  { color: var(--accent); }
.vis-value.low  { color: var(--red); }

.v42-card-l1-footer {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.v42-expand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.v42-layer-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.v42-layer-btn:hover { border-color: var(--border-active); color: var(--text); }

.v42-deepdive-btn {
  background: transparent;
  color: var(--accent);
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-left: auto;
}
.v42-deepdive-btn:hover { opacity: 0.75; }

/* L2 — Scoring Layer */
.v42-card-l2 {
  padding: 20px 26px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  transition: all 0.25s ease;
}

.v42-layer-header {
  margin-bottom: 16px;
}

.v42-layer-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.v42-dims {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v42-dim-row {
  display: grid;
  grid-template-columns: 40px 1fr 1fr 36px;
  align-items: center;
  gap: 10px;
}

.v42-dim-short {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.v42-dim-label {
  font-size: 11px;
  color: var(--text-dim);
}

.v42-dim-bar-wrap {
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
}

.v42-dim-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  background: var(--text-muted);
}
.v42-dim-bar-fill.high { background: var(--green); }
.v42-dim-bar-fill.mid  { background: var(--accent); }
.v42-dim-bar-fill.low  { background: var(--red); }

.v42-dim-val {
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
  color: var(--text-dim);
}
.v42-dim-val.high { color: var(--green); }
.v42-dim-val.mid  { color: var(--accent); }
.v42-dim-val.low  { color: var(--red); }

/* Polarization block */
.v42-polarization-block {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--surface3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.v42-pol-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.v42-pol-row {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.v42-pol-row.fan { color: var(--green); }
.v42-pol-row.skeptic { color: var(--red); }

.v42-pol-icon {
  flex-shrink: 0;
  font-size: 10px;
  margin-top: 2px;
}

/* L3 — Intelligence Layer */
.v42-card-l3 {
  padding: 20px 26px;
  border-top: 1px solid var(--border);
  background: rgba(10,10,14,0.4);
  transition: all 0.25s ease;
}

.v42-intel-section {
  margin-bottom: 18px;
}

.v42-intel-section:last-child {
  margin-bottom: 0;
}

.v42-intel-section-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.v42-intel-field {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 4px;
}

.v42-intel-field strong {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-right: 4px;
}

/* CD Council mini */
.v42-cd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.v42-cd-chip {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.v42-cd-back {
  background: var(--green-soft);
  color: var(--green);
  border-color: rgba(34,197,94,0.25);
}

.v42-cd-kill {
  background: var(--red-soft);
  color: var(--red);
  border-color: rgba(239,68,68,0.25);
}

.v42-cd-neutral {
  background: var(--surface3);
}

/* Market domination mini */
.v42-md-levers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v42-md-row {
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  align-items: center;
  gap: 10px;
}

.v42-md-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.v42-md-bar-wrap {
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
}

.v42-md-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent2), var(--green));
  transition: width 0.5s ease;
}

.v42-md-val {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
}

/* Highlight pulse animation for chart click */
@keyframes highlightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.5); }
  50%  { box-shadow: 0 0 0 6px rgba(245,158,11,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

.v42-concept-card.highlight-pulse {
  animation: highlightPulse 0.8s ease;
}

/* ── Responsive tweaks for overview ──────────────────────── */
@media (max-width: 900px) {
  #stratOverview {
    padding: 20px 16px 60px;
  }

  .hero-result-inner {
    padding: 24px 20px;
  }

  .hero-score-block {
    padding: 0 16px;
  }

  .hero-concept-title {
    font-size: 22px;
  }

  .dac-chart {
    height: 240px;
  }

  .v42-dim-row {
    grid-template-columns: 36px 1fr 80px 32px;
  }

  .v42-card-l1 {
    padding: 18px 18px;
  }
}


/* ============================================================
   PHASE B: MODE SELECTION GATEWAY
   ============================================================ */

#surface-create {
  overflow-y: auto;
}

#modeSelectView {
  min-height: 100%;
  padding: 0 0 60px;
}

.mode-hero {
  text-align: center;
  padding: 60px 20px 48px;
  max-width: 640px;
  margin: 0 auto;
}

.mode-hero-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.mode-hero-title {
  font-family: var(--serif);
  font-size: 38px;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 16px;
}

.mode-hero-sub {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0;
}

.mode-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.mode-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
  display: flex;
  flex-direction: column;
}

.mode-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: var(--surface2);
}

.mode-card-icon {
  font-size: 28px;
  margin-bottom: 16px;
  line-height: 1;
}

.mode-card-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mode-card-tagline {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.25;
}

.mode-card-desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 20px;
  flex: 1;
}

.mode-card-cta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 1px;
}

.mode-footer-note {
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 0 24px;
}

.mode-footer-link {
  color: var(--accent2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mode-footer-link:hover {
  color: var(--text);
}

/* ============================================================
   PHASE B: GUIDED MODE WIZARD
   ============================================================ */

#guidedModeView {
  max-width: 700px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.guided-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.guided-back-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 0;
  letter-spacing: 0.5px;
  transition: color 0.15s;
}

.guided-back-btn:hover {
  color: var(--text);
}

.guided-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.guided-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}

.guided-step-dot.active {
  background: var(--accent);
  border-color: var(--accent);
}

.guided-step-dot.current {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.guided-step {
  animation: fadeSlideIn 0.25s ease;
}

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

.guided-step-hero {
  margin-bottom: 24px;
}

.guided-step-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.guided-step-title {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 10px;
}

.guided-step-sub {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 0;
}

.guided-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.guided-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.guided-textarea::placeholder {
  color: var(--text-muted);
}

.guided-step-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.guided-continue-btn,
.guided-run-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.guided-continue-btn:hover,
.guided-run-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.guided-boldness-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}

.guided-boldness-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guided-boldness-card:hover {
  border-color: var(--border-active);
}

.guided-boldness-card.active {
  border-color: var(--accent);
  background: var(--surface2);
}

.gbc-level {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}

.gbc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.gbc-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  flex: 1;
}

.gbc-example {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

/* ============================================================
   PHASE B: PRO MODE BACK BUTTON
   ============================================================ */

.pro-mode-back {
  padding: 24px 24px 0;
  max-width: 860px;
  margin: 0 auto;
}

/* ============================================================
   PHASE C: CREATIVE DNA SIDEBAR
   ============================================================ */

.sidebar {
  display: flex;
  flex-direction: column;
}

.sidebar-nav {
  flex: 0 0 auto;
}

.sidebar-dna {
  padding: 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
  flex: 1 1 auto;
  overflow: hidden;
}

.dna-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dna-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
}

.dna-sessions {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
}

.dna-archetypes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.dna-archetype-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  gap: 8px;
}

.dna-arch-name {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  flex: 1;
}

.dna-arch-bar {
  width: 40px;
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.dna-arch-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}

.dna-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}

.dna-risk {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
}

.dna-risk-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.dna-risk-value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.dna-smi {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 8px;
}

.dna-smi-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.dna-smi-bar {
  width: 100%;
  height: 4px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
  margin: 6px 0;
}

.dna-smi-fill {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.dna-smi-value {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

.dna-unexplored {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 8px;
}

.dna-unexplored-text {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ============================================================
   RESPONSIVE: Mode cards stack on narrow viewports
   ============================================================ */

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

  .mode-hero-title {
    font-size: 28px;
  }

  .guided-boldness-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   V2 STYLES: Phases 1B, 2B, 2C, 2D, 3G
   ============================================================ */

/* ── Phase 3G: Theater Elapsed Timer ─────────────────────── */
.theater-timer {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 1px;
  padding-left: 12px;
  align-self: center;
}

/* Make theater-footer a flex row so timer sits in bottom-right */
.theater-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Phase 1B: Saved Runs Sidebar ────────────────────────── */
.sidebar-saved-runs {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.saved-runs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.saved-runs-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.saved-runs-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface2);
  border-radius: 10px;
  padding: 1px 6px;
}

.saved-runs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saved-runs-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

.saved-run-item {
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}

.saved-run-item:hover {
  background: var(--surface2);
  border-color: var(--border);
}

.sri-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sri-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.sri-score {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
}

.sri-date {
  font-size: 9px;
  color: var(--text-muted);
}

/* ── Phase 2B: Progressive Friction CSS ──────────────────── */

/* Level 1-2: Full scaffolding (default behavior — show everything) */
body.friction-1 .example-briefs-section,
body.friction-2 .example-briefs-section {
  display: block;
}

body.friction-1 [data-scaffold="tooltip"],
body.friction-2 [data-scaffold="tooltip"] {
  display: inline;
}

/* Level 3: Collapse examples, fewer tooltips */
body.friction-3 .example-briefs-section {
  display: none;
}

body.friction-3 [data-scaffold="tooltip"] {
  display: none;
}

body.friction-3 .brief-room-hint {
  opacity: 0.6;
}

/* Level 4-5: Expert mode — minimal UI */
body.friction-4 .example-briefs-section,
body.friction-5 .example-briefs-section {
  display: none;
}

body.friction-4 [data-scaffold="tooltip"],
body.friction-5 [data-scaffold="tooltip"] {
  display: none;
}

body.friction-4 .brief-room-hint,
body.friction-5 .brief-room-hint {
  display: none;
}

body.friction-4 .mode-select-view,
body.friction-5 .mode-select-view {
  /* Expert mode: skip mode gateway */
}

/* Compact cards at high friction */
body.friction-4 .v42-concept-card,
body.friction-5 .v42-concept-card {
  padding: 12px 16px;
}

body.friction-4 .hero-concept-desc,
body.friction-5 .hero-concept-desc {
  display: none;
}

/* ── Phase 2C: SMI 5-Dimension Mini-Bars ────────────────── */
.dna-smi-dimensions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.smi-dim-row {
  display: grid;
  grid-template-columns: 72px 1fr 24px;
  gap: 6px;
  align-items: center;
}

.smi-dim-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smi-dim-bar-track {
  height: 3px;
  background: var(--surface3);
  border-radius: 2px;
  overflow: hidden;
}

.smi-dim-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  transition: width 0.5s ease;
}

.smi-dim-val {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-muted);
  text-align: right;
}

/* ================================================================
   V4.3 NEW FEATURES — Phases 3A–3F, 4A–4C, Phase 5
   ================================================================ */

/* ── Phase 3A: Enhanced DAC Tooltip ─────────────────────────── */
.dac-tip-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin: 4px 0 8px;
  line-height: 1.4;
}
.dac-tip-scores {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dac-tip-score-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.dac-tip-label {
  color: var(--text-muted);
}
.dac-tip-val {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--text);
}
.dac-tip-val.high { color: var(--green); }
.dac-tip-val.mid  { color: var(--accent); }
.dac-tip-val.low  { color: var(--red); }
.dac-tip-hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 5px;
}
.highlight-pulse {
  animation: highlightPulse 1.2s ease-out;
}
@keyframes highlightPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.6); }
  50%  { box-shadow: 0 0 0 8px rgba(245,158,11,0.2); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* ── Phase 3B: Reduction Challenge ──────────────────────────── */
.reduction-challenge {
  padding: 32px;
  max-width: 600px;
  margin: 0 auto;
}
.rc-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.rc-title {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.25;
}
.rc-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}
.rc-concept-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.rc-concept-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.rc-concept-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}
.rc-input-block {
  margin-bottom: 20px;
}
.rc-input-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.rc-input-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
.rc-word-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  transition: color 0.2s;
}
.rc-word-count.rc-exact {
  color: var(--green);
  font-weight: 700;
}
.rc-word-count.rc-over {
  color: var(--red);
}
.rc-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  padding: 12px 14px;
  resize: vertical;
  transition: border-color 0.2s;
}
.rc-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.rc-auto-btn {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.rc-auto-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.rc-comparison {
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.rc-comparison-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rc-col-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.rc-col-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}
.rc-muse-text {
  color: var(--accent);
  font-style: italic;
}
.rc-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.rc-continue-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 28px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.rc-continue-btn:hover { opacity: 0.9; }
.rc-skip-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px;
}

/* ── Phase 3C: Apply This + Retest ──────────────────────────── */
.move-card-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.move-apply-btn {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.move-apply-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #000;
}
.move-apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.move-card.retest-loading {
  opacity: 0.7;
  pointer-events: none;
}
.move-retest-result {
  margin-top: 10px;
}
.retest-result-card {
  background: var(--surface);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.retest-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.retest-scores {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.retest-score-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
}
.retest-score-row span:last-child {
  font-family: var(--mono);
  font-weight: 600;
}
.retest-score-row span.high { color: var(--green); }
.retest-score-row span.low  { color: var(--red); }
.retest-summary {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
  font-style: italic;
}

/* ── Phase 3D: Courage Radar ─────────────────────────────────── */
.courage-radar-wrap {
  margin: 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.courage-radar-header {
  margin-bottom: 12px;
}
.courage-radar-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}
.courage-radar-chart {
  display: flex;
  justify-content: center;
  margin: 8px 0 12px;
}
.courage-radar-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.crd-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.crd-name {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: capitalize;
  font-family: var(--mono);
}
.crd-val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}
.crd-val.high { color: var(--green); }
.crd-val.mid  { color: var(--accent); }
.crd-val.low  { color: var(--red); }

/* ── Phase 3E: Conceptual Distance ──────────────────────────── */
.cd-bridge-wrap {
  margin: 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.cd-bridge-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.cd-bridge-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cd-pattern-badge {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface2);
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.cd-bridge-diagram {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
}
.cd-side {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--mono);
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 90px;
}
.cd-convention { text-align: right; }
.cd-bridge-track {
  flex: 1;
  height: 6px;
  background: var(--surface3);
  border-radius: 3px;
  position: relative;
}
.cd-bridge-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
  min-width: 4px;
}
.cd-bridge-score-bubble {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  background: var(--bg);
  border: 1px solid;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.cd-bridge-note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Phase 3F: Disagreement Protocol ────────────────────────── */
.disagreement-card {
  background: var(--surface);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.disag-intro {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.disag-cd-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.disag-cd-row {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface2);
}
.disag-cd-row.disag-outlier {
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.15);
}
.disag-cd-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.disag-outlier .disag-cd-name {
  color: #EF4444;
}
.disag-cd-conviction {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}
.disag-cd-comment {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.disag-footer {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ── Phase 4A: Share Links ───────────────────────────────────── */
.hero-share-btn {
  border: 1px solid var(--border);
}
.share-preview {
  padding: 28px 32px;
}
.share-preview-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.share-preview-title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.3;
}
.share-preview-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.share-preview-concepts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.share-concept-card {
  display: flex;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.share-concept-rank {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  width: 24px;
}
.share-concept-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.share-concept-liner {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 6px;
}
.share-concept-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.share-concept-score {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}
.share-concept-score.high { color: var(--green); }
.share-concept-score.mid  { color: var(--accent); }
.share-more-note {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 8px;
}
.share-cta-block {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.share-cta-btn {
  display: inline-block;
  text-decoration: none;
}

/* ── Phase 4B: Pro Tier ──────────────────────────────────────── */
.nav-pro-badge {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent);
  color: #000;
  margin-left: 4px;
  letter-spacing: 0.5px;
}
.pro-upgrade-modal {
  padding: 32px;
  text-align: center;
}
.pum-icon {
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 16px;
}
.pum-title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 10px;
}
.pum-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 20px;
}
.pum-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: left;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
}
.pum-features li {
  font-size: 13px;
  color: var(--text-dim);
}
.pum-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.pum-upgrade-btn {
  padding: 12px 32px;
}
.pum-dismiss-btn {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Phase 4C: Concept Card Export Button ───────────────────── */
.v42-export-img-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  font-family: var(--mono);
  flex-shrink: 0;
}
.v42-export-img-btn:hover {
  border-color: var(--accent2);
  color: var(--accent2);
}
.v42-export-img-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.muse-export-watermark {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  letter-spacing: 1px;
}

/* ── Modal size variants ─────────────────────────────────────── */
.modal-md {
  max-width: 640px;
  width: 100%;
}
.modal-sm {
  max-width: 480px;
  width: 100%;
}


/* ── Truth Coherence Card ─────────────────────────── */
.truth-coherence-card {
  border-left: 3px solid var(--accent);
  background: rgba(245,158,11,0.04);
}
.truth-coherence-card .ic-title {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--accent);
}

/* ============================================================
   PIPELINE LOG STYLES
   ============================================================ */

.plog-empty {
  padding: 48px 24px;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-body);
  font-size: 14px;
}

/* Header */
.plog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.plog-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 6px;
}
.plog-title {
  font-family: var(--font-heading);
  font-size: 28px;
  color: #fff;
  margin: 0;
}
.plog-export-btn {
  font-size: 12px;
  padding: 6px 14px;
}

/* Summary stats row */
.plog-summary-row {
  display: flex;
  gap: 2px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.plog-stat {
  flex: 1;
  min-width: 100px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.plog-stat-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}
.plog-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* Concept Funnel */
.plog-funnel {
  margin-bottom: 32px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 20px;
}
.plog-section-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 16px;
}
.plog-hint {
  color: rgba(255,255,255,0.25);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
.plog-funnel-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plog-funnel-step {
  display: grid;
  grid-template-columns: 130px 1fr 40px;
  align-items: center;
  gap: 12px;
}
.plog-funnel-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}
.plog-funnel-bar-track {
  height: 20px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  overflow: hidden;
}
.plog-funnel-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.plog-funnel-bar.plog-bar-zero {
  background: rgba(239,68,68,0.5);
}
.plog-funnel-count {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: right;
}

/* Phase cards */
.plog-phases {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plog-phase-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.plog-phase-card:hover {
  border-color: rgba(255,255,255,0.12);
}
.plog-phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.plog-phase-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.plog-phase-chevron {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  transition: transform 0.2s ease;
  display: inline-block;
}
.plog-open .plog-phase-chevron {
  transform: rotate(90deg);
}
.plog-phase-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.plog-phase-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  padding: 2px 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.plog-phase-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.plog-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.plog-badge-llm {
  background: rgba(59,130,246,0.15);
  color: var(--accent2);
}
.plog-badge-logic {
  background: rgba(34,197,94,0.1);
  color: var(--green);
}
.plog-badge-model {
  background: rgba(167,139,250,0.12);
  color: var(--purple);
}
.plog-badge-note {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.45);
}
.plog-phase-dur {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  min-width: 50px;
  text-align: right;
}
.plog-dur-fast { color: var(--green); }
.plog-dur-mid  { color: var(--accent); }
.plog-dur-slow { color: #EF4444; }

/* Phase body (collapsed by default) */
.plog-phase-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.plog-open .plog-phase-body {
  max-height: 2000px;
}
.plog-phase-timing {
  display: flex;
  gap: 20px;
  padding: 0 16px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
.plog-phase-section {
  padding: 0 16px 16px;
}
.plog-section-subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.plog-output-row {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.plog-output-row:last-child {
  border-bottom: none;
}
.plog-output-key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
  min-width: 140px;
}
.plog-output-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Pipeline Log: Run Meta Chips */
.plog-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.plog-meta-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
}

/* Pipeline Log: Brief Details Section */
.plog-brief-section,
.plog-models-section,
.plog-journey,
.plog-dna-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.plog-brief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.plog-brief-item {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.plog-brief-item.plog-brief-full {
  grid-column: 1 / -1;
}
.plog-brief-key {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.plog-brief-val {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.plog-brief-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* Pipeline Log: Models Section */
.plog-models-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.plog-model-chip {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
}
.plog-model-role {
  color: rgba(255,255,255,0.45);
  font-size: 10px;
  text-transform: uppercase;
  margin-right: 4px;
}
.plog-subtext {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 10px;
  margin-bottom: 4px;
}
.plog-model-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.plog-model-tag {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.55);
}

/* Pipeline Log: Concept Journey */
.plog-journey-stage {
  margin-top: 12px;
}
.plog-journey-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}
.plog-journey-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 12px;
}
.plog-journey-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
}
.plog-score-badge {
  background: rgba(245,158,11,0.15);
  color: var(--accent);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}
.plog-kill-reason {
  color: #ef4444;
  font-size: 10px;
  font-style: italic;
  margin-left: 4px;
}
.plog-territory-badge {
  background: rgba(167,139,250,0.12);
  color: var(--purple);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  margin-left: 4px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .plog-summary-row {
    gap: 4px;
  }
  .plog-stat {
    min-width: 70px;
    padding: 10px 8px;
  }
  .plog-stat-num {
    font-size: 18px;
  }
  .plog-funnel-step {
    grid-template-columns: 100px 1fr 30px;
  }
  .plog-phase-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .plog-phase-right {
    flex-wrap: wrap;
  }
  .plog-badge-model,
  .plog-badge-note {
    display: none;
  }
  .plog-brief-grid {
    grid-template-columns: 1fr;
  }
  .plog-journey-items {
    padding-left: 4px;
  }
}

/* ============================================================
   SPRINT 5: N7, N9, N10, N23
   ============================================================ */

/* ── N7: Territory Map — Spatial Visual Layout ─────────────── */
.territory-map-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.territory-map-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.territory-map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 4px 0;
}

.territory-node {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--territory-color, var(--accent));
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: calc(80px * var(--size-factor, 1));
}

.territory-node:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.territory-node.expanded {
  grid-column: span 2;
  background: rgba(255, 255, 255, 0.06);
}

.territory-node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.territory-node-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.territory-node-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.territory-node-stats {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.territory-node-count {
  color: rgba(255, 255, 255, 0.5);
}

.territory-node-convergence {
  color: var(--accent2);
}

.territory-node-concepts {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

.territory-concept-mini {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.territory-concept-mini:last-child {
  border-bottom: none;
}

.concept-mini-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}

.concept-mini-score {
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  white-space: nowrap;
}

/* ── N10: Reference Cards (Structural Precedents) ─────────── */
.cdv-precedents-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.cdv-precedents.ref-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ref-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px 16px;
  transition: background 0.15s;
}

.ref-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.ref-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.ref-card-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.ref-card-brand {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.ref-card-sep {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
}

.ref-card-campaign {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.ref-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ref-card-year {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--mono);
}

.ref-card-match {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.ref-card-effectiveness {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 8px;
}

.ref-card-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent2);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.08);
  transition: background 0.15s, border-color 0.15s;
}

.ref-card-video-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.5);
}

.ref-card-video-icon {
  font-size: 10px;
}

/* ── N23: Archetype DNA label in operator seed card ─────────── */
.op-archetype-dna-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.3);
  align-self: center;
}

/* ============================================================
   N11: LEARNING DASHBOARD / PREFERENCE ENGINE
   ============================================================ */

/* ── Rating Stars ────────────────────────────────────────── */
.concept-rating {
  display: inline-flex;
  gap: 2px;
  margin-left: 8px;
  align-items: center;
}

.rating-star {
  cursor: pointer;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.15s, transform 0.1s;
  line-height: 1;
  user-select: none;
}

.rating-star:hover {
  color: var(--accent);
  transform: scale(1.15);
}

.rating-star.active {
  color: var(--accent);
}

/* ── v42 Card Actions Row ──────────────────────────────── */
.v42-card-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

/* ── Legacy Concept Card Actions ──────────────────────── */
.concept-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

/* ── Report Results Button ────────────────────────────── */
.report-results-btn {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.report-results-btn:hover {
  color: var(--accent2);
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.08);
}

/* ── Learning Dashboard ───────────────────────────────── */
.learning-dashboard {
  padding: 20px 0;
}

.learning-subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 16px;
  margin-top: 4px;
}

.learning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.learning-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px;
}

.learning-card h4 {
  font-size: 13px;
  color: var(--accent);
  margin: 0 0 12px;
  font-weight: 600;
}

.learning-card-warning {
  border-color: rgba(245, 158, 11, 0.3);
}

.learning-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.bar-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  width: 120px;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.bar-value {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  width: 28px;
  text-align: right;
  font-weight: 600;
  flex-shrink: 0;
}

.blind-spot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.blind-spot-tag {
  font-size: 11px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.blind-spot-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 8px;
}

.learning-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.5);
}

.learning-empty h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7);
}

.learning-empty p {
  font-size: 13px;
  margin: 4px 0;
}

.learning-progress {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px !important;
  margin-top: 12px !important;
}

/* ============================================================
   N12: FEEDBACK LOOP — CAMPAIGN RESULTS MODAL
   ============================================================ */

.feedback-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.feedback-container {
  background: #1a1a1f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

.feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.feedback-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #fff);
  margin: 0;
}

.feedback-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.feedback-close:hover {
  color: rgba(255, 255, 255, 0.9);
}

.feedback-concept-name {
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 16px;
  font-style: italic;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

.feedback-field {
  margin-bottom: 12px;
}

.feedback-field label {
  display: block;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 5px;
}

.feedback-field input,
.feedback-field select,
.feedback-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 8px 10px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.feedback-field input:focus,
.feedback-field select:focus,
.feedback-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.feedback-field select option {
  background: #1a1a1f;
  color: rgba(255, 255, 255, 0.9);
}

.feedback-field textarea {
  resize: vertical;
  min-height: 56px;
}

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

.feedback-submit {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px 16px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.feedback-submit:hover {
  opacity: 0.9;
}

/* ============================================================
   N8: DEVELOPMENT STUDIO — Sprint 6
   ============================================================ */

.dev-studio-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}

.dev-studio-container {
  background: var(--surface-0, #111113);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  min-height: 400px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.12);
  display: flex;
  flex-direction: column;
  animation: devStudioIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  margin: auto;
}

@keyframes devStudioIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dev-studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 12px;
}

.dev-studio-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dev-studio-badge {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #F59E0B);
  opacity: 0.8;
}

.dev-studio-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #F3F4F6);
  margin: 0;
  line-height: 1.2;
}

.dev-studio-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted, #9CA3AF);
  cursor: pointer;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.dev-studio-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text, #F3F4F6);
}

.dev-studio-concept-banner {
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(59, 130, 246, 0.06));
  border-bottom: 1px solid rgba(245, 158, 11, 0.15);
}

.dev-studio-concept-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent, #F59E0B);
  margin: 0 0 4px;
  line-height: 1.3;
}

.dev-studio-concept-liner {
  font-size: 13px;
  color: var(--text-secondary, #9CA3AF);
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}

.dev-studio-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.dev-studio-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 24px;
  color: var(--text-muted, #9CA3AF);
  font-size: 14px;
}

.dev-studio-error {
  padding: 24px;
  text-align: center;
  color: #EF4444;
  font-size: 14px;
}

.dev-studio-error button {
  margin-top: 12px;
}

/* Dev Studio Sections */
.dev-studio-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dev-section {
  padding: 0;
}

.dev-section-title {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #F59E0B);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.dev-territory-text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text, #F3F4F6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 18px 20px;
}

/* Headlines Grid */
.dev-headlines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 600px) {
  .dev-headlines-grid {
    grid-template-columns: 1fr;
  }
}

.dev-headline-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  transition: background 0.15s, border-color 0.15s;
}

.dev-headline-card:hover {
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.2);
}

.headline-num {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent, #F59E0B);
  opacity: 0.6;
  flex-shrink: 0;
  padding-top: 2px;
}

.headline-text {
  font-size: 13px;
  color: var(--text, #F3F4F6);
  line-height: 1.4;
  font-weight: 500;
}

/* Visual Direction */
.dev-visual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.dev-moodboard-card {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
}

.dev-moodboard-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent2, #3B82F6);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dev-moodboard-desc {
  font-size: 12px;
  color: var(--text-secondary, #9CA3AF);
  line-height: 1.5;
  margin: 0;
}

.dev-tone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tone-tag {
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: var(--purple, #A78BFA);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dev-visual-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dev-visual-detail-row {
  font-size: 13px;
  color: var(--text, #F3F4F6);
  line-height: 1.5;
}

.dev-visual-detail-row strong {
  color: var(--text-muted, #9CA3AF);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
}

/* Execution Roadmap */
.dev-roadmap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 700px) {
  .dev-roadmap {
    grid-template-columns: 1fr;
  }
}

.dev-phase-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phase-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.phase-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #F3F4F6);
  margin: 0;
  line-height: 1.3;
}

.phase-budget {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--green, #22C55E);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.phase-activities {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phase-activity {
  font-size: 12px;
  color: var(--text-secondary, #9CA3AF);
  line-height: 1.4;
}

.phase-deliverables {
  font-size: 11px;
  color: var(--text-muted, #6B7280);
  line-height: 1.5;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

.phase-deliverables strong {
  color: var(--text-muted, #6B7280);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

/* Measurement Framework */
.dev-kpis {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dev-kpi-group-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6B7280);
  margin: 0 0 8px;
}

.dev-kpi-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.dev-kpi-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 10px 12px;
  align-items: center;
}

.kpi-metric {
  font-size: 13px;
  color: var(--text, #F3F4F6);
  font-weight: 500;
}

.kpi-target {
  font-size: 12px;
  color: var(--green, #22C55E);
  font-weight: 600;
  font-family: 'DM Mono', monospace;
}

.kpi-timeline {
  font-size: 11px;
  color: var(--text-muted, #6B7280);
  font-style: italic;
}

.dev-gonogo {
  font-size: 13px;
  color: var(--text, #F3F4F6);
  line-height: 1.6;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0;
}

/* Dev Studio Develop button on v42 concept card */
.v42-develop-btn {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--accent, #F59E0B);
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.v42-develop-btn:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
}

/* ============================================================
   N13: BRIEF TEMPLATE BAR — Sprint 6
   ============================================================ */

.brief-template-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.brief-template-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6B7280);
}

.brief-template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.brief-template-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: var(--text-secondary, #9CA3AF);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
}

.brief-template-chip:hover {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--accent, #F59E0B);
}

.brief-template-chip.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--accent, #F59E0B);
  transform: scale(0.96);
}

.btc-icon {
  font-size: 13px;
  line-height: 1;
}

.btc-label {
  font-weight: 600;
}

/* ============================================================
   N16: CLARIFYING QUESTION TOAST — Sprint 6
   ============================================================ */

.clarify-toast {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 8500;
  max-width: 420px;
  width: calc(100vw - 40px);
  animation: clarifyToastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes clarifyToastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.clarify-toast-inner {
  background: var(--surface-0, #111113);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 158, 11, 0.1);
}

.clarify-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.clarify-toast-badge {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #F59E0B);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 2px 8px;
  border-radius: 4px;
}

.clarify-toast-close {
  background: none;
  border: none;
  color: var(--text-muted, #6B7280);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}

.clarify-toast-close:hover {
  color: var(--text, #F3F4F6);
}

.clarify-toast-question {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text, #F3F4F6);
  font-weight: 500;
  margin-bottom: 10px;
}

.clarify-toast-hint {
  font-size: 11px;
  color: var(--text-muted, #6B7280);
  line-height: 1.5;
  font-style: italic;
}

/* ── N23: Archetype DNA label in operator seed card ─────────── (preserved) */

/* N27: KB Stats on Create Page */
.mode-kb-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 28px 0 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.kb-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent, #F59E0B);
  letter-spacing: -0.5px;
}
.kb-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
@media (max-width: 640px) {
  .mode-kb-stats { flex-wrap: wrap; gap: 16px; }
  .kb-stat-num { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   F5: COMPETITIVE MEMORY UI
   ═══════════════════════════════════════════════════════════════ */
.cm-panel { padding: 1.5rem 0; }
.cm-header { margin-bottom: 1.5rem; }
.cm-title { font-size: 1.4rem; font-weight: 700; color: var(--text-primary, #fff); margin: 0 0 0.25rem; }
.cm-subtitle { font-size: 0.82rem; color: var(--text-muted, rgba(255,255,255,0.45)); margin: 0; }

.cm-section { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cm-section:last-child { border-bottom: none; }
.cm-section-title { font-size: 1rem; font-weight: 600; color: var(--text-primary, #fff); margin: 0 0 1rem; }
.cm-section h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary, rgba(255,255,255,0.7)); margin: 0.75rem 0 0.5rem; }

/* Originality scores */
.cm-originality-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cm-orig-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.cm-orig-score { font-size: 1.3rem; font-weight: 700; min-width: 50px; text-align: center; }
.cm-orig-info { flex: 1; min-width: 0; }
.cm-orig-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-orig-status { font-size: 0.75rem; font-weight: 500; margin-top: 2px; }
.cm-orig-precedent { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

/* Insight boxes */
.cm-insight { padding: 12px 16px; border-radius: 8px; margin-bottom: 10px; }
.cm-insight-green { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); }
.cm-insight-red { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); }
.cm-insight-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 6px; }
.cm-insight-green .cm-insight-label { color: var(--green, #22C55E); }
.cm-insight-red .cm-insight-label { color: #ef4444; }
.cm-insight p { font-size: 0.82rem; color: var(--text-secondary); margin: 4px 0; }
.cm-hint { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }

/* Tags */
.cm-tag { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 500; margin: 2px; }
.cm-tag-green { background: rgba(34,197,94,0.15); color: var(--green, #22C55E); }

/* Claimed territories */
.cm-claimed-list { display: flex; flex-direction: column; gap: 8px; }
.cm-claimed-item { padding: 10px 14px; background: rgba(255,255,255,0.03); border-radius: 8px; border-left: 2px solid var(--accent, #F59E0B); }
.cm-claimed-truth { font-size: 0.85rem; color: var(--text-primary); font-style: italic; }
.cm-claimed-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

/* Notable / adjacent / competitor grids */
.cm-notable-grid, .cm-competitor-grid, .cm-adjacent-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.cm-notable-card, .cm-competitor-card, .cm-adjacent-card {
  padding: 12px 14px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);
}
.cm-notable-name, .cm-adjacent-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.cm-notable-brand, .cm-adjacent-brand { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.cm-notable-mech, .cm-adjacent-mech { font-size: 0.75rem; color: var(--accent2, #3B82F6); margin-top: 4px; }
.cm-notable-idea, .cm-adjacent-idea { font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; }
.cm-adjacent-transfer { font-size: 0.72rem; color: var(--green, #22C55E); margin-top: 6px; }

.cm-competitor-brand { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.cm-competitor-territory { font-size: 0.8rem; color: var(--accent, #F59E0B); margin-top: 4px; font-style: italic; }
.cm-competitor-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

.cm-own-brand { margin-bottom: 12px; }
.cm-own-item { font-size: 0.82rem; color: var(--text-secondary); padding: 4px 0; }

@media (max-width: 640px) {
  .cm-originality-grid, .cm-notable-grid, .cm-competitor-grid, .cm-adjacent-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   F6: BIAS LAYER STYLES
   ============================================================ */

.bl-panel {
  padding: 2rem;
}

.bl-header {
  margin-bottom: 2rem;
}

.bl-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.bl-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.bl-risk-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bl-risk-clean { background: rgba(34, 197, 94, 0.15); color: var(--green); }
.bl-risk-medium { background: rgba(245, 158, 11, 0.15); color: var(--accent); }
.bl-risk-high { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.bl-risk-critical { background: rgba(220, 38, 38, 0.2); color: #dc2626; }

.bl-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.bl-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bl-alert {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.bl-alert-critical {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.bl-alert-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.bl-alert-title {
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 0.25rem;
}

.bl-alert-content p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0.25rem 0;
}

.bl-alert-action {
  color: var(--text-primary) !important;
}

.bl-bias-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bl-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(167, 139, 250, 0.12);
  color: var(--purple);
  border: 1px solid rgba(167, 139, 250, 0.25);
}

.bl-chip-active {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
  border-color: rgba(34, 197, 94, 0.25);
}

.bl-chip-sm {
  padding: 2px 7px;
  font-size: 0.7rem;
}

.bl-chip-more {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border-color: var(--border);
}

/* v8.8: Bias Arsenal Grid */
.bl-arsenal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.bl-arsenal-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.2s;
}
.bl-arsenal-card:hover {
  border-color: rgba(245, 158, 11, 0.3);
}

/* v8.8: Inject button spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.bl-inject-btn:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.25) !important;
}
.bl-inject-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.bl-concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.bl-concept-card {
  background: var(--surface-1);
  border-radius: 8px;
  padding: 1rem;
}

.bl-concept-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.bl-concept-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.bl-concept-risk {
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
}

.bl-bias-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bl-bias-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.bl-bias-name {
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bl-bias-family {
  color: var(--text-muted);
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
}

.bl-bias-risk-score {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.75rem;
}

.bl-more {
  color: var(--text-muted);
  font-size: 0.75rem;
  padding-top: 0.25rem;
}

.bl-clean {
  color: var(--green);
  font-size: 0.8rem;
}

.bl-gate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.bl-gate-card {
  background: var(--surface-1);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

.bl-gate-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-primary);
  text-transform: capitalize;
  margin-bottom: 0.25rem;
}

.bl-gate-risk {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.bl-gate-biases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bl-families {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bl-family-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.bl-family-label {
  width: 100px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: capitalize;
}

.bl-family-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.bl-family-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--accent2));
  border-radius: 4px;
  transition: width 0.6s ease;
}

.bl-family-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  width: 24px;
  text-align: right;
}

.bl-recommendations {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bl-rec {
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent2);
}

.bl-rec-critical {
  background: rgba(220, 38, 38, 0.06);
  border-left-color: #dc2626;
  color: var(--text-primary);
}

/* ============================================================
   F1: PIPELINE MODE TOGGLE (Autopilot vs Human-in-the-Loop)
   ============================================================ */

.pipeline-mode-section {
  margin: 20px 0 8px;
  padding: 16px 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pipeline-mode-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.pipeline-mode-toggle {
  display: flex;
  gap: 0;
  background: var(--surface3);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.pipeline-mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  background: none;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s;
  white-space: nowrap;
}

.pipeline-mode-btn:hover { color: var(--text); }

.pipeline-mode-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(245,158,11,0.25);
}

.pipeline-mode-btn.active .mode-btn-icon { filter: none; }

.mode-btn-icon {
  font-size: 15px;
  line-height: 1;
}

.pipeline-mode-hint {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   F1: HITL GATE OVERLAY
   ============================================================ */

.hitl-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(12,12,14,0.9);
  display: flex;
  align-items: stretch;
  backdrop-filter: blur(4px);
}

.hitl-gate-overlay[hidden] { display: none; }

.hitl-gate-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 48px 56px;
  max-width: 900px;
  margin: 0 auto;
}

.hitl-gate-header {
  margin-bottom: 32px;
}

.hitl-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hitl-gate-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.2;
}

.hitl-gate-sub {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}

.hitl-gate-body {
  flex: 1;
  margin-bottom: 32px;
}

/* Gate item cards */
.hitl-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}

.hitl-item:hover {
  border-color: var(--border-active);
  background: var(--surface3);
}

.hitl-item.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.hitl-item-check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-active);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.hitl-item.selected .hitl-item-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.hitl-item.selected .hitl-item-check::after {
  content: '✓';
  font-size: 12px;
  font-weight: 700;
}

.hitl-item-body { flex: 1; min-width: 0; }

.hitl-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.hitl-item-text {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

.hitl-item-edit {
  width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--surface3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 12px;
  font-family: var(--font);
  resize: vertical;
}

.hitl-item-edit:focus {
  outline: none;
  border-color: var(--accent);
}

.hitl-item-star {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.hitl-item-star.starred { color: var(--accent); }

.hitl-gate-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.hitl-confirm-btn {
  padding: 12px 28px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  transition: all 0.15s;
}

.hitl-confirm-btn:hover {
  background: #fbbf24;
  transform: translateY(-1px);
}

.hitl-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.hitl-gate-locked {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hitl-locked-label { color: var(--text-muted); }

/* ── HITL Sidebar ─────────────────────────────────────────── */

.hitl-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px 20px;
}

.hitl-sidebar-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.hitl-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hitl-phase-indicator {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.hitl-sidebar-gates {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hitl-sidebar-gate {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface2);
}

.hitl-sidebar-gate.locked {
  border-color: rgba(34,197,94,0.3);
  background: rgba(34,197,94,0.06);
}

.hitl-sidebar-gate.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.hitl-sidebar-gate.pending {
  opacity: 0.5;
}

.hitl-sg-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.hitl-sidebar-gate.locked .hitl-sg-label { color: var(--green); }
.hitl-sidebar-gate.active .hitl-sg-label { color: var(--accent); }

.hitl-sg-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.hitl-sg-summary {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

.hitl-sg-ts {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
  font-family: var(--mono);
}

/* ============================================================
   F2: CAMPAIGN EXPANSION UI
   ============================================================ */

/* Tab accent */
.strat-tab-expansion.active {
  color: var(--purple) !important;
  border-bottom-color: var(--purple) !important;
}

.strat-tab-expansion {
  color: var(--text-muted);
}

/* Expansion Header */
.expansion-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}

.expansion-header-left {}

.expansion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--purple-soft);
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.expansion-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.expansion-sub {
  font-size: 13.5px;
  color: var(--text-dim);
  max-width: 600px;
  line-height: 1.6;
}

.expansion-run-btn {
  padding: 12px 24px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
}

.expansion-run-btn:hover { background: #8b5cf6; transform: translateY(-1px); }

.expansion-run-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.expansion-run-btn.loading { opacity: 0.7; cursor: wait; }

/* Concept expansion card */
.expansion-concept-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  overflow: hidden;
}

.expansion-concept-card.expanded {}

.expansion-concept-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  cursor: pointer;
  transition: background 0.15s;
}

.expansion-concept-header:hover { background: rgba(255,255,255,0.02); }

.expansion-concept-num {
  width: 28px;
  height: 28px;
  background: var(--purple-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--purple);
  flex-shrink: 0;
}

.expansion-concept-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.expansion-concept-chevron {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.expansion-concept-card.expanded .expansion-concept-chevron {
  transform: rotate(90deg);
}

.expansion-concept-body {
  display: none;
  padding: 0 24px 28px;
}

.expansion-concept-card.expanded .expansion-concept-body {
  display: block;
}

/* Identity Package */
.expansion-identity {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin-bottom: 24px;
}

.expansion-identity-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--purple);
  margin-bottom: 16px;
}

.expansion-identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.expansion-id-field {}

.expansion-id-key {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.expansion-id-value {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}

.expansion-id-value.big {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.expansion-id-value.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--accent);
}

.expansion-hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.expansion-hashtag {
  padding: 3px 8px;
  background: var(--purple-soft);
  border-radius: 4px;
  font-size: 12px;
  color: var(--purple);
  font-family: var(--mono);
}

.expansion-msg-hierarchy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.expansion-msg-tier {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
}

.expansion-msg-tier-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  min-width: 55px;
  margin-top: 2px;
}

.expansion-msg-tier-text {
  color: var(--text-dim);
  line-height: 1.5;
}

/* Surface cards grid */
.expansion-surfaces-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.expansion-surfaces-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

/* Surface card */
.expansion-surface-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}

.expansion-surface-card:hover { border-color: var(--border-active); }

.expansion-surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.expansion-surface-icon {
  font-size: 16px;
  line-height: 1;
}

.expansion-surface-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.expansion-surface-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface3);
  padding: 2px 7px;
  border-radius: 10px;
}

.expansion-surface-toggle {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.expansion-surface-card.open .expansion-surface-toggle {
  transform: rotate(90deg);
}

.expansion-surface-body {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--border);
}

.expansion-surface-card.open .expansion-surface-body {
  display: block;
}

/* Execution row */
.expansion-execution {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.expansion-execution:last-child { border-bottom: none; }

.expansion-exec-format {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}

.expansion-exec-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.expansion-exec-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
}

.expansion-exec-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expansion-exec-meta-item {
  display: flex;
  gap: 4px;
  font-size: 11px;
}

.expansion-exec-meta-key {
  color: var(--text-muted);
  font-weight: 600;
}

.expansion-exec-meta-val {
  color: var(--text-dim);
}

/* Empty expansion state */
.expansion-empty {
  padding: 60px 32px;
  text-align: center;
  color: var(--text-dim);
}

.expansion-empty-icon {
  font-size: 36px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.expansion-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.expansion-empty-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Expand button in overview */
.hero-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--purple-soft);
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: var(--radius-sm);
  color: var(--purple);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
  cursor: pointer;
}

.hero-expand-btn:hover {
  background: rgba(167,139,250,0.18);
  border-color: var(--purple);
}

/* Loading spinner for expansion */
.expansion-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 32px;
  text-align: center;
}

.expansion-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.expansion-loading-text {
  font-size: 14px;
  color: var(--text-dim);
}

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

/* ============================================================
   F3: PPTX EXPORT DROPDOWN
   ============================================================ */

.export-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.export-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  min-width: 200px;
  z-index: 100;
  overflow: hidden;
}

.export-dropdown-menu.hidden { display: none; }

.export-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

.export-dropdown-item:last-child { border-bottom: none; }
.export-dropdown-item:hover { background: var(--surface3); }

.export-dropdown-item-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.export-dropdown-item-sub {
  font-size: 11px;
  color: var(--text-muted);
}


/* ============================================================
   v8.5: GLOBAL PROGRESS BAR SYSTEM
   ============================================================ */

/* Top-level progress bar (linear, above main content) */
.muse-global-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.muse-global-progress.active { opacity: 1; }
.muse-global-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: muse-progress-shimmer 1.8s ease-in-out infinite;
  border-radius: 0 2px 2px 0;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}
@keyframes muse-progress-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Inline progress bar (for panels and sections) */
.muse-inline-progress {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin: 0.75rem 0;
}
.muse-inline-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}

/* Step progress indicator */
.muse-step-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 1rem 0;
}
.muse-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  position: relative;
}
.muse-step::after {
  content: '';
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.08);
  transition: background 0.4s;
}
.muse-step:last-child::after { display: none; }
.muse-step.completed::after { background: var(--accent); }
.muse-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border: 2px solid rgba(255,255,255,0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.muse-step.active .muse-step-dot {
  background: rgba(245,158,11,0.15);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(245,158,11,0.25);
}
.muse-step.completed .muse-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #0C0C0E;
}
.muse-step-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: color 0.3s;
}
.muse-step.active .muse-step-label { color: var(--accent); font-weight: 600; }
.muse-step.completed .muse-step-label { color: var(--text-secondary); }

/* ============================================================
   v8.5: SKELETON LOADING & SHIMMER
   ============================================================ */

@keyframes muse-shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 1000px 100%;
  animation: muse-shimmer 2s infinite ease-in-out;
  border-radius: 6px;
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.wide { width: 85%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.short { width: 40%; }
.skeleton-title { height: 22px; width: 55%; margin-bottom: 12px; }
.skeleton-card {
  height: 200px;
  border-radius: 12px;
  margin-bottom: 1rem;
}
.skeleton-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.skeleton-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.skeleton-badge {
  height: 20px;
  width: 60px;
  border-radius: 4px;
}

/* ============================================================
   v8.5: BUTTON LOADING STATES
   ============================================================ */

/* Universal button spinner */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}
.btn-loading::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: muse-btn-spin 0.6s linear infinite;
}
@keyframes muse-btn-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Button with checkmark after success */
.btn-success-state {
  position: relative;
}
.btn-success-state::after {
  content: '✓';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green, #22C55E);
  font-size: 14px;
  font-weight: bold;
  animation: muse-check-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes muse-check-pop {
  0% { transform: translateY(-50%) scale(0); }
  100% { transform: translateY(-50%) scale(1); }
}

/* Enhanced disabled state */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.generate-btn:disabled,
.xray-run-btn:disabled,
.compete-btn:disabled,
.guided-run-btn:disabled,
.guided-continue-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* ============================================================
   v8.5: MICRO-INTERACTIONS & HOVER POLISH
   ============================================================ */

/* Ripple effect for buttons */
.btn-primary,
.btn-secondary,
.btn-ghost,
.generate-btn,
.xray-run-btn,
.guided-run-btn,
.guided-continue-btn {
  position: relative;
  overflow: hidden;
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: scale(0);
  animation: muse-ripple 0.6s ease-out;
  pointer-events: none;
}
@keyframes muse-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Enhanced card hover — subtle lift */
.op-card,
.mode-card,
.example-brief-card,
.guided-boldness-card,
.xray-section-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.25s;
}
.op-card:hover,
.mode-card:hover,
.example-brief-card:hover,
.xray-section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Smooth focus rings for accessibility */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.generate-btn:focus-visible,
.xray-run-btn:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   v8.5: ENHANCED TOAST SYSTEM
   ============================================================ */

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  animation: muse-toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 420px;
  line-height: 1.4;
}
.toast::before {
  font-size: 15px;
  flex-shrink: 0;
}
.toast.info { background: rgba(59,130,246,0.2); border: 1px solid rgba(59,130,246,0.3); color: #93C5FD; }
.toast.info::before { content: 'ℹ'; }
.toast.success { background: rgba(34,197,94,0.2); border: 1px solid rgba(34,197,94,0.3); color: #86EFAC; }
.toast.success::before { content: '✓'; }
.toast.warning { background: rgba(245,158,11,0.2); border: 1px solid rgba(245,158,11,0.3); color: #FCD34D; }
.toast.warning::before { content: '⚠'; }
.toast.error { background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.3); color: #FCA5A5; }
.toast.error::before { content: '✕'; }

@keyframes muse-toast-in {
  0% { opacity: 0; transform: translateY(12px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}
.toast { pointer-events: auto; }

/* ============================================================
   v8.5: ACTION FEEDBACK OVERLAY (for long-running actions)
   ============================================================ */

.muse-action-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,12,14,0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 8000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  animation: muse-fade-in 0.25s ease;
}
@keyframes muse-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.muse-action-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: muse-btn-spin 0.8s linear infinite;
}
.muse-action-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text-secondary, #9CA3AF);
  text-align: center;
  max-width: 300px;
  line-height: 1.5;
}
.muse-action-sublabel {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-muted, #666);
  letter-spacing: 0.04em;
}

/* ============================================================
   v8.5: OPERATOR COMBO PANEL — PROGRESS ENHANCEMENTS
   ============================================================ */

.op-combo-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.op-combo-progress-text {
  font-size: 0.8rem;
  color: var(--accent);
  min-height: 1.4em;
  font-family: 'DM Sans', sans-serif;
}
.op-combo-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.op-combo-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}

/* ============================================================
   v8.5: GENERATION THEATER POLISH
   ============================================================ */

.theater-phase-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1rem;
  padding: 0 2rem;
}
.theater-phase-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  transition: background 0.4s, box-shadow 0.4s;
}
.theater-phase-dot.completed {
  background: var(--accent);
}
.theater-phase-dot.active {
  background: var(--accent2, #3B82F6);
  box-shadow: 0 0 8px rgba(59,130,246,0.4);
  animation: muse-phase-pulse 1.2s ease-in-out infinite;
}
@keyframes muse-phase-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ============================================================
   v8.5: SMOOTH SURFACE TRANSITIONS
   ============================================================ */

.surface {
  animation: muse-surface-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes muse-surface-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.strat-surface {
  animation: muse-strat-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes muse-strat-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   v8.5: SCROLLBAR POLISH
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}

/* ============================================================
   v8.5: TOOLTIPS
   ============================================================ */

[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: #1F1F23;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  animation: muse-tooltip-in 0.2s ease;
  font-family: 'DM Sans', sans-serif;
}
@keyframes muse-tooltip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Bias Injection Control ─────────────────────────────────── */
.advanced-field-full { grid-column: 1 / -1; }
.bias-inject-control { display: flex; flex-direction: column; gap: 8px; }
.bias-inject-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.bias-inject-tags:empty { display: none; }
.bias-inject-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600;
  background: rgba(245, 158, 11, 0.12); color: #F59E0B; border: 1px solid rgba(245, 158, 11, 0.25);
  animation: biasTagIn 0.2s ease-out;
}
.bias-inject-tag .bias-tag-remove {
  cursor: pointer; opacity: 0.6; font-size: 0.85rem; padding: 0 2px;
  transition: opacity 0.15s;
}
.bias-inject-tag .bias-tag-remove:hover { opacity: 1; color: #EF4444; }
@keyframes biasTagIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
.bias-inject-input-row { display: flex; gap: 6px; }
.bias-inject-input {
  flex: 1; padding: 8px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: #E5E5E5; font-size: 0.82rem;
  transition: border-color 0.2s;
}
.bias-inject-input:focus { outline: none; border-color: rgba(245, 158, 11, 0.4); }
.bias-inject-input::placeholder { color: rgba(255,255,255,0.25); }
.bias-inject-add-btn {
  padding: 8px 16px; border-radius: 6px; border: 1px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.1); color: #F59E0B; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.bias-inject-add-btn:hover { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.5); }
.bias-inject-hint { font-size: 0.7rem; color: rgba(255,255,255,0.35); line-height: 1.4; }

/* ============================================================
   ONBOARDING — "HOW IT WORKS" GUIDE
   v9.3: Full animated step-by-step onboarding overlay
   ============================================================ */

/* Trigger Button on Mode Select */
.onboarding-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.06);
  color: #F59E0B;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}
.onboarding-trigger:hover {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.1);
  transform: translateY(-1px);
}
.onboarding-trigger .ob-icon {
  font-size: 1rem;
  animation: obPulse 2s ease-in-out infinite;
}
@keyframes obPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* Overlay */
.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.ob-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Container */
.ob-container {
  width: 94vw;
  max-width: 960px;
  max-height: 90vh;
  background: var(--bg, #0C0C0E);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ob-overlay.active .ob-container {
  transform: scale(1) translateY(0);
}

/* Header */
.ob-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ob-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ob-logo {
  font-family: 'Instrument Serif', serif;
  font-size: 1.2rem;
  color: #F59E0B;
  letter-spacing: 0.06em;
}
.ob-title {
  font-size: 0.88rem;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  font-weight: 400;
}
.ob-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.ob-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

/* Route Tabs */
.ob-route-tabs {
  display: flex;
  padding: 0 28px;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ob-route-tab {
  padding: 14px 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ob-route-tab:hover {
  color: rgba(255, 255, 255, 0.6);
}
.ob-route-tab.active {
  color: #F59E0B;
  border-bottom-color: #F59E0B;
}

/* Content Area */
.ob-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.ob-content::-webkit-scrollbar { width: 6px; }
.ob-content::-webkit-scrollbar-track { background: transparent; }
.ob-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* Route Pane */
.ob-route-pane {
  display: none;
  padding: 28px;
}
.ob-route-pane.active {
  display: block;
  animation: obFadeIn 0.4s ease;
}
@keyframes obFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Route Intro */
.ob-route-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding: 20px;
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.12);
  border-radius: 12px;
}
.ob-route-intro-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.ob-route-intro-text h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 6px;
}
.ob-route-intro-text p {
  font-size: 0.82rem;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  line-height: 1.55;
  margin: 0;
}
.ob-route-intro-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ob-badge-easy   { background: rgba(34, 197, 94, 0.12); color: #22C55E; }
.ob-badge-pro    { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.ob-badge-expert { background: rgba(167, 139, 250, 0.12); color: #A78BFA; }

/* Step Cards */
.ob-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.ob-steps::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.05));
}

.ob-step {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  position: relative;
  opacity: 0;
  transform: translateX(-12px);
}
.ob-step.visible {
  animation: obStepIn 0.5s ease forwards;
}
@keyframes obStepIn {
  to { opacity: 1; transform: translateX(0); }
}

.ob-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.1);
  border: 2px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #F59E0B;
  flex-shrink: 0;
  z-index: 1;
  transition: all 0.3s ease;
}
.ob-step:hover .ob-step-num {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.15);
}

.ob-step-body {
  flex: 1;
  padding-top: 2px;
}
.ob-step-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 6px;
}
.ob-step-desc {
  font-size: 0.78rem;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  line-height: 1.6;
  margin: 0 0 10px;
}

/* Step Tips */
.ob-step-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin-top: 8px;
}
.ob-step-tip-icon {
  color: #3B82F6;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Button Reference Grid */
.ob-button-ref {
  margin-top: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.ob-button-ref h4 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ob-btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.ob-btn-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: background 0.2s;
}
.ob-btn-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ob-btn-item-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.ob-btn-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ob-btn-item-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
}
.ob-btn-item-desc {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
}

/* Footer */
.ob-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ob-progress {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ob-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: all 0.3s;
}
.ob-progress-dot.active {
  background: #F59E0B;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
.ob-footer-text {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
}
.ob-start-btn {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  background: #F59E0B;
  color: #0C0C0E;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.ob-start-btn:hover {
  background: #FBBF24;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

/* Screen mockup inside steps */
.ob-screen-mock {
  margin-top: 12px;
  padding: 16px;
  background: rgba(12, 12, 14, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.ob-screen-mock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ob-screen-dots {
  position: absolute;
  top: 8px;
  left: 12px;
  display: flex;
  gap: 5px;
}
.ob-screen-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ob-screen-dot:nth-child(1) { background: #EF4444; }
.ob-screen-dot:nth-child(2) { background: #F59E0B; }
.ob-screen-dot:nth-child(3) { background: #22C55E; }
.ob-screen-inner {
  margin-top: 20px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}
.ob-screen-inner .ob-highlight {
  color: #F59E0B;
  font-weight: 600;
}
.ob-screen-inner .ob-highlight-blue {
  color: #3B82F6;
  font-weight: 600;
}
.ob-screen-inner .ob-highlight-green {
  color: #22C55E;
  font-weight: 600;
}
.ob-screen-inner .ob-highlight-purple {
  color: #A78BFA;
  font-weight: 600;
}

/* Phase timeline mockup */
.ob-phase-timeline {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ob-phase-block {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  color: rgba(245, 158, 11, 0.7);
  animation: obPhaseSlide 0.3s ease backwards;
}
.ob-phase-block:nth-child(1) { animation-delay: 0.1s; }
.ob-phase-block:nth-child(2) { animation-delay: 0.2s; }
.ob-phase-block:nth-child(3) { animation-delay: 0.3s; }
.ob-phase-block:nth-child(4) { animation-delay: 0.4s; }
.ob-phase-block:nth-child(5) { animation-delay: 0.5s; }
.ob-phase-block:nth-child(6) { animation-delay: 0.6s; }
@keyframes obPhaseSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Responsive */
@media (max-width: 700px) {
  .ob-container { width: 98vw; max-height: 95vh; }
  .ob-header, .ob-route-tabs, .ob-route-pane, .ob-footer { padding-left: 16px; padding-right: 16px; }
  .ob-route-pane { padding: 16px; }
  .ob-btn-grid { grid-template-columns: 1fr; }
  .ob-route-tab { padding: 10px 12px; font-size: 0.7rem; }
}

/* ============================================================
   BIAS INJECT BUTTON FIX — v9.3 Enhanced visibility
   ============================================================ */
.bias-inject-add-btn {
  padding: 8px 20px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bias-inject-add-btn:hover {
  background: rgba(245, 158, 11, 0.3);
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}
.bias-inject-add-btn:active {
  transform: scale(0.96);
}

/* v10.2 S-05: Doability Index UI Badge + Rescue Mode Banner */
.execution-risk-banner {
  background: #E8344A;
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-bottom: 6px;
}
.doability-badge {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rescue-mode-banner {
  background: rgba(232,52,74,0.15);
  border: 1px solid rgba(232,52,74,0.4);
  color: #E8344A;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}
.op-signal-accepted {
  background: rgba(16,185,129,0.15) !important;
  border-color: rgba(16,185,129,0.4) !important;
  color: #10B981 !important;
  cursor: default;
}

/* ============================================================
   OPERATOR TOOLS — Modal, Survey, Bug Report, TFP, Usage, Loss
   ============================================================ */

/* Modal overlay + container */
.ops-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}
.ops-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 540px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ops-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.ops-modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}
.ops-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
}
.ops-modal-close:hover {
  background: var(--surface2);
  color: var(--text);
}
.ops-modal-body {
  padding: 20px;
}
.ops-modal-intro {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 16px;
}
.ops-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* Survey questions */
.survey-q {
  margin-bottom: 16px;
}
.survey-q label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.survey-q textarea,
.survey-q select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  resize: vertical;
}
.survey-q textarea:focus,
.survey-q select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Rating buttons */
.survey-rating {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.rating-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.rating-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.rating-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

/* Bug auto-context bar */
.bug-auto-context {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}
.bug-context-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bug-context-item {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface3);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Bug Report FAB */
.bug-report-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 20px;
  cursor: pointer;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.2s;
}
.bug-report-fab:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.1);
}

/* TFP Panel */
.tfp-panel {
  padding: 20px;
}
.tfp-panel h3 {
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--accent);
}
.tfp-desc {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 16px;
}
.tfp-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tfp-step {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.tfp-step-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.tfp-step-content strong {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.tfp-step-content p {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

/* Usage Dashboard Panel */
.usage-panel {
  padding: 20px;
}
.usage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.usage-tier {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.usage-price {
  font-size: 13px;
  color: var(--text-dim);
}
.usage-bar-container {
  margin-bottom: 8px;
}
.usage-bar {
  height: 8px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.usage-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.5s ease;
}
.usage-bar.usage-warning .usage-bar-fill {
  background: var(--accent);
}
.usage-bar.usage-over .usage-bar-fill {
  background: var(--red);
}
.usage-numbers {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
}
.usage-numbers strong {
  color: var(--text);
}
.usage-limit {
  color: var(--text-muted);
}
.usage-alert {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 12px;
}
.usage-warning-text {
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
}

/* Loss Taxonomy styles */
.loss-taxonomy {
  padding: 20px;
}
.loss-taxonomy h3 {
  font-size: 16px;
  margin: 0 0 16px;
  color: var(--text);
}
.loss-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.loss-stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.loss-stat-card .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}
.loss-stat-card .stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.loss-record {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.loss-record:last-child {
  border-bottom: none;
}
.loss-record .loss-title {
  color: var(--text);
  font-weight: 600;
}
.loss-record .loss-phase {
  color: var(--text-dim);
  font-size: 11px;
}
.loss-record .loss-type {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.loss-type-RED_TEAM_KILL {
  background: rgba(239,68,68,0.15);
  color: var(--red);
}
.loss-type-COUNCIL_KILL {
  background: rgba(139,92,246,0.15);
  color: var(--purple);
}

/* ============================================================
   BRIEF CHARACTER COUNTER
   ============================================================ */
.brief-char-counter {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
  margin-top: 6px;
  padding-right: 4px;
  transition: color 0.2s;
}
.char-warning {
  color: var(--accent);
}
.char-over {
  color: var(--red);
  font-weight: 600;
}

/* ============================================================
   ANALYTICS DASHBOARD
   ============================================================ */
.analytics-dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
}
.analytics-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.analytics-subtitle {
  color: var(--text-secondary, #888);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.analytics-kpi {
  background: var(--surface2, #1a1a2e);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
}
.analytics-kpi.kpi-success { border-color: #22c55e; }
.analytics-kpi.kpi-pending { border-color: var(--border, #333); opacity: 0.6; }
.kpi-value {
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #fff);
}
.kpi-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #888);
  margin-top: 0.25rem;
}
.kpi-detail {
  font-size: 0.7rem;
  color: var(--accent, #00d4aa);
  margin-top: 0.25rem;
}
.analytics-section {
  margin-bottom: 2.5rem;
}
.analytics-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #aaa);
}
.funnel-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.funnel-row { display: flex; align-items: center; gap: 0.75rem; }
.funnel-label { width: 130px; font-size: 0.8rem; text-align: right; color: var(--text-secondary, #aaa); }
.funnel-bar-track { flex: 1; height: 24px; background: var(--surface2, #1a1a2e); border-radius: 6px; overflow: hidden; }
.funnel-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent, #00d4aa), #007a63); border-radius: 6px; transition: width 0.6s ease; }
.funnel-count { width: 50px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.analytics-table-wrap { overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.analytics-table th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border, #333); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; color: var(--text-secondary, #888); }
.analytics-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border, #1a1a2e); }
.analytics-table .mono { font-family: monospace; font-size: 0.75rem; opacity: 0.6; }
.utm-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.utm-tag { background: var(--surface2, #1a1a2e); border: 1px solid var(--border, #333); border-radius: 6px; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-family: monospace; }

/* ============================================================
   LOSS TAXONOMY VIEW (v2 — operator-tools.js)
   ============================================================ */
.loss-taxonomy-view {
  padding: 20px;
}
.loss-taxonomy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.loss-taxonomy-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text, #e0e0e0);
  margin: 0;
}
.loss-taxonomy-subtitle {
  font-size: 0.8rem;
  color: var(--text-dim, #888);
  margin: 4px 0 0;
}
.loss-taxonomy-stats-row {
  display: flex;
  gap: 12px;
}
.loss-stat-box {
  text-align: center;
  padding: 8px 16px;
  background: var(--surface2, #1a1a2e);
  border-radius: 8px;
  border: 1px solid var(--border, #333);
}
.loss-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text, #e0e0e0);
}
.loss-stat-value.accent {
  color: var(--accent, #F59E0B);
}
.loss-stat-label {
  font-size: 0.65rem;
  color: var(--text-dim, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.loss-section {
  margin-bottom: 24px;
}
.loss-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #e0e0e0);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.loss-table-wrap {
  overflow-x: auto;
}
.loss-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.loss-table thead tr {
  border-bottom: 2px solid var(--border, #333);
}
.loss-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--text-dim, #888);
  font-weight: 600;
}
.loss-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #333);
}
.loss-concept-name {
  color: var(--text, #e0e0e0);
  font-weight: 500;
}
.loss-concept-reason {
  color: var(--text-dim, #888);
}
.loss-empty {
  color: var(--text-dim, #888);
  font-size: 0.8rem;
  margin-bottom: 24px;
}
.loss-reasons-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.loss-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.loss-bar-track {
  flex: 1;
  background: var(--surface2, #1a1a2e);
  border-radius: 4px;
  height: 28px;
  position: relative;
  overflow: hidden;
}
.loss-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 4px;
}
.loss-bar-label {
  position: relative;
  padding: 0 10px;
  line-height: 28px;
  font-size: 0.72rem;
  color: var(--text, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.loss-bar-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim, #888);
  min-width: 40px;
  text-align: right;
}
.loss-phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.loss-phase-card {
  padding: 10px 14px;
  background: var(--surface2, #1a1a2e);
  border-radius: 6px;
  border: 1px solid var(--border, #333);
}
.loss-phase-name {
  font-size: 0.72rem;
  color: var(--text-dim, #888);
  margin-bottom: 2px;
}
.loss-phase-count {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text, #e0e0e0);
}

/* ============================================================
   POST-RUN SURVEY TOAST (v2)
   ============================================================ */
.ops-survey-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.ops-survey-inner {
  background: var(--surface, #1a1a2e);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 24px;
  width: 360px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  color: var(--text, #e0e0e0);
}
.ops-survey-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.ops-survey-title {
  font-size: 0.9rem;
  font-weight: 700;
}
.survey-q-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim, #888);
  margin-bottom: 6px;
}
.survey-btn-group {
  display: flex;
  gap: 6px;
}
.survey-btn-wrap {
  flex-wrap: wrap;
}
.sq-btn {
  flex: 1;
  padding: 6px;
  background: var(--surface2, #222);
  border: 1px solid var(--border, #444);
  border-radius: 4px;
  color: var(--text, #e0e0e0);
  cursor: pointer;
  font-size: 0.75rem;
  font-family: var(--font);
  transition: all 0.15s;
}
.sq-btn:hover {
  border-color: var(--accent, #F59E0B);
}
.sq-btn.active {
  background: rgba(245,158,11,0.15);
  border-color: var(--accent, #F59E0B);
}
.survey-stars {
  justify-content: center;
}
.sq-star {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 2px 4px;
  filter: grayscale(1);
  transition: filter 0.15s;
  flex: 0;
}
.sq-star.active {
  filter: grayscale(0) !important;
  background: none;
  border: none;
}
.survey-submit {
  width: 100%;
  margin-top: 4px;
}
.survey-submit:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ============================================================
   RESUME BANNER
   ============================================================ */
.ops-resume-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  background: var(--surface, #1a1a2e);
  border: 1px solid var(--accent, #F59E0B);
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  color: var(--text, #e0e0e0);
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.ops-resume-text {
  font-size: 0.82rem;
}
.ops-resume-detail {
  color: var(--text-dim, #888);
  font-size: 0.72rem;
}
.ops-resume-btn {
  white-space: nowrap;
  padding: 6px 14px;
  font-size: 0.75rem;
}

/* ============================================================
   USAGE DASHBOARD (v2 class names)
   ============================================================ */
.usage-tier-name {
  font-size: 0.72rem;
  color: var(--text-dim, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.usage-tier-price {
  font-size: 0.65rem;
  color: var(--text-dim, #888);
}
.usage-numbers-right {
  text-align: right;
}
.usage-big-number {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text, #e0e0e0);
}
.usage-limit-label {
  font-size: 0.75rem;
  color: var(--text-dim, #888);
}
.usage-sub-label {
  font-size: 0.65rem;
  color: var(--text-dim, #888);
}
.usage-bar-track {
  height: 6px;
  background: var(--bg, #111);
  border-radius: 3px;
  overflow: hidden;
}
.usage-bar-fill {
  height: 100%;
  background: #10B981;
  border-radius: 3px;
  transition: width 0.3s;
}
.usage-bar-fill.usage-warning {
  background: var(--accent, #F59E0B);
}
.usage-bar-fill.usage-danger {
  background: #EF4444;
}
.usage-bar-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.6rem;
  color: var(--text-dim, #888);
}

/* ============================================================
   MOBILE RESPONSIVE — IGNITION OUTPUT
   ============================================================ */
@media (max-width: 768px) {
  /* Strategy tabs: horizontal scroll */
  .strategy-tabs-bar {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    padding: 0 12px;
  }
  .strategy-tabs-bar::-webkit-scrollbar { display: none; }
  .strat-tab {
    white-space: nowrap;
    font-size: 11px;
    padding: 8px 12px;
    flex-shrink: 0;
  }

  /* Hero section */
  .hero-result {
    padding: 16px;
    margin: 0 -8px;
  }
  .hero-badge-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .hero-stat-card {
    min-width: 80px;
    padding: 10px;
  }
  .hero-stat-value {
    font-size: 1.3rem;
  }

  /* Concept cards */
  .concept-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .concept-card {
    padding: 16px;
  }
  .concept-card-title {
    font-size: 1rem;
  }

  /* Dual axis chart */
  #dualAxisChartContainer {
    overflow-x: auto;
  }
  #dualAxisChartContainer canvas {
    min-width: 500px;
  }

  /* Foundation */
  .foundation-header {
    flex-direction: column;
    gap: 12px;
  }
  .foundation-grid {
    grid-template-columns: 1fr;
  }

  /* Pipeline Log */
  .pipeline-log-container {
    font-size: 0.72rem;
  }
  .pipeline-log-table {
    min-width: 600px;
  }
  .pipeline-log-table th,
  .pipeline-log-table td {
    padding: 6px 8px;
    font-size: 0.7rem;
  }

  /* Operator */
  .operator-grid {
    grid-template-columns: 1fr;
  }

  /* Loss Taxonomy */
  .loss-taxonomy-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .loss-phase-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Survey toast */
  .ops-survey-toast {
    bottom: 10px;
    right: 10px;
    left: 10px;
  }
  .ops-survey-inner {
    width: 100%;
  }

  /* Resume banner */
  .ops-resume-banner {
    width: calc(100% - 24px);
    left: 12px;
    transform: none;
    flex-wrap: wrap;
    padding: 10px 14px;
  }

  /* Bug FAB */
  .bug-report-fab {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  /* Expansion */
  .expansion-container {
    padding: 12px;
  }

  /* General strat surfaces */
  .strat-surface {
    padding: 12px;
  }

  /* Analytics dashboard mobile */
  .analytics-dashboard {
    padding: 1rem;
  }
  .analytics-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .analytics-kpi {
    padding: 0.75rem;
  }
  .kpi-value {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .strat-tab {
    font-size: 10px;
    padding: 6px 8px;
  }
  .concept-card {
    padding: 12px;
  }
  .loss-phase-grid {
    grid-template-columns: 1fr;
  }
  .analytics-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}

/* ── F14 — Sell the Work Button ──────────────────────── */
.sell-story-btn {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: transparent;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.sell-story-btn:hover {
  color: #fff;
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.12);
}

.sell-story-btn.sell-story-loading {
  opacity: 0.6;
  pointer-events: none;
  animation: sell-story-pulse 1.2s ease-in-out infinite;
}

@keyframes sell-story-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}

/* ── F14 — Sell Story Modal ──────────────────────────── */
.sell-story-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sell-story-panel {
  background: var(--surface, #141418);
  border: 1px solid var(--border, #2A2A34);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.sell-story-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #2A2A34);
}

.sell-story-title {
  font-size: 14px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent, #F59E0B);
  margin: 0;
}

.sell-story-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.sell-story-close:hover {
  color: #fff;
}

/* ── F14 — Sell Story Tabs ───────────────────────────── */
.sell-story-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border, #2A2A34);
}

.sell-story-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.sell-story-tab:hover {
  color: rgba(255, 255, 255, 0.7);
}

.sell-story-tab.active {
  color: var(--accent, #F59E0B);
  border-bottom-color: var(--accent, #F59E0B);
}

/* ── F14 — Sell Story Body ───────────────────────────── */
.sell-story-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.sell-story-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text, #E8E8ED);
  white-space: pre-wrap;
}

.sell-story-text p {
  margin: 0 0 12px 0;
}

.sell-story-text p:last-child {
  margin-bottom: 0;
}

/* ── F14 — Sell Story Footer ─────────────────────────── */
.sell-story-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border, #2A2A34);
}

.sell-story-copy-btn {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--purple, #A78BFA);
  background: transparent;
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.sell-story-copy-btn:hover {
  color: #fff;
  border-color: var(--purple, #A78BFA);
  background: rgba(167, 139, 250, 0.12);
}

.sell-story-copy-feedback {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  color: var(--accent, #F59E0B);
  opacity: 0.8;
}

/* ── F14 — Sell Story Responsive ─────────────────────── */
@media (max-width: 640px) {
  .sell-story-panel {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
  }
  .sell-story-overlay {
    padding: 12px;
  }
}

/* ── F7 — Preference Memory Panel ────────────────────── */
.pref-panel {
  padding: 24px;
  max-width: 720px;
}
.pref-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #888);
  margin-bottom: 20px;
}
.pref-kpi-row {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}
.pref-kpi {
  flex: 1;
  background: var(--surface-1, #1a1a22);
  border: 1px solid var(--border, #2A2A34);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
}
.pref-kpi .pref-kpi-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
  line-height: 1.2;
}
.pref-kpi .pref-kpi-label {
  font-size: 0.68rem;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.pref-section {
  margin-bottom: 24px;
}
.pref-section h4 {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #888);
  margin: 0 0 10px 0;
}
.pref-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.78rem;
}
.pref-bar-row .pref-bar-label {
  min-width: 100px;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pref-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2, #222230);
  border-radius: 3px;
  overflow: hidden;
}
.pref-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.pref-bar-pos { background: var(--accent, #F59E0B); }
.pref-bar-neg { background: #ef4444; }
.pref-recent {
  margin-top: 12px;
}
.pref-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #2A2A34);
  font-size: 0.78rem;
  color: var(--text-primary, #fff);
}
.pref-recent-row:last-child {
  border-bottom: none;
}
.pref-action-star {
  color: var(--accent, #F59E0B);
  font-weight: 600;
}
.pref-action-kill {
  color: #ef4444;
  font-weight: 600;
}
.pref-action-expand {
  color: #60a5fa;
  font-weight: 600;
}
.pref-action-export {
  color: #34d399;
  font-weight: 600;
}
.pref-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted, #888);
  font-size: 0.84rem;
}
.pref-clear-btn {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.72rem;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ef4444;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pref-clear-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}