:root { color-scheme: dark; --bg:#0f172a; --panel:#111827; --muted:#94a3b8; --text:#e5e7eb; --accent:#38bdf8; --ok:#34d399; --bad:#fb7185; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif; background:radial-gradient(circle at top left,#1e3a8a 0,#0f172a 36rem); color:var(--text); }
main { max-width:1100px; margin:0 auto; padding:40px 20px; }
h1 { font-size:clamp(32px,5vw,58px); line-height:1; margin:0 0 12px; letter-spacing:-0.04em; }
h2 { margin:0 0 12px; }
p { color:var(--muted); }
a { color:var(--accent); }
.hero { display:grid; gap:18px; margin-bottom:24px; }
.badge { display:inline-flex; gap:8px; align-items:center; width:max-content; padding:6px 10px; border:1px solid #334155; border-radius:999px; background:#020617aa; color:#bae6fd; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.card { background:linear-gradient(180deg,#111827ee,#020617dd); border:1px solid #334155; border-radius:18px; padding:18px; box-shadow:0 18px 50px #0006; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
button,.button { border:1px solid #475569; background:#0f172a; color:var(--text); padding:9px 12px; border-radius:10px; cursor:pointer; text-decoration:none; }
button.primary,.button.primary { background:#0284c7; border-color:#38bdf8; color:white; }
button:hover,.button:hover { border-color:#7dd3fc; }
pre { max-height:360px; overflow:auto; white-space:pre-wrap; word-break:break-word; background:#020617; border:1px solid #1f2937; border-radius:14px; padding:12px; color:#d1d5db; }
.status { font-weight:700; }
.ok { color:var(--ok); }
.bad { color:var(--bad); }
ul { padding-left:20px; color:var(--muted); }