:root {
  --bg: #0d1117; --panel: #161b22; --line: #2a313c; --text: #e6edf3; --muted: #8b949e;
  --buy: #3fb950; --sell: #f85149; --warn: #d29922;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, sans-serif; }
header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; padding: 1rem; border-bottom: 1px solid var(--line); }
h1 { margin: 0; font-size: 1.2rem; }
h2 { margin: 0 0 .5rem; font-size: 1rem; }
#price { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
main { padding: 1rem; display: grid; gap: 1rem; }
.muted { color: var(--muted); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .75rem; min-width: 0; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; }
#frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .2rem .4rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 500; }
#tape tbody { display: block; max-height: 420px; overflow-y: auto; }
#tape thead, #tape tbody tr { display: table; width: 100%; table-layout: fixed; }
.buy { color: var(--buy); } .sell { color: var(--sell); } .warn { color: var(--warn); }
.big { font-weight: 700; }
.meter { height: 8px; background: var(--sell); border-radius: 4px; overflow: hidden; margin: .4rem 0; }
.meter > div { height: 100%; background: var(--buy); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }
.auth { max-width: 380px; margin: 10vh auto; padding: 1rem; display: block; }
.auth form { display: grid; gap: .75rem; }
label { display: grid; gap: .25rem; color: var(--muted); }
input { font: inherit; padding: .5rem; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
button { font: inherit; padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--line); background: #238636; color: #fff; cursor: pointer; }
header form { margin-left: auto; }
header button { background: transparent; color: var(--muted); padding: .25rem .6rem; }
