:root { --bg:#0f1117; --card:#181b24; --fg:#e6e8ee; --muted:#8b91a3; --accent:#4f8cff; --danger:#ff5c5c; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--fg); }
nav { display:flex; gap:1rem; align-items:center; padding:.8rem 1.2rem; background:var(--card); border-bottom:1px solid #262a36; }
nav a { color:var(--fg); text-decoration:none; opacity:.85; }
nav a:hover { opacity:1; }
nav .brand { font-weight:700; margin-right:1rem; }
nav .right { margin-left:auto; }
main { max-width:900px; margin:2rem auto; padding:0 1rem; }
h1 { font-size:1.4rem; }
table { width:100%; border-collapse:collapse; background:var(--card); border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid #262a36; }
th { color:var(--muted); font-weight:600; font-size:.85rem; }
a { color:var(--accent); }
.card { background:var(--card); padding:1.4rem; border-radius:12px; margin-bottom:1.2rem; }
.card.login { max-width:340px; margin:5rem auto; }
label { display:block; margin:.8rem 0; }
input { width:100%; margin-top:.3rem; padding:.6rem; border-radius:8px; border:1px solid #2d3242; background:#11131a; color:var(--fg); }
.suffix { display:flex; align-items:center; gap:.4rem; }
.suffix span { color:var(--muted); white-space:nowrap; }
button { padding:.6rem 1.1rem; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; font-weight:600; }
button.danger { background:transparent; color:var(--danger); border:1px solid var(--danger); padding:.3rem .7rem; }
.badge { background:var(--accent); color:#fff; padding:.1rem .5rem; border-radius:6px; font-size:.75rem; }
.error { color:var(--danger); }
.hint { color:var(--muted); font-size:.9rem; }
.steps li.ok { color:#67d98b; } .steps li.fail { color:var(--danger); }