:root{--bg:#f6f7fa;--fg:#17243b;--muted:#5b6578;--card:#fff;--line:#dfe3ea;--pri:#244d89;--warn:#9a3412;--ok:#166534}
@media (prefers-color-scheme:dark){:root{--bg:#0f1520;--fg:#e8edf5;--muted:#9aa6b8;--card:#182131;--line:#2a3547;--pri:#6f9be0;--warn:#f0a070;--ok:#6fcf8f}}
*{box-sizing:border-box}body{margin:0;font:17px/1.6 -apple-system,system-ui,sans-serif;background:var(--bg);color:var(--fg);padding:max(16px,env(safe-area-inset-top)) 16px 32px}
main{max-width:34rem;margin:0 auto}h1{font-size:1.4rem;margin:.5rem 0 1rem}h2{font-size:1.05rem;margin:0 0 .5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:12px 0}
button{font:inherit;border:0;border-radius:12px;padding:13px 18px;background:var(--pri);color:#fff;width:100%;margin-top:8px}
button.sub{background:transparent;color:var(--pri);border:1px solid var(--line)}button:disabled{opacity:.5}
.muted{color:var(--muted);font-size:.9rem}.warn{color:var(--warn)}.ok{color:var(--ok)}
.row{display:flex;justify-content:space-between;gap:8px;align-items:center}.mono{font-family:ui-monospace,monospace;word-break:break-all}
.badge{display:inline-block;font-size:.75rem;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}