:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #0e1117; color: #f1f5fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 50% 0%, #172b49 0%, #0e1117 65%); }
.login-card { width: 100%; max-width: 430px; padding: 38px; background: #171c25; border: 1px solid #2b3545; border-radius: 20px; box-shadow: 0 24px 80px #0005; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #3478f6; font-weight: 800; font-size: 19px; }
.brand { margin: 18px 0 26px; letter-spacing: .13em; font-size: 11px; font-weight: 700; color: #92b8ff; }
h1 { font-size: 27px; letter-spacing: -.035em; margin: 0 0 10px; }
.intro { color: #a6b0c0; font-size: 14px; line-height: 1.6; margin: 0 0 28px; }
label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 8px; }
input { width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid #364154; border-radius: 9px; background: #10141c; color: #f1f5fb; font: inherit; font-size: 16px; }
input:focus, button:focus-visible { outline: 2px solid #81afff; outline-offset: 3px; }
.password-field { position: relative; }
.password-field input { padding-right: 86px; }
#show-password { position: absolute; right: 7px; top: 7px; padding: 9px; border: 0; background: transparent; color: #afcaff; font-size: 12px; cursor: pointer; }
#login-error { min-height: 20px; font-size: 13px; color: #ffaba5; line-height: 1.5; margin: 12px 0; }
#login-submit { width: 100%; padding: 14px; border: 0; border-radius: 9px; background: #3478f6; color: white; font-size: 15px; font-weight: 700; cursor: pointer; }
#login-submit:hover { background: #4488ff; }
#login-submit:disabled { opacity: .65; cursor: wait; }
.footer { margin: 26px 0 0; text-align: center; color: #7f8b9f; font-size: 12px; }
@media (max-width: 480px) { body { padding: 16px; } .login-card { padding: 28px 24px; } }