/* Student authentication — mobile-first, isolated from student-select.php. */
body.student-view.portal-auth{
  --auth-brand:#0b9184;
  --auth-brand-dark:#08796f;
  --auth-ink:#17353a;
  --auth-muted:#7f9295;
  --auth-field:#f4f7f7;
  --auth-border:#e2eaea;
  --auth-ease:cubic-bezier(.22,1,.36,1);
  min-height:100%;
  background:linear-gradient(180deg,#f8fbfa 0%,#f3f7f6 100%);
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

body.student-view.portal-auth::before,
body.student-view.portal-auth::after{display:none!important}

body.student-view.portal-auth .topbar{
  top:max(13px,env(safe-area-inset-top));
  inset-inline:14px;
  width:auto;
  padding:0;
  transform:none;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#91a0a2;
  font-size:11.5px;
  font-weight:700;
}

body.student-view.portal-auth .wrapper{
  min-height:100svh;
  padding:58px 16px 24px;
  display:grid;
  place-items:center;
}

body.student-view.portal-auth .login-card{
  width:min(424px,100%);
  border:1px solid #e4ecea;
  border-radius:27px;
  background:#fff;
  box-shadow:0 22px 52px rgba(17,57,58,.09),0 3px 10px rgba(17,57,58,.035);
  overflow:hidden;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.student-view.portal-auth .login-card::before{display:none}

body.student-view.portal-auth .login-head{
  padding:27px 22px 23px;
  background:linear-gradient(135deg,#0ba596 0%,#0a9184 58%,#087d73 100%);
  text-align:center;
}
body.student-view.portal-auth .login-head::before,
body.student-view.portal-auth .login-head::after{display:none}
body.student-view.portal-auth .login-head h1{
  margin:0;
  font-size:27px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:0;
}
body.student-view.portal-auth .portal-subtitle{
  margin:6px 0 0;
  color:rgba(255,255,255,.82);
  font-size:12.5px;
  font-weight:700;
}

body.student-view.portal-auth .login-body{
  display:grid;
  gap:16px;
  padding:19px 18px 20px;
}

/* Quiet tabs + one real sliding indicator. */
body.student-view.portal-auth .portal-mode-tabs{
  --indicator-x:0%;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:0 0 2px;
  padding:0 0 9px;
  border:0;
  border-bottom:1px solid #e7eeee;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.student-view.portal-auth .portal-mode-tabs[data-active-mode="activate"]{--indicator-x:-100%}
body.student-view.portal-auth .portal-mode-indicator{
  position:absolute;
  z-index:0;
  right:0;
  bottom:-1px;
  width:50%;
  height:3px;
  transform:translate3d(var(--indicator-x),0,0);
  transition:transform .36s var(--auth-ease);
  will-change:transform;
  pointer-events:none;
}
body.student-view.portal-auth .portal-mode-indicator::after{
  content:"";
  display:block;
  width:58%;
  height:100%;
  margin-inline:auto;
  border-radius:999px;
  background:var(--auth-brand);
}
body.student-view.portal-auth .portal-mode-tab{
  position:relative;
  z-index:1;
  min-height:41px;
  padding:0 8px;
  border:0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  color:#8a999b;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  touch-action:manipulation;
  transition:color .24s ease,transform .18s ease;
}
body.student-view.portal-auth .portal-mode-tab:hover{color:#607679}
body.student-view.portal-auth .portal-mode-tab:active{transform:scale(.985)}
body.student-view.portal-auth .portal-mode-tab.active{color:#1d4145!important}
body.student-view.portal-auth .portal-mode-tab::before,
body.student-view.portal-auth .portal-mode-tab::after{display:none!important}

/* Form stage is height-animated by JS; only transform/opacity are composited. */
body.student-view.portal-auth .portal-form-stage{
  position:relative;
  width:100%;
  overflow:hidden;
  contain:layout;
  transition:height .38s var(--auth-ease);
}
body.student-view.portal-auth .portal-form-stage.is-switching{will-change:height}
body.student-view.portal-auth .portal-form{
  display:grid;
  gap:13px;
  width:100%;
  margin:0!important;
  max-height:none!important;
  overflow:visible!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  transition:none!important;
}
body.student-view.portal-auth .portal-form.hidden{display:none!important}
body.student-view.portal-auth .portal-form.is-mode-layer{
  position:absolute!important;
  inset:0 0 auto 0!important;
  width:100%!important;
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.student-view.portal-auth .portal-form.is-mode-outgoing{
  opacity:0!important;
  transform:translate3d(0,-7px,0)!important;
  transition:opacity .20s ease,transform .28s var(--auth-ease)!important;
  pointer-events:none!important;
}
body.student-view.portal-auth .portal-form.is-mode-incoming{
  opacity:0!important;
  transform:translate3d(0,9px,0)!important;
  pointer-events:none!important;
}
body.student-view.portal-auth .portal-form.is-mode-incoming.is-mode-visible{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  transition:opacity .28s .045s ease,transform .34s .025s var(--auth-ease)!important;
}

/* Hints are text, not extra cards. */
body.student-view.portal-auth .portal-first-time,
body.student-view.portal-auth .portal-security-note{
  margin:0;
  padding:0 3px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#87999b;
  text-align:center;
  font-size:11.5px;
  line-height:1.65;
  font-weight:700;
}
body.student-view.portal-auth .portal-prefill-note{
  color:#587773;
  font-size:11.8px;
}

/* Modern flat fields: icon + placeholder only; labels remain accessible but invisible. */
body.student-view.portal-auth .field{
  position:relative;
  display:grid;
  grid-template-columns:25px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:60px;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:18px;
  background:var(--auth-field);
  box-shadow:none;
  transform:none;
  transition:background .20s ease,border-color .20s ease,box-shadow .20s ease;
}
body.student-view.portal-auth .field::after{display:none}
body.student-view.portal-auth .field:hover{border-color:#e1e9e8;box-shadow:none}
body.student-view.portal-auth .field:focus-within{
  border-color:#b9dcd7;
  background:#fff;
  box-shadow:0 0 0 4px rgba(11,145,132,.07);
  transform:none;
}
body.student-view.portal-auth .field-copy{
  min-width:0;
  display:block;
}
body.student-view.portal-auth .field-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
body.student-view.portal-auth .fi,
body.student-view.portal-auth .field:focus-within .fi{
  width:25px;
  min-width:25px;
  height:25px;
  padding:0;
  border:0!important;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  color:#849a9c;
  display:grid;
  place-items:center;
  align-self:center;
  transition:color .20s ease;
}
body.student-view.portal-auth .field:focus-within .fi{color:var(--auth-brand)}
body.student-view.portal-auth .fi-icon{
  display:block;
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.student-view.portal-auth .in{
  display:block;
  width:100%;
  height:38px;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--auth-ink);
  font:800 16.5px/38px 'Tajawal',system-ui,sans-serif;
  letter-spacing:0;
  caret-color:var(--auth-brand);
}
body.student-view.portal-auth .in::placeholder{
  color:#9fafb1;
  opacity:1;
  font-weight:700;
}

body.student-view.portal-auth .error{
  display:block!important;
  max-height:0;
  margin:0;
  padding:0 12px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:13px;
  background:#fff7f7;
  color:#cc5555;
  text-align:center;
  font-size:12px;
  line-height:1.55;
  font-weight:800;
  opacity:0;
  transform:translate3d(0,-4px,0);
  visibility:hidden;
  transition:max-height .25s var(--auth-ease),padding .25s var(--auth-ease),opacity .20s ease,transform .25s var(--auth-ease),border-color .20s ease;
}
body.student-view.portal-auth .error.is-visible{
  max-height:92px;
  padding:10px 12px;
  border-color:#f2dcdc;
  opacity:1;
  transform:translate3d(0,0,0);
  visibility:visible;
}

body.student-view.portal-auth .btn-primary{
  width:100%;
  height:54px;
  margin-top:2px;
  padding:0 16px;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,#0ca596 0%,#0a9184 60%,#087e74 100%);
  color:#fff;
  box-shadow:0 10px 20px rgba(10,145,132,.18);
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .16s ease,box-shadow .20s ease,filter .20s ease,opacity .20s ease;
}
body.student-view.portal-auth .btn-primary:hover{filter:brightness(1.015)}
body.student-view.portal-auth .btn-primary:active{
  transform:scale(.992);
  box-shadow:0 6px 14px rgba(10,145,132,.15);
}
body.student-view.portal-auth .btn-primary:disabled{
  opacity:.68;
  cursor:wait;
  transform:none;
}

/* Keep the success overlay lightweight on phones. */
body.student-view.portal-auth .cd-overlay{background:rgba(13,38,41,.13)}
body.student-view.portal-auth .cd-card{
  border-radius:22px;
  border-color:#e1eae8;
  box-shadow:0 20px 45px rgba(13,45,46,.14);
}
body.student-view.portal-auth .cd-ring{background:conic-gradient(var(--auth-brand) calc(var(--p)*1%),#e8efee 0)}

@media (max-width:480px){
  body.student-view.portal-auth{overflow-x:hidden}
  body.student-view.portal-auth .wrapper{
    min-height:100svh;
    place-items:start center;
    padding:max(52px,calc(env(safe-area-inset-top) + 42px)) 12px max(18px,env(safe-area-inset-bottom));
  }
  body.student-view.portal-auth .login-card{
    width:100%;
    border-radius:24px;
    box-shadow:0 16px 38px rgba(17,57,58,.08),0 2px 8px rgba(17,57,58,.025);
  }
  body.student-view.portal-auth .login-head{padding:24px 18px 20px}
  body.student-view.portal-auth .login-head h1{font-size:25px}
  body.student-view.portal-auth .portal-subtitle{font-size:12px}
  body.student-view.portal-auth .login-body{padding:17px 14px 18px;gap:14px}
  body.student-view.portal-auth .portal-mode-tab{min-height:40px;font-size:13.6px}
  body.student-view.portal-auth .portal-mode-indicator::after{width:62%}
  body.student-view.portal-auth .portal-form{gap:12px}
  body.student-view.portal-auth .field{
    min-height:58px;
    padding:9px 12px;
    border-radius:17px;
    grid-template-columns:23px minmax(0,1fr);
    gap:9px;
  }
  body.student-view.portal-auth .fi,
  body.student-view.portal-auth .field:focus-within .fi{width:23px;min-width:23px;height:23px}
  body.student-view.portal-auth .fi-icon{width:20px;height:20px}
  body.student-view.portal-auth .in{height:38px;font-size:16px;line-height:38px}
  body.student-view.portal-auth .btn-primary{height:52px;border-radius:15px;font-size:17.5px}
  body.student-view.portal-auth .portal-first-time,
  body.student-view.portal-auth .portal-security-note{font-size:11.2px}
}

@media (max-width:360px){
  body.student-view.portal-auth .wrapper{padding-inline:9px}
  body.student-view.portal-auth .login-head{padding:22px 15px 18px}
  body.student-view.portal-auth .login-body{padding:15px 11px 16px}
  body.student-view.portal-auth .field{padding-inline:11px}
}

@media (prefers-reduced-motion:reduce){
  body.student-view.portal-auth .portal-mode-indicator,
  body.student-view.portal-auth .portal-form-stage,
  body.student-view.portal-auth .portal-form.is-mode-layer,
  body.student-view.portal-auth .portal-mode-tab,
  body.student-view.portal-auth .field,
  body.student-view.portal-auth .btn-primary{transition:none!important}
}

/* =========================================================
   Student auth — richer shell / teacher-header alignment
   2026-08-20
   ========================================================= */
body.student-view.portal-auth{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(680px 390px at 90% 12%,rgba(11,157,143,.075),transparent 62%),
    radial-gradient(620px 420px at 5% 88%,rgba(22,178,163,.06),transparent 64%),
    linear-gradient(180deg,#f8fbfa 0%,#f2f7f6 100%);
}

/* Same visual language as the teacher header, centered student-points mark. */
body.student-view.portal-auth .portal-site-header{
  position:sticky;
  top:0;
  z-index:40;
  flex:0 0 auto;
  isolation:isolate;
  color:#fff;
  background:#056d67;
  border:0;
  box-shadow:0 8px 22px rgba(3,79,73,.15);
}
body.student-view.portal-auth .portal-site-header-inner{
  width:min(1480px,100%);
  min-height:calc(82px + env(safe-area-inset-top));
  margin:auto;
  padding:calc(12px + env(safe-area-inset-top)) 24px 12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:14px;
  direction:rtl;
}
body.student-view.portal-auth .portal-header-brand{
  grid-column:2;
  display:grid;
  place-items:center;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
body.student-view.portal-auth .portal-header-logo{
  display:grid;
  place-items:center;
  width:auto;
  height:auto;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.student-view.portal-auth .portal-header-logo img{
  display:block;
  width:54px;
  height:54px;
  object-fit:contain;
  object-position:center;
}
body.student-view.portal-auth .portal-header-date{
  grid-column:1;
  justify-self:end;
  position:static!important;
  inset:auto!important;
  width:auto!important;
  min-width:0;
  padding:0!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:#bfe2de!important;
  font-size:11px!important;
  font-weight:700!important;
  text-align:left;
  white-space:nowrap;
}
body.student-view.portal-auth .portal-header-balance{
  grid-column:3;
  display:block;
}

body.student-view.portal-auth .wrapper{
  flex:1 0 auto;
  min-height:0;
  width:100%;
  padding:34px 22px 32px;
  display:grid;
  place-items:center;
}

body.student-view.portal-auth .login-card{
  width:min(438px,100%);
  border-color:#dfe9e7;
  box-shadow:0 24px 58px rgba(17,57,58,.095),0 3px 11px rgba(17,57,58,.035);
}

/* Professional geometric pattern — subtle enough to keep the title dominant. */
body.student-view.portal-auth .login-head{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:31px 24px 27px;
  background:
    linear-gradient(135deg,rgba(13,178,162,.98) 0%,rgba(10,145,132,.99) 56%,rgba(5,109,103,1) 100%);
}
body.student-view.portal-auth .login-head::before{
  content:""!important;
  display:block!important;
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.58;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.20) 1.15px,transparent 1.3px),
    linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 100%);
  background-size:19px 19px,38px 38px;
  mask-image:linear-gradient(105deg,rgba(0,0,0,.25),#000 50%,rgba(0,0,0,.45));
  -webkit-mask-image:linear-gradient(105deg,rgba(0,0,0,.25),#000 50%,rgba(0,0,0,.45));
}
body.student-view.portal-auth .login-head::after{
  content:""!important;
  display:block!important;
  position:absolute;
  z-index:-1;
  width:190px;
  height:190px;
  left:-68px;
  top:-104px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  box-shadow:0 0 0 32px rgba(255,255,255,.025),0 0 0 66px rgba(255,255,255,.018);
  pointer-events:none;
}
body.student-view.portal-auth .login-head h1,
body.student-view.portal-auth .portal-subtitle{position:relative;z-index:1}

body.student-view.portal-auth .login-body{
  padding:23px 21px 24px;
  gap:18px;
}
body.student-view.portal-auth .portal-mode-tabs{margin-inline:2px}
body.student-view.portal-auth .portal-form{gap:14px}
body.student-view.portal-auth .field{
  min-height:62px;
  padding:10px 15px;
}
body.student-view.portal-auth .btn-primary{margin-top:4px}

body.student-view.portal-auth .portal-footer{
  flex:0 0 auto;
  width:100%;
  padding:4px 18px max(22px,calc(14px + env(safe-area-inset-bottom)));
  text-align:center;
}
body.student-view.portal-auth .portal-footer p{
  width:min(680px,100%);
  margin:0 auto;
  color:#8a999b;
  font-size:11.5px;
  line-height:1.8;
  font-weight:700;
}

@media (max-width:480px){
  body.student-view.portal-auth .portal-site-header-inner{
    min-height:calc(74px + env(safe-area-inset-top));
    padding:calc(9px + env(safe-area-inset-top)) 16px 9px;
  }
  body.student-view.portal-auth .portal-header-logo{
    width:auto;
    height:auto;
    border-radius:0;
  }
  body.student-view.portal-auth .portal-header-logo img{width:46px;height:46px}
  body.student-view.portal-auth .portal-header-date{display:none!important}
  body.student-view.portal-auth .wrapper{
    min-height:0;
    place-items:start center;
    padding:28px 18px 25px;
  }
  body.student-view.portal-auth .login-card{
    width:100%;
    border-radius:25px;
  }
  body.student-view.portal-auth .login-head{padding:27px 20px 23px}
  body.student-view.portal-auth .login-body{padding:20px 18px 22px;gap:16px}
  body.student-view.portal-auth .portal-form{gap:13px}
  body.student-view.portal-auth .field{min-height:59px;padding:9px 13px}
  body.student-view.portal-auth .portal-footer{padding-inline:18px;padding-bottom:max(19px,calc(11px + env(safe-area-inset-bottom)))}
  body.student-view.portal-auth .portal-footer p{font-size:11px}
}

@media (max-width:360px){
  body.student-view.portal-auth .portal-site-header-inner{padding-inline:12px}
  body.student-view.portal-auth .wrapper{padding:23px 14px 22px}
  body.student-view.portal-auth .login-head{padding:25px 17px 21px}
  body.student-view.portal-auth .login-body{padding:18px 15px 20px}
}

/* =========================================================
   Account activation success — in-card motion scene
   2026-08-20
   ========================================================= */
body.student-view.portal-auth .activation-success{
  display:grid;
  justify-items:center;
  gap:13px;
  width:100%;
  padding:8px 4px 3px;
  text-align:center;
  opacity:1;
  transform:none;
}
body.student-view.portal-auth .activation-success.hidden{display:none!important}
body.student-view.portal-auth .activation-success.is-success-layer{
  position:absolute!important;
  inset:0 0 auto 0!important;
  width:100%!important;
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.student-view.portal-auth .activation-success.is-success-incoming{
  opacity:0;
  transform:translate3d(0,10px,0) scale(.988);
  pointer-events:none;
}
body.student-view.portal-auth .activation-success.is-success-incoming.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transition:opacity .31s .04s ease,transform .42s var(--auth-ease);
}
body.student-view.portal-auth .activation-success.is-success-outgoing{
  opacity:0!important;
  transform:translate3d(0,-8px,0) scale(.992)!important;
  transition:opacity .20s ease,transform .30s var(--auth-ease)!important;
  pointer-events:none!important;
}

body.student-view.portal-auth .activation-success-visual{
  position:relative;
  width:128px;
  height:128px;
  display:grid;
  place-items:center;
  margin:0 auto 1px;
  isolation:isolate;
}
body.student-view.portal-auth .activation-success-mark{
  position:relative;
  z-index:3;
  width:116px;
  height:116px;
  overflow:visible;
  filter:drop-shadow(0 11px 18px rgba(8,126,116,.16));
}
body.student-view.portal-auth .activation-success-disc{
  fill:#0b9b8c;
  transform-origin:60px 60px;
  transform:scale(.72);
  opacity:0;
}
body.student-view.portal-auth .activation-success-ring{
  fill:none;
  stroke:rgba(255,255,255,.42);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:271;
  stroke-dashoffset:271;
  transform:rotate(-90deg);
  transform-origin:60px 60px;
}
body.student-view.portal-auth .activation-success-check{
  fill:none;
  stroke:#fff;
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:72;
  stroke-dashoffset:72;
}
body.student-view.portal-auth .activation-success-halo{
  position:absolute;
  z-index:1;
  inset:50%;
  width:94px;
  height:94px;
  margin:-47px;
  border:1px solid rgba(11,155,140,.24);
  border-radius:50%;
  opacity:0;
  transform:scale(.76);
  pointer-events:none;
}
body.student-view.portal-auth .activation-success-halo.halo-two{
  width:116px;
  height:116px;
  margin:-58px;
  border-color:rgba(11,155,140,.13);
}
body.student-view.portal-auth .activation-success-spark{
  position:absolute;
  z-index:2;
  width:6px;
  height:6px;
  border-radius:999px;
  background:#16ad9d;
  box-shadow:0 2px 5px rgba(11,145,132,.12);
  opacity:0;
  transform:scale(.35);
}
body.student-view.portal-auth .activation-success-spark::after{
  content:"";
  position:absolute;
  inset:-3px;
  border:1px solid rgba(22,173,157,.22);
  border-radius:inherit;
}
body.student-view.portal-auth .spark-one{top:8px;left:31px;--spark-x:-8px;--spark-y:-7px;--spark-delay:.42s}
body.student-view.portal-auth .spark-two{top:22px;right:12px;--spark-x:9px;--spark-y:-5px;--spark-delay:.49s}
body.student-view.portal-auth .spark-three{top:70px;right:2px;--spark-x:11px;--spark-y:2px;--spark-delay:.57s}
body.student-view.portal-auth .spark-four{bottom:6px;right:34px;--spark-x:7px;--spark-y:8px;--spark-delay:.64s}
body.student-view.portal-auth .spark-five{bottom:22px;left:7px;--spark-x:-9px;--spark-y:6px;--spark-delay:.53s}
body.student-view.portal-auth .spark-six{top:53px;left:0;--spark-x:-11px;--spark-y:-1px;--spark-delay:.61s}

body.student-view.portal-auth .activation-success-copy{
  display:grid;
  gap:5px;
  justify-items:center;
  opacity:0;
  transform:translate3d(0,8px,0);
}
body.student-view.portal-auth .activation-success-copy h2{
  margin:0;
  color:#183f42;
  font-size:21.5px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.15px;
}
body.student-view.portal-auth .activation-success-copy p{
  margin:0;
  color:#788d8f;
  font-size:12.5px;
  line-height:1.7;
  font-weight:700;
}
body.student-view.portal-auth .activation-login-button{
  margin-top:4px!important;
  opacity:0;
  transform:translate3d(0,8px,0);
}
body.student-view.portal-auth .activation-auto-note{
  margin:-3px 0 0;
  color:#9aabab;
  font-size:10.8px;
  line-height:1.6;
  font-weight:700;
  opacity:0;
  transform:translate3d(0,5px,0);
}

body.student-view.portal-auth .activation-success.is-visible .activation-success-disc{
  animation:activationDiscIn .62s .10s var(--auth-ease) forwards;
}
body.student-view.portal-auth .activation-success.is-visible .activation-success-ring{
  animation:activationRingDraw .78s .18s var(--auth-ease) forwards;
}
body.student-view.portal-auth .activation-success.is-visible .activation-success-check{
  animation:activationCheckDraw .58s .48s var(--auth-ease) forwards;
}
body.student-view.portal-auth .activation-success.is-visible .halo-one{
  animation:activationHalo .92s .20s var(--auth-ease) forwards;
}
body.student-view.portal-auth .activation-success.is-visible .halo-two{
  animation:activationHalo .98s .30s var(--auth-ease) forwards;
}
body.student-view.portal-auth .activation-success.is-visible .activation-success-spark{
  animation:activationSpark .64s var(--spark-delay) var(--auth-ease) forwards;
}
body.student-view.portal-auth .activation-success.is-visible .activation-success-copy{
  animation:activationCopyIn .46s .66s var(--auth-ease) forwards;
}
body.student-view.portal-auth .activation-success.is-visible .activation-login-button{
  animation:activationActionIn .46s .80s var(--auth-ease) forwards;
}
body.student-view.portal-auth .activation-success.is-visible .activation-auto-note{
  animation:activationActionIn .42s .94s var(--auth-ease) forwards;
}

@keyframes activationDiscIn{
  0%{opacity:0;transform:scale(.72)}
  62%{opacity:1;transform:scale(1.045)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes activationRingDraw{
  0%{stroke-dashoffset:271;opacity:.15}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes activationCheckDraw{
  0%{stroke-dashoffset:72;opacity:.15}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes activationHalo{
  0%{opacity:0;transform:scale(.74)}
  42%{opacity:.7}
  100%{opacity:0;transform:scale(1.28)}
}
@keyframes activationSpark{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.35)}
  38%{opacity:1;transform:translate3d(calc(var(--spark-x) * .45),calc(var(--spark-y) * .45),0) scale(1)}
  100%{opacity:0;transform:translate3d(var(--spark-x),var(--spark-y),0) scale(.72)}
}
@keyframes activationCopyIn{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes activationActionIn{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@media (max-width:480px){
  body.student-view.portal-auth .activation-success{
    gap:12px;
    padding:6px 2px 1px;
  }
  body.student-view.portal-auth .activation-success-visual{width:118px;height:118px}
  body.student-view.portal-auth .activation-success-mark{width:108px;height:108px}
  body.student-view.portal-auth .activation-success-copy h2{font-size:20.5px}
  body.student-view.portal-auth .activation-success-copy p{font-size:12px}
}

@media (max-width:360px){
  body.student-view.portal-auth .activation-success-visual{width:110px;height:110px}
  body.student-view.portal-auth .activation-success-mark{width:102px;height:102px}
  body.student-view.portal-auth .activation-success-copy h2{font-size:19.5px}
}

@media (prefers-reduced-motion:reduce){
  body.student-view.portal-auth .activation-success,
  body.student-view.portal-auth .activation-success *{
    animation:none!important;
    transition:none!important;
  }
  body.student-view.portal-auth .activation-success-disc{opacity:1!important;transform:none!important}
  body.student-view.portal-auth .activation-success-ring,
  body.student-view.portal-auth .activation-success-check{stroke-dashoffset:0!important;opacity:1!important}
  body.student-view.portal-auth .activation-success-copy,
  body.student-view.portal-auth .activation-login-button,
  body.student-view.portal-auth .activation-auto-note{opacity:1!important;transform:none!important}
  body.student-view.portal-auth .activation-success-halo,
  body.student-view.portal-auth .activation-success-spark{display:none!important}
}

/* =========================================================
   Student login -> account transition
   Full-screen, GPU-friendly and intentionally isolated here.
   ========================================================= */
body.student-view.portal-auth .login-transition{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  place-items:center;
  overflow:hidden;
  padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 42%,rgba(18,174,158,.095) 0,rgba(18,174,158,.035) 22%,transparent 48%),
    linear-gradient(180deg,#f8fcfb 0%,#f4f9f8 100%);
  opacity:0;
  visibility:hidden;
  transition:opacity .34s ease,visibility 0s linear .34s;
  -webkit-tap-highlight-color:transparent;
}
body.student-view.portal-auth .login-transition:not(.hidden){display:grid}
body.student-view.portal-auth .login-transition::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background-image:radial-gradient(circle,rgba(15,122,113,.11) 1px,transparent 1.25px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 72%,transparent 100%);
}
body.student-view.portal-auth .login-transition.is-visible{
  opacity:1;
  visibility:visible;
  transition:opacity .34s ease,visibility 0s;
}
body.student-view.portal-auth .login-transition-scene{
  position:relative;
  z-index:1;
  width:min(320px,88vw);
  display:grid;
  justify-items:center;
  gap:18px;
  text-align:center;
  transform:translate3d(0,9px,0) scale(.985);
  opacity:0;
  transition:opacity .38s .08s ease,transform .62s .06s var(--auth-ease);
}
body.student-view.portal-auth .login-transition.is-visible .login-transition-scene{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
body.student-view.portal-auth .login-transition-loader{
  position:relative;
  width:142px;
  height:142px;
  display:grid;
  place-items:center;
  isolation:isolate;
}
body.student-view.portal-auth .login-transition-ring{
  position:absolute;
  border-radius:50%;
  will-change:transform;
}
body.student-view.portal-auth .login-transition-ring.ring-outer{
  inset:3px;
  border:1px solid rgba(10,151,137,.12);
  box-shadow:0 0 0 7px rgba(10,151,137,.025);
  animation:studentLoaderBreath 2.15s ease-in-out infinite;
}
body.student-view.portal-auth .login-transition-ring.ring-middle{
  inset:16px;
  border:3px solid rgba(12,160,146,.12);
  border-top-color:#0aa08f;
  border-right-color:rgba(10,160,143,.54);
  animation:studentLoaderSpin 1.08s linear infinite;
}
body.student-view.portal-auth .login-transition-ring.ring-inner{
  inset:29px;
  border:2px solid rgba(8,137,126,.10);
  border-bottom-color:rgba(8,137,126,.58);
  animation:studentLoaderSpinReverse 1.58s linear infinite;
}
body.student-view.portal-auth .login-transition-core{
  position:relative;
  z-index:2;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 13px 32px rgba(10,85,82,.09),inset 0 0 0 1px rgba(10,141,130,.06);
  animation:studentLoaderCore 1.9s ease-in-out infinite;
}
body.student-view.portal-auth .login-transition-core img{
  display:block;
  width:45px;
  height:45px;
  object-fit:contain;
}
body.student-view.portal-auth .login-transition-copy{
  display:grid;
  justify-items:center;
  gap:5px;
}
body.student-view.portal-auth .login-transition-copy strong{
  color:#1b4546;
  font-size:20px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-.15px;
}
body.student-view.portal-auth .login-transition-copy span{
  color:#829596;
  font-size:12.5px;
  line-height:1.6;
  font-weight:700;
}
body.student-view.portal-auth .login-transition-progress{
  position:relative;
  width:112px;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(8,135,124,.08);
}
body.student-view.portal-auth .login-transition-progress span{
  position:absolute;
  top:0;
  bottom:0;
  width:42%;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(12,163,148,0),#0ca394 38%,#24bcab 70%,rgba(36,188,171,0));
  animation:studentLoaderProgress 1.18s ease-in-out infinite;
}
html.student-login-transitioning,
body.student-login-transitioning{
  overflow:hidden!important;
  overscroll-behavior:none;
}

@keyframes studentLoaderSpin{to{transform:rotate(360deg)}}
@keyframes studentLoaderSpinReverse{to{transform:rotate(-360deg)}}
@keyframes studentLoaderBreath{
  0%,100%{transform:scale(.965);opacity:.58}
  50%{transform:scale(1.025);opacity:1}
}
@keyframes studentLoaderCore{
  0%,100%{transform:scale(.965)}
  50%{transform:scale(1.035)}
}
@keyframes studentLoaderProgress{
  0%{left:-45%;opacity:.28}
  45%{opacity:1}
  100%{left:103%;opacity:.32}
}

@media (max-width:480px){
  body.student-view.portal-auth .login-transition-loader{width:132px;height:132px}
  body.student-view.portal-auth .login-transition-core{width:60px;height:60px}
  body.student-view.portal-auth .login-transition-core img{width:42px;height:42px}
  body.student-view.portal-auth .login-transition-copy strong{font-size:19px}
  body.student-view.portal-auth .login-transition-copy span{font-size:12px}
}
@media (max-width:360px){
  body.student-view.portal-auth .login-transition-loader{width:124px;height:124px}
  body.student-view.portal-auth .login-transition-scene{gap:16px}
  body.student-view.portal-auth .login-transition-copy strong{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  body.student-view.portal-auth .login-transition,
  body.student-view.portal-auth .login-transition-scene{
    transition:none!important;
  }
  body.student-view.portal-auth .login-transition-ring,
  body.student-view.portal-auth .login-transition-core,
  body.student-view.portal-auth .login-transition-progress span{
    animation:none!important;
  }
  body.student-view.portal-auth .login-transition-ring.ring-middle{border-top-color:#0aa08f}
  body.student-view.portal-auth .login-transition-ring.ring-inner{border-bottom-color:rgba(8,137,126,.58)}
  body.student-view.portal-auth .login-transition-progress span{left:29%;opacity:.85}
}