:root {
  --bg:#0f1115; --panel:#171a21; --panel2:#1d2029; --text:#e8eaf0; --muted:#9aa1b2;
  --pos:#3ecf8e; --neg:#f2545b; --accent:#5b8cff; --border:#2a2e3a;
}
* { box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,Segoe UI,Roboto,sans-serif; padding:24px 16px 60px; max-width:1150px; margin:0 auto; }
h1 { font-size:1.5rem; margin-bottom:4px; display:flex; align-items:center; gap:10px; }
h2 { font-size:1.1rem; margin-top:36px; border-bottom:1px solid var(--border); padding-bottom:8px; }
h3 { font-size:0.9rem; color:var(--muted); margin-top:20px; text-transform:uppercase; letter-spacing:.04em;}
.sub { color:var(--muted); margin-bottom:20px; font-size:0.88rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:16px 0; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px; }
.card .label { color:var(--muted); font-size:0.7rem; text-transform:uppercase; letter-spacing:.05em; }
.card .value { font-size:1.35rem; font-weight:600; margin-top:4px; }
.pos { color:var(--pos); }
.neg { color:var(--neg); }
table { width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:0.83rem; background:var(--panel); border-radius:10px; overflow:hidden; }
th, td { padding:6px 9px; border-bottom:1px solid var(--border); text-align:left; }
th { color:var(--muted); font-weight:600; font-size:0.7rem; text-transform:uppercase; letter-spacing:.03em; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.note { background:var(--panel2); border-left:3px solid var(--accent); padding:12px 14px; border-radius:6px; margin:14px 0; font-size:0.87rem; }
.note.warn { border-left-color:var(--neg); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px) { .two-col { grid-template-columns:1fr; } .cards{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));} }
.formgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; }
.formgrid label { display:flex; flex-direction:column; font-size:0.75rem; color:var(--muted); gap:4px; }
.formgrid input, .formgrid select { background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:7px 8px; font-size:0.85rem; }
.formactions { grid-column:1/-1; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
button { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:8px 16px; font-size:0.85rem; cursor:pointer; }
button.secondary { background:var(--panel2); color:var(--text); border:1px solid var(--border); }
button:hover { opacity:0.9; }
.tablewrap { max-height:420px; overflow-y:auto; border-radius:10px; }
.badge-src { font-size:0.68rem; padding:1px 6px; border-radius:10px; background:var(--panel2); border:1px solid var(--border); color:var(--muted); }
.small-btn { padding:3px 8px; font-size:0.72rem; }
#toast { position:fixed; bottom:20px; right:20px; background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; font-size:0.85rem; opacity:0; transition:opacity .3s; pointer-events:none; z-index:99; }
#toast.show { opacity:1; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot.live { background:var(--pos); box-shadow:0 0 0 0 rgba(62,207,142,.6); animation:pulse 1.6s infinite; }
.dot.dead { background:var(--neg); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(62,207,142,.5);} 70%{box-shadow:0 0 0 8px rgba(62,207,142,0);} 100%{box-shadow:0 0 0 0 rgba(62,207,142,0);} }
.ticker { display:flex; gap:14px; flex-wrap:wrap; margin:12px 0 20px; }
.tick { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:0.82rem; min-width:110px; }
.tick .sym { color:var(--muted); font-size:0.7rem; }
.tick .px { font-weight:600; font-variant-numeric:tabular-nums; transition:color .3s; }
.tick .px.flash-up { color:var(--pos); }
.tick .px.flash-down { color:var(--neg); }
footer { color:var(--muted); font-size:0.75rem; margin-top:40px; text-align:center; }