:root { --ink:#0E1A26; --panel:#15263A; --panel-2:#1A2E45; --line:#24384F; --text:#E6EEF6; --muted:#8DA2B8;
  --gain:#2BC48A; --loss:#F2596B; --act:#E7B04B; --info:#3FB6D9; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; background:var(--ink); color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-variant-numeric: tabular-nums; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:17px; margin:26px 0 10px; }
.muted { color:var(--muted); } .small { font-size:13px; } .pos { color:var(--gain); } .neg { color:var(--loss); }
.hidden { display:none !important; }
.wrap { max-width:1180px; margin:0 auto; padding:18px 22px 60px; }
.top { display:flex; align-items:center; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding:12px 22px; background:var(--panel); }
.brand { font-weight:700; letter-spacing:.3px; } .brand b { color:var(--act); }
.tabs { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.tabs a { color:var(--muted); text-decoration:none; padding:7px 12px; border-radius:6px; }
.tabs a.on, .tabs a:hover { color:var(--text); background:var(--panel-2); }
.btn { font:inherit; color:var(--text); background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:7px 13px; cursor:pointer; }
.btn:hover { border-color:var(--muted); } .btn.primary { background:var(--act); color:#1a1300; border-color:var(--act); font-weight:600; }
.btn.danger { border-color:var(--loss); color:var(--loss); } .btn.small { padding:3px 9px; font-size:13px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.banner { border-radius:10px; padding:12px 16px; margin:16px 0; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.banner.red { background:rgba(242,89,107,.12); border:1px solid var(--loss); } .banner.amber { background:rgba(231,176,75,.12); border:1px solid var(--act); }
.banner.ok { background:rgba(43,196,138,.08); border:1px solid rgba(43,196,138,.45); }
.banner .grow { flex:1; min-width:240px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.card { background:var(--panel); padding:13px 15px; } .card b { display:block; font-size:21px; } .card span { color:var(--muted); font-size:13px; }
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table { width:100%; border-collapse:collapse; }
th, td { padding:8px 11px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th { color:var(--muted); font-weight:500; font-size:13px; background:var(--panel); } td.l, th.l { text-align:left; }
tr:last-child td { border-bottom:0; }
.chip { display:inline-block; padding:1px 8px; border-radius:20px; font-size:12px; border:1px solid var(--line); }
.chip.ok { color:var(--gain); border-color:rgba(43,196,138,.5); } .chip.bad { color:var(--loss); border-color:rgba(242,89,107,.5); }
.chip.warn { color:var(--act); border-color:rgba(231,176,75,.5); }
.form { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px 14px; align-items:end; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
input, select { font:inherit; color:var(--text); background:var(--ink); border:1px solid var(--line); border-radius:6px; padding:7px 9px; }
input:focus, select:focus, .btn:focus-visible { outline:2px solid var(--info); outline-offset:1px; }
.err { color:var(--loss); min-height:1.2em; margin:6px 0 0; }
.login { max-width:380px; margin:12vh auto; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:26px; display:grid; gap:12px; }
.modal { position:fixed; inset:0; background:rgba(5,10,16,.72); display:grid; place-items:center; z-index:20; padding:16px; }
.mbox { background:var(--panel); border:1px solid var(--act); border-radius:12px; padding:22px; width:min(440px,100%); display:grid; gap:8px; }
.mbox h2 { margin:0; } .mbox input { font-size:22px; letter-spacing:6px; text-align:center; }
.row { display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:10px 16px; z-index:30; max-width:90vw; }
.note { color:var(--muted); font-size:13px; margin:8px 0 0; }
@media (max-width:700px) { .wrap { padding:12px; } th, td { padding:7px 8px; } }
.acc { color:var(--act); } .m0 { margin:0; } td.wraptext { white-space:normal; min-width:260px; }