:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #0b0c0f; color: #d7dbe0; font: 13px/1.5 "IBM Plex Sans", system-ui, -apple-system, sans-serif; display: grid; place-items: center; }
main { width: min(340px, 90vw); }
form, .box { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px; background: #0f1115; border: 1px solid #1e2229; border-radius: 6px; }
.box p { margin: 0; }
.box pre { margin: 0; padding: 8px 10px; background: #050607; border: 1px solid #2a2f38; border-radius: 4px; font: 13px ui-monospace, Menlo, monospace; color: #80deea; }
.dim { color: #6b727c; font-size: 12px; }
.brand { font-weight: 600; letter-spacing: 0.16em; font-size: 11px; color: #9aa1ab; margin-bottom: 6px; }
label { display: flex; flex-direction: column; gap: 6px; color: #9aa1ab; font-size: 12px; }
input { height: 34px; padding: 0 10px; background: #0b0c0f; border: 1px solid #2a2f38; border-radius: 4px; color: #d7dbe0; font: 14px ui-monospace, Menlo, monospace; }
input:focus { outline: none; border-color: #80deea; }
button { height: 34px; margin-top: 4px; border: 0; border-radius: 4px; background: #80deea; color: #061114; font-weight: 600; cursor: pointer; }
button:hover { background: #a5e8f0; }
.err { margin: 0; color: #ef5350; font-size: 12px; }