.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(100%, 420px); padding: 40px 34px 34px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--primary); box-shadow: var(--shadow); }
.login-logo { width: 150px; max-width: 100%; margin: 0 auto 30px; }
.login-panel h1 { margin: 0; color: var(--text); font-size: 28px; letter-spacing: -.25px; text-align: center; }
.login-intro { margin: 9px 0 30px; color: var(--text-muted); font-size: 16px; text-align: center; }
.login-form { display: grid; gap: 20px; }
.button-full { width: 100%; margin-top: 4px; }

html[data-theme="dark"] .login-panel { background: #171717; border-color: #2a2a2a; border-top-color: #002060; box-shadow: 0 16px 36px rgb(0 0 0 / 32%); }
html[data-theme="dark"] .login-form input { background: #111111; border-color: #4a4a4a; }
html[data-theme="dark"] .login-form input:focus { border-color: #7da8ff; box-shadow: 0 0 0 2px rgb(125 168 255 / 20%); }

@media (prefers-color-scheme: dark) {
    html:not([data-theme-preference]) .login-panel { background: #171717; border-color: #2a2a2a; border-top-color: #002060; box-shadow: 0 16px 36px rgb(0 0 0 / 32%); }
    html:not([data-theme-preference]) .login-form input { background: #111111; border-color: #4a4a4a; }
    html:not([data-theme-preference]) .login-form input:focus { border-color: #7da8ff; box-shadow: 0 0 0 2px rgb(125 168 255 / 20%); }
}