/* r73c — one visual language for role, profile and code steps */
#onb2-step-role,
#onb2-step-profile,
#onb2-step-code{
  align-items:center;
  justify-content:center;
}

#onb2-step-profile .onb2-modal--registration,
#onb2-step-code .onb2-modal--registration{
  width:min(100%,760px);
  min-height:0;
  max-height:min(820px,calc(100dvh - 32px));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  box-shadow:0 28px 80px rgba(15,23,42,.18);
}

#onb2-step-profile .onb2-modal-head--compact,
#onb2-step-code .onb2-modal-head--compact{
  padding:28px 30px 18px;
  text-align:center;
  align-items:center;
}

#onb2-step-profile .onb2-headbar,
#onb2-step-code .onb2-headbar{
  margin-bottom:22px;
}

#onb2-step-profile .onb2-brandbox,
#onb2-step-code .onb2-brandbox{
  justify-content:center;
}

#onb2-step-profile .onb2-brand-logo,
#onb2-step-code .onb2-brand-logo{
  width:min(100%,250px);
  max-height:72px;
  object-fit:contain;
}

#onb2-step-profile .onb2-modal-title,
#onb2-step-code .onb2-modal-title{
  font-size:clamp(28px,5vw,42px);
  line-height:1.05;
  letter-spacing:-.045em;
  text-align:center;
}

#onb2-step-profile .onb2-modal-sub,
#onb2-step-code .onb2-modal-sub{
  max-width:540px;
  margin:10px auto 0;
  text-align:center;
  font-size:15px;
  line-height:1.5;
}

#onb2-step-profile .onb2-modal-body--role-compact,
#onb2-step-code .onb2-modal-body--role-compact{
  padding:22px 30px 30px;
  overflow:auto;
}

.onb2-registration-form,
.onb2-code-form{
  width:min(100%,520px);
  margin:0 auto;
  display:grid;
  gap:16px;
}

.onb2-registration-form{
  grid-template-columns:1fr;
}

.onb2-registration-form .onb2-ref-field,
.onb2-code-form .onb2-ref-field{
  display:grid;
  gap:8px;
}

.onb2-registration-form .onb2-ref-field > span,
.onb2-code-form .onb2-ref-field > span{
  color:#1f2937;
  font-size:14px;
  font-weight:700;
}

.onb2-registration-form .onb2-ref-input,
.onb2-code-form .onb2-ref-input{
  min-height:58px;
  border:1px solid #d9dee7;
  border-radius:16px;
  background:#f8fafc;
  color:#111827;
  font-size:17px;
  padding:14px 16px;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.onb2-registration-form .onb2-ref-input:focus,
.onb2-code-form .onb2-ref-input:focus{
  border-color:#ff6b00;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,107,0,.12);
}

.onb2-code-input{
  text-align:center;
  letter-spacing:.42em;
  font-size:28px !important;
  font-weight:800;
  padding-left:calc(16px + .42em) !important;
}

.onb2-compact-note{
  width:min(100%,520px);
  margin:14px auto 0;
  padding:12px 14px;
  border-radius:14px;
  background:#f3f6fa;
  color:#5b6472;
  font-size:13px;
  line-height:1.45;
  text-align:center;
}

.onb2-compact-error{
  width:min(100%,520px);
  margin:12px auto 0;
  padding:11px 13px;
  border-radius:12px;
  background:#fff1f2;
  color:#b42318;
  font-size:13px;
  font-weight:700;
  text-align:center;
}

.onb2-compact-actions{
  width:min(100%,520px);
  margin:20px auto 0;
  display:grid;
  grid-template-columns:minmax(120px,.7fr) minmax(180px,1.3fr);
  gap:12px;
}

.onb2-compact-actions .onb2-btn{
  min-height:56px;
  border-radius:16px;
  font-size:15px;
  font-weight:800;
}

.onb2-code-resend{
  justify-self:center;
  margin-top:14px;
  border:0;
  background:transparent;
  color:#536071;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.onb2-code-resend:hover,
.onb2-code-resend:focus-visible{
  color:#ff6b00;
}

#onb2-step-profile .onb2-role-privacy,
#onb2-step-profile .onb2-profile-access,
#onb2-step-profile .onb2-modal-role-ico,
#onb2-step-code .onb2-modal-role-ico{
  display:none !important;
}

@media(max-width:700px){
  #onb2-step-profile,
  #onb2-step-code{
    padding:10px;
  }
  #onb2-step-profile .onb2-modal--registration,
  #onb2-step-code .onb2-modal--registration{
    width:100%;
    max-height:calc(100dvh - 20px);
    border-radius:24px;
  }
  #onb2-step-profile .onb2-modal-head--compact,
  #onb2-step-code .onb2-modal-head--compact{
    padding:20px 18px 12px;
  }
  #onb2-step-profile .onb2-headbar,
  #onb2-step-code .onb2-headbar{
    margin-bottom:14px;
  }
  #onb2-step-profile .onb2-brand-logo,
  #onb2-step-code .onb2-brand-logo{
    width:min(100%,210px);
    max-height:58px;
  }
  #onb2-step-profile .onb2-modal-title,
  #onb2-step-code .onb2-modal-title{
    font-size:30px;
  }
  #onb2-step-profile .onb2-modal-body--role-compact,
  #onb2-step-code .onb2-modal-body--role-compact{
    padding:16px 16px 20px;
  }
  .onb2-registration-form .onb2-ref-input,
  .onb2-code-form .onb2-ref-input{
    min-height:54px;
  }
  .onb2-compact-actions{
    grid-template-columns:1fr;
  }
  .onb2-compact-actions .onb2-btn--primary{
    order:-1;
  }
}

/* Exact role-step visual parity. */
#onb2-step-role .onb2-role-card{
  grid-template-columns:var(--onb-role-icon) minmax(0,1fr) !important;
}

@media(max-width:767px){
  #onb2-step-code.active{
    display:flex !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    padding:0 !important;
  }
  #onb2-step-profile .onb2-modal--registration,
  #onb2-step-code .onb2-modal--registration{
    width:100vw !important;
    max-width:none !important;
    min-width:0 !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  #onb2-step-profile .onb2-modal-head--compact,
  #onb2-step-code .onb2-modal-head--compact{
    padding:18px 14px 6px !important;
  }
  #onb2-step-profile .onb2-headbar,
  #onb2-step-code .onb2-headbar{
    margin-bottom:24px !important;
  }
  #onb2-step-profile .onb2-brand-logo,
  #onb2-step-code .onb2-brand-logo{
    max-width:220px !important;
  }
  #onb2-step-profile .onb2-modal-title,
  #onb2-step-code .onb2-modal-title{
    font-size:clamp(22px,6.1vw,26px) !important;
    line-height:1.06 !important;
  }
  #onb2-step-profile .onb2-modal-sub,
  #onb2-step-code .onb2-modal-sub{
    margin-top:8px !important;
    font-size:clamp(11.5px,3.25vw,13px) !important;
    line-height:1.3 !important;
  }
  #onb2-step-profile .onb2-modal-body--role-compact,
  #onb2-step-code .onb2-modal-body--role-compact{
    padding:18px 12px max(18px,env(safe-area-inset-bottom)) !important;
  }
}