:root { --bg:#0f0f12; --card:#17171c; --text:#e9eaee; --muted:#9aa0a6; --pri:#3b82f6; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system; }
.container { max-width: 900px; margin: 24px auto; padding: 0 16px; }
header h1 { margin:0 0 12px; font-size: 22px; }
nav button { margin-right:8px; background:var(--card); color:var(--text); border:1px solid #2a2a31; padding:8px 12px; border-radius:10px; cursor:pointer; }
.card { background:var(--card); border:1px solid #2a2a31; padding:16px; border-radius:14px; box-shadow: 0 8px 20px rgb(0 0 0 / 25%); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }
label { display:block; margin:10px 0; }
input { width:100%; padding:10px; border-radius:10px; border:1px solid #2a2a31; background:#111116; color:var(--text); }
button { background:var(--pri); color:white; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; }
.row { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.muted { color:var(--muted); }
.mono { background:#0b0b0f; border:1px solid #22222a; border-radius:10px; padding:12px; overflow:auto; }
.small { font-size: 12px; }
pre { margin:0; }