:root {
  --bg: #07042a; --ink: #e9ecff; --dim: #8f93c7; --cyan: #4fd3ff; --green: #39ff8c; --pink: #ff3d8a;
  --gold: #ffd54f; --panel: rgba(10, 8, 48, .78); --line: rgba(120, 140, 255, .25);
  font-family: "Inter", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }

/* ---------- top hud ---------- */
#hud-top { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; gap: 8px; pointer-events: none; z-index: 5; white-space: nowrap; }
#hud-top > div { pointer-events: auto; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.hud-right { margin-left: 8px; }
.brand { font-weight: 800; letter-spacing: .18em; font-size: 13px; white-space: nowrap; color: #fff; text-shadow: 0 0 12px var(--cyan); }
.brand span { color: var(--cyan); font-weight: 600; margin-left: 6px; letter-spacing: .25em; font-size: 11px; }
.badge { font-size: 10px; letter-spacing: .12em; padding: 4px 8px; white-space: nowrap; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); background: var(--panel); }
.badge.live { color: var(--green); border-color: var(--green); box-shadow: 0 0 10px rgba(57,255,140,.4); }
.conn { color: #ff5b5b; font-size: 12px; } .conn.ok { color: var(--green); }
.periods { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.periods button { background: transparent; border: 0; color: var(--dim); padding: 7px 12px; font-weight: 700; letter-spacing: .08em; font-size: 12px; white-space: nowrap; }
.periods button.on { background: rgba(79,211,255,.15); color: #fff; text-shadow: 0 0 8px var(--cyan); }
.test { background: linear-gradient(180deg, #2bd4ff, #1a8cff); color: #041; border: 0; border-radius: 6px; padding: 8px 18px;
  font-weight: 900; letter-spacing: .15em; font-size: 13px; color: #04102a; box-shadow: 0 0 18px rgba(79,211,255,.55); }
.test:disabled { filter: grayscale(.6); opacity: .6; box-shadow: none; cursor: default; }
.speed { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 11px; color: var(--dim); letter-spacing: .1em; }
.speed select { background: transparent; color: #fff; border: 0; font-size: 12px; max-width: 120px; }
.speed select option { color: #000; }
.speed button { background: transparent; border: 1px solid var(--line); color: #fff; border-radius: 4px; padding: 2px 7px; font-size: 11px; }
.progress { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dim); }
.progress .bar { width: 160px; height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--green)); box-shadow: 0 0 8px var(--cyan); }
.clock { font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; letter-spacing: .08em; color: #fff; background: var(--panel); padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.vault-hud { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.vault-hud small { font-size: 9px; letter-spacing: .25em; color: var(--dim); }
.vault-hud b { font-size: 17px; color: var(--green); text-shadow: 0 0 14px rgba(57,255,140,.6); font-variant-numeric: tabular-nums; }
.vault-hud b.neg { color: var(--pink); text-shadow: 0 0 14px rgba(255,61,138,.6); }
.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
.ghost:hover { color: #fff; border-color: var(--cyan); }

/* ---------- toast ---------- */
.toast { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line);
  color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 12px; z-index: 9; backdrop-filter: blur(6px); }
.toast.err { border-color: var(--pink); color: #ffd3e2; }

/* ---------- interior hud ---------- */
#interior-hud { position: fixed; top: 58px; left: 16px; z-index: 6; display: flex; gap: 10px; align-items: center; }
#btn-back { background: var(--panel); color: #fff; border: 1px solid var(--cyan); border-radius: 6px; padding: 7px 12px; font-size: 12px; letter-spacing: .1em; box-shadow: 0 0 10px rgba(79,211,255,.35); }
#interior-title { font-size: 12px; color: var(--dim); letter-spacing: .15em; }

/* ---------- bottom ---------- */
#hud-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; }
.days { display: flex; gap: 6px; padding: 0 12px 6px; overflow: hidden; justify-content: flex-end; }
.days .chip { font-size: 10px; padding: 3px 7px; border-radius: 4px; background: rgba(10,8,48,.8); border: 1px solid var(--line); color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.days .chip b { margin-left: 6px; color: var(--green); } .days .chip b.neg { color: var(--pink); }
.days .chip.today { border-color: var(--cyan); color: #fff; }
.ticker { height: 26px; background: linear-gradient(180deg, rgba(5,3,30,.2), rgba(5,3,30,.95)); border-top: 1px solid var(--line); overflow: hidden; }
.ticker .track { display: flex; gap: 28px; align-items: center; height: 100%; padding: 0 12px; white-space: nowrap; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ticker .track span b { color: #fff; } .ticker .track span i { font-style: normal; color: var(--green); } .ticker .track span i.neg { color: var(--pink); }
.ticker .track span em { font-style: normal; color: var(--cyan); }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(4,2,26,.55); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.card { width: min(920px, 92vw); background: rgba(8,6,40,.85); border: 1px solid var(--line); border-radius: 12px; padding: 26px 30px; text-align: center;
  box-shadow: 0 0 60px rgba(79,211,255,.15), inset 0 0 40px rgba(60,40,160,.2); }
.card.narrow { width: min(520px, 92vw); text-align: left; }
.card p, .card label { font-size: 13px; color: var(--ink); display: block; margin: 8px 0; }
.card select { background: #0d0a3a; color: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; margin-left: 8px; }
.card code { color: var(--cyan); }
.muted { color: var(--dim); }
.sum-head { font-size: 11px; letter-spacing: .3em; color: var(--cyan); }
.sum-total { font-size: 64px; font-weight: 900; color: var(--green); text-shadow: 0 0 30px rgba(57,255,140,.55); letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.sum-total.neg { color: var(--pink); text-shadow: 0 0 30px rgba(255,61,138,.55); }
.sum-sub { font-size: 12px; color: var(--dim); letter-spacing: .1em; }
#sum-chart { width: 100%; height: 220px; margin: 14px 0 6px; }
.sum-best { font-size: 12px; color: var(--gold); letter-spacing: .1em; }
.sum-bots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.sum-bots .b { font-size: 11px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; color: var(--dim); }
.sum-bots .b b { color: var(--green); margin-left: 6px; } .sum-bots .b b.neg { color: var(--pink); }
.sum-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0 14px; }
.sum-stats div { background: rgba(255,255,255,.04); border-radius: 6px; padding: 6px 4px; }
.sum-stats small { display: block; font-size: 9px; letter-spacing: .2em; color: var(--dim); }
.sum-stats b { font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.sum-actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.sum-actions button { background: rgba(79,211,255,.12); color: #fff; border: 1px solid var(--cyan); border-radius: 6px; padding: 8px 18px; font-size: 12px; letter-spacing: .1em; }
.runs-list { max-height: 50vh; overflow: auto; margin: 10px 0; }
.runs-list .r { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; font-size: 12px; cursor: pointer; }
.runs-list .r:hover { border-color: var(--cyan); }
.runs-list .r b { color: var(--green); } .runs-list .r b.neg { color: var(--pink); }

/* ---------- trades table ---------- */
.card.wide { width: min(1240px, 96vw); text-align: left; }
.filters { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.filters button { background: transparent; color: var(--dim); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; font-size: 11px; }
.filters button.on { color: #fff; border-color: var(--cyan); background: rgba(79,211,255,.12); }
.table-wrap { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
#trades-table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
#trades-table th { position: sticky; top: 0; background: #0d0a3a; color: var(--dim); font-weight: 600; letter-spacing: .1em; font-size: 10px; text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
#trades-table td { padding: 6px 8px; border-bottom: 1px solid rgba(120,140,255,.1); color: var(--ink); white-space: nowrap; }
#trades-table td.pos { color: var(--green); font-weight: 700; } #trades-table td.neg { color: var(--pink); font-weight: 700; }
#trades-table td.call { color: var(--green); } #trades-table td.put { color: var(--pink); }

/* ---------- evolution panel ---------- */
.evo-bots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.evo-bot { border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 11px; background: rgba(255,255,255,.03); }
.evo-bot h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; color: #fff; }
.evo-bot h4 small { color: var(--dim); font-weight: 400; margin-left: 6px; }
.evo-slot { display: flex; justify-content: space-between; gap: 6px; padding: 4px 0; border-top: 1px solid rgba(120,140,255,.12); }
.evo-slot .k { color: var(--dim); letter-spacing: .1em; font-size: 10px; min-width: 76px; }
.evo-slot .v { color: #fff; } .evo-slot .v b { color: var(--green); } .evo-slot .v b.neg { color: var(--pink); }
.evo-slot.champ .k { color: var(--gold); } .evo-slot.chal .k { color: var(--cyan); } .evo-slot.prev .k { color: var(--dim); }
.evo-agent { margin-top: 6px; color: var(--dim); font-size: 10px; line-height: 1.5; }
.evo-agent b { color: #fff; font-weight: 600; }
.evo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.evo-h { font-size: 10px; letter-spacing: .25em; color: var(--cyan); margin: 6px 0; }
.evo-list { max-height: 28vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.45; }
.evo-list div { padding: 3px 0; border-bottom: 1px solid rgba(120,140,255,.1); color: var(--ink); white-space: pre-wrap; }
.evo-list .t { color: var(--dim); margin-right: 6px; font-variant-numeric: tabular-nums; }
.evo-list .promote { color: var(--green); } .evo-list .revert { color: var(--pink); } .evo-list .challenger { color: var(--cyan); }
.evo-list .error { color: var(--pink); }
body.readonly #btn-test, body.readonly .speed, body.readonly #btn-live, body.readonly .periods { display: none !important; }