/* Staff sign-in follows the three-step concept shown in the approved mockup. */
#loginScreen.login-screen { color:#17212e; padding:48px 20px; }
#loginScreen .login-card { width:min(390px,100%); min-height:420px; border:1px solid #d9e0e8; border-radius:18px; background:#fff; padding:30px 32px 34px; box-shadow:0 24px 60px #0000004d; }
#loginScreen .login-brand { padding-bottom:22px; margin-bottom:24px; border-bottom:4px solid #ec6b2d; }
#loginScreen .brand-name { color:#17212e; }
#loginScreen .brand-label { color:#7c8998; }
#loginScreen section::before { display:block; margin-bottom:22px; color:#344358; font-size:12px; font-weight:800; letter-spacing:.02em; }
#loginPanel::before { content:'1  Password'; }
#mfaPanel::before { content:'2  Authenticator code'; }
#successPanel::before { content:'3  Access granted'; }
#resetPanel::before { content:'Password recovery'; }
#setupPanel::before { content:'Create Super Admin'; }
#loginScreen .login-card h1 { margin:0 0 8px; font:800 27px Manrope,Arial,sans-serif; letter-spacing:-.035em; color:#17212e; }
#loginScreen .login-card p { color:#647286; font-size:13px; line-height:1.55; margin:0 0 26px; }
#loginScreen .form { gap:17px; }
#loginScreen .form label { color:#344358; font-size:12px; font-weight:750; gap:8px; }
#loginScreen .form input { min-height:48px; border:1px solid #bfcad5; border-radius:9px; color:#17212e; background:#fff; font-size:14px; padding:10px 14px; }
#loginScreen .form input:focus { border-color:#ec6b2d; box-shadow:0 0 0 3px #ec6b2d25; }
#loginScreen .form .primary { width:100%; min-height:50px; margin-top:10px; border:0; border-radius:9px; background:#17212e; color:#fff; font-size:14px; box-shadow:none; }
#loginScreen .form .primary:hover { background:#29384b; }
#loginScreen .text-button { display:block; margin:17px 0 0; padding:0; color:#647286; text-decoration:none; font-size:12px; }
#loginScreen .text-button:hover { color:#17212e; text-decoration:underline; }
#loginScreen .login-card a { color:#647286; font-size:12px; }
#staffMfaQr { width:180px; height:180px; margin:16px auto 22px; }
#staffMfaQr img { width:100%; height:100%; object-fit:contain; }
#mfaPanel .form input[name="code"] { text-align:center; letter-spacing:.3em; font-size:22px; font-weight:700; }
#successPanel { text-align:center; padding-top:24px; }
#successPanel .success-mark { display:grid; place-items:center; width:74px; height:74px; margin:0 auto 26px; border-radius:50%; background:#e2f6e9; color:#21834a; font-size:42px; font-weight:700; }
#successPanel .primary { width:100%; min-height:50px; border:0; background:#ec6b2d; font-size:14px; }
@media(max-width:520px){#loginScreen.login-screen{padding:18px 12px}#loginScreen .login-card{min-height:0;padding:24px}}
/* Settings → Staff accounts */
.staff-head-actions { display:flex; align-items:center; gap:14px; }
.staff-head-actions .primary { padding:9px 14px; }
.staff-actions { white-space:nowrap; text-align:right; }
.staff-actions .secondary + .secondary { margin-left:6px; }
.staff-actions .secondary:disabled { opacity:.45; cursor:not-allowed; }
.staff-password { position:relative; display:block; }
.staff-password input { width:100%; padding-right:44px; }
.staff-eye { position:absolute; top:50%; right:6px; transform:translateY(-50%); display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:6px; background:transparent; color:#647286; }
.staff-eye:hover, .staff-eye[aria-pressed="true"] { color:#ec6b2d; background:#ec6b2d14; }
.staff-form-error { color:#b42318; font-size:12px; margin:0; min-height:1em; }