:root {
  color-scheme: light;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background:
    #f5f7fb;

  color:
    #172033;
}

* {
  box-sizing:
    border-box;
}

html,
body {
  min-height:
    100%;
}

body {
  margin:
    0;

  background:
    #f5f7fb;
}

button,
input {
  font:
    inherit;
}

button {
  cursor:
    pointer;
}

.shell {
  min-height:
    100vh;

  display:
    grid;

  place-items:
    center;

  padding:
    24px;
}

.card {
  width:
    min(100%, 520px);

  background:
    #ffffff;

  border:
    1px solid #e6eaf2;

  border-radius:
    24px;

  padding:
    32px;

  box-shadow:
    0 18px 50px
    rgba(23, 32, 51, 0.08);
}

.brand {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    34px;
}

.brand-mark {
  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    14px;

  background:
    #172033;

  color:
    #ffffff;

  font-weight:
    800;

  font-size:
    20px;
}

.brand-name {
  font-size:
    18px;

  font-weight:
    750;
}

.brand-subtitle {
  margin-top:
    2px;

  color:
    #768096;

  font-size:
    13px;
}

.state h1 {
  margin:
    0 0 12px;

  font-size:
    28px;

  line-height:
    1.15;
}

.state > p {
  margin:
    0 0 24px;

  color:
    #68738a;

  line-height:
    1.55;
}

.state-icon {
  width:
    52px;

  height:
    52px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    20px;

  border-radius:
    50%;

  background:
    #f1f3f8;

  font-size:
    24px;

  font-weight:
    800;
}

.state-icon.success {
  background:
    #e9f8ef;
}

.spinner {
  width:
    40px;

  height:
    40px;

  margin-bottom:
    20px;

  border:
    4px solid #e8ebf2;

  border-top-color:
    #172033;

  border-radius:
    50%;

  animation:
    spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform:
      rotate(360deg);
  }
}

.mode-switch {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    8px;

  padding:
    5px;

  margin-bottom:
    16px;

  background:
    #f4f6fa;

  border-radius:
    14px;
}

.mode-button {
  border:
    0;

  border-radius:
    10px;

  padding:
    10px 12px;

  background:
    transparent;

  color:
    #657086;

  font-weight:
    650;
}

.mode-button[
  aria-pressed="true"
] {
  background:
    #ffffff;

  color:
    #172033;

  box-shadow:
    0 2px 10px
    rgba(23, 32, 51, 0.08);
}

.notice {
  min-height:
    22px;

  margin:
    0 0 12px;

  color:
    #68738a;

  font-size:
    14px;

  line-height:
    1.45;
}

.form {
  display:
    grid;

  gap:
    16px;
}

.form label {
  display:
    grid;

  gap:
    7px;

  font-size:
    14px;

  font-weight:
    650;
}

.form input {
  width:
    100%;

  border:
    1px solid #d8deea;

  border-radius:
    12px;

  padding:
    13px 14px;

  outline:
    none;
}

.form input:focus {
  border-color:
    #172033;

  box-shadow:
    0 0 0 3px
    rgba(23, 32, 51, 0.08);
}

.form-note {
  margin:
    0;

  color:
    #68738a;

  font-size:
    14px;

  line-height:
    1.5;
}

.primary-button,
.secondary-button {
  border:
    0;

  border-radius:
    12px;

  padding:
    13px 16px;

  font-weight:
    700;
}

.primary-button {
  background:
    #172033;

  color:
    #ffffff;
}

.secondary-button {
  background:
    #eef1f6;

  color:
    #172033;
}

.next-step {
  border-radius:
    14px;

  padding:
    14px 16px;

  background:
    #f4f6fa;

  color:
    #4d586d;

  line-height:
    1.45;
}

.footer {
  margin-top:
    32px;

  padding-top:
    20px;

  border-top:
    1px solid #edf0f5;

  color:
    #9aa2b2;

  font-size:
    12px;

  text-align:
    center;
}

[hidden] {
  display:
    none !important;
}

@media (
  max-width: 560px
) {
  .shell {
    padding:
      0;
  }

  .card {
    min-height:
      100vh;

    border:
      0;

    border-radius:
      0;

    padding:
      24px;
  }

  .state h1 {
    font-size:
      25px;
  }

  .mode-switch {
    grid-template-columns:
      1fr;
  }
}