/* ============================================================
   SnakeM Retro-Web — Deep CRT Terminal theme (monochrome phosphor)
   Loaded AFTER retro.css. Re-skins tokens + adds the CRT appliance,
   artifact layers, boot sequence, bezel controls and VU/scope.
   ============================================================ */

:root {
  --void: #010402;
  --hull: #04120b;
  --hull-2: #071c11;
  --hull-3: #0b2a19;
  --emerald: #3bff9e;
  --emerald-hot: #a8ffd2;
  --emerald-rgb: 59, 255, 158;
  --emerald-hot-rgb: 168, 255, 210;
  --gold-rgb: 255, 176, 0;
  --cyan-rgb: 77, 225, 255;
  --violet-rgb: 139, 92, 246;
  --gold: #ffb000;            /* amber = attention */
  --gold-deep: #7a5200;
  --violet: #8b5cf6;          /* rare logo accent */
  --cream: #bff5d6;
  --danger: #ff3b3b;
  --cyan: #4de1ff;
  --muted: #2f7a55;
  --line: rgba(var(--emerald-rgb), 0.16);
  --line-hot: rgba(var(--emerald-rgb), 0.55);

  --glow-emerald: 0 0 6px rgba(var(--emerald-rgb), 0.8), 0 0 22px rgba(var(--emerald-rgb), 0.35);
  --glow-gold: 0 0 6px rgba(var(--gold-rgb), 0.7), 0 0 20px rgba(var(--gold-rgb), 0.3);
  --glow-violet: 0 0 8px rgba(139, 92, 246, 0.6);

  --font-term: "VT323", "Share Tech Mono", monospace;
  --font-cjk: "ZCOOL QingKe HuangYou", "Chakra Petch", serif;

  --bezel-top: 18px;
  --bezel-x: 34px;
  --bezel-bottom: 80px;
  --screen-radius: 16px;
}

/* ---------- Room + screen surface ---------- */
body.crt-room {
  padding: var(--bezel-top) var(--bezel-x) var(--bezel-bottom);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(var(--emerald-rgb), 0.07), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(var(--emerald-rgb), 0.05), transparent 60%),
    var(--void);
  font-family: var(--font-ui);
}
body.crt-room::before { display: none; }   /* remove old grid overlay */
body.crt-room::after { display: none; }    /* remove old scanline overlay */

.crt-glass-bg {
  position: fixed;
  top: var(--bezel-top); left: var(--bezel-x); right: var(--bezel-x); bottom: var(--bezel-bottom);
  border-radius: var(--screen-radius);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--emerald-rgb), 0.06), transparent 55%),
    linear-gradient(180deg, #04170d, #020a06 70%);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.9), inset 0 0 40px rgba(var(--emerald-rgb), 0.06);
  z-index: 0;
}

.app { position: relative; z-index: 1; filter: brightness(var(--crt-bright, 1)) contrast(var(--crt-contrast, 1)); }

/* ---------- Bezel chassis ---------- */
.crt-frame { position: fixed; inset: 0; pointer-events: none; z-index: 9995; }
.crt-frame__bezel {
  position: absolute; inset: 0;
  border-style: solid;
  border-width: var(--bezel-top) var(--bezel-x) var(--bezel-bottom) var(--bezel-x);
  border-color: #050b07;
  border-radius: 30px;
  background: transparent;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--emerald) 9%, #06090b),
    inset 0 0 0 6px color-mix(in srgb, var(--emerald) 4%, #04060a),
    inset 0 0 90px rgba(0, 0, 0, 0.95),
    0 0 0 1px #000,
    0 40px 120px rgba(0, 0, 0, 0.8);
}
.crt-frame__bezel::before {
  /* plastic sheen on casing */
  content: ""; position: absolute; inset: -2px; border-radius: 30px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.03), transparent 22%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.crt-frame__glass {
  position: absolute;
  top: var(--bezel-top); left: var(--bezel-x); right: var(--bezel-x); bottom: var(--bezel-bottom);
  border-radius: var(--screen-radius);
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0%, transparent 26%, transparent 74%, rgba(255, 255, 255, 0.03) 100%);
}

.crt-band { position: fixed; left: 0; right: 0; z-index: 9997; pointer-events: auto; }
.crt-band--top {
  top: 0; height: var(--bezel-top);
  display: flex; align-items: center; gap: 14px; padding: 0 30px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--emerald) 7%, #060809), color-mix(in srgb, var(--emerald) 4%, #04060a));
  border-bottom: 1px solid color-mix(in srgb, var(--emerald) 13%, #06090b);
}
.crt-band--bottom {
  bottom: 0; height: var(--bezel-bottom);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 30px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--emerald) 7%, #060809), color-mix(in srgb, var(--emerald) 4%, #04060a));
  border-top: 1px solid color-mix(in srgb, var(--emerald) 13%, #06090b);
}
.bezel-brand { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.24em; color: color-mix(in srgb, var(--emerald) 42%, #1a2420); }
.bezel-brand b { color: var(--emerald); text-shadow: var(--glow-emerald); font-weight: 700; }
.bezel-model { font-family: var(--font-mono); font-size: 10px; color: color-mix(in srgb, var(--emerald) 30%, #1a2420); letter-spacing: 0.18em; }
.bezel-spacer { flex: 1; }
.bezel-control { display: flex; align-items: center; gap: 8px; }
.bezel-control .hud-label { color: color-mix(in srgb, var(--emerald) 30%, #1a2420); }

.bezel-led { width: 10px; height: 10px; border-radius: 50%; background: var(--emerald-hot); box-shadow: var(--glow-emerald); }
.bezel-led--off { background: #1d2b22; box-shadow: none; }
.bezel-led--amber { background: var(--gold); box-shadow: var(--glow-gold); }

/* Vents */
.crt-vents { display: flex; gap: 4px; align-items: center; }
.crt-vents i { display: block; width: 3px; height: 26px; background: color-mix(in srgb, var(--emerald) 9%, #06090b); border-radius: 2px; box-shadow: inset 0 0 2px #000; }

/* Knobs */
.knob {
  width: 42px; height: 42px; border-radius: 50%; position: relative; cursor: grab;
  background: radial-gradient(circle at 35% 28%, #1b3325, #0a140e 70%);
  border: 2px solid #0b1a11;
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.06), inset 0 -3px 6px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.6);
  touch-action: none;
  user-select: none;
}
.knob:active { cursor: grabbing; }
.knob::after {
  content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 15px;
  background: var(--emerald); border-radius: 2px;
  transform: translateX(-50%) rotate(var(--rot, 0deg));
  transform-origin: 50% 16px;
  box-shadow: var(--glow-emerald);
}
.knob__cap { text-align: center; font-family: var(--font-mono); font-size: 9px; color: color-mix(in srgb, var(--emerald) 42%, #1a2420); margin-top: 3px; letter-spacing: 0.1em; }
.knob--theme {
  cursor: pointer;
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #22d3ee, #8b5cf6, #ff2d95, #ef4444);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--emerald) 4%, #04060a), inset 0 2px 3px rgba(255,255,255,0.15), 0 0 12px rgba(var(--violet-rgb),0.35);
}
.knob--theme::after { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.9); }
.knob--theme:active { cursor: pointer; }
.bezel-knob-group { display: flex; flex-direction: column; align-items: center; }

/* Power button */
.power-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: color-mix(in srgb, var(--emerald) 7%, #060809); border: 1px solid color-mix(in srgb, var(--emerald) 11%, #06090b); border-radius: 8px; padding: 7px 12px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--emerald) 52%, #1a2420);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.03);
}
.power-btn:hover { color: var(--emerald-hot); border-color: var(--line-hot); }
.power-btn.is-on { color: var(--emerald-hot); border-color: var(--line-hot); box-shadow: var(--glow-emerald), inset 0 -2px 0 rgba(0,0,0,0.6); }

.audio-btn {
  cursor: pointer; background: color-mix(in srgb, var(--emerald) 7%, #060809); border: 1px solid color-mix(in srgb, var(--emerald) 11%, #06090b); border-radius: 8px;
  padding: 7px 11px; font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--emerald) 52%, #1a2420);
}
.audio-btn.is-on { color: var(--emerald-hot); border-color: var(--line-hot); box-shadow: var(--glow-emerald); }

/* ---------- Artifact layers ---------- */
.crt-fx {
  position: fixed;
  top: var(--bezel-top); left: var(--bezel-x); right: var(--bezel-x); bottom: var(--bezel-bottom);
  border-radius: var(--screen-radius);
  overflow: hidden;
  pointer-events: none;
  z-index: 9993;
}
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx-scanlines {
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.35) 3px, rgba(0,0,0,0) 4px);
  opacity: 0.7;
}
.fx-grille {
  background: repeating-linear-gradient(90deg, rgba(var(--emerald-rgb),0.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.fx-glow {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(var(--emerald-rgb),0.10), transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(var(--emerald-rgb),0.06), transparent 70%);
  mix-blend-mode: screen;
}
.fx-vignette {
  background: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.fx-tracking {
  inset: auto 0 0 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(var(--emerald-hot-rgb),0.06) 45%, rgba(var(--emerald-hot-rgb),0.10) 50%, rgba(var(--emerald-hot-rgb),0.06) 55%, transparent);
  animation: track-roll 7s linear infinite;
}
@keyframes track-roll { 0% { transform: translateY(-120%); } 100% { transform: translateY(560%); } }
.fx-flicker { background: rgba(var(--emerald-hot-rgb),0.04); animation: crt-flicker 4.5s steps(2) infinite; }
@keyframes crt-flicker { 0%,100% { opacity: 0.25; } 8% { opacity: 0.5; } 9% { opacity: 0.1; } 40% { opacity: 0.4; } 60% { opacity: 0.15; } }
.fx-glitch { opacity: 0; background: rgba(var(--emerald-hot-rgb),0.10); }
body.crt-glitch .fx-glitch { opacity: 1; animation: glitch-slice 0.14s steps(2) 1; }
@keyframes glitch-slice {
  0% { clip-path: inset(0 0 92% 0); transform: translateX(-6px); }
  25% { clip-path: inset(38% 0 44% 0); transform: translateX(7px); }
  50% { clip-path: inset(72% 0 8% 0); transform: translateX(-4px); }
  75% { clip-path: inset(12% 0 70% 0); transform: translateX(5px); }
  100% { clip-path: inset(0 0 0 0); transform: none; opacity: 0; }
}

/* Chromatic aberration on the whole screen when active */
body.crt-aberrate .app { text-shadow: -0.5px 0 rgba(255,0,80,0.35), 0.5px 0 rgba(0,255,180,0.35); }

/* Burn-in wordmark behind panels */
.wordmark {
  position: fixed; left: 0; right: 0; top: 42%;
  text-align: center; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0.02em;
  font-size: clamp(90px, 22vw, 340px);
  color: rgba(var(--emerald-rgb), 0.045);
  text-shadow: 0 0 40px rgba(var(--emerald-rgb), 0.05);
  white-space: nowrap;
}

/* Standby overlay */
.standby {
  position: fixed;
  top: var(--bezel-top); left: var(--bezel-x); right: var(--bezel-x); bottom: var(--bezel-bottom);
  border-radius: var(--screen-radius);
  background: #000;
  z-index: 9998;
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
}
body.crt-standby .standby { display: flex; }
body.crt-standby .crt-fx { opacity: 0; }
.standby__inner { text-align: center; }
.standby__led { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: var(--glow-gold); margin: 0 auto 12px; animation: pulse 2.4s ease-in-out infinite; }
.standby__txt { font-family: var(--font-term); font-size: 22px; color: color-mix(in srgb, var(--emerald) 20%, #0a0f0c); letter-spacing: 0.3em; }

/* ---------- Boot sequence ---------- */
.boot {
  position: fixed; inset: 0; z-index: 10000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.boot.is-done { display: none; }
.boot__inner { width: min(680px, 86vw); font-family: var(--font-term); font-size: clamp(14px, 2.1vw, 22px); line-height: 1.5; color: var(--emerald); text-shadow: var(--glow-emerald); }
.boot__line { white-space: pre; }
.boot__line .ok { color: var(--emerald-hot); }
.boot__line .dim { color: var(--muted); }
.boot__cursor { display: inline-block; width: 0.62em; height: 1.05em; background: var(--emerald); box-shadow: var(--glow-emerald); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.boot__skip { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: #2f7a55; }
.boot__flash { position: fixed; inset: 0; background: #eafff2; z-index: 10001; opacity: 0; }
.boot__flash.on { animation: power-flash 0.5s ease-out 1; }
@keyframes power-flash { 0% { opacity: 0.9; } 60% { opacity: 0.2; } 100% { opacity: 0; } }

/* ---------- Component re-skins (monochrome) ---------- */
.panel {
  background: linear-gradient(160deg, rgba(7,28,17,0.92), rgba(3,12,8,0.95));
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(var(--emerald-rgb),0.06), inset 0 -1px 0 rgba(0,0,0,0.7);
}
.panel::before { border-color: var(--emerald); box-shadow: var(--glow-emerald); }
.panel::after { border-color: var(--emerald); box-shadow: var(--glow-emerald); }
.panel__head { background: linear-gradient(180deg, rgba(var(--emerald-rgb),0.06), transparent); }
.panel__title { color: var(--cream); }
.panel--gold .panel__title .glyph, .panel--violet .panel__title .glyph { color: var(--emerald-hot); text-shadow: var(--glow-emerald); }

.topbar {
  top: calc(var(--bezel-top) + 0px);
  background: linear-gradient(180deg, rgba(7,28,17,0.96), rgba(3,10,7,0.9));
  border-bottom: 1px solid var(--line);
}
.brand-name span { color: var(--emerald-hot); }
.brand-sub { color: var(--gold); }

.row { background: rgba(1,6,4,0.5); }
.readout { background: rgba(1,6,4,0.6); }
.readout__value { color: var(--emerald-hot); }
.readout--gold .readout__value { color: var(--gold); }

.status-strip { background: rgba(1,6,4,0.55); }

.btn {
  background: linear-gradient(180deg, var(--hull-3), var(--hull-2));
  box-shadow: var(--shadow-inset), 0 3px 0 rgba(0,0,0,0.55);
}
.btn--primary { background: linear-gradient(180deg, var(--emerald-hot), var(--emerald)); border-color: var(--line-hot); color: var(--void); }
.btn--primary:hover { box-shadow: var(--glow-emerald), var(--shadow-inset); }
.btn--gold { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: var(--void); }
.btn--danger { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 62%, #000), color-mix(in srgb, var(--danger) 30%, #000)); color: #ffdcdc; }

.led--on { background: var(--emerald-hot); box-shadow: var(--glow-emerald); }
.badge--on { color: var(--emerald-hot); background: rgba(var(--emerald-rgb),0.10); border-color: var(--line-hot); }
.badge--off { color: var(--gold); background: rgba(var(--gold-rgb),0.08); border-color: rgba(var(--gold-rgb),0.35); }
.badge--violet { color: var(--cyan); background: rgba(var(--cyan-rgb),0.08); border-color: rgba(var(--cyan-rgb),0.35); }

.msg--user .msg__bubble { background: linear-gradient(180deg, var(--emerald), color-mix(in srgb, var(--emerald) 52%, #000)); border-color: var(--line-hot); color: var(--void); }
.msg--agent .msg__bubble, .msg--system .msg__bubble { background: rgba(4,18,11,0.92); }
.msg--system .msg__bubble { border-color: rgba(var(--gold-rgb),0.35); color: #ffe0a8; }
.msg__who, .logline__role { color: var(--emerald-hot); }
.logline { background: rgba(1,6,4,0.55); }
.compose { background: rgba(1,6,4,0.6); }

.tab.is-active { color: var(--emerald-hot); border-bottom-color: var(--emerald-hot); }
table.data th { color: var(--gold); }

.modal { background: rgba(0,2,1,0.86); }
.modal__card { background: linear-gradient(160deg, var(--hull-2), var(--hull)); }

.horizon::after {
  background:
    repeating-linear-gradient(90deg, rgba(var(--emerald-rgb),0.16) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg, rgba(var(--emerald-rgb),0.14) 0 1px, transparent 1px 46px);
}

/* Oscilloscope + VU in Protocol Core */
.scope {
  position: relative; height: 62px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(1,6,4,0.7); overflow: hidden; margin-bottom: 10px;
}
.scope::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(var(--emerald-rgb),0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--emerald-rgb),0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}
.scope svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scope path {
  fill: none; stroke: var(--emerald-hot); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(var(--emerald-rgb),0.8));
  stroke-dasharray: 6 4; animation: scope-dash 1.6s linear infinite;
}
@keyframes scope-dash { to { stroke-dashoffset: -100; } }
.scope__tag { position: absolute; top: 4px; left: 7px; font-family: var(--font-mono); font-size: 9px; color: var(--muted); letter-spacing: 0.14em; }

/* VU bar */
.vu { display: flex; gap: 3px; align-items: flex-end; height: 26px; width: 74px; }
.vu i { flex: 1; background: #0b2417; border-radius: 1px; height: 100%; opacity: 0.5; }
.vu.is-live i:nth-child(-n+7) { background: var(--emerald); box-shadow: var(--glow-emerald); opacity: 1; animation: vu-bounce 1.2s ease-in-out infinite; }
.vu.is-live i:nth-child(5) { animation-delay: 0.1s; }
.vu.is-live i:nth-child(6) { animation-delay: 0.25s; }
.vu.is-live i:nth-child(7) { animation-delay: 0.05s; }
@keyframes vu-bounce { 0%,100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }

/* Talisman rails -> neon etched signs on the casing */
.rail__seal {
  color: var(--emerald-hot);
  background: linear-gradient(180deg, rgba(7,28,17,0.96), rgba(3,12,8,0.96));
  border: 3px solid var(--line-hot);
  box-shadow: 0 0 40px rgba(var(--emerald-rgb),0.35), 0 0 120px rgba(var(--emerald-rgb),0.12), inset 0 0 30px rgba(var(--emerald-rgb),0.12);
  text-shadow: 0 0 10px rgba(var(--emerald-rgb),0.9), 0 0 30px rgba(var(--emerald-rgb),0.5);
  font-family: var(--font-cjk);
  letter-spacing: 0.24em;
}
.rail--right .rail__seal { border-color: rgba(var(--gold-rgb),0.5); color: var(--gold); box-shadow: 0 0 40px rgba(var(--gold-rgb),0.28), inset 0 0 30px rgba(var(--gold-rgb),0.1); text-shadow: 0 0 10px rgba(var(--gold-rgb),0.9); }

/* Measurement ruler ticks (from the reference video) */
.ruler {
  height: 9px; margin: 0 0 10px;
  border-bottom: 1px solid rgba(var(--emerald-rgb), 0.15);
  background: repeating-linear-gradient(90deg, rgba(var(--emerald-rgb), 0.38) 0 1px, transparent 1px 24px);
}

/* Login screen */
.auth__card { background: linear-gradient(160deg, rgba(7,28,17,0.96), rgba(2,8,5,0.98)); }
.auth__head { border-bottom: 1px solid var(--line); }
.talisman--emerald { color: #02150a; }
.auth__title { color: var(--emerald-hot); text-shadow: var(--glow-emerald); }

.auth { min-height: calc(100vh - var(--bezel-top) - var(--bezel-bottom)); }

/* Rails live on the casing: only wide enough screens host them. */
.rail { display: none; z-index: 9996; }
@media (min-width: 1600px) {
  :root { --bezel-x: 200px; }
  .rail { display: block; }
  .layout { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 900px) {
  :root { --bezel-top: 14px; --bezel-x: 12px; --bezel-bottom: 62px; }
  .rail { display: none !important; }
  .bezel-model, .bezel-knob-group { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-tracking, .fx-flicker, .scope path, .vu.is-live i { animation: none !important; }
  .fx-tracking { display: none; }
}

/* ============================================================
   Readability pass — every command-deck text size +3px.
   Loaded last so it overrides retro.css and earlier crt.css rules.
   ============================================================ */
body { font-size: 17px; }
.hud-label { font-size: 13px; }
.tiny { font-size: 14px; }
.brand-name { font-size: 25px; }
.brand-sub { font-size: 12px; }
.ticker__item { font-size: 15px; }
.panel__title { font-size: 15px; }
.row__name { font-size: 15px; }
.row__sub { font-size: 13px; }
.readout__value { font-size: 19px; }
.badge { font-size: 13px; }
.btn { font-size: 14px; }
.btn--sm { font-size: 13px; }
.gauge__scale { font-size: 12px; }
.slot__sym { font-size: 18px; }
.slot__grid { font-size: 14px; }
.tab { font-size: 14px; }
.msg__who { font-size: 13px; }
.msg__bubble { font-size: 16px; }
.input, .textarea, select.input { font-size: 16px; }
.logline__top { font-size: 13px; }
.logline__body { font-size: 15px; }
table.data { font-size: 15px; }
table.data th { font-size: 13px; }
.modal__title { font-size: 16px; }
.close-x { font-size: 18px; }
.footer-note { font-size: 13px; }
.status-strip { font-size: 14px; }
.clock { font-size: 15px; }
.talisman { font-size: 14px; }
.auth__title { font-size: 21px; }
.auth__hint { font-size: 15px; }
.alert { font-size: 15px; }
.auth__foot { font-size: 13px; }
.bezel-brand { font-size: 16px; }
.bezel-model { font-size: 13px; }
.knob__cap { font-size: 12px; }
.power-btn { font-size: 13px; }
.audio-btn { font-size: 13px; }
.standby__txt { font-size: 25px; }
.boot__inner { font-size: clamp(17px, 2.4vw, 25px); }
.boot__skip { font-size: 14px; }
.scope__tag { font-size: 12px; }

@media (max-width: 640px) {
  .brand-name { font-size: 20px; }
}

/* ============================ Live terminal ============================ */
.term-host {
  flex: 1;
  min-height: 0;
  padding: 10px 12px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(var(--emerald-rgb), 0.05), transparent 60%), rgba(1, 6, 4, 0.72);
}
.term-host.is-hidden { display: none; }
.term-mount { width: 100%; height: 100%; }
.term-mount .xterm { height: 100%; padding: 2px; }
.term-mount .xterm-viewport { background: transparent !important; }
.term-mount .xterm-viewport::-webkit-scrollbar { width: 8px; }
.term-mount .xterm-viewport::-webkit-scrollbar-thumb { background: var(--hull-3); border-radius: 4px; }
.term-mount .xterm-screen { text-shadow: 0 0 4px rgba(var(--emerald-rgb), 0.25); }

/* ============================ Panel visibility ============================ */
.btn.is-active { color: var(--emerald-hot); border-color: var(--line-hot); box-shadow: var(--glow-emerald); }
body.hide-rack .rack { display: none; }
body.hide-rack .layout { grid-template-columns: minmax(0, 1fr); }
body.hide-inst .panel--violet { display: none; }
body.hide-inst .terminal { height: calc(100vh - 200px); }

/* Precision deck: restrained hardware, legible live terminal. */
:root {
  --void: #090e13; --hull: #101920; --hull-2: #18242c; --hull-3: #26363c;
  --emerald: #67d9ac; --emerald-hot: #b5f1d5; --cream: #e9e8dc;
  --emerald-rgb: 103,217,172; --emerald-hot-rgb: 181,241,213;
  --gold: #c4ad70; --gold-rgb: 196,173,112; --violet: #9282b4;
  --cyan: #84b8c1; --muted: #95a6a7; --line: #ffffff18;
  --line-hot: #67d9ac55; --glow-emerald: 0 0 8px #67d9ac18;
  --bezel-x: 16px; --bezel-top: 12px; --bezel-bottom: 64px;
}
.rail, .wordmark, .fx-tracking, .fx-flicker, .fx-glitch { display: none; }
.grain { opacity: .018; animation: none; }
.fx-scanlines { opacity: .10; }
.fx-grille, .fx-glow { opacity: .12; }
.crt-frame__glass { box-shadow: inset 0 0 35px #0005; }
.crt-frame__bezel { border-color: #11191d; border-radius: 18px; }
.topbar { gap: 16px; border-bottom: 1px solid var(--line); }
.brand img { width: 44px; height: 44px; object-fit: contain; filter: none; }
.brand-name { letter-spacing: .10em; text-shadow: none; }
.panel { box-shadow: none; border: 1px solid var(--line); border-radius: 8px; }
.panel__head { background: #ffffff03; }
.layout { grid-template-columns: 280px minmax(0,1fr); gap: 16px; }
.terminal { min-height: 520px; }
.term-host { min-height: 320px; background: var(--hull); }
.term-mount .xterm-screen { text-shadow: none; }
.terminal-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); }
.terminal-tools .btn { min-height: 40px; min-width: 40px; }
.terminal-note { flex-basis: 100%; color: var(--muted); font-size: 11px; }
.btn { transition: background .16s ease, border-color .16s ease; box-shadow: none; }
.ticker__track { animation: none; }
@media (max-width: 800px) {
  :root { --bezel-x: 6px; --bezel-top: 6px; --bezel-bottom: 52px; }
  .layout { display: flex; flex-direction: column; }
  .viewport { order: -1; min-width: 0; width: 100%; }
  .topbar { flex-wrap: wrap; padding: 10px; }
  .topbar__actions { flex-wrap: wrap; gap: 6px; }
  .ticker, .crt-vents { display: none; }
  .terminal, body.hide-inst .terminal { height: max(360px,calc(var(--visible-height, 100dvh) - 220px)); min-height: 360px; }
  .term-host { min-height: 180px; }
  .crt-band--bottom { gap: 8px; padding-inline: 12px; }
  .bezel-knob-group { transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Terminal-first workspace. Reports are dated snapshots, not a second engine. */
.topbar { padding: 4px 16px; flex-wrap: nowrap; gap: 12px; }
.brand { flex: 0 0 auto; }
.brand img { width: 80px; height: 80px; }
.topbar__actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.topbar .clock { font-size: 20px; letter-spacing: .02em; color: var(--muted); }
.topbar .btn, .terminal .btn, .terminal .tab { font-size: 12px; letter-spacing: .02em; text-transform: none; padding: 7px 10px; }
.layout { display: block; padding: 10px 16px; }
.viewport { width: 100%; min-width: 0; gap: 12px; }
.terminal { height: max(440px,calc(100dvh - 190px)); min-height: 0; }
.terminal .panel__head { flex-shrink: 0; padding: 8px 12px; gap: 8px; }
.terminal-actions { display: flex; align-items: center; gap: 8px; }
.terminal .badge { font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
.terminal .term-host { min-height: 0; overflow: hidden; padding: 6px; }
.terminal-tools { flex: 0 0 auto; gap: 4px; padding: 6px; }
.terminal-tools .btn { min-width: 34px; min-height: 36px; }
.terminal-note { font-size: 11px; padding: 0 4px; }
.report-source { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; margin: 0 0 12px; }
.report-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-bottom: 12px; }
.report-facts small { display: block; font-size: 12px; color: var(--muted); }
.report-facts strong { display: block; font-size: 15px; font-weight: 500; }
.report-table { overflow-x: auto; margin: 12px 0; }
.report-table h3 { font-size: 13px; font-weight: 500; }
.report-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; font-size: 12px; }
.report-panel summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.terminal:fullscreen, .terminal.terminal-expanded {
  width: 100%; height: var(--visible-height,100dvh); max-height: 100dvh;
  min-height: 0; margin: 0; border: 0; border-radius: 0; background: var(--hull);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.terminal.terminal-expanded { position: fixed; inset: 0; z-index: 100000; }
body.terminal-expanded-open { overflow: hidden; }
@media (max-width: 800px) {
  .topbar { padding: 4px 8px; gap: 4px; }
  .brand img { width: 64px; height: 64px; }
  .topbar__actions { gap: 4px; }
  .topbar .clock { flex-basis: 100%; text-align: right; font-size: 17px; }
  .topbar .btn { padding: 6px 8px; font-size: 11px; min-height: 34px; }
  .topbar .badge { font-size: 9px; padding: 4px; }
  .layout { padding: 6px; }
  .terminal { height: max(340px,calc(var(--visible-height,100dvh) - 155px)); min-height: 0; }
  .terminal .panel__head { padding: 5px; }
  .terminal .tab { font-size: 11px; padding: 7px; }
  .terminal-actions { gap: 4px; }
  .terminal-tools { flex-wrap: nowrap; overflow-x: auto; }
  .terminal-tools .btn { flex: 0 0 auto; }
  .terminal-note { flex: 0 0 auto; align-self: center; font-size: 10px; }
  .report-panel .panel__body { padding: 10px; }
}