:root{color-scheme:dark;--bg:#0a0e1a;--panel:#111830;--line:#222c4d;--text:#eef1fb;--muted:#9aa5c7;--brand:#1e6bff;--violet:#6b74ff;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444}
@media (prefers-color-scheme:light){:root{color-scheme:light;--bg:#f4f6fc;--panel:#fff;--line:#d9dff0;--text:#0f1631;--muted:#53608a}}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 500px at 50% -10%,rgba(30,107,255,.18),transparent),var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh}
#app{max-width:880px;margin:0 auto;padding:32px 16px 64px}
h1{font-size:24px;margin:0}h2{font-size:17px;margin:0 0 4px}
.muted{color:var(--muted)}.center{text-align:center}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.brand i{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--violet));display:inline-block}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.stat{background:rgba(127,140,190,.08);border-radius:10px;padding:10px 12px}
.stat b{display:block;font-size:17px}.stat span{font-size:12px;color:var(--muted)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(34,197,94,.15);color:var(--ok)}
.badge.bad{background:rgba(239,68,68,.15);color:var(--bad)}.badge.warn{background:rgba(245,158,11,.15);color:var(--warn)}
button,.btn{font:inherit;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block}
button.primary,.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
button.danger{border-color:rgba(239,68,68,.5);color:var(--bad)}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,.btn:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
input{font:inherit;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0;flex:1}
form.inline{display:flex;gap:8px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;margin-top:10px}
th,td{text-align:left;padding:8px 6px;border-top:1px solid var(--line);font-size:14px}th{color:var(--muted);font-weight:600;font-size:12px;border-top:0}
code{background:rgba(127,140,190,.15);padding:2px 6px;border-radius:6px;font-size:13px;word-break:break-all}
.notice{border-left:3px solid var(--brand);padding:8px 12px;background:rgba(30,107,255,.08);border-radius:6px;margin:12px 0}
#toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:9}
.toast{background:var(--panel);border:1px solid var(--line);padding:10px 16px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.toast.err{border-color:var(--bad)}
@media (prefers-reduced-motion:no-preference){.card{animation:in .25s ease-out}@keyframes in{from{opacity:0;transform:translateY(6px)}}}