:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f7fb;
  color: #172033;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(160deg, #eef4ff 0%, #f8f9fc 50%, #f3f7ff 100%);
}

.registration-page {
  display: flex;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
}

.registration-card {
  width: 100%;
  max-width: 440px;
  padding: 28px 20px;
  border: 1px solid #e5eaf3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(28, 65, 129, .10);
}

.eyebrow { margin: 0 0 8px; color: #3267d6; font-size: 14px; font-weight: 700; }
h1 { margin: 0; font-size: clamp(28px, 8vw, 34px); letter-spacing: .02em; }
.intro { margin: 10px 0 20px; color: #62708a; font-size: 15px; line-height: 1.6; }

.form-status {
  min-height: 24px;
  margin: 0 0 12px;
  color: #b42318;
  font-size: 14px;
  line-height: 1.5;
}

.form-status[data-state="success"] { color: #087443; }

.field-group { margin-top: 16px; }
label { display: block; margin-bottom: 8px; color: #2e3a52; font-size: 15px; font-weight: 650; }

input,
button {
  min-height: 44px;
  border-radius: 10px;
  font: inherit;
}

input {
  display: block;
  width: 100%;
  border: 1px solid #cbd5e5;
  padding: 10px 12px;
  color: #172033;
  background: #fff;
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(56, 121, 237, .35);
  outline-offset: 2px;
  border-color: #2f75e8;
}

.sms-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
button { border: 0; padding: 10px 14px; cursor: pointer; font-weight: 700; }
#send-sms-code { color: #245fc6; background: #eaf2ff; }
.captcha-element { position: relative; min-height: 1px; }
.captcha-trigger-hidden { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.primary-action { width: 100%; margin-top: 24px; color: #fff; background: #286be0; }
button:hover:not(:disabled) { filter: brightness(.97); }
button:disabled { cursor: not-allowed; color: #8390a5; background: #e6eaf0; opacity: .8; }
button[aria-busy="true"]::after { content: "…"; }

.site-footer {
  padding: 0 max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  text-align: center;
}

.site-footer a { color: #245fc6; font-weight: 700; text-underline-offset: 3px; }

@media (min-width: 480px) {
  .registration-page { padding-top: 48px; }
  .registration-card { padding: 36px; }
}