:root{
  --bg:#eef3ff;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#dbe3f2;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --shadow:0 18px 45px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#eef3ff 0%,#eaf1ff 100%);
}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth-card{
  width:100%;max-width:760px;background:#fff;border-radius:36px;box-shadow:var(--shadow);
  padding:42px 56px 36px;
}
.brand{display:flex;justify-content:center;margin-bottom:18px}
.brand img{max-width:360px;width:100%;height:auto}
.auth-title{margin:0 0 8px;text-align:center;font-size:34px;line-height:1.15;font-weight:800}
.auth-subtitle{margin:0 auto 28px;max-width:560px;text-align:center;color:var(--muted);font-size:16px;line-height:1.7}
.illustration{
  width:150px;height:150px;border-radius:50%;margin:0 auto 28px;
  background:radial-gradient(circle at 50% 45%, #cfe0ff 0%, #dbe8ff 34%, #edf3ff 70%, transparent 71%);
  position:relative;
}
.illustration::before{
  content:"✉";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:74px;color:var(--primary);
}
.reset-illustration::before{content:"🔒";font-size:68px}
.form-block{border:1px solid var(--line);border-radius:22px;padding:26px}
.label{display:block;font-size:15px;font-weight:700;margin-bottom:10px}
.input{
  width:100%;height:56px;border:1px solid #d6dfef;border-radius:14px;padding:0 16px;
  font-size:16px;outline:none;background:#fff;
}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.input-row{display:grid;grid-template-columns:1fr;gap:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;width:100%;border:none;border-radius:14px;
  min-height:56px;margin-top:18px;font-size:18px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--primary),#3b82f6);cursor:pointer;text-decoration:none;
}
.btn:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary))}
.note{margin-top:18px;padding:16px 18px;border-radius:14px;background:#edf4ff;color:#334155;font-size:14px}
.inline-link{display:block;margin-top:20px;text-align:center;color:var(--primary);font-weight:600;text-decoration:none}
.alert{border-radius:14px;padding:14px 16px;margin-bottom:18px;font-size:14px}
.alert-success{background:#eaf8ef;color:#166534;border:1px solid #bbf7d0}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.steps{display:flex;align-items:center;justify-content:center;gap:16px;margin:6px 0 24px}
.step{display:flex;align-items:center;gap:8px;color:#94a3b8;font-size:14px;font-weight:700}
.step-dot{
  width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:#e5e7eb;color:#64748b;font-weight:800;
}
.step.active{color:#0f172a}
.step.active .step-dot{background:var(--primary);color:#fff}
.step-line{width:48px;height:2px;background:#dbe3f2}
.footer-copy{text-align:center;color:#94a3b8;font-size:14px;margin-top:28px}
@media (max-width: 768px){
  .auth-card{padding:28px 18px 24px;border-radius:24px}
  .brand img{max-width:280px}
  .auth-title{font-size:28px}
}