/* Login, change-password and error pages (sec 18.9): a centred card on the same dark tokens. */

.login-page{min-block-size:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;background:radial-gradient(900px 600px at 50% 40%,rgba(59,130,246,.10),transparent 70%),var(--bg)}
.login-lang{position:fixed;inset-block-start:14px;inset-inline-end:14px}
.login-card{inline-size:min(400px,100%);background:var(--panel);border:1px solid var(--edge2);border-radius:var(--r-dept);
  padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.login-brand{margin-block-end:16px}
.login-wordmark{font-size:20px;font-weight:700;letter-spacing:.3px}
.login-subtitle{color:var(--t2);font-size:12px}
.login-title{font-size:18px;font-weight:700;margin-block-end:12px}
.login-intro{color:var(--t2);font-size:13px;margin-block-end:12px}
.login-message{font-size:13px;border-radius:var(--r-btn);padding-block:8px;padding-inline:10px;margin-block-end:12px;border:1px solid}
.login-message-bad{background:var(--bad-bg);border-color:rgba(239,68,68,.45);color:#fca5a5}
.login-message-ok{background:var(--ok-bg);border-color:rgba(34,197,94,.45);color:#86efac}
.login-message-info{background:var(--info-bg);border-color:rgba(59,130,246,.45);color:#bfdbfe}
.login-delay{font-size:12px;color:#fcd34d;margin-block-end:12px}
.login-form .btn-block{margin-block-start:6px}
.login-back{display:block;text-align:center;margin-block-start:12px;font-size:13px;color:var(--t2)}
.login-back:hover{color:var(--text)}

.error-card{text-align:center}
.error-icon{display:flex;justify-content:center;margin-block-end:10px;color:var(--warn)}
.error-icon .icon{inline-size:32px;block-size:32px}
.error-card .login-title{margin-block-end:18px}