.login-gate{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 15% 10%,rgba(39,170,215,.18),transparent 34%),linear-gradient(145deg,#082542,#104d83 58%,#167a8e);display:grid;place-items:center;padding:24px}
.login-gate[hidden]{display:none}
.login-card{width:min(440px,100%);background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.65);border-radius:20px;padding:34px;box-shadow:0 28px 80px rgba(3,20,36,.32)}
.login-brand{width:150px;height:58px;overflow:hidden;position:relative;margin-bottom:24px;border-radius:10px;background:#fff}
.login-brand img{position:absolute;width:185px;height:185px;max-width:none;left:-18px;top:-63px}
.login-card h1{font-size:26px;margin:4px 0 10px;color:var(--ink)}
.login-card>p:not(.eyebrow){margin:0 0 24px;color:var(--text);line-height:1.7}
.login-card label{display:flex;flex-direction:column;gap:8px;color:var(--text);font-size:13px;font-weight:650}
.login-card input{height:46px;border:1px solid var(--line);border-radius:10px;padding:0 13px;outline:none;background:#fff}
.login-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(39,170,215,.14)}
.login-card .button{width:100%;height:46px;margin-top:16px}
.login-status{min-height:20px;margin-top:14px;text-align:center;color:var(--muted);font-size:12px}
.login-status.error{color:var(--danger)}
.logout-button{height:36px;padding:0 12px;font-size:12px}
.password-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:16px}
.password-actions .button{margin-top:0}
.password-actions .button[hidden]{display:none}
.password-actions .button[hidden]+.button{grid-column:1/-1}
@media(max-width:640px){.login-card{padding:26px 22px}.login-card h1{font-size:22px}}