:root { --bg:#0e0f12; --fg:#e7e8eb; --muted:#8a8f98; --accent:#6ee7b7; --card:#15171c; --line:#23262d; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.topbar { display:flex; gap:18px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--line); }
.topbar a { color:var(--fg); text-decoration:none; font-size:14px; }
.topbar a.brand { font-weight:700; color:var(--accent); }
.topbar .right { margin-left:auto; color:var(--muted); }
.container { max-width:1100px; margin:0 auto; padding:24px 20px; }
.hero h1 { font-size:34px; margin:0 0 4px; }
.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; }
.card h2 { margin:0 0 10px; font-size:18px; }
.list { padding-left:18px; margin:0; }
.list li { margin-bottom:8px; }
.table { width:100%; border-collapse:collapse; margin-top:12px; }
.table th, .table td { border-bottom:1px solid var(--line); padding:10px; text-align:left; }
form label { display:block; margin-bottom:10px; }
form input, form select { width:100%; padding:8px; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; }
form button { padding:8px 14px; border:0; border-radius:6px; background:var(--accent); color:#000; cursor:pointer; }
form button[disabled] { opacity:0.5; cursor:not-allowed; }
.foot { text-align:center; color:var(--muted); padding:20px; font-size:12px; border-top:1px solid var(--line); margin-top:40px; }
code { background:#1f2228; padding:1px 6px; border-radius:4px; }