:root { --bg:#0f1115; --card:#171a21; --fg:#e6e6e6; --muted:#9aa4b2; --accent:#5b8cff; --danger:#ff6b6b; --line:#232833; }
:root[data-theme="light"] { --bg:#f6f7f9; --card:#fff; --fg:#1a1a1a; --muted:#5a6472; --accent:#2f6bff; --danger:#d64545; --line:#e3e6ea; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif; }
header,main,footer { max-width:980px; margin:0 auto; padding:16px; }
header h1 { margin:0 0 4px; } .sub { color:var(--muted); margin:0; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.card .n { font-size:28px; font-weight:700; } .card .l { color:var(--muted); font-size:13px; }
h2 { margin-top:28px; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:14px; }
th { color:var(--muted); font-weight:600; }
.tag { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--line); font-size:12px; }
.conf { color:var(--danger); font-weight:700; }
.ev { color:var(--muted); font-size:12px; word-break:break-all; }
footer { color:var(--muted); text-align:center; border-top:1px solid var(--line); margin-top:24px; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg:#f6f7f9; --card:#fff; --fg:#1a1a1a; --muted:#5a6472; --accent:#2f6bff; --danger:#d64545; --line:#e3e6ea; } }