/* ============================================================
}
  overflow: hidden;
}
/* ============================================================
}
  overflow: hidden;
}
/* ============================================================
   FictionWriter — Priscilla  |  Neo-Futuristic Espionage UI
   ============================================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

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

:root {
  --bg:             #06090f;
  --bg-deep:        #030508;
  --bg-muted:       #0003089d;
  --bg-dim:         #010d2448;
  --surface:        rgba(10, 18, 32, 0.65);
  --surface-solid:  #0b1220;
  --glass:          rgba(12, 22, 42, 0.45);
  --text:           #d0d8e8;
  --text-bright:    #eef2f9;
  --text-muted:     #55d8f5;
  --border:         #00c3ff61;
  --border-hover:   #00c3ff59;
  --border-dim:     #00c3ff1f;
  --base:           #079bbf;
  --base-dim:       #079bbfad;
  --accent:         #00c3ff;
  --accent-dim:     rgba(0, 195, 255, 0.15);
  --accent-hover:   #00e5ff;
  --accent-glow:    rgba(0, 195, 255, 0.25);
    --accent-bright:  #00e9ff;      /* bright cyan for intense glows */
    --accent-strong:  rgba(0, 233, 255, 0.8);   /* strong glow overlay */
    --accent-fade:    rgba(0, 229, 255, 0);     /* faded glow edge */
    --overlay-light:  rgba(6, 9, 15, 0.35);    /* light background overlay */
    --overlay-dark:   rgba(6, 9, 15, 0.8);     /* dark background overlay */
  --warm:           #f5a623;
  --warn:           var(--warm);
  --warm-dim:       rgba(245, 166, 35, 0.12);
  --danger:         #ff2d55;
  --danger-hover:   #ff1744;
  --danger-dim:     rgba(255, 45, 85, 0.12);
  --col-extinguished: #700700;
  --success:        #00e676;
  --success-dim:    rgba(0, 230, 118, 0.12);
  --radius:         4px;
  --radius-lg:      8px;
  --max-w:          920px;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --grid-color:     rgba(0, 195, 255, 0.04);
  --grid-size:      40px;
  --scanline:       rgba(0, 195, 255, 0.015);

  /* --- Spacing scale --- */
  --space-xs:       .25rem;   /* 4px  */
  --space-sm:       .5rem;    /* 8px  */
  --space-md:       .75rem;   /* 12px */
  --space-lg:       1rem;     /* 16px */
  --space-xl:       1.25rem;  /* 20px */
  --space-2xl:      1.5rem;   /* 24px */
  --space-3xl:      2rem;     /* 32px */
  --space-4xl:      2.5rem;   /* 40px */
  --space-5xl:      4rem;     /* 64px — empty-state breathe room */

  /* --- Padding shorthands --- */
  --pad-input:      .6rem .85rem;
  --pad-btn:        .5rem 1.25rem;
  --pad-chip:       .3rem .75rem;
  --pad-badge:      .1rem .4rem;
  --pad-card:       2rem;
  --pad-card-sm:    1.25rem;
  --pad-section:    1.5rem;
  --pad-page:       2.5rem 1.5rem;
  --pad-nav:        .75rem 1.5rem;

  /* --- Typography scale --- */
  --text-xxs:       .6rem;    /* 9.6px  — tiny badges */
  --text-xs:        .65rem;   /* 10.4px — micro labels */
  --text-sm:        .7rem;    /* 11.2px — label caps */
  --text-base-sm:   .75rem;   /* 12px   — secondary mono */
  --text-base:      .8rem;    /* 12.8px — body small */
  --text-md:        .85rem;   /* 13.6px — body */
  --text-body:      .9rem;    /* 14.4px — primary body */
  --text-body-lg:   .95rem;   /* 15.2px — card titles */
  --text-lg:        1rem;     /* 16px   — nav brand / h3 */
  --text-xl:        1.1rem;   /* 17.6px — entity icon */
  --text-2xl:       1.25rem;  /* 20px   — page heading */
  --text-3xl:       1.5rem;   /* 24px   — auth title */
  --text-4xl:       2rem;     /* 32px   — type icon */

  /* --- Line height --- */
  --leading-tight:  1.5;
  --leading-base:   1.6;
  --leading-relaxed:1.75;
  --leading-loose:  1.8;

  /* --- Letter spacing --- */
  --tracking-tight: .02em;
  --tracking-sm:    .04em;
  --tracking-base:  .05em;
  --tracking-md:    .06em;
  --tracking-lg:    .08em;
  --tracking-xl:    .1em;
  --tracking-2xl:   .12em;
  --tracking-3xl:   .15em;
  --tracking-4xl:   .2em;

  /* --- Transition --- */
  --transition:     .2s ease;
  --transition-fast:.15s;
}

html {
  font-size: 16px;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: var(--leading-base);
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Subtle grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* Scanline effect */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--scanline) 2px,
    var(--scanline) 4px
  );
}

/* Ensure content sits above overlays */
nav, main, #app { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   Cinematic Page Transitions
   ═══════════════════════════════════════════════════════════════ */

@keyframes pageCineEnter {
  0% {
    opacity: 0;
    transform: scale(0.97) translateY(12px);
    filter: blur(6px) brightness(0.4);
  }
  40% {
    opacity: 0.6;
    filter: blur(2px) brightness(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0) brightness(1);
  }
}

@keyframes pageCineExit {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0) brightness(1);
  }
  60% {
    opacity: 0.4;
    filter: blur(3px) brightness(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(0.96) translateY(-10px);
    filter: blur(8px) brightness(0.2);
  }
}

@keyframes cineScanLine {
  0%   { top: -2px; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.page-cine-enter-active {
  animation: pageCineEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.page-cine-exit {
  animation: pageCineExit 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
  pointer-events: none;
}

/* Scan-line accent on enter */
.page-cine-enter-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: cineScanLine 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

::selection {
  background: var(--accent-dim);
  color: var(--text-bright);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* --- Utilities --- */
.hidden { display: none !important; }
.loading {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-base);
}
.loading::before { content: '> '; color: var(--accent); }

/* Reusable loader for async transitions and image fetches. */
.rh-loader {
  --rh-loader-size: 96px;
  --rh-loader-cell: 32px;
  --rh-loader-square: 28px;
  --rh-loader-duration: 10s;
  display: grid;
  place-items: center;
  gap: var(--space-md);
  width: 100%;
  min-height: 180px;
  padding: var(--space-lg);
}
.rh-loader--compact {
  --rh-loader-size: 60px;
  --rh-loader-cell: 20px;
  --rh-loader-square: 16px;
  min-height: 0;
  padding: 0;
}
.rh-loader-track {
  position: relative;
  width: var(--rh-loader-size);
  height: var(--rh-loader-size);
  transform: rotate(45deg);
}
.rh-loader-square {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--rh-loader-square);
  height: var(--rh-loader-square);
  margin: 2px;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 18px var(--accent-glow);
  animation: rhSquareOrbit var(--rh-loader-duration) cubic-bezier(.47,0,.3,1) infinite both;
  animation-delay: calc((var(--rh-loader-duration) / -8) * var(--i));
}
.rh-loader-label {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
}
@keyframes rhSquareOrbit {
  0%, 10.5% { transform: translate(0, 0); }
  12.5%, 23% { transform: translate(var(--rh-loader-cell), 0); }
  25%, 35.5% { transform: translate(calc(var(--rh-loader-cell) * 2), 0); }
  37.5%, 48% { transform: translate(calc(var(--rh-loader-cell) * 2), var(--rh-loader-cell)); }
  50%, 60.5% { transform: translate(var(--rh-loader-cell), var(--rh-loader-cell)); }
  62.5%, 73% { transform: translate(var(--rh-loader-cell), calc(var(--rh-loader-cell) * 2)); }
  75%, 85.5% { transform: translate(0, calc(var(--rh-loader-cell) * 2)); }
  87.5%, 98% { transform: translate(0, var(--rh-loader-cell)); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rh-loader-square {
    animation-duration: 0s;
    animation-iteration-count: 1;
    transform: translate(var(--rh-loader-cell), var(--rh-loader-cell));
  }
}

.error {
  color: var(--danger);
  margin-top: var(--space-sm);
  font-size: var(--text-base);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-tight);
}
.error::before { content: '⚠ '; }
.success {
  color: var(--success);
  margin-top: var(--space-sm);
  font-size: var(--text-base);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-tight);
}
.success::before { content: '✓ '; }
.required { color: var(--danger); }

/* --- Nav --- */
nav {
  background: var(--bg-deep);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 20%,
    var(--accent) 80%,
    transparent 100%
  );
  opacity: .3;
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: .75rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
}

.nav-brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
  text-shadow: 0 0 20px var(--accent-glow);
  transition: text-shadow var(--transition);
}
.nav-brand:hover {
  text-shadow: 0 0 30px var(--accent-glow), 0 0 60px rgba(0, 195, 255, 0.1);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  flex-wrap: nowrap;
}
.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
  padding: var(--space-xs) 0;
  position: relative;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--transition);
}
.nav-links a:hover {
  color: var(--text-bright);
}
.nav-links a:hover::after {
  width: 100%;
}

/* ── Nav Game Clock ──────────────────────────────────────────── */
.nav-game-clock {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: .2rem .5rem;
  background: rgba(0, 195, 255, 0.04);
  border: 1px solid rgba(0, 195, 255, 0.15);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  position: relative;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Subtle scanline sweep on the clock */
.nav-game-clock::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0; right: 0;
  height: 200%;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 195, 255, 0.03) 50%, transparent 60%);
  animation: gcScanPass 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes gcScanPass {
  0%, 100% { transform: translateY(-30%); }
  50%      { transform: translateY(30%); }
}

.gc-week {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.gc-label {
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  color: rgba(0, 195, 255, 0.4);
  text-transform: uppercase;
}
.gc-week-num {
  font-size: var(--text-base-sm);
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
  min-width: 1.2em;
  text-align: center;
}

.gc-divider {
  width: 1px;
  height: 18px;
  background: rgba(0, 195, 255, 0.18);
}

.gc-countdown-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.gc-phase {
  font-size: .45rem;
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: rgba(0, 195, 255, 0.35);
}
.gc-countdown {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-lg);
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

/* Phase-specific coloring */
.nav-game-clock.phase--collecting {
  border-color: rgba(0, 195, 255, 0.2);
}
.nav-game-clock.phase--collecting .gc-phase { color: var(--accent); }

.nav-game-clock.phase--processing {
  border-color: rgba(245, 166, 35, 0.25);
  background: rgba(245, 166, 35, 0.04);
}
.nav-game-clock.phase--processing .gc-phase { color: var(--warm); }
.nav-game-clock.phase--processing .gc-countdown { color: var(--warm); }

.nav-game-clock.phase--resolved {
  border-color: rgba(0, 230, 118, 0.2);
  background: rgba(0, 230, 118, 0.03);
}
.nav-game-clock.phase--resolved .gc-phase { color: var(--success); }

/* Status pip */
.gc-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
  animation: gcPipPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.gc-pip--urgent {
  background: var(--warm);
  box-shadow: 0 0 8px rgba(245, 166, 35, 0.5);
  animation: gcPipUrgent 0.6s ease-in-out infinite;
}
.gc-pip--expired {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(255, 45, 85, 0.5);
  animation: gcPipUrgent 0.4s ease-in-out infinite;
}

@keyframes gcPipPulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
@keyframes gcPipUrgent {
  0%, 100% { opacity: .4; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1.3); }
}

/* Self-ready state */
.nav-game-clock.gc-self-ready {
  border-color: rgba(0, 230, 118, 0.35);
  background: rgba(0, 230, 118, 0.05);
}
.nav-game-clock.gc-self-ready .gc-week-num {
  color: var(--success);
  text-shadow: 0 0 8px rgba(0, 230, 118, 0.45);
}
.nav-game-clock.gc-toggling {
  opacity: 0.6;
  pointer-events: none;
}

/* Ready panel — appears on hover */
.gc-ready-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 110px;
  background: rgba(5, 14, 20, 0.96);
  border: 1px solid rgba(0, 195, 255, 0.2);
  border-radius: var(--radius);
  padding: .45rem .55rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
  backdrop-filter: blur(6px);
}
.nav-game-clock:hover .gc-ready-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gc-ready-panel-label {
  display: block;
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  color: rgba(0, 195, 255, 0.4);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.gc-ready-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-height: 10px;
}
.gc-ready-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.gc-ready-dot--ready {
  background: var(--success);
  box-shadow: 0 0 5px rgba(0, 230, 118, 0.55);
}
.gc-ready-dot--not-ready {
  background: var(--danger);
  box-shadow: 0 0 4px rgba(255, 45, 85, 0.3);
  opacity: 0.65;
}
.gc-ready-dot:hover {
  transform: scale(1.4);
}

/* ── Ambient music player (navbar) ───────────────────────────────────────── */
.ambient-player {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ambient-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
  white-space: nowrap;
}

.ambient-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(85, 216, 245, .5);
  font-size: 11px;
  transition: color .18s, border-color .18s, box-shadow .18s;
}
.ambient-btn:hover {
  color: var(--text-bright);
  border-color: var(--accent-bright);
  box-shadow: 0 0 10px var(--accent-glow);
}
.ambient-btn[data-playing="1"] {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow), 0 0 20px var(--accent-dim);
}

.ambient-vol-wrap {
  display: flex;
  align-items: center;
  gap: .38rem;
}
.ambient-vol-wrap i {
  font-size: 13px;
  color: rgba(0, 195, 255, .32);
  width: 14px;
  text-align: center;
  transition: color .18s;
}
.ambient-player:hover .ambient-vol-wrap i {
  color: rgba(0, 195, 255, .55);
}

/* Range slider — WebKit */
.ambient-vol {
  -webkit-appearance: none;
  appearance: none;
  width: 76px;
  height: 3px;
  border-radius: 2px;
  background: rgba(0, 195, 255, .14);
  outline: none;
  cursor: pointer;
}
.ambient-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0, 195, 255, .65);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.ambient-vol::-webkit-slider-thumb:hover {
  transform: scale(1.35);
  box-shadow: 0 0 12px rgba(0, 195, 255, .9);
}
/* Range slider — Firefox */
.ambient-vol::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(0, 195, 255, .65);
  cursor: pointer;
}
.ambient-vol::-moz-range-track {
  background: rgba(0, 195, 255, .14);
  height: 3px;
  border-radius: 2px;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: var(--pad-btn);
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: var(--tracking-md);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: -1;
}
.btn:hover {
  color: var(--bg-deep);
  border-color: var(--accent-hover);
  box-shadow: 0 0 20px var(--accent-glow), inset 0 0 20px var(--accent-dim);
}
.btn:hover::before { opacity: 1; }
.btn:disabled {
  opacity: .3;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled::before { display: none; }

.btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger::before { background: var(--danger); }
.btn-danger:hover {
  color: #fff;
  border-color: var(--danger-hover);
  box-shadow: 0 0 20px var(--danger-dim);
}

.btn-text {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-sm);
  padding: 0;
  position: relative;
}
.btn-text::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--transition);
}
.btn-text:hover { text-decoration: none; color: var(--accent-hover); }
.btn-text:hover::after { width: 100%; }

#btn-logout {
  color: var(--danger);
}
#btn-logout:hover {
  color: #fff;
}


/* --- Pages --- */
.page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--pad-page);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3xl);
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.page-header h2 {
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
  color: var(--text-bright);
}

/* Horizontal rule accent on headers */
.page-header::after {
  content: '';
  position: absolute;
  /* Decorative glow is handled by border-bottom */
}

.page-media-feed h3,
.page-story h3 {
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--accent);
}

/* --- Card (base glass panel) --- */
.card {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-card);
  position: relative;
}

/* Corner accents on cards */
.card::before,
.card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--accent);
  border-style: solid;
  opacity: .4;
}
.card::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}
.card::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

/* ─────────────────────────────────────────────────────────────
   Auth — Cinematic Secure Uplink
   ───────────────────────────────────────────────────────────── */

.page-auth {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

/* -- Character rain canvas -- */
.auth-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;  /* receives mousemove for interaction particle */
  z-index: 0;
}

/* -- Scanlines + sweep -- */
.auth-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.07) 3px,
    rgba(0, 0, 0, 0.07) 4px
  );
}
.auth-scanlines::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 140px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 195, 255, 0.028) 50%,
    transparent
  );
  animation: auth-scan-sweep 7s linear infinite;
}
@keyframes auth-scan-sweep {
  from { top: -140px; }
  to   { top: 110%; }
}

/* -- Screen-edge corner brackets -- */
.auth-corner {
  position: fixed;
  width: 44px;
  height: 44px;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.auth-corner-tl { top: 18px; left: 18px;  border-top:    1px solid var(--accent); border-left:  1px solid var(--accent); transform: translate(-6px, -6px); }
.auth-corner-tr { top: 18px; right: 18px; border-top:    1px solid var(--accent); border-right: 1px solid var(--accent); transform: translate(6px, -6px); }
.auth-corner-bl { bottom: 18px; left: 18px;  border-bottom: 1px solid var(--accent); border-left:  1px solid var(--accent); transform: translate(-6px, 6px); }
.auth-corner-br { bottom: 18px; right: 18px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: translate(6px, 6px); }
.auth-corner.visible { opacity: 0.7; transform: translate(0, 0); }
.auth-corner-tr { transition-delay: 0.08s; }
.auth-corner-bl { transition-delay: 0.16s; }
.auth-corner-br { transition-delay: 0.24s; }

/* -- Boot sequence terminal -- */
.auth-boot {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 520px;
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  padding: 1.75rem 2rem;
  background: rgba(3, 5, 8, 0.88);
  border: 1px solid var(--border-dim);
  box-shadow: 0 0 40px rgba(0, 195, 255, 0.06), inset 0 0 30px rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.auth-boot.exiting {
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
}
.auth-boot-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border-dim);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
}
.auth-boot-node   { color: var(--accent); }
.auth-boot-sep    { color: var(--border); }
.auth-boot-status { flex: 1; color: var(--text-muted); }
.auth-boot-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: auth-pip-blink 0.7s step-end infinite;
}
@keyframes auth-pip-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.auth-boot-lines {
  min-height: 9em;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.auth-boot-line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--text);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: pre;
  line-height: 1.6;
}
.auth-boot-line.visible { opacity: 1; transform: none; }
.auth-boot-line .bl-prefix { color: var(--accent); opacity: 0.7; flex-shrink: 0; }
.auth-boot-line .bl-text   { flex: 1; }
.auth-boot-line .bl-status { margin-left: auto; padding-left: 1rem; flex-shrink: 0; }
.bl-ok     { color: var(--success); }
.bl-warn   { color: var(--warm); }
.bl-active { color: var(--accent); animation: auth-pip-blink 0.5s step-end infinite; }

/* -- Auth card -- */
.auth-card {
  position: absolute;
  width: 100%;
  max-width: 460px;
  text-align: center;
  z-index: 10;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  background: rgba(3, 5, 8, 0.92);
  border: 1px solid var(--border);
  padding: 2rem 2.25rem 1.75rem;
  box-shadow: 0 0 60px rgba(0, 195, 255, 0.07), 0 0 0 1px rgba(0, 195, 255, 0.04) inset;
  overflow: hidden;
}
.auth-card.visible { opacity: 1; transform: translateY(0); }

/* Card surface scan sweep on reveal */
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.055), transparent);
  pointer-events: none;
  z-index: 0;
}
.auth-card.scan-in::before { animation: auth-card-shine 0.9s ease forwards; }
@keyframes auth-card-shine {
  from { left: -120%; }
  to   { left: 160%; }
}

/* -- Top meta bar -- */
.auth-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.6;
}
.auth-card-meta-sep {
  flex: 1;
  height: 1px;
  background: var(--border-dim);
  margin: 0 .75rem;
}

/* -- Signal bars -- */
.auth-signal {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.auth-signal-bar {
  width: 4px;
  background: var(--accent);
  opacity: 0.2;
  border-radius: 1px;
  transition: opacity 0.25s ease;
}
.auth-signal-bar:nth-child(1) { height: 5px; }
.auth-signal-bar:nth-child(2) { height: 9px; }
.auth-signal-bar:nth-child(3) { height: 13px; }
.auth-signal-bar:nth-child(4) { height: 17px; }
.auth-signal-bar.active { opacity: 1; }
.auth-signal-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  color: var(--text-muted);
  margin-left: .4rem;
  align-self: center;
  text-transform: uppercase;
  opacity: 0.8;
}

/* -- Title -- */
.auth-title {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 300;
  color: var(--accent);
  letter-spacing: var(--tracking-4xl);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  text-shadow: 0 0 36px rgba(0, 195, 255, 0.5);
}
.auth-title.glitch { animation: auth-title-glitch 4s infinite; }
@keyframes auth-title-glitch {
  0%, 88%, 100% { text-shadow: 0 0 36px rgba(0, 195, 255, 0.5); transform: none; clip-path: none; }
  89%  { text-shadow: -3px 0 #ff0055, 3px 0 var(--accent); transform: translate(-2px, 0); clip-path: inset(15% 0 65% 0); }
  90%  { text-shadow: 3px 0 #ff0055;  transform: translate(2px, 0);  clip-path: inset(60% 0 10% 0); }
  91%  { text-shadow: 0 0 36px rgba(0, 195, 255, 0.5); transform: none; clip-path: none; }
  93%  { text-shadow: -1px 0 var(--accent); transform: translate(1px, 0); clip-path: inset(42% 0 42% 0); }
  94%  { text-shadow: 0 0 36px rgba(0, 195, 255, 0.5); transform: none; clip-path: none; }
}

.auth-subtitle {
  color: var(--text-muted);
  margin-bottom: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
}

/* -- Divider -- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 1.25rem 0;
  opacity: 0.35;
}
.auth-divider-line { flex: 1; height: 1px; background: var(--border); }
.auth-divider-hex  { color: var(--accent); font-size: .7rem; }

/* -- Form -- */
#auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input-prompt {
  position: absolute;
  left: .8rem;
  color: var(--accent);
  font-size: var(--text-xs);
  pointer-events: none;
  opacity: 0.55;
  font-family: var(--font-mono);
}
#auth-form input {
  width: 100%;
  padding: .65rem .9rem .65rem 2rem;
  background: rgba(0, 195, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
#auth-form input::placeholder {
  color: var(--text-muted);
  opacity: 0.45;
  letter-spacing: var(--tracking-base);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
#auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim), 0 0 20px rgba(0, 195, 255, 0.15);
}

/* -- Submit button -- */
.auth-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-3xl);
  font-size: var(--text-sm);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.auth-submit-btn.transmitting {
  animation: btn-pulse 0.8s ease infinite;
}
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,195,255,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(0,195,255,0); }
}
.auth-submit-arrow {
  opacity: 0.6;
  font-size: var(--text-base-sm);
  transition: transform 0.2s ease, opacity 0.2s;
}
.auth-submit-btn:hover .auth-submit-arrow { transform: translateX(3px); opacity: 1; }

/* -- Inline validation sequence -- */
.auth-validate {
  margin-top: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: left;
  border-top: 1px solid var(--border-dim);
  padding-top: var(--space-md);
}
.auth-validate-lines { display: flex; flex-direction: column; gap: .22rem; }
.auth-vline {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  line-height: 1.7;
}
.auth-vline.visible  { opacity: 1; transform: none; }
.auth-vline .vl-pre  { color: var(--accent); opacity: 0.65; flex-shrink: 0; }
.auth-vline .vl-text { flex: 1; }
.auth-vline .vl-spin { margin-left: auto; color: var(--accent); animation: auth-pip-blink 0.45s step-end infinite; }
.auth-vline .vl-ok   { margin-left: auto; color: var(--success); }
.auth-vline .vl-fail { margin-left: auto; color: var(--danger); }

/* ACCESS GRANTED / DENIED result line */
.auth-vline-result {
  margin-top: .3rem;
  padding-top: .3rem;
  border-top: 1px solid var(--border-dim);
  font-weight: 500;
  letter-spacing: var(--tracking-2xl);
}
.auth-vline-result.granted { color: var(--success); }
.auth-vline-result.denied  { color: var(--danger); }

/* -- Footer -- */
.auth-footer {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  opacity: 0.3;
}
.auth-footer-dot { opacity: 0.4; }

.auth-toggle {
  margin-top: var(--space-xl);
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────
   Induction page
   ───────────────────────────────────────────────────────────── */
.page-induction {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;   /* no nav on first visit */
  overflow: hidden;
}
.page-induction--with-nav {
  height: calc(100vh - 48px);  /* nav visible on revisit */
}
.induction-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.induction-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  opacity: 0.35;
}
.induction-placeholder-icon {
  font-size: var(--text-4xl);
  color: var(--accent);
}
.induction-placeholder-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
  color: var(--text-muted);
}
.induction-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-2xl);
  border-top: 1px solid var(--border-dim);
  flex-shrink: 0;
  gap: var(--space-lg);
  min-height: 56px;
}

/* ── Induction content layout ───────────────────────────── */
.induction-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

/* Intro block */
.ind-intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}
.ind-lead {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--text-bright);
  letter-spacing: var(--tracking-lg);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}
.ind-sublead {
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  color: var(--text-muted);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
}

/* Section */
.ind-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-dim);
}
.ind-section-hd {
  display: flex;
  align-items: baseline;
  gap: var(--space-xl);
}
.ind-section-num {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 300;
  color: var(--accent);
  opacity: 0.2;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}
.ind-section-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--text-bright);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
}
.ind-subsection-title {
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
  margin-top: var(--space-sm);
}

/* Body text */
.ind-p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text);
  line-height: var(--leading-relaxed);
}
.ind-p-dim {
  color: var(--text-muted);
  font-size: var(--text-base);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-base);
}
.ind-kw {
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  padding: .1em .45em;
  white-space: nowrap;
}

/* Entity type grid */
.ind-type-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
}
.ind-type-row {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-dim);
}
.ind-type-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ind-type-row:first-child {
  padding-top: 0;
}
.ind-type-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-badge);
  letter-spacing: var(--tracking-2xl);
  min-width: 4.5rem;
  text-align: center;
  flex-shrink: 0;
}
.ind-type-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ind-type-name {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--text-bright);
}
.ind-type-sub {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* Bullet list */
.ind-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
}
.ind-list li {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text);
  line-height: var(--leading-relaxed);
  position: relative;
}
.ind-list li::before {
  content: '—';
  position: absolute;
  left: calc(-1 * var(--space-lg));
  color: var(--accent);
  opacity: 0.5;
  font-family: var(--font-mono);
}

/* Mockup placeholder frames */
.ind-mockup {
  position: relative;
  width: 100%;
  min-height: 72px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  opacity: 0.55;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ind-mockup-lg {
  min-height: 160px;
}
.ind-mockup::after {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-3xl);
  color: var(--accent);
  text-transform: uppercase;
}

.ind-demo-fields-panel {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-lg);
  padding: var(--space-xl);
}
.ind-demo-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: 80px;
}
.ind-demo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-dim);
  flex-wrap: wrap;
}
.ind-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-2xl);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.ind-demo-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ind-demo-center-btn .ind-demo-svg {
  width: 140px;
  height: 140px;
  overflow: visible;
  filter: drop-shadow(0 0 20px rgba(0,195,255,.09));
}
.ind-demo-nm {
  display: block;
  position: relative;
  height: 240px;
  overflow: hidden;
  padding: 0;
  align-items: unset;
}
.ind-demo-nm-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ind-demo-nm-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Validity examples */
.ind-validity-examples {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.ind-validity-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  border: 1px solid var(--border-dim);
  background: var(--surface);
}
.ind-validity-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  font-weight: 500;
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  padding: var(--pad-badge);
  border-radius: var(--radius);
  flex-shrink: 0;
  min-width: 4.5rem;
  text-align: center;
}
.ind-validity-text {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--text);
  line-height: var(--leading-base);
}
.ind-validity-invalid .ind-validity-tag {
  color: var(--danger);
  background: var(--danger-dim);
  border: 1px solid rgba(255, 45, 85, 0.25);
}
.ind-validity-invalid {
  border-color: rgba(255, 45, 85, 0.15);
}
.ind-validity-invalid .ind-validity-text {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 45, 85, 0.4);
}
.ind-validity-valid .ind-validity-tag {
  color: var(--success);
  background: var(--success-dim);
  border: 1px solid rgba(0, 230, 118, 0.25);
}
.ind-validity-valid {
  border-color: rgba(0, 230, 118, 0.12);
}

/* Closing block */
.ind-closing {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-3xl) 0 var(--space-xl);
}
.ind-closing-slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4xl);
}

/* Hero enter button */
.ind-enter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--space-4xl);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--accent);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
  box-shadow: 0 0 28px rgba(0,195,255,0.08), inset 0 0 28px rgba(0,195,255,0.04);
}
.ind-enter-btn:hover {
  background: rgba(0,195,255,0.08);
  box-shadow: 0 0 48px rgba(0,195,255,0.18), inset 0 0 32px rgba(0,195,255,0.07);
  color: var(--text-bright);
}
.ind-enter-btn:hover .ind-enter-btn-arrow {
  transform: translateX(6px);
}
.ind-enter-btn-label {
  flex: 1;
}
.ind-enter-btn-arrow {
  display: inline-block;
  transition: transform 0.2s;
  opacity: 0.7;
}
/* Corner brackets */
.ind-enter-btn-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--accent);
  border-style: solid;
  opacity: 0.6;
}
.ind-enter-btn-corner-tl { top: -1px; left: -1px;  border-width: 2px 0 0 2px; }
.ind-enter-btn-corner-tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.ind-enter-btn-corner-bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.ind-enter-btn-corner-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.ind-closing p {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--text-muted);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
  line-height: var(--leading-tight);
}
.ind-closing-tag {
  font-size: var(--text-sm) !important;
  color: var(--accent) !important;
  opacity: 0.5;
  letter-spacing: var(--tracking-4xl) !important;
  margin-top: var(--space-xl);
}

/* ── Two-column section layout ───────────────────────────── */
.ind-section-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl) var(--space-4xl);
  align-items: start;
}
.ind-section-body--3col {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1060px) {
  .ind-section-body--3col { grid-template-columns: 1fr 1fr; }
}
.ind-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-width: 0;
}
@media (max-width: 820px) {
  .ind-section-body { grid-template-columns: 1fr; }
}
.ind-slide--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Carousel ───────────────────────────────────────────── */
.ind-progress-bar {
  height: 2px;
  background: var(--border-dim);
  flex-shrink: 0;
}
.ind-progress-fill {
  height: 100%;
  background: var(--accent);
  opacity: 0.65;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.ind-chapter-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-xs) var(--space-lg);
  min-height: 2rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-dim);
}
.ind-chapter-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  opacity: 0.5;
  letter-spacing: var(--tracking-3xl);
}
.ind-chapter-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
}
.ind-slides {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.ind-slide {
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.ind-closing-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Nav dots & buttons */
.ind-nav-prev,
.ind-nav-next {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  transition: color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.ind-nav-prev {
  color: var(--text-muted);
  min-width: 80px;
}
.ind-nav-prev:hover { color: var(--text); }
.ind-nav-prev--hidden { visibility: hidden; pointer-events: none; }
.ind-nav-next {
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-xl);
  min-width: 80px;
  text-align: center;
}
.ind-nav-next:hover {
  background: rgba(0,195,255,0.15);
  border-color: var(--accent);
}
.ind-nav-next:disabled { opacity: 0.4; cursor: not-allowed; }
.ind-nav-dots {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.ind-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.45;
  transition: background 0.25s, transform 0.25s, opacity 0.25s;
}
.ind-nav-dot:hover { opacity: 0.75; }
.ind-nav-dot.active {
  background: var(--accent);
  transform: scale(1.5);
  opacity: 1;
}


/* existing .subtitle still used elsewhere */
.subtitle {
  color: var(--text-muted);
  margin-bottom: var(--space-3xl);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
}

/* --- Characters grid --- */
.characters-grid,
.entities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.character-card,
.entity-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card-sm);
  cursor: pointer;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}

.entity-card-art {
  position: relative;
  aspect-ratio: 1 / 1;
  width: calc(100% + (var(--pad-card-sm) * 2));
  margin: calc(var(--pad-card-sm) * -1) calc(var(--pad-card-sm) * -1) var(--space-md);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 20% 20%, rgba(0,195,255,.22), transparent 45%),
    linear-gradient(160deg, rgba(7,14,22,.98), rgba(16,24,34,.9));
}
.entity-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.entity-card-art-img {
  opacity: 0;
  transition: opacity .24s ease;
}
.entity-card-art-img[src] {
  opacity: 1;
}
.entity-card-art-placeholder {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 3rem;
  text-shadow: 0 0 18px var(--accent-glow);
}

/* Top edge glow line */
.character-card::before,
.entity-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}

.character-card:hover,
.entity-card:hover {
  border-color: var(--border-hover);
  background: var(--surface-solid);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 30px var(--accent-glow),
    inset 0 1px 0 var(--accent-dim);
  transform: translateY(-2px);
}
.character-card:hover::before,
.entity-card:hover::before { opacity: 1; }

.entity-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.entity-icon {
  font-size: var(--text-xl);
}
.entity-type-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
  color: var(--text-muted);
}
.vis-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
  color: var(--success);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  padding: var(--pad-badge);
  opacity: .7;
}

.character-card h3,
.entity-card h3 {
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--text-bright);
  margin-bottom: var(--space-xs);
  letter-spacing: var(--tracking-tight);
}
.character-card p,
.entity-card p {
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Filter bar & chips --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}
.filter-chip {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-chip);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-md);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-chip:hover {
  border-color: var(--border-hover);
  color: var(--text-bright);
}
.filter-chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* --- Type picker grid --- */
.picker-subtitle {
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  color: var(--text-muted);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
  margin-bottom: var(--space-2xl);
}
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-lg);
}
.type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-section) var(--space-lg);
  cursor: pointer;
  transition: all .25s ease;
}
.type-card:hover {
  border-color: var(--accent);
  background: var(--surface-solid);
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-2px);
}
.type-icon {
  font-size: var(--text-4xl);
}
.type-label {
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
  color: var(--text-bright);
}

/* --- Step nav (multi-step editor) --- */
.step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}
.step-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-md);
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.step-btn:hover {
  border-color: var(--border-hover);
  color: var(--text-bright);
}
.step-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Editor sections --- */
.editor-core {
  margin-bottom: var(--space-2xl);
}
.entity-profile-shell {
  position: relative;
  min-height: clamp(220px, 36vh, 256px);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(0,195,255,.18), transparent 45%),
    linear-gradient(180deg, rgba(9,16,24,.96), rgba(16,24,34,.9));
}
.entity-profile-shell.is-empty::before {
  content: 'IMAGE PENDING';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(85,216,245,.58);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
}
.entity-profile-shell.is-generating::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 195, 255, 0.45);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--accent-dim), inset 0 0 14px rgba(0, 195, 255, 0.08);
  pointer-events: none;
  z-index: 3;
}
.entity-profile-shell.is-generating::after {
  --snake-dot-size: 12px;
  --snake-glow-soft: rgba(0, 233, 255, 0.46);
  --snake-glow-strong: rgba(0, 233, 255, 0.82);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--snake-dot-size);
  height: var(--snake-dot-size);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 35% 35%, rgba(235, 255, 255, 0.98) 0 20%, rgba(130, 248, 255, 0.96) 28%, rgba(0, 233, 255, 0.82) 52%, rgba(0, 233, 255, 0.02) 76%);
  box-shadow:
    0 0 4px rgba(235, 255, 255, 0.85),
    0 0 12px var(--snake-glow-strong),
    0 0 26px var(--snake-glow-soft),
    0 0 44px rgba(0, 233, 255, 0.34);
  filter: saturate(1.15);
  pointer-events: none;
  z-index: 4;
  animation: perimeter-snake 1.9s linear infinite;
}
@keyframes perimeter-snake {
  0% {
    top: 0;
    left: 0;
    opacity: .85;
  }
  24.999% {
    top: 0;
    left: 100%;
    opacity: 1;
  }
  25% {
    top: 0;
    left: 100%;
  }
  49.999% {
    top: 100%;
    left: 100%;
  }
  50% {
    top: 100%;
    left: 100%;
  }
  74.999% {
    top: 100%;
    left: 0;
    opacity: 1;
  }
  75% {
    top: 100%;
    left: 0;
  }
  100% {
    top: 0;
    left: 0;
    opacity: .85;
  }
}
.entity-profile-image {
  display: block;
  width: 100%;
  max-height: 256px;
  object-fit: cover;
  opacity: 0;
  transition: opacity .24s ease;
}
.entity-profile-image[src] {
  opacity: 1;
}
.entity-profile-shell.is-generating .entity-profile-image[src] {
  opacity: .35;
  filter: saturate(.6) brightness(.82);
}
.core-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.core-fields label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: var(--text-muted);
}
.core-fields input,
.core-fields textarea,
.core-fields select {
  padding: var(--pad-input);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.core-fields input:focus,
.core-fields textarea:focus,
.core-fields select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim), 0 0 15px var(--accent-glow);
}

.editor-sections {
  margin-bottom: var(--space-2xl);
}
.editor-section {
  padding: var(--pad-section);
  margin-bottom: var(--space-lg);
}

.field-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.label-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: var(--text-muted);
}
.field-label input,
.field-label textarea,
.field-label select,
.field-select {
  padding: var(--pad-input);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  outline: none;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.field-label input:focus,
.field-label textarea:focus,
.field-label select:focus,
.field-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim), 0 0 15px var(--accent-glow);
}

.editor-actions {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

/* --- Tag input --- */
.tag-input-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--pad-badge);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
}
.tag-remove {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: var(--text-md);
  line-height: 1;
  padding: 0;
  opacity: .6;
  transition: opacity var(--transition-fast);
}
.tag-remove:hover { opacity: 1; }
.tag-text-input {
  padding: var(--space-xs) var(--space-md);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tag-text-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* --- Entity reference inputs --- */
.entity-ref-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
}
.entity-ref-name {
  color: var(--text-bright);
  flex: 1;
}
.entity-ref-remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: var(--text-lg);
  opacity: .5;
  transition: opacity var(--transition-fast);
  padding: 0 var(--space-xs);
}
.entity-ref-remove:hover { opacity: 1; }

.entity-ref-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.entity-ref-controls select {
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--transition);
  flex: 1;
  min-width: 140px;
}
.entity-ref-controls select:focus {
  border-color: var(--accent);
}

/* --- Header actions --- */
.header-actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-5xl) var(--space-lg);
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-base);
}

/* --- Editor form --- */
.editor-form {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.editor-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: var(--text-muted);
}
.editor-form input,
.editor-form textarea {
  padding: var(--pad-input);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-base);
  outline: none;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.editor-form input:focus,
.editor-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim), 0 0 15px var(--accent-glow);
}
.editor-form input::placeholder,
.editor-form textarea::placeholder {
  color: var(--text-muted);
  font-size: var(--text-md);
}

.form-actions {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   Full-Screen Broadcast Room — Media Feed
   ═══════════════════════════════════════════════════════════════ */

/* ── Page-scoped design tokens ───────────────────── */
.page-media-feed {
  --mf-pad:               1.5rem;
  --mf-pad-card:          1.5rem;
  --mf-sidebar-w:         280px;
  /* override .page constraints — full screen */
  max-width: none;
  margin: 0;
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* ── Wire news ticker ────────────────────────────── */
.mf-ticker-strip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 2rem;
  border-bottom: 1px solid var(--border-dim);
  background: rgba(0, 195, 255, .02);
  overflow: hidden;
  position: relative;
}
/* Hard edge fade masks on left/right */
.mf-ticker-strip::before,
.mf-ticker-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 3rem;
  z-index: 2;
  pointer-events: none;
}
.mf-ticker-strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.mf-ticker-strip::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), transparent);
}

.mf-ticker-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-4xl);
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 .75rem;
  border-right: 1px solid var(--border-dim);
  height: 100%;
  display: flex;
  align-items: center;
  background: rgba(0, 195, 255, .04);
  z-index: 3;
  position: relative;
}

.mf-ticker-track {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

.mf-ticker-inner {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: mfTickerScroll var(--mf-ticker-dur, 30s) linear infinite;
}
@keyframes mfTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mf-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0 var(--space-2xl);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-sm);
  color: var(--text);
}
.mf-ticker-cat {
  font-size: var(--text-xxs);
  opacity: .7;
}
/* ticker category colours are set inline via JS */
.mf-ticker-source {
  color: var(--accent);
  opacity: .5;
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
}
.mf-ticker-title {
  color: var(--text-bright);
}
.mf-ticker-dot {
  color: var(--accent);
  opacity: .25;
}

/* ── Category filter strip ──────────────────────── */
.mf-filter-strip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: .4rem 1rem;
  border-bottom: 1px solid var(--border-dim);
  background: rgba(0, 0, 0, .25);
  overflow-x: auto;
  scrollbar-width: none;
}
.mf-filter-strip::-webkit-scrollbar { display: none; }

.mf-filter-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  padding: .25rem .6rem;
  border: 1px solid rgba(0, 195, 255, .12);
  border-radius: var(--radius);
  background: none;
  color: rgba(0, 195, 255, .4);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}
.mf-filter-chip:hover {
  border-color: rgba(0, 195, 255, .35);
  color: var(--accent);
  background: rgba(0, 195, 255, .04);
}
.mf-filter-chip--active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 195, 255, .08);
  box-shadow: 0 0 8px rgba(0, 195, 255, .1);
}
.mf-filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* filter dot colours are set inline via JS */
.mf-filter-count {
  opacity: .5;
  font-size: var(--text-xxs);
}

/* ── Body: sidebar + main column ────────────────── */
.mf-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Left sidebar (world state + week nav) ───────── */
.mf-sidebar {
  width: var(--mf-sidebar-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-dim);
  overflow: hidden;
  background: var(--bg);
  opacity: 0;
  animation: rhFadeUp .35s ease forwards .05s;
}

.mf-sidebar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.mf-sidebar-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-4xl);
  text-transform: uppercase;
  color: rgba(0, 195, 255, .35);
}

/* ── World-state panel ───────────────────────────── */
.mf-world-section {
  flex-shrink: 0;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--border-dim);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: rhFadeUp .4s ease forwards .1s;
}
.mf-world-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 195, 255, .04) 0%, transparent 70%);
  pointer-events: none;
}
/* Animated scanline accent at bottom */
.mf-world-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  animation: mfBannerScan 3.5s ease-in-out infinite 1.5s;
}
@keyframes mfBannerScan {
  0%   { opacity: 0; transform: scaleX(0); transform-origin: left; }
  30%  { opacity: .45; transform: scaleX(1); }
  70%  { opacity: .45; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(0); transform-origin: right; }
}

.mf-world-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
}
.mf-world-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.mf-world-arc-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--accent);
  opacity: .45;
}
.mf-world-week {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  color: rgba(0, 195, 255, .4);
  padding: .1rem .45rem;
  border: 1px solid rgba(0, 195, 255, .12);
  border-radius: var(--radius);
}
.mf-world-arc {
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent-glow);
  letter-spacing: var(--tracking-md);
  text-transform: uppercase;
  line-height: var(--leading-tight);
}
.mf-world-summary {
  color: var(--text);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
}

/* ── Week tab nav (inside sidebar) ──────────────── */
.mf-week-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.mf-week-tabs::-webkit-scrollbar { display: none; }

.mf-week-tab {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  padding: .55rem .85rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0, 195, 255, .05);
  border-left: 2px solid transparent;
  color: rgba(0, 195, 255, .35);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mf-week-tab:hover {
  background: rgba(0, 195, 255, .04);
  border-left-color: rgba(0, 195, 255, .25);
  color: var(--accent);
}
.mf-week-tab--active {
  background: rgba(0, 195, 255, .06);
  border-left-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 12px rgba(0, 195, 255, .04);
}
.mf-week-count {
  font-size: var(--text-xxs);
  opacity: .4;
  background: rgba(0, 195, 255, .08);
  padding: .05rem .35rem;
  border-radius: var(--radius);
}

/* ── Main article feed column ────────────────────── */
.mf-feed-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--mf-pad);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 195, 255, .12) transparent;
  min-height: 0;
}
.mf-feed-col::-webkit-scrollbar { width: 4px; }
.mf-feed-col::-webkit-scrollbar-thumb { background: rgba(0,195,255,.15); border-radius: 2px; }

/* ── Grid layout for cards ───────────────────────── */
.mf-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-bottom: 3rem;
}
.mf-top-story { width: 100%; }
.mf-middle {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-xl);
  align-items: start;
}
.mf-main-stories {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.mf-beat-rail {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 195, 255, .1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(0, 195, 255, .02);
  position: sticky;
  top: 0;
}
.mf-beat-rail-header {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
  color: rgba(0, 195, 255, .4);
  padding: .55rem var(--space-lg);
  border-bottom: 1px solid rgba(0, 195, 255, .08);
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(0, 195, 255, .03);
}
.mf-beat-rail-item {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(0, 195, 255, .06);
  cursor: pointer;
  transition: background var(--transition);
  opacity: 0;
  animation: rhFadeUp .35s ease forwards;
}
.mf-beat-rail-item:last-child { border-bottom: none; }
.mf-beat-rail-item:hover { background: color-mix(in srgb, var(--cat-color, var(--accent)) 4%, transparent); }
.mf-beat-rail-item.mf-card--expanded { background: color-mix(in srgb, var(--cat-color, var(--accent)) 6%, transparent); }
.mf-beat-rail-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: .3rem;
}
.mf-beat-rail-lede {
  font-size: var(--text-base);
  color: rgba(208, 216, 232, .55);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .3rem;
}
.mf-beat-rail-full {
  margin-top: var(--space-sm);
  font-size: var(--text-base);
  color: var(--text);
  line-height: var(--leading-relaxed);
  white-space: pre-line;
}
.mf-beat-rail-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  color: rgba(0, 195, 255, .25);
  margin-top: .3rem;
}
.mf-flavour-zone {
  width: 100%;
  position: relative;
  padding-top: var(--space-lg);
}
.mf-flavour-zone::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, .12), transparent);
}

/* ── Category badge ──────────────────────────────── */
.mf-cat-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  padding: .1rem .45rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  /* Category colour set inline via --cat-color */
  color: var(--cat-color, var(--accent));
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 30%, transparent);
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 8%, transparent);
}

/* ── Shared card chrome ──────────────────────────── */
.mf-card {
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform .15s ease;
  opacity: 0;
  animation: rhFadeUp .4s ease forwards;
}
.mf-card:active { transform: scale(0.995); }
.mf-card--expanded { grid-column: 1 / -1; }

.mf-card-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}
.mf-source {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  /* colour set inline via JS */
  color: var(--cat-color, var(--accent));
}

.mf-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(0, 195, 255, .06);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: rgba(0, 195, 255, .3);
  flex-wrap: wrap;
}
.mf-byline {
  color: rgba(0, 195, 255, .5);
}
.mf-reading-time {
  opacity: .6;
}
.mf-timestamp {
  opacity: .4;
}
.mf-expand-hint {
  margin-left: auto;
  color: var(--accent);
  opacity: .4;
  transition: opacity var(--transition);
  display: flex;
  align-items: center;
  gap: .2rem;
}
.mf-expand-hint--dim { opacity: .25; margin-left: 0; margin-top: var(--space-sm); }
.mf-card:hover .mf-expand-hint { opacity: .8; }
.mf-card--expanded .mf-expand-hint i { transform: rotate(180deg); }

/* ── Article body (shown on expand) ──────────────── */
.mf-article-body {
  color: var(--text);
  line-height: var(--leading-loose);
  font-size: var(--text-body);
  white-space: pre-line;
}

/* ── Optional card images ────────────────────────── */
.mf-card-img-wrap {
  margin-bottom: var(--space-md);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.mf-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1;
  max-height: 320px;
}

/* ── Hero card (lead story) ──────────────────────── */
.mf-hero-card {
  background: linear-gradient(135deg, rgba(0, 195, 255, .04) 0%, rgba(0, 0, 0, .3) 100%);
  border: 1px solid rgba(0, 195, 255, .18);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.mf-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--cat-color, var(--accent));
  opacity: .4;
  transition: opacity .25s ease;
}
.mf-hero-card:hover {
  border-color: color-mix(in srgb, var(--cat-color, var(--accent)) 40%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--cat-color, var(--accent)) 8%, transparent),
              inset 0 0 60px color-mix(in srgb, var(--cat-color, var(--accent)) 2%, transparent);
}
.mf-hero-card:hover::before { opacity: .8; }

/* Lead-story pulse — colour adapts to category */
.mf-hero-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cat-color, var(--accent));
  animation: mfHeroPulse 2s ease-in-out infinite;
}
@keyframes mfHeroPulse {
  0%, 100% { opacity: .2; }
  50%      { opacity: .7; }
}

.mf-hero-inner {
  display: flex;
  flex-direction: column;
  padding: var(--mf-pad-card);
}
.mf-hero-inner--has-img {
  flex-direction: row;
  gap: var(--space-xl);
}
.mf-hero-img-wrap {
  overflow: hidden;
  position: relative;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.mf-hero-inner--has-img .mf-hero-img-wrap {
  width: 340px;
  aspect-ratio: 1;
  margin: 0;
}
.mf-hero-inner:not(.mf-hero-inner--has-img) .mf-hero-img-wrap {
  margin: calc(-1 * var(--mf-pad-card));
  margin-bottom: var(--space-lg);
  max-height: 280px;
}
.mf-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mf-hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, transparent 60%);
}
.mf-hero-content {
  display: flex;
  flex-direction: column;
}
.mf-hero-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
  text-shadow: 0 0 24px color-mix(in srgb, var(--cat-color, var(--accent)) 15%, transparent);
}
.mf-hero-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  opacity: .6;
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.mf-hero-lede {
  color: var(--text);
  line-height: var(--leading-relaxed);
  font-size: var(--text-body);
}

/* ── Feature card (investigative) ────────────────── */
.mf-feature-card {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 22%, transparent);
  border-radius: var(--radius-lg);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.mf-feature-inner {
  display: flex;
  flex-direction: column;
  padding: var(--mf-pad-card);
}
.mf-feature-inner--has-img {
  flex-direction: row;
  gap: var(--space-xl);
  padding: 0;
}
.mf-feature-img-wrap {
  width: 280px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.mf-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 1;
}
.mf-feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--mf-pad-card);
}
.mf-feature-inner:not(.mf-feature-inner--has-img) .mf-feature-content {
  padding: 0;
}
.mf-feature-card::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 35%;
  background: var(--cat-color, var(--accent));
  border-radius: 2px;
  opacity: .6;
  transition: height .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.mf-feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color, var(--accent)) 7%, transparent) 0%, transparent 55%);
  pointer-events: none;
  transition: background .3s ease;
}
.mf-feature-card:hover {
  border-color: color-mix(in srgb, var(--cat-color, var(--accent)) 45%, transparent);
  box-shadow: 0 0 32px color-mix(in srgb, var(--cat-color, var(--accent)) 10%, transparent),
              inset 0 0 40px color-mix(in srgb, var(--cat-color, var(--accent)) 4%, transparent);
}
.mf-feature-card:hover::before { height: 65%; opacity: 1; box-shadow: 0 0 10px var(--cat-color, var(--accent)); }
.mf-feature-card:hover::after  { background: linear-gradient(135deg, color-mix(in srgb, var(--cat-color, var(--accent)) 12%, transparent) 0%, transparent 60%); }

.mf-feature-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
  text-shadow: 0 0 20px color-mix(in srgb, var(--cat-color, var(--accent)) 15%, transparent);
  position: relative;
  z-index: 1;
}
.mf-feature-lede {
  color: var(--text);
  line-height: var(--leading-relaxed);
  font-size: var(--text-body);
  position: relative;
  z-index: 1;
}

/* ── Op-ed card ──────────────────────────────────── */
.mf-oped-card {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 18%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--mf-pad-card);
  position: relative;
  overflow: hidden;
}
.mf-oped-card::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 35%;
  background: var(--cat-color, var(--accent));
  border-radius: 2px;
  opacity: .55;
  transition: height .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.mf-oped-card:hover {
  border-color: color-mix(in srgb, var(--cat-color, var(--accent)) 40%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--cat-color, var(--accent)) 7%, transparent);
}
.mf-oped-card:hover::before { height: 65%; opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--cat-color, var(--accent)) 60%, transparent); }

.mf-oped-pullquote {
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--cat-color, var(--accent));
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
  border-left: 2px solid color-mix(in srgb, var(--cat-color, var(--accent)) 25%, transparent);
  opacity: .85;
}
.mf-oped-title {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
}
.mf-oped-lede {
  color: var(--text);
  line-height: var(--leading-relaxed);
  font-size: var(--text-body);
}

/* ── Beat / news card ────────────────────────────── */
.mf-beat-card {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 15%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--mf-pad-card);
  position: relative;
  overflow: hidden;
}
.mf-beat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cat-color, var(--accent)), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.mf-beat-card:hover {
  border-color: color-mix(in srgb, var(--cat-color, var(--accent)) 35%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--cat-color, var(--accent)) 6%, transparent);
}
.mf-beat-card:hover::before { opacity: .5; }

.mf-beat-title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-sm);
}
.mf-beat-lede {
  color: var(--text);
  line-height: var(--leading-relaxed);
  font-size: var(--text-base);
  opacity: .85;
}

/* ── Flavour / atmosphere card ───────────────────── */
.mf-flavour-card {
  background: color-mix(in srgb, var(--cat-color, var(--accent)) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--accent)) 8%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--mf-pad-card);
  position: relative;
  overflow: hidden;
}
.mf-flavour-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, .05), transparent);
  transition: left .6s ease;
  pointer-events: none;
}
.mf-flavour-card:hover { border-color: rgba(0, 195, 255, .18); }
.mf-flavour-card:hover::before { left: 150%; }

.mf-flavour-inner {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}
.mf-flavour-glyph {
  flex-shrink: 0;
  font-size: var(--text-2xl);
  color: rgba(0, 195, 255, .2);
  margin-top: .1rem;
}
.mf-flavour-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.mf-flavour-source {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--cat-color, rgba(0, 195, 255, .45));
}
.mf-flavour-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(0, 195, 255, .55);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
}
.mf-flavour-text {
  font-style: italic;
  color: rgba(208, 216, 232, .65);
  line-height: var(--leading-loose);
  font-size: var(--text-body);
  white-space: pre-line;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 1400px) {
  .mf-middle { grid-template-columns: 1fr 290px; }
}
@media (max-width: 1200px) {
  .mf-middle { grid-template-columns: 1fr 260px; }
  .mf-hero-inner--has-img .mf-hero-img-wrap { width: 300px; }
  .mf-feature-inner--has-img .mf-feature-img-wrap { width: 240px; }
}
@media (max-width: 1000px) {
  .mf-middle { grid-template-columns: 1fr; }
  .mf-beat-rail { position: static; }
  .mf-hero-inner--has-img .mf-hero-img-wrap { width: 260px; }
}
@media (max-width: 900px) {
  .page-media-feed { --mf-sidebar-w: 240px; }
  .mf-hero-inner--has-img { flex-direction: column; }
  .mf-hero-inner--has-img .mf-hero-img-wrap { width: 100%; aspect-ratio: 16/9; }
  .mf-feature-inner--has-img { flex-direction: column; }
  .mf-feature-inner--has-img .mf-feature-img-wrap { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}
@media (max-width: 700px) {
  .page-media-feed { --mf-sidebar-w: 220px; }
  .mf-filter-strip { padding: .3rem .5rem; }
}
@media (max-width: 500px) {
  .mf-sidebar { display: none; }
  .mf-hero-title { font-size: var(--text-lg); }
}


/* ═══════════════════════════════════════════════════════════════
   Full-Screen Command Center — Dashboard
   ═══════════════════════════════════════════════════════════════ */

/* ── Dashboard page root ─────────────────────────── */
.page-dashboard {
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* ── Eyebrow bar ─────────────────────────────────── */
.dash-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem 2rem;
  background: rgba(3, 5, 8, .75);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0;
  animation: rhFadeUp .4s ease forwards .05s;
}
.dash-eyebrow::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .4;
}
.dash-eyebrow-left { display: flex; align-items: center; gap: var(--space-md); }
.dash-prefix   { color: var(--accent); opacity: .5; }
.dash-title    { color: var(--accent); font-weight: 600; }
.dash-sep      { color: var(--border); }
.dash-subtitle { color: var(--text-muted); }

.dash-eyebrow-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--success);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
}
.dash-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: rhDotPulse 2s ease-in-out infinite;
}

/* ── HUD stage ───────────────────────────────────── */
.hud-stage {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem 1.5rem;
  overflow: hidden;
  min-height: 0;
}

/* Left column — radar stacked above stats panel */
.hud-col-left {
  flex: 0 0 auto;
  width: clamp(240px, calc(50vh - 52px), 460px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

/* ── Panels ──────────────────────────────────────── */
.hud-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: rgba(5, 9, 17, .82);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: rhFadeUp .5s ease forwards;
  min-height: 0;
}
.hud-left {
  flex: 1;
  min-height: 0;
  animation-delay: .55s;
}
.hud-right {
  flex: 1;
  min-width: 0;
  animation-delay: .65s;
}

/* Top accent glow line */
.hud-left::before, .hud-right::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .35;
}

/* Vertical scan-line animation */
.hud-panel::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 50px;
  background: linear-gradient(180deg, transparent, rgba(0,195,255,.03), transparent);
  animation: hfScanDown 5s ease-in-out infinite;
  pointer-events: none;
}

.hud-panel-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-4xl);
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid rgba(0,195,255,.12);
  flex-shrink: 0;
}
.hud-panel-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hud-panel-label-row em { font-style: normal; color: var(--text-bright); }
.hud-panel-count {
  color: var(--text-muted);
  letter-spacing: var(--tracking-sm);
  font-size: var(--text-xxs);
}

/* View toggle tabs (network map / analytics) */
.hud-view-tabs {
  display: flex;
  gap: 0;
}
.hud-view-tab {
  background: none;
  border: 1px solid rgba(0,195,255,.15);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-lg);
  padding: 3px 10px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.hud-view-tab:first-child { border-radius: 3px 0 0 3px; }
.hud-view-tab:last-child  { border-radius: 0 3px 3px 0; border-left: none; }
.hud-view-tab:hover { color: var(--text-bright); border-color: rgba(0,195,255,.3); }
.hud-view-tab--active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0,195,255,.08);
}
.hud-view-tab--active + .hud-view-tab { border-left: none; }
/* ENTITY tab: dimmed until an entity is loaded, active when in entity view */
.hud-view-tab--entity          { color: rgba(0,195,255,.25); border-color: rgba(0,195,255,.08); }
.hud-view-tab--entity:hover    { color: rgba(0,195,255,.55); border-color: rgba(0,195,255,.18); }
.hud-view-tab--entity.hud-view-tab--has-entity       { color: var(--text-muted); border-color: rgba(0,195,255,.15); }
.hud-view-tab--entity.hud-view-tab--has-entity:hover { color: var(--text-bright); border-color: rgba(0,195,255,.3); }
.hud-view-tab--entity.hud-view-tab--active           { color: var(--accent); border-color: var(--accent); background: rgba(0,195,255,.08); }

/* ── Profile-card two-column layout inside entity editor panel ── */
.hud-entity-editor-container .neo-editor-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.neo-editor-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 0;
}
.neo-editor-col--left {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,195,255,.15) transparent;
}
.neo-editor-col--right {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,195,255,.15) transparent;
}
.hud-entity-editor-container .entity-profile-shell {
  width: 100%;
  max-width: 256px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0,195,255,.18);
  background: rgba(0,195,255,.03);
  position: relative;
}
.hud-entity-editor-container .entity-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: screen;
  opacity: 0.8;
}
.hud-entity-editor-container .neo-step-nav { flex-shrink: 0; }
.hud-entity-editor-container .neo-sections  { flex: 1; min-height: 0; }

/* Analytics container inside hud-right — height set via flex-basis by JS */
.hud-analytics-container {  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  border-top: 1px solid var(--border-dim);
  flex: 0 0 45%;  /* fallback; JS overrides flex-basis on activate */
}

/* Resize handle between network map and analytics */
.hud-analytics-resize {
  flex-shrink: 0;
  height: 6px;
  margin: -3px 0;        /* overlap the gap between siblings */
  cursor: ns-resize;
  position: relative;
  z-index: 10;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.hud-analytics-resize::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: rgba(0, 195, 255, 0.2);
  transition: background 0.15s ease, width 0.15s ease;
}
.hud-analytics-resize:hover::after,
.hud-analytics-resize--dragging::after {
  background: rgba(0, 195, 255, 0.55);
  width: 48px;
}

/* ── Entity editor inline panel (bottom of hud-right) ─────── */
.hud-entity-editor-resize {
  flex-shrink: 0;
  height: 6px;
  margin: -3px 0;
  cursor: ns-resize;
  position: relative;
  z-index: 10;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.hud-entity-editor-resize::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: rgba(0, 195, 255, 0.2);
  transition: background 0.15s ease, width 0.15s ease;
}
.hud-entity-editor-resize:hover::after,
.hud-entity-editor-resize--dragging::after {
  background: rgba(0, 195, 255, 0.55);
  width: 48px;
}
.hud-entity-editor-container {
  flex: 0 0 50%;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 195, 255, 0.22);
  display: flex;
  flex-direction: column;
  position: relative;
}
@keyframes hudEditorIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hudEditorOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(14px); }
}
.hud-entity-editor--in  { animation: hudEditorIn  0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hud-entity-editor--out { animation: hudEditorOut 0.22s cubic-bezier(0.4, 0, 1, 1)     forwards; }

/* neo-panel inside the container: fill it, suppress modal behaviours */
.hud-entity-editor-container .neo-panel {
  width: 100%;
  flex: 1;
  min-height: 0;
  max-height: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  transform: none;
  background: rgba(4, 8, 18, 0.96);
}
/* Suppress modal entry for eyebrow / footer — they stay visible */
.hud-entity-editor-container .neo-panel-editor .neo-panel-eyebrow,
.hud-entity-editor-container .neo-panel-editor .neo-editor-footer {
  opacity: 1;
  transform: none;
  animation: none;
}
/* Type picker fills panel width; grid becomes 2-column in narrow slot */
.hud-entity-editor-container .neo-panel-picker { width: 100%; }
.hud-entity-editor-container .neo-type-grid    { grid-template-columns: repeat(2, 1fr); }

.hud-divider {
  height: 1px;
  background: rgba(0,195,255,.1);
}

/* Data rows */
.hud-rows { display: flex; flex-direction: column; gap: 5px; }
.hud-row  { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); }
.hud-key  { font-size: var(--text-xxs); letter-spacing: var(--tracking-2xl); text-transform: uppercase; color: rgba(85,216,245,.38); }
.hud-val  { font-size: var(--text-base-sm); letter-spacing: var(--tracking-sm); color: var(--text-bright); font-weight: 500; }
.hud-val.accent        { color: var(--accent); }
.hud-val.hud-val-success { color: var(--success); }
.hud-val-pulse         { color: var(--success); animation: rhValPulse 3s ease-in-out infinite; }
.hud-row-total .hud-key,
.hud-row-total .hud-val { font-size: var(--text-base); }

/* Signal bars */
.hud-bars { display: flex; flex-direction: column; gap: 5px; }
.hud-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
}
.hud-bar-lbl { font-size: var(--text-xxs); letter-spacing: var(--tracking-xl); color: rgba(85,216,245,.42); width: 24px; text-transform: uppercase; flex-shrink: 0; }
.hud-bar-pct { font-size: var(--text-xxs); color: rgba(85,216,245,.42); width: 22px; text-align: right; flex-shrink: 0; }
.hud-bar {
  flex: 1;
  height: 3px;
  background: rgba(0,195,255,.07);
  border-radius: 2px;
  overflow: hidden;
}
.hud-bar-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  border-radius: 2px;
  box-shadow: 0 0 6px var(--accent-glow);
  animation-name: hfBarIn;
  animation-duration: 1.1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: var(--bar-delay, .9s);
}
.hud-bar-warm { background: var(--warm); box-shadow: 0 0 6px rgba(245,166,35,.35); }

/* Sparkline (right panel) */
.hud-sparkline { display: flex; flex-direction: column; gap: 4px; }
.spark-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
}
.spark-lbl   { font-size: var(--text-xxs); color: rgba(85,216,245,.38); letter-spacing: var(--tracking-xl); text-transform: uppercase; width: 28px; flex-shrink: 0; }
.spark-count { font-size: var(--text-xxs); color: var(--accent); width: 14px; text-align: right; flex-shrink: 0; }
.spark-bar   { flex: 1; height: 4px; background: rgba(0,195,255,.06); border-radius: 2px; overflow: hidden; }
.spark-fill  {
  height: 100%;
  background: linear-gradient(90deg, rgba(0,195,255,.35), var(--accent));
  width: 0;
  border-radius: 2px;
  animation-name: hfBarIn;
  animation-duration: .9s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: .9s;
}

/* Scan label + sync time */
.hud-scan-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: rgba(85,216,245,.28);
}
.hud-blink-cursor::after { content: '|'; animation: rhCursorBlink .8s step-end infinite; color: var(--accent); opacity: .55; }
.hud-sync-time { font-family: var(--font-mono); font-size: var(--text-sm); color: rgba(0,195,255,.55); letter-spacing: var(--tracking-md); }
.hud-spacer { flex: 1; }

/* ── Link Matrix (edge-type filter toggles) ──────── */
.hud-link-matrix {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.hud-link-all-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: 1px solid rgba(0,195,255,.18);
  border-radius: 2px;
  color: rgba(0,195,255,.38);
  padding: 1px 6px;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  line-height: 1.6;
}
.hud-link-all-btn:hover,
.hud-link-all-btn--active {
  background: rgba(245,166,35,.08);
  border-color: rgba(245,166,35,.45);
  color: var(--warm);
}

/* ── Ownership filter buttons ────────────────────── */
.hud-owner-filter {
  display: flex;
  gap: 4px;
}
.hud-owner-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: 1px solid rgba(0,195,255,.15);
  border-radius: 2px;
  color: rgba(0,195,255,.35);
  padding: 3px 4px;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
  line-height: 1.5;
}
.hud-owner-btn:hover {
  background: rgba(0,195,255,.06);
  border-color: rgba(0,195,255,.32);
  color: var(--accent);
}
.hud-owner-btn.active {
  background: rgba(0,195,255,.1);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 6px rgba(0,195,255,.18);
}

.hud-link-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 2px;
  border-radius: 2px;
  font-family: var(--font-mono);
  transition: opacity .2s ease;
  cursor: default;
}
.hud-link-row--off {
  opacity: .3;
}

.hud-link-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--lc, var(--accent));
  box-shadow: 0 0 5px var(--lc, var(--accent));
}

.hud-link-label {
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: rgba(238,242,249,.52);
  width: 50px;
  flex-shrink: 0;
}

.hud-link-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--lc, rgba(0,195,255,.25)), transparent);
  opacity: .22;
}

.hud-link-count {
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-sm);
  color: rgba(85,216,245,.45);
  min-width: 14px;
  text-align: right;
  flex-shrink: 0;
}

.hud-link-toggle {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .09em;
  background: none;
  border: 1px solid rgba(0,195,255,.25);
  border-radius: 2px;
  color: var(--lc, var(--accent));
  padding: 1px 5px;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.6;
}
.hud-link-toggle:hover {
  background: rgba(0,195,255,.07);
  border-color: var(--lc, var(--accent));
  box-shadow: 0 0 6px color-mix(in srgb, var(--lc, var(--accent)) 35%, transparent);
}
.hud-link-toggle--off {
  border-color: rgba(0,195,255,.1);
  color: rgba(0,195,255,.22);
  background: none;
}

/* ── Extinguished-edge separator & row ───────────── */
.hud-link-sep {
  width: 100%;
  height: 1px;
  background: rgba(0,195,255,.12);
  margin: 4px 0;
}

.hud-link-row--extinguished .hud-link-dot {
  background: var(--col-extinguished);
  box-shadow: 0 0 4px var(--col-extinguished);
}

.hud-link-row--extinguished .hud-link-line {
  background: linear-gradient(90deg, var(--col-extinguished), transparent);
}

.hud-link-row--extinguished.hud-link-row--off {
  opacity: 0.45;
}

.hud-link-row--extinguished .hud-link-toggle {
  color: var(--col-extinguished);
}

.hud-link-row--extinguished.hud-link-row--off .hud-link-toggle {
  border-color: rgba(255,59,48,.15);
  color: rgba(255,59,48,.35);
  background: none;
}

/* ── Entity list (right panel) ───────────────────── */
.hud-entities-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  align-content: start;
  padding-right: 4px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,195,255,.2) transparent;
}
.hud-entities-list::-webkit-scrollbar { width: 3px; }
.hud-entities-list::-webkit-scrollbar-track { background: transparent; }
.hud-entities-list::-webkit-scrollbar-thumb { background: rgba(0,195,255,.22); border-radius: 2px; }
.hud-entities-list::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.hud-entities-list > .rh-loader {
  grid-column: 1 / -1;
  min-height: 240px;
}

.entity-art-loader {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  background: radial-gradient(circle at center, var(--overlay-light), var(--overlay-dark));
}
.entity-art-loader.rh-loader {
  z-index: 2;
}
.entity-card-art.is-loading,
.entity-profile-shell.is-loading {
  pointer-events: none;
}
.entity-profile-shell.is-loading {
  z-index: 3;
}
.entity-profile-shell.is-generating .entity-art-loader.rh-loader {
  z-index: 1;
}
.entity-profile-shell.is-generating .entity-art-loader {
  background: radial-gradient(circle at center, rgba(6, 9, 15, 0.18), rgba(6, 9, 15, 0.45));
}

/* ── Radar container ─────────────────────────────── */
.radar-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  opacity: 0;
  animation: rhWheelMount .85s cubic-bezier(.2,.8,.3,1) forwards .35s;
}

/* Corner sight-line brackets */
.radar-container::before,
.radar-container::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--accent);
  border-style: solid;
  opacity: .5;
  z-index: 2;
  pointer-events: none;
}
.radar-container::before { top: -4px; left: -4px; border-width: 2px 0 0 2px; }
.radar-container::after  { bottom: -4px; right: -4px; border-width: 0 2px 2px 0; }

.radar-corner { position: absolute; width: 22px; height: 22px; border-color: var(--accent); border-style: solid; opacity: .5; pointer-events: none; }
.radar-corner-tr { top: -4px; right: -4px; border-width: 2px 2px 0 0; }
.radar-corner-bl { bottom: -4px; left: -4px; border-width: 0 0 2px 2px; }

/* ── SVG root ────────────────────────────────────── */
.radar-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
  filter: drop-shadow(0 0 28px rgba(0,195,255,.09));
  transition: transform .12s ease-out;
}

/* ── Outer dashed rotating ring ──────────────────── */
.radar-outer-ring {
  fill: none;
  stroke: rgba(0,195,255,.18);
  stroke-width: .6;
  stroke-dasharray: 6 18;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: rhRingCCW 55s linear infinite;
}
.radar-mid-ring   { fill: none; stroke: rgba(0,195,255,.08); stroke-width: .5; }
.radar-inner-ring { fill: none; stroke: rgba(0,195,255,.14); stroke-width: .5; }
.radar-tick { stroke: rgba(0,195,255,.22); stroke-width: .6; }

/* ── Segment groups ──────────────────────────────── */
.radar-seg-group {
  cursor: pointer;
  opacity: 0;
  animation: rhSegIn .4s ease forwards;
  animation-delay: calc(.55s + var(--i, 0) * .07s);
}
.radar-segment {
  fill: rgba(8,14,26,.85);
  stroke: rgba(0,195,255,.2);
  stroke-width: .75;
  transition: fill .25s ease, stroke .25s ease, filter .25s ease;
}
.radar-seg-group:hover .radar-segment {
  fill: rgba(0,195,255,.1);
  stroke: rgba(0,195,255,.65);
  filter: drop-shadow(0 0 14px rgba(0,195,255,.38));
}
.radar-segment.active {
  fill: rgba(0,195,255,.18);
  stroke: var(--accent);
  filter: drop-shadow(0 0 20px rgba(0,195,255,.48));
}

/* ── Segment text (CSS px — scaled to match 460px container) */
.radar-icon {
  fill: rgba(85,216,245,.45);
  font-size: var(--text-body);
  font-family: var(--font-mono);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
  transition: fill .22s ease, filter .22s ease;
}
.radar-seg-group:hover .radar-icon { fill: var(--text-bright); }
.radar-icon.active-icon { fill: var(--accent); filter: drop-shadow(0 0 8px rgba(0,195,255,.7)); }

.radar-label {
  fill: rgba(85,216,245,.4);
  font-size: 12px;
  font-family: var(--font-mono);
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: .12em;
  pointer-events: none;
  user-select: none;
  transition: fill .22s ease;
}
.radar-seg-group:hover .radar-label { fill: var(--text-bright); }
.radar-label.active-label { fill: var(--accent); }

/* ── Sweep line ──────────────────────────────────── */
.radar-sweep-group {
  pointer-events: none;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: rhSweepCW 6s linear infinite;
}

/* ── Center button ───────────────────────────────── */
.radar-center-btn { cursor: pointer; }
.radar-center-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: .75;
  animation: rhCenterBreath 2.8s ease-in-out infinite;
}
.radar-center-circle {
  fill: rgba(4,8,18,.95);
  stroke: var(--accent);
  stroke-width: .75;
  transition: fill .2s ease, stroke-width .2s ease, filter .2s ease;
}
.radar-center-btn:hover .radar-center-circle {
  fill: rgba(0,195,255,.14);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 18px rgba(0,195,255,.5));
}
.radar-center-plus {
  fill: var(--accent);
  font-size: 38px;
  font-family: var(--font-mono);
  font-weight: 300;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
  transition: fill .2s ease;
}
.radar-center-btn:hover .radar-center-plus { fill: var(--accent-hover); }
.radar-center-new-text {
  fill: rgba(0,195,255,.42);
  font-size: 10px;
  font-family: var(--font-mono);
  text-anchor: middle;
  dominant-baseline: central;
  letter-spacing: .3em;
  pointer-events: none;
  user-select: none;
  transition: fill .2s ease;
}
.radar-center-btn:hover .radar-center-new-text { fill: var(--accent); }

/* ── Empty-state: center button glows green ─────── */
.radar-center-empty .radar-center-circle {
  fill: rgba(0, 230, 118, .1);
  stroke: var(--success);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 20px rgba(0, 230, 118, .55));
}
.radar-center-empty .radar-center-pulse {
  stroke: var(--success);
  animation: rhCenterBreathGreen 1.6s ease-in-out infinite;
}
.radar-center-empty .radar-center-plus {
  fill: var(--success);
  filter: drop-shadow(0 0 10px rgba(0, 230, 118, .8));
  animation: rhPlusBreath 1.6s ease-in-out infinite;
}
.radar-center-empty .radar-center-new-text {
  fill: rgba(0, 230, 118, .65);
}
/* hover overrides while empty */
.radar-center-empty.radar-center-btn:hover .radar-center-circle,
.radar-center-btn:hover .radar-center-empty .radar-center-circle {
  fill: rgba(0, 230, 118, .2);
  stroke: var(--success);
  filter: drop-shadow(0 0 28px rgba(0, 230, 118, .7));
}

@keyframes rhCenterBreathGreen {
  0%, 100% { stroke-opacity: .3; }
  50%       { stroke-opacity: .85; }
}
@keyframes rhPlusBreath {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}



/* ══════════════════════════════════════════════════════════════
   New Entity Overlay — HUD modal over dashboard
   ══════════════════════════════════════════════════════════════ */

/* ── Backdrop ────────────────────────────────────── */
.neo-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 4, 10, .82);
  backdrop-filter: blur(6px);
  animation: neoOverlayIn .22s ease forwards;
}
.neo-overlay-out {
  animation: neoOverlayOut .55s cubic-bezier(.4,0,.6,1) forwards !important;
}
@keyframes neoOverlayIn {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(6px); }
}
@keyframes neoOverlayOut {
  from { opacity: 1; backdrop-filter: blur(6px); background: rgba(2,4,10,.82); }
  to   { opacity: 0; backdrop-filter: blur(0px); background: rgba(2,4,10,0);   }
}

/* ── Main panel ──────────────────────────────────── */
.neo-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(4, 8, 18, .96);
  border: 1px solid rgba(0,195,255,.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 60px rgba(0,195,255,.12), inset 0 0 40px rgba(0,195,255,.03);
  overflow: hidden;
  will-change: transform, opacity;
  animation: neoPanelIn .52s cubic-bezier(.16,1,.3,1) forwards;
}
.neo-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .5;
}
.neo-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,195,255,.18) 0%,
    rgba(0,195,255,.07) 35%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 10;
  transform: translateY(-100%);
  animation: neoPanelScan .85s cubic-bezier(.4,0,.2,1) forwards .04s;
}
.neo-panel-exit {
  animation: neoPanelOut .18s ease forwards !important;
  pointer-events: none;
}
@keyframes neoPanelIn {
  0%   { opacity: 0; transform: scale(.87) translateY(32px); }
  55%  { opacity: 1; transform: scale(1.014) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes neoPanelScan {
  0%   { transform: translateY(-100%); opacity: 1; }
  60%  { opacity: .55; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes neoPanelOut {
  from { opacity: 1; transform: scale(1)   translateY(0); }
  to   { opacity: 0; transform: scale(.96) translateY(-8px); }
}

/* ── Panel sizes ─────────────────────────────────── */
.neo-panel-picker {
  width: min(580px, 94vw);
}
.neo-panel-editor {
  width: min(760px, 96vw);
  max-height: 92vh;
}

/* Extinguished mode: red tint, edit controls hidden */
.neo-panel-editor--extinguished {
  border-color: rgba(255,59,48,.45) !important;
  box-shadow: 0 0 0 1px rgba(255,59,48,.15) inset, 0 0 48px rgba(255,59,48,.08), 0 32px 64px rgba(0,0,0,.72) !important;
}
.neo-panel-editor--extinguished .neo-panel-eyebrow {
  border-bottom-color: rgba(255,59,48,.25);
  background: rgba(255,59,48,.05);
}
.neo-panel-editor--extinguished .neo-editor-body {
  opacity: 0.6;
  user-select: none;
}
/* Allow step nav clicks but block field interactions */
.neo-panel-editor--extinguished .neo-sections {
  pointer-events: none;
}
.neo-panel-editor--extinguished .neo-core-fields {
  pointer-events: none;
}
.neo-panel-editor--extinguished .entity-profile-shell {
  pointer-events: none;
}
/* Hide all footer buttons except delete */
.neo-panel-editor--extinguished .neo-footer-buttons > :not(#neo-delete) {
  display: none !important;
}
/* Hide all AI reroll buttons */
.neo-panel-editor--extinguished .neo-field-reroll {
  display: none !important;
}

/* Read-only mode: amber tint on border */
.neo-panel--readonly {
  border-color: rgba(245,166,35,.35) !important;
  box-shadow: 0 0 0 1px rgba(245,166,35,.12) inset, 0 32px 64px rgba(0,0,0,.72) !important;
}
.neo-panel--readonly .neo-panel-eyebrow {
  border-bottom-color: rgba(245,166,35,.2);
  background: rgba(245,166,35,.04);
}

/* Read-only notice banner */
.neo-readonly-notice {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--warm);
  background: rgba(245,166,35,.06);
  border: 1px solid rgba(245,166,35,.22);
  border-radius: 2px;
  padding: 4px 10px;
  text-align: center;
  margin-bottom: 6px;
}

.neo-panel-editor .neo-panel-eyebrow {
  opacity: 0;
  transform: translateY(20px);
  animation: neoEditorEyebrowIn .36s cubic-bezier(.16,1,.3,1) forwards .22s;
}

.neo-panel-editor .neo-editor-footer {
  opacity: 0;
  transform: translateY(-20px);
  animation: neoEditorFooterIn .36s cubic-bezier(.16,1,.3,1) forwards .22s;
}

.neo-panel-editor.neo-editor-opening .neo-editor-body {
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition:
    height .58s cubic-bezier(.16,1,.3,1),
    opacity .32s ease,
    padding-top .58s cubic-bezier(.16,1,.3,1),
    padding-bottom .58s cubic-bezier(.16,1,.3,1);
}

.neo-panel-editor.neo-editor-opening.neo-editor-expanding .neo-editor-body {
  opacity: 1;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.neo-panel-editor.neo-editor-opening .neo-editor-body > * {
  opacity: 0;
  transform: translateY(14px);
}

.neo-editor-body.neo-content-reveal > * {
  animation: neoBodyItemIn .38s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--neo-stagger, 0s);
}

/* ── Eyebrow bar ─────────────────────────────────── */
.neo-panel-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: .6rem 1.25rem;
  background: rgba(0,195,255,.04);
  border-bottom: 1px solid rgba(0,195,255,.14);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-3xl);
  text-transform: uppercase;
  flex-shrink: 0;
}
.neo-eyebrow-tag  { color: var(--accent); opacity: .55; }
.neo-eyebrow-title { flex: 1; color: var(--accent); font-weight: 600; }
.neo-close, .neo-back {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  color: rgba(85,216,245,.45);
  padding: .2rem .4rem;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
}
.neo-close:hover, .neo-back:hover {
  color: var(--text-bright);
  background: rgba(0,195,255,.08);
}

/* ── Type picker grid ────────────────────────────── */
.neo-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  padding: 1.5rem 1.25rem;
}
.neo-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem var(--space-md);
  background: rgba(0,195,255,.04);
  border: 1px solid rgba(0,195,255,.16);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  opacity: 0;
  animation: neoCardIn .35s ease forwards;
  animation-delay: calc(var(--card-i, 0) * .07s + .05s);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.neo-type-card:hover {
  background: rgba(0,195,255,.1);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(0,195,255,.2);
  transform: translateY(-2px);
}
@keyframes neoCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes neoEditorEyebrowIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes neoEditorFooterIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes neoBodyItemIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0px); }
}
.neo-type-sym   { font-size: 2rem; color: var(--accent); line-height: 1; }
.neo-type-label { font-size: var(--text-xs); color: var(--text-bright); letter-spacing: var(--tracking-2xl); }
.neo-type-value { font-size: var(--text-xxs); color: rgba(85,216,245,.35); letter-spacing: var(--tracking-xl); }

/* ── Picker footer ───────────────────────────────── */
.neo-panel-footer {
  padding: .6rem 1.25rem;
  border-top: 1px solid rgba(0,195,255,.1);
  text-align: center;
  flex-shrink: 0;
}
.neo-footer-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  color: rgba(85,216,245,.28);
  text-transform: uppercase;
}

.neo-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.ai-footer-loader.rh-loader {
  min-height: 0;
  flex: 0 0 auto;
}
.ai-footer-loader .rh-loader-track {
  width: 32px;
  height: 32px;
}
.ai-footer-loader .rh-loader-label {
  display: none;
}

/* ── Editor body ─────────────────────────────────── */
.neo-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,195,255,.2) transparent;
  min-height: 0;
}
.neo-editor-body::-webkit-scrollbar { width: 3px; }
.neo-editor-body::-webkit-scrollbar-thumb { background: rgba(0,195,255,.22); border-radius: 2px; }

/* ── Extinguished banner (entity editor overlay) ─── */
.neo-extinguished-banner {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1.25rem;
  background: rgba(255,59,48,.08);
  border-bottom: 1px solid rgba(255,59,48,.28);
  flex-shrink: 0;
}
.neo-extinguished-icon {
  font-size: .75rem;
  color: var(--col-extinguished);
  line-height: 1;
  flex-shrink: 0;
}
.neo-extinguished-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--col-extinguished);
  text-transform: uppercase;
}
.neo-extinguished-status {
  font-family: var(--font-mono);
  font-size: .60rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,59,48,.65);
  background: rgba(255,59,48,.10);
  border: 1px solid rgba(255,59,48,.25);
  border-radius: 2px;
  padding: 1px 5px;
  margin-left: auto;
}

/* ── Fields ──────────────────────────────────────── */
.neo-core-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
  min-height: 0;
}
.neo-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.neo-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.neo-field-head-inline {
  flex: 1;
}
.neo-field-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
}
.neo-field-inline label { flex-shrink: 0; }
.neo-core-fields .neo-field:first-child { grid-column: 1 / -1; }
.neo-field-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: rgba(85,216,245,.5);
}
.neo-required { color: var(--accent); }
.neo-input {
  background: rgba(0,195,255,.04);
  border: 1px solid rgba(0,195,255,.18);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: .45rem .65rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  box-sizing: border-box;
}
.neo-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(0,195,255,.18);
}
.neo-textarea { resize: vertical; min-height: 52px; }
.neo-core-fields .neo-field--summary { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.neo-core-fields .neo-field--summary .neo-textarea { flex: 1; min-height: 0; resize: none; }

/* Designation header in right column */
.neo-designation-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 195, 255, 0.15);
}
.neo-designation-input {
  flex: 1;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 195, 255, 0.25);
  border-radius: 0;
  padding: 0.2rem 0;
  color: var(--text-bright, #e8f4ff);
  outline: none;
}
.neo-designation-input::placeholder { color: rgba(0, 195, 255, 0.25); font-weight: 400; letter-spacing: 0.05em; }
.neo-designation-input:focus { border-bottom-color: var(--accent); }
.neo-designation-reroll { flex-shrink: 0; }
.neo-select {
  background: rgba(0,195,255,.04);
  border: 1px solid rgba(0,195,255,.18);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  padding: .45rem .65rem;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
  color-scheme: dark;
  flex: 1;
}
.neo-select:focus { border-color: var(--accent); }
.neo-select option {
  background: #070e1c;
  color: var(--text-bright);
}
.neo-field-reroll {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--base);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  padding: .2rem .45rem;
  text-transform: uppercase;
  transition: border-color .15s, color .15s, background .15s;
}
.neo-field-reroll:hover:not(:disabled) {
  background: rgba(0,195,255,.08);
  border-color: var(--accent);
  color: var(--accent);
}
.neo-field-reroll:disabled {
  opacity: .45;
  cursor: wait;
}

/* ── Step nav ────────────────────────────────────── */
.neo-step-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .5rem 0;
  border-top: 1px solid rgba(0,195,255,.1);
  border-bottom: 1px solid rgba(0,195,255,.1);
  flex-shrink: 0;
}
.neo-step-btn {
  background: rgba(0,195,255,.04);
  border: 1px solid rgba(0,195,255,.14);
  border-radius: var(--radius);
  color: rgba(85,216,245,.55);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  padding: .25rem .55rem;
  transition: background .15s, border-color .15s, color .15s;
}
.neo-step-btn:hover { background: rgba(0,195,255,.09); color: var(--text-bright); }
.neo-step-btn.active {
  background: rgba(0,195,255,.14);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Sections area ───────────────────────────────── */
.neo-sections {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
  min-height: 0;
}

/* Multi-section column layout */
.neo-sections-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 1.25rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.neo-section-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  min-height: 0;
}
.neo-section-col-head {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(0, 195, 255, 0.45);
  border-bottom: 1px solid rgba(0, 195, 255, 0.12);
  padding-bottom: 0.3rem;
  margin-bottom: 0.15rem;
  flex-shrink: 0;
}
/* Fields containing a textarea stretch to fill remaining column height */
.neo-section-col .neo-field:has(.neo-textarea) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.neo-section-col .neo-field:has(.neo-textarea) .neo-textarea {
  flex: 1;
  min-height: 60px;
  resize: none;
}

/* ── Tags ────────────────────────────────────────── */
.neo-tag-wrap {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.neo-tags-display { display: flex; flex-wrap: wrap; gap: .3rem; }
.neo-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: rgba(0,195,255,.1);
  border: 1px solid rgba(0,195,255,.25);
  border-radius: var(--radius);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  padding: .15rem .4rem;
}
.neo-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(85,216,245,.5);
  font-size: .8rem;
  padding: 0;
  line-height: 1;
}
.neo-tag-remove:hover { color: var(--accent); }
.neo-tag-input { margin-top: .2rem; }

.neo-tag-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  color: var(--danger, #f0c040);
}
.neo-tag-hint.hidden { display: none; }

/* ── Editor footer / actions ─────────────────────── */
.neo-editor-footer {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: var(--space-md) 1.25rem;
  border-top: 1px solid rgba(0,195,255,.14);
  background: rgba(0,195,255,.025);
  flex-shrink: 0;
}
.neo-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.neo-footer-buttons {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.neo-msg {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-md);
}
.neo-msg-error   { color: var(--danger, #f55); }
.neo-msg-success { color: var(--success); }
.neo-btn-secondary {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(0,195,255,.16);
  border-radius: var(--radius);
  color: rgba(85,216,245,.78);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-2xl);
  padding: .55rem 1rem;
  text-transform: uppercase;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.neo-btn-secondary:hover:not(:disabled) {
  background: rgba(0,195,255,.08);
  border-color: var(--accent);
  color: var(--accent);
}
.neo-btn-secondary:disabled {
  opacity: .45;
  cursor: wait;
}
.neo-btn-primary {
  background: rgba(0,195,255,.12);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  padding: .55rem 1.25rem;
  transition: background .2s, box-shadow .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.neo-btn-primary:hover:not(:disabled) {
  background: rgba(0,195,255,.22);
  box-shadow: 0 0 18px rgba(0,195,255,.3);
}
.neo-btn-primary:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 560px) {
  .neo-type-grid { grid-template-columns: repeat(2, 1fr); }
  .neo-core-fields { grid-template-columns: 1fr; }
  .neo-footer-actions { flex-direction: column; align-items: flex-start; }
  .neo-footer-buttons { width: 100%; flex-direction: column; align-items: stretch; }
  .neo-field-inline { flex-direction: column; align-items: stretch; }
}



/* ═══════════════════════════════════════════════════════════════
   Network Map
   ═══════════════════════════════════════════════════════════════ */

/* When the entities-list div hosts the network map, override the
   grid/scroll layout it normally has. */
#entities-list.nm-root {
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#entities-list.nm-root:active { cursor: grabbing; }

/* Root container — receives all child layers */
.nm-root {
  position: relative;
  overflow: hidden;
}

/* Dot-grid background canvas */
.nm-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Pan/zoom viewport — transform-origin must be 0 0 */
.nm-viewport {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  z-index: 1;
}

/* Edge canvas layer (replaces SVG) */
.nm-edge-canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* Node HTML layer */
.nm-nodes-layer {
  position: absolute;
  left: 0;
  top: 0;
}

/* ── Node ──────────────────────────────────────────  */
.nm-node {
  position: absolute;
  width: 132px;
  cursor: pointer;
  z-index: 1;
  outline: none;
  transition: opacity .22s ease, filter .22s ease;
}

.nm-node-inner {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px 7px;
  background: rgba(4, 7, 14, .92);
  border: 1px solid color-mix(in srgb, var(--tc, #00c3ff) 35%, transparent);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}

/* corner bracket accents — visible on hover */
.nm-node::before,
.nm-node::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: var(--tc, #00c3ff);
  border-style: solid;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  z-index: 4;
}
.nm-node::before { top: -2px;    left: -2px;  border-width: 1.5px 0 0 1.5px; }
.nm-node::after  { bottom: -2px; right: -2px; border-width: 0 1.5px 1.5px 0; }
.nm-node:hover::before,
.nm-node:hover::after,
.nm-node:focus-visible::before,
.nm-node:focus-visible::after,
.nm-node--hovered::before,
.nm-node--hovered::after { opacity: 0.7; }

.nm-node:hover .nm-node-inner,
.nm-node:focus-visible .nm-node-inner,
.nm-node--hovered .nm-node-inner {
  box-shadow: 0 0 16px -3px var(--tc, #00c3ff),
              inset 0 0 6px rgba(0 195 255 / .04);
  border-color: color-mix(in srgb, var(--tc, #00c3ff) 70%, transparent);
  z-index: 10;
}

/* Portrait image slot */
.nm-node-portrait {
  flex: 0 0 34px;
  width:  34px;
  height: 34px;
  border-radius: 4px;
  background: rgba(0 195 255 / .05);
  border: 1px solid rgba(0 195 255 / .12);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

.nm-node-sym {
  font-size: 15px;
  color: var(--tc, #00c3ff);
  opacity: 0.5;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity .15s;
}

.nm-node-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* When an image loads, fade the symbol behind it */
.nm-node-img[src] + .nm-node-sym,
.nm-node-img[src] ~ .nm-node-sym { opacity: 0; }

.nm-node-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nm-node-name {
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.nm-node-type-tag {
  font-family: var(--font-mono);
  font-size: .48rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc, #00c3ff);
  opacity: 0.55;
}

/* Scanline shimmer */
.nm-node-scan-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 35%,
    rgba(0 195 255 / .025) 50%,
    transparent 65%
  );
  animation: nmScanPass 4s ease-in-out infinite;
  pointer-events: none;
}

/* Active drag state */
.nm-node--dragging {
  z-index: 100 !important;
}
.nm-node--dragging .nm-node-inner {
  box-shadow: 0 12px 40px rgba(0 0 0 / .85),
              0 0 22px var(--tc, #00c3ff);
}

/* Dimmed state (filter, hover, pin, or search) */
.nm-node--dimmed {
  opacity: 0.12;
  filter: grayscale(0.8) brightness(0.5);
}
.nm-node--dimmed .nm-node-inner {
  box-shadow: none !important;
  border-color: rgba(0 195 255 / .08) !important;
}
.nm-node--dimmed::before,
.nm-node--dimmed::after { display: none; }
.nm-node--dimmed .nm-node-pin { opacity: 0.3; }

/* ── Pin button ────────────────────────────────────  */
.nm-node-pin {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: rgba(0 195 255 / .3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease;
  padding: 2px;
}
.nm-node-pin:hover {
  color: rgba(0 195 255 / .75);
}
.nm-node-pin--active {
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(0 195 255 / .5));
}

/* ── Pinned node highlight ring ────────────────────  */
.nm-node--pinned .nm-node-inner {
  border-color: color-mix(in srgb, var(--tc, #00c3ff) 80%, transparent);
  box-shadow: 0 0 18px -2px var(--tc, #00c3ff),
              0 0 4px rgba(0 195 255 / .15) inset;
}

/* ── Search match glow ─────────────────────────────  */
.nm-node--search-match .nm-node-inner {
  border-color: var(--accent);
  box-shadow: 0 0 14px -2px var(--accent),
              0 0 30px -6px rgba(0 195 255 / .25);
}
.nm-node--search-match .nm-node-name {
  color: var(--accent-bright, #00e9ff);
}

/* Foreign (other player's) node */
.nm-node--foreign {
  --tc: #f5a623;
}
.nm-node--foreign .nm-node-inner {
  border-color: rgba(245,166,35,.28);
  box-shadow: 0 0 0 1px rgba(245,166,35,.10) inset;
}

/* ── Extinguished nodes ────────────────────────────  */
.nm-node--extinguished {
  --tc: var(--col-extinguished);
  opacity: 0.72;
}
.nm-node--extinguished .nm-node-inner {
  border-color: rgba(255,59,48,.35);
  box-shadow: 0 0 0 1px rgba(255,59,48,.12) inset;
}
.nm-node--extinguished .nm-node-name {
  text-decoration: line-through;
  text-decoration-color: rgba(255,59,48,.6);
  color: rgba(255,59,48,.75);
}
.nm-node--extinguished .nm-node-sym {
  opacity: 0.4;
}
.nm-node-extinguished-badge {
  font-family: var(--font-mono);
  font-size: .40rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--col-extinguished);
  background: rgba(255,59,48,.10);
  border: 1px solid rgba(255,59,48,.30);
  border-radius: 2px;
  padding: 1px 3px;
  margin-top: 2px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Owner codename badge on foreign nodes */
.nm-node-owner {
  font-family: var(--font-mono);
  font-size: .42rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245,166,35,.6);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Level of Detail (LOD) ─────────────────────────  */
/* Reduced LOD: hide details, show compact node */
.nm-viewport[data-lod="reduced"] .nm-node-info,
.nm-viewport[data-lod="reduced"] .nm-node-scan-line,
.nm-viewport[data-lod="reduced"] .nm-node-pin {
  display: none;
}
.nm-viewport[data-lod="reduced"] .nm-node {
  width: 44px;
}
.nm-viewport[data-lod="reduced"] .nm-node-inner {
  padding: 4px;
  justify-content: center;
}
.nm-viewport[data-lod="reduced"] .nm-node-portrait {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}

/* Dots LOD: just colored dots */
.nm-viewport[data-lod="dots"] .nm-node-inner {
  padding: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border-color: var(--tc, #00c3ff);
  background: var(--tc, #00c3ff);
  opacity: 0.7;
}
.nm-viewport[data-lod="dots"] .nm-node {
  width: 18px;
}
.nm-viewport[data-lod="dots"] .nm-node-portrait,
.nm-viewport[data-lod="dots"] .nm-node-info,
.nm-viewport[data-lod="dots"] .nm-node-scan-line,
.nm-viewport[data-lod="dots"] .nm-node-pin {
  display: none;
}

/* ── Search toolbar ────────────────────────────────  */
.nm-toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  z-index: 25;
  pointer-events: none;
}
.nm-toolbar > * {
  pointer-events: auto;
}
.nm-toolbar-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(4, 7, 14, .92);
  border: 1px solid rgba(0 195 255 / .18);
  border-radius: var(--radius);
  padding: 4px 10px;
  width: 100%;
  max-width: 420px;
  transition: border-color .15s;
}
.nm-toolbar-search:focus-within {
  border-color: rgba(0 195 255 / .45);
}
.nm-toolbar-icon {
  font-size: 13px;
  color: rgba(0 195 255 / .35);
  flex-shrink: 0;
}
.nm-toolbar-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-bright);
  min-width: 0;
}
.nm-toolbar-input::placeholder {
  color: rgba(0 195 255 / .25);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.nm-toolbar-clear {
  background: none;
  border: none;
  color: rgba(0 195 255 / .4);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color .12s;
}
.nm-toolbar-clear:hover {
  color: var(--accent);
}
.nm-hidden { display: none !important; }

.nm-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 420px;
}
.nm-toolbar-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xxs, .58rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(0 195 255 / .45);
  background: rgba(4, 7, 14, .88);
  border: 1px solid rgba(0 195 255 / .16);
  border-radius: var(--radius);
  padding: .2rem .4rem;
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
  white-space: nowrap;
  line-height: 1.6;
  position: relative;
}
.nm-toolbar-btn[data-tip]::after {
  content: attr(data-tip);
  pointer-events: none;
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  padding: 0.55rem 0.7rem;
  background: var(--bg-dim);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 400;
  color: var(--accent);
  line-height: 1.55;
  letter-spacing: 0.03em;
  text-transform: none;
  white-space: normal;
  z-index: 9999;
  box-shadow: 0 4px 16px var(--accent-glow);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s, visibility .12s;
}
.nm-toolbar-btn[data-tip]:hover::after {
  opacity: 1;
  visibility: visible;
}
.nm-toolbar-btn:hover {
  color: var(--accent);
  border-color: var(--border-hover);
  background: var(--bg-muted);
}
.nm-toolbar-btn--active {
  color: var(--accent);
  border-color: var(--border-hover);
  background: var(--bg-muted);
}

/* ── HUD controls ──────────────────────────────────  */
.nm-hud {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 20;
}

.nm-hud-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: rgba(0 195 255 / .5);
  background: rgba(4, 7, 14, .88);
  border: 1px solid rgba(0 195 255 / .18);
  border-radius: var(--radius);
  padding: .22rem .46rem;
  cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
  white-space: nowrap;
  line-height: 1.6;
}
.nm-hud-btn:hover {
  color: var(--accent);
  border-color: rgba(0 195 255 / .45);
  background: rgba(0 195 255 / .06);
}

/* ── Minimap ───────────────────────────────────────  */
.nm-minimap {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 200px;
  height: 150px;
  z-index: 20;
  border: 1px solid rgba(0 195 255 / .18);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: crosshair;
  background: rgba(4, 7, 14, .85);
  transition: opacity .15s;
}
.nm-minimap:hover {
  border-color: rgba(0 195 255 / .35);
}
.nm-minimap-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Roster panel ──────────────────────────────────  */
.nm-roster {
  position: absolute;
  top: 52px;
  right: 10px;
  bottom: 80px;
  width: 240px;
  display: flex;
  flex-direction: column;
  background: rgba(4, 7, 14, .92);
  border: 1px solid rgba(0 195 255 / .18);
  border-radius: var(--radius);
  z-index: 20;
  transform: translateX(calc(100% + 14px));
  transition: transform .22s ease;
  pointer-events: none;
  overflow: hidden;
  padding: .25rem;
}
.nm-roster--open {
  transform: translateX(0);
  pointer-events: auto;
}
.nm-roster-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(0 195 255 / .1);
  flex-shrink: 0;
}
.nm-roster-title {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .12em;
  color: var(--accent);
  opacity: .6;
}
.nm-roster-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.nm-roster-filter-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(0 195 255 / .2);
  background: transparent;
  color: rgba(0 195 255 / .5);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  line-height: 1.4;
}
.nm-roster-filter-btn:hover {
  border-color: rgba(0 195 255 / .45);
  color: rgba(0 195 255 / .85);
  background: rgba(0 195 255 / .06);
}
.nm-roster-filter-btn--active {
  background: rgba(0 195 255 / .15);
  border-color: rgba(0 195 255 / .55);
  color: var(--accent);
}
.nm-roster-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
}
.nm-roster-list::-webkit-scrollbar { width: 4px; }
.nm-roster-list::-webkit-scrollbar-track { background: transparent; }
.nm-roster-list::-webkit-scrollbar-thumb {
  background: rgba(0 195 255 / .18);
  border-radius: 2px;
}
.nm-roster-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background .1s;
}
.nm-roster-row:hover {
  background: rgba(0 195 255 / .07);
}
.nm-roster-row--extinguished {
  opacity: .4;
}
.nm-roster-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tc, #00c3ff);
  box-shadow: 0 0 5px var(--tc, #00c3ff);
}
.nm-roster-name {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(220, 235, 255, .82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nm-roster-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  color: rgba(0 195 255 / .35);
  flex-shrink: 0;
}

/* Panel label hint text */
.nm-panel-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .1em;
  color: rgba(0 195 255 / .22);
  text-transform: uppercase;
  flex: 1;
  text-align: center;
}

/* ── Layout Config Panel ───────────────────────────  */
.nm-config-panel {
  position: absolute;
  top: 104px;
  left: 10px;
  width: 300px;
  max-height: calc(100% - 104px);
  display: flex;
  flex-direction: column;
  background: rgba(4, 7, 14, .96);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  z-index: 22;
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}
.nm-config-panel--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nm-config-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 7px;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.nm-config-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .14em;
  color: var(--accent);
  opacity: .75;
}
.nm-config-run-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid rgba(0 195 255 / .4);
  background: rgba(0 195 255 / .1);
  color: var(--accent);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.nm-config-run-btn:hover {
  background: rgba(0 195 255 / .2);
  border-color: rgba(0 195 255 / .65);
}
.nm-config-close-btn {
  background: none;
  border: none;
  color: rgba(0 195 255 / .35);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 5px;
  transition: color .12s;
  line-height: 1;
}
.nm-config-close-btn:hover { color: var(--accent); }
.nm-config-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nm-config-body::-webkit-scrollbar { width: 4px; }
.nm-config-body::-webkit-scrollbar-track { background: transparent; }
.nm-config-body::-webkit-scrollbar-thumb {
  background: rgba(0 195 255 / .18);
  border-radius: 2px;
}
.nm-config-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nm-config-section-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--base-dim);
  text-transform: uppercase;
}
.nm-config-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.nm-config-toggle {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .07em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid rgba(0 195 255 / .18);
  background: transparent;
  color: rgba(0 195 255 / .4);
  cursor: pointer;
  transition: background .11s, border-color .11s, color .11s;
  line-height: 1.5;
  white-space: nowrap;
}
.nm-config-toggle--edge {
  border-color: rgba(var(--tc, 0 195 255) / .2);
  color: color-mix(in srgb, var(--tc, #00c3ff) 50%, rgba(255 255 255 / .35));
}
.nm-config-toggle:hover {
  border-color: rgba(0 195 255 / .4);
  color: rgba(0 195 255 / .8);
  background: rgba(0 195 255 / .06);
}
.nm-config-toggle--on {
  background: rgba(0 195 255 / .14);
  border-color: rgba(0 195 255 / .5);
  color: var(--accent);
}
.nm-config-toggle--edge.nm-config-toggle--on {
  background: color-mix(in srgb, var(--tc, #00c3ff) 15%, transparent);
  border-color: var(--tc, #00c3ff);
  color: var(--tc, var(--accent));
}
.nm-config-toggle--invert {
  width: 100%;
  text-align: left;
  padding: 3px 9px;
}
.nm-config-select {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: rgba(4, 7, 14, .9);
  border: 1px solid rgba(0 195 255 / .22);
  border-radius: 3px;
  color: var(--accent);
  padding: 3px 6px;
  cursor: pointer;
  width: 100%;
  outline: none;
  transition: border-color .12s;
}
.nm-config-select:focus {
  border-color: rgba(0 195 255 / .5);
}
.nm-config-select option {
  background: #04070e;
}

/* Panel label hint text */
.nm-panel-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: .1em;
  color: rgba(0 195 255 / .22);
  text-transform: uppercase;
  flex: 1;
  text-align: center;
}

/* ── Animations ────────────────────────────────────  */
@keyframes nmScanPass {
  0%, 100% { transform: translateY(-120%); opacity: 0; }
  30%       { opacity: 1; }
  70%       { opacity: 1; }
  100%      { transform: translateY(220%); opacity: 0; }
}

/* ── Responsive overrides ──────────────────────────  */
@media (max-width: 800px) {
  #entities-list.nm-root { min-height: 380px; }
  .nm-minimap { width: 140px; height: 105px; }
  .nm-toolbar { flex-wrap: wrap; }
  .nm-toolbar-search { min-width: 160px; max-width: 100%; }
}

/* ── Keyframes ───────────────────────────────────── */
@keyframes rhFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rhCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes rhWheelMount {
  0%   { opacity: 0; transform: scale(.58) rotate(-24deg); }
  65%  { opacity: 1; transform: scale(1.03) rotate(2deg); }
  100% { opacity: 1; transform: scale(1)    rotate(0deg); }
}
@keyframes rhSegIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rhSweepCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rhRingCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes rhCenterBreath {
  0%, 100% { stroke-opacity: .25; }
  50%       { stroke-opacity: .72; }
}
@keyframes rhGridIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hfBarIn {
  to { width: var(--w, 80%); }
}
@keyframes rhDotPulse {
  0%, 100% { box-shadow: 0 0 6px var(--success); }
  50%       { box-shadow: 0 0 14px var(--success); }
}
@keyframes rhValPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
@keyframes hfScanDown {
  0%   { top: -50px; }
  100% { top: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   Directives Page — Full-screen three-panel layout
   ═══════════════════════════════════════════════════════════════ */

.page-directives {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  overflow: hidden;
}

/* ── Status strip (compact, full width) ──────────── */
.dir-status-strip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: .35rem 1.5rem;
  background: rgba(3, 5, 8, .6);
  border-bottom: 1px solid var(--border-dim);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  flex-shrink: 0;
}
.dir-strip-sep {
  width: 1px;
  height: 14px;
  background: rgba(0, 195, 255, 0.12);
  flex-shrink: 0;
}

.wsb-week-badge {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.wsb-phase {
  font-size: .5rem;
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  white-space: nowrap;
}
.wsb-countdown-label {
  font-size: .5rem;
  letter-spacing: var(--tracking-2xl);
  color: rgba(0, 195, 255, 0.3);
  white-space: nowrap;
}
.wsb-countdown {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-lg);
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wsb-stat {
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-lg);
  color: rgba(0, 195, 255, 0.3);
}
.wsb-stat strong {
  color: var(--accent);
  font-weight: 600;
}

/* Phase coloring */
.dir-status-strip.phase--collecting .wsb-phase { color: var(--accent); }
.dir-status-strip.phase--processing { border-color: rgba(245, 166, 35, 0.15); }
.dir-status-strip.phase--processing .wsb-phase { color: var(--warm); }
.dir-status-strip.phase--processing .wsb-countdown { color: var(--warm); }
.dir-status-strip.phase--resolved .wsb-phase { color: var(--success); }

/* ── Locked overlay ──────────────────────────────── */
.directive-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: rgba(245, 166, 35, 0.04);
  border-bottom: 1px dashed rgba(245, 166, 35, 0.25);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: rgba(245, 166, 35, 0.6);
  text-align: center;
  flex-shrink: 0;
}

/* ── Three-panel layout ──────────────────────────── */
.dir-layout {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.dir-layout--locked .dir-composer { opacity: .35; pointer-events: none; }

/* ── Left: history sidebar ───────────────────────── */
.dir-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-dim);
  overflow: hidden;
  background: var(--bg);
}
.dir-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.dir-sidebar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-4xl);
  text-transform: uppercase;
  color: rgba(0, 195, 255, 0.35);
}
.dir-sidebar-count {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  color: rgba(0, 195, 255, 0.25);
}

.dir-history-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .25s;
}
.dir-history-list:hover {
  scrollbar-color: rgba(0, 195, 255, .28) transparent;
}
.dir-history-list::-webkit-scrollbar { width: 3px; }
.dir-history-list::-webkit-scrollbar-track { background: transparent; }
.dir-history-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  transition: background .25s;
}
.dir-history-list:hover::-webkit-scrollbar-thumb { background: rgba(0,195,255,.28); }

.dir-history-empty {
  padding: var(--space-2xl) var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-xl);
  color: rgba(0, 195, 255, 0.2);
  text-align: center;
  text-transform: uppercase;
}

/* Week group collapsible */
.dir-history-week-group {
  border-bottom: 1px solid rgba(0, 195, 255, 0.08);
}
.dir-history-week-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: .45rem .85rem;
  background: rgba(0, 195, 255, 0.04);
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-md);
  text-transform: uppercase;
  transition: background 0.15s;
}
.dir-history-week-header:hover {
  background: rgba(0, 195, 255, 0.08);
  color: var(--accent);
}
.dir-history-week-header--current {
  color: var(--accent);
}
.dir-history-week-label { flex: 1; text-align: left; }
.dir-history-week-count {
  background: rgba(0, 195, 255, 0.12);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 .35rem;
  font-size: var(--text-xxs);
}
.dir-history-week-chevron { font-size: .65rem; }

.dir-history-week-body { overflow: hidden; }
.dir-history-week-body--collapsed { display: none; }

.dir-history-item {
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(0, 195, 255, 0.05);
  position: relative;
  animation: intelItemIn 0.3s ease both;
}
.dir-history-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 2px;
  height: 40%;
  background: var(--accent);
  border-radius: 1px;
  opacity: .35;
}

.dir-history-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: .25rem;
}
.dir-history-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
}
.dir-history-item:hover .dir-history-actions { opacity: 1; }
.dir-history-edit-btn,
.dir-history-delete-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
  transition: background .15s, color .15s;
}
.dir-history-edit-btn {
  color: var(--accent);
  border-color: rgba(0, 195, 255, 0.35);
}
.dir-history-edit-btn:hover {
  background: rgba(0, 195, 255, 0.12);
}
.dir-history-delete-btn {
  color: #ff4d4d;
  border-color: rgba(255,77,77,0.35);
}
.dir-history-delete-btn:hover {
  background: rgba(255, 77, 77, 0.12);
}
.dir-history-date {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-sm);
}
.dir-history-text {
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  max-height: 4.8em; /* ~3 lines */
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .25s;
}
.dir-history-text:hover {
  scrollbar-color: rgba(0, 195, 255, .28) transparent;
}
.dir-history-text::-webkit-scrollbar { width: 3px; }
.dir-history-text::-webkit-scrollbar-track { background: transparent; }
.dir-history-text::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
}
.dir-history-text:hover::-webkit-scrollbar-thumb { background: rgba(0,195,255,.28); }

/* ── Middle: composer ────────────────────────────── */
.dir-composer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  border-right: 1px solid var(--border-dim);
}
.dir-composer--locked { opacity: .35; pointer-events: none; }

.dir-composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.dir-composer-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-4xl);
  text-transform: uppercase;
  color: var(--accent);
}
.dir-composer-hint {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-lg);
  color: var(--text-muted);
}
.dir-composer-hint kbd {
  display: inline-block;
  padding: .05rem .35rem;
  background: rgba(0, 195, 255, 0.07);
  border: 1px solid rgba(0, 195, 255, 0.15);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
}

.dir-composer .directive-editor-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}
.dir-composer .directive-editor {
  flex: 1;
  min-height: 0;
  max-height: none;
  padding: 1rem;
  border: none;
  border-radius: 0;
  background: var(--bg-deep);
  color: var(--text-bright);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  outline: none;
  resize: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 195, 255, .12) transparent;
}
.dir-composer .directive-editor::-webkit-scrollbar { width: 3px; }
.dir-composer .directive-editor::-webkit-scrollbar-thumb { background: rgba(0,195,255,.15); border-radius: 2px; }
.dir-composer .directive-editor:focus {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 195, 255, 0.15);
}
.dir-composer .directive-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(0, 195, 255, 0.2);
  pointer-events: none;
  font-style: italic;
}

.dir-composer-footer {
  padding: .4rem 1rem;
  flex-shrink: 0;
  min-height: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dir-char-counter {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-sm);
  color: var(--text-muted);
  text-align: right;
  transition: color .15s;
}
.dir-char-counter--warn { color: var(--warn); }
.dir-char-counter--over { color: var(--danger); font-weight: 600; }

/* @mention tag chips (keep existing styles) */
.mention-tag {
  display: inline;
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-base-sm);
  padding: .15rem .5rem;
  border-radius: 3px;
  border: 1px solid rgba(0, 195, 255, 0.3);
  white-space: nowrap;
  user-select: all;
  cursor: default;
}

/* @mention dropdown */
.entity-mention-dropdown {
  position: absolute;
  z-index: 50;
  min-width: 200px;
  max-width: 320px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
}
.mention-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.mention-item:hover,
.mention-item--active {
  background: var(--accent-dim);
}
.mention-item--active .mention-name { color: var(--accent); }
.mention-type {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: var(--warm);
  flex-shrink: 0;
  min-width: 60px;
}
.mention-name {
  color: var(--text-bright);
  font-size: var(--text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Right: action panel ─────────────────────────── */
.dir-action-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* Transmit zone */
.dir-transmit-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

.dir-cancel-edit-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--danger);
  background: transparent;
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  padding: 5px 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.dir-cancel-edit-btn:hover {
  color: var(--text);
  border-color: var(--accent-glow);
}

.dir-transmit-btn {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid rgba(0, 195, 255, 0.15);
  background: rgba(0, 195, 255, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.dir-transmit-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(0, 195, 255, 0.06);
  transition: all 0.3s ease;
}
.dir-transmit-btn::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 195, 255, 0.03);
  transition: all 0.3s ease;
}
.dir-transmit-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.dir-transmit-btn:not(:disabled):hover {
  border-color: var(--accent);
  background: rgba(0, 195, 255, 0.08);
  box-shadow: 0 0 40px rgba(0, 195, 255, 0.15), inset 0 0 30px rgba(0, 195, 255, 0.05);
}
.dir-transmit-btn:not(:disabled):hover::before {
  border-color: rgba(0, 195, 255, 0.25);
}
.dir-transmit-btn:not(:disabled):hover::after {
  border-color: rgba(0, 195, 255, 0.12);
}
.dir-transmit-btn:not(:disabled):active {
  transform: scale(0.96);
  box-shadow: 0 0 60px rgba(0, 195, 255, 0.25), inset 0 0 40px rgba(0, 195, 255, 0.08);
}

.dir-transmit-icon {
  font-size: 2rem;
  color: var(--accent);
  opacity: .6;
  transition: opacity 0.3s ease;
}
.dir-transmit-btn:not(:disabled) .dir-transmit-icon { opacity: 1; }
.dir-transmit-btn:not(:disabled):hover .dir-transmit-icon {
  text-shadow: 0 0 20px var(--accent-glow);
}

.dir-transmit-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-4xl);
  text-transform: uppercase;
  color: var(--accent);
  opacity: .6;
  transition: opacity 0.3s ease;
}
.dir-transmit-btn:not(:disabled) .dir-transmit-label { opacity: 1; }

.dir-transmit-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}


/* ── Entity roster ───────────────────────────────── */
.dir-entity-roster {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.dir-roster-header {
  display: flex;
  align-items: center;
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.dir-roster-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-4xl);
  text-transform: uppercase;
  color: rgba(0, 195, 255, 0.35);
}

.dir-roster-filters {
  display: flex;
  gap: 2px;
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
  overflow-x: auto;
}
.dir-filter-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: rgba(0, 195, 255, 0.3);
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: .2rem .45rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.dir-filter-btn:hover { color: var(--accent); background: rgba(0, 195, 255, 0.04); }
.dir-filter-btn.active {
  color: var(--accent);
  border-color: rgba(0, 195, 255, 0.2);
  background: rgba(0, 195, 255, 0.06);
}

.dir-roster-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 195, 255, .12) transparent;
}
.dir-roster-list::-webkit-scrollbar { width: 3px; }
.dir-roster-list::-webkit-scrollbar-thumb { background: rgba(0,195,255,.15); border-radius: 2px; }

.dir-roster-empty {
  padding: var(--space-2xl) var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-xl);
  color: rgba(0, 195, 255, 0.15);
  text-align: center;
}

.dir-roster-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: .45rem .85rem;
  border-bottom: 1px solid rgba(0, 195, 255, 0.04);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font-mono);
}
.dir-roster-row:hover {
  background: rgba(0, 195, 255, 0.04);
}
.dir-roster-row--tagged {
  background: rgba(0, 195, 255, 0.06);
  border-left: 2px solid var(--accent);
  padding-left: calc(.85rem - 2px);
}
.dir-roster-row--tagged .dir-roster-name { color: var(--accent); }

.dir-roster-sym {
  font-size: var(--text-sm);
  color: rgba(0, 195, 255, 0.35);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.dir-roster-name {
  font-size: var(--text-sm);
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--tracking-sm);
}
.dir-roster-type {
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Directive week tag (shared) */
.directive-week-tag {
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .1rem .4rem;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  background: var(--bg-muted);
}

/* ── Directives responsive ───────────────────────── */
@media (max-width: 1100px) {
  .dir-layout { grid-template-columns: 260px 1fr 280px; }
}
@media (max-width: 800px) {
  .page-directives { height: auto; overflow: visible; }
  .dir-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .dir-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-dim);
    max-height: 30vh;
    order: 3;
  }
  .dir-composer {
    border-right: none;
    min-height: 40vh;
    order: 1;
  }
  .dir-action-panel {
    border-bottom: 1px solid var(--border-dim);
    order: 2;
  }
  .dir-transmit-zone {
    flex-direction: row;
    padding: var(--space-lg);
  }
  .dir-transmit-btn { width: 80px; height: 80px; }
  .dir-transmit-icon { font-size: 1.4rem; }
  .dir-transmit-label { font-size: var(--text-xxs); }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 1100px) {
  .hud-stage { gap: var(--space-md); padding: var(--space-md) 1rem; }
  .hud-col-left { width: clamp(220px, calc(50vh - 52px), 380px); }
}
@media (max-width: 800px) {
  .page-dashboard { height: auto; overflow: visible; }
  .hud-stage { flex-direction: column; overflow-y: auto; padding: var(--space-md); height: auto; }
  .hud-col-left { width: 100%; flex-direction: row; align-items: flex-start; }
  .radar-container { flex: 0 0 280px; width: 280px; }
  .hud-left { flex: 1; min-width: 0; }
  .hud-right { flex: none; width: 100%; min-height: 400px; }
  .hud-entities-list { max-height: 50vh; }
  .dash-eyebrow { padding: .4rem 1rem; }
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .page { padding: var(--pad-section) var(--space-lg); }
  .auth-card { padding: var(--pad-section); }
  .characters-grid, .entities-grid { grid-template-columns: 1fr; }
  .type-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-inner { padding: var(--space-sm) var(--space-lg); }
  .nav-links { gap: var(--space-lg); }
  .editor-form { padding: var(--pad-card-sm); }
  .editor-section { padding: var(--space-lg); }
  .entity-ref-controls { flex-direction: column; }
  .entity-ref-controls select { width: 100%; }
  .step-nav { gap: var(--space-xs); }
  .filter-bar { gap: var(--space-xs); }
}
/* ═══════════════════════════════════════════════════════════════
   Intel Inbox
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────── */
@keyframes intelItemIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes intelDecryptScan {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 0.4; }
}
@keyframes intelCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes intelUnreadPing {
  0%   { transform: scale(1);   opacity: 1; }
  60%  { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── Layout ─────────────────────────────────────────── */
.page-intel {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 48px);
  overflow: hidden;
}
.intel-layout {
  display: grid;
  grid-template-columns: 480px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────── */
.intel-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-dim);
  overflow: hidden;
  background: var(--bg);
}
.intel-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}
.intel-sidebar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-4xl);
  text-transform: uppercase;
  color: var(--text-muted);
}
.intel-unread-count {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  color: var(--warm);
  animation: intelUnreadPing 2.4s ease-in-out infinite;
}

.intel-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 195, 255, .15) transparent;
}
.intel-list::-webkit-scrollbar { width: 3px; }
.intel-list::-webkit-scrollbar-thumb { background: rgba(0,195,255,.18); border-radius: 2px; }

.intel-empty-list {
  padding: var(--space-2xl) var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-xl);
  color: var(--text-muted);
  text-align: center;
}

/* ── List Items ─────────────────────────────────────── */
.intel-list-item {
  padding: .65rem .85rem;
  border-bottom: 1px solid rgba(0, 195, 255, 0.05);
  cursor: pointer;
  transition: background var(--transition);
  animation: intelItemIn 0.3s ease both;
  position: relative;
}
.intel-list-item:hover {
  background: rgba(0, 195, 255, 0.04);
}
.intel-list-item--active {
  background: rgba(0, 195, 255, 0.07);
  border-left: 2px solid var(--accent);
  padding-left: calc(.85rem - 2px);
}
.intel-list-item--unread .intel-item-subject-text {
  color: var(--text-bright);
  font-weight: 500;
}

.intel-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .2rem;
}
.intel-item-from {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--accent);
}
.intel-item-date {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  color: rgba(0, 195, 255, 0.25);
  letter-spacing: var(--tracking-sm);
}

.intel-item-subject {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .25rem;
}
.intel-item-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--warm);
  flex-shrink: 0;
  animation: intelUnreadPing 2s ease-in-out infinite;
}
.intel-item-subject-text {
  font-size: var(--text-sm);
  color: rgba(208, 216, 232, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* ── Classification badges ──────────────────────────── */
.intel-item-cls,
.intel-reader-cls {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  text-transform: uppercase;
  border-radius: 2px;
  padding: .1rem .3rem;
  display: inline-block;
}
.intel-cls--confidential {
  color: rgba(0, 195, 255, 0.5);
  background: rgba(0, 195, 255, 0.06);
  border: 1px solid rgba(0, 195, 255, 0.15);
}
.intel-cls--secret {
  color: var(--warm);
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.25);
}
.intel-cls--eyes-only {
  color: #ff2d55;
  background: rgba(255, 45, 85, 0.08);
  border: 1px solid rgba(255, 45, 85, 0.28);
}

/* ── Nav badge ──────────────────────────────────────── */
.nav-intel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--warm);
  color: #06090f;
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: .3rem;
  vertical-align: middle;
  animation: intelUnreadPing 2.4s ease-in-out infinite;
}

/* ── Reader pane ────────────────────────────────────── */
.intel-reader {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.intel-reader-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
}
.intel-reader-empty-icon {
  font-size: 2.5rem;
  opacity: 0.2;
}
.intel-reader-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ── Reader header ──────────────────────────────────── */
.intel-reader-header {
  padding: 1rem 1.5rem .75rem;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
  background: rgba(6, 9, 15, 0.6);
  position: relative;
}
.intel-reader-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: 0.4;
}
.intel-reader-from {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
}
.intel-reader-from-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-2xl);
  color: rgba(0, 195, 255, 0.3);
  text-transform: uppercase;
}
.intel-reader-from-handle {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-xl);
  color: var(--accent);
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--accent-glow);
}
.intel-reader-subject {
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--text-bright);
  letter-spacing: var(--tracking-sm);
  margin-bottom: .5rem;
  line-height: 1.4;
}
.intel-reader-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.intel-reader-week,
.intel-reader-date {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-lg);
  color: rgba(0, 195, 255, 0.3);
  text-transform: uppercase;
}
.intel-reader-unread-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: var(--tracking-xl);
  color: var(--warm);
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 2px;
  padding: .1rem .35rem;
  text-transform: uppercase;
}

/* ── Reader body ────────────────────────────────────── */
.intel-reader-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 195, 255, .12) transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.intel-reader-body::-webkit-scrollbar { width: 3px; }
.intel-reader-body::-webkit-scrollbar-thumb { background: rgba(0,195,255,.15); border-radius: 2px; }

.intel-body-text {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--text);
  line-height: var(--leading-loose);
  white-space: pre-wrap;
  word-break: break-word;
}
.intel-body-encrypting {
  color: rgba(0, 195, 255, 0.35);
  animation: intelDecryptScan 1.1s ease-in-out infinite;
  user-select: none;
}

/* ── Decrypt UI ─────────────────────────────────────── */
.intel-decrypt-bar {
  height: 2px;
  background: rgba(0, 195, 255, 0.1);
  border-radius: 1px;
  overflow: hidden;
  margin-top: var(--space-sm);
}
.intel-decrypt-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 1px;
  transition: width 0.04s linear;
}
.intel-decrypt-fill--done {
  background: var(--success);
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
}
.intel-decrypt-btn {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-2xl);
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 195, 255, 0.07);
  border: 1px solid rgba(0, 195, 255, 0.3);
  border-radius: var(--radius);
  padding: .45rem 1rem;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.intel-decrypt-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.12), transparent);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.intel-decrypt-btn:hover:not(:disabled)::before {
  transform: translateX(100%);
}
.intel-decrypt-btn:hover:not(:disabled) {
  background: rgba(0, 195, 255, 0.12);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  color: var(--accent-hover);
}
.intel-decrypt-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 700px) {
  .intel-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .intel-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-dim);
    max-height: 38vh;
  }
}

/* ══════════════════════════════════════════════════════
   SNA Dashboard — interactive network analysis report
   ══════════════════════════════════════════════════════ */

.sna-dashboard {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  animation: snaFadeIn 0.6s ease both;
}

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

/* Stagger reveal animation for child elements */
.sna-stagger {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.sna-stagger.sna-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Title bar ──────────────────────────────────────── */
.sna-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-dim);
}
.sna-title-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sna-title-prefix {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-lg);
  color: var(--accent);
}
.sna-title-sep {
  color: var(--text-muted);
}
.sna-title-text {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-lg);
  color: var(--text-dim);
  text-transform: uppercase;
}
.sna-title-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-lg);
  color: var(--accent);
}
.sna-title-codename {
  color: var(--accent);
}

/* ── Sections ───────────────────────────────────────── */
.sna-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sna-section-heading {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-lg);
  color: var(--accent);
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 195, 255, 0.15);
}

/* ── Combined stats columns ─────────────────────────── */
.sna-stats-columns {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  align-items: start;
}
.sna-stats-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sna-metric-grid {
  display: grid;
  gap: 0.75rem;
}
.sna-metric-grid--2-2 {
  grid-template-columns: repeat(2, 1fr);
}
.sna-metric-grid--3-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Metric cards ───────────────────────────────────── */
.sna-metric-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.sna-metric-card {
  flex: 1 1 120px;
  min-width: 0;
  background: rgba(0, 195, 255, 0.03);
  border: 1px solid rgba(0, 195, 255, 0.1);
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.sna-metric-card:hover {
  border-color: rgba(0, 195, 255, 0.3);
  background: rgba(0, 195, 255, 0.06);
}
.sna-metric-value {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.sna-metric-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-lg);
  color: var(--text-dim);
  margin-top: 0.4rem;
  text-transform: uppercase;
}
.sna-metric-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ── Chart grid (2×2 filterable panels) ─────────────── */
.sna-chart-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.sna-chart-panel {
  background: rgba(0, 195, 255, 0.02);
  border: 1px solid rgba(0, 195, 255, 0.08);
  border-radius: 6px;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}
.sna-chart-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sna-chart-panel--placeholder {
  opacity: 0.35;
  border-style: dashed;
  min-height: 80px;
  justify-content: center;
  align-items: center;
}
.sna-chart-panel--placeholder .sna-chart-panel-header {
  justify-content: center;
}
.sna-chart-panel-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-lg);
  color: var(--text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}
.sna-chart-tabs {
  display: flex;
  gap: 2px;
}
.sna-chart-tab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: var(--tracking-lg);
  padding: 3px 7px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.sna-chart-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tab-color, rgba(0,255,200,1));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sna-chart-tab:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-body);
}
.sna-chart-tab:hover::after {
  opacity: 0.06;
}
.sna-chart-tab--active {
  color: var(--tab-color, var(--accent));
  border-color: var(--tab-color, var(--accent));
  text-shadow: 0 0 8px var(--tab-color, var(--accent));
}
.sna-chart-tab--active::after {
  opacity: 0.1;
}
.sna-chart-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.sna-chart-empty {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  padding: 2rem 0;
  letter-spacing: var(--tracking-lg);
}

/* ── Bar rows ───────────────────────────────────────── */
.sna-bar-row {
  display: grid;
  grid-template-columns: 22px 140px 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.sna-bar-row:hover {
  background: rgba(0, 195, 255, 0.05);
}
.sna-bar-rank {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
}
.sna-bar-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.sna-bar-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sna-bar-name--owned {
  color: var(--accent);
}
.sna-bar-type {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-lg);
}
.sna-bar-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sna-bar-track {
  height: 16px;
  background: rgba(0, 195, 255, 0.04);
  border: 1px solid rgba(0, 195, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.sna-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 195, 255, 0.2), rgba(0, 195, 255, 0.4));
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.sna-bar-fill--owned {
  /* gradient & shadow set dynamically per filter color */
  opacity: 1;
}
.sna-bar-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-dim);
  min-width: 2.5rem;
  text-align: right;
}
.sna-bar-owned-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: var(--tracking-lg);
  color: var(--accent);
  padding: 1px 6px;
  border: 1px solid rgba(0, 195, 255, 0.3);
  border-radius: 3px;
  text-transform: uppercase;
}

/* ── Degree heatmap + auxiliary row ──────────────────── */
.sna-aux-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.sna-aux-panel {
  background: rgba(0, 195, 255, 0.02);
  border: 1px solid rgba(0, 195, 255, 0.08);
  border-radius: 6px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sna-aux-panel-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-lg);
  color: var(--text-dim);
  text-transform: uppercase;
}
.sna-degree-wrap {
  position: relative;
}
.sna-degree-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.sna-degree-tooltip {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(6, 12, 20, 0.92);
  border: 1px solid rgba(0, 195, 255, 0.25);
  border-radius: 3px;
  padding: 3px 8px;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  text-shadow: 0 0 6px rgba(0, 195, 255, 0.3);
}

/* ── Influence dot-density chart ─────────────────────── */
.sna-influence-wrap {
  position: relative;
}
.sna-influence-canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* ── Empty state for panels ─────────────────────────── */
.sna-aux-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 900px) {
  .sna-aux-row {
    grid-template-columns: 1fr;
  }
}

/* ── Status badges (title bar) ──────────────────────── */
.sna-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-lg);
  border: 1px solid;
  white-space: nowrap;
  cursor: default;
}
.sna-badge--hub {
  color: var(--accent);
  background: rgba(0, 195, 255, 0.08);
  border-color: rgba(0, 195, 255, 0.35);
}
.sna-badge--broker {
  color: #55d8f5;
  background: rgba(85, 216, 245, 0.07);
  border-color: rgba(85, 216, 245, 0.3);
}
.sna-badge--warn {
  color: #ffb432;
  background: rgba(255, 180, 50, 0.08);
  border-color: rgba(255, 180, 50, 0.35);
}
.sna-badge-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  padding: 0.55rem 0.7rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent);
  line-height: 1.55;
  letter-spacing: 0.03em;
  z-index: 10000;
  white-space: normal;
  pointer-events: none;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.sna-badge-tooltip strong {
  display: block;
  color: var(--text-bright);
  letter-spacing: var(--tracking-lg);
  margin-bottom: 0.3rem;
}
.sna-badge:hover .sna-badge-tooltip {
  display: block;
}

/* ── Entity detail cards ────────────────────────────── */
.sna-entity-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.sna-entity-card {
  background: rgba(0, 195, 255, 0.02);
  border: 1px solid rgba(0, 195, 255, 0.1);
  border-radius: 6px;
  padding: 1rem;
  transition: border-color 0.3s ease;
}
.sna-entity-card:hover {
  border-color: rgba(0, 195, 255, 0.25);
}
.sna-entity-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 195, 255, 0.08);
}
.sna-entity-card-name {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: var(--tracking-lg);
}
.sna-entity-card-type {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-lg);
}
.sna-entity-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  text-align: center;
}
.sna-entity-stat-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-body);
}
.sna-entity-stat-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--text-muted);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
}

/* Entity neighbour list */
.sna-entity-nb-section {
  margin-top: 0.75rem;
}
.sna-entity-nb-toggle {
  background: none;
  border: 1px solid rgba(0, 195, 255, 0.12);
  border-radius: 3px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-lg);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
  width: 100%;
  text-align: left;
}
.sna-entity-nb-toggle:hover {
  border-color: rgba(0, 195, 255, 0.3);
  color: var(--accent);
}
.sna-entity-nb-list {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 200px;
  overflow-y: auto;
}
.sna-entity-nb-row {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.4rem;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
}
.sna-entity-nb-row:hover {
  background: rgba(0, 195, 255, 0.04);
}
.sna-entity-nb-row--owned .sna-entity-nb-name {
  color: var(--accent);
}
.sna-entity-nb-name {
  color: var(--text-dim);
}
.sna-entity-nb-type {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-lg);
}
.sna-entity-nb-more {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-muted);
  padding: 0.2rem 0.4rem;
}

/* ── Footer ─────────────────────────────────────────── */
.sna-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
}
.sna-footer-line {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(0, 195, 255, 0.15);
  letter-spacing: 2px;
}
.sna-footer-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-lg);
  color: var(--text-muted);
}

/* ── SNA Responsive ─────────────────────────────────── */
@media (max-width: 1400px) {
  .sna-chart-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .sna-chart-grid {
    grid-template-columns: 1fr;
  }
  .sna-stats-columns {
    grid-template-columns: 1fr;
  }
  .sna-metric-grid--3-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .sna-bar-row {
    grid-template-columns: 18px 100px 1fr auto auto;
  }
  .sna-metric-card {
    min-width: 100px;
  }
  .sna-entity-details {
    grid-template-columns: 1fr;
  }
  .sna-chart-panel-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Entity tooltip ──────────────────────────────────── */
.entity-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  padding: .5rem .75rem;
  background: rgba(8, 12, 20, 0.95);
  border: 1px solid rgba(0, 195, 255, 0.25);
  border-radius: 4px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 195, 255, 0.06);
  font-family: var(--font-mono);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.entity-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.entity-tooltip-header {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: var(--tracking-lg);
  text-transform: uppercase;
  margin-bottom: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.entity-tooltip-sym {
  opacity: .6;
  margin-right: .25rem;
}
.entity-tooltip-body {
  font-size: var(--text-xxs);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}