:root {
  --bg: #000;
  --panel: #000;
  --ink: #d8d8d8;
  --bright: #ffffff;
  --dim: #6f6f6f;
  --faint: #3a3a3a;
  --line: #4a4a4a;
  --font: "IBM Plex Mono", "JetBrains Mono", "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 13px; line-height: 1.4; }
a { color: var(--bright); text-decoration: none; }
pre { margin: 0; font-family: inherit; white-space: pre-wrap; word-break: break-word; }
.scanlines { pointer-events: none; position: fixed; inset: 0; z-index: 9;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.12) 3px 4px); }
.wrap { max-width: 1500px; margin: 0 auto; padding: 18px 18px 48px; }

.banner { margin-bottom: 14px; }
.logo { color: var(--bright); font-size: 11px; line-height: 1.1; white-space: pre; overflow-x: auto; }
.tagline { margin: 8px 0 10px; color: var(--ink); }
.hl { color: var(--bright); font-weight: 700; }
.dim { color: var(--dim); }
.warn { color: var(--bright); }
.bad { color: var(--bright); text-decoration: underline; }
.cursor { animation: blink 1s steps(1) infinite; color: var(--bright); }
@keyframes blink { 50% { opacity: 0; } }
.statusbar { display: flex; flex-wrap: wrap; gap: 0 14px; color: var(--dim); border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); padding: 5px 0; }
.pill { color: var(--ink); }
.pill::before { content: "["; color: var(--dim); margin-right: 4px; }
.pill::after { content: "]"; color: var(--dim); margin-left: 4px; }
.pill.dim { color: var(--dim); }
.pill.warn { color: var(--bright); }
.pill.live { color: var(--bright); font-weight: 700; }

.actionbar { color: var(--bright); font-weight: 700; padding: 6px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log .action { color: var(--bright); font-weight: 700; }
.log .action::before { content: "› "; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px 14px; margin-top: 18px; }
.box { position: relative; border: 1px solid var(--line); background: var(--panel); padding: 14px 12px 12px; min-width: 0; }
.box-title { position: absolute; top: -0.75em; left: 10px; background: var(--bg); padding: 0 6px; color: var(--bright); letter-spacing: .08em; font-size: 11px; text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
.box-title .btn { text-transform: none; letter-spacing: 0; }
.box + .box-title { margin-top: 0; }
.sub-title { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin: 12px 0 4px; }
.sub-title::before { content: "── "; }
.sub-title::after { content: " ──"; }
.stream-box { grid-column: span 8; }
.target-box { grid-column: span 4; }
.money-box { grid-column: span 4; }
.positions-box { grid-column: span 4; }
.donate-box { grid-column: span 4; }
.log-box { grid-column: span 12; }
.decisions-box { grid-column: span 7; }
.trades-box { grid-column: span 5; }
@media (max-width: 1100px) { .stream-box, .target-box, .log-box, .decisions-box, .trades-box { grid-column: span 12; } .money-box, .positions-box, .donate-box { grid-column: span 6; } }
@media (max-width: 700px) { .box { grid-column: span 12 !important; } .logo { font-size: 4.6px; } }

.btn { background: none; border: 0; color: var(--dim); font: inherit; cursor: pointer; padding: 0 2px; }
.btn:hover, .btn.on { color: var(--bright); }
.box-foot { color: var(--dim); margin-top: 8px; font-size: 12px; }

.stream { position: relative; background: #000; border: 1px solid var(--faint); aspect-ratio: 16 / 10; overflow: hidden; }
.stream img { width: 100%; height: 100%; object-fit: contain; display: block; filter: grayscale(1) contrast(1.1); }
.ascii-frame { position: absolute; inset: 0; margin: 0; color: var(--bright); font-size: 6.2px; line-height: 1; white-space: pre; overflow: hidden; background: #000; }
.stream-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); text-align: center; padding: 20px; background: rgba(0,0,0,.88); }
.stream-off[hidden] { display: none; }

.target-head { font-size: 15px; margin-bottom: 6px; }
.kv { color: var(--ink); }
.kv b { color: var(--bright); font-weight: 700; }
.chart { color: var(--bright); font-size: 10px; line-height: 1.05; white-space: pre; overflow-x: auto; margin: 8px 0 4px; }
.verdict { border-left: 3px solid var(--faint); padding-left: 10px; color: var(--ink); }
.verdict.buy { border-color: var(--bright); }
.verdict .call { color: var(--bright); font-weight: 700; }
.verdict.buy .call { background: var(--bright); color: #000; padding: 0 4px; }

.table { white-space: pre; overflow-x: auto; }
.table .head { color: var(--dim); }
.log { height: 240px; overflow-y: auto; white-space: pre-wrap; }
.log .t { color: var(--dim); }
.log .warn { color: var(--bright); }
.log .error { color: var(--bright); text-decoration: underline; }
.log .decision { color: var(--bright); }
.log .trade { color: var(--bright); font-weight: 700; }
.log .donation { color: var(--bright); font-weight: 700; }
.log .browser { color: var(--ink); font-style: italic; }
.log .cycle { color: var(--dim); }
.log .info, .log .target, .log .review { color: var(--ink); }

.donate { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.qr { font-size: 8px; line-height: 1; white-space: pre; color: #fff; background: #000; padding: 3px; border: 1px solid var(--faint); }
.donate-text { flex: 1; min-width: 200px; }
.donate-text p { margin: 0 0 8px; }
.address { display: block; color: var(--bright); word-break: break-all; border: 1px dashed var(--line); padding: 4px 6px; margin-bottom: 6px; font-size: 12px; }
.row { display: flex; gap: 12px; margin-bottom: 6px; }
.foot { color: var(--dim); margin-top: 22px; font-size: 12px; }
.foot pre { white-space: pre; overflow-x: auto; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--faint); }
