:root { color-scheme: dark; font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif; color: #e5e5e7; background: #131519; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
main { width: 100%; max-width: 320px; }
h1 { margin: 0 0 32px; font-size: 21px; font-weight: 600; }
h1 span { font-weight: 400; color: #a2a4aa; }
form { display: grid; gap: 12px; }
label { font-size: 13px; }
input, button { width: 100%; min-height: 44px; border: 1px solid #303640; border-radius: 10px; padding: 10px 12px; font: inherit; }
input { color: inherit; background: #1c1f25; }
button { margin-top: 4px; background: #a4c5ff; color: #131519; border-color: transparent; cursor: pointer; transition: opacity 120ms ease; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid #a4c5ff; outline-offset: 2px; }
#login-error { margin: 0; font-size: 13px; color: #ef9a9a; }
[hidden] { display: none !important; }
@media (prefers-color-scheme: light) {
 :root { color-scheme: light; color: #24262b; background: #f5f5f5; }
 input { background: #fff; border-color: #d8d9dd; }
 button { background: #345e9e; color: #fff; }
 #login-error { color: #a52e38; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }