/* AL-LTC account entry: split visual layout, scoped to authentication only. */
#ov.auth-overlay{padding:28px;z-index:1500;background:rgba(5,18,35,.8);backdrop-filter:blur(10px);overflow:auto;align-items:center}
#ov .mdl.auth-dialog{padding:0;max-width:1120px;width:100%;border-radius:24px;overflow:hidden;max-height:calc(100dvh - 56px);box-shadow:0 32px 100px #0005;animation:none}
.auth-layout{display:grid;grid-template-columns:1fr 1fr;direction:ltr;min-height:650px;background:#fff}
.auth-form-panel{position:relative;direction:rtl;padding:38px 48px 28px;overflow-y:auto;max-height:calc(100dvh - 56px);scrollbar-width:thin}
.auth-brand{display:flex;justify-content:center;margin:0 auto 24px;max-width:280px;min-height:46px}.auth-brand .lg-t b{color:#0e2444}.auth-brand .lg-t span{color:#5b6b85}.auth-brand svg{max-width:100%;height:52px}
.auth-close{position:absolute;top:13px;left:17px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font:28px/1 sans-serif;color:#64748b;background:#f3f5f8}.auth-close:hover{background:#e8edf4;color:#0e2444}
.auth-eyebrow{display:block;font-size:11px;font-weight:700;color:#a54c0c;letter-spacing:.3px;margin-bottom:10px}
#ov .auth-form-panel h2{font:800 31px/1.4 var(--fd);color:#0e2444;margin:0 0 5px}
#ov .auth-form-panel .auth-intro{font-size:14px;color:#64748b;margin:0 0 22px;line-height:1.8}
.auth-tabs{display:flex;gap:5px;padding:4px;background:#f3f5f8;border-radius:12px;margin-bottom:22px}.auth-tabs button{width:50%;border-radius:9px;padding:10px 5px;font-size:13px;font-weight:700;color:#67768a}.auth-tabs button[aria-pressed=true]{background:white;box-shadow:0 2px 7px #0e244414;color:#a54c0c}
#authForm .f{display:block;margin-bottom:15px}#authForm .f>span:first-child{font-size:13px;font-weight:600;color:#23364f;margin-bottom:7px;display:block}#authForm input{width:100%;min-height:49px;background:white;border:1px solid #d6dee8;border-radius:10px;padding:11px 14px;font-size:14px;box-shadow:none}#authForm input:focus{border-color:#d66412;outline:3px solid #f0741a20;outline-offset:1px}#authForm input::placeholder{color:#8996a6}#authForm input[dir=ltr]{text-align:left}
.auth-password{position:relative;display:block}#authForm .auth-password input{padding-inline-end:66px}.auth-password button{position:absolute;inset-inline-end:10px;top:8px;min-height:33px;padding:4px;color:#526780;font-size:12px;font-weight:600}
#ov .auth-hint{font-size:11px;color:#64748b;margin:-5px 0 16px}.auth-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 20px;min-height:50px;border-radius:30px;background:#e96310;color:#fff;font-size:15px;font-weight:700;margin-top:18px;box-shadow:0 8px 19px #e9631020}.auth-submit:hover{background:#cb5005}.auth-submit:disabled{opacity:.65;cursor:wait}.auth-submit span{font-size:21px;line-height:1}
#ov .auth-switch{text-align:center;color:#66758a;font-size:12px;margin:19px 0 9px}.auth-switch button{color:#a94c0c;font-weight:700;padding:4px}.auth-browse{display:block;margin:auto;color:#66758a;font-size:12px;min-height:36px;padding:5px 15px}.auth-browse:hover{color:#0e2444}
.auth-error{padding:11px 13px;background:#fff0ef;color:#a22b28;border:1px solid #efc5c3;border-radius:9px;font-size:12px;line-height:1.8}.auth-error[hidden]{display:none}
.auth-visual{position:relative;isolation:isolate;overflow:hidden;direction:rtl;display:flex;flex-direction:column;justify-content:space-between;padding:46px 38px 32px;color:white;background:#081a2b url('/assets/hero/alsaeed-academy-wide-v44.webp') 24% center/auto 100% no-repeat}.auth-visual:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,18,32,.91),rgba(5,18,32,.18) 50%,rgba(5,18,32,.88))}
.auth-visual-pill{display:inline-block;border:1px solid #ffffff54;background:#ffffff0c;border-radius:30px;padding:6px 13px;font-size:11px;color:#f0f4f8;margin-bottom:24px}
#ov .auth-visual h3{font:800 43px/1.45 var(--fd);margin:0 0 13px;color:white;letter-spacing:-.5px}#ov .auth-visual h3 em{font-style:normal;color:#ffab65}#ov .auth-visual p{color:#e0e6ee;font-size:14px;line-height:1.9;margin:0;max-width:330px}.auth-visual-bottom{border-top:1px solid #ffffff40;padding-top:20px}.auth-visual-bottom>span{font:700 23px/1.6 var(--fd)}#ov .auth-visual-bottom p{font-size:12px;margin-top:3px}
@media(min-width:1500px){#ov .mdl.auth-dialog{max-width:1200px}.auth-layout{min-height:720px}.auth-form-panel{padding:46px 62px 36px}.auth-brand{margin-bottom:32px}.auth-tabs{margin-bottom:26px}#authForm .f{margin-bottom:19px}}
@media(max-width:760px){#ov.auth-overlay{padding:12px}#ov .mdl.auth-dialog{max-width:480px;max-height:calc(100dvh - 24px);border-radius:20px}.auth-layout{display:flex;flex-direction:column;min-height:0}.auth-visual{display:none}.auth-form-panel{padding:30px 26px 20px;max-height:calc(100dvh - 24px)}.auth-brand{margin-bottom:22px}.auth-brand svg{height:46px}#ov .auth-form-panel h2{font-size:28px}.auth-tabs{margin-bottom:20px}#authForm input{font-size:16px}.auth-eyebrow{font-size:10px}.auth-close{top:10px;left:10px}}
@media(max-height:680px) and (min-width:761px){.auth-layout{min-height:570px}.auth-form-panel{padding:25px 40px 20px}.auth-brand{margin-bottom:12px}.auth-tabs{margin-bottom:15px}#authForm .f{margin-bottom:11px}.auth-visual{padding-top:35px}}
@media(prefers-reduced-motion:reduce){.auth-overlay *{animation:none!important;transition:none!important}}

/* Original vector illustrations; the form is never re-rendered by this panel. */
.auth-visual{background:radial-gradient(ellipse at 80% 40%,#15485b 0,transparent 62%),linear-gradient(145deg,#102d43,#081a2b);padding:30px 28px 24px;gap:0}.auth-visual:before{display:none}
.auth-visual-top{position:relative;z-index:2;order:0}.auth-visual-bottom{position:relative;z-index:2;order:2;margin-bottom:38px;padding-top:14px}
#ov .auth-visual h3{font-size:33px;line-height:1.35;margin:8px 0}#ov .auth-visual p{font-size:12px;line-height:1.7}.auth-visual-pill{margin-bottom:8px}
.auth-scenes{position:relative;z-index:2;pointer-events:none;overflow:hidden;min-height:250px;flex:1;order:1;margin:0 -18px;width:calc(100% + 36px)}.auth-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .9s ease}.auth-scene.on{opacity:1}.auth-art{display:block;width:100%;height:100%;max-height:370px;overflow:visible}
.auth-scene-controls{position:absolute;bottom:16px;left:20px;right:20px;z-index:3;display:flex;align-items:center;justify-content:center;gap:4px;direction:ltr}.auth-scene-dot{width:36px;height:36px;display:grid;place-items:center;border-radius:50%}.auth-scene-dot:after{content:'';width:7px;height:7px;border:1px solid #fff;background:#ffffff60;border-radius:50%;transition:width .3s}.auth-scene-dot[aria-pressed=true]:after{width:22px;border-radius:8px;background:#ffab65;border-color:#ffab65}.auth-scene-pause{margin-left:10px;padding:5px 10px;min-height:36px;border:1px solid #ffffff60;border-radius:20px;color:white;background:#081a2b90;font-size:10px;direction:rtl}.auth-scene-pause:disabled{cursor:default;opacity:.8}
@media(max-width:760px){.auth-scenes,.auth-scene-controls{display:none}}
@media(max-height:680px) and (min-width:761px){.auth-visual{padding-top:22px}#ov .auth-visual h3{font-size:28px}.auth-scenes{min-height:225px}.auth-visual-bottom{padding-top:10px}#ov .auth-visual-bottom>span{font-size:20px}}
@media(prefers-reduced-motion:reduce){.auth-scene,.auth-scene-dot:after{transition:none}}
.auth-scenes:not(.is-running) .auth-scene,.auth-motion-still .auth-scene-dot:after{transition:none}

/* Art is decorative. The owner controls .is-running and the active .on scene. */
.auth-scene .auth-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.auth-scene .auth-art .animatedpart {
  transform-box: fill-box;
  transform-origin: center;
  animation-play-state: paused;
}
.auth-scene .auth-art .art-float-register {
  animation: al-auth-float 5.6s ease-in-out infinite;
}
.auth-scene .auth-art .art-float-lesson {
  animation: al-auth-float 6s ease-in-out infinite;
}
.auth-scene .auth-art .art-float-note {
  animation: al-auth-float-small 4.7s ease-in-out infinite;
}
.auth-scene .auth-art .art-register-person {
  transform-origin: 50% 100%;
  animation: al-auth-breathe 4.4s ease-in-out infinite;
}
.auth-scene .auth-art .art-register-head {
  transform-origin: 50% 92%;
  animation: al-auth-head 4.4s ease-in-out infinite;
}
.auth-scene .auth-art .art-register-hand-near {
  transform-origin: 0% 60%;
  animation: al-auth-type-near .58s ease-in-out infinite;
}
.auth-scene .auth-art .art-register-hand-far {
  transform-origin: 0% 60%;
  animation: al-auth-type-far .7s ease-in-out infinite;
}
.auth-scene .auth-art .art-register-line-one {
  transform-origin: left center;
  animation: al-auth-register-one 5.6s ease-in-out infinite;
}
.auth-scene .auth-art .art-register-line-two {
  transform-origin: left center;
  animation: al-auth-register-two 5.6s ease-in-out infinite;
}
.auth-scene .auth-art .art-register-check {
  animation: al-auth-register-check 5.6s ease-in-out infinite;
}
.auth-scene .auth-art .art-steam {
  animation: al-auth-steam 3.3s ease-in-out infinite;
}
.auth-scene .auth-art .art-learner-person {
  transform-origin: 60% 100%;
  animation: al-auth-learner-breathe 4.8s ease-in-out infinite;
}
.auth-scene .auth-art .art-learner-head {
  transform-origin: 50% 95%;
  animation: al-auth-learner-head 4.8s ease-in-out infinite;
}
.auth-scene .auth-art .art-learner-hand {
  transform-origin: 100% 60%;
  animation: al-auth-write 1.35s ease-in-out infinite;
}
.auth-scene .auth-art .art-lesson-play {
  animation: al-auth-play 3.2s ease-in-out infinite;
}
.auth-scene .auth-art .art-lesson-progress {
  transform-origin: left center;
  animation: al-auth-progress 6s ease-in-out infinite;
}
/* Keep this after all animation shorthands: shorthands reset play state. */
.auth-scene .auth-art .animatedpart {
  animation-play-state: paused;
}
.auth-scenes.is-running .auth-scene.on .animatedpart {
  animation-play-state: running;
}
@keyframes al-auth-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes al-auth-float-small {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}
@keyframes al-auth-breathe {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-.65deg); }
}
@keyframes al-auth-head {
  0%, 100% { transform: rotate(0); }
  45%, 65% { transform: rotate(2.5deg) translateY(1px); }
}
@keyframes al-auth-type-near {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-2.7px) rotate(-2deg); }
  70% { transform: translateY(.5px) rotate(.4deg); }
}
@keyframes al-auth-type-far {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(1.5px) rotate(2deg); }
}
@keyframes al-auth-register-one {
  0%, 9% { transform: scaleX(.08); opacity: .5; }
  34%, 88% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(.08); opacity: .5; }
}
@keyframes al-auth-register-two {
  0%, 28% { transform: scaleX(.05); opacity: 0; }
  57%, 88% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(.05); opacity: 0; }
}
@keyframes al-auth-register-check {
  0%, 48% { transform: scale(.8); opacity: .35; }
  65% { transform: scale(1.1); opacity: 1; }
  74%, 88% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.8); opacity: .35; }
}
@keyframes al-auth-steam {
  0%, 100% { transform: translateY(2px); opacity: .35; }
  50% { transform: translateY(-3px); opacity: .8; }
}
@keyframes al-auth-learner-breathe {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(.55deg); }
}
@keyframes al-auth-learner-head {
  0%, 100% { transform: rotate(0); }
  40%, 60% { transform: rotate(-2deg) translateY(1px); }
}
@keyframes al-auth-write {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  24% { transform: translate(-1px, 1px) rotate(-1.4deg); }
  48% { transform: translate(1px, 0) rotate(.5deg); }
  72% { transform: translate(-.5px, 1px) rotate(-1deg); }
}
@keyframes al-auth-play {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@keyframes al-auth-progress {
  0%, 7% { transform: scaleX(.16); }
  78%, 90% { transform: scaleX(1); }
  100% { transform: scaleX(.16); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-scene .auth-art .animatedpart,
  .auth-scenes.is-running .auth-scene.on .animatedpart {
    animation: none !important;
    transform: none;
  }
}

/* Keep a compact animated welcome visible on phones, above the account form. */
#ov .mdl.auth-dialog{position:relative}.auth-close{z-index:5}
@media(max-width:760px){
  .auth-layout{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .auth-form-panel{max-height:none;overflow:visible;flex:none;padding:18px 24px 22px}
  .auth-visual{display:block;order:-1;flex:none;height:184px;min-height:184px;padding:0;border-radius:0}
  .auth-visual-top{position:absolute;right:18px;top:37px;width:38%;z-index:2}
  .auth-visual-pill,.auth-visual-top p,.auth-visual-bottom{display:none}
  #ov .auth-visual h3{font-size:21px;line-height:1.4;margin:0}
  .auth-scenes{display:block;position:absolute;inset:0 auto auto 0;margin:0;width:61%;height:154px;min-height:0;overflow:hidden}
  .auth-scene .auth-art{height:154px;max-height:154px}
  .auth-scene-controls{display:flex;bottom:3px;left:12px;right:12px;gap:3px}
  .auth-scene-dot{width:32px;height:30px}.auth-scene-pause{min-height:30px;margin-left:6px;font-size:10px;padding:3px 9px}
  .auth-brand{margin-bottom:12px;min-height:38px}.auth-brand svg{height:38px}
  .auth-eyebrow{font-size:9px;margin-bottom:5px}
  #ov .auth-form-panel h2{font-size:26px}#ov .auth-form-panel .auth-intro{font-size:12px;margin-bottom:14px}
  .auth-tabs{margin-bottom:16px}.auth-close{top:9px;left:9px;background:#f3f5f8ee}
}
@media(max-width:350px){#ov .auth-visual h3{font-size:18px}.auth-visual-top{right:14px}.auth-form-panel{padding-left:18px;padding-right:18px}}