:root{
  --bg:#f6f7fb;
  --ink:#0a0a0a;
  --muted:#6b7280;
  --card:#ffffff;
  --primary:#2674ea;
  --primary-ink:#ffffff;
  --ring:#d9e3ff;
  --border:#e5e7eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  display:grid;
  place-items:center;
}

.wrapper{
  width:min(960px, 92vw);
  margin:8vh auto;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 20px 60px rgba(20,25,40,.08);
  padding:clamp(20px, 5vw, 48px);
}

.logo{ width:240px; display:block; margin:0 auto 8px; height:auto; }

h1{
  font-size: clamp(32px, 5vw, 56px);
  line-height:1.05;
  text-align:center;
  margin:8px 0 12px;
  letter-spacing:-.02em;
}

p.lead{
  text-align:center;
  color:var(--muted);
  font-size:clamp(16px,2.5vw,20px);
  margin:0 0 18px 0;
}

.form{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap:12px;
}

.input, .btn{
  font:inherit;
  padding:16px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  outline:none;
}

.input:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px var(--ring);
}

.btn{
  background:var(--primary);
  color:var(--primary-ink);
  border:none;
  font-weight:700;
  cursor:pointer;
  transition:transform .04s ease;
}
.btn:active{ transform: translateY(1px); }

.sub{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.note{
  margin-top:18px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

.success{ text-align:center; color:#0b7a3b; margin-top:10px; font-weight:600; }
.error{ text-align:center; color:#b20000; margin-top:10px; font-weight:600; }

@media (max-width: 900px){
  .form{ grid-template-columns: 1fr; }
}