:root {
  --bg: #070707;
  --surface: #0d0e0d;
  --surface-2: #121312;
  --ink: #e8e5da;
  --bone: #bdb7a8;
  --muted: #716f68;
  --line: #2b2d28;
  --acid: #d1ff32;
  --rust: #ce5a43;
  --violet: #afa4d9;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --display: "UnifrakturCook", "Pirata One", Georgia, serif;
  --display-alt: "Pirata One", Georgia, serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--mono);
  letter-spacing: .02em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: radial-gradient(circle at 50% 25%, transparent 0 18%, rgba(255,255,255,.03) 72%, transparent 100%);
}

button { font: inherit; }
h1, h2, p { margin: 0; }

.app-shell {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
}

.topbar, .market-head, .signal-header, .row-title, .row-risk, .safety-bar, .footer-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.topbar { align-items: flex-start; margin-bottom: 24px; }
.brand-kicker, .code-label, .section-mark, .state-chip, .confidence, .signal-count, dt, .footer-line, .lock, .rail-topline, .rail-bottomline { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.brand-kicker { color: var(--acid); margin: 0 0 5px; }
.brandlock h1 { font-family: var(--display); font-size: clamp(38px, 11vw, 72px); font-weight: 700; line-height: .88; letter-spacing: .015em; }
.brand-subline { color: var(--muted); font-size: 10px; margin-top: 12px; letter-spacing: .08em; }
.bridge-block { display: flex; align-items: center; gap: 8px; padding-top: 5px; }
.bridge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(209,255,50,.08); }
.state-chip { color: var(--acid); border: 1px solid var(--line); padding: 7px 8px; white-space: nowrap; }
.state-chip.connected { color: var(--acid); border-color: rgba(209,255,50,.55); }

.ops-console { display: grid; grid-template-columns: 54px minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.snake-rail { display: flex; flex-direction: column; align-items: center; min-height: 760px; border-right: 1px solid var(--line); padding: 10px 0; color: var(--muted); }
.rail-topline, .rail-bottomline { width: 100%; padding: 0 9px; }
.rail-topline span:first-child, .rail-bottomline span:first-child { color: var(--acid); }
.snake-stage { display: grid; place-items: center; flex: 1; width: 100%; padding: 22px 4px; }
.snake-stage svg { width: 40px; height: 100%; min-height: 480px; overflow: visible; }
.snake-track { fill: none; stroke: #252721; stroke-width: 2; }
.snake-body { fill: none; stroke: var(--acid); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 9 13; animation: slither 1.8s linear infinite; filter: drop-shadow(0 0 4px rgba(209,255,50,.22)); }
.snake-head { fill: var(--acid); filter: drop-shadow(0 0 5px rgba(209,255,50,.45)); }
.snake-eye { fill: var(--bg); }
@keyframes slither { to { stroke-dashoffset: -44; } }

.console-main { min-width: 0; }
.market-band { padding: 18px 17px 16px; border-bottom: 1px solid var(--line); }
.code-label, .section-mark { color: var(--muted); }
.market-head strong { display: block; color: var(--ink); margin-top: 5px; font-size: 13px; }
.sim-state { color: var(--acid); font-size: 9px; letter-spacing: .14em; }
.sim-state i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--acid); }
.price-line { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 13px; }
.price-line > span:first-child { font-family: var(--mono); font-size: clamp(34px, 9vw, 60px); font-weight: 600; letter-spacing: -.08em; }
.price-change { color: var(--acid); font-size: 13px; }
.price-change small { color: var(--muted); font-size: 10px; }
.market-meta { display: flex; flex-wrap: wrap; gap: 15px; color: var(--muted); font-size: 10px; }
.market-meta b { color: var(--ink); }
.market-meta .negative { color: var(--rust); }
.market-meta .accent { color: var(--violet); }

.signal-header { padding: 21px 17px 12px; align-items: flex-end; }
.signal-header strong { display: block; margin-top: 7px; color: var(--bone); font-family: var(--display-alt); font-size: 21px; font-weight: 400; letter-spacing: .02em; }
.signal-count { color: var(--muted); white-space: nowrap; }
.scenario-tape { padding: 0 17px; }
.scenario-row { display: grid; grid-template-columns: 32px minmax(150px, 1.2fr) minmax(145px, 1fr) 100px 126px; gap: 13px; align-items: center; min-height: 132px; padding: 17px 0; border-top: 1px solid var(--line); }
.scenario-row:last-child { border-bottom: 1px solid var(--line); }
.row-index { align-self: start; color: var(--muted); font-size: 11px; padding-top: 4px; }
.row-title { justify-content: flex-start; }
.side-mark { color: var(--acid); font-family: var(--display-alt); font-size: 22px; line-height: 1; }
.short .side-mark { color: var(--rust); }
.confidence { color: var(--muted); }
.row-signal h2 { margin-top: 12px; color: var(--ink); font-family: var(--display-alt); font-weight: 400; font-size: 23px; line-height: 1; }
.scenario-note { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.levels { display: grid; gap: 5px; margin: 0; }
.levels div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 4px; }
dt { color: var(--muted); }
dd { margin: 0; color: var(--ink); font-size: 11px; }
.row-risk { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.row-risk b { color: var(--ink); }
.scenario-action, .preview-action { min-height: 40px; border: 1px solid var(--acid); color: var(--acid); background: transparent; cursor: pointer; transition: color 160ms ease, background 160ms ease, transform 160ms ease; }
.scenario-action span { margin-right: 6px; }
.short .scenario-action { border-color: var(--rust); color: var(--rust); }
.scenario-action:hover, .scenario-action:focus-visible, .preview-action.send:hover, .preview-action.send:focus-visible { color: var(--bg); background: var(--acid); }
.short .scenario-action:hover, .short .scenario-action:focus-visible { color: var(--ink); background: var(--rust); }
button:focus-visible { outline: 1px solid var(--violet); outline-offset: 3px; }
button:active { transform: translateY(1px); }

.preview-panel { min-height: 145px; padding: 18px 17px; border-bottom: 1px solid var(--line); }
.preview-empty { display: flex; align-items: center; gap: 14px; min-height: 106px; color: var(--muted); }
.empty-glyph { color: var(--violet); font-size: 32px; line-height: 1; }
.preview-empty strong, .preview-filled strong { display: block; color: var(--ink); font-family: var(--display-alt); font-size: 20px; font-weight: 400; }
.preview-empty p, .preview-filled p { margin-top: 8px; font-size: 10px; line-height: 1.6; }
.preview-filled { display: grid; gap: 13px; }
.preview-header, .preview-metrics { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-header .tag { color: var(--acid); font-size: 9px; letter-spacing: .12em; }
.preview-metrics { color: var(--muted); font-size: 10px; }
.preview-metrics b { color: var(--ink); }
.preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preview-action { min-height: 42px; }
.preview-action.discard { border-color: var(--line); color: var(--muted); }
.preview-action.discard:hover, .preview-action.discard:focus-visible { color: var(--ink); background: var(--surface-2); }

.safety-bar { margin: 13px 17px 0; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.safety-icon { color: var(--violet); font-size: 18px; }
.safety-bar strong, .safety-bar small { display: block; }
.safety-bar strong { color: var(--acid); font-size: 10px; letter-spacing: .12em; }
.safety-bar small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.lock { color: var(--muted); white-space: nowrap; }
.footer-line { margin-top: 14px; color: #55564f; }

.toast { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translate(-50%, 15px); width: max-content; max-width: calc(100% - 36px); padding: 10px 13px; border: 1px solid var(--acid); color: var(--acid); background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; font-size: 11px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 650px) {
  .scenario-row { grid-template-columns: 26px minmax(135px, 1fr) minmax(122px, .9fr); }
  .row-risk { grid-column: 2; grid-row: 2; display: flex; justify-content: flex-start; gap: 16px; }
  .scenario-action { grid-column: 3; grid-row: 2; }
}

@media (max-width: 460px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .ops-console { grid-template-columns: 40px minmax(0, 1fr); }
  .snake-rail { min-height: 720px; }
  .snake-stage svg { width: 30px; min-height: 430px; }
  .brandlock h1 { font-size: clamp(34px, 12vw, 52px); }
  .brand-subline { font-size: 9px; }
  .market-band, .signal-header, .scenario-tape, .preview-panel { padding-left: 12px; padding-right: 12px; }
  .safety-bar { margin-left: 12px; margin-right: 12px; }
  .scenario-row { grid-template-columns: 22px minmax(0, 1fr); gap: 9px; padding: 15px 0; }
  .row-signal { min-width: 0; }
  .row-signal h2 { font-size: 20px; }
  .levels { grid-column: 2; grid-row: 2; margin-top: 4px; }
  .row-risk { grid-column: 2; grid-row: 3; }
  .scenario-action { grid-column: 2; grid-row: 4; }
  .signal-header strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}