:root {
  --bg: #05080D; --panel: #0A1420; --line: #1E3A4C; --ink: #E6EDF3; --muted: #7F95A8;
  --cyan: #3DD6F5; --amber: #F0A429; --green: #7CFFB2; --red: #FF5A2E; --warn: #F6C26B;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.mono, .r, .cb-v, .kpis b, .tbl td.r, time { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
h1 { margin: 0; font: 700 17px Inter, system-ui, sans-serif; letter-spacing: .02em; color: #E6FBFF; }
h2 { margin: 0 0 12px; font: 600 13px Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9FC7DA; }
h3 { margin: 20px 0 8px; font-size: 13px; color: #9FC7DA; }
main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; padding: 16px; max-width: 1440px; margin: 0 auto; }
.core-wrap { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; }
.wide { grid-column: 1 / -1; }
.note { margin: 12px 16px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #0E2A3A; }
footer { padding: 16px; text-align: center; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.neg { color: #FF8A65; } .pos { color: var(--green); } .warn { color: var(--warn); }
.stale { opacity: .55; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpis > div { display: flex; flex-direction: column; gap: 2px; }
.kpis .lbl { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.kpis b { font-size: 22px; font-weight: 600; line-height: 1.25; }
.kpis b.txt { font-family: Inter, system-ui, sans-serif; }
.small-kpis b { font-size: 16px; }
.band { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(90deg, rgba(34,197,94,.5), rgba(148,163,184,.15)); margin: 6px 0; }
.band-fill { position: absolute; top: 0; bottom: 0; background: rgba(124,255,178,.35); border: 1px solid rgba(124,255,178,.7); border-radius: 7px; }
.band-mark { position: absolute; top: -4px; width: 2px; height: 22px; background: #B8F2E6; }
.band-mark.now { background: #fff; width: 10px; height: 10px; top: 2px; border-radius: 50%; margin-left: -5px; box-shadow: 0 0 8px #fff; }
.confirms { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.confirms li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); }
.confirms li.on { border-color: var(--green); color: var(--green); }
.confirms li.na { opacity: .55; }
.badge { display: inline-block; margin: 0; padding: 4px 8px; border: 1px solid var(--amber); color: var(--amber); border-radius: 4px; font-size: 11px; letter-spacing: .08em; }
.scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 6px 8px; border-bottom: 1px solid #13202C; text-align: left; white-space: nowrap; }
.tbl thead th { color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.comps { display: flex; gap: 3px; }
.comps span { width: 26px; height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--green) var(--w), #13202C var(--w)); }
.comps span.na { background: repeating-linear-gradient(45deg, #13202C 0 3px, #1E2A36 3px 6px); }
.tag { display: inline-block; margin: 1px 4px 1px 0; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; color: #9FDFFF; }
.cb { display: grid; grid-template-columns: 70px 1fr 60px; align-items: center; gap: 8px; margin: 3px 0; }
.cb-t { position: relative; height: 12px; background: #0D1923; border-radius: 3px; }
.cb-t::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #2B5A70; }
.cb-b { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.cb-b.l { right: 50%; } .cb-b.r { left: 50%; }
.cb-v { text-align: right; font-variant-numeric: tabular-nums; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.list time { color: var(--muted); }
.btn { min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line); background: #0E2A3A; color: #E6FBFF; font: inherit; cursor: pointer; }
.btn:hover { border-color: var(--cyan); }
.btn:focus-visible, input:focus-visible, select:focus-visible, [role=button]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
input, select { min-height: 40px; padding: 6px 8px; background: #05080D; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; }
.tbl input { width: 90px; min-height: 34px; }
.row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.row label, .grid-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.span2 { grid-column: span 2; }
.msg { font-size: 12px; }
.auth { display: flex; align-items: center; gap: 10px; }
.sc-tk { font-family: Orbitron, sans-serif; font-weight: 700; font-size: 16px; fill: #E6EDF3; letter-spacing: .04em; }
.sc-chg { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 14px; }
.sc-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; fill: #7F95A8; }
.sc-lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; fill: #9FC7DA; letter-spacing: .12em; }
.sc-big { font-family: Orbitron, sans-serif; font-weight: 700; fill: #fff; }
.sc-move { transition: cx .9s ease, x .9s ease, width .9s ease; }
@media (max-width: 600px) { .span2 { grid-column: auto; } main { padding: 16px 16px; } }
@media (prefers-reduced-motion: reduce) { .sc-move, #rg-sell, #rg-buy, #pg-needle { transition: none !important; } }