:root{
  --bg:#FAF7F2;--card:#fff;--border:#E8E4DB;--border-strong:#D3D1C7;
  --text:#2C2A26;--muted:#5F5E5A;--subtle:#6F6E68;
  --teal:#0C6B63;--teal-dark:#094F49;
  --ok:#3B6D11;--ok-bg:#EEF6E8;
  --danger:#A32D2D;--danger-bg:#FBECEC;--danger-border:#F0CCCC;
  --warn:#854F0B;--warn-bg:#FBEEDB;
  --r-sm:6px;--r-md:8px;--r-lg:12px;
}
/* Dark mode: logo-mark adjustment */
@media (prefers-color-scheme: dark){
  .login-logo-mark{background:rgba(63,160,149,0.15);border-color:rgba(63,160,149,0.30)}
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1F1D1A;--card:#2A2825;--border:#3A3733;--border-strong:#4A4742;
    --text:#EFEDE8;--muted:#B8B5AE;--subtle:#9A968F;
    --teal:#3FA095;--teal-dark:#5BB8AD;
    --ok:#7BC97B;--ok-bg:#1F3A1F;
    --danger:#E89090;--danger-bg:#3A1818;--danger-border:#5A2828;
  }
  body{background:#161412}
  .input,.toggle-pwd{background:var(--card)}
}

*{box-sizing:border-box}

/*
  Z-index stack:
   200  .skip-link
    50  .toast
    20  .demo-bar (preview-only)
*/

html,body{margin:0;padding:0}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);background:var(--bg);line-height:1.45;min-height:100vh;display:flex;flex-direction:column}
svg.ic{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{position:absolute;top:-40px;left:8px;background:#fff;color:var(--teal);padding:8px 14px;border-radius:var(--r-md);font-size:13px;font-weight:600;z-index:200;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,0.15);border:1.5px solid var(--teal);transition:top 0.15s ease}
.skip-link:focus{top:8px;outline:none}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* Demo-bar (preview only) */
.demo-bar{position:fixed;top:0;left:0;right:0;background:var(--text);color:#fff;padding:8px 16px;font-size:12px;z-index:20;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.demo-bar-label{color:rgba(255,255,255,0.7);font-weight:500}
.demo-btn{background:rgba(255,255,255,0.1);border:0.5px solid rgba(255,255,255,0.2);color:#fff;padding:4px 10px;border-radius:var(--r-sm);font-size:11px;font-weight:500;cursor:pointer;font-family:inherit}
.demo-btn:hover{background:rgba(255,255,255,0.18)}
.demo-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.demo-btn.active{background:var(--teal);border-color:var(--teal)}

/* Login wrapper */
.login-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:80px 20px 60px;padding-left:max(20px, env(safe-area-inset-left));padding-right:max(20px, env(safe-area-inset-right))}

/* Login card */
.login-card{background:var(--card);border:0.5px solid var(--border);border-radius:var(--r-lg);width:100%;max-width:400px;overflow:hidden;box-shadow:0 4px 16px rgba(44,42,38,0.04)}
.login-brand-strip{background:var(--teal);height:4px}
@media (prefers-color-scheme: dark){.login-brand-strip{height:3px;opacity:0.85}}

.login-body{padding:32px 32px 28px}

.login-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.login-logo-mark{width:32px;height:32px;border-radius:var(--r-sm);background:rgba(12,107,99,0.10);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:0.5px solid rgba(12,107,99,0.20)}
.login-logo-text{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.01em}

.login-title{font-size:20px;font-weight:600;color:var(--text);margin:18px 0 4px;letter-spacing:-0.01em;outline:none}
.login-subtitle{font-size:13px;color:var(--muted);margin:0 0 24px;line-height:1.5}

/* Form */
.field{margin-bottom:14px}
.label{font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px;display:block}
.input-wrap{position:relative}
.input{width:100%;background:var(--card);border:0.5px solid var(--border-strong);border-radius:var(--r-md);padding:10px 12px;font-size:14px;color:var(--text);font-family:inherit;-webkit-appearance:none}
.input:focus{outline:2px solid rgba(12,107,99,0.2);border-color:var(--teal)}
.input.with-trailing{padding-right:42px}
.input.has-error{border-color:var(--danger);outline-color:rgba(163,45,45,0.2)}

.toggle-pwd{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;background:transparent;border:none;color:var(--subtle);cursor:pointer;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-family:inherit}
.toggle-pwd:hover{color:var(--text)}
.toggle-pwd:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.field-error{font-size:12px;color:var(--danger);margin-top:4px;line-height:1.4;display:flex;align-items:center;gap:5px}

/* Remember + forgot row */
.options-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.remember{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text);user-select:none}
.remember input{margin:0;accent-color:var(--teal);width:16px;height:16px;cursor:pointer}
.remember:focus-within{outline:none}
.remember input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.forgot{font-size:13px;color:var(--teal);text-decoration:none;font-weight:500}
.forgot:hover{color:var(--teal-dark);text-decoration:underline}
.forgot:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}

/* Submit */
.submit{width:100%;background:var(--teal);border:none;color:#fff;padding:0;height:44px;border-radius:var(--r-md);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background 0.15s ease}
.submit:hover{background:var(--teal-dark)}
.submit:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.submit:disabled{background:var(--border-strong);color:var(--subtle);cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.submit{transition:none}}

/* Caps Lock warning on password field */
.caps-warn{display:none;align-items:center;gap:5px;font-size:12px;color:var(--warn);margin-top:4px;line-height:1.4}
.caps-warn.show{display:flex}

/* Form-level error banner (above form) */
.form-error{background:var(--danger-bg);border:0.5px solid var(--danger-border);border-radius:var(--r-md);padding:10px 12px;font-size:13px;color:var(--danger);margin-bottom:16px;display:flex;align-items:flex-start;gap:8px;line-height:1.4}
/* .form-error[hidden] — redundant, globale [hidden] in nav.css dekt dit (#85) */
.form-error svg{flex-shrink:0;margin-top:1px}

/* Form-level success callout (after successful password reset). Vervangt
   formulier op /wachtwoord-reset. */
.form-success{background:#E6F4F1;border:1px solid #B8DDD7;border-radius:8px;padding:14px 16px;margin-bottom:16px}
.form-success-title{display:flex;align-items:center;gap:6px;color:#0C6B63}
.form-success-desc{margin:6px 0 0;font-size:13px;color:#2C2A26;line-height:1.5}

/* Footer outside card */
.login-footer{text-align:center;font-size:12px;color:var(--subtle);margin-top:20px;line-height:1.5}
.login-footer a{color:var(--subtle);text-decoration:underline}
.login-footer a:hover{color:var(--text)}
.login-footer a:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}

/* Spinner */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.spinner{animation:spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* Toast */
.toast{position:fixed;bottom:max(20px, env(safe-area-inset-bottom));right:24px;background:var(--text);color:#fff;padding:12px 16px;border-radius:var(--r-md);font-size:13px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,0.15);z-index:50;transform:translateY(20px);opacity:0;transition:transform 0.25s ease,opacity 0.2s ease;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.toast-icon{color:#7BC97B}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

@media (max-width:480px){
  .login-wrap{padding:60px 16px 40px}
  .login-body{padding:24px 22px 22px}
  .login-title{font-size:18px}
  .demo-bar{font-size:11px;padding:6px 10px}
  .demo-btn{padding:3px 8px;font-size:10px}
  .toast{right:14px;left:14px}
}