:root {
  color: #52525b;
  background: #f7f7f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-synthesis: none;
  line-height: 1.45;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f7f7f5; }
button, input, select { font: inherit; }
.page-shell { width: min(100% - 32px, 390px); margin: 0 auto; padding: 46px 0 32px; }
.registration { width: 100%; }
h1, h2, p { margin-top: 0; }
h1 { margin: 0 0 7px; color: #3f3f46; font-size: 20px; font-weight: 500; letter-spacing: 0; line-height: 1.25; }
.intro-copy { margin: 0 0 29px; color: #a1a1aa; font-size: 11px; }
form { width: 100%; }
fieldset { margin: 0; padding: 0 0 24px; border: 0; }
legend { margin: 0 0 13px; padding: 0; color: #71717a; font-size: 11px; font-weight: 500; }
.field-grid { display: grid; gap: 13px; }
.field { display: block; min-width: 0; }
.field > span { display: block; margin-bottom: 5px; color: #71717a; font-size: 11px; }
.field b, .form-note b { color: #be123c; font-weight: 400; }
input, select { width: 100%; min-height: 34px; border: 1px solid #e4e4e7; border-radius: 3px; background: transparent; color: #52525b; outline: none; padding: 7px 8px; font-size: 11px; transition: border-color .15s, background-color .15s; }
input::placeholder { color: #c4c4c8; }
input:focus, select:focus { border-color: #a1a1aa; background: #fff; }
select:disabled { color: #c4c4c8; cursor: not-allowed; }
.error { display: block; min-height: 14px; padding-top: 3px; color: #be123c; font-size: 10px; }
.field.invalid input, .field.invalid select { border-color: #be123c; }
.form-note { margin: -2px 0 14px; color: #a1a1aa; font-size: 10px; }
.form-actions { display: flex; align-items: flex-start; gap: 12px; }
.submit-button { border: 1px solid #d4d4d8; border-radius: 3px; background: transparent; color: #52525b; cursor: pointer; padding: 7px 10px; font-size: 11px; transition: border-color .15s, background-color .15s, transform .15s; }
.submit-button:hover { border-color: #a1a1aa; background: #fff; }
.submit-button:active { transform: scale(.98); }
.submit-button:disabled { cursor: wait; opacity: .55; }
.server-error { margin: 7px 0 0; color: #be123c; font-size: 10px; }
.success-state { padding: 30px 0; }
.success-icon { margin-bottom: 13px; color: #0f766e; font-size: 20px; }
.success-state h2 { margin-bottom: 6px; color: #3f3f46; font-size: 15px; font-weight: 500; }
.success-state p { margin: 0; color: #a1a1aa; font-size: 11px; }
.page-footer { margin: 24px 0 0; color: #c4c4c8; font-size: 10px; }
@media (max-width: 480px) {
  .page-shell { width: min(100% - 32px, 390px); padding-top: 30px; }
}