/*
  Design system: "night desk".

  Black-panel hardware at night: one ice-cyan LED, machined controls, hairline
  edges, soft glow. The hero panel carries the one thing that matters (is the bot
  on, what is it doing) and its light follows the bot's state: dim when off, cyan
  when armed, breathing in a trade, red when stopped.

  One typeface, Archivo, used across its width axis so width means role:
    wide (125%)   = state and brand, the words you read from across the room
    normal (100%) = prose and controls
    narrow (86%)  = columns of numbers
  Cyan is the bot. Green and red are money and side. Amber is a warning.
*/

@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --void: #05070a;
  --deck: #0a0d12;
  --deck-hi: #11161d;
  --edge: rgba(255, 255, 255, 0.08);
  --edge-hi: rgba(255, 255, 255, 0.16);
  --text: #eef2f7;
  --muted: #8f99aa;
  --faint: #5f6979;
  --led: #6ee7ff;
  --led-rgb: 110, 231, 255;
  --up: #46e3a1;
  --down: #ff6b7a;
  --warn: #ffb648;

  --wide: 125%;
  --narrow: 86%;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 1200px;
  --panel: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014));
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--void); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(1100px 560px at 8% -12%, rgba(var(--led-rgb), 0.09), transparent 62%),
    radial-gradient(900px 520px at 104% -6%, rgba(122, 112, 255, 0.08), transparent 60%),
    var(--void);
  background-attachment: fixed;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-stretch: 100%;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(var(--led-rgb), 0.3); }

:focus-visible {
  outline: 2px solid var(--led);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ------------------------------------------------------------------ top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 6px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-stretch: var(--wide);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}
.brand::before {                 /* the mark: a black key with one lit LED */
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, var(--led) 0 3.5px, rgba(var(--led-rgb), 0.35) 4px 6.5px, transparent 7px),
    linear-gradient(180deg, #1a212b, #0b0f14);
  box-shadow: inset 0 0 0 1px var(--edge-hi), 0 0 18px rgba(var(--led-rgb), 0.25);
}
.topbar-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  min-width: 0;
}
.topbar-links a, .linkish {
  color: var(--text);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.topbar-links a:hover, .linkish:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--edge); }
.who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }

/* ------------------------------------------------------------------ hero panel: state + switch */
.state {
  --mood-rgb: 150, 165, 185;
  --mood-a: 0.05;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 28px;
  row-gap: 30px;
  margin-top: 22px;
  padding: clamp(24px, 4.2vw, 48px);
  border-radius: 24px;
  border: 1px solid var(--edge);
  background:
    radial-gradient(560px 280px at 0% 0%, rgba(var(--mood-rgb), var(--mood-a)), transparent 70%),
    var(--panel);
  box-shadow: var(--panel-shadow);
  transition: border-color 0.4s ease;
}
.state::before {                  /* fine dot grid, fading out to the right */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 58%);
  mask-image: linear-gradient(115deg, #000 0%, transparent 58%);
}
.state::after {                   /* the panel's own light, drifting slowly */
  content: "";
  position: absolute;
  z-index: -1;
  width: 52%;
  aspect-ratio: 1.7;
  right: -10%;
  top: -55%;
  background: radial-gradient(closest-side, rgba(var(--mood-rgb), calc(var(--mood-a) * 1.5)), transparent);
  filter: blur(36px);
  animation: drift 18s ease-in-out infinite alternate;
}
.state[data-mood="armed"] { --mood-rgb: var(--led-rgb); --mood-a: 0.13; border-color: rgba(var(--led-rgb), 0.2); }
.state[data-mood="trade"] { --mood-rgb: var(--led-rgb); --mood-a: 0.2; border-color: rgba(var(--led-rgb), 0.32); }
.state[data-mood="stopped"] { --mood-rgb: 255, 107, 122; --mood-a: 0.15; border-color: rgba(255, 107, 122, 0.3); }
.state[data-mood="attention"] { --mood-rgb: 255, 182, 72; --mood-a: 0.1; border-color: rgba(255, 182, 72, 0.25); }
@keyframes drift {
  to { transform: translate(-22%, 30%) scale(1.15); }
}

.state-headline {
  font-stretch: var(--wide);
  font-weight: 750;
  font-size: clamp(26px, 3.5vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.state-sub {
  margin-top: 10px;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: balance;
}
.state-note {
  margin-top: 8px;
  color: var(--warn);
  font-size: 14px;
}
.state-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.state-actions .form-status { margin: 0; min-height: 0; }

/* the LED: dark, armed (cyan), in a trade (cyan, breathing), stopped (red), needs you (amber ring) */
.lamp {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a212a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 6px rgba(255, 255, 255, 0.03);
  flex: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.lamp[data-lit="armed"], .lamp[data-lit="trade"] {
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--led) 55%);
  box-shadow: 0 0 0 6px rgba(var(--led-rgb), 0.12), 0 0 26px 4px rgba(var(--led-rgb), 0.65);
}
.lamp[data-lit="trade"] { animation: breathe 2.4s ease-in-out infinite; }
.lamp[data-lit="stopped"] {
  background: radial-gradient(circle at 35% 30%, #ffd9dd, var(--down) 55%);
  box-shadow: 0 0 0 6px rgba(255, 107, 122, 0.12), 0 0 22px 3px rgba(255, 107, 122, 0.55);
}
.lamp[data-lit="attention"] {
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--warn), 0 0 0 6px rgba(255, 182, 72, 0.1);
}
@keyframes breathe {
  50% { box-shadow: 0 0 0 9px rgba(var(--led-rgb), 0.16), 0 0 44px 12px rgba(var(--led-rgb), 0.9); }
}

/* the switch: a machined rocker that lights up */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: none;
  border: 0;
  padding: 6px;
  margin: -6px;
  cursor: pointer;
  color: var(--text);
  border-radius: 22px;
}
.switch-track {
  position: relative;
  flex: none;
  width: 116px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(180deg, #06080b, #0e1218);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), inset 0 0 0 1px var(--edge-hi);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.switch-thumb {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 52px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(180deg, #3a434f, #1b2129);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(0, 0, 0, 0.7);
  transition: transform 0.24s cubic-bezier(0.3, 1.35, 0.5, 1), background 0.2s ease, box-shadow 0.2s ease;
}
.switch-thumb::after {            /* grip */
  content: "";
  position: absolute;
  inset: 14px 20px;
  border-left: 2px solid rgba(255, 255, 255, 0.22);
  border-right: 2px solid rgba(255, 255, 255, 0.22);
}
.switch[aria-checked="true"] .switch-track {
  background: linear-gradient(180deg, rgba(var(--led-rgb), 0.32), rgba(var(--led-rgb), 0.14));
  box-shadow: inset 0 0 0 1px rgba(var(--led-rgb), 0.75), 0 0 34px rgba(var(--led-rgb), 0.35);
}
.switch[aria-checked="true"] .switch-thumb {
  transform: translateX(52px);
  background: linear-gradient(180deg, #ffffff, #b9c6d4);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 22px rgba(var(--led-rgb), 0.55);
}
.switch[aria-checked="true"] .switch-thumb::after { border-color: rgba(5, 7, 10, 0.35); }
.switch-word {
  font-stretch: var(--wide);
  font-weight: 750;
  font-size: 22px;
  min-width: 2.4em;
  text-align: left;
  color: var(--muted);
  transition: color 0.2s ease;
}
.switch[aria-checked="true"] .switch-word { color: var(--text); }
.switch:disabled { cursor: not-allowed; opacity: 0.45; }
.switch.danger[aria-checked="true"] .switch-track {
  background: linear-gradient(180deg, rgba(255, 107, 122, 0.36), rgba(255, 107, 122, 0.16));
  box-shadow: inset 0 0 0 1px rgba(255, 107, 122, 0.8), 0 0 34px rgba(255, 107, 122, 0.3);
}
.switch.danger[aria-checked="true"] .switch-thumb {
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 107, 122, 0.5);
}

/* the bracket: stop, entry and target drawn to scale, loss side left, profit side right */
.bracket {
  grid-column: 1 / -1;
  padding-top: 4px;
}
.bracket-scale {
  position: relative;
  height: 12px;
  margin: 14px 0 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent 0 var(--stop, 0%),
      rgba(255, 107, 122, 0.75) var(--stop, 0%),
      rgba(255, 107, 122, 0.3) var(--entry, 50%),
      rgba(70, 227, 161, 0.3) var(--entry, 50%),
      rgba(70, 227, 161, 0.8) var(--target, 100%),
      transparent var(--target, 100%) 100%),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.bracket-scale::after {           /* ticks */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  height: 6px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 12px);
}
.bracket-mark {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 2px;
  margin-left: -1px;
  left: var(--at, 0%);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
}
.bracket-mark[data-kind="stop"] { background: var(--down); box-shadow: 0 0 12px rgba(255, 107, 122, 0.9); }
.bracket-mark[data-kind="target"] { background: var(--up); box-shadow: 0 0 12px rgba(70, 227, 161, 0.9); }
.bracket-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.bracket-legend > div:nth-child(2) { text-align: center; }
.bracket-legend > div:nth-child(3) { text-align: right; }
.bracket-legend dt { font-size: 13px; color: var(--muted); }
.bracket-legend dd { font-variant-numeric: tabular-nums lining-nums; }
.bracket-price { font-size: 22px; font-weight: 650; font-stretch: var(--narrow); letter-spacing: 0.01em; }
.bracket-dist { font-size: 14px; color: var(--muted); font-stretch: var(--narrow); }
.bracket-dist span { white-space: nowrap; }

/* ------------------------------------------------------------------ notices */
.notices { margin-top: 12px; display: grid; gap: 8px; }
.notices:empty { margin-top: 0; }
.notice {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 182, 72, 0.28);
  background: rgba(255, 182, 72, 0.07);
  font-size: 15px;
}
.notice-level { flex: none; font-weight: 700; color: var(--warn); }
.notice[data-level="error"] { border-color: rgba(255, 107, 122, 0.35); background: rgba(255, 107, 122, 0.08); }
.notice[data-level="error"] .notice-level { color: var(--down); }
.notice[data-level="info"] { border-color: var(--edge); background: rgba(255, 255, 255, 0.03); color: var(--muted); }
.notice[data-level="info"] .notice-level { color: var(--text); }

/* ------------------------------------------------------------------ figures: four tiles */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.figure {
  position: relative;
  min-width: 0;
  padding: 20px 22px 18px;
  border-radius: 18px;
  border: 1px solid var(--edge);
  background: var(--panel);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}
.figure dt { font-size: 13px; color: var(--muted); }
.figure-value {
  margin-top: 4px;
  font-size: 30px;
  font-weight: 650;
  line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.figure-value.text { font-size: 21px; line-height: 1.72; letter-spacing: 0; }
.figure-sub { font-size: 13.5px; color: var(--muted); }
/* the day's result gets the wide tile: figures on the left, the session's closed P&L drawn on the right */
.figures.with-chart { grid-template-columns: minmax(0, 1.75fr) repeat(3, minmax(0, 1fr)); }
.figure.wide {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 26px;
}
.figure.wide dt, .figure.wide .figure-value, .figure.wide .figure-sub { grid-column: 1; }
.figure-chart {
  grid-column: 2;
  grid-row: 1 / -1;
  position: relative;
  min-height: 66px;
  margin: -4px -6px -4px 0;
}
.figure-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.up { color: var(--up); }
.down { color: var(--down); }

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border: 1px solid var(--edge-hi);
  border-radius: 999px;
  color: var(--muted);
  vertical-align: 0.14em;
  white-space: nowrap;
  margin: 0 2px;
}
.tag.real { background: rgba(255, 182, 72, 0.13); border-color: rgba(255, 182, 72, 0.45); color: #ffcf8a; }
.tag.beta { background: rgba(var(--led-rgb), 0.1); border-color: rgba(var(--led-rgb), 0.4); color: var(--led); }

/* ------------------------------------------------------------------ ledger: panels */
.ledger {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  margin-top: 14px;
  padding-bottom: 96px;
}
.block {
  padding: 26px 26px 28px;
  border-radius: 18px;
  border: 1px solid var(--edge);
  background: var(--panel);
  box-shadow: var(--panel-shadow);
  min-width: 0;
}
.block + .block { margin-top: 14px; }
.block-title {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  margin-bottom: 6px;
}
.block-lead { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; max-width: 68ch; }

/* forms */
.field { margin-bottom: 18px; }
.field label, .field .label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 7px;
}
.hint { display: block; font-size: 13.5px; font-weight: 400; color: var(--muted); margin-top: 6px; }
.input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge-hi);
  border-radius: 11px;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.input:hover { border-color: rgba(255, 255, 255, 0.28); }
.input:focus {
  outline: none;
  border-color: var(--led);
  box-shadow: 0 0 0 4px rgba(var(--led-rgb), 0.16);
  background: rgba(255, 255, 255, 0.06);
}
.input::placeholder { color: var(--faint); }
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
select.input option { background: #10151c; color: var(--text); }
.input-money { position: relative; }
.input-money .input { padding-left: 28px; }
.input-money::before {
  content: "$";
  position: absolute;
  left: 14px;
  top: 11px;
  color: var(--muted);
}

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--edge-hi);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.35);
}
.seg label { margin: 0; position: relative; font-weight: 400; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: block;
  padding: 8px 12px 7px;
  text-align: center;
  line-height: 1.25;
  border-radius: 9px;
  color: var(--muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.seg span small { display: block; font-size: 12.5px; color: var(--faint); }
.seg input:checked + span {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-weight: 600;
}
.seg input:checked + span small { color: var(--muted); }
.seg input:focus-visible + span { outline: 2px solid var(--led); outline-offset: 2px; }
.seg input:disabled + span { color: var(--faint); cursor: not-allowed; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #ffffff, #cfd8e3);
  color: #06080b;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 22px -10px rgba(255, 255, 255, 0.45);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { box-shadow: 0 10px 30px -8px rgba(var(--led-rgb), 0.55); }
.btn:active { transform: translateY(1px); }
.btn.quiet {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--edge-hi);
  color: var(--text);
  font-weight: 600;
  box-shadow: none;
}
.btn.quiet:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
.btn.danger {
  background: linear-gradient(180deg, #ff7f8c, #f04e60);
  color: #1c0509;
  box-shadow: 0 8px 24px -10px rgba(255, 107, 122, 0.7);
}
.btn.danger:hover { box-shadow: 0 10px 30px -8px rgba(255, 107, 122, 0.85); }
.btn.small { height: 38px; padding: 0 15px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions.stack { flex-direction: column; align-items: stretch; }
.actions.stack .btn { width: 100%; }
.facts + .actions { margin-top: 18px; }
.actions + .hint { margin-top: 12px; }
.form-status { font-size: 14px; color: var(--muted); min-height: 21px; margin-top: 10px; }
.form-status[data-kind="error"] { color: var(--down); font-weight: 600; }
.form-status[data-kind="ok"] { color: var(--up); font-weight: 600; }

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 15px;
}
.facts > div:first-child { border-top: 1px solid var(--edge); }
.facts dt { color: var(--muted); flex: none; }
.facts dd { text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* tables of numbers */
.table-scroll { overflow-x: auto; }
.tape {
  width: 100%;
  border-collapse: collapse;
  font-stretch: var(--narrow);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 15.5px;
}
.tape th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--edge-hi);
  white-space: nowrap;
}
.tape td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--edge);
  vertical-align: baseline;
  white-space: nowrap;
}
.tape tbody tr:last-child td { border-bottom: 0; }
.tape tbody tr { transition: background-color 0.12s ease; }
.tape tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.tape .num { text-align: right; }
.tape th:last-child, .tape td:last-child { padding-right: 0; }
.tape td.wrap-cell { white-space: normal; min-width: 180px; }
.tape .side-buy { color: var(--up); font-weight: 650; }
.tape .side-sell { color: var(--down); font-weight: 650; }
.tape .dim { color: var(--muted); }
.tape .note { color: var(--muted); }
.tape .note::before { content: ", "; }
.empty {
  padding: 14px 0 2px;
  color: var(--muted);
  max-width: 60ch;
}

.log li {
  display: grid;
  grid-template-columns: 5.6em minmax(0, 1fr);
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 15px;
}
.log li:last-child { border-bottom: 0; }
.log time { color: var(--muted); font-stretch: var(--narrow); font-variant-numeric: tabular-nums; }
.log-level { font-weight: 700; }
.log li[data-level="warn"] .log-level { color: var(--warn); }
.log li[data-level="error"] .log-level { color: var(--down); }

/* ------------------------------------------------------------------ dialogs */
dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--edge-hi);
  border-radius: 22px;
  background:
    radial-gradient(420px 200px at 0% 0%, rgba(var(--led-rgb), 0.08), transparent 70%),
    #0b0f15;
  color: var(--text);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: auto;
}
dialog::backdrop {
  background: rgba(3, 5, 8, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dialog-head { padding: 28px 30px 0; }
.dialog-head h2 { font-stretch: 112%; font-weight: 750; font-size: 22px; line-height: 1.25; }
.dialog-body { padding: 18px 30px 30px; }
.dialog-body p + p { margin-top: 12px; }
.dialog-body .actions { margin-top: 24px; }

.choices { margin-bottom: 20px; display: grid; gap: 6px; }
.choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice:hover { border-color: var(--edge-hi); }
.choice:has(input:checked) { border-color: rgba(var(--led-rgb), 0.6); background: rgba(var(--led-rgb), 0.07); }
.choice input { margin: 5px 0 0; width: 16px; height: 16px; accent-color: var(--led); }
.choice-name { font-weight: 650; }
.choice-note { display: block; font-size: 13.5px; color: var(--muted); }

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 18px;
  font-weight: 600;
  cursor: pointer;
}
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--led); }
.fineprint { font-size: 14px; color: var(--muted); }
#connect-detail .fineprint { margin: 0 0 16px; }
#broker-later { margin: -8px 0 20px; }

/* ------------------------------------------------------------------ entry (sign-in) page */
.tape-canvas {                    /* a glowing line in the gap under the headline; index.js sets top and height */
  position: absolute;
  left: 0;
  top: 50vh;
  width: 100%;
  height: 96px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.tape-canvas[data-ready="true"] { opacity: 0.85; }
.entry-grid {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "hero form" "details form";
  column-gap: clamp(24px, 4vw, 72px);
  padding: 0 var(--gutter);
}
.entry-hero {
  grid-area: hero;
  padding: clamp(24px, 4.5vw, 56px) 0 0;
}
.entry-hero .brand { display: flex; }
.entry-details {
  grid-area: details;
  display: flex;
  flex-direction: column;
  padding: 0 0 clamp(24px, 4.5vw, 56px);
}
.entry-demo {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: clamp(24px, 5vh, 64px);
  padding: 14px 24px 14px 22px;
  border-radius: 24px;
  border: 1px solid var(--edge);
  background: var(--panel);
  box-shadow: var(--panel-shadow);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.entry-demo[data-on="true"] {
  border-color: rgba(var(--led-rgb), 0.3);
  box-shadow: var(--panel-shadow), 0 0 60px -10px rgba(var(--led-rgb), 0.35);
}
.entry-demo .switch { cursor: default; }
.entry-demo .demo-word {
  font-stretch: var(--wide);
  font-weight: 700;
  font-size: 16px;
  color: var(--muted);
  transition: color 0.3s ease;
}
.entry-demo[data-on="true"] .demo-word { color: var(--text); }
.statement {
  margin-top: 38px;
  font-stretch: var(--wide);
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.022em;
}
.statement > span { display: block; text-wrap: balance; }
.statement > span + span { margin-top: 0.12em; }
/* the sheen is cloned onto every printed line, so a wrapped line never reads as greyed out */
.ink {
  padding-bottom: 0.08em;
  background: linear-gradient(180deg, #ffffff 38%, #b3c1d2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
}
.plain-list {
  margin-top: clamp(64px, 9.5vh, 112px);    /* room for the tape line to run between headline and list */
  max-width: 60ch;
  color: #c3ccd9;
}
.plain-list li {
  position: relative;
  padding: 13px 0 13px 28px;
  border-bottom: 1px solid var(--edge);
}
.plain-list li:first-child { border-top: 1px solid var(--edge); }
.plain-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 22px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 12px rgba(var(--led-rgb), 0.9);
}
.risk-line {
  margin-top: auto;
  padding-top: 24px;
  max-width: 70ch;
  font-size: 13.5px;
  color: var(--faint);
}
.entry-form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4.5vw, 56px) 0;
}
.entry-form-inner {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 30px 30px 26px;
  border-radius: 24px;
  border: 1px solid var(--edge-hi);
  background:
    radial-gradient(360px 180px at 100% 0%, rgba(var(--led-rgb), 0.09), transparent 70%),
    rgba(10, 13, 18, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 26px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.4);
}
.tab {
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 0;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tab[aria-selected="true"] {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.entry-form .btn { width: 100%; }
.signed-in { display: grid; gap: 12px; }
.signed-in-who { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.signed-in-who strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------------ front page: below the fold
   The record is the one loud thing: a single cyan line, the same LED as the bot, drawn from the real
   backtest. Everything around it stays quiet: hairlines, muted prose, numbers in the narrow width. */
.record-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.record-link-line {
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--led);
  box-shadow: 0 0 10px rgba(var(--led-rgb), 0.9);
  transition: width 0.2s ease;
}
.record-link:hover .record-link-line, .record-link:focus-visible .record-link-line { width: 52px; }
.entry-details .record-link + .risk-line { margin-top: 24px; }

.page-section {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(72px, 11vw, 140px) var(--gutter) 0;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.section-title {
  font-stretch: var(--wide);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.section-lead {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 17px;
  color: #c3ccd9;
  text-wrap: pretty;
}

.size-switch {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.4);
}
.size-switch button {
  min-width: 84px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-weight: 650;
  font-size: 15px;
  font-stretch: var(--narrow);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.size-switch button[aria-checked="true"] {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(260px, 1fr);
  gap: 14px;
}
[data-loading="true"] .record-grid, [data-loading="true"] .year-wrap { opacity: 0.55; }
.equity-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 26px 26px 18px;
  border-radius: 24px;
  border: 1px solid var(--edge-hi);
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(var(--led-rgb), 0.08), transparent 70%),
    var(--panel);
  box-shadow: var(--panel-shadow);
}
.equity-head { display: grid; gap: 2px; }
.equity-label { font-size: 14px; color: var(--muted); }
.hero-figure {
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
  text-shadow: 0 0 42px rgba(var(--led-rgb), 0.18);
}
.equity-sub { font-size: 14px; color: var(--muted); }
.equity-chart {
  position: relative;
  flex: 1;
  min-height: 300px;
  margin: 18px -8px 0;
  outline: none;
  touch-action: pan-y;
}
.equity-chart:focus-visible { box-shadow: 0 0 0 2px rgba(var(--led-rgb), 0.55); border-radius: 12px; }
.equity-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.equity-chart .grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; shape-rendering: crispEdges; }
.equity-chart .zero { stroke: rgba(255, 255, 255, 0.22); }
.equity-chart .tick {
  fill: var(--faint);
  font-size: 12px;
  font-stretch: var(--narrow);
  font-variant-numeric: tabular-nums;
}
.equity-chart .line {
  fill: none;
  stroke: var(--led);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(var(--led-rgb), 0.65));
}
.equity-chart .end-dot, .equity-chart .cursor-dot { fill: var(--led); stroke: #0b0f15; stroke-width: 2; }
.equity-chart .cursor { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; shape-rendering: crispEdges; }
.equity-tip {
  position: absolute;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 1px;
  min-width: 150px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--edge-hi);
  background: rgba(10, 13, 18, 0.94);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  white-space: nowrap;
}
.equity-tip .tip-value { font-size: 18px; font-weight: 700; }
.equity-tip .tip-date, .equity-tip .tip-trade { font-size: 13px; color: var(--muted); font-stretch: var(--narrow); }

.record-figures {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}
.record-figures .figure { display: flex; flex-direction: column; justify-content: center; margin: 0; }
.record-figures dd { margin: 0; }
.record-figures .figure-value { font-size: 32px; font-variant-numeric: lining-nums; }

.hypothetical {
  margin-top: 14px;
  padding: 16px 20px 16px 22px;
  border-radius: 16px;
  border: 1px solid var(--edge-hi);
  border-left: 3px solid rgba(var(--led-rgb), 0.7);
  background: rgba(255, 255, 255, 0.025);
  font-size: 14px;
  line-height: 1.55;
  color: #b4bfcd;
}

.year-wrap {
  margin-top: 14px;
  padding: 8px 26px 14px;
  border-radius: 24px;
  border: 1px solid var(--edge);
  background: var(--panel);
  overflow-x: auto;
}
.year-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.year-table caption {
  padding: 16px 0 10px;
  text-align: left;
  font-weight: 650;
  color: var(--text);
}
.year-table th {
  padding: 10px 14px 10px 0;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
}
.year-table td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--edge);
  font-stretch: var(--narrow);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.year-table tbody tr:last-child td { border-bottom: 0; }
.year-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.year-table .num { text-align: right; }
.year-table th:last-child, .year-table td:last-child { padding-right: 0; }
.year-table .year { font-weight: 650; }
.year-table .year small { margin-left: 6px; font-weight: 400; font-size: 12.5px; color: var(--faint); }
.year-table .bar-col { width: 42%; }
.result-cell { display: grid; grid-template-columns: minmax(0, 1fr) 92px; align-items: center; gap: 14px; }
.result-cell .value { text-align: right; font-weight: 650; }
.result-track { position: relative; height: 8px; }
.result-track::before {                 /* the zero line */
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: var(--zero);
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.result-bar {
  position: absolute;
  top: 0;
  height: 8px;
  border-radius: 0 4px 4px 0;
  background: var(--up);
}
.result-bar.down { border-radius: 4px 0 0 4px; background: var(--down); }

.method-note {
  margin-top: 16px;
  max-width: 96ch;
  font-size: 13.5px;
  color: var(--faint);
}

.day-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.day-line::before {                     /* the session, left to right */
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--led-rgb), 0.7), rgba(var(--led-rgb), 0.18));
}
.day-line li { position: relative; display: grid; align-content: start; gap: 6px; padding-top: 34px; color: #c3ccd9; }
.day-line li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 0 4px var(--void), 0 0 14px rgba(var(--led-rgb), 0.9);
}
.day-time { font-size: 14px; font-weight: 600; color: var(--led); font-stretch: var(--narrow); }
.day-line strong {
  font-stretch: var(--wide);
  font-weight: 750;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text);
}
.skip-line {
  margin-top: 40px;
  padding-top: 20px;
  max-width: 70ch;
  border-top: 1px solid var(--edge);
  color: var(--muted);
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
  margin: 0;
}
.control-grid > div { padding: 22px 0 26px; border-top: 1px solid var(--edge); }
.control-grid dt { font-weight: 700; font-size: 18px; }
.control-grid dd { margin: 6px 0 0; max-width: 44ch; color: #c3ccd9; }

.start { padding-bottom: clamp(40px, 6vw, 72px); }
.start-panel {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: clamp(40px, 6vw, 72px) var(--gutter);
  border-radius: 28px;
  border: 1px solid rgba(var(--led-rgb), 0.28);
  background:
    radial-gradient(600px 240px at 50% 0%, rgba(var(--led-rgb), 0.14), transparent 70%),
    rgba(10, 13, 18, 0.72);
  box-shadow: var(--panel-shadow), 0 0 80px -30px rgba(var(--led-rgb), 0.45);
  text-align: center;
}
.start-panel .section-lead { margin: 6px 0 22px; }
.start .risk-line { margin-top: 28px; padding-top: 0; }

/* ------------------------------------------------------------------ admin extras */
.admin-grid {
  margin-top: 14px;
  padding-bottom: 96px;
}
.admin-grid > .block[hidden] + .block { margin-top: 0; }
.inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  align-items: end;
  max-width: 900px;
}
.inline-form .field { margin-bottom: 0; }
.console-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.codes {
  font-stretch: var(--narrow);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------------ small screens */
@media (max-width: 900px) {
  .ledger { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .figures, .figures.with-chart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures.with-chart .figure.wide, .figures.with-chart .figure:last-child { grid-column: 1 / -1; }
  .entry-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "hero" "form" "details";
    min-height: 0;
  }
  .entry-demo { margin-top: 32px; }
  .entry-form { padding: 76px 0 8px; }      /* the tape line runs in this gap on small screens */
  .entry-details .plain-list { margin-top: 28px; }
  .risk-line { margin-top: 32px; }
  .record-grid { grid-template-columns: minmax(0, 1fr); }
  .record-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .day-line { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .day-line::before { display: none; }
  .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .state { grid-template-columns: auto minmax(0, 1fr); border-radius: 20px; }
  .state .switch, .state .console-controls { grid-column: 1 / -1; }
  .console-controls { align-items: flex-start; }
  .who { display: none; }
  .tape .opt { display: none; }
  .tape { font-size: 14.5px; }
  .tape th { padding-right: 10px; }
  .tape td { padding: 10px 10px 10px 0; }
  .tape .note { display: block; font-size: 12.5px; line-height: 1.3; }
  .tape .note::before { content: none; }
  .bracket-price { font-size: 17px; }
  .figure { padding: 16px 16px 14px; }
  .figure-value { font-size: 23px; }
  .block { padding: 20px 18px 22px; }
  .dialog-head { padding: 22px 20px 0; }
  .dialog-body { padding: 16px 20px 22px; }
  .entry-demo { gap: 14px; padding: 12px 16px; }
  .entry-form-inner { padding: 22px 20px; }
  .equity-panel { padding: 20px 16px 12px; }
  .equity-chart { min-height: 230px; }
  .record-figures .figure-value { font-size: 25px; }
  .year-wrap { padding: 4px 16px 10px; }
  .year-table .opt { display: none; }
  .year-table .bar-col { width: auto; }
  .result-cell { grid-template-columns: minmax(64px, 1fr) 76px; gap: 10px; }
  .year-table td, .year-table th { padding-right: 10px; }
  .day-line { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .control-grid { grid-template-columns: minmax(0, 1fr); }
  .section-lead { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}