.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; }
.login-card { width: min(100%, 400px); padding: 36px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--paper-shadow); }
.login-brand { display: flex; align-items: center; gap: 8px; color: var(--txt); font-size: 17px; font-weight: 650; text-decoration: none; margin-bottom: 30px; }
.login-brand i { font-size: 23px; }
.login-card h1 { font-size: 24px; line-height: 1.4; margin: 0 0 6px; letter-spacing: -.5px; }
.login-card label { display: block; margin: 16px 0 7px; font-weight: 550; }
.login-card input { width: 100%; min-width: 0; height: 42px; padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: var(--txt); }
.login-card input:focus-visible, .login-card button:focus-visible, .login-card a:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.login-primary { width: 100%; display: flex; justify-content: center; align-items: center; min-height: 42px; background: #171717; border: 1px solid #171717; color: #fff; border-radius: 8px; margin-top: 24px; text-decoration: none; }
.login-primary:hover { background: #333; color: #fff; }
#loginStatus { font-size: 12px; color: var(--dim); margin-top: 18px; overflow-wrap: anywhere; }
#loginStatus[data-error="true"] { color: var(--bad); }
.login-card footer { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; color: var(--dim); font-size: 11px; line-height: 1.9; }
.login-card footer a { color: inherit; }
#accountLogout { margin-top: 12px; width: 100%; }
.device-code { display: block; font-size: 28px; letter-spacing: 3px; margin: 18px 0; }
.login-secondary { width: 100%; margin-top: 12px; }
#cloudPending a { display: block; color: var(--txt); margin-top: 12px; }
[hidden] { display: none !important; }
@media (max-width: 420px) { .login-card { padding: 28px 24px; } }