:root { color-scheme: dark; --bg: #0b0806; --panel: #1a110b; --line: #4a2e1a; --text: #f2e2c8; --muted: #9a8a78; --gold: #f8c810; --bad: #ff5a4a; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, "Segoe UI", sans-serif; padding: 16px; }
.card { width: min(26rem, 100%); background: var(--panel); border: 1px solid var(--line); padding: 1.4rem 1.6rem; }
h1 { margin: 0; color: var(--gold); font-size: 1.6rem; }
.sub { margin: .1rem 0 1rem; color: var(--muted); }
label { display: block; margin: .7rem 0; font-size: .92rem; color: var(--muted); }
input { display: block; width: 100%; margin-top: .25rem; padding: .55rem .6rem; background: #0e0905; color: var(--text); border: 1px solid var(--line); font: inherit; }
input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
button, .button { display: inline-block; margin-top: .6rem; padding: .55rem 1.2rem; background: var(--gold); color: #140a03; border: 0; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button:disabled { opacity: .6; cursor: default; }
.msg { min-height: 1.4em; color: var(--bad); margin: .6rem 0 0; }
.hint { color: var(--muted); font-size: .88rem; }
img { display: block; image-rendering: pixelated; background: #fff; padding: 8px; margin: .4rem 0; }
pre { background: #0e0905; border: 1px solid var(--line); padding: .6rem; }
code { word-break: break-all; }