:root{
  --green:#07a869;
  --blue:#3d7eb9;
  --teal:#0da9a6;
  --navy:#15445a;
  --gold:#c1b489;
  --gray:#c2c1c1;
  --support-blue:#3078a6;
  --support-cyan:#218caa;
  --support-sky:#69cee3;
  --purple:#351375;
  --lavender:#7258a4;
  --indigo:#7a80ff;
  --line:#e6eeee;
  --muted:#6b7d86;
  --page-bg:#f4f9f9;
  --surface:#fff;
  --text:#142f3b;
  --soft-teal:#eaf8f6;
  --soft-purple:#f2eff9;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:var(--page-bg);
  font-family:"IBM Plex Sans Arabic", system-ui, sans-serif;
}
.register-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(360px,52vw) minmax(360px,1fr);
  align-items:stretch;
  gap:0;
  padding:34px 46px;
}
.visual-panel{
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 68px);
  border-radius:22px 0 22px 0;
  background:var(--teal);
}
.visual-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(6,91,95,.88),rgba(13,169,166,.76)),
    url("../images/register-school-image.webp") center/cover no-repeat;
  filter:saturate(.85) contrast(1.02);
}
.visual-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(105,206,227,.18),rgba(21,68,90,.12));
}
.login-visual{
  background:var(--purple);
}
.login-visual::before{
  background:
    linear-gradient(180deg,rgba(22,33,76,.88),rgba(77,52,138,.78)),
    url("../images/register-school-image.webp") center/cover no-repeat;
}
.corner{
  position:absolute;
  width:78px;
  height:78px;
  background:#fff;
  z-index:2;
}
.corner.top{
  top:54px;
  inset-inline-end:54px;
  border-radius:0 0 10px 10px;
}
.corner.bottom{
  bottom:54px;
  inset-inline-start:54px;
  border-radius:10px 10px 0 0;
}
.form-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 48px;
}
.form-shell{
  width:min(570px,100%);
  padding:28px 32px;
  border:1px solid rgba(13,169,166,.15);
  border-radius:24px;
  background:var(--surface);
  box-shadow:0 22px 55px rgba(21,68,90,.10);
}
.login-shell{
  width:min(520px,100%);
  border-color:rgba(53,19,117,.14);
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}
.brand-logo{
  display:block;
  width:230px;
  max-width:68%;
  height:auto;
  object-fit:contain;
}
.welcome{
  margin:8px 0 10px;
  text-align:center;
  color:#111827;
  font-size:clamp(25px,2.3vw,34px);
  font-weight:900;
}
.page-intro{
  margin-bottom:22px;
  text-align:center;
}
.page-intro>p{
  max-width:520px;
  margin:0 auto;
  color:var(--muted);
  font-size:14px;
  line-height:1.9;
}
.page-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:4px 12px;
  border:1px solid rgba(13,169,166,.22);
  border-radius:999px;
  color:#087f7c;
  background:var(--soft-teal);
  font-size:12px;
  font-weight:900;
}
.page-kicker>span{
  display:grid;
  width:19px;
  height:19px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--teal);
  font-size:16px;
  line-height:1;
}
.login-kicker{
  color:#563c91;
  border-color:rgba(53,19,117,.18);
  background:var(--soft-purple);
}
.login-kicker svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.register-form{
  display:grid;
  gap:16px;
}
.registration-fields{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
  gap:14px 16px;
}
.field{
  display:grid;
  gap:8px;
}
label{
  color:#24343b;
  font-size:14px;
  font-weight:800;
}
input,
select{
  width:100%;
  min-height:58px;
  border:1px solid #dfe7ea;
  border-radius:12px;
  padding:0 16px;
  background:#fff;
  color:#162f3a;
  outline:none;
  font:700 16px "IBM Plex Sans Arabic", system-ui, sans-serif;
}
select{
  appearance:none;
  -webkit-appearance:none;
  padding-inline-start:16px;
  padding-inline-end:48px;
  background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2315445a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:left 18px center;
  background-size:18px 18px;
  background-repeat:no-repeat;
}
input::placeholder{
  color:#a6b3bb;
  font-family:"IBM Plex Sans Arabic", system-ui, sans-serif;
}
input:focus,
select:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(13,169,166,.12);
}
.field-error{
  min-height:18px;
  margin:0;
  color:#c81e1e;
  font-size:12px;
  font-weight:800;
  line-height:1.5;
}
.field-error:empty{
  display:none;
}
.field-hint{
  margin:0;
  color:var(--muted);
  font-size:11.5px;
  font-weight:700;
  line-height:1.55;
}
.school-data-section,
.contact-section{
  display:grid;
  gap:14px;
  padding:17px;
  border-radius:16px;
}
.school-data-section{
  border:1px solid rgba(13,169,166,.3);
  background:linear-gradient(145deg,#fff,#f3fbfa);
  box-shadow:0 10px 24px rgba(21,68,90,.07);
}
.contact-section{
  border:1px solid rgba(61,126,185,.2);
  background:#f8fbfc;
}
.school-data-heading,
.contact-section-heading{
  display:flex;
  align-items:center;
  gap:11px;
}
.school-data-icon,
.contact-section-icon{
  display:grid;
  width:35px;
  height:35px;
  flex:0 0 auto;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--teal));
  font-size:16px;
}
.school-data-icon{
  background:linear-gradient(135deg,#078d72,var(--teal));
}
.school-data-heading h2,
.contact-section-heading h2{
  margin:0;
  color:#163746;
  font-size:17px;
  line-height:1.5;
}
.school-data-heading p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:11.5px;
  font-weight:700;
  line-height:1.6;
}
.contact-fields{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.contact-fields input[type="tel"]{
  text-align:right;
}
.optional-label,
.required-label{
  margin-inline-start:4px;
  font-size:11px;
  font-weight:800;
}
.optional-label{color:var(--muted)}
.required-label{color:#b42318;font-size:15px}
.contact-privacy-note{
  margin:0;
  padding-top:11px;
  border-top:1px solid rgba(61,126,185,.14);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  line-height:1.75;
}
.contact-section input:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 2px rgba(13,169,166,.12);
}
.contact-section input:focus-visible{
  outline:2px solid rgba(13,169,166,.24);
  outline-offset:1px;
}
.phone-verification{
  display:grid;
  gap:11px;
  padding:13px;
  border:1px solid rgba(13,169,166,.2);
  border-radius:13px;
  background:rgba(255,255,255,.72);
}
.phone-verification[hidden]{
  display:none;
}
.phone-verification-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#163746;
  font-size:13px;
}
.verification-status{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.verification-status.is-unverified{
  color:#8a3d1d;
  background:#fff0e8;
}
.verification-status.is-sent{
  color:#075c79;
  background:#e8f6fb;
}
.verification-status.is-verified{
  color:#087249;
  background:#e7f8ef;
}
.verification-action{
  min-height:46px;
  padding-inline:15px;
  box-shadow:none;
  font-size:13px;
}
.verification-action.secondary{
  color:#075d6a;
  border:1px solid rgba(13,169,166,.28);
  background:#eaf8f6;
}
.verification-code-panel{
  display:grid;
  gap:8px;
  padding-top:11px;
  border-top:1px solid rgba(13,169,166,.14);
}
.verification-code-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
}
.verification-code-actions input{
  min-height:46px;
  text-align:center;
  letter-spacing:.18em;
}
.registration-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(13,169,166,.2);
  border-radius:12px;
  color:#24434e;
  background:#f7fbfb;
  font-size:12.5px;
  line-height:1.75;
  cursor:pointer;
}
.registration-consent input{
  width:19px;
  min-height:19px;
  height:19px;
  flex:0 0 auto;
  margin:3px 0 0;
  accent-color:var(--teal);
}
.data-use-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(13,169,166,.22);
  border-radius:12px;
  color:#24545c;
  background:var(--soft-teal);
}
.data-use-note p{
  margin:0;
  font-size:12.5px;
  line-height:1.75;
}
.data-use-note-icon{
  flex:0 0 auto;
  display:grid;
  width:23px;
  height:23px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--teal);
  font:900 13px system-ui,sans-serif;
}
input.input-error{
  border-color:#c81e1e;
  box-shadow:0 0 0 4px rgba(200,30,30,.1);
}
.preview{
  position:relative;
  min-height:62px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(13,169,166,.32);
  border-radius:12px;
  background:#063f48;
  box-shadow:0 10px 24px rgba(21,68,90,.10);
}
.report-preview-section{
  width:min(430px,100%);
  margin-inline:auto;
  padding:12px;
  border:1px solid rgba(13,169,166,.16);
  border-radius:14px;
  background:#fbfdfd;
}
.report-preview-section h2{
  margin:0 0 9px;
  color:var(--muted);
  text-align:center;
  font-size:12px;
  font-weight:900;
}
.preview img{
  display:block;
  width:100%;
  height:100%;
  min-height:62px;
  object-fit:contain;
}
.preview-name{
  position:absolute;
  inset-inline:86px;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  font-size:clamp(15px,2.2vw,24px);
  font-weight:900;
  line-height:1.25;
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.34);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  margin-top:4px;
}
button,
a{
  min-height:54px;
  border:0;
  border-radius:12px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  font:900 15px "IBM Plex Sans Arabic", system-ui, sans-serif;
}
button{
  color:#fff;
  background:linear-gradient(135deg,#078d72,var(--teal));
  box-shadow:0 14px 26px rgba(13,169,166,.18);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
a{
  color:var(--purple);
  background:#f2f0f8;
}
.guest-btn{
  color:var(--navy);
  background:#eef5f6;
  box-shadow:none;
}
button:hover,
.primary-link:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}
button:disabled,
button:disabled:hover{
  cursor:not-allowed;
  opacity:.56;
  transform:none;
  filter:none;
  box-shadow:none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:3px solid rgba(13,169,166,.32);
  outline-offset:3px;
}
.alternate-entry{
  min-height:44px;
  padding:4px 12px;
  color:#087f7c;
  background:transparent;
  font-size:13px;
}
.alternate-entry:hover{
  text-decoration:underline;
}
.visual-copy{
  position:absolute;
  z-index:3;
  inset-inline:11%;
  bottom:11%;
  padding:26px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:20px;
  color:#fff;
  background:rgba(7,35,53,.38);
  backdrop-filter:blur(8px);
  box-shadow:0 20px 45px rgba(0,0,0,.18);
}
.visual-copy span{
  color:#bcefed;
  font-size:13px;
  font-weight:900;
}
.visual-copy h2{
  margin:8px 0;
  font-size:clamp(25px,3vw,42px);
  line-height:1.3;
}
.visual-copy p{
  margin:0;
  color:rgba(255,255,255,.85);
  font-size:15px;
  line-height:1.9;
}
.stored-school-card,
.empty-school-state{
  padding:22px;
  border:1px solid rgba(53,19,117,.15);
  border-radius:18px;
  background:linear-gradient(145deg,#fff,#f7f5fc);
  box-shadow:0 16px 34px rgba(53,19,117,.08);
}
.stored-school-heading{
  display:flex;
  align-items:center;
  gap:13px;
}
.stored-school-icon,
.empty-school-icon{
  display:grid;
  width:46px;
  height:46px;
  flex:0 0 auto;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--lavender));
  font-size:20px;
  font-weight:900;
}
.stored-school-heading p{
  margin:0;
  color:var(--lavender);
  font-size:13px;
  font-weight:900;
}
.stored-school-heading h2,
.empty-school-state h2{
  margin:3px 0 0;
  color:#19152b;
  font-size:21px;
  line-height:1.5;
}
.stored-school-details{
  display:grid;
  gap:8px;
  margin:18px 0;
}
.stored-school-details>div{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:10px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(114,88,164,.07);
}
.stored-school-details dt{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.stored-school-details dd{
  margin:0;
  color:#27213d;
  font-size:13px;
  font-weight:800;
}
.login-actions{
  display:grid;
  gap:9px;
}
.login-actions button:not(.text-action),
.primary-link{
  color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--lavender));
  box-shadow:0 14px 26px rgba(53,19,117,.18);
}
.login-actions>a:not(.primary-link){
  min-height:46px;
  color:var(--purple);
  background:var(--soft-purple);
}
.text-action{
  min-height:42px;
  color:#4b4264;
  background:transparent;
  box-shadow:none;
  font-size:13px;
}
.empty-school-state{
  text-align:center;
}
.empty-school-icon{
  margin:0 auto 12px;
}
.empty-school-state p{
  margin:8px auto 18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}
.device-note{
  margin:17px auto 0;
  max-width:450px;
  color:var(--muted);
  text-align:center;
  font-size:12px;
  line-height:1.8;
}
.hint{
  margin-top:20px;
  color:var(--muted);
  text-align:center;
  font-size:13px;
  line-height:1.8;
}
.subscription-note{
  margin:16px 0 0;
  color:#c81e1e;
  text-align:center;
  font-size:14px;
  font-weight:900;
  line-height:1.7;
}
@media(max-width:900px){
  .register-page{
    grid-template-columns:1fr;
    padding:18px;
  }
  .visual-panel{
    min-height:300px;
    border-radius:18px;
  }
  .form-panel{
    padding:18px 6px;
  }
  .registration-fields{
    grid-template-columns:1fr;
  }
  .corner{
    width:58px;
    height:58px;
  }
  .preview{
    min-height:64px;
  }
  .preview img{
    min-height:64px;
    object-fit:contain;
  }
  .preview-name{
    inset-inline:74px;
    font-size:clamp(13px,4.5vw,18px);
  }
}

@media(max-width:640px){
  .register-page{
    min-height:100svh;
    padding:10px 12px;
  }
  .form-panel{
    padding:8px 0;
  }
  .form-shell{
    padding:20px 16px;
    border-radius:18px;
  }
  .brand{
    margin-bottom:8px;
  }
  .brand-logo{
    width:120px;
    max-width:42%;
  }
  .welcome{
    margin-bottom:8px;
    font-size:23px;
  }
  .page-intro{
    margin-bottom:16px;
  }
  .page-intro>p{
    font-size:12.5px;
    line-height:1.75;
  }
  .register-form,
  .registration-fields{
    gap:10px;
  }
  .field{
    gap:5px;
  }
  input,
  select{
    min-height:48px;
    font-size:15px;
  }
  .preview,
  .preview img{
    min-height:52px;
  }
  .preview-name{
    inset-inline:54px;
    font-size:clamp(12px,4vw,16px);
  }
  .actions{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin-top:0;
  }
  button,
  a{
    min-height:48px;
    padding-inline:12px;
    font-size:14px;
  }
  .subscription-note{
    margin-top:10px;
    font-size:12.5px;
  }
  .hint{
    margin-top:8px;
    font-size:12px;
    line-height:1.6;
  }
  .visual-panel{
    display:none;
  }
  .data-use-note{
    padding:10px 11px;
  }
  .contact-section{
    gap:11px;
    padding:13px 12px;
  }
  .school-data-section{
    gap:11px;
    padding:14px 12px;
  }
  .contact-fields{
    grid-template-columns:1fr;
    gap:10px;
  }
  .registration-consent{
    padding:10px 11px;
    font-size:12px;
  }
  .phone-verification-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .verification-code-actions{
    grid-template-columns:1fr;
  }
  .stored-school-card,
  .empty-school-state{
    padding:18px 14px;
  }
  .stored-school-details>div{
    grid-template-columns:74px minmax(0,1fr);
  }
  .stored-school-details dd{
    overflow-wrap:anywhere;
  }
}

html[data-theme="dark"] body{
  --page-bg:#07131d;
  --surface:#0d1f2c;
  --text:#eef8fa;
  --muted:#9fb3be;
  --soft-teal:#102f35;
  --soft-purple:#211b35;
}
html[data-theme="dark"] .form-shell{
  border-color:#203c4a;
  box-shadow:0 22px 55px rgba(0,0,0,.28);
}
html[data-theme="dark"] .welcome,
html[data-theme="dark"] label,
html[data-theme="dark"] .stored-school-heading h2,
html[data-theme="dark"] .empty-school-state h2{
  color:#f3fafb;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select{
  border-color:#294553;
  color:#eef8fa;
  background-color:#091923;
}
html[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2369cee3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .data-use-note{
  border-color:rgba(105,206,227,.2);
  color:#c9e8ea;
}
html[data-theme="dark"] .contact-section{
  border-color:#254959;
  background:linear-gradient(145deg,#0d202d,#102631);
}
html[data-theme="dark"] .phone-verification{
  border-color:#285565;
  background:rgba(7,25,35,.62);
}
html[data-theme="dark"] .phone-verification-heading{
  color:#eef8fa;
}
html[data-theme="dark"] .verification-status.is-unverified{
  color:#ffc4a8;
  background:#43291f;
}
html[data-theme="dark"] .verification-status.is-sent{
  color:#a9e5f7;
  background:#153746;
}
html[data-theme="dark"] .verification-status.is-verified{
  color:#9ee6c3;
  background:#153b2d;
}
html[data-theme="dark"] .verification-action.secondary{
  color:#bcefed;
  border-color:#285565;
  background:#12323a;
}
html[data-theme="dark"] .school-data-section{
  border-color:#276f78;
  background:linear-gradient(145deg,#0d202b,#102b31);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}
html[data-theme="dark"] .school-data-heading h2{
  color:#eef8fa;
}
html[data-theme="dark"] .report-preview-section{
  border-color:#244451;
  background:#0d202a;
}
html[data-theme="dark"] .contact-section-heading h2{
  color:#eef8fa;
}
html[data-theme="dark"] .registration-consent{
  border-color:#254959;
  color:#d7e8ec;
  background:#0d202a;
}
html[data-theme="dark"] .preview{
  border-color:#276f78;
}
html[data-theme="dark"] .guest-btn{
  color:#d8e8ec;
  background:#152b37;
}
html[data-theme="dark"] .stored-school-card,
html[data-theme="dark"] .empty-school-state{
  border-color:#30274a;
  background:linear-gradient(145deg,#111e2b,#181a2d);
}
html[data-theme="dark"] .stored-school-heading h2,
html[data-theme="dark"] .stored-school-details dd{
  color:#f1edf9;
}
html[data-theme="dark"] .stored-school-details>div{
  background:rgba(114,88,164,.13);
}
html[data-theme="dark"] .text-action{
  color:#c9c1dd;
}