:root { --bg:#fff; --fg:#1f2328; --muted:#6b7280; --line:#e5e7eb; --card:#f5f6f7; --ok:#1a7f37; --bad:#cf222e; --acc:#56b89f; }
@media (prefers-color-scheme: dark) { :root { --bg:#16181d; --fg:#e6e6e6; --muted:#9aa0a6; --line:#2c2f36; --card:#20232a; --ok:#3fb950; --bad:#f85149; } }
* { box-sizing: border-box; }
body { margin:0; padding:24px 16px 80px; background:var(--bg); color:var(--fg); font:15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width:1100px; margin:0 auto; }
a { color:var(--acc); }
h1 { font-size:24px; } h2 { font-size:19px; margin-top:32px; } h3 { font-size:16px; }
button, input, select { font:inherit; padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:inherit; }
button { cursor:pointer; } button.primary { background:var(--acc); color:#fff; border:none; }
input { background:var(--bg); }
table { border-collapse:collapse; width:100%; font-size:14px; }
td, th { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
th { color:var(--muted); font-weight:500; }
.hint { color:var(--muted); } .ok { color:var(--ok); } .bad { color:var(--bad); }
.card { background:var(--card); border-radius:10px; padding:16px; margin:12px 0; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.top { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.bar { height:8px; background:var(--line); border-radius:4px; overflow:hidden; min-width:80px; }
.bar > i { display:block; height:100%; background:var(--acc); }
.tabs button.cur { background:var(--acc); color:#fff; border-color:var(--acc); }
.scroll { overflow-x:auto; }
.card > .row > .bar { flex:1; max-width:320px; }