:root { --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --accent:#38bdf8; --muted:#94a3b8; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family: system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
header { background:var(--card); padding:16px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; border-bottom:2px solid var(--accent); }
header .brand { font-weight:700; font-size:1.25rem; color:var(--accent); text-decoration:none; }
nav a { color:var(--text); text-decoration:none; margin-left:16px; padding:6px 10px; border-radius:6px; }
nav a:hover, nav a.active { background:var(--accent); color:var(--bg); }
main { max-width:900px; margin:0 auto; padding:32px 16px; }
h1 { margin-bottom:12px; }
p { color:var(--muted); line-height:1.6; margin-bottom:16px; }
.card { background:var(--card); border-radius:10px; padding:20px; margin-top:16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
button { background:var(--accent); color:var(--bg); border:none; padding:10px 16px; border-radius:6px; font-weight:600; cursor:pointer; }
button:hover { opacity:.9; }
input, textarea { width:100%; padding:10px; border-radius:6px; border:1px solid #334155; background:#0b1220; color:var(--text); margin-bottom:12px; }
.badge { display:inline-block; background:#0b1220; border:1px solid var(--accent); color:var(--accent); padding:2px 10px; border-radius:999px; font-size:.8rem; margin-bottom:12px; }
footer { text-align:center; color:var(--muted); padding:24px; font-size:.85rem; }
code { background:#0b1220; padding:2px 6px; border-radius:4px; color:var(--accent); }