:root { --bg:#f6f6f3; --fg:#1b1b1a; --muted:#6b6b66; --card:#fff; --line:#e3e2dc; --accent:#1f4f46; --warn:#9a5b00; --warn-bg:#fff2dc; --bad:#a3262a; --bad-bg:#fde8e8; --ok:#1e6b3a; --ok-bg:#e4f4ea; }
@media (prefers-color-scheme: dark) { :root { --bg:#141413; --fg:#ecebe6; --muted:#9a9990; --card:#1d1d1b; --line:#2e2e2b; --accent:#7fc4b4; --warn:#f0b35a; --warn-bg:#3a2d12; --bad:#ff8f93; --bad-bg:#3b1a1c; --ok:#79d49a; --ok-bg:#16301f; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.top { padding:20px 16px 4px; max-width:1100px; margin:0 auto; }
.top h1 { margin:0; font-size:22px; letter-spacing:-.01em; }
main { max-width:1100px; margin:0 auto; padding:8px 16px 48px; display:grid; gap:16px; }
.muted { color:var(--muted); margin:4px 0; }
section, .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
h2 { font-size:16px; margin:0 0 10px; }
h3 { font-size:14px; margin:14px 0 6px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.big { font-size:28px; font-weight:650; letter-spacing:-.02em; }
.badge { display:inline-block; padding:1px 8px; border-radius:99px; font-size:12px; font-weight:600; margin-left:6px; vertical-align:middle; }
.b-prov { background:var(--warn-bg); color:var(--warn); } .b-ind { background:var(--warn-bg); color:var(--warn); }
.b-bad { background:var(--bad-bg); color:var(--bad); } .b-ok { background:var(--ok-bg); color:var(--ok); }
table { width:100%; border-collapse:collapse; font-size:14px; } th,td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; } th { color:var(--muted); font-weight:600; }
ul { margin:4px 0; padding-left:18px; } li { margin:2px 0; }
.bar { height:8px; background:var(--line); border-radius:99px; overflow:hidden; } .bar > i { display:block; height:100%; background:var(--accent); }
.bar.warn > i { background:var(--warn); } .bar.bad > i { background:var(--bad); }
button { font:inherit; padding:3px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); cursor:pointer; } button:hover { border-color:var(--accent); }
textarea, select { font:inherit; width:100%; background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:8px; }
.spark { display:flex; gap:3px; align-items:flex-end; height:36px; } .spark i { flex:1; background:var(--accent); opacity:.75; min-height:2px; border-radius:2px 2px 0 0; }
.limits { font-size:13px; color:var(--muted); border-top:1px dashed var(--line); margin-top:12px; padding-top:8px; }
@media (max-width:480px) { .grid { grid-template-columns:1fr; } }