/* Sign-in (login.html) and the two-step / passkey cards in account settings. Brand blue #2459c4. */
.auth-hero{gap:0}
.auth-dot{color:#ff775f}
.auth-features{display:grid;gap:12px;margin-top:auto;padding-top:34px;position:relative;z-index:2}
.auth-feature{display:flex;align-items:flex-start;gap:12px;background:#ffffff0d;border:1px solid #cadfed26;border-radius:14px;padding:14px 16px}
.auth-feature b{display:block;font-size:13px;font-weight:650;color:#fff}
.auth-feature span:not(.auth-feature-icon){display:block;font-size:12px;color:#bacde1;line-height:1.6}
.auth-feature-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:#2459c4;color:#fff}
.auth-hero-foot{margin:22px 0 0;font-size:11px;color:#a9c5e3;display:flex;gap:8px;flex-wrap:wrap}
.login-intro .auth-hero-foot{max-width:none}

.auth-field{display:flex;flex-direction:column;margin:15px 0}
.auth-field>label{font-size:12px;font-weight:600;color:#4c6182;margin:0 0 6px}
.password-wrap{position:relative}
.login-card .password-wrap input{width:100%;padding-left:48px}
.login-card button.password-toggle{position:absolute;left:5px;top:50%;transform:translateY(-50%);width:38px;min-height:38px;height:38px;margin:0;padding:0;display:grid;place-items:center;background:transparent;color:#53627a;box-shadow:none;border-radius:8px}
.login-card button.password-toggle:hover:not(:disabled){background:#eef3fb;color:#2459c4}
.password-toggle:not(.revealed) #password-toggle-slash{display:none}
.login-card .forgot-link{margin:0 0 4px}

.login-card button.auth-secondary,#passkey-bottom .auth-passkey-button{background:#fff;color:#2459c4;border:1px solid #cfdcf3;box-shadow:none;justify-content:center;gap:8px}
.login-card button.auth-secondary:hover:not(:disabled),#passkey-bottom .auth-passkey-button:hover:not(:disabled){background:#eef3fb}
.login-card button.auth-passkey-button{justify-content:center;gap:10px}
#passkey-top .auth-passkey-button{margin-top:6px}
.auth-or{display:flex;align-items:center;gap:12px;margin:20px 0 0;color:#7a8ca5;font-size:12px}
.auth-or:before,.auth-or:after{content:'';flex:1;border-top:1px solid #e3e9f2}
#passkey-top .auth-or{margin:18px 0 4px}
.login-card button.auth-link{background:none;color:#204ea5;box-shadow:none;padding:6px 0;min-height:32px;width:auto;margin:14px 0 0;text-decoration:underline;text-underline-offset:4px;font-weight:600;justify-content:flex-start}
.login-card button.auth-link:hover:not(:disabled){background:none;color:#173f8a}
.auth-row{display:flex;flex-wrap:wrap;gap:8px}
.login-card .auth-row button{width:auto;flex:1 1 140px;margin:12px 0 0}
.auth-others{margin-top:18px;font-size:12px;color:#53627a}
.auth-others .auth-row button{margin-top:8px}
.auth-check{display:flex!important;align-items:center;gap:10px;font-weight:500!important;cursor:pointer}
.login-card .auth-check input{width:20px;height:20px;min-width:20px;padding:0;margin:0;accent-color:#2459c4}
#mfa-error:empty,#mfa-notice:empty{display:none}
#mfa-error{font-size:13px;color:#a64349;padding:10px 12px;background:#fdf3f4;border-radius:8px;font-weight:500}
#mfa-notice{margin:0 0 8px}
#mfa-prompt{font-size:14px;line-height:1.8;color:#53627a;margin:0 0 12px}
#mfa-title:focus,#force-title:focus{outline:none}

/* the code in six boxes: one real field (SMS autofill, paste, screen readers) lies transparent over them */
.code-boxes{position:relative;display:flex;gap:8px;direction:ltr;justify-content:center;width:100%;max-width:360px;margin-inline:auto}
.code-boxes .code-box{flex:1 1 0;min-width:0;aspect-ratio:1/1.15;max-height:60px;display:flex;align-items:center;justify-content:center;border:1.5px solid #c9d6e8;border-radius:12px;background:#fff;color:#1c2c49;font:700 24px/1 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-variant-numeric:tabular-nums;transition:border-color .12s,box-shadow .12s}
.code-boxes .code-box.filled{border-color:#2459c4}
.code-boxes:focus-within .code-box.active{border-color:#2459c4;box-shadow:0 0 0 3px #2459c430}
.code-boxes:focus-within .code-box.active:empty:after{content:'';width:2px;height:24px;background:currentColor;animation:code-caret 1s steps(1) infinite}
.code-boxes.invalid .code-box{border-color:#c4323a;background:#fff5f4}
.login-card .code-boxes input.code-boxes-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:transparent;caret-color:transparent;opacity:.011;font-size:24px;letter-spacing:1.6em;text-align:left;outline:none;box-shadow:none;cursor:text}
@keyframes code-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.code-boxes:focus-within .code-box.active:empty:after{animation:none}}

/* two-step and passkey cards (settings, and the required-setup screen) */
.tfa,.tfa-stack{display:flex;flex-direction:column;gap:10px}
.tfa-method{border-top:1px solid #e3e8f1;padding:14px 0 4px;display:flex;flex-direction:column;gap:8px}
.tfa-method-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.tfa-method-head h3{font-size:15px;margin:0}
.tfa-chip{font-size:12px;border-radius:999px;padding:3px 10px;background:#eef1f6;color:#4c5d78}
.tfa-chip.on{background:#e6f4ee;color:#1d6b4b}
.tfa-seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.tfa-seg button.on{background:#2459c4;color:#fff;border-color:#2459c4}
.tfa-error{color:#a64349;font-weight:500}.tfa-note{color:#286c55}
.tfa-error:empty,.tfa-note:empty{display:none}
.tfa-warning{background:#fff8e6;border:1px solid #f1d58a;border-radius:10px;padding:10px 14px;color:#5c4400}
.tfa-warning ul{margin:0;padding-inline-start:20px}
.tfa-codes{direction:ltr;text-align:left;font:600 15px/1.9 ui-monospace,Consolas,monospace;background:#f5f7fb;border:1px solid #e3e8f1;border-radius:10px;padding:12px 16px;columns:2;margin:0}
.tfa-qr{display:block;background:#fff;border:1px solid #e3e8f1;border-radius:10px;padding:6px;margin:8px 0;max-width:100%;height:auto}
.tfa-secret{font-size:15px;letter-spacing:1px;user-select:all;word-break:break-all}
.tfa-steps{display:flex;flex-direction:column;gap:10px;padding-inline-start:20px;margin:0}
.tfa button.tfa-danger{color:#a3343a;background:#fff;border:1px solid #efc6c8;width:auto}
.tfa button.tfa-danger:hover:not(:disabled){background:#fdf1f1}
.tfa button.tfa-danger-solid{background:#b63f44;color:#fff;width:auto}
.tfa .inline-actions button{width:auto}
.login-card .tfa button{width:auto;display:inline-flex;justify-content:center;margin:0;min-height:44px}
.login-card .tfa button.secondary:not(.tfa-danger){background:#fff;color:#2459c4;border:1px solid #cfdcf3;box-shadow:none}
.login-card .tfa button.secondary.on{background:#2459c4;color:#fff}
.login-card .tfa label{display:flex;flex-direction:column;gap:6px;margin:4px 0}
.login-card .tfa .inline-actions{display:flex;flex-wrap:wrap;gap:8px}
#force-2fa>p{font-size:14px;line-height:1.8;color:#53627a}
#force-logout{margin-top:18px}

@media(max-width:800px){.auth-features,.auth-hero-foot{display:none}.login-card .auth-row button{flex-basis:100%}}
@media(max-width:400px){.code-boxes{gap:6px}.code-boxes .code-box{font-size:21px;border-radius:10px}}