:root{
  --brand:#B0145A; --brand-hover:#8F1049; --brand-deep:#7A0E3E; --brand-tint:#FBE8F0;
  --ink:#0F172A; --text:#334155; --text-muted:#64748B; --border:#E6E1EA; --border-strong:#D8D0DE;
  --surface:#FFFFFF; --surface-2:#F4F1F6;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#fff;color:var(--ink);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{width:100%;max-width:430px;animation:authfade .5s cubic-bezier(.16,1,.3,1)}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:20px}
.brand img{height:60px;width:auto;margin-bottom:12px}
.brand .kicker{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--brand)}
.brand h1{font-family:'Fraunces',serif;font-size:23px;font-weight:700;margin-top:6px;letter-spacing:-.01em}
.brand p{font-size:13.5px;color:var(--text-muted);margin-top:6px;line-height:1.5}
.panel{background:var(--surface); padding:24px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--text);margin-bottom:6px}
.field input{width:100%;padding:11px 14px;border:1.5px solid var(--border-strong);border-radius:11px;font-size:14.5px;color:var(--ink);background:#fff;outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.field .hint{font-size:11.5px;color:var(--text-muted);margin-top:6px;line-height:1.45}
.btn{width:100%;padding:13px;border:none;border-radius:12px;background:var(--brand);color:#fff;font:700 14.5px 'Inter';cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,transform .05s;margin-top:4px}
.btn:hover{background:var(--brand-hover)}
.btn:active{transform:scale(.99)}
.btn:disabled{background:var(--border-strong);cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--brand);border:1.5px solid var(--border-strong)}
.btn-ghost:hover{background:var(--brand-tint);border-color:var(--brand)}
.linkrow{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.textlink{background:none;border:none;color:var(--brand);font:600 13px 'Inter';cursor:pointer;text-decoration:none;padding:0}
.textlink:hover{text-decoration:underline}
.switch{text-align:center;font-size:13px;color:var(--text-muted);margin-top:14px}
.switch a,.switch button{background:none;border:none;color:var(--brand);font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none}
.switch a:hover,.switch button:hover{text-decoration:underline}
.otp-input{letter-spacing:.5em;text-align:center;font-weight:700;font-size:18px}
.code-note{font-size:13px;color:var(--text);background:var(--surface-2);border-radius:10px;padding:10px 12px;margin-bottom:14px;line-height:1.5}
.code-note b{color:var(--ink)}
.dev-otp{display:none;font-size:12px;color:var(--brand-deep);background:var(--brand-tint);border-radius:8px;padding:8px 10px;margin-top:8px;font-weight:600}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 12px 30px rgba(0,0,0,.22);transition:transform .3s cubic-bezier(.16,1,.3,1);z-index:100;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast i{color:var(--brand)}
.toast.ok i{color:#7CF5B0}
@keyframes authfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:420px){.panel{padding:18px}.brand img{height:52px}}

/* Password show/hide eye */
.pw-wrap{position:relative;display:block}
.field input.has-eye{padding-right:44px}
.pw-eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;line-height:0}
.pw-eye:hover{color:var(--brand);background:var(--surface-2)}
.pw-eye i{font-size:18px}

/* Cloudflare Turnstile slot */
.cf-turnstile-slot{display:flex;justify-content:center;margin:4px 0 12px;min-height:0}

/* Forgot-password / confirmation popup */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:200}
.modal-overlay.show{display:flex;animation:authfade .2s}
.modal-box{background:#fff;border-radius:16px;max-width:380px;width:100%;padding:26px 24px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.25);animation:authfade .25s cubic-bezier(.16,1,.3,1)}
.modal-box .modal-ic{width:54px;height:54px;border-radius:50%;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px}
.modal-box h3{font-family:'Fraunces',serif;font-size:19px;margin-bottom:8px}
.modal-box p{font-size:13.5px;color:var(--text-muted);line-height:1.55;margin-bottom:18px}
.modal-box .field{margin-bottom:14px}