/* ═══════════════════════════════════════════════════════════
   H.I.V.E. — Hyper Integrated Visibility Engine
   ive.css — Complete stylesheet
   Aesthetic: Dark cyber-industrial war room. Amber/gold data
   streams. Toxic green helixes. Void black field.
═══════════════════════════════════════════════════════════ */

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

/* ─── CSS VARIABLES ─────────────────────────────────────── */
:root {
  /* Core palette */
  --void:        #020508;
  --abyss:       #060d12;
  --deep:        #0a1520;
  --panel:       #0d1c28;
  --surface:     #102130;
  --border:      #1a3040;
  --border-dim:  #0f2030;

  /* Gold / data stream */
  --gold:        #f0a020;
  --gold-bright: #ffcc44;
  --gold-dim:    #7a5010;
  --gold-glow:   rgba(240, 160, 32, 0.15);

  /* Green / helix */
  --helix:       #00ff88;
  --helix-dim:   #005533;
  --helix-glow:  rgba(0, 255, 136, 0.12);

  /* Pink / energized */
  --plasma:      #ff44aa;
  --plasma-dim:  #660033;
  --plasma-glow: rgba(255, 68, 170, 0.12);

  /* Text */
  --text-primary:   #d4e8f5;
  --text-secondary: #6a9ab8;
  --text-dim:       #2a4a60;
  --text-label:     #4a7a98;

  /* Status */
  --danger:    #ff3344;
  --warn:      #ff8800;
  --ok:        #00cc66;

  /* Typography */
  --font-display: 'Orbitron', monospace;
  --font-ui:      'Exo 2', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;

  /* Layout */
  --left-w:   280px;
  --right-w:  300px;
  --panel-gap: 1px;
}

/* ─── GLOBAL ────────────────────────────────────────────── */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--void);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── APP SHELL ─────────────────────────────────────────── */
#app {
  display: grid;
  grid-template-columns: var(--left-w) 1fr var(--right-w);
  grid-template-rows: 1fr;
  gap: var(--panel-gap);
  width: 100vw;
  height: calc(100vh - 42px); /* account for War Room nav */
  background: var(--border-dim);
  margin-top: 42px;
}

/* ─── PANELS ────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.panel--left {
  border-right: 1px solid var(--border);
}

.panel--center {
  background: var(--void);
  position: relative;
}

.panel--right {
  border-left: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.panel--right::-webkit-scrollbar {
  width: 4px;
}
.panel--right::-webkit-scrollbar-track {
  background: transparent;
}
.panel--right::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* ─── PANEL HEADER ──────────────────────────────────────── */
.panel__header {
  padding: 20px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel__subtitle {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ─── H.I.V.E. LOGO ─────────────────────────────────────── */
.hhive-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
}
.hhive-logo__h { color: var(--gold-bright); }
.hhive-logo__i { color: var(--helix); }
.hhive-logo__v { color: var(--plasma); }
.hhive-logo__e { color: var(--gold-bright); }
.hhive-logo__dot {
  color: var(--text-dim);
  font-size: 18px;
}

.acthive-target-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-top: 6px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── PANEL SECTIONS ────────────────────────────────────── */
.panel__section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-label);
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* ─── INPUT ─────────────────────────────────────────────── */
.field-input {
  width: 100%;
  background: var(--deep);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  letter-spacing: 0.05em;
}

.field-input::placeholder {
  color: var(--text-dim);
}

.field-input:focus {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 1px var(--gold-dim), inset 0 0 8px rgba(240,160,32,0.05);
}

/* ─── TYPE GRID ─────────────────────────────────────────── */
.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.type-btn {
  background: var(--deep);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 7px 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  text-transform: uppercase;
  line-height: 1.3;
}

.type-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: rgba(240,160,32,0.05);
}

.type-btn--active {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(240,160,32,0.1);
  box-shadow: 0 0 8px rgba(240,160,32,0.15);
}

/* ─── AGGRESSION BUTTONS ────────────────────────────────── */
.aggr-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.aggr-btn {
  background: var(--deep);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
}

.aggr-btn__name {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  min-width: 90px;
}

.aggr-btn__desc {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
}

.aggr-btn:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: rgba(240,160,32,0.04);
}

.aggr-btn--active {
  border-color: var(--gold);
  background: rgba(240,160,32,0.08);
  color: var(--gold-bright);
  box-shadow: 0 0 12px rgba(240,160,32,0.12);
}

.aggr-btn--active .aggr-btn__name {
  color: var(--gold-bright);
}

.aggr-btn--active .aggr-btn__desc {
  color: var(--gold-dim);
  color: #8a6020;
}

/* ─── WIRE BUTTON ───────────────────────────────────────── */
.wire-btn {
  margin: 14px 18px;
  width: calc(100% - 36px);
  background: linear-gradient(135deg, #1a3a20 0%, #0d2818 100%);
  border: 1px solid var(--helix-dim);
  color: var(--helix);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 14px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.wire-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(0,255,136,0.05) 100%);
  opacity: 0;
  transition: opacity 0.2s;
}

.wire-btn:hover {
  border-color: var(--helix);
  box-shadow: 0 0 20px rgba(0,255,136,0.2), inset 0 0 20px rgba(0,255,136,0.05);
  color: #44ffaa;
}

.wire-btn:hover::before {
  opacity: 1;
}

.wire-btn:active {
  transform: scale(0.99);
}

.wire-btn__icon {
  font-size: 16px;
  animation: hexSpin 4s linear infinite;
}

@keyframes hexSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── RESET BUTTON ──────────────────────────────────────── */
.reset-btn {
  margin: 14px 18px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.15s;
  width: calc(100% - 36px);
  flex-shrink: 0;
}

.reset-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ─── HIVE STATE BLOCK ──────────────────────────────────── */
.hhive-state-block {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

.hhive-state-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

.vp-bar-wrap {
  height: 4px;
  background: var(--deep);
  border: 1px solid var(--border-dim);
  margin-bottom: 6px;
  overflow: hidden;
}

.vp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  width: 0%;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 6px var(--gold);
}

.vp-readout {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.vp-sep {
  margin: 0 4px;
  color: var(--text-dim);
}

/* ─── SURFACE LIST ──────────────────────────────────────── */
.surface-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  scrollbar-width: none;
}

.surface-list::-webkit-scrollbar { display: none; }

.surface-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--deep);
  border: 1px solid var(--border-dim);
  cursor: pointer;
  transition: all 0.15s;
}

.surface-item:hover {
  border-color: var(--gold-dim);
  background: rgba(240,160,32,0.04);
}

.surface-item__icon {
  font-size: 13px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.surface-item__name {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  flex: 1;
  text-transform: uppercase;
}

.surface-item__checks {
  display: flex;
  gap: 2px;
}

.surface-item__check {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
}

.surface-item__check--done {
  background: var(--helix);
  box-shadow: 0 0 4px var(--helix);
}

/* ─── CENTER PANEL ──────────────────────────────────────── */
.graph-container {
  position: absolute;
  inset: 0;
  bottom: 52px; /* leave room for preview button bar */
}

#hhive-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#hhive-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ─── DEMO BADGE ────────────────────────────────────────── */
.demo-badge {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(6,13,18,0.85);
  border: 1px solid var(--gold-dim);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--gold);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.demo-badge__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.6); }
}

/* ─── REALITY OVERLAY ───────────────────────────────────── */
.reality-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 20;
  animation: realityFade 1s ease forwards;
}

@keyframes realityFade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.reality-overlay__top {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--helix);
  text-shadow: 0 0 20px var(--helix);
}

.reality-overlay__line {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--danger), transparent);
  margin: 8px auto;
}

.reality-overlay__bottom {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--danger);
  text-shadow: 0 0 20px var(--danger);
}

/* ─── SLIDER ────────────────────────────────────────────── */
.slider-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  background: rgba(6,13,18,0.9);
  border-top: 1px solid var(--border);
  z-index: 10;
}

.slider-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  min-width: 20px;
  text-align: center;
}

.slider-label--check {
  min-width: 50px;
  color: var(--gold);
  text-align: right;
  margin-left: auto;
}

.demo-slider {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: var(--deep);
  border: 1px solid var(--border);
  outline: none;
  cursor: pointer;
}

.demo-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--gold);
  border: 2px solid var(--gold-bright);
  cursor: pointer;
  box-shadow: 0 0 8px var(--gold);
}

.demo-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--gold);
  border: 2px solid var(--gold-bright);
  cursor: pointer;
  box-shadow: 0 0 8px var(--gold);
  border-radius: 0;
}

/* ─── INTEL PLACEHOLDER ─────────────────────────────────── */
.intel-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 14px;
  opacity: 0.25;
}

.intel-placeholder__icon {
  font-size: 48px;
  color: var(--text-dim);
  animation: hexPulse 3s ease-in-out infinite;
}

@keyframes hexPulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.7; }
}

.intel-placeholder__text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.8;
}

/* ─── INTEL SECTIONS ────────────────────────────────────── */
.intel-section {
  border-bottom: 1px solid var(--border-dim);
  padding: 12px 14px;
}

.intel-section__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.25em;
  color: var(--text-label);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
}

/* ─── MISSION CARDS ─────────────────────────────────────── */
.mission-cards {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mission-card {
  background: var(--deep);
  border: 1px solid var(--border-dim);
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.mission-card:hover {
  border-color: var(--gold-dim);
  background: rgba(240,160,32,0.04);
}

.mission-card__surface {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.mission-card__title {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.3;
}

.mission-card__vp {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
}

/* ─── STREAK BADGE ──────────────────────────────────────── */
.streak-badge {
  font-size: 10px;
  color: var(--warn);
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* ─── INVISIBILITY HOOK ─────────────────────────────────── */
.invisibility-hook {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--danger);
  text-shadow: 0 0 20px rgba(255,51,68,0.4);
  line-height: 1.1;
}

.invisibility-hook__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-weight: 400;
  text-shadow: none;
}

/* ─── MONETIZATION ──────────────────────────────────────── */
.monetization-display {
  text-align: left;
}

.monetization-display__amount {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--helix);
  text-shadow: 0 0 12px rgba(0,255,136,0.3);
}

.monetization-display__label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* ─── METRICS ───────────────────────────────────────────── */
.metrics-display {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.metric-row__label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
  width: 80px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.metric-row__bar {
  flex: 1;
  height: 3px;
  background: var(--deep);
}

.metric-row__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--helix-dim), var(--helix));
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.metric-row__val {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold);
  min-width: 30px;
  text-align: right;
}

/* ─── EXPANSION LIST ────────────────────────────────────── */
.expansion-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.expansion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--deep);
  border: 1px solid var(--border-dim);
  cursor: pointer;
  transition: all 0.15s;
}

.expansion-item:hover {
  border-color: var(--plasma-dim);
  background: rgba(255,68,170,0.04);
}

.expansion-item__icon { font-size: 12px; }
.expansion-item__name {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex: 1;
}
.expansion-item__vp {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--plasma);
}

/* ─── ATTENTION BARS ────────────────────────────────────── */
.attention-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.attention-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.attention-item__label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
  width: 90px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attention-item__bar {
  flex: 1;
  height: 4px;
  background: var(--deep);
}

.attention-item__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── MISSION PANEL OVERLAY ─────────────────────────────── */
.mission-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,5,8,0.7);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  backdrop-filter: blur(2px);
}

.mission-panel {
  width: 380px;
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -8px 0 40px rgba(0,0,0,0.6);
}

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

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

.mission-panel__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
}

.mission-panel__close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}

.mission-panel__close:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.mission-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Mission list inside panel */
.mission-list-item {
  background: var(--deep);
  border: 1px solid var(--border-dim);
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.mission-list-item:hover {
  border-color: var(--helix-dim);
  background: rgba(0,255,136,0.03);
}

.mission-list-item--done {
  border-color: var(--helix-dim);
  opacity: 0.6;
}

.mission-list-item__num {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.mission-list-item__title {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 4px;
}

.mission-list-item__desc {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.mission-list-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.mission-list-item__vp {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
}

.mission-list-item__complete-btn {
  background: transparent;
  border: 1px solid var(--helix-dim);
  color: var(--helix);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.mission-list-item__complete-btn:hover {
  background: rgba(0,255,136,0.08);
  border-color: var(--helix);
  box-shadow: 0 0 10px rgba(0,255,136,0.15);
}

.mission-complete-flash {
  position: fixed;
  inset: 0;
  background: rgba(0,255,136,0.06);
  pointer-events: none;
  z-index: 200;
  animation: completeFlash 0.6s ease forwards;
}

@keyframes completeFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── UTILITY ───────────────────────────────────────────── */
.hidden {
  display: none !important;
}

/* ─── SCAN LINE OVERLAY ─────────────────────────────────── */
#app::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 999;
}

/* ─── NODE COMPLETE RIPPLE ──────────────────────────────── */
@keyframes nodeRipple {
  0%   { r: 0;  opacity: 0.8; }
  100% { r: 60; opacity: 0; }
}

.node-ripple {
  animation: nodeRipple 0.8s ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════
   REALITY SCREEN — Full-screen interstitial
═══════════════════════════════════════════════════════════ */

#hhive-reality-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--void);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  overflow: hidden;
}

#hhive-reality-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(240,160,32,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 75%, rgba(255,51,68,.06) 0%, transparent 55%);
  pointer-events: none;
}

#hhive-reality-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(240,160,32,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,160,32,.015) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

#hhive-reality-screen.hrs-visible {
  opacity: 1;
}

#hhive-reality-screen.hrs-exit {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hrs-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 680px;
  width: 100%;
  padding: 0 32px;
}

/* ── OMNIPRESENT top ── */
.hrs-top {
  animation: hrsSlideDown 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}

@keyframes hrsSlideDown {
  from { opacity:0; transform: translateY(-24px); }
  to   { opacity:1; transform: translateY(0); }
}

.hrs-top-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .4em;
  color: rgba(255,255,255,.35);
  margin-bottom: 10px;
}

.hrs-omnipresent {
  font-family: var(--font-display);
  font-size: clamp(42px, 8vw, 72px);
  font-weight: 900;
  letter-spacing: .08em;
  color: #ffcc44;
  text-shadow:
    0 0 40px rgba(240,160,32,.8),
    0 0 80px rgba(240,160,32,.4),
    0 0 120px rgba(240,160,32,.2);
  line-height: 1;
  margin-bottom: 12px;
}

.hrs-omni-sub {
  font-family: var(--font-ui);
  font-size: 14px;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
  margin-bottom: 0;
}

/* ── DIVIDER ── */
.hrs-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 36px 0;
  animation: hrsFadeIn 0.5s ease 0.7s both;
}

@keyframes hrsFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

.hrs-div-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,51,68,.5), transparent);
}

.hrs-div-but {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3em;
  color: rgba(255,51,68,.7);
  padding: 6px 16px;
  border: 1px solid rgba(255,51,68,.3);
  background: rgba(255,51,68,.06);
}

/* ── REALITY bottom ── */
.hrs-bottom {
  animation: hrsSlideUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.5s both;
}

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

.hrs-bottom-label {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: .15em;
  color: rgba(255,51,68,.9);
  text-shadow: 0 0 30px rgba(255,51,68,.5);
  margin-bottom: 24px;
}

.hrs-zero-state {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255,51,68,.04);
  border: 1px solid rgba(255,51,68,.15);
  padding: 20px 28px;
  margin-bottom: 0;
}

/* Void icon with pulsing dead rings */
.hrs-zero-icon {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.hrs-zero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,51,68,.25);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: hrsRingPulse 2.5s ease-in-out infinite;
}

.hrs-zero-ring--1 { width: 72px; height: 72px; animation-delay: 0s; }
.hrs-zero-ring--2 { width: 50px; height: 50px; animation-delay: 0.4s; border-color: rgba(255,51,68,.18); }
.hrs-zero-ring--3 { width: 28px; height: 28px; animation-delay: 0.8s; border-color: rgba(255,51,68,.12); }

@keyframes hrsRingPulse {
  0%, 100% { opacity: .4; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: .15; transform: translate(-50%,-50%) scale(0.92); }
}

.hrs-zero-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 22px;
  color: rgba(255,51,68,.5);
  font-weight: 300;
  line-height: 1;
}

.hrs-zero-text {
  text-align: left;
}

.hrs-zero-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}

.hrs-zero-desc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.35);
  letter-spacing: .06em;
  line-height: 1.5;
}

/* ── CTAs ── */
.hrs-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  animation: hrsFadeIn 0.6s ease 0.9s both;
  flex-wrap: wrap;
  justify-content: center;
}

.hrs-btn {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 14px 28px;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.hrs-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s;
  background: rgba(255,255,255,.05);
}
.hrs-btn:hover::before { opacity: 1; }
.hrs-btn:active { transform: scale(0.98); }

.hrs-btn--primary {
  background: linear-gradient(135deg, rgba(0,200,100,.6) 0%, rgba(0,255,136,.8) 100%);
  color: #001a0d;
  box-shadow: 0 0 24px rgba(0,255,136,.25);
}

.hrs-btn--primary:hover {
  box-shadow: 0 0 40px rgba(0,255,136,.5), 0 0 80px rgba(0,255,136,.2);
  transform: translateY(-1px);
}

.hrs-btn--secondary {
  background: transparent;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.2);
}

.hrs-btn--secondary:hover {
  border-color: rgba(255,255,255,.5);
  color: rgba(255,255,255,.9);
}

.hrs-btn-icon {
  font-size: 14px;
}

/* ── Ambient node ring ── */
.hrs-node-ring {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hrs-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(240,160,32,.5);
  background: rgba(240,160,32,.15);
  box-shadow: 0 0 10px rgba(240,160,32,.3);
  transform: translate(-50%,-50%);
  animation: hrsNodePulse 2.5s ease-in-out infinite;
}

.hrs-node--dead {
  border-color: rgba(255,51,68,.3);
  background: rgba(255,51,68,.08);
  box-shadow: 0 0 6px rgba(255,51,68,.2);
  animation: hrsNodeDead 3s ease-in-out infinite;
}

@keyframes hrsNodePulse {
  0%, 100% { opacity:.4; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity:.9; transform: translate(-50%,-50%) scale(1.3); }
}

@keyframes hrsNodeDead {
  0%, 100% { opacity:.15; }
  50%       { opacity:.35; }
}

/* ═══════════════════════════════════════════════════════════
   LADDER PANEL — Slide-in from right
═══════════════════════════════════════════════════════════ */

#hhive-ladder-panel {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(2,5,8,.75);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#hhive-ladder-panel.hlp-visible {
  opacity: 1;
}

.hlp-inner {
  width: min(480px, 100vw);
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  box-shadow: -12px 0 60px rgba(0,0,0,.7);
}

#hhive-ladder-panel.hlp-visible .hlp-inner {
  transform: translateX(0);
}

.hlp-header {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hlp-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .15em;
  color: var(--gold-bright);
}

.hlp-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .25em;
  color: var(--text-dim);
  margin-top: 4px;
}

.hlp-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.15s;
}

.hlp-close:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.hlp-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.hlp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background 0.15s;
  position: relative;
}

.hlp-row:hover {
  background: rgba(255,255,255,.025);
}

.hlp-row--current {
  background: rgba(255,51,68,.04);
  border-left: 2px solid rgba(255,51,68,.5);
}

.hlp-row--goal {
  background: rgba(240,160,32,.04);
  border-left: 2px solid rgba(240,160,32,.5);
}

.hlp-row-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .08em;
  width: 20px;
  flex-shrink: 0;
}

.hlp-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lc);
  box-shadow: 0 0 8px var(--lc);
  flex-shrink: 0;
}

.hlp-row-content {
  flex: 1;
  min-width: 0;
}

.hlp-row-name {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--lc);
  margin-bottom: 2px;
}

.hlp-row-desc {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.hlp-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.hlp-row-vp {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .06em;
  white-space: nowrap;
}

.hlp-row-tag {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .15em;
  padding: 2px 6px;
  border: 1px solid rgba(255,51,68,.4);
  color: rgba(255,51,68,.8);
  background: rgba(255,51,68,.06);
  white-space: nowrap;
}

.hlp-row-tag--gold {
  border-color: rgba(240,160,32,.5);
  color: var(--gold-bright);
  background: rgba(240,160,32,.08);
  box-shadow: 0 0 8px rgba(240,160,32,.15);
}

.hlp-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.hlp-footer .hrs-btn {
  width: 100%;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE-BASED MISSION PANEL STYLES
═══════════════════════════════════════════════════════════════ */

/* Surface header in panel */
.mp-surface-header {
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 12px;
}

.mp-surface-desc {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.mp-surface-stats {
  display: flex;
  gap: 20px;
}

.mp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-stat-val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.mp-stat-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Phase progression track */
.mp-phase-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-dim);
}

.mp-phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mp-phase-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  border: 1px solid var(--border);
  transition: all 0.3s;
}

.mp-phase-step--active .mp-phase-step-dot {
  background: var(--pc);
  border-color: var(--pc);
  box-shadow: 0 0 8px var(--pc);
}

.mp-phase-step--complete .mp-phase-step-dot {
  background: var(--pc);
  border-color: var(--pc);
}

.mp-phase-step-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

.mp-phase-step--active .mp-phase-step-label,
.mp-phase-step--complete .mp-phase-step-label {
  color: var(--pc);
}

.mp-phase-connector {
  flex: 1;
  height: 1px;
  background: var(--border-dim);
  margin-bottom: 14px;
}

.mp-phase-connector--done {
  background: rgba(0,255,136,.3);
}

/* Phase accordion sections */
.mp-phase {
  border: 1px solid var(--border-dim);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.mp-phase--active {
  border-color: var(--pc);
}

.mp-phase--active.mp-phase--open {
  box-shadow: 0 0 12px rgba(var(--pc), .1);
}

.mp-phase--complete {
  border-color: var(--border-dim);
  opacity: .8;
}

.mp-phase--locked {
  opacity: .4;
}

.mp-phase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  background: rgba(255,255,255,.015);
  transition: background 0.15s;
  user-select: none;
}

.mp-phase-header:hover {
  background: rgba(255,255,255,.03);
}

.mp-phase-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-phase-num {
  font-size: 12px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--pc);
}

.mp-phase-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-phase-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-phase-num-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .15em;
  color: var(--text-dim);
}

.mp-phase-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.mp-phase-tagline {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .06em;
}

.mp-phase-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mp-phase-count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
}

.mp-phase-pct {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  min-width: 30px;
  text-align: right;
}

.mp-phase-chevron {
  color: var(--text-dim);
  font-size: 14px;
  transition: transform 0.2s;
}

.mp-phase--open > .mp-phase-header .mp-phase-chevron {
  transform: rotate(90deg);
}

.mp-phase-body {
  display: none;
  padding: 0 0 4px;
  border-top: 1px solid var(--border-dim);
}

.mp-phase--open > .mp-phase-body {
  display: block;
}

.mp-phase--active > .mp-phase-body {
  display: block;
}

.mp-phase-locked-msg {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: .1em;
  border-top: 1px solid var(--border-dim);
}

/* Mission items */
.mp-missions-list {
  display: flex;
  flex-direction: column;
}

.mp-mission {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  align-items: flex-start;
  transition: background 0.15s;
}

.mp-mission:hover {
  background: rgba(255,255,255,.02);
}

.mp-mission--done {
  opacity: .55;
}

.mp-mission-check {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--helix);
}

.mp-mission-check--done {
  background: rgba(0,255,136,.1);
  border-color: var(--helix);
}

.mp-mission-body {
  flex: 1;
  min-width: 0;
}

.mp-mission-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.mp-mission-desc {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 6px;
}

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

.mp-mission-tag {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .12em;
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-radius: 1px;
  text-transform: uppercase;
}

.mp-mission-time {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: .06em;
}

.mp-mission-vp {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold);
  margin-left: auto;
}

.mp-mission-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.mp-complete-btn {
  background: transparent;
  border: 1px solid var(--helix-dim);
  color: var(--helix);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .15em;
  padding: 5px 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.mp-complete-btn:hover {
  background: rgba(0,255,136,.08);
  border-color: var(--helix);
  box-shadow: 0 0 8px rgba(0,255,136,.2);
}

.mp-complete-btn:disabled {
  opacity: .5;
  cursor: default;
}

.mp-repeat-btn {
  background: transparent;
  border: 1px solid rgba(240,160,32,.3);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  padding: 4px 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.mp-repeat-btn:hover {
  background: rgba(240,160,32,.08);
  border-color: var(--gold);
}

.mp-done-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .15em;
  color: rgba(0,255,136,.5);
  padding: 5px 0;
}

/* Surface list phase dots */
.surface-item__phases {
  display: flex;
  gap: 3px;
}

.surface-item__phase {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  border: 1px solid var(--border-dim);
  transition: all 0.3s;
}

.surface-item__phase--done {
  border: none;
}

.surface-item__phase--active {
  border-width: 1px;
  border-style: solid;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   EPIC HUD STYLES — Right Panel Intel
═══════════════════════════════════════════════════════════════ */

/* ── INVISIBILITY SHOCK ── */
.hud-shock {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.hud-shock-score {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  transition: color 0.6s;
}

.hud-shock-pct {
  font-size: 24px;
  font-weight: 400;
  opacity: .7;
}

.hud-shock-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .35em;
  color: rgba(255,255,255,.3);
  padding-bottom: 4px;
}

.hud-shock-stat {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
}

.hud-shock-monthly {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(255,51,68,.04);
  border-left: 2px solid rgba(255,51,68,.3);
}

.hud-shock-monthly-num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  transition: color 0.6s;
}

.hud-shock-monthly-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
  letter-spacing: .06em;
}

.hud-threat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .2em;
  padding: 4px 10px;
  border: 1px solid currentColor;
}

.hud-threat--critical { color: rgba(255,51,68,.9); background: rgba(255,51,68,.06); }
.hud-threat--high     { color: rgba(255,120,30,.9); background: rgba(255,120,30,.06); }
.hud-threat--moderate { color: rgba(255,200,60,.9); background: rgba(255,200,60,.05); }
.hud-threat--low      { color: rgba(0,230,118,.8);  background: rgba(0,230,118,.05); }
.hud-threat--minimal  { color: rgba(77,166,255,.8); background: rgba(77,166,255,.05); }
.hud-threat--none     { color: rgba(0,230,118,.7);  background: rgba(0,230,118,.04); }

/* ── METRICS GRID ── */
.hud-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.hud-metric-card {
  background: var(--deep);
  border: 1px solid var(--border-dim);
  padding: 8px 10px;
  transition: border-color 0.3s;
}

.hud-metric-val {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 2px;
  transition: color 0.6s;
  letter-spacing: -.01em;
}

.hud-metric-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .18em;
  color: var(--text-label);
  margin-bottom: 2px;
  text-transform: uppercase;
}

.hud-metric-range {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.hud-metric-bar {
  height: 2px;
  background: var(--border-dim);
  overflow: hidden;
}

.hud-metric-fill {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1), background 0.6s;
  min-width: 2px;
}

/* ── NARRATIVE ── */
.hud-narrative {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.4);
  line-height: 1.6;
  padding: 8px 10px;
  border-left: 2px solid;
  margin-bottom: 8px;
  transition: border-color 0.6s;
  font-style: italic;
}

/* ── COMPETITOR GAP ── */
.hud-competitor-gap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid;
  background: rgba(255,255,255,.02);
  transition: border-color 0.6s;
}

.hud-gap-icon {
  font-size: 11px;
  flex-shrink: 0;
  transition: color 0.6s;
}

.hud-gap-text {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
  letter-spacing: .06em;
  line-height: 1.4;
}

/* ── MONETIZATION ── */
.hud-mono-main {
  margin-bottom: 10px;
}

.hud-mono-amount {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  transition: color 0.6s, text-shadow 0.6s;
  letter-spacing: -.01em;
}

.hud-mono-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--text-dim);
  margin-top: 3px;
  text-transform: uppercase;
}

.hud-mono-revenue-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-dim);
  margin-bottom: 8px;
}

.hud-mono-stat {
  flex: 1;
  padding: 8px 10px;
  border-right: 1px solid var(--border-dim);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hud-mono-stat:last-child {
  border-right: none;
}

.hud-mono-stat-val {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  transition: color 0.6s;
}

.hud-mono-stat-lbl {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  color: var(--text-dim);
  text-transform: uppercase;
  line-height: 1.3;
}

.hud-mono-unlock {
  padding: 6px 0;
}

/* ── MISSION META ── */
.hud-mission-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.hud-mission-impact {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .15em;
  padding: 2px 5px;
  border: 1px solid currentColor;
}

.hud-mission-impact--critical { color: #ff44aa; }
.hud-mission-impact--high     { color: #4da6ff; }
.hud-mission-impact--medium   { color: #ffcc44; }
.hud-mission-impact--low      { color: #888; }

.hud-mission-time {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
}

/* ── DAY HEADER ── */
.hud-day-header {
  margin-bottom: 8px;
}

.hud-day-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--gold);
  padding: 5px 8px;
  background: rgba(240,160,32,.06);
  border: 1px solid rgba(240,160,32,.2);
  display: inline-block;
}

/* ── EMPTY STATE ── */
.hud-empty {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  padding: 8px 0;
  letter-spacing: .08em;
}

/* ── MISSION CARD ── */
.mission-card--done {
  opacity: .45;
}

/* ── ATTENTION FLOW PCT ── */
.attention-item__pct {
  font-family: var(--font-mono);
  font-size: 9px;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ── INTEL SECTION LABELS (tighter) ── */
.intel-section {
  padding: 10px 12px;
}

.intel-section__label {
  font-size: 7.5px;
  letter-spacing: .28em;
  margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   TRAJECTORY ENGINE STYLES
═══════════════════════════════════════════════════════════════ */

/* ── Top row: sparkline + pace stats ── */
.traj-top {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.traj-sparkline-wrap {
  flex: 1;
  min-width: 0;
}

.traj-sparkline-wrap canvas {
  display: block;
  width: 100%;
  height: 44px;
}

.traj-spark-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
}

.traj-spark-lbl {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .12em;
  color: var(--text-dim);
}

.traj-pace-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  min-width: 90px;
}

.traj-pace-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.traj-pace-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  color: var(--text-dim);
}

.traj-pace-val {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── Next level block ── */
.traj-next-level {
  border: 1px solid;
  padding: 10px 10px 8px;
  margin-bottom: 8px;
  transition: border-color 0.6s;
}

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

.traj-next-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .25em;
  color: var(--text-dim);
}

.traj-next-name {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  transition: color 0.6s;
}

.traj-time-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.traj-time-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
}

.traj-time-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  transition: color 0.3s;
}

.traj-time-val--warn {
  font-size: 10px;
  color: rgba(255,51,68,.8);
  letter-spacing: .08em;
  padding-top: 4px;
}

.traj-time-val--streak {
  color: #00ff88;
  text-shadow: 0 0 12px rgba(0,255,136,.4);
}

.traj-time-lbl {
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: .14em;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.3;
}

.traj-time-divider {
  width: 1px;
  background: var(--border-dim);
  margin: 4px 0;
  align-self: stretch;
}

/* ── Unlock preview ── */
.traj-unlock-preview {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border-dim);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.traj-unlock-header {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .2em;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.traj-unlock-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
}

.traj-unlock-row:last-child { margin-bottom: 0; }

.traj-unlock-metric {
  color: var(--text-dim);
  letter-spacing: .1em;
  min-width: 52px;
  font-size: 8px;
}

.traj-unlock-cur {
  color: rgba(255,255,255,.35);
  min-width: 36px;
}

.traj-unlock-arrow {
  color: var(--text-dim);
  font-size: 10px;
}

.traj-unlock-next {
  font-weight: 700;
  min-width: 40px;
  transition: color 0.6s;
}

.traj-unlock-delta {
  font-size: 8px;
  font-weight: 700;
  margin-left: auto;
  transition: color 0.6s;
}

/* ── VP gap bar ── */
.traj-vp-gap {
  margin-bottom: 0;
}

.traj-vp-gap-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  margin-bottom: 5px;
}

.traj-vp-gap-bar {
  height: 6px;
  background: var(--deep);
  border: 1px solid var(--border-dim);
  position: relative;
  overflow: visible;
}

.traj-vp-gap-fill {
  height: 100%;
  min-width: 2px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.traj-vp-gap-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: #fff;
  transform: translateX(-50%);
  opacity: .5;
  transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Today VP display ── */
.hud-today-vp {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--gold);
  letter-spacing: .1em;
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   ACTIVITY / MISSION FEED
═══════════════════════════════════════════════════════════════ */

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}

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

.feed-icon {
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
  width: 14px;
  text-align: center;
  color: var(--text-dim);
}

.feed-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feed-text {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.feed-meta {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: .06em;
}

.feed-ago {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: .1em;
}

.feed-item--levelup .feed-text {
  color: var(--text-primary);
  font-weight: 600;
}

.feed-item--levelup .feed-icon {
  color: #ffcc44;
  text-shadow: 0 0 8px rgba(240,160,32,.5);
}

.feed-item--phase .feed-text {
  color: rgba(255,255,255,.65);
}

/* ═══════════════════════════════════════════════════════════════
   GAMIFICATION — TOASTS, FLOATS, FLASHES
═══════════════════════════════════════════════════════════════ */

/* ── VP Float ── */
.vp-float {
  position: fixed;
  z-index: 8000;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #ffcc44;
  text-shadow: 0 0 12px rgba(240,160,32,.7);
  pointer-events: none;
  animation: vpFloat 1.2s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes vpFloat {
  0%   { opacity: 1;   transform: translateY(0)    scale(1);    }
  30%  { opacity: 1;   transform: translateY(-8px)  scale(1.15); }
  100% { opacity: 0;   transform: translateY(-36px) scale(0.9);  }
}

/* ── Level-Up Screen Flash ── */
.levelup-flash {
  position: fixed;
  inset: 0;
  z-index: 7900;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, var(--lc) 0%, transparent 65%);
  animation: levelFlash 0.9s ease forwards;
}

@keyframes levelFlash {
  0%   { opacity: 0; }
  15%  { opacity: 0.35; }
  100% { opacity: 0; }
}

/* ── Game Toasts (shared base) ── */
.game-toast {
  position: fixed;
  right: 24px;
  z-index: 8500;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--tc, #ffcc44);
  box-shadow: 0 0 40px rgba(0,0,0,.7), 0 0 20px color-mix(in srgb, var(--tc, #ffcc44) 20%, transparent);
  min-width: 280px;
  max-width: 340px;
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  opacity: 0;
}

/* Stack multiple toasts */
.game-toast:nth-of-type(1) { bottom: 24px; }
.game-toast:nth-of-type(2) { bottom: 110px; }
.game-toast:nth-of-type(3) { bottom: 196px; }

.game-toast--in  { transform: translateX(0); opacity: 1; }
.game-toast--out { transform: translateX(120%); opacity: 0; }

/* Phase toast layout */
.game-toast--phase {
  align-items: flex-start;
}

.game-toast__icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  animation: toastIconPulse 1s ease-in-out infinite;
}

@keyframes toastIconPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

.game-toast__body {
  flex: 1;
  min-width: 0;
}

.game-toast__eyebrow {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .3em;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.game-toast__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.game-toast__sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
}

.game-toast__next {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.game-toast__next-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .2em;
  color: var(--text-dim);
}

.game-toast__next-phase {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}

/* Level-up toast — centered, taller */
.game-toast--levelup {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 20px 16px;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%) scale(0.8);
  min-width: 300px;
  max-width: 380px;
}

.game-toast--levelup.game-toast--in {
  transform: translate(50%, 50%) scale(1);
  opacity: 1;
}

.game-toast--levelup.game-toast--out {
  transform: translate(50%, 50%) scale(0.9);
  opacity: 0;
}

.game-toast__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 4px;
  line-height: 1;
}

.game-toast__close:hover { color: var(--danger); }

.game-toast__levelup-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .4em;
  color: var(--text-dim);
  padding: 3px 10px;
  border: 1px solid var(--tc, #ffcc44);
}

.game-toast__levelup-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}

.game-toast__levelup-vp {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
}

.game-toast__levelup-metrics {
  display: flex;
  gap: 0;
  border: 1px solid rgba(255,255,255,.08);
  width: 100%;
  margin-top: 4px;
}

.game-toast__lm {
  flex: 1;
  padding: 8px 6px;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

.game-toast__lm:last-child { border-right: none; }

.game-toast__lm-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.game-toast__lm-lbl {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   SCAN FLOW — Left panel diagnostic system
═══════════════════════════════════════════════════════════════ */

.scan-step { display: flex; flex-direction: column; height: 100%; }

/* ── Step 1: Input ── */
.scan-input-block {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border-dim);
}

.scan-input-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .25em;
  color: var(--text-label);
  margin-bottom: 10px;
}

.scan-input-wrap {
  display: flex;
  gap: 0;
  margin-bottom: 8px;
}

.scan-url-input {
  flex: 1;
  background: var(--deep);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.2s;
  letter-spacing: .03em;
}
.scan-url-input::placeholder { color: var(--text-dim); }
.scan-url-input:focus { border-color: rgba(77,166,255,.5); }

.scan-go-btn {
  background: rgba(77,166,255,.15);
  border: 1px solid rgba(77,166,255,.35);
  color: rgba(77,166,255,.9);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .15em;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.scan-go-btn:hover {
  background: rgba(77,166,255,.25);
  border-color: rgba(77,166,255,.7);
  color: rgba(77,166,255,1);
}

.scan-input-hint {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: .06em;
  line-height: 1.5;
}

.scan-examples {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-dim);
}

.scan-examples-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .2em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.scan-example-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(77,166,255,.06);
  color: rgba(77,166,255,.45);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.15s;
}
.scan-example-btn:hover { color: rgba(77,166,255,.85); }
.scan-example-btn:last-child { border-bottom: none; }

/* ── Step 2: Scanning ── */
.scan-progress-block {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border-dim);
}

.scan-progress-bar-wrap {
  height: 3px;
  background: var(--deep);
  border: 1px solid var(--border-dim);
  margin-bottom: 10px;
  overflow: hidden;
}

.scan-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(77,166,255,.5), rgba(77,166,255,1));
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(77,166,255,.6);
}

.scan-status-msg {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(77,166,255,.7);
}

.scan-checklist {
  flex: 1;
  padding: 10px 18px;
  overflow-y: auto;
  scrollbar-width: none;
}
.scan-checklist::-webkit-scrollbar { display: none; }

.scan-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}

.scan-check-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.scan-check-dot--running {
  background: rgba(77,166,255,.8);
  box-shadow: 0 0 6px rgba(77,166,255,.6);
  animation: scanPulse 0.8s ease-in-out infinite;
}
.scan-check-dot--done {
  background: rgba(0,200,100,.6);
}
@keyframes scanPulse {
  0%,100% { opacity:1; } 50% { opacity:.3; }
}

.scan-check-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--text-secondary);
}

/* ── Step 3: Report ── */
.scan-report-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

.scan-entity-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(77,166,255,.9);
  padding: 2px 8px;
  border: 1px solid rgba(77,166,255,.3);
  background: rgba(77,166,255,.06);
  margin-right: 6px;
}
.scan-entity-conf {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .15em;
  color: var(--text-dim);
}

.scan-report-target {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-primary);
  margin: 8px 0 6px;
}

.scan-summary-stat {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
}
.scan-summary-val { font-weight: 700; color: var(--text-primary); }
.scan-summary-val--good { color: #00cc66; }
.scan-summary-val--warn { color: rgba(255,140,0,.9); }
.scan-summary-sep { color: var(--text-dim); margin: 0 5px; }

.scan-report-narrative {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.scan-narrathive-opening {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 6px;
}
.scan-narrathive-urgency {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: rgba(77,166,255,.7);
  line-height: 1.4;
  padding-left: 10px;
  border-left: 2px solid rgba(77,166,255,.3);
}

/* Report scrollable body */
#scan-step-report {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.scan-section-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .25em;
  color: var(--text-dim);
  padding: 10px 18px 6px;
}

/* Attack order */
.scan-attack-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-dim);
  position: relative;
}
.scan-attack-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
}
.scan-attack-card--critical::before { background: #ff3344; }
.scan-attack-card--high::before     { background: rgba(77,166,255,.7); }
.scan-attack-card--medium::before   { background: rgba(255,200,60,.6); }
.scan-attack-card--low::before      { background: var(--border); }

.scan-attack-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: rgba(255,255,255,.1);
  position: absolute;
  right: 14px; top: 8px;
  line-height: 1;
}
.scan-attack-headline {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  padding-right: 32px;
}
.scan-attack-because {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.scan-attack-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.scan-attack-tag {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .12em;
  padding: 2px 5px;
  border: 1px solid currentColor;
}
.scan-attack-tag--quick   { color: #00cc66; }
.scan-attack-tag--blocker { color: #ff3344; }
.scan-attack-time {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: .06em;
}
.scan-attack-impact {
  font-family: var(--font-mono);
  font-size: 8px;
  color: rgba(77,166,255,.6);
  letter-spacing: .04em;
  line-height: 1.35;
  padding-top: 2px;
  border-top: 1px solid var(--border-dim);
}

/* Surface audit */
#scan-surface-audit {
  padding: 6px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scan-audit-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scan-audit-item--skip { opacity: .2; }

.scan-audit-name {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  min-width: 78px;
  color: var(--text-secondary);
}
.scan-audit-bar {
  flex: 1;
  height: 3px;
  background: var(--border-dim);
  overflow: hidden;
}
.scan-audit-fill {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
  min-width: 1px;
}
.scan-audit-item--good .scan-audit-fill { background: #00cc66; }
.scan-audit-item--mid  .scan-audit-fill { background: rgba(77,166,255,.7); }
.scan-audit-item--bad  .scan-audit-fill { background: rgba(255,80,80,.6); }

.scan-audit-pct {
  font-family: var(--font-mono);
  font-size: 8px;
  min-width: 26px;
  text-align: right;
}
.scan-audit-item--good .scan-audit-pct { color: #00cc66; }
.scan-audit-item--mid  .scan-audit-pct { color: rgba(77,166,255,.8); }
.scan-audit-item--bad  .scan-audit-pct { color: rgba(255,80,80,.7); }

/* Report action buttons */
.scan-report-actions {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border-dim);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.scan-confirm-btn {
  background: linear-gradient(135deg, rgba(77,166,255,.2), rgba(77,166,255,.35));
  border: 1px solid rgba(77,166,255,.5);
  color: rgba(77,166,255,.95);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.scan-confirm-btn:hover {
  background: rgba(77,166,255,.3);
  box-shadow: 0 0 20px rgba(77,166,255,.25);
}

.scan-rescan-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  padding: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.scan-rescan-btn:hover { border-color: var(--danger); color: var(--danger); }

/* ── Step 4: Confirm ── */
.field-label-auto {
  color: rgba(77,166,255,.5);
  font-size: 7px;
  letter-spacing: .1em;
  margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   SITE SCORE — 4-component Google-mapped score
═══════════════════════════════════════════════════════════════ */

.intel-section--score {
  background: rgba(6,13,18,.6);
  border-bottom: 1px solid var(--border);
}

.score-source-tag {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .15em;
  color: rgba(77,166,255,.5);
  padding: 2px 6px;
  border: 1px solid rgba(77,166,255,.2);
  margin-left: auto;
}

.score-composite {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-dim);
}

.score-composite-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  transition: color 0.6s;
}

.score-composite-grade {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  opacity: .7;
}

.score-composite-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .25em;
  color: var(--text-dim);
  padding-bottom: 4px;
}

.score-no-scan {
  font-family: var(--font-mono);
  font-size: 8px;
  color: rgba(77,166,255,.4);
  letter-spacing: .1em;
  margin-left: auto;
  border: 1px solid rgba(77,166,255,.2);
  padding: 3px 8px;
}

.score-components {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 8px;
}

.score-comp {}

.score-comp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.score-comp-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--text-label);
}

.score-comp-val {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  transition: color 0.4s;
}

.score-comp-bar {
  height: 3px;
  background: var(--deep);
  border: 1px solid var(--border-dim);
  overflow: hidden;
  margin-bottom: 3px;
}

.score-comp-fill {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
  min-width: 2px;
}

.score-comp-desc {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-secondary);
  letter-spacing: .05em;
}

.score-comp-google {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: .06em;
}

.score-sources {
  border-top: 1px solid var(--border-dim);
  padding-top: 6px;
}

.score-source-note {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: .06em;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   ACTIVE SUPPRESSORS
═══════════════════════════════════════════════════════════════ */

.intel-section--suppressors {
  border-left: 3px solid transparent;
  transition: border-color 0.4s;
}

.intel-section--suppressors:has(.suppressor-item--critical) {
  border-left-color: #ff6600;
}

.intel-section--suppressors:has(.suppressor-item--blocking) {
  border-left-color: #ff3344;
}

.suppressor-count {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  color: #ff3344;
  margin-left: 4px;
}

.suppressor-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.suppressor-clear-icon {
  color: #00cc66;
  font-size: 12px;
}

.suppressor-clear-text {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(0,204,102,.8);
  letter-spacing: .06em;
}

.suppressor-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-dim);
}

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

.suppressor-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.suppressor-sev {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .15em;
  font-weight: 700;
}

.suppressor-label {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
}

.suppressor-fix {
  font-family: var(--font-mono);
  font-size: 8px;
  color: rgba(77,166,255,.7);
  letter-spacing: .05em;
  line-height: 1.4;
  padding-left: 8px;
  border-left: 2px solid rgba(77,166,255,.3);
}

/* ═══════════════════════════════════════════════════════════════
   ENTITY STATUS
═══════════════════════════════════════════════════════════════ */

.entity-header {
  margin-bottom: 10px;
}

.entity-strength-bar-wrap {
  height: 4px;
  background: var(--deep);
  border: 1px solid var(--border-dim);
  overflow: hidden;
  margin-bottom: 5px;
}

.entity-strength-fill {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
  min-width: 2px;
}

.entity-strength-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
}

.entity-strength-text {
  color: var(--text-dim);
  letter-spacing: .15em;
}

.entity-checks {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.entity-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}

.entity-check:last-child { border-bottom: none; }

.entity-check-icon {
  font-size: 10px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.entity-check--done    .entity-check-icon { color: #00cc66; }
.entity-check--urgent  .entity-check-icon { color: #ff6600; }
.entity-check--pending .entity-check-icon { color: var(--text-dim); }

.entity-check-body { flex: 1; min-width: 0; }

.entity-check-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.entity-check--done    .entity-check-label { color: rgba(255,255,255,.5); }
.entity-check--urgent  .entity-check-label { color: var(--text-primary); }
.entity-check--pending .entity-check-label { color: var(--text-secondary); }

.entity-check-desc {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: .05em;
  margin-top: 1px;
}

.entity-check-google {
  font-family: var(--font-mono);
  font-size: 7px;
  color: rgba(77,166,255,.5);
  letter-spacing: .05em;
  margin-top: 2px;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   RISK FLAGS
═══════════════════════════════════════════════════════════════ */

.risk-count {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: #ff3344;
  margin-left: 4px;
}

.risk-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px;
}

.risk-clear-icon { color: #00cc66; font-size: 11px; }

.risk-clear-text {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(0,204,102,.8);
  letter-spacing: .06em;
}

.risk-disclaimer {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: .05em;
  line-height: 1.5;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-dim);
}

.risk-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-dim);
  border-left: 2px solid;
  padding-left: 8px;
  margin-left: -8px;
}

.risk-item:last-child { border-bottom: none; }
.risk-item--violation { border-left-color: #ff3344; }
.risk-item--critical  { border-left-color: #ff6600; }
.risk-item--warning   { border-left-color: #ffcc44; }

.risk-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.risk-policy {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.risk-sev {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .15em;
  flex-shrink: 0;
  padding-top: 2px;
}

.risk-consequence {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 3px;
  line-height: 1.35;
}

.risk-recovery {
  font-family: var(--font-mono);
  font-size: 8px;
  color: rgba(77,166,255,.7);
  letter-spacing: .04em;
  line-height: 1.4;
  margin-bottom: 3px;
}

.risk-source {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════════
   SURFACE ROW — left panel node list with % and graph-matching state
═══════════════════════════════════════════════════════════════ */

.surface-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.surf-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: background 0.15s;
}

.surf-row:last-child { border-bottom: none; }
.surf-row:hover { background: rgba(255,255,255,.03); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }

/* Node dot — mirrors graph node color */
.surf-row__node {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.4s, box-shadow 0.4s;
}

.surf-row__icon {
  font-size: 9px;
  line-height: 1;
}

/* Body */
.surf-row__body {
  flex: 1;
  min-width: 0;
}

.surf-row__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3px;
}

.surf-row__name {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.surf-row__pct {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  transition: color 0.4s;
  flex-shrink: 0;
  margin-left: 4px;
}

/* Progress bar */
.surf-row__bar-wrap {
  height: 2px;
  background: rgba(26,48,64,.6);
  overflow: hidden;
  margin-bottom: 3px;
}

.surf-row__bar-fill {
  height: 100%;
  transition: width 0.6s cubic-bezier(0.22,1,0.36,1), background 0.4s;
  min-width: 1px;
}

/* Footer row */
.surf-row__footer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.surf-row__status {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .15em;
  transition: color 0.4s;
}

.surf-row__count {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: .06em;
}

.surf-row__scan {
  font-family: var(--font-mono);
  font-size: 7px;
  color: rgba(77,166,255,.5);
  letter-spacing: .06em;
  margin-left: auto;
  padding: 1px 4px;
  border: 1px solid rgba(77,166,255,.2);
}

/* Phase pip track — right side */
.surf-row__pips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.surf-row__pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 1px solid rgba(26,48,64,.6);
  background: transparent;
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.surf-row__pip--done {
  /* color set inline */
}

.surf-row__pip--next {
  /* border-color set inline — pulsing */
  animation: pipPulse 1.5s ease-in-out infinite;
}

@keyframes pipPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

/* ═══════════════════════════════════════════════════════════════
   LOSS ENGINE — gut punch card
═══════════════════════════════════════════════════════════════ */

.loss-card {
  background: linear-gradient(135deg, rgba(255,40,40,.08), rgba(255,80,40,.04));
  border: 1px solid rgba(255,60,40,.35);
  border-left: 3px solid #ff3344;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.loss-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .25em;
  color: rgba(255,80,60,.7);
  margin-bottom: 6px;
}

.loss-card__amount {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  color: #ff3344;
  line-height: 1;
  text-shadow: 0 0 30px rgba(255,51,68,.4);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}

.loss-card__gap {
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(255,80,60,.85);
  font-weight: 600;
  margin-bottom: 5px;
}

.loss-card__stat {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255,255,255,.45);
  letter-spacing: .05em;
  line-height: 1.5;
  margin-bottom: 4px;
}

.loss-card__competitor {
  font-family: var(--font-mono);
  font-size: 8px;
  color: rgba(255,80,60,.6);
  letter-spacing: .04em;
  line-height: 1.4;
  padding-top: 6px;
  border-top: 1px solid rgba(255,60,40,.15);
}

/* ═══════════════════════════════════════════════════════════════
   QUICK WIN CARD
═══════════════════════════════════════════════════════════════ */

.quick-win-card {
  background: linear-gradient(135deg, rgba(0,255,136,.06), rgba(0,200,100,.03));
  border: 1px solid rgba(0,255,136,.3);
  border-left: 3px solid #00ff88;
  padding: 12px 16px;
  margin-bottom: 10px;
}

.quick-win-card__label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .2em;
  color: rgba(0,255,136,.8);
  margin-bottom: 5px;
}

.quick-win-card__title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.35;
}

.quick-win-card__time {
  font-family: var(--font-mono);
  font-size: 8px;
  color: rgba(0,255,136,.7);
  letter-spacing: .08em;
  margin-bottom: 3px;
}

.quick-win-card__impact {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.quick-win-card__btn {
  background: rgba(0,255,136,.15);
  border: 1px solid rgba(0,255,136,.4);
  color: rgba(0,255,136,.95);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  padding: 7px 14px;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
}

.quick-win-card__btn:hover {
  background: rgba(0,255,136,.25);
  border-color: rgba(0,255,136,.7);
  box-shadow: 0 0 12px rgba(0,255,136,.2);
}

/* ═══════════════════════════════════════════════════════════════
   COMPETITOR COMPARISON CARD
═══════════════════════════════════════════════════════════════ */

.compare-card {
  background: rgba(6,13,18,.95);
  border: 1px solid rgba(77,166,255,.25);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.compare-card__label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .3em;
  color: rgba(77,166,255,.5);
  margin-bottom: 12px;
}

.compare-card__scores {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 10px;
}

.compare-col {
  flex: 1;
  text-align: center;
  padding: 8px;
  border: 1px solid rgba(77,166,255,.1);
}

.compare-col--them {
  border-color: rgba(255,51,68,.2);
}

.compare-col__who {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .2em;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.compare-col__score {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: rgba(77,166,255,.9);
  line-height: 1;
  margin-bottom: 3px;
}

.compare-col--them .compare-col__score {
  color: rgba(255,51,68,.9);
}

.compare-col__name {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compare-vs {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  color: var(--text-dim);
  padding: 0 8px;
  flex-shrink: 0;
}

.compare-card__gap {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
  margin-bottom: 8px;
  padding: 6px;
  border: 1px solid currentColor;
  opacity: .9;
}

.compare-card__revenue {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255,51,68,.8);
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.4;
  font-weight: 600;
}

.compare-card__revenue--good {
  color: rgba(0,255,136,.8);
}

.compare-card__gaps {}

.compare-card__gaps-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .2em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.compare-gap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-dim);
}

.compare-gap-surface {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--text-secondary);
}

.compare-gap-delta {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════════
   SCAN UX — competitor input + audit toggle
═══════════════════════════════════════════════════════════════ */

.scan-competitor-block {
  padding: 10px 18px 12px;
  border-bottom: 1px solid var(--border-dim);
  border-top: 1px solid rgba(77,166,255,.08);
}

.scan-comp-unlock {
  color: rgba(77,166,255,.7);
  font-size: 8px;
  letter-spacing: .15em;
  margin-right: 4px;
}

.scan-url-input--competitor {
  font-size: 11px;
  border-color: rgba(77,166,255,.2);
  color: rgba(77,166,255,.8);
}

.scan-url-input--competitor::placeholder {
  color: rgba(77,166,255,.3);
}

.scan-section-label--toggle {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: color 0.15s;
}

.scan-section-label--toggle:hover {
  color: rgba(77,166,255,.7);
}

.scan-audit-toggle-icon {
  font-size: 8px;
  color: rgba(77,166,255,.5);
}

/* ═══════════════════════════════════════════════════════════════
   MISSION DOLLAR VALUE
═══════════════════════════════════════════════════════════════ */

.mp-mission-dollars {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(0,255,136,.7);
  margin-left: 8px;
}