:root {
  --bg: #000000;
  --bg-1: #050608;
  --bg-2: #0a0c10;
  --fg: #F2F4F7;
  --fg-2: rgba(242, 244, 247, 0.62);
  --fg-3: rgba(242, 244, 247, 0.38);
  --fg-4: rgba(242, 244, 247, 0.18);
  --hair: rgba(180, 210, 255, 0.08);
  --hair-strong: rgba(180, 210, 255, 0.16);
  --glass: rgba(120, 170, 230, 0.025);
  --glass-2: rgba(120, 170, 230, 0.045);

  --energy: #6FB8FF;            /* energy blue */
  --energy-dim: rgba(111, 184, 255, 0.55);
  --energy-glow: rgba(111, 184, 255, 0.18);

  --gold: #E8C268;              /* seal gold */
  --gold-dim: rgba(232, 194, 104, 0.55);
  --gold-glow: rgba(232, 194, 104, 0.16);

  --danger: #FF4D4D;
  --danger-dim: rgba(255, 77, 77, 0.55);
  --danger-glow: rgba(255, 77, 77, 0.18);

  --hue-shift: 0deg;
  --accent: oklch(from var(--energy) l c calc(h + var(--hue-shift)));
  --accent-dim: color-mix(in oklch, var(--accent) 55%, transparent);
  --accent-glow: color-mix(in oklch, var(--accent) 18%, transparent);

  --rail-l: 280px;
  --rail-r: 340px;
  --pad: 18px;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  height: 100vh;
  overflow: hidden;
}
button { font-family: inherit; color: inherit; }

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 700px at 50% 50%, var(--accent-glow), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, var(--gold-glow), transparent 65%),
    repeating-linear-gradient(0deg, rgba(180,210,255,0.018) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(180,210,255,0.018) 0 1px, transparent 1px 80px),
    var(--bg);
  mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
  z-index: 0;
  transition: background 600ms ease;
}

#root { position: relative; z-index: 1; height: 100vh; }

/* ── App shell ─────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--rail-l) 1fr var(--rail-r);
  grid-template-rows: 56px 1fr 76px;
  height: 100vh;
}

/* ── Top bar ───────────────────────────────────────────────── */
.topbar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--rail-l) 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--hair);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.tb-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--pad);
  border-right: 1px solid var(--hair);
  height: 100%;
}
.brand-mark {
  width: 22px; height: 22px;
  position: relative;
  display: grid; place-items: center;
}
.brand-mark::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--energy);
  transform: rotate(45deg);
}
.brand-mark::after {
  content: ""; position: absolute; inset: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 8px var(--gold-glow);
}
.brand-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.brand-name em { color: var(--energy); font-style: normal; font-weight: 500; }
.brand-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tb-status {
  display: flex; align-items: center; gap: 22px;
  padding: 0 var(--pad);
  height: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
}
.tb-status .cell { display: flex; align-items: baseline; gap: 8px; }
.tb-status .cell label { color: var(--fg-3); letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; }
.tb-status .cell .v { color: var(--fg); font-weight: 500; }
.tb-status .cell .v.energy { color: var(--energy); }
.tb-status .cell .v.gold { color: var(--gold); }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot.energy { background: var(--energy); box-shadow: 0 0 8px var(--energy-glow); }
.dot.gold { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }

/* role switcher */
.role-toggle {
  display: inline-flex;
  border: 1px solid var(--hair-strong);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.role-toggle button {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border-right: 1px solid var(--hair);
}
.role-toggle button:last-child { border-right: 0; }
.role-toggle button.on {
  color: var(--bg);
  background: var(--gold);
}
.role-toggle button.on.energy {
  color: var(--bg);
  background: var(--energy);
}
.role-toggle button .role-glyph {
  width: 6px; height: 6px;
  background: currentColor;
  display: inline-block;
}

.tb-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 0 var(--pad);
  border-left: 1px solid var(--hair);
  height: 100%;
}
.icon-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--hair);
  background: var(--glass);
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  transition: all 200ms ease;
}
.icon-btn:hover { color: var(--energy); border-color: var(--energy-dim); }
.tb-session { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.12em; }

/* ── Hangar rail ──────────────────────────────────────────── */
.hangar {
  border-right: 1px solid var(--hair);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(111,184,255,0.022), transparent 30%);
  overflow: hidden;
}
.rail-header {
  padding: 14px var(--pad) 10px;
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between;
}
.rail-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.rail-title b { color: var(--fg); font-weight: 500; }
.rail-count { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }

.hangar-list {
  flex: 1; overflow-y: auto;
  padding: 8px 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.hangar-list::-webkit-scrollbar { width: 6px; }
.hangar-list::-webkit-scrollbar-thumb { background: var(--hair-strong); }

.pilder {
  position: relative;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  background: var(--glass);
  cursor: pointer;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  transition: all 180ms ease;
}
/* TASK HG-CLOSE-THE-LOOP · 對話入口 · 點 Pilder 卡 → Soul Chat */
.pilder-chat-btn {
  background: rgba(232, 194, 104, 0.06);
  border: 1px solid var(--gold-dim, rgba(232, 194, 104, 0.4));
  color: var(--gold);
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  align-self: center;
  transition: all 180ms;
}
.pilder-chat-btn:hover {
  background: rgba(232, 194, 104, 0.18);
  box-shadow: 0 0 10px rgba(232, 194, 104, 0.4);
  transform: scale(1.1);
}
.pilder:hover { border-color: var(--hair-strong); background: var(--glass-2); }
.pilder.active {
  border-color: var(--accent-dim);
  background: linear-gradient(90deg, var(--accent-glow), transparent 70%);
}
.pilder.active::before {
  content: "";
  position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.pilder-glyph {
  width: 36px; height: 36px;
  border: 1px solid var(--hair-strong);
  background: var(--bg-2);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-2);
  position: relative;
}
.pilder.active .pilder-glyph { border-color: var(--accent); color: var(--accent); }
.pilder-glyph::after {
  content: "";
  position: absolute; inset: 4px;
  border: 1px dashed currentColor;
  opacity: 0.3;
}
.pilder-meta { min-width: 0; }
.pilder-name {
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pilder-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-3);
  letter-spacing: 0.1em;
  margin-top: 2px;
  text-transform: uppercase;
}
.pilder-state {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
}
.state-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 6px;
  border: 1px solid var(--hair-strong);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.state-badge .sd { width: 4px; height: 4px; border-radius: 50%; }
.state-badge.docking { color: var(--energy); border-color: var(--energy-dim); }
.state-badge.docking .sd { background: var(--energy); box-shadow: 0 0 6px var(--energy-glow); animation: blink 1.2s ease-in-out infinite; }
.state-badge.standby { color: var(--fg-2); }
.state-badge.standby .sd { background: var(--fg-3); }
.state-badge.linked { color: var(--gold); border-color: var(--gold-dim); }
.state-badge.linked .sd { background: var(--gold); box-shadow: 0 0 6px var(--gold-glow); }
.state-badge.sealed { color: var(--danger); border-color: var(--danger-dim); }
.state-badge.sealed .sd { background: var(--danger); }
@keyframes blink { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.fp-mini {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--gold);
  letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 4px;
}
.fp-mini::before {
  content: "";
  width: 8px; height: 8px;
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 30%, transparent 32%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 1px, var(--gold-dim) 1px 2px);
  border-radius: 50%;
}

.hangar-add {
  margin: 6px 8px 12px;
  padding: 11px;
  border: 1px dashed var(--hair-strong);
  background: transparent;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 200ms ease;
}
.hangar-add:hover { color: var(--energy); border-color: var(--energy-dim); }

.hangar-foot {
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hangar-foot .cell {
  padding: 10px var(--pad);
  border-right: 1px solid var(--hair);
  font-family: var(--font-mono);
}
.hangar-foot .cell:last-child { border-right: 0; }
.hangar-foot .cell label {
  display: block; color: var(--fg-3); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
}
.hangar-foot .cell .v { font-size: 14px; color: var(--fg); font-weight: 500; margin-top: 2px; }

/* ── Hub (center) ────────────────────────────────────────── */
.hub {
  overflow-y: auto;
  position: relative;
  padding: 0;
}
.hub::-webkit-scrollbar { width: 8px; }
.hub::-webkit-scrollbar-thumb { background: var(--hair-strong); }

.hub-header {
  position: sticky; top: 0; z-index: 5;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--hair);
  padding: 16px var(--pad) 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
}
.hub-crumb {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hub-crumb b { color: var(--fg-2); font-weight: 500; }
.hub-crumb .energy { color: var(--energy); }
.hub-title {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.hub-title h1 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.005em; }
/* P1-HERO-CLICKABLE · 教練 2026-05-15 · Hero name 可點 → Soul Chat */
.hub-title h1.hub-hero-clickable {
  cursor: pointer;
  transition: color 180ms, text-shadow 180ms;
  display: inline-block;
  outline: none;
}
.hub-title h1.hub-hero-clickable:hover,
.hub-title h1.hub-hero-clickable:focus {
  color: var(--accent, #6FB8FF);
  text-shadow: 0 0 18px var(--accent-glow, rgba(111, 184, 255, 0.45));
}
.hub-title h1.hub-hero-clickable::after {
  content: " 💬";
  font-size: 14px;
  opacity: 0;
  margin-left: 6px;
  transition: opacity 180ms;
  vertical-align: middle;
}
.hub-title h1.hub-hero-clickable:hover::after,
.hub-title h1.hub-hero-clickable:focus::after {
  opacity: 1;
}
.hub-title .arrow {
  font-family: var(--font-mono);
  color: var(--energy);
  font-size: 18px;
  letter-spacing: 0.4em;
}
.hub-title .body-name {
  font-size: 18px;
  color: var(--gold);
  font-weight: 500;
}
.hub-title .codex {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.14em;
}
.hub-actions {
  display: flex; align-items: center; gap: 8px;
}
.btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--hair-strong);
  background: var(--glass);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 200ms ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { border-color: var(--energy-dim); color: var(--energy); }
.btn.primary {
  background: color-mix(in oklch, var(--energy) 14%, transparent);
  border-color: var(--energy-dim);
  color: var(--energy);
}
.btn.gold {
  background: color-mix(in oklch, var(--gold) 14%, transparent);
  border-color: var(--gold-dim);
  color: var(--gold);
}

/* ── Docking ring (the centerpiece) ──────────────────────── */
.dock-stage {
  position: relative;
  padding: 20px 18px 8px;
  display: grid;
  grid-template-columns: 1fr;
}
.dock-frame {
  position: relative;
  aspect-ratio: 1.35 / 1;
  border: 1px solid var(--hair);
  background:
    radial-gradient(circle at 50% 50%, rgba(111,184,255,0.05), transparent 60%),
    var(--glass);
  overflow: hidden;
}
.dock-corner {
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--hair-strong);
  border-style: solid;
}
.dock-corner.tl { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.dock-corner.tr { top: 6px; right: 6px; border-width: 1px 1px 0 0; }
.dock-corner.bl { bottom: 6px; left: 6px; border-width: 0 0 1px 1px; }
.dock-corner.br { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }

.dock-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* tag callouts on the ring */
.api-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: rgba(0,0,0,0.65);
  border: 1px solid var(--hair-strong);
  padding: 5px 8px;
  display: flex; flex-direction: column; gap: 1px;
  cursor: pointer;
  transition: all 200ms ease;
  pointer-events: auto;
}
.api-tag:hover, .api-tag.hover {
  border-color: var(--energy);
  color: var(--energy);
}
.api-tag.locked {
  border-color: var(--gold-dim);
  color: var(--gold);
}
.api-tag .api-num {
  font-size: 9px;
  color: var(--fg-3);
  letter-spacing: 0.18em;
}
.api-tag .api-zh {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
  text-transform: none;
}
.api-tag .api-val {
  font-size: 11px;
  color: var(--fg);
  font-weight: 500;
  margin-top: 2px;
}
.api-tag .api-val.gold { color: var(--gold); }

.dock-overlay-l, .dock-overlay-r {
  position: absolute;
  top: 18px; bottom: 18px;
  width: 220px;
  display: flex; flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.dock-overlay-l { left: 18px; align-items: flex-start; }
.dock-overlay-r { right: 18px; align-items: flex-end; }

.entity-card {
  pointer-events: auto;
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--hair-strong);
  padding: 10px 12px;
  min-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
}
.entity-card.pilder { border-left: 2px solid var(--energy); }
.entity-card.body { border-right: 2px solid var(--gold); }
.ec-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ec-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.entity-card.pilder .ec-name { color: var(--energy); }
.entity-card.body .ec-name { color: var(--gold); }
.ec-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-2);
  letter-spacing: 0.06em;
}
.ec-meter {
  margin-top: 4px;
  height: 4px;
  background: var(--hair);
  position: relative;
}
.ec-meter > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: currentColor;
  display: block;
}
.entity-card.pilder .ec-meter > i { color: var(--energy); }
.entity-card.body .ec-meter > i { color: var(--gold); }

.dock-status {
  position: absolute;
  left: 50%; top: 12px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--energy);
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--energy-dim);
  padding: 6px 12px;
  display: flex; align-items: center; gap: 8px;
}
.dock-status .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--energy);
  box-shadow: 0 0 8px var(--energy-glow);
  animation: blink 1.2s ease-in-out infinite;
}

/* ── API panels grid below ring ──────────────────────────── */
.api-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(110px, auto);
  gap: 12px;
  padding: 14px 18px 18px;
}
.panel {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--hair);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color 180ms ease, background 180ms ease;
}
.panel:hover { border-color: var(--hair-strong); background: var(--glass-2); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair);
}
.panel-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-4);
  letter-spacing: 0.18em;
}
.panel-en {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.panel-zh {
  font-size: 10.5px;
  color: var(--fg-3);
}
.panel-meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.panel-body { flex: 1; padding: 12px; min-height: 0; position: relative; }
.panel.locked .panel-head { background: linear-gradient(90deg, var(--gold-glow), transparent 80%); }
.panel.locked .panel-en { color: var(--gold); }
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--hair-strong);
  pointer-events: none;
}
.panel::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.panel::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

/* ── Genesis ── */
.gen-slot {
  position: relative;
  height: 100%;
  display: grid; grid-template-rows: 1fr auto; gap: 10px;
}
.gen-pad {
  position: relative;
  border: 1px dashed var(--energy-dim);
  background: radial-gradient(circle at 50% 60%, var(--energy-glow), transparent 65%);
  display: grid; place-items: center;
  min-height: 110px;
}
.gen-flame {
  width: 56px; height: 56px;
  position: relative;
}
.gen-flame::before, .gen-flame::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--energy);
}
.gen-flame::after {
  inset: 12px;
  background: radial-gradient(circle at 50% 35%, var(--energy), transparent 70%);
  border: 0;
  box-shadow: 0 0 24px var(--energy-glow);
  animation: flicker 1.4s ease-in-out infinite;
}
@keyframes flicker {
  0%,100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.gen-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.field {
  border: 1px solid var(--hair);
  background: var(--glass);
  padding: 6px 8px;
}
.field label {
  display: block; font-family: var(--font-mono);
  font-size: 9px; color: var(--fg-3);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.field .v { font-family: var(--font-mono); font-size: 11px; color: var(--fg); margin-top: 2px; }

/* ── Resonance ── */
.res {
  height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
}
.res-headline {
  display: flex; align-items: baseline; gap: 14px;
}
.res-num {
  font-family: var(--font-mono);
  font-weight: 300; font-size: 44px; line-height: 1;
  color: var(--energy); letter-spacing: -0.02em;
}
.res-num small { font-size: 14px; color: var(--fg-3); margin-left: 2px; }
.res-axes { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
.res-axes b { color: var(--fg); font-weight: 500; }
.res-foot {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
}

/* ── Shaping knobs ── */
.knob-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  height: 100%;
}
.knob {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--hair);
  background: var(--glass);
  padding: 12px 4px 10px;
}
.knob-dial {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: conic-gradient(from -135deg,
    var(--energy) 0deg, var(--energy) var(--ang, 180deg),
    var(--hair) var(--ang, 180deg), var(--hair) 270deg,
    transparent 270deg);
  display: grid; place-items: center;
  position: relative;
  cursor: ns-resize;
}
.knob-dial::before {
  content: "";
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #11161c, #04060a 70%);
  border: 1px solid var(--hair-strong);
}
.knob-dial::after {
  content: "";
  position: absolute;
  width: 2px; height: 12px;
  background: var(--energy);
  top: 8px; left: 50%;
  transform-origin: center 30px;
  transform: translateX(-50%) rotate(calc(var(--ang, 180deg) - 135deg));
  box-shadow: 0 0 6px var(--energy-glow);
}
.knob-val {
  position: absolute; top: 36px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  z-index: 2;
}
.knob-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); }
.knob-zh { font-size: 10px; color: var(--fg-3); }

.coach-only {
  position: relative;
}
.coach-only::after {
  content: "COACH ONLY";
  position: absolute; right: 10px; top: 8px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--gold); letter-spacing: 0.16em;
  border: 1px solid var(--gold-dim);
  padding: 1px 5px;
}

/* ── Topology ── */
.topo {
  position: relative; height: 100%;
}
.topo svg { width: 100%; height: 100%; display: block; }
.topo-stats {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-2);
}
.topo-stats .s b { display: block; font-size: 13px; color: var(--fg); font-weight: 500; }

/* ── Crystal ── */
.crystal { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; height: 100%; }
.crystal-headline { display: flex; justify-content: space-between; align-items: baseline; }
.crystal-pct { font-family: var(--font-mono); font-size: 32px; font-weight: 300; }
.crystal-pct small { color: var(--fg-3); font-size: 13px; }
.crystal-state { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--energy); }
.crystal-bar {
  height: 18px;
  border: 1px solid var(--hair-strong);
  display: grid;
  grid-template-columns: repeat(48, 1fr);
}
.crystal-cell { border-right: 1px solid var(--hair); }
.crystal-cell.filled { background: var(--energy); box-shadow: 0 0 6px var(--energy-glow); }
.crystal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-family: var(--font-mono); }
.crystal-stat { border: 1px solid var(--hair); padding: 6px 8px; background: var(--glass); }
.crystal-stat label { display: block; font-size: 9px; color: var(--fg-3); letter-spacing: 0.14em; text-transform: uppercase; }
.crystal-stat .v { font-size: 13px; color: var(--fg); margin-top: 2px; }

/* ── Synesthesia ── */
.synes { display: grid; grid-template-rows: auto 1fr; gap: 8px; height: 100%; }
.synes-rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.synes-cell {
  border: 1px solid var(--hair);
  background: var(--glass);
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.synes-cell.on { border-color: var(--energy-dim); }
.synes-cell-name { font-family: var(--font-mono); font-size: 9px; color: var(--fg-3); letter-spacing: 0.14em; text-transform: uppercase; }
.synes-rate { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; }
.synes-cell.on .synes-rate { color: var(--energy); }
.synes-stream {
  border: 1px solid var(--hair);
  background: var(--glass);
  overflow: hidden;
  position: relative;
}
.synes-stream svg { width: 100%; height: 100%; display: block; }

/* ── Right rail (Telemetry / Vigil / Bodies) ─────────────── */
.tel {
  border-left: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(232,194,104,0.025), transparent 25%);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.tel::-webkit-scrollbar { width: 6px; }
.tel::-webkit-scrollbar-thumb { background: var(--hair-strong); }

.tel-section {
  border-bottom: 1px solid var(--hair);
  padding: 14px var(--pad);
}
.tel-section h3 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; justify-content: space-between;
}
.tel-section.vigil h3 { color: var(--gold); }
.tel-section .h-tag { color: var(--fg-4); font-weight: 400; }

/* bodies list */
.body-list { display: flex; flex-direction: column; gap: 6px; }
.body-card {
  border: 1px solid var(--hair);
  background: var(--glass);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  cursor: pointer;
  transition: all 180ms ease;
}
.body-card:hover { border-color: var(--gold-dim); background: color-mix(in oklch, var(--gold) 5%, transparent); }
.body-card.active {
  border-color: var(--gold);
  background: linear-gradient(90deg, var(--gold-glow), transparent 60%);
}
.body-name { font-size: 12.5px; font-weight: 500; }
.body-id { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-3); letter-spacing: 0.1em; margin-top: 2px; }
.body-load {
  font-family: var(--font-mono);
  text-align: right;
}
.body-load b { display: block; color: var(--fg); font-weight: 500; font-size: 13px; }
.body-load span { font-size: 9px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; }
.body-card.active .body-load b { color: var(--gold); }

/* seal */
.seal-fp {
  position: relative;
  height: 130px;
  border: 1px solid var(--gold-dim);
  background: radial-gradient(circle at 50% 50%, var(--gold-glow), transparent 70%);
  display: grid; place-items: center;
  margin-bottom: 10px;
  overflow: hidden;
}
.seal-fp svg { width: 90px; height: 90px; }
.seal-fp::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(232,194,104,0.04) 4px 5px);
}
.seal-fp .lbl {
  position: absolute; bottom: 6px; left: 8px; right: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--gold); letter-spacing: 0.14em;
  display: flex; justify-content: space-between;
}

.kv { display: grid; gap: 4px; font-family: var(--font-mono); font-size: 11px; }
.kv-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--hair); }
.kv-row:last-child { border-bottom: 0; }
.kv-row label { color: var(--fg-3); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.kv-row .v { color: var(--fg); text-align: right; word-break: break-all; }
.kv-row .v.gold { color: var(--gold); }
.kv-row .v.energy { color: var(--energy); }

.iso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.iso {
  border: 1px solid var(--hair);
  padding: 7px 9px;
}
.iso.green { border-color: var(--energy-dim); }
.iso.gold { border-color: var(--gold-dim); }
.iso label { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--fg-3); letter-spacing: 0.14em; text-transform: uppercase; }
.iso .v { font-family: var(--font-mono); font-size: 11px; margin-top: 2px; }
.iso.green .v { color: var(--energy); }
.iso.gold .v { color: var(--gold); }

.permission-banner {
  border: 1px solid var(--gold-dim);
  background: color-mix(in oklch, var(--gold) 6%, transparent);
  color: var(--gold);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.permission-banner.pilot {
  border-color: var(--energy-dim);
  background: color-mix(in oklch, var(--energy) 6%, transparent);
  color: var(--energy);
}

.threats { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 10px; }
.threat { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; padding: 6px 8px; border: 1px solid var(--hair); background: var(--glass); align-items: center; }
.threat time { color: var(--fg-3); }
.lvl { font-size: 9px; letter-spacing: 0.14em; padding: 1px 6px; border: 1px solid var(--hair-strong); }
.lvl.info { color: var(--fg-2); }
.lvl.warn { color: var(--gold); border-color: var(--gold-dim); }
.lvl.crit { color: var(--danger); border-color: var(--danger-dim); }

/* ── Bottom command bar with KILL SWITCH ───────────────── */
.cmdbar {
  grid-column: 1 / -1;
  border-top: 1px solid var(--hair);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.85));
  display: grid;
  grid-template-columns: var(--rail-l) 1fr var(--rail-r);
  align-items: stretch;
}
.cmd-l, .cmd-r {
  display: flex; align-items: center;
  padding: 0 var(--pad);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.14em;
  gap: 18px;
  border-right: 1px solid var(--hair);
}
.cmd-r { border-right: 0; border-left: 1px solid var(--hair); justify-content: flex-end; }
.cmd-l b, .cmd-r b { color: var(--fg); font-weight: 500; }
.cmd-l .energy, .cmd-r .energy { color: var(--energy); }
.cmd-l .gold, .cmd-r .gold { color: var(--gold); }

.cmd-c {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}

.kill-wrap {
  position: relative;
  display: flex; align-items: center; gap: 14px;
}
.kill-meta {
  display: flex; flex-direction: column; gap: 2px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.kill-meta b { color: var(--danger); font-weight: 500; }
.kill-arm-toggle {
  width: 16px; height: 16px;
  border: 1px solid var(--hair-strong);
  background: var(--glass);
  cursor: pointer;
  display: inline-grid; place-items: center;
}
.kill-arm-toggle.armed {
  border-color: var(--danger);
  background: var(--danger);
  box-shadow: 0 0 10px var(--danger-glow);
}

.kill-btn {
  position: relative;
  width: 200px;
  height: 56px;
  border: 1px solid var(--danger-dim);
  background:
    linear-gradient(180deg, rgba(255,77,77,0.18), rgba(255,77,77,0.04));
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: not-allowed;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  transition: all 200ms ease;
}
.kill-btn::before, .kill-btn::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--danger);
  display: inline-block;
}
.kill-btn.armed {
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,77,77,0.32), rgba(255,77,77,0.08));
  box-shadow: 0 0 30px rgba(255,77,77,0.28), inset 0 0 0 1px var(--danger);
  animation: killpulse 1.4s ease-in-out infinite;
}
.kill-btn.armed:hover {
  background: linear-gradient(180deg, rgba(255,77,77,0.55), rgba(255,77,77,0.18));
  color: #fff;
}
.kill-btn.firing {
  background: var(--danger);
  color: #000;
  animation: none;
}
@keyframes killpulse {
  0%,100% { box-shadow: 0 0 18px rgba(255,77,77,0.18), inset 0 0 0 1px var(--danger); }
  50% { box-shadow: 0 0 32px rgba(255,77,77,0.4), inset 0 0 0 1px var(--danger); }
}
.kill-flash {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,77,77,0.25), transparent 60%);
  z-index: 99;
  animation: killflash 1.2s ease-out forwards;
}
@keyframes killflash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

/* tweaks fab on top */
.tw-fab { z-index: 50; }