:root { --bg:#0b1020; --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.12); --text:#eef2ff; --muted:#94a3b8; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --primary:#6366f1; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,Segoe UI,sans-serif; background:radial-gradient(circle at top,#1e1b4b 0%,var(--bg) 50%); color:var(--text); min-height:100vh; }
.wrap { max-width:720px; margin:0 auto; padding:2rem 1rem 3rem; }
header { text-align:center; margin-bottom:1.5rem; }
header h1 { margin:0; font-size:1.8rem; }
header p { color:var(--muted); margin:.35rem 0 0; }
.banner { padding:1rem; border-radius:12px; margin-bottom:1.25rem; font-weight:600; text-align:center; }
.banner.loading { background:rgba(99,102,241,.15); border:1px solid rgba(99,102,241,.35); }
.banner.ok { background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35); color:#86efac; }
.banner.warn { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.35); color:#fcd34d; }
.banner.bad { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); color:#fca5a5; }
.card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.25rem; margin-bottom:1rem; }
.card h2 { margin:0 0 .75rem; font-size:1.1rem; }
.card ol { margin:.5rem 0; padding-left:1.25rem; color:var(--muted); line-height:1.6; }
.card p { color:var(--muted); line-height:1.55; margin:.5rem 0; }
code { background:rgba(0,0,0,.35); padding:.15rem .4rem; border-radius:6px; font-size:.85em; }
.check { display:inline-block; margin-top:.75rem; padding:.35rem .65rem; border-radius:999px; font-size:.8rem; font-weight:600; }
.check.ok { background:rgba(34,197,94,.15); color:#86efac; }
.check.pending { background:rgba(148,163,184,.15); color:#cbd5e1; }
.check.bad { background:rgba(239,68,68,.15); color:#fca5a5; }
.btn { display:inline-block; margin-top:.5rem; margin-right:.5rem; padding:.65rem 1rem; border:0; border-radius:10px; background:var(--primary); color:#fff; font-weight:600; cursor:pointer; text-decoration:none; }
.btn.secondary { background:rgba(255,255,255,.12); }
.btn.disabled { pointer-events:none; opacity:.45; }
.diag pre { background:rgba(0,0,0,.35); padding:1rem; border-radius:10px; overflow:auto; font-size:.78rem; color:#cbd5e1; white-space:pre-wrap; }
.small { font-size:.82rem; }