:root { color-scheme: light; --bg:#f4f4f2; --surface:#fcfcfb; --text:#0b0b0b; --text-2:#52514e; --muted:#7a7975; --line:#e3e2dd;
  --series-1:#2a78d6; --good:#008300; --bad:#e34948; --warn:#eda100; --radius:10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg:#111110; --surface:#1a1a19; --text:#f0efec; --text-2:#c3c2b7; --muted:#8e8d86; --line:#2c2c2a; --series-1:#3987e5; --bad:#e66767; } }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); font-size:14px; }
.hidden { display:none !important; }
header { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; flex-wrap:wrap; }
.brand { font-weight:700; font-size:16px; }
nav { display:flex; gap:4px; flex-wrap:wrap; }
nav button { background:transparent; border:1px solid transparent; color:var(--text-2); }
nav button:hover { color:var(--text); }
nav button.active { background:var(--bg); border-color:var(--line); color:var(--text); font-weight:600; }
.right { margin-left:auto; display:flex; gap:8px; align-items:center; }
main { padding:16px; max-width:1400px; margin:0 auto; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; overflow:auto; }
.card h2 { margin:0 0 10px; font-size:14px; color:var(--text-2); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.tiles { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:16px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; }
.tile .label { color:var(--muted); font-size:12px; }
.tile .value { font-size:22px; font-weight:700; margin-top:4px; }
.tile .sub { color:var(--text-2); font-size:12px; margin-top:2px; }
button { background:var(--series-1); color:#fff; border:none; border-radius:8px; padding:7px 12px; cursor:pointer; font-size:13px; }
button.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
button.small { padding:3px 8px; font-size:12px; }
input, select, textarea { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px; }
textarea { width:100%; }
.filters, .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--muted); font-weight:600; font-size:12px; }
td.num, th.num { text-align:right; font-variant-numeric: tabular-nums; }
.badge { display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; border:1px solid var(--line); color:var(--text-2); }
.badge.won { color:#fff; background:var(--good); border-color:var(--good); }
.badge.lost { color:#fff; background:var(--bad); border-color:var(--bad); }
.badge.live { color:#fff; background:var(--series-1); border-color:var(--series-1); }
.badge.inplay { color:#fff; background:var(--bad); border-color:var(--bad); font-weight:600; }
.muted { color:var(--muted); } .error { color:var(--bad); } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; white-space:pre-wrap; }
.pos { color:var(--good); } .neg { color:var(--bad); }
.chart { width:100%; min-height:200px; }
.chart svg { width:100%; height:220px; display:block; }
.chart .axis { stroke:var(--line); } .chart .grid { stroke:var(--line); stroke-dasharray:2 3; }
.chart .line { fill:none; stroke:var(--series-1); stroke-width:2; }
.chart .bar { fill:var(--series-1); } .chart .bar.neg { fill:var(--bad); }
.chart text { fill:var(--text-2); font-size:11px; }
.tooltip { position:fixed; pointer-events:none; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:12px; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.bar-meter { height:8px; background:var(--line); border-radius:4px; overflow:hidden; display:inline-block; width:80px; vertical-align:middle; margin-left:6px; }
.bar-meter i { display:block; height:100%; background:var(--series-1); }
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login .card { width:340px; } .login input { width:100%; margin:10px 0; } .login button { width:100%; }