:root {
  --bg-primary: #080b0f;
  --bg-secondary: #0d1117;
  --bg-tertiary: #111720;
  --bg-elevated: #161e2a;
  --border-subtle: #1c2535;
  --border-mid: #253040;
  --border-bright: #38465c;
  --gold: #d4a843;
  --gold-bright: #f0c060;
  --gold-dim: #8a6820;
  --gold-faint: rgba(212, 168, 67, 0.08);
  --orange: #c8621a;
  --orange-bright: #e87a30;
  --blue: #5a9ff0;
  --blue-dim: #3a7fd4;
  --red: #c43030;
  --red-bright: #e84545;
  --green: #3dd870;
  --green-dim: #28a855;
  --purple: #a070d8;
  --text-primary: #dce8f0;
  --text-secondary: #b8c4d0;
  --text-muted: #7a8898;
  --text-dim: #4a5868;
  --hud-bar: rgba(8, 11, 15, 0.96);

  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
  --font-condensed: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

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

html, body {
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  cursor: none !important;
}

/* Hide cursor on every element since we use the crosshair */
* { cursor: none !important; }

/* Restore cursor when mouse leaves the page */
body.mouse-outside * { cursor: auto !important; }
body.mouse-outside .crosshair { opacity: 0 !important; pointer-events: none; }

/* But show cursor on the Tweaks panel so it's usable */
.body-no-crosshair .crosshair { opacity: 0 !important; }
.twk-panel, .twk-panel * { cursor: auto !important; }
.twk-panel button, .twk-panel [role="button"], .twk-panel input[type="range"],
.twk-panel input[type="checkbox"], .twk-panel .twk-hd { cursor: pointer !important; }
.twk-panel .twk-hd { cursor: move !important; }
.twk-panel input[type="text"], .twk-panel input[type="number"], .twk-panel textarea { cursor: text !important; }
.twk-panel ~ * .crosshair, body:has(.twk-panel:hover) .crosshair { opacity: 0 !important; }

/* ============== SCANLINES ============== */
.no-scan .scanlines { display: none; }
.scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9990;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.05) 3px,
    rgba(0, 0, 0, 0.05) 4px
  );
  mix-blend-mode: multiply;
}

/* ============== VIGNETTE ============== */
.vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9989;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.45) 90%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

/* ============== FX CANVASES ============== */
.fx-decals, .fx-active {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9988;
}
.fx-decals { z-index: 9987; }

/* ============== WALLHACK MODE ============== */
.wallhack .exp-card,
.wallhack .weapon,
.wallhack .proj-card,
.wallhack .edu-card,
.wallhack .edu-box,
.wallhack .stack-panel,
.wallhack .op-card,
.wallhack .explore-card,
.wallhack .live-panel,
.wallhack .score-top,
.wallhack .score-table {
  box-shadow:
    0 0 0 1px rgba(212, 168, 67, 0.6),
    0 0 20px rgba(212, 168, 67, 0.22),
    inset 0 0 40px rgba(212, 168, 67, 0.04) !important;
}
.wallhack::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9985;
  background:
    radial-gradient(ellipse at center, rgba(212, 168, 67, 0.05), transparent 60%),
    repeating-linear-gradient(90deg, rgba(240, 192, 96, 0.03) 0, rgba(240, 192, 96, 0.03) 1px, transparent 1px, transparent 18px);
  mix-blend-mode: screen;
}

/* ============== PARTICLE CANVAS ============== */
#particle-canvas {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
}

/* Background grid */
.bg-grid {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(28, 37, 53, 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 37, 53, 0.35) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
}

/* ============== CROSSHAIR ============== */
.crosshair {
  position: fixed;
  width: 28px; height: 28px;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  opacity: 0.95;
}
.crosshair::before, .crosshair::after,
.crosshair > span:nth-child(1), .crosshair > span:nth-child(2) {
  content: '';
  position: absolute;
  background: var(--gold);
  box-shadow: 0 0 4px rgba(212, 168, 67, 0.6);
}
.crosshair::before { /* top */
  left: 50%; top: 0; width: 2px; height: 8px; transform: translateX(-50%);
}
.crosshair::after { /* bottom */
  left: 50%; bottom: 0; width: 2px; height: 8px; transform: translateX(-50%);
}
.crosshair > span:nth-child(1) { /* left */
  top: 50%; left: 0; width: 8px; height: 2px; transform: translateY(-50%);
}
.crosshair > span:nth-child(2) { /* right */
  top: 50%; right: 0; width: 8px; height: 2px; transform: translateY(-50%);
}
.crosshair > .dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 2px;
  background: var(--gold);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 3px var(--gold);
}

/* ============== HUD TOP BAR ============== */
.hud-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  background: var(--hud-bar);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 18px;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
}
.hud-top::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(212, 168, 67, 0.4) 50%, transparent);
}
.hud-top .left {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-condensed);
  font-weight: 600;
  letter-spacing: 3px;
  font-size: 12px;
}
.hud-top .name { color: var(--text-primary); }
.hud-top .sep { color: var(--gold); font-weight: 700; }
.hud-top .role { color: var(--orange); }
.hud-top .center {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  color: var(--text-muted);
}
.hud-top .center .ping { color: var(--green); }
.hud-top .center .ping .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  margin-right: 6px;
  animation: pulse-green 1.6s ease-in-out infinite;
}
.hud-top .right {
  margin-left: auto;
  display: flex; gap: 6px;
}
.hud-top .console-hint {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  display: flex; align-items: center; gap: 5px;
  border: 1px solid var(--border-subtle);
  padding: 5px 10px;
  background: rgba(13, 17, 23, 0.6);
}
.hud-top .console-hint kbd {
  font-family: inherit;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 1px 6px;
  font-size: 11px;
  background: rgba(212, 168, 67, 0.08);
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============== HUD BOTTOM BAR ============== */
.hud-bottom {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(to top, var(--hud-bar) 30%, rgba(8, 11, 15, 0.6) 70%, transparent);
  display: flex;
  align-items: center;
  padding: 0 18px;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
  gap: 18px;
}
.hud-bottom .key-hint {
  display: flex; align-items: center; gap: 6px;
}
.hud-bottom .key {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 5px;
  border: 1px solid var(--border-mid);
  background: rgba(13, 17, 23, 0.8);
  color: var(--text-primary);
  font-size: 10px;
}
.hud-bottom .cta {
  margin-left: auto;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 5px 12px;
  background: rgba(212, 168, 67, 0.06);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 2px;
  display: flex; align-items: center; gap: 6px;
  transition: all 0.15s ease;
}
.hud-bottom .cta:hover {
  background: rgba(212, 168, 67, 0.15);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.hud-socials {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.hud-socials .social {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 8px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}
.hud-socials .social svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.hud-socials .social:hover {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(212, 168, 67, 0.06);
}

/* ============== LEFT NAV ============== */
.nav-left {
  position: fixed;
  left: 0; top: 44px; bottom: 32px;
  width: 135px;
  background: rgba(8, 11, 15, 0.85);
  backdrop-filter: blur(4px);
  border-right: 1px solid var(--border-subtle);
  z-index: 90;
  display: flex; flex-direction: column;
  padding: 18px 10px;
}

.radar {
  width: 70px; height: 70px;
  position: relative;
  margin: 0 auto;
  border: 1px solid var(--gold-dim);
  background:
    linear-gradient(rgba(212, 168, 67, 0.04), rgba(212, 168, 67, 0.01)),
    var(--bg-secondary);
  overflow: hidden;
}
.radar::before { /* grid */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(212, 168, 67, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 168, 67, 0.12) 1px, transparent 1px);
  background-size: 10px 10px;
}
.radar::after { /* cross */
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(to right, transparent 49%, rgba(212, 168, 67, 0.25) 49%, rgba(212, 168, 67, 0.25) 51%, transparent 51%),
    linear-gradient(to bottom, transparent 49%, rgba(212, 168, 67, 0.25) 49%, rgba(212, 168, 67, 0.25) 51%, transparent 51%);
}
.radar-sweep {
  position: absolute;
  left: 50%; top: 50%;
  width: 50%; height: 2px;
  transform-origin: left center;
  background: linear-gradient(to right, rgba(61, 216, 112, 0.7), transparent);
  animation: radar-spin 3.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes radar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.radar-dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  transition: all 0.5s ease;
}
.radar-dot.active {
  width: 8px; height: 8px;
  box-shadow: 0 0 8px currentColor;
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

.radar-label {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 8px;
  letter-spacing: 1.5px;
}

.nav-links {
  margin-top: 26px;
  display: flex; flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
}
.nav-link {
  display: flex; align-items: center;
  padding: 7px 6px 7px 10px;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  background: transparent;
  border-top: 0; border-right: 0; border-bottom: 0;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  width: 100%;
  text-align: left;
}
.nav-link:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
}
.nav-link.active {
  color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(212, 168, 67, 0.06);
}
.nav-link .num {
  color: var(--text-muted);
  margin-right: 6px;
  font-size: 9px;
}
.nav-link.active .num { color: var(--gold-dim); }

.nav-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 1.5px;
  line-height: 1.6;
}

/* ============== MAIN SCROLL AREA ============== */
.main {
  position: fixed;
  left: 135px; top: 44px; right: 0; bottom: 32px;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  z-index: 10;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) var(--bg-secondary);
}
.main::-webkit-scrollbar { width: 4px; }
.main::-webkit-scrollbar-track { background: var(--bg-secondary); }
.main::-webkit-scrollbar-thumb { background: var(--gold-dim); }
.main::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 38px 48px 52px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.section-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
  position: relative;
}
.section-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 2px;
}
.section-title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 28px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 4px;
}
.section-title .accent { color: var(--gold); }
.section-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
}
.section-rule {
  height: 1px;
  background: linear-gradient(to right, rgba(212, 168, 67, 0.5), rgba(28, 37, 53, 0) 70%);
  margin-bottom: 22px;
}

/* ============== CORNER BRACKETS ============== */
.brackets {
  position: relative;
}
.brackets::before, .brackets::after,
.brackets > .br-bl, .brackets > .br-br {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--gold);
  border-style: solid;
  pointer-events: none;
}
.brackets::before { /* top-left */
  top: -1px; left: -1px;
  border-width: 1px 0 0 1px;
}
.brackets::after { /* top-right */
  top: -1px; right: -1px;
  border-width: 1px 1px 0 0;
}
.brackets > .br-bl {
  bottom: -1px; left: -1px;
  border-width: 0 0 1px 1px;
}
.brackets > .br-br {
  bottom: -1px; right: -1px;
  border-width: 0 1px 1px 0;
}

/* ============== BOOT SCREEN ============== */
.boot {
  position: fixed; inset: 0;
  background: var(--bg-primary);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}
.boot.hide { opacity: 0; pointer-events: none; }
.boot::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 3px,
    rgba(0, 0, 0, 0.1) 3px, rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
}
.boot .logo {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 52px;
  color: var(--gold);
  letter-spacing: 12px;
  margin-bottom: 8px;
  opacity: 0;
  animation: fade-in 0.6s 0.3s forwards;
  text-shadow: 0 0 30px rgba(212, 168, 67, 0.4);
}
.boot .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 4px;
  margin-bottom: 36px;
  opacity: 0;
  animation: fade-in 0.6s 0.7s forwards;
}
.boot .term {
  width: min(520px, 90vw);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.9;
  text-align: left;
  min-height: 200px;
}
.boot .term-line {
  opacity: 0;
  animation: fade-in 0.2s forwards;
}
.boot .term-line .arrow { color: var(--gold); }
.boot .term-line .ok { color: var(--green); margin-left: 6px; }
.boot .progress {
  margin-top: 22px;
  width: min(520px, 90vw);
  height: 2px;
  background: var(--bg-tertiary);
  position: relative;
  overflow: hidden;
}
.boot .progress::after {
  content: '';
  position: absolute;
  left: 0; top: 0; height: 100%;
  background: linear-gradient(to right, var(--gold-dim), var(--gold-bright));
  animation: progress 1.8s 2s ease-out forwards;
  width: 0%;
}
.boot .skip {
  position: absolute;
  bottom: 24px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 2px;
}
@keyframes fade-in {
  to { opacity: 1; }
}
@keyframes progress {
  to { width: 100%; }
}

/* ============== OPERATOR CARD (Section 01) ============== */
.op-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

.card-3d-wrap {
  perspective: 1400px;
  width: 100%;
  max-width: 600px;
}
.op-card {
  position: relative;
  width: 100%;
  aspect-ratio: 17 / 10;
  background:
    linear-gradient(135deg, rgba(212, 168, 67, 0.04), transparent 60%),
    linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid var(--border-mid);
  padding: 22px 24px;
  transform-style: preserve-3d;
  transition: transform 0.16s ease-out;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(212, 168, 67, 0.08) inset;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.op-card::before { /* gold top edge */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent);
}
.op-card .watermark {
  position: absolute;
  right: 6px; bottom: -22px;
  font-family: var(--font-condensed);
  font-size: 160px;
  font-weight: 900;
  color: rgba(212, 168, 67, 0.04);
  letter-spacing: -4px;
  line-height: 1;
  pointer-events: none;
  transform: translateZ(0);
}
.op-card .callsign {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.op-card .callsign .bar {
  flex: 1; height: 1px;
  background: linear-gradient(to right, var(--gold-dim), transparent);
}
.op-card .row {
  display: flex; gap: 18px; align-items: flex-start;
  position: relative; z-index: 2;
}
.op-avatar {
  width: 84px; height: 84px;
  background: var(--bg-primary);
  border: 1px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-family: var(--font-condensed);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  flex-shrink: 0;
}
.op-avatar::before, .op-avatar::after,
.op-avatar > .c-bl, .op-avatar > .c-br {
  content: ''; position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--gold); border-style: solid;
}
.op-avatar::before { top: -2px; left: -2px; border-width: 1px 0 0 1px; }
.op-avatar::after { top: -2px; right: -2px; border-width: 1px 1px 0 0; }
.op-avatar > .c-bl { bottom: -2px; left: -2px; border-width: 0 0 1px 1px; }
.op-avatar > .c-br { bottom: -2px; right: -2px; border-width: 0 1px 1px 0; }

.op-info { flex: 1; min-width: 0; }
.op-info .name {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 30px;
  color: var(--text-primary);
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 4px;
}
.op-info .roles {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--orange);
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.op-info .rank {
  display: flex; gap: 3px;
  margin-bottom: 4px;
}
.op-info .rank .star {
  width: 11px; height: 11px;
  color: var(--gold);
}
.op-info .tier {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--gold);
  letter-spacing: 1.5px;
}

.op-bio {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 860px;
  width: 100%;
}
.op-bio b {
  color: var(--gold);
  font-weight: 400;
}
.op-metrics {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  max-width: 860px;
  width: 100%;
}
.op-metric {
  border-left: 1px solid var(--border-mid);
  padding: 4px 0 4px 10px;
}
.op-metric .val {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  letter-spacing: 1px;
}
.op-metric .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  margin-top: 6px;
  text-transform: uppercase;
}

/* Stack panel */
.stack-panel {
  width: 100%;
  max-width: 860px;
  padding: 22px;
  background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid var(--border-mid);
  transform: none;
  transform-origin: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 168, 67, 0.05) inset;
  position: relative;
}
.stack-panel::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 1px;
  background: linear-gradient(to left, var(--gold), transparent);
}
.stack-panel .title {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.stack-panel .title::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border-mid);
}
.stack-row {
  margin-bottom: 14px;
}
.stack-row .label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.stack-row .label .pct { color: var(--text-dim); }
.stack-bar {
  height: 3px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.stack-bar-fill {
  height: 100%;
  width: 0%;
  transition: width 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.stack-bar-fill.gold { background: linear-gradient(to right, var(--gold-dim), var(--gold)); }
.stack-bar-fill.blue { background: linear-gradient(to right, var(--blue-dim), var(--blue)); }
.stack-bar-fill.green { background: linear-gradient(to right, var(--green-dim), var(--green)); }
.stack-bar-fill.orange { background: linear-gradient(to right, var(--gold-dim), var(--orange)); }

/* ============== EXPERIENCE (Section 02) ============== */
.exp-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}
.exp-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid var(--border-subtle);
  padding: 22px 24px;
  transition: transform 0.25s ease-out, box-shadow 0.25s ease;
  cursor: none;
}
.exp-card.current { border-left: 2px solid var(--gold); }
.exp-card.past { border-left: 2px solid var(--blue); }
.exp-card::before { /* top reveal bar */
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px; width: 100%;
  background: linear-gradient(to right, var(--gold), var(--orange));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
}
.exp-card:hover {
  transform: translateY(-4px) perspective(800px) rotateX(2deg);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}
.exp-card:hover::before { transform: scaleX(1); }

.exp-period {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.exp-period .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}
.exp-period.green .dot { background: var(--green); color: var(--green); animation: pulse-green 2s infinite; }
.exp-period.blue .dot { background: var(--blue); color: var(--blue); }
.exp-company {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.1;
  margin-bottom: 4px;
}
.exp-role {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--orange);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.exp-desc {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-left: 14px;
  list-style: none;
}
.exp-desc li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 5px;
}
.exp-desc li::before {
  content: '◦';
  position: absolute;
  left: 0;
  color: var(--gold-dim);
}
.exp-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 14px;
}
.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  padding: 4px 8px;
  border: 1px solid var(--blue-dim);
  color: var(--blue);
  background: rgba(90, 159, 240, 0.05);
}
.tag.orange { border-color: var(--orange); color: var(--orange-bright); background: rgba(200, 98, 26, 0.05); }
.exp-stat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  letter-spacing: 1px;
  border-top: 1px dashed var(--border-mid);
  padding-top: 10px;
  display: flex; gap: 6px; align-items: center;
}

/* ============== EDUCATION (Section 03) ============== */
.edu-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  flex: 1;
}
.edu-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid var(--border-subtle);
  padding: 26px;
  transition: transform 0.3s ease;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.edu-card::after { /* right gold edge */
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--orange));
}
.edu-card:hover { transform: perspective(900px) rotateY(-4deg) rotateX(2deg); }
.edu-card .deg {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 8px;
}
.edu-card .inst {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.edu-card .yr {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 22px;
}
.xp-row {
  margin-bottom: 22px;
  margin-top: auto;
}
.xp-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.xp-label .pct { color: var(--gold); }
.xp-bar {
  height: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.xp-bar::after {
  content: 'XP';
  position: absolute;
  right: -22px; top: -14px;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
}
.xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--gold-dim), var(--gold), var(--gold-bright));
  transition: width 1.4s ease-out;
  box-shadow: 0 0 10px var(--gold);
}
.course-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.edu-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 18px 0 16px;
}

.edu-side {
  display: flex; flex-direction: column;
  gap: 18px;
}
.edu-box {
  padding: 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  position: relative;
}
.edu-box .h {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.edu-box .h::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--gold-dim), transparent);
}
.edu-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  padding: 7px 0;
}
.edu-row .ico { font-size: 15px; }
.edu-row .term {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.8px;
  min-width: 90px;
}
.edu-row .desc {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.4px;
}
.edu-cert {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
  padding: 4px 0;
}
.edu-cert .arrow { color: var(--gold-dim); margin-right: 6px; }

/* ============== ARSENAL / BUY MENU (Section 04) ============== */
.arsenal {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0;
  flex: 1;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
.arsenal-cats {
  background: var(--bg-primary);
  border-right: 1px solid var(--border-subtle);
  padding: 14px 0;
}
.arsenal-cat {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-left: 2px solid transparent;
  cursor: none;
  transition: all 0.15s ease;
  background: transparent; border-top: 0; border-right: 0; border-bottom: 0;
  width: 100%; text-align: left;
}
.arsenal-cat:hover {
  color: var(--text-secondary);
  background: rgba(212, 168, 67, 0.03);
  border-left-color: var(--gold-dim);
}
.arsenal-cat.active {
  color: var(--gold);
  background: rgba(212, 168, 67, 0.08);
  border-left-color: var(--gold);
}
.arsenal-cat .count {
  float: right;
  font-size: 8px;
  color: var(--text-dim);
}
.arsenal-cat.active .count { color: var(--gold-dim); }

.arsenal-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  align-content: start;
}
.weapon {
  position: relative;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  padding: 14px 12px 12px;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s ease, background 0.2s ease;
  transform-style: preserve-3d;
  text-align: left;
  display: flex; flex-direction: column;
  gap: 6px;
  cursor: none;
}
.weapon:hover {
  transform: perspective(400px) translateZ(10px) rotateX(7deg) rotateY(-5deg);
  border-color: var(--gold);
  background: var(--bg-elevated);
  z-index: 5;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}
.weapon.equipped {
  border-color: var(--gold);
  background: rgba(212, 168, 67, 0.06);
}
.weapon.equipped::after {
  content: '✓';
  position: absolute;
  top: 4px; right: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
}
.weapon .ico {
  font-size: 24px;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
}
.weapon .ico img {
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0.85;
}
.weapon .nm {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.3;
  min-height: 22px;
}
.weapon .pips {
  display: flex; gap: 3px;
}
.weapon .pip {
  width: 9px; height: 3px;
  background: var(--border-subtle);
}
.weapon .pip.on { background: var(--gold); }
.weapon .cost {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.5px;
  margin-top: auto;
}

.arsenal-foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-subtle);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  background: var(--bg-primary);
}
.arsenal-foot .total {
  margin-left: auto;
  color: var(--gold);
  font-weight: 600;
}
.arsenal-foot .total .num {
  font-size: 11px;
  font-family: var(--font-condensed);
  font-weight: 700;
  margin-left: 6px;
}

/* ============== MISSION / PROJECTS (Section 05) ============== */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.proj-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid var(--border-subtle);
  padding: 20px;
  min-height: 280px;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  cursor: none;
}
.proj-card.backend { border-left: 2px solid var(--blue); }
.proj-card.infra { border-left: 2px solid var(--green); }
.proj-card.fullstack { border-left: 2px solid var(--purple); }
.proj-card.opensource { border-left: 2px solid var(--orange); }

.proj-card:hover {
  transform: translateY(-6px) perspective(600px) rotateX(3deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  border-color: var(--border-mid);
}

.proj-classified {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: 56px;
  color: rgba(212, 168, 67, 0.12);
  letter-spacing: 4px;
  transform: rotate(-12deg);
  pointer-events: none;
  transition: opacity 0.3s ease;
  text-shadow: 0 0 0 transparent;
}
.proj-card:hover .proj-classified { opacity: 0; }

.proj-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.proj-top {
  display: flex; justify-content: space-between;
  margin-bottom: 12px;
  align-items: center;
}
.proj-type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 9px;
  background: rgba(13, 17, 23, 0.8);
  border: 1px solid currentColor;
}
.proj-type.backend { color: var(--blue); }
.proj-type.infra { color: var(--green); }
.proj-type.fullstack { color: var(--purple); }
.proj-type.opensource { color: var(--orange); }

.proj-difficulty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 1px;
}
.proj-name {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 20px;
  color: var(--text-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1.2;
}
.proj-hook {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
}
.proj-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-height: 0;
  overflow: hidden;
}
.proj-card:hover .proj-detail {
  opacity: 1;
  transform: translateY(0);
  max-height: 120px;
}
.proj-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 12px;
  margin-top: auto;
}
.proj-foot {
  display: flex; justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dashed var(--border-mid);
}
.proj-links { display: flex; gap: 6px; }
.proj-link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.15s ease;
}
.proj-link:hover { color: var(--gold); border-color: var(--gold); }
.proj-link.classified { color: var(--text-dim); border-style: dashed; }
.proj-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 9px;
  border: 1px solid currentColor;
}
.proj-status.shipped { color: var(--green); }
.proj-status.wip { color: var(--gold); animation: pulse-green 2s infinite; }
.proj-status.archived { color: var(--text-dim); }

.section-subtag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-bottom: 22px;
  margin-top: -14px;
  display: flex; gap: 18px;
}
.section-subtag span { display: inline-flex; gap: 5px; }
.section-subtag span b { color: var(--gold); font-weight: 400; }

/* ============== SCOREBOARD (Section 06) ============== */
.score-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 22px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
}
.score-map {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
}
.score-map .pre {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  margin-right: 10px;
}
.score-display {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 6px;
  line-height: 1;
  display: flex; align-items: center; gap: 14px;
}
.score-display .win { color: var(--green); text-shadow: 0 0 14px rgba(61, 216, 112, 0.4); }
.score-display .lose { color: var(--red); }
.score-display .colon { color: var(--text-muted); }
.score-side {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
}
.score-side .accent { color: var(--gold); }

.score-table {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
}
.score-row {
  display: grid;
  grid-template-columns: 56px 1.6fr 1fr 1fr 1.2fr 0.8fr;
  gap: 16px;
  padding: 11px 18px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
  position: relative;
}
.score-row:last-child { border-bottom: 0; }
.score-row.header {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  background: var(--bg-primary);
}
.score-row.data:hover { background: rgba(212, 168, 67, 0.04); }
.score-row.mvp { border-left: 2px solid var(--gold); background: rgba(212, 168, 67, 0.03); }
.score-row.mvp .rank-badge {
  background: var(--gold);
  color: var(--bg-primary);
  padding: 2px 5px;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 1.5px;
}
.score-row .rank {
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 1px;
}
.score-row .ach {
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: 0.5px;
}
.score-row .impact { color: var(--green); letter-spacing: 0.5px; }
.score-row .scale { color: var(--text-muted); }
.score-row .stack { color: var(--blue); font-size: 9px; }
.score-row .status .chip {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 2px 7px;
  border: 1px solid currentColor;
}
.score-row .status .chip.shipped { color: var(--green); }
.score-row .status .chip.live { color: var(--gold); animation: pulse-green 1.4s infinite; }

/* ============== LIVE FEED (Section 07) ============== */
.live-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
  flex: 1;
  align-items: start;
}
.live-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
}
.live-head {
  display: flex; align-items: center;
  padding: 14px 18px;
  gap: 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
}
.live-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--red-bright);
  letter-spacing: 2px;
  display: flex; align-items: center; gap: 7px;
}
.live-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: blink-red 1s ease-in-out infinite;
}
@keyframes blink-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.live-title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.live-timer {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 1.5px;
}

.feed-row {
  display: grid;
  grid-template-columns: 90px 1fr 70px;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}
.feed-row:hover { background: rgba(212, 168, 67, 0.03); }
.feed-row:last-child { border-bottom: 0; }
.feed-time {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1px;
}
.feed-desc {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.feed-desc .gold { color: var(--gold); }
.feed-desc .blue { color: var(--blue); }
.feed-desc .green { color: var(--green); }
.feed-chip {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  text-align: center;
  justify-self: end;
}
.feed-chip.wip { color: var(--orange); }
.feed-chip.commit { color: var(--blue); }
.feed-chip.planned { color: var(--text-muted); }
.feed-chip.research { color: var(--text-muted); }

.explore-card {
  background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid var(--border-mid);
  padding: 22px;
  transform: perspective(700px) rotateY(-7deg) rotateX(3deg);
  transition: transform 0.45s ease;
  box-shadow: -8px 8px 24px rgba(0, 0, 0, 0.5);
}
.explore-card:hover { transform: perspective(700px) rotateY(0deg) rotateX(0deg); }
.explore-card .h {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 4px;
}
.explore-card .sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  margin-bottom: 22px;
}
.explore-item { margin-bottom: 18px; }
.explore-item:last-child { margin-bottom: 0; }
.explore-item .top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.explore-item .nm {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.explore-item .pct {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--gold);
}
.explore-item .desc {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  margin-left: 0;
}
.explore-item .bar {
  height: 2px;
  background: var(--bg-primary);
  margin-left: 0;
  overflow: hidden;
}
.explore-item .bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold), var(--orange));
  width: 0%;
  transition: width 1.4s ease-out;
}

/* ============== CONSOLE OVERLAY ============== */
.console-clip {
  position: fixed;
  left: 135px; right: 0;
  top: 46px;
  height: 280px;
  overflow: hidden;
  z-index: 200;
  pointer-events: none;
}
.console {
  position: relative;
  width: 100%;
  height: 280px;
  background: rgba(8, 11, 15, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-dim);
  padding: 16px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}
.console.open { transform: translateY(0); }
.console .header {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-bottom: 10px;
  display: flex; gap: 14px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}
.console .out {
  flex: 1;
  overflow-y: auto;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.console .out .line { white-space: pre-wrap; }
.console .out .prompt { color: var(--gold); }
.console .out .err { color: var(--red-bright); }
.console .out .info { color: var(--blue); }
.console .out .ok { color: var(--green); }
.console .input-row {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}
.console .input-row .caret { color: var(--gold); }
.console input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  font-family: inherit;
  font-size: inherit;
  caret-color: var(--gold);
}

/* ============== ONBOARDING TOUR ============== */
.tour-trigger {
  position: fixed;
  bottom: 42px;
  right: 18px;
  width: 28px;
  height: 28px;
  background: rgba(13, 17, 23, 0.9);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  transition: all 0.15s ease;
  cursor: none;
}
.tour-trigger:hover {
  background: rgba(212, 168, 67, 0.12);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212, 168, 67, 0.25);
}

/* Click-catcher overlay (behind spotlight, above content) */
.tour-click-catcher {
  position: fixed;
  inset: 0;
  z-index: 9499;
}

/* Spotlight: box-shadow creates the darkened surround */
.tour-spotlight {
  position: fixed;
  z-index: 9501;
  border: 1px solid var(--gold);
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.82),
    0 0 0 3px rgba(212, 168, 67, 0.2),
    0 0 18px rgba(212, 168, 67, 0.4);
  pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}
/* Centered dialog overlay when no spotlight target */
.tour-dim {
  position: fixed;
  inset: 0;
  z-index: 9499;
  background: rgba(0, 0, 0, 0.82);
}

/* Tooltip card */
.tour-tip {
  position: fixed;
  z-index: 9502;
  min-width: 280px;
  max-width: 360px;
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid var(--gold-dim);
  padding: 18px 20px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(212, 168, 67, 0.06) inset;
}
.tour-tip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent);
}
.tour-step-count {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.tour-title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 16px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 10px;
  line-height: 1.2;
}
.tour-desc {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}
.tour-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tour-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 5px 12px;
  border: 1px solid;
  background: transparent;
  cursor: none;
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.tour-btn.primary {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(212, 168, 67, 0.08);
}
.tour-btn.primary:hover {
  background: rgba(212, 168, 67, 0.18);
  border-color: var(--gold);
}
.tour-btn.secondary {
  color: var(--text-muted);
  border-color: var(--border-mid);
}
.tour-btn.secondary:hover {
  color: var(--text-secondary);
  border-color: var(--border-bright);
}
.tour-btn.skip {
  margin-left: auto;
  color: var(--text-dim);
  border-color: var(--border-subtle);
  font-size: 8px;
}
.tour-btn.skip:hover {
  color: var(--text-muted);
  border-color: var(--border-mid);
}

/* ============== TOUR TIP — overflow clamp ============== */
.tour-tip {
  max-width: min(360px, calc(100vw - 24px));
}

/* ============== DOSSIER MODAL ============== */
@keyframes level-unlock {
  0%   { opacity: 0; transform: translateX(-14px); }
  45%  { opacity: 1; transform: translateX(3px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes dossier-in {
  from { opacity: 0; transform: scale(0.96) translateY(-14px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

.dossier-overlay {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 16px 16px;
}

.dossier-modal {
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - 80px);
  background: linear-gradient(160deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--gold-dim);
  display: flex;
  flex-direction: column;
  animation: dossier-in 0.22s ease-out;
  overflow: hidden;
}

.dossier-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.dossier-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.dossier-clearance {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-right: auto;
}
.dossier-close {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: border-color 0.15s, color 0.15s;
}
.dossier-close:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}

.dossier-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ---- LEFT PANEL ---- */
.dossier-left {
  width: 220px;
  min-width: 220px;
  border-right: 1px solid var(--border-subtle);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  background: rgba(0,0,0,0.25);
}

.dossier-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  background: var(--bg-elevated);
  border: 1px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
  margin: 0 auto 8px;
  overflow: hidden;
}
.dossier-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  filter: saturate(0.95) contrast(1.05);
}
.dossier-avatar .c-bl,
.dossier-avatar .c-br {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--gold);
  border-style: solid;
  bottom: -1px;
}
.dossier-avatar .c-bl {
  left: -1px;
  border-width: 0 0 2px 2px;
}
.dossier-avatar .c-br {
  right: -1px;
  border-width: 0 2px 2px 0;
}

.dossier-callsign {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold-dim);
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 2px;
}
.dossier-name {
  font-family: var(--font-condensed);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.06em;
  text-align: center;
}
.dossier-role {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--blue);
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 4px;
}
.dossier-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 6px 0;
}
.dossier-stat-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.dossier-stat-row .d-green { color: var(--green); }
.dossier-stat-row .d-gold  { color: var(--gold); }

.dossier-total-xp {
  margin-top: 8px;
  text-align: center;
  padding: 8px;
  border: 1px solid var(--gold-dim);
  background: rgba(var(--gold-rgb, 200,160,60), 0.06);
}
.dossier-xp-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}
.dossier-xp-val {
  font-family: var(--font-condensed);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
}

/* ---- RIGHT PANEL ---- */
.dossier-right {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.dossier-timeline-hdr {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

/* ---- LEVEL ROW ---- */
.dossier-level {
  display: flex;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
}
.dossier-level.revealed {
  animation: level-unlock 0.32s ease-out forwards;
  pointer-events: auto;
}
.dossier-level.locked.revealed {
  animation: none;
  opacity: 1;
}

.dossier-level-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 52px;
}
.dossier-lvl-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--gold);
  background: var(--bg-elevated);
  border: 1px solid var(--gold-dim);
  padding: 3px 5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-align: center;
}
.dossier-level.locked .dossier-lvl-badge {
  color: var(--text-dim);
  border-color: var(--border-subtle);
}
.dossier-connector {
  width: 1px;
  flex: 1;
  min-height: 14px;
  background: var(--border-subtle);
  margin: 2px 0;
}

.dossier-level-card {
  flex: 1;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.dossier-level.active .dossier-level-card {
  border-color: var(--green);
  background: rgba(0, 180, 100, 0.05);
}
.dossier-level.locked .dossier-level-card {
  opacity: 0.45;
  filter: grayscale(0.6);
}

.dossier-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.dossier-period {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.dossier-status-chip {
  font-family: var(--font-mono);
  font-size: 8px;
  padding: 2px 6px;
  border: 1px solid;
  letter-spacing: 0.05em;
}
.dossier-status-chip.unlocked { color: var(--blue);  border-color: var(--blue);  }
.dossier-status-chip.active   { color: var(--green); border-color: var(--green); }
.dossier-status-chip.locked   { color: var(--text-dim);     border-color: var(--border-subtle);}

.dossier-lvl-title {
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  margin-bottom: 1px;
}
.dossier-lvl-org {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold-dim);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.dossier-lvl-detail {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.dossier-lvl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
}
.dossier-xp-gained {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 0.08em;
}

/* ---- OP CARD HINT ---- */
.op-card-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold-dim);
  letter-spacing: 0.12em;
  text-align: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  transition: color 0.15s;
}
.card-3d-wrap:hover .op-card-hint {
  color: var(--gold);
}

/* ============== TARGET ANALYSIS HERO ============== */

.ta-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Header bar */
.ta-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ta-header.visible {
  opacity: 1;
  transform: translateY(0);
}
.ta-header-icon {
  color: var(--gold);
  font-size: 14px;
  flex-shrink: 0;
}
.ta-header-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 2px;
  flex-shrink: 0;
}
.ta-progress {
  flex: 1;
  height: 3px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.ta-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--gold-dim), var(--gold-bright));
  box-shadow: 0 0 8px var(--gold);
}
.ta-progress.filling .ta-progress-fill {
  animation: ta-prog 4s ease-out 0.1s forwards;
}
@keyframes ta-prog { to { width: 100%; } }

.ta-header-pct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 1px;
  flex-shrink: 0;
  opacity: 0;
}
.ta-header.visible .ta-header-pct {
  animation: fade-in 0.3s 4.1s forwards;
}

/* Body: two columns */
.ta-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
}

/* Left panel */
.ta-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ta-left.visible { opacity: 1; }

/* Avatar box */
.ta-avatar-box {
  position: relative;
  width: 164px;
  height: 164px;
  background: var(--bg-primary);
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.ta-avatar-box.broken {
  overflow: hidden;
}
.ta-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0;
  transform: scale(1.08);
  filter: saturate(0.85) contrast(1.05);
  transition: opacity 0.35s ease, transform 0.45s ease, filter 0.45s ease;
  z-index: 2;
}
.ta-avatar-photo.visible {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1) contrast(1.06);
}
.ta-corner {
  position: absolute;
  width: 12px; height: 12px;
  border-color: var(--gold);
  border-style: solid;
  transition: border-color 0.4s ease;
}
.ta-corner.tl { top: -1px; left: -1px;  border-width: 2px 0 0 2px; }
.ta-corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.ta-corner.bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.ta-corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.ta-avatar-box.matched {
  border-color: var(--green);
  box-shadow: 0 0 22px rgba(61, 216, 112, 0.22), inset 0 0 24px rgba(61, 216, 112, 0.05);
}
.ta-avatar-box.matched .ta-corner { border-color: var(--green); }

.ta-scan-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--green) 30%, var(--green) 70%, transparent);
  box-shadow: 0 0 10px var(--green), 0 0 22px rgba(61, 216, 112, 0.35);
  z-index: 4;
  animation: ta-scan 1.15s linear infinite;
  pointer-events: none;
}
@keyframes ta-scan {
  0%   { top: -2px; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.ta-avatar-initials {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 52px;
  color: var(--gold);
  letter-spacing: 6px;
  z-index: 2;
  text-shadow: 0 0 24px rgba(212, 168, 67, 0.5);
  transition: opacity 0.18s ease;
}
.ta-avatar-initials.hidden {
  opacity: 0;
}

.ta-avatar-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(212, 168, 67, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 168, 67, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1;
}
.ta-glass-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(21deg, transparent 22%, rgba(0, 0, 0, 0.32) 22.4%, transparent 22.9%),
    linear-gradient(151deg, transparent 35%, rgba(0, 0, 0, 0.26) 35.4%, transparent 35.9%),
    linear-gradient(83deg, transparent 57%, rgba(0, 0, 0, 0.24) 57.3%, transparent 57.7%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.ta-glass-overlay.shatter {
  animation: ta-glass-shatter 0.2s ease-out forwards;
}
@keyframes ta-glass-shatter {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.008); }
}
.ta-glass-shard {
  position: absolute;
  z-index: 5;
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.75), rgba(0, 0, 0, 0.45));
  border: 1px solid rgba(0, 0, 0, 0.65);
  clip-path: polygon(50% 0, 100% 38%, 62% 100%, 8% 70%, 0 24%);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: ta-shard-fall var(--dur, 640ms) cubic-bezier(0.22, 0.75, 0.2, 1) var(--delay, 0ms) forwards;
}
@keyframes ta-shard-fall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    opacity: 0.85;
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--rot, 0deg));
  }
}
.ta-shoot-hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 1.8px;
  color: var(--gold-bright);
  background: rgba(8, 11, 15, 0.75);
  border: 1px solid var(--gold-dim);
  padding: 2px 6px;
  white-space: nowrap;
  animation: ta-shoot-pulse 1.2s ease-in-out infinite;
}
.ta-shoot-hint.revealed {
  color: var(--green);
  border-color: var(--green-dim);
  animation: none;
}
@keyframes ta-shoot-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(212, 168, 67, 0); }
  50% { box-shadow: 0 0 12px rgba(212, 168, 67, 0.32); }
}

/* Match badge */
.ta-match-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  opacity: 0;
  transition: opacity 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ta-match-badge.visible {
  opacity: 1;
  color: var(--green);
  border-color: var(--green-dim);
  animation: match-flash-bg 0.6s ease-out;
}
@keyframes match-flash-bg {
  0%   { background: rgba(61, 216, 112, 0.18); }
  60%  { background: rgba(61, 216, 112, 0.06); }
  100% { background: transparent; }
}
.ta-match-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: pulse-green 1.6s infinite;
  flex-shrink: 0;
}

/* Signal bars */
.ta-sig-row {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.ta-sig-bar {
  width: 8px;
  background: var(--border-mid);
  transition: background 0.35s ease, box-shadow 0.35s ease;
  border-radius: 1px;
}
.ta-sig-bar.h1 { height: 8px; }
.ta-sig-bar.h2 { height: 12px; }
.ta-sig-bar.h3 { height: 16px; }
.ta-sig-bar.h4 { height: 20px; }
.ta-sig-bar.h5 { height: 24px; }
.ta-sig-bar.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.ta-sig-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 1px;
  margin-left: 6px;
  align-self: center;
}

/* Right panel: fields */
.ta-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0 8px 24px;
  border-left: 1px solid var(--border-subtle);
}

.ta-field {
  display: grid;
  grid-template-columns: 110px 18px 1fr;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(28, 37, 53, 0.6);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.ta-field.visible {
  opacity: 1;
  transform: translateX(0);
}
.ta-field:last-child { border-bottom: 0; }

.ta-field-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ta-field-sep {
  font-size: 10px;
  color: var(--gold-dim);
}
.ta-field-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: 1px;
}
.ta-accent-gold  { color: var(--gold); }
.ta-accent-green { color: var(--green); }

/* TypeWriter cursor */
.tw-cursor {
  display: inline-block;
  width: 8px;
  animation: tw-blink 0.55s steps(1) infinite;
  color: var(--gold);
  font-size: 0.85em;
  vertical-align: baseline;
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Stack section */
.ta-section {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ta-section.visible {
  opacity: 1;
  transform: translateY(0);
}
.ta-section-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 2.5px;
  margin-bottom: 12px;
}
.ta-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border-mid), transparent);
}
.ta-srow {
  display: grid;
  grid-template-columns: 220px 1fr 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
.ta-srow-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.8px;
}
.ta-srow-bar {
  height: 3px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.ta-srow-fill {
  height: 100%;
  width: 0%;
  transition: width 1.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ta-srow-fill.gold { background: linear-gradient(to right, var(--gold-dim), var(--gold)); }
.ta-srow-fill.blue { background: linear-gradient(to right, var(--blue-dim), var(--blue)); }
.ta-srow-pct {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-align: right;
}

/* Metrics */
.ta-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ta-metrics.visible {
  opacity: 1;
  transform: translateY(0);
}
.ta-metric {
  border-left: 2px solid var(--border-mid);
  padding: 6px 0 6px 12px;
  opacity: 0;
}
.ta-metrics.visible .ta-metric {
  animation: ta-metric-in 0.35s ease-out forwards;
}
@keyframes ta-metric-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ta-metric-val {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 26px;
  color: var(--gold);
  line-height: 1;
  letter-spacing: 1px;
}
.ta-metric-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  letter-spacing: 2px;
  margin-top: 5px;
  text-transform: uppercase;
}

/* CTA */
.ta-cta-wrap {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ta-cta-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}
.ta-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: rgba(212, 168, 67, 0.04);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: ta-cta-pulse 2s ease-in-out infinite;
}
.ta-cta:hover {
  background: rgba(212, 168, 67, 0.12);
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(212, 168, 67, 0.15), inset 0 0 20px rgba(212, 168, 67, 0.04);
  animation: none;
}
@keyframes ta-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.35); }
  50%       { box-shadow: 0 0 0 7px rgba(212, 168, 67, 0); }
}
.ta-cta-chevron {
  font-size: 13px;
  opacity: 0.8;
  flex-shrink: 0;
}
.ta-cta-dash {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold-dim), transparent);
}