:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; background: #0b0f1a; color: #e6e8ee; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.card { width: 100%; max-width: 380px; background: #131829; border: 1px solid #25304a; border-radius: 16px; padding: 28px; box-shadow: 0 16px 48px rgba(0,0,0,.4); }
h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.sub { margin: 0 0 22px; opacity: .55; font-size: 13px; }
label { display: block; margin: 14px 0 6px; font-size: 13px; opacity: .8; }
label span { display: block; margin-bottom: 6px; }
input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid #2a3553; background: #0d1322; color: inherit; font: inherit; }
input:focus { outline: none; border-color: #5b8def; box-shadow: 0 0 0 3px rgba(91,141,239,.18); }
button { margin-top: 18px; width: 100%; padding: 11px 14px; border-radius: 10px; border: 0; background: linear-gradient(135deg,#5b8def,#3f6cd2); color: #fff; font: 600 15px/1 system-ui; cursor: pointer; }
button:hover { filter: brightness(1.06); }
.err { margin: 14px 0 0; color: #ff8c8c; font-size: 13px; }