:root { font-family: Arial, sans-serif; color: #172033; background: #f4f7fa; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; }
.card { width: min(440px, calc(100% - 48px)); padding: 32px; background: white; border-radius: 12px; box-shadow: 0 8px 30px #0002; }
h1 { margin-top: 0; }
form, section { display: grid; gap: 14px; margin-top: 24px; }
label { font-weight: 600; }
input, button { box-sizing: border-box; width: 100%; padding: 12px; border-radius: 6px; font: inherit; }
input { border: 1px solid #8792a2; }
button { border: 0; color: white; background: #f58200; cursor: pointer; font-weight: 700; }
button.secondary { background: #53657d; }
button:disabled { cursor: not-allowed; opacity: .6; }
button[data-loading="true"] { cursor: wait; opacity: 1; }
button[data-loading="true"]::before {
  content: '';
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .55em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spinner .7s linear infinite;
  vertical-align: -.08em;
}
#status[data-error="true"] { color: #b3261e; }
@keyframes button-spinner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  button[data-loading="true"]::before { animation: none; }
}