:root { --void: #0b0705; --panel: rgba(38, 24, 16, 0.8); --line: rgba(255, 170, 120, 0.16); --ink: #f5ece4; --muted: #b39d8c; --accent: #ef7d2d; --down: #ff5d6c; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: grid; place-items: center; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(900px 500px at 50% -10%, rgba(184, 71, 15, 0.22), transparent 60%), var(--void); color: var(--ink);
  font: 15px/1.5 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; }
.box { width: min(380px, 100%); padding: 32px 28px; border-radius: 18px; background: var(--panel); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px #000; display: grid; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 42px; height: 42px; }
h1 { margin: 0; font: 700 24px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 0.34em; text-transform: uppercase;
  background: linear-gradient(90deg, #fff3d6, #ffc861 45%, #ff9f4a); -webkit-background-clip: text; background-clip: text; color: transparent; }

p { margin: 0; color: var(--muted); font-size: 13px; }
label { display: grid; gap: 6px; font: 600 11px "Chakra Petch", system-ui, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
input { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--ink); font: 15px "IBM Plex Mono", ui-monospace, monospace; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
button { padding: 12px; border: 0; border-radius: 10px; background: linear-gradient(90deg, #b8470f, var(--accent)); color: #1a0b03; font: 700 13px "Chakra Petch", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.err { color: var(--down); }