/* Edusentia school onboarding — compact, responsive and low-composition-cost. */
#registrationDialog{
  width:min(760px,calc(100vw - 32px));
  max-height:min(780px,calc(100dvh - 32px));
  overflow:hidden;
  border-radius:24px;
  box-shadow:0 28px 80px rgba(4,23,57,.28);
}

#registrationDialog::backdrop{
  background:rgba(7,30,69,.72);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#registrationDialog .registration-frame{
  max-height:min(780px,calc(100dvh - 32px));
  background:#fff;
}

#registrationDialog .registration-header{
  flex:0 0 auto;
  align-items:center;
  gap:20px;
  padding:20px 24px;
  background:linear-gradient(135deg,#fff,#f7faff);
}

.registration-kicker{
  display:block;
  margin-bottom:3px;
  color:#9a6800;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#registrationDialog .registration-header h3{font-size:20px}
#registrationDialog .registration-header p{max-width:540px;margin-top:4px}

.registration-form{
  min-height:0;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}

.registration-body{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:22px 24px;
  scrollbar-gutter:stable;
}

.registration-plan-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
  padding:12px 14px;
  border:1px solid #d7e5f5;
  border-radius:13px;
  background:#f6faff;
}

.registration-plan-row strong{display:block;color:var(--navy);font-size:12px}
.registration-plan-row small{display:block;margin-top:2px;color:var(--muted)}
.registration-plan-chip{
  flex:0 0 auto;
  padding:6px 11px;
  border-radius:999px;
  background:#e3f5ed;
  color:#08714c;
  font-size:11px;
  font-weight:850;
}

.registration-fieldset{
  min-width:0;
  margin:0 0 18px;
  padding:0;
  border:0;
}

.registration-fieldset legend{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  padding:0;
}

.registration-step{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  flex:0 0 29px;
  border-radius:9px;
  background:#e8f1ff;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
}

.registration-fieldset legend strong{display:block;color:#203554;font-size:13px}
.registration-fieldset legend small{display:block;margin-top:1px;color:var(--muted);font-weight:500}
.registration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.registration-grid .registration-wide{grid-column:1/-1}
#registrationDialog .field{gap:6px}
#registrationDialog .field input{min-height:48px;padding:10px 12px;transition:border-color .12s ease,box-shadow .12s ease}

.registration-verification{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(300px,auto);
  align-items:center;
  gap:20px;
  padding:14px;
  border:1px solid #dce5f0;
  border-radius:14px;
  background:#fbfcfe;
}

.registration-verification strong{display:block;color:#203554;font-size:12px}
.registration-verification span{display:block;margin-top:3px;color:var(--muted);font-size:11px}
#registrationTurnstile{min-height:65px;display:flex;align-items:center;justify-content:flex-end}
#registrationDialog .form-message{margin:12px 0 0;min-height:0}
#registrationDialog .form-message:empty{display:none}

.registration-footer{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:14px 24px;
  border-top:1px solid var(--line);
  background:#fff;
  box-shadow:0 -12px 30px rgba(15,41,80,.055);
}

.registration-footer .button{min-width:132px}
.registration-footer .button.primary{min-width:190px}

.registration-success{
  padding:48px 34px 42px;
  text-align:center;
}

.registration-success-icon{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border-radius:20px;
  background:#e3f5ed;
  color:#08714c;
  font-size:30px;
  font-weight:900;
}

.registration-success h3{max-width:520px;margin:6px auto 9px;color:var(--navy);font-size:23px;line-height:1.25}
.registration-success p{max-width:520px;margin:0 auto;color:var(--muted)}
.registration-success-school{
  display:inline-flex;
  margin:20px auto;
  padding:8px 12px;
  border:1px solid #d7e5f5;
  border-radius:999px;
  background:#f6faff;
  color:#24456f;
  font-size:12px;
  font-weight:800;
}
.registration-success .button{min-width:180px}

body:has(#registrationDialog[open]) .auth-view{
  background-attachment:scroll!important;
}

@media(max-width:680px){
  #registrationDialog{width:min(620px,calc(100vw - 18px));max-height:calc(100dvh - 18px);border-radius:18px}
  #registrationDialog .registration-frame{max-height:calc(100dvh - 18px)}
  #registrationDialog .registration-header{padding:16px 17px}
  .registration-body{padding:18px 17px}
  .registration-grid{grid-template-columns:1fr;gap:13px}
  .registration-grid .registration-wide{grid-column:auto}
  .registration-verification{grid-template-columns:1fr;gap:12px}
  #registrationTurnstile{justify-content:flex-start;max-width:100%;overflow:hidden}
  .registration-footer{padding:12px 17px}
}

@media(max-width:430px){
  .registration-plan-row{align-items:flex-start}
  .registration-footer{display:grid;grid-template-columns:1fr 1.35fr}
  .registration-footer .button,.registration-footer .button.primary{min-width:0;width:100%}
  .registration-success{padding:38px 20px 34px}
}

@media(prefers-reduced-transparency:reduce){
  #registrationDialog::backdrop{background:#17345d}
}