* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: #1f2433;
  background: radial-gradient(circle at 80% 10%, #5b4fd8 0, transparent 45%), linear-gradient(135deg, #182567, #2c2a8f 55%, #4a2fae);
}
.card { width: 100%; max-width: 380px; background: #fff; border-radius: 16px; padding: 28px 26px; box-shadow: 0 24px 60px rgba(10, 10, 40, .35); }
.tag { display: inline-block; font-size: 12px; font-weight: 700; color: #8a4b00; background: #ffe8b8; padding: 3px 10px; border-radius: 999px; }
h1 { margin: 12px 0 2px; font-size: 22px; }
.lead { margin: 0 0 16px; color: #6b7184; }
form { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 13px; font-weight: 600; color: #4a5066; margin-top: 6px; }
input { padding: 11px 12px; border: 1px solid #d5d9e6; border-radius: 10px; font: inherit; outline: 0; text-transform: uppercase; }
input:focus { border-color: #3f6ad8; box-shadow: 0 0 0 3px rgba(63, 106, 216, .18); }
button { margin-top: 14px; padding: 11px; border: 0; border-radius: 10px; background: #3f6ad8; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #3459bf; }
.error { margin: 6px 0 0; color: #c2413a; font-size: 13px; }
.warn { margin: 16px 0 0; font-size: 12px; color: #6b7184; }