:root{
  --bg:#0e1117; --bg2:#0b0f14; --fg:#e8eef7; --muted:#a7b0bf;
  --brand:#ff3b3b; --teal:#19e0b6; --card:#151b23; --border:#1f2937;
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:linear-gradient(180deg,var(--bg),var(--bg2)); color:var(--fg); font:16px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit}
.container{max-width:980px; margin:0 auto; padding:0 18px}
.top{position:sticky; top:0; z-index:10; backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.brand{text-decoration:none; font-weight:900}
.links a{margin-left:12px; opacity:.85; text-decoration:none}
.links a:hover{opacity:1}
.hero{padding:48px 0 18px}
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; background:linear-gradient(90deg,var(--brand),#c52a2a); border:none; color:white; text-decoration:none; padding:10px 16px; border-radius:999px; font-weight:800; box-shadow:0 8px 20px rgba(255,59,59,.25)}
.btn.alt{background:linear-gradient(90deg,#18c999,#0ea5b3); box-shadow:0 8px 20px rgba(25,224,182,.18)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin:12px 0}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #203046; padding:6px 8px; text-align:left}
.pre{white-space:pre-wrap; background:#0f141c; border:1px solid #1f2632; padding:10px; border-radius:8px}
.flash{background:#12212e; border:1px solid #264155; padding:10px 12px; border-radius:8px; margin:8px 0}
.foot{padding:28px 0; color:#9db0c8; border-top:1px solid #1f2632; margin-top:24px}
@media (max-width:820px){ .grid{grid-template-columns:1fr} }