/* 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;
  }
}

/* r78q — final centered onboarding composition */
#onb2-step-role.active,
#onb2-step-profile.active,
#onb2-step-code.active{
  min-height:100dvh !important;
  display:grid !important;
  place-items:center !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(14px,3vw,32px) !important;
  box-sizing:border-box;
}
#onb2-step-role .onb2-modal--role-compact,
#onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
#onb2-step-code .onb2-modal--role-compact{
  position:relative;
  width:min(920px,calc(100vw - 28px)) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:min(820px,calc(100dvh - 28px)) !important;
  margin:auto !important;
  border-radius:30px !important;
  overflow:hidden !important;
  box-shadow:0 28px 90px rgba(15,23,42,.20) !important;
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%) !important;
}
#onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
#onb2-step-code .onb2-modal--role-compact{
  width:min(720px,calc(100vw - 28px)) !important;
}
#onb2-step-role .onb2-modal-body--role-compact,
#onb2-step-profile .onb2-modal-body--role-compact,
#onb2-step-code .onb2-modal-body--role-compact{
  padding-bottom:96px !important;
}
#onb2-step-role .onb2-roles{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
#onb2-step-role .onb2-role-card.onb2-role-card--compact{
  position:relative;
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr) !important;
  align-items:center !important;
  min-height:112px !important;
  padding:18px !important;
  gap:15px !important;
  border:1px solid #e6e9ef !important;
  border-radius:22px !important;
  background:#fff !important;
  text-align:left !important;
  box-shadow:0 10px 28px rgba(15,23,42,.055) !important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease !important;
}
#onb2-step-role .onb2-role-card.onb2-role-card--compact::after{
  content:"";
  position:absolute;
  right:15px;
  top:15px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#e8ebf0;
  box-shadow:0 0 0 5px #f5f6f8;
}
#onb2-step-role .onb2-role-card.onb2-role-card--compact:hover,
#onb2-step-role .onb2-role-card.onb2-role-card--compact:focus-visible,
#onb2-step-role .onb2-role-card.onb2-role-card--compact.is-selected{
  transform:translateY(-2px) !important;
  border-color:rgba(255,107,0,.55) !important;
  background:linear-gradient(145deg,#fff,#fff8f2) !important;
  box-shadow:0 16px 38px rgba(255,107,0,.14) !important;
}
#onb2-step-role .onb2-role-card.onb2-role-card--compact.is-selected::after{
  background:#ff6b00;
  box-shadow:0 0 0 5px rgba(255,107,0,.13);
}
#onb2-step-role .onb2-role-ico-wrap{
  width:58px !important;
  height:58px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:18px !important;
  background:rgba(255,107,0,.09) !important;
  color:#ff6b00 !important;
}
#onb2-step-role .onb2-role-ico{font-size:27px !important;line-height:1 !important}
#onb2-step-role .onb2-role-main{display:grid !important;gap:6px !important;padding-right:20px !important}
#onb2-step-role .onb2-role-name{font-size:17px !important;line-height:1.2 !important;color:#172033 !important}
#onb2-step-role .onb2-role-desc{font-size:12px !important;line-height:1.45 !important;color:#717b8b !important}

#onb2-step-profile .onb2-compact-profile,
#onb2-step-code .onb2-code-form{
  position:relative;
  min-height:280px;
  padding-bottom:78px;
}
#onb2-step-profile .onb2-compact-actions,
#onb2-step-code .onb2-compact-actions{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  margin:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  pointer-events:none;
}
#onb2-step-profile .onb2-compact-actions .onb2-btn,
#onb2-step-code .onb2-compact-actions .onb2-btn{pointer-events:auto}
#onb2-step-profile .onb2-btn--primary,
#onb2-step-code .onb2-btn--primary{
  width:min(360px,calc(100% - 82px)) !important;
  min-height:58px !important;
  border-radius:17px !important;
  font-size:16px !important;
  box-shadow:0 14px 30px rgba(255,107,0,.25) !important;
}
#onb2-step-profile .onb2-btn--corner-back,
#onb2-step-code .onb2-btn--corner-back{
  position:absolute !important;
  right:0 !important;
  bottom:0 !important;
  width:54px !important;
  min-width:54px !important;
  height:54px !important;
  min-height:54px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid #e1e5eb !important;
  border-radius:17px !important;
  background:#fff !important;
  color:#172033 !important;
  font-size:26px !important;
  line-height:1 !important;
  box-shadow:0 10px 24px rgba(15,23,42,.09) !important;
}
#onb2-step-code .onb2-code-form{
  width:min(100%,480px) !important;
  margin:0 auto !important;
  text-align:center;
}
#onb2-step-code .onb2-code-resend{
  display:block !important;
  margin:14px auto 0 !important;
}

@media(max-width:700px){
  #onb2-step-role.active,
  #onb2-step-profile.active,
  #onb2-step-code.active{padding:12px !important}
  #onb2-step-role .onb2-modal--role-compact,
  #onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
  #onb2-step-code .onb2-modal--role-compact{
    width:calc(100vw - 24px) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100dvh - 24px) !important;
    border-radius:24px !important;
    box-shadow:0 22px 60px rgba(15,23,42,.18) !important;
  }
  #onb2-step-role .onb2-roles{grid-template-columns:1fr !important;gap:10px !important}
  #onb2-step-role .onb2-role-card.onb2-role-card--compact{
    grid-template-columns:48px minmax(0,1fr) !important;
    min-height:88px !important;
    padding:13px !important;
    gap:11px !important;
    border-radius:18px !important;
  }
  #onb2-step-role .onb2-role-ico-wrap{width:48px !important;height:48px !important;border-radius:15px !important}
  #onb2-step-role .onb2-role-ico{font-size:23px !important}
  #onb2-step-role .onb2-role-name{font-size:15px !important}
  #onb2-step-role .onb2-role-desc{font-size:11px !important}
  #onb2-step-profile .onb2-modal-body--role-compact,
  #onb2-step-code .onb2-modal-body--role-compact{padding:14px 14px 88px !important}
  #onb2-step-profile .onb2-compact-profile,
  #onb2-step-code .onb2-code-form{min-height:250px;padding-bottom:70px}
  #onb2-step-profile .onb2-btn--primary,
  #onb2-step-code .onb2-btn--primary{width:calc(100% - 66px) !important;min-height:54px !important;font-size:15px !important}
  #onb2-step-profile .onb2-btn--corner-back,
  #onb2-step-code .onb2-btn--corner-back{width:50px !important;min-width:50px !important;height:50px !important;min-height:50px !important;border-radius:15px !important}
}

/* r78r — final onboarding geometry: intrinsic modals and safe bottom actions. */
#onb2-step-role.active,
#onb2-step-profile.active,
#onb2-step-code.active{
  min-height:100dvh !important;
  display:grid !important;
  place-items:center !important;
  padding:18px !important;
  box-sizing:border-box !important;
}

/* The role modal must be centered by its real content height. */
#onb2-step-role .onb2-modal--role-compact{
  width:min(980px,calc(100vw - 36px)) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100dvh - 36px) !important;
  margin:0 !important;
  overflow:auto !important;
  border-radius:28px !important;
}
#onb2-step-role .onb2-modal-body--role-compact{
  min-height:0 !important;
  height:auto !important;
  padding:14px 24px 24px !important;
  overflow:visible !important;
}

/* Profile/code modal is centered while the controls live in the viewport footer. */
#onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
#onb2-step-code .onb2-modal--role-compact{
  width:min(720px,calc(100vw - 36px)) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100dvh - 176px) !important;
  margin:0 !important;
  overflow:hidden !important;
  border-radius:28px !important;
}
#onb2-step-profile .onb2-modal-body--role-compact,
#onb2-step-code .onb2-modal-body--role-compact{
  min-height:0 !important;
  height:auto !important;
  max-height:calc(100dvh - 310px) !important;
  padding:18px 28px 24px !important;
  overflow:auto !important;
}
#onb2-step-profile .onb2-compact-profile,
#onb2-step-code .onb2-code-form{
  min-height:0 !important;
  height:auto !important;
  padding-bottom:0 !important;
}

/* Restore full role cards; improve visual language without shrinking content. */
#onb2-step-role .onb2-roles{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}
#onb2-step-role .onb2-role-card.onb2-role-card--compact{
  grid-template-columns:54px minmax(0,1fr) !important;
  min-height:108px !important;
  height:auto !important;
  padding:16px 18px !important;
  gap:14px !important;
  border:1px solid #dfe4ec !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,#fff 0%,#fafbfc 100%) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.07) !important;
  transform:none !important;
}
#onb2-step-role .onb2-role-card.onb2-role-card--compact:hover,
#onb2-step-role .onb2-role-card.onb2-role-card--compact:focus-visible{
  border-color:rgba(255,107,0,.52) !important;
  background:linear-gradient(145deg,#fff,#fff7ef) !important;
  box-shadow:0 15px 34px rgba(255,107,0,.14) !important;
}
#onb2-step-role .onb2-role-card.onb2-role-card--compact.is-selected{
  border-color:#ff6b00 !important;
  background:linear-gradient(145deg,#fff,#fff4e8) !important;
  box-shadow:0 0 0 3px rgba(255,107,0,.12),0 16px 38px rgba(255,107,0,.16) !important;
}
#onb2-step-role .onb2-role-ico-wrap{
  width:54px !important;
  height:54px !important;
  border-radius:17px !important;
  background:linear-gradient(145deg,rgba(255,107,0,.14),rgba(255,107,0,.06)) !important;
  border:1px solid rgba(255,107,0,.16) !important;
}
#onb2-step-role .onb2-role-ico{font-size:26px !important}
#onb2-step-role .onb2-role-main{display:grid !important;gap:6px !important;padding:0 !important}
#onb2-step-role .onb2-role-name{font-size:16px !important;line-height:1.2 !important;color:#172033 !important}
#onb2-step-role .onb2-role-desc{
  display:block !important;
  overflow:visible !important;
  -webkit-line-clamp:unset !important;
  font-size:12px !important;
  line-height:1.42 !important;
  color:#697386 !important;
}

/* Actions are a dedicated viewport footer, never inside modal geometry. */
#onb2-step-profile .onb2-compact-actions,
#onb2-step-code .onb2-compact-actions{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:max(14px,env(safe-area-inset-bottom)) !important;
  width:min(620px,calc(100vw - 28px)) !important;
  height:58px !important;
  margin:0 !important;
  padding:0 70px 0 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:translateX(-50%) !important;
  z-index:10020 !important;
  pointer-events:none !important;
}
#onb2-step-profile .onb2-compact-actions .onb2-btn,
#onb2-step-code .onb2-compact-actions .onb2-btn{pointer-events:auto !important}

/* Primary actions keep their full structure and one common visual style. */
#onb2-step-profile .onb2-btn--primary,
#onb2-step-code .onb2-btn--primary{
  width:min(420px,100%) !important;
  min-width:220px !important;
  min-height:56px !important;
  padding:13px 24px !important;
  border:1px solid #ff6b00 !important;
  border-radius:17px !important;
  background:linear-gradient(135deg,#ff7a00 0%,#ff5b00 100%) !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:850 !important;
  box-shadow:0 14px 30px rgba(255,107,0,.26) !important;
}
#onb2-step-profile .onb2-btn--primary:hover,
#onb2-step-code .onb2-btn--primary:hover{
  background:linear-gradient(135deg,#ff8619 0%,#f45200 100%) !important;
  box-shadow:0 17px 36px rgba(255,107,0,.32) !important;
}
#onb2-step-profile .onb2-btn--primary:focus-visible,
#onb2-step-code .onb2-btn--primary:focus-visible{
  outline:3px solid rgba(255,107,0,.25) !important;
  outline-offset:3px !important;
}

/* Back action matches k-mobile-back geometry and remains in the lower-right corner. */
#onb2-step-profile .onb2-btn--corner-back,
#onb2-step-code .onb2-btn--corner-back{
  position:absolute !important;
  right:0 !important;
  bottom:5px !important;
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(17,24,39,.12) !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.97) !important;
  color:#111827 !important;
  font-size:25px !important;
  line-height:1 !important;
  box-shadow:0 14px 36px rgba(15,23,42,.18) !important;
  backdrop-filter:blur(16px) !important;
}
#onb2-step-profile .onb2-btn--corner-back:active,
#onb2-step-code .onb2-btn--corner-back:active{transform:scale(.96) !important}
#onb2-step-profile .onb2-btn--corner-back:focus-visible,
#onb2-step-code .onb2-btn--corner-back:focus-visible{
  outline:3px solid rgba(255,107,0,.28) !important;
  outline-offset:3px !important;
}

@media(max-width:700px){
  #onb2-step-role.active,
  #onb2-step-profile.active,
  #onb2-step-code.active{padding:12px !important}
  #onb2-step-role .onb2-modal--role-compact{
    width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 24px) !important;
    border-radius:24px !important;
  }
  #onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
  #onb2-step-code .onb2-modal--role-compact{
    width:calc(100vw - 24px) !important;
    max-height:calc(100dvh - 164px) !important;
    border-radius:24px !important;
  }
  #onb2-step-profile .onb2-modal-body--role-compact,
  #onb2-step-code .onb2-modal-body--role-compact{
    max-height:calc(100dvh - 292px) !important;
    padding:14px 16px 18px !important;
  }
  #onb2-step-role .onb2-roles{grid-template-columns:1fr !important;gap:10px !important}
  #onb2-step-role .onb2-role-card.onb2-role-card--compact{
    grid-template-columns:48px minmax(0,1fr) !important;
    min-height:92px !important;
    padding:13px 14px !important;
    gap:12px !important;
    border-radius:18px !important;
  }
  #onb2-step-role .onb2-role-ico-wrap{width:48px !important;height:48px !important;border-radius:15px !important}
  #onb2-step-role .onb2-role-ico{font-size:23px !important}
  #onb2-step-role .onb2-role-name{font-size:15px !important}
  #onb2-step-role .onb2-role-desc{display:block !important;font-size:11px !important;line-height:1.35 !important}
  #onb2-step-profile .onb2-compact-actions,
  #onb2-step-code .onb2-compact-actions{
    width:calc(100vw - 24px) !important;
    padding-right:62px !important;
  }
  #onb2-step-profile .onb2-btn--primary,
  #onb2-step-code .onb2-btn--primary{
    width:100% !important;
    min-width:0 !important;
    min-height:54px !important;
    font-size:15px !important;
  }
  #onb2-step-profile .onb2-btn--corner-back,
  #onb2-step-code .onb2-btn--corner-back{
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
  }
}

@media(max-height:680px){
  #onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
  #onb2-step-code .onb2-modal--role-compact{max-height:calc(100dvh - 150px) !important}
  #onb2-step-profile .onb2-modal-head--compact,
  #onb2-step-code .onb2-modal-head--compact{padding-top:16px !important;padding-bottom:10px !important}
  #onb2-step-profile .onb2-headbar,
  #onb2-step-code .onb2-headbar{margin-bottom:10px !important}
}

/* r78t — authoritative mobile onboarding panels. Keep this block last. */
#onb2-step-role.active,
#onb2-step-profile.active,
#onb2-step-code.active{
  min-height:100dvh !important;
  display:grid !important;
  place-items:center !important;
  padding:16px !important;
  overflow:auto !important;
  box-sizing:border-box !important;
}

/* Every onboarding step is a real centered panel, matching the app preloader. */
#onb2-step-role .onb2-modal--role-compact,
#onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
#onb2-step-code .onb2-modal--role-compact{
  position:relative !important;
  width:min(620px,calc(100vw - 32px)) !important;
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100dvh - 32px) !important;
  margin:auto !important;
  overflow:auto !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:28px !important;
  background:#fff !important;
  box-shadow:0 22px 70px rgba(15,23,42,.12) !important;
}
#onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
#onb2-step-code .onb2-modal--role-compact{
  width:min(620px,calc(100vw - 32px)) !important;
  max-height:calc(100dvh - 118px) !important;
}

/* Header and official logo stay exactly centered. */
#onb2-step-role .onb2-modal-head--compact,
#onb2-step-profile .onb2-modal-head--compact,
#onb2-step-code .onb2-modal-head--compact{
  padding:22px 22px 12px !important;
  text-align:center !important;
}
#onb2-step-role .onb2-headbar,
#onb2-step-profile .onb2-headbar,
#onb2-step-code .onb2-headbar{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 auto 14px !important;
}
#onb2-step-role .onb2-brandbox,
#onb2-step-profile .onb2-brandbox,
#onb2-step-code .onb2-brandbox{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
}
#onb2-step-role .onb2-brand-logo,
#onb2-step-profile .onb2-brand-logo,
#onb2-step-code .onb2-brand-logo{
  display:block !important;
  width:min(250px,70vw) !important;
  max-height:86px !important;
  margin:0 auto !important;
  object-fit:contain !important;
}

/* Body uses intrinsic height; no fake spacers that break centering. */
#onb2-step-role .onb2-modal-body--role-compact,
#onb2-step-profile .onb2-modal-body--role-compact,
#onb2-step-code .onb2-modal-body--role-compact{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:14px 22px 22px !important;
  overflow:visible !important;
}

/* Role cards: two per row on normal phones, one only on very narrow displays. */
#onb2-step-role .onb2-roles{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:11px !important;
}
#onb2-step-role .onb2-role-card.onb2-role-card--compact{
  grid-template-columns:44px minmax(0,1fr) !important;
  min-height:102px !important;
  padding:13px !important;
  gap:10px !important;
  border:1px solid #dfe4ec !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,#fff,#fafbfc) !important;
  box-shadow:0 9px 24px rgba(15,23,42,.07) !important;
}
#onb2-step-role .onb2-role-card.onb2-role-card--compact.is-selected{
  border-color:#ff6b00 !important;
  background:linear-gradient(145deg,#fff,#fff4e8) !important;
  box-shadow:0 0 0 3px rgba(255,107,0,.12),0 13px 28px rgba(255,107,0,.15) !important;
}
#onb2-step-role .onb2-role-ico-wrap{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
}
#onb2-step-role .onb2-role-ico{font-size:22px !important}
#onb2-step-role .onb2-role-name{font-size:14px !important}
#onb2-step-role .onb2-role-desc{font-size:10.5px !important;line-height:1.3 !important}

/* Profile panel: fields are two per row; wide fields still span both columns. */
#onb2-step-profile .onb2-compact-profile,
#onb2-step-code .onb2-code-form{
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
}
#onb2-step-profile .onb2-ref-profile-form--compact{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}
#onb2-step-profile .onb2-ref-field{
  min-width:0 !important;
}
#onb2-step-profile .onb2-ref-wide{
  grid-column:1/-1 !important;
}

/* Fixed action dock does not participate in panel height. */
#onb2-step-profile .onb2-compact-actions,
#onb2-step-code .onb2-compact-actions{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:max(14px,env(safe-area-inset-bottom)) !important;
  width:min(620px,calc(100vw - 28px)) !important;
  height:58px !important;
  padding:0 66px 0 0 !important;
  margin:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  transform:translateX(-50%) !important;
  z-index:10020 !important;
  pointer-events:none !important;
}
#onb2-step-profile .onb2-compact-actions .onb2-btn,
#onb2-step-code .onb2-compact-actions .onb2-btn{pointer-events:auto !important}
#onb2-step-profile .onb2-btn--primary,
#onb2-step-code .onb2-btn--primary{
  width:min(420px,100%) !important;
  min-height:56px !important;
  border-radius:17px !important;
}

/* Back button uses the same SVG chevron and geometry as #k-mobile-back. */
#onb2-step-profile .onb2-btn--corner-back,
#onb2-step-code .onb2-btn--corner-back{
  position:absolute !important;
  right:0 !important;
  bottom:5px !important;
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  min-height:48px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(17,24,39,.12) !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.98) !important;
  color:#111827 !important;
  box-shadow:0 14px 36px rgba(15,23,42,.18) !important;
  font-size:0 !important;
}
#onb2-step-profile .onb2-btn--corner-back svg,
#onb2-step-code .onb2-btn--corner-back svg{
  display:block !important;
  width:23px !important;
  height:23px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

@media(max-width:700px){
  #onb2-step-role.active,
  #onb2-step-profile.active,
  #onb2-step-code.active{padding:12px !important}
  #onb2-step-role .onb2-modal--role-compact,
  #onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
  #onb2-step-code .onb2-modal--role-compact{
    width:calc(100vw - 24px) !important;
    border-radius:23px !important;
  }
  #onb2-step-role .onb2-modal--role-compact{max-height:calc(100dvh - 24px) !important}
  #onb2-step-profile .onb2-modal--role-compact.onb2-modal--profile-match,
  #onb2-step-code .onb2-modal--role-compact{max-height:calc(100dvh - 106px) !important}
  #onb2-step-role .onb2-modal-body--role-compact,
  #onb2-step-profile .onb2-modal-body--role-compact,
  #onb2-step-code .onb2-modal-body--role-compact{padding:12px 14px 18px !important}
  #onb2-step-profile .onb2-compact-actions,
  #onb2-step-code .onb2-compact-actions{width:calc(100vw - 24px) !important;padding-right:62px !important}
}
@media(max-width:350px){
  #onb2-step-role .onb2-roles,
  #onb2-step-profile .onb2-ref-profile-form--compact{grid-template-columns:1fr !important}
  #onb2-step-profile .onb2-ref-wide{grid-column:auto !important}
}
@media(max-height:650px){
  #onb2-step-role .onb2-modal-head--compact,
  #onb2-step-profile .onb2-modal-head--compact,
  #onb2-step-code .onb2-modal-head--compact{padding-top:14px !important;padding-bottom:8px !important}
  #onb2-step-role .onb2-brand-logo,
  #onb2-step-profile .onb2-brand-logo,
  #onb2-step-code .onb2-brand-logo{max-height:64px !important}
  #onb2-step-role .onb2-role-card.onb2-role-card--compact{min-height:88px !important}
}