:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: #29262b; color: #fff; }
.login-card { width: min(100% - 32px, 400px); padding: 28px; border-radius: 18px; background: #39343c; display: grid; gap: 14px; }
.brand { color: #fff; font-weight: 750; font-size: 24px; text-decoration: none; }
h1, h2, p { margin: 0; }
p { color: #ddd; }
form { display: grid; gap: 12px; }
[hidden] { display: none !important; }
label { display: grid; gap: 6px; }
input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #aaa; font: inherit; }
button { padding: 12px; border: 0; border-radius: 8px; font: inherit; cursor: pointer; background: #d9ff7b; color: #1b1b1b; }
.text-button { background: none; color: #fff; text-align: left; padding: 0; }
a { color: #d9ff7b; }
#message { min-height: 1.5em; }