.portal-subtitle{margin:4px 0 0;color:#8a979d;font-size:12px;font-weight:700}.login-body form{display:grid;gap:12px}.portal-security-note{margin:0;text-align:center;color:#8a979d;font-size:11.5px;line-height:1.7}.error.is-visible{display:block}.field:focus-within{border-color:rgba(0,157,142,.55);box-shadow:0 0 0 4px rgba(0,157,142,.08)}#pinField .fi{font-size:18px}.btn[disabled]{opacity:.7;cursor:wait}

/* تفعيل الطالب برقم الطالب بدل الهوية */
.portal-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;background:#f3f7f7;border-radius:12px;padding:4px;margin-bottom:14px}
.portal-mode-tab{border:0;background:transparent;border-radius:9px;padding:9px 8px;font-family:'Tajawal',sans-serif;font-weight:800;color:#7b8a89;cursor:pointer;transition:.18s ease}
.portal-mode-tab.active{background:#fff;color:#087c6e;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.portal-form.hidden{display:none!important}.portal-form{display:grid;gap:12px}.portal-first-time{background:#f2faf8;color:#58716e;border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.7;text-align:center}


/* ===== Student portal refresh ===== */
:root{
  --portal-bg:#f4f8f8;
  --portal-surface:#ffffff;
  --portal-surface-soft:#f8fbfb;
  --portal-ink:#143238;
  --portal-muted:#72868b;
  --portal-border:#deece8;
  --portal-brand:#0b8f82;
  --portal-brand-2:#0aa091;
}
body.student-view{
  background:
    radial-gradient(880px 520px at 8% 0%, rgba(13,160,145,.11), transparent 58%),
    radial-gradient(720px 500px at 100% 100%, rgba(30,186,167,.09), transparent 55%),
    linear-gradient(180deg,#f8fbfb 0%,#f2f7f7 100%);
  color:var(--portal-ink);
}
body.student-view::before,
body.student-view::after{
  content:"";position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(8px);
}
body.student-view::before{width:220px;height:220px;top:-70px;right:-50px;background:rgba(10,160,145,.08)}
body.student-view::after{width:180px;height:180px;left:-50px;bottom:40px;background:rgba(0,191,165,.07)}

body.student-view .topbar{
  top:max(14px, env(safe-area-inset-top));
  inset-inline:50%;
  transform:translateX(50%);
  width:max-content;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(215,232,228,.95);
  box-shadow:0 10px 22px rgba(16,48,53,.06);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#7b8f93;
  font-size:12px;
  font-weight:800;
}
body.student-view .wrapper{
  position:relative;
  z-index:1;
  min-height:100dvh;
  padding:76px 18px 26px;
}
body.student-view .login-card{
  position:relative;
  width:min(452px,94vw);
  border:1px solid rgba(220,236,232,.96);
  border-radius:30px;
  background:rgba(255,255,255,.94);
  box-shadow:0 28px 70px rgba(11,45,47,.12),0 3px 14px rgba(12,53,57,.05);
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body.student-view .login-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;
  background:linear-gradient(90deg,#0bb19f 0%,#0b8f82 55%,#07786e 100%);
}
body.student-view .login-head{
  position:relative;
  overflow:hidden;
  padding:28px 22px 22px;
  background:linear-gradient(145deg,#0da495 0%,#0a8f82 58%,#08796f 100%);
}
body.student-view .login-head::before{
  content:"";position:absolute;inset:auto auto -38px -16px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.08);
}
body.student-view .login-head::after{
  content:"";position:absolute;top:-34px;left:-24px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.10);
}
body.student-view .login-head h1{
  position:relative;
  margin:0;
  font-size:28px;
  font-weight:900;
  letter-spacing:.2px;
}
body.student-view .portal-subtitle{
  position:relative;
  margin:7px 0 0;
  color:rgba(255,255,255,.88);
  font-size:13.5px;
  font-weight:700;
}
body.student-view .login-body{
  padding:20px 18px 22px;
  display:grid;
  gap:14px;
}
body.student-view .portal-mode-tabs{
  background:#eff7f6;
  border:1px solid #e3efec;
  border-radius:16px;
  padding:5px;
  gap:6px;
  margin:0;
}
body.student-view .portal-mode-tab{
  min-height:44px;
  border-radius:12px;
  font-size:13.5px;
  font-weight:900;
  color:#74888b;
}
body.student-view .portal-mode-tab.active{
  background:linear-gradient(180deg,#ffffff 0%,#fbfefe 100%);
  color:#0a8377;
  box-shadow:0 6px 16px rgba(11,74,72,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
body.student-view .portal-form{gap:13px}
body.student-view .portal-first-time,
body.student-view .portal-security-note{
  border-radius:14px;
  padding:11px 13px;
  text-align:center;
  line-height:1.75;
}
body.student-view .portal-first-time{
  background:linear-gradient(180deg,#f2fbf9 0%,#edf8f6 100%);
  border:1px solid #daf0ea;
  color:#567471;
  font-size:12px;
  font-weight:700;
}
body.student-view .portal-security-note{
  margin:0;
  background:#fafdfd;
  border:1px dashed #dbeae6;
  color:#809295;
  font-size:11.3px;
}
body.student-view .field{
  min-height:58px;
  gap:12px;
  padding:10px 12px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%);
  border:1px solid #ddebe8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
body.student-view .field:focus-within{
  border-color:rgba(10,157,142,.52);
  box-shadow:0 0 0 4px rgba(10,157,142,.08), 0 8px 18px rgba(10,116,110,.05);
}
body.student-view .fi{
  width:40px;min-width:40px;height:40px;align-self:center;
  border-radius:12px;
  display:grid;place-items:center;
  background:#eff7f6;
  color:#83a1a0;
  font-size:18px;
}
body.student-view .in{
  font-size:17px;
  font-weight:800;
  color:#19353b;
  background:transparent;
}
body.student-view .in::placeholder{color:#a3b4b7;font-weight:700}
body.student-view .error{
  margin:2px 2px 0;
  padding:11px 13px;
  border-radius:13px;
  background:#fff3f3;
  border:1px solid #f0d6d6;
  color:#d14a4a;
  font-size:12px;
  font-weight:800;
}
body.student-view .btn{
  height:54px;
  border-radius:16px;
  font-weight:900;
}
body.student-view .btn-primary{
  margin-top:2px;
  font-size:19px;
  background:linear-gradient(135deg,#0db3a1 0%,#0a9486 55%,#087a71 100%);
  box-shadow:0 16px 28px rgba(10,160,145,.24), inset 0 -1px 0 rgba(255,255,255,.24);
}
body.student-view .btn-primary:hover{filter:saturate(1.03) brightness(1.01)}
body.student-view .btn-primary:active{transform:translateY(1px) scale(.995)}
body.student-view .cd-card{
  border-radius:24px;
  border-color:#deece8;
  box-shadow:0 22px 48px rgba(9,37,38,.16);
}
body.student-view .cd-ring{
  background:conic-gradient(var(--portal-brand) calc(var(--p)*1%), #e6efee 0);
}
body.student-view .cd-text{color:#547076;font-weight:700}

@media (max-width:480px){
  body.student-view .topbar{font-size:11px;padding:7px 13px}
  body.student-view .wrapper{padding:72px 14px 20px}
  body.student-view .login-card{width:min(100%,96vw);border-radius:26px}
  body.student-view .login-head{padding:25px 18px 20px}
  body.student-view .login-head h1{font-size:25px}
  body.student-view .portal-subtitle{font-size:12.6px}
  body.student-view .login-body{padding:18px 14px 18px;gap:12px}
  body.student-view .portal-mode-tab{min-height:42px;font-size:12.8px}
  body.student-view .field{min-height:56px;padding:10px 11px;border-radius:16px}
  body.student-view .fi{width:38px;min-width:38px;height:38px;border-radius:11px;font-size:17px}
  body.student-view .in{font-size:16.5px}
  body.student-view .btn{height:52px;border-radius:15px}
  body.student-view .btn-primary{font-size:18px}
}


/* ===== Login controls refinement ===== */
body.student-view .portal-mode-tabs{
  position:relative;
  background:linear-gradient(180deg,#f5faf9 0%,#eef6f5 100%);
  border:1px solid #dcecea;
  border-radius:18px;
  padding:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 10px 22px rgba(16,54,57,.04);
}
body.student-view .portal-mode-tab{
  position:relative;
  min-height:48px;
  border-radius:14px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.1px;
  color:#708588;
  background:transparent;
  transition:transform .16s ease, color .16s ease, background .16s ease, box-shadow .18s ease;
}
body.student-view .portal-mode-tab:hover{color:#496468}
body.student-view .portal-mode-tab.active{
  color:#fff;
  background:linear-gradient(135deg,#0eb1a0 0%,#0a9486 58%,#08786f 100%);
  box-shadow:0 12px 24px rgba(8,124,115,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
body.student-view .portal-mode-tab.active::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  pointer-events:none;
}

body.student-view .field{
  position:relative;
  min-height:62px;
  padding:10px 13px;
  gap:13px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfefe 100%);
  border:1px solid #d9ebe7;
  box-shadow:0 12px 22px rgba(14,53,56,.045), inset 0 1px 0 rgba(255,255,255,.96);
  transition:transform .16s ease, border-color .16s ease, box-shadow .18s ease, background .18s ease;
}
body.student-view .field:hover{
  border-color:#cfe4e0;
  box-shadow:0 14px 26px rgba(14,53,56,.055), inset 0 1px 0 rgba(255,255,255,.98);
}
body.student-view .field:focus-within{
  transform:translateY(-1px);
  border-color:rgba(10,157,142,.48);
  background:#fff;
  box-shadow:0 0 0 4px rgba(10,157,142,.08), 0 16px 28px rgba(10,116,110,.08), inset 0 1px 0 rgba(255,255,255,.98);
}
body.student-view .field::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.46);
}
body.student-view .fi{
  width:42px;
  min-width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(180deg,#f1fbf9 0%,#e7f6f2 100%);
  border:1px solid #dcefea;
  color:#77a29f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
body.student-view .field:focus-within .fi{
  background:linear-gradient(180deg,#ddf6f0 0%,#d4f0ea 100%);
  color:#0c8b7d;
  border-color:#c5e8e0;
}
body.student-view .in{
  font-size:17.5px;
  font-weight:900;
  letter-spacing:.1px;
  color:#18353a;
}
body.student-view .in::placeholder{
  color:#a4b6b8;
  font-weight:800;
}

@media (max-width:480px){
  body.student-view .portal-mode-tabs{border-radius:16px;padding:5px}
  body.student-view .portal-mode-tab{min-height:46px;font-size:13.4px;border-radius:12px}
  body.student-view .field{min-height:58px;padding:9px 11px;gap:11px;border-radius:18px}
  body.student-view .field::after{border-radius:18px}
  body.student-view .fi{width:40px;min-width:40px;height:40px;border-radius:13px}
  body.student-view .in{font-size:16.8px}
}


/* ===== Login controls calm version ===== */
body.student-view .portal-mode-tabs{
  background:linear-gradient(180deg,#f5f8f8 0%,#eef4f4 100%);
  border-color:#e0e8e8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94), 0 8px 18px rgba(16,54,57,.035);
}
body.student-view .portal-mode-tab{
  color:#718285;
  background:transparent;
}
body.student-view .portal-mode-tab.active{
  color:#214147;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdfd 100%);
  box-shadow:0 8px 18px rgba(15,44,47,.08), inset 0 1px 0 rgba(255,255,255,.98);
}
body.student-view .portal-mode-tab.active::before{
  content:"";
  position:absolute;
  right:16px;
  left:16px;
  bottom:7px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#0ea392 0%,#0b8b7f 100%);
  opacity:.9;
}
body.student-view .portal-mode-tab.active::after{
  display:none;
}
body.student-view .portal-mode-tab:hover{color:#4f666a}

body.student-view .field{
  background:linear-gradient(180deg,#ffffff 0%,#fcfefe 100%);
  border-color:#dfe8e9;
  box-shadow:0 10px 20px rgba(14,53,56,.04), inset 0 1px 0 rgba(255,255,255,.96);
}
body.student-view .field:hover{box-shadow:0 12px 22px rgba(14,53,56,.05), inset 0 1px 0 rgba(255,255,255,.98)}
body.student-view .fi{
  background:#f4f8f8;
  border-color:#e2ebeb;
  color:#7e9598;
}
body.student-view .field:focus-within .fi{
  background:#edf5f5;
  color:#0b867b;
  border-color:#d7e7e5;
}
body.student-view .fi-icon{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ===== Icon cleanup + portal form motion ===== */
body.student-view .fi{
  width:24px;
  min-width:24px;
  height:auto;
  border-radius:0;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0;
  display:grid;
  place-items:center;
  color:#7d9597;
}
body.student-view .field:focus-within .fi{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#0b867b;
}
body.student-view .fi-icon{
  width:22px;
  height:22px;
  stroke-width:2.1;
}
body.student-view .field{
  align-items:center;
  grid-template-columns:24px minmax(0,1fr);
}

body.student-view .portal-form{
  overflow:hidden;
  transform-origin:top center;
  max-height:0;
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  margin:0;
  transition:max-height .42s cubic-bezier(.22,.7,.25,1), opacity .24s ease, transform .36s cubic-bezier(.22,.7,.25,1), margin .3s ease;
}
body.student-view .portal-form.hidden{display:grid!important}
body.student-view .portal-form.is-active{
  max-height:980px;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  margin-top:2px;
}
body.student-view .portal-form > *{
  transition:opacity .28s ease, transform .36s cubic-bezier(.22,.7,.25,1);
}
body.student-view .portal-form:not(.is-active) > *{
  opacity:0;
  transform:translateY(-6px);
}
body.student-view .portal-form.is-active > *{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  body.student-view .portal-form,
  body.student-view .portal-form > *{transition:none!important}
}

@media (max-width:480px){
  body.student-view .fi{width:22px;min-width:22px}
  body.student-view .fi-icon{width:20px;height:20px}
  body.student-view .field{grid-template-columns:22px minmax(0,1fr)}
}


/* ===== JS-driven form motion — no camera ===== */
body.student-view .portal-form{
  display:grid;
  gap:13px;
  max-height:none!important;
  opacity:1!important;
  transform:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
  margin:0!important;
  transition:none!important;
}
body.student-view .portal-form.hidden{display:none!important}
body.student-view .portal-form > *{transition:none!important;opacity:1!important;transform:none!important}
body.student-view .field{grid-template-columns:24px minmax(0,1fr);gap:11px}
body.student-view .portal-form-stage{
  position:relative;
  width:100%;
  overflow:visible;
  contain:layout paint;
}
body.student-view .portal-form-stage .portal-form{
  width:100%;
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}
@media(max-width:480px){
  body.student-view .field{grid-template-columns:22px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  body.student-view .portal-form-stage{contain:none}
}


/* ===== Fresh login redesign ===== */
body.student-view .wrapper{padding:82px 18px 28px}
body.student-view .login-card{
  border-radius:32px;
  border:1px solid rgba(223,236,232,.95);
  background:rgba(255,255,255,.97);
  box-shadow:0 30px 76px rgba(10,39,43,.12),0 10px 26px rgba(10,39,43,.05);
}
body.student-view .login-head{padding:30px 24px 20px}
body.student-view .login-head h1{font-size:29px}
body.student-view .portal-subtitle{font-size:13.2px;opacity:.92}
body.student-view .login-body{padding:22px 18px 20px;gap:16px}
body.student-view .portal-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:0 2px 10px;
  background:transparent;
  border:0;
  border-bottom:1px solid #e5eded;
  border-radius:0;
  box-shadow:none;
  position:relative;
}
body.student-view .portal-mode-tab{
  min-height:42px;
  border-radius:0;
  font-size:14px;
  font-weight:900;
  color:#7b8d91;
  background:transparent!important;
  box-shadow:none!important;
  position:relative;
}
body.student-view .portal-mode-tab.active{
  color:#17373d!important;
}
body.student-view .portal-mode-tab.active::before{
  content:"";
  position:absolute;
  right:18%;left:18%;bottom:-11px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#0aa091 0%,#0b8f82 100%);
}
body.student-view .portal-mode-tab.active::after,
body.student-view .portal-mode-tab::after{display:none!important}
body.student-view .portal-first-time,
body.student-view .portal-security-note{
  border-radius:16px;
  padding:12px 14px;
}
body.student-view .portal-first-time{
  background:linear-gradient(180deg,#f6fbfb 0%,#eff7f7 100%);
  border:1px solid #e2eceb;
  color:#63787c;
}
body.student-view .portal-security-note{
  background:#fbfcfc;
  border:1px solid #eef3f3;
  color:#7c8f92;
}
body.student-view .portal-form{
  gap:14px;
}
body.student-view .field{
  min-height:68px;
  padding:11px 14px;
  border-radius:22px;
  border:1px solid #dfeaea;
  background:linear-gradient(180deg,#ffffff 0%,#fcfefe 100%);
  box-shadow:0 12px 24px rgba(16,56,58,.045), inset 0 1px 0 rgba(255,255,255,.96);
  grid-template-columns:26px minmax(0,1fr);
  gap:12px;
}
body.student-view .field:hover{border-color:#d6e4e4;box-shadow:0 14px 26px rgba(16,56,58,.05), inset 0 1px 0 rgba(255,255,255,.98)}
body.student-view .field:focus-within{border-color:#b8ddd7;box-shadow:0 0 0 4px rgba(10,157,142,.07),0 16px 28px rgba(11,72,70,.06), inset 0 1px 0 rgba(255,255,255,.98)}
body.student-view .field-copy{
  min-width:0;
  display:grid;
  gap:4px;
}
body.student-view .field-label{
  font-size:11.2px;
  line-height:1;
  color:#90a3a6;
  font-weight:800;
}
body.student-view .fi{width:26px;min-width:26px;color:#7e9799}
body.student-view .fi-icon{width:20px;height:20px;stroke-width:2.05}
body.student-view .in{
  height:26px;
  font-size:16.6px;
  font-weight:900;
  color:#18373d;
  padding:0;
}
body.student-view .in::placeholder{color:#a5b6b8;font-weight:700}
body.student-view .error{
  margin:2px 0 0;
  border-radius:14px;
}
body.student-view .btn-primary{
  margin-top:4px;
  height:56px;
  border-radius:18px;
  font-size:19px;
  letter-spacing:.1px;
}
@media (max-width:480px){
  body.student-view .wrapper{padding:74px 14px 20px}
  body.student-view .login-card{border-radius:28px}
  body.student-view .login-head{padding:26px 18px 18px}
  body.student-view .login-head h1{font-size:26px}
  body.student-view .login-body{padding:18px 14px 18px;gap:14px}
  body.student-view .portal-mode-tabs{padding-bottom:9px}
  body.student-view .portal-mode-tab{font-size:13.3px;min-height:40px}
  body.student-view .field{min-height:64px;padding:10px 12px;border-radius:20px;grid-template-columns:24px minmax(0,1fr);gap:10px}
  body.student-view .field-label{font-size:10.8px}
  body.student-view .fi{width:24px;min-width:24px}
  body.student-view .fi-icon{width:19px;height:19px}
  body.student-view .in{font-size:16px}
  body.student-view .btn-primary{height:54px;font-size:18px}
}