:root{
  --brand:#2b6ef2; --brand-600:#1f5ae0; --ink:#0f172a; --muted:#64748b; --ring:rgba(43,110,242,.35);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:#f8fafc;color:var(--ink)}
a{color:inherit;text-decoration:none}

.login-container{
  width:min(440px, 92%);
  margin:48px auto;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:28px 22px;
  box-shadow:0 10px 25px rgba(2,6,23,.05);
}

.logo{
  width:56px;height:56px;border-radius:14px;background:#2b6ef2;
  color:#fff;display:grid;place-items:center;font-weight:900;margin:0 auto 10px;
}

h1{margin:10px 0 6px;font-size:24px}
.subtitle{margin:0 0 14px;color:var(--muted)}

.form-section{display:none}
.form-section.active{display:block}

.form-group{margin-bottom:12px}
.form-group label{display:block;font-weight:700;margin-bottom:6px}
.form-group input{
  width:100%;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;outline:none;font-size:14px;
}
.form-group input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}

.btn-login{
  width:100%;padding:12px 14px;border:none;border-radius:12px;
  background:var(--brand);color:#fff;font-weight:800;cursor:pointer
}
.btn-login:hover{background:var(--brand-600)}

.forgot-link{color:var(--brand);font-weight:700}
.link-strong{color:var(--brand);font-weight:800}
.muted{color:var(--muted)}

.resend-row{
  display:flex;align-items:center;justify-content:center;
  gap:8px;margin-top:10px;
}

.cooldown{opacity:.6;pointer-events:none}