* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: grid; place-items: center; padding: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1d2330;
  background: radial-gradient(circle at 20% 10%, #ffe3d6 0, transparent 45%), radial-gradient(circle at 90% 90%, #dff3e8 0, transparent 40%), #f4f5f8;
}
.card {
  width: min(380px, 100%); background: #fff; border-radius: 18px; padding: 32px 28px 28px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px -18px rgba(29,35,48,.35);
}
.brand { font-weight: 800; font-size: 28px; letter-spacing: -.5px; text-align: center; }
.brand span { color: #ff5a1f; }
.sub { margin: 4px 0 24px; text-align: center; color: #6b7385; font-size: 14px; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #4a5263; }
input {
  padding: 12px 14px; border-radius: 12px; border: 1px solid #e7e9ef; background: #f8f9fb;
  font-size: 16px; outline: none; color: #1d2330;
}
input:focus { border-color: #ff5a1f; background: #fff; }
button {
  margin-top: 6px; padding: 13px; border: 0; border-radius: 12px; background: #ff5a1f; color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
button:hover { filter: brightness(1.06); }
button:disabled { opacity: .7; cursor: default; }
.error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #b42318; font-size: 14px; }
.error[hidden] { display: none; }