:root { color-scheme: dark; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f4f4f4; background: #181818; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
main { width: min(100%, 420px); padding: 32px; border: 1px solid #383838; border-radius: 18px; background: #212121; }
h1 { font-size: 26px; line-height: 1.2; margin: 0 0 16px; }
p { color: #bcbcbc; }
form, label { display: grid; gap: 12px; }
form { gap: 20px; margin: 24px 0 0; }
input, button { width: 100%; min-height: 46px; border-radius: 8px; padding: 10px 14px; font: inherit; color: #fff; }
input { background: #292929; border: 1px solid #454545; }
input:focus { outline: none; border-color: #777; }
button { background: #404040; border: 1px solid #505050; font-weight: 650; cursor: pointer; }
button:hover { background: #4b4b4b; }
button:disabled { opacity: .6; cursor: wait; }
a { display: block; color: #d0d0d0; margin-top: 14px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid #888; outline-offset: 3px; }
[hidden] { display: none !important; }
#status { overflow-wrap: anywhere; }
#status[data-error="true"] { color: #ff8999; }
@media (max-width: 420px) { body { padding: 16px; } main { padding: 24px; } }