:root{
  --sal-primary:#5B32F4;
  --sal-secondary:#3429D9;
  --sal-text:#101747;
  --sal-muted:#747aa0;
  --sal-line:#e4e5f1;
}
*{box-sizing:border-box}
html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
  background:#f8f9ff;
  -webkit-tap-highlight-color:transparent;
}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--sal-text);
}
button,input{font:inherit}
button{cursor:pointer}
.sal-page{
  position:relative;
  width:min(100%,540px);
  height:100vh;
  height:100dvh;
  margin:0 auto;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto minmax(112px,1fr) auto;
  gap:0;
  padding:
    calc(14px + env(safe-area-inset-top,0px))
    18px
    calc(14px + env(safe-area-inset-bottom,0px));
  background:
    radial-gradient(circle at 10% 0%,rgba(113,76,255,.17),transparent 25%),
    radial-gradient(circle at 92% 24%,rgba(66,124,255,.08),transparent 22%),
    linear-gradient(180deg,#ffffff 0%,#fbfbff 60%,#f6f7ff 100%);
}
.sal-page:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:
    linear-gradient(rgba(85,72,197,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(85,72,197,.025) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,transparent 62%);
}
.sal-orb{position:absolute;border-radius:50%;pointer-events:none}
.sal-orb.one{
  width:150px;height:150px;left:-72px;top:-72px;
  background:linear-gradient(145deg,rgba(96,53,245,.20),rgba(190,178,255,.08));
  filter:blur(.2px);
}
.sal-orb.two{
  width:7px;height:7px;right:28px;top:150px;background:#d9d2ff;
  box-shadow:20px 0 #ebe8ff,40px 0 #ded8ff,60px 0 #eeeaff,
             0 20px #ebe8ff,20px 20px #dcd6ff,40px 20px #eeeaff,60px 20px #e5e0ff;
  opacity:.65;
}

.sal-app-brand{
  position:relative;z-index:4;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:2px 36px;
}
.sal-brand-dot{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--sal-primary),#55a3ff);
  box-shadow:0 0 0 5px rgba(91,50,244,.07);
}
.sal-app-brand strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:850;
  letter-spacing:.01em;
  background:linear-gradient(
    100deg,
    #14205c 0%,
    var(--sal-primary) 28%,
    #2686ff 50%,
    #8b35ff 72%,
    #14205c 100%
  );
  background-size:240% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:salBrandFlow 4.2s linear infinite;
}
@keyframes salBrandFlow{to{background-position:240% center}}

.sal-welcome{
  position:relative;z-index:3;
  text-align:center;
  padding:7px 8px 4px;
}
.sal-welcome h1{
  margin:0;
  color:#11194b;
  font-size:clamp(25px,7.2vw,34px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.sal-welcome h1 span{
  display:inline-block;
  background:linear-gradient(105deg,var(--sal-primary),#287ff6,#8a31ff,var(--sal-primary));
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:salAccentFlow 3.2s ease-in-out infinite alternate;
}
@keyframes salAccentFlow{to{background-position:100% center}}
.sal-welcome p{
  margin:7px 0 0;
  color:#74799d;
  font-size:13px;
  line-height:1.35;
}

.sal-visual{
  position:relative;
  z-index:2;
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:2px -18px -8px;
}
.sal-background-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.18;
  mix-blend-mode:multiply;
}
.sal-campus-lines{
  position:absolute;
  left:-4%;right:-4%;bottom:8px;height:92%;
  opacity:.10;
  background:
    linear-gradient(150deg,transparent 0 22%,#7768f5 22.5% 23%,transparent 23.5%) 0 0/135px 90px,
    linear-gradient(90deg,#7768f5 1px,transparent 1px) 0 0/36px 100%,
    linear-gradient(#7768f5 1px,transparent 1px) 0 0/100% 30px;
  border-bottom:1px solid #7768f5;
}
.sal-hero-media,.sal-lottie{
  position:relative;z-index:2;
  width:min(310px,68vw);
  height:100%;
  max-height:190px;
  object-fit:contain;
  animation:salFloat 4s ease-in-out infinite;
}
.sal-lottie{min-height:118px}
@keyframes salFloat{0%,100%{transform:translateY(2px)}50%{transform:translateY(-5px)}}

.sal-hero-placeholder{
  position:relative;z-index:2;
  width:min(310px,76vw);
  height:138px;
  transform:scale(.86);
}
.sal-student-figure{
  position:absolute;left:50%;bottom:5px;
  width:78px;height:115px;
  transform:translateX(-30%);
  border-radius:56% 44% 22% 22% / 24% 28% 20% 20%;
  background:linear-gradient(145deg,#4c27dc,#743cff 55%,#1b1649 56%);
  box-shadow:0 14px 25px rgba(51,29,154,.11);
}
.sal-student-figure>i{
  position:absolute;left:24px;top:-28px;
  width:48px;height:48px;border-radius:48%;
  display:grid;place-items:center;
  color:#1a1b34;background:#f0c6a7;font-size:40px;overflow:hidden;
}
.sal-student-figure .bag{
  position:absolute;right:-20px;top:40px;
  width:45px;height:55px;border-radius:13px;
  border:5px solid #18143c;background:#30205e;
}
.sal-books{position:absolute;left:18%;bottom:8px;width:72px;height:42px}
.sal-books i{display:block;height:10px;margin-top:4px;border-radius:3px;background:#4d28dd}
.sal-books i:nth-child(2){width:92%;margin-left:8%;background:#7042f6}
.sal-books i:nth-child(3){width:82%;background:#3425a9}
.sal-float-icon{
  position:absolute;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--sal-primary);background:rgba(241,238,255,.95);
  box-shadow:0 7px 18px rgba(61,43,151,.07);font-size:20px;
}
.sal-float-icon.cap{left:16%;top:14px}
.sal-float-icon.note{right:15%;top:30px}

.sal-login-card{
  position:relative;z-index:5;
  align-self:end;
  padding:16px 16px 17px;
  border:1px solid rgba(225,225,242,.9);
  border-radius:28px;
  background:rgba(255,255,255,.97);
  box-shadow:
    0 18px 45px rgba(33,38,90,.09),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  animation:salCardIn .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes salCardIn{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:none}
}
.sal-card-head{
  display:flex;align-items:center;gap:11px;
  margin-bottom:12px;
}
.sal-lock-icon{
  flex:0 0 48px;
  width:48px;height:48px;
  border-radius:15px;
  display:grid;place-items:center;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(145deg,#8f72ff,#4d26e6);
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.74);
  font-size:17px;
}
.sal-lock-icon img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:14px;
}
.sal-card-head h2{margin:0;font-size:20px;letter-spacing:-.025em}
.sal-card-head p{margin:2px 0 0;color:#72779a;font-size:11.5px}

.sal-error{
  display:flex;align-items:flex-start;gap:7px;
  margin:-1px 0 10px;padding:8px 9px;
  border:1px solid #f1d1d8;border-radius:10px;
  color:#a83247;background:#fff0f3;font-size:10.5px;line-height:1.35;
}
#student-login-form{display:grid;gap:10px}
.sal-field{display:grid;gap:4px}
.sal-field>span{
  padding-left:4px;color:#181d55;
  font-size:12px;font-weight:800;
}
.sal-field>small{
  margin-top:-1px;padding-left:5px;
  color:#9298b1;font-size:8.5px;
}
.sal-input{
  min-height:55px;
  display:grid;
  grid-template-columns:49px minmax(0,1fr) 44px;
  align-items:center;
  border:1.2px solid #dfe1ee;
  border-radius:17px;
  background:#fff;
  overflow:hidden;
  transition:.18s;
}
.sal-input:focus-within{
  border-color:#8f7bf6;
  box-shadow:0 0 0 3px rgba(91,50,244,.07);
}
.sal-input>i{
  width:37px;height:37px;margin-left:7px;
  border-radius:11px;
  display:grid;place-items:center;
  color:var(--sal-primary);background:#f2efff;
  font-size:18px;
}
.sal-input input{
  min-width:0;width:100%;height:52px;
  border:0;outline:0;background:transparent;
  color:#151b51;font-size:16px;
}
.sal-input input::placeholder{color:#abb0c7}
.sal-password-toggle{
  width:42px;height:42px;border:0;
  background:transparent;color:#777d9f;font-size:18px;
}
.sal-remember{
  width:max-content;
  display:flex;align-items:center;gap:8px;
  color:#171c51;font-size:11.5px;cursor:pointer;
}
.sal-remember input{position:absolute;opacity:0}
.sal-remember>span{
  width:21px;height:21px;border-radius:6px;
  display:grid;place-items:center;
  border:1.2px solid #d8d9e9;background:#fff;color:#fff;font-size:11px;
}
.sal-remember input:checked+span{
  border-color:var(--sal-primary);
  background:linear-gradient(145deg,var(--sal-primary),var(--sal-secondary));
}
.sal-remember b{font-weight:720}
.sal-login-button{
  position:relative;
  min-height:54px;
  border:0;border-radius:17px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:#fff;
  background:linear-gradient(105deg,var(--sal-primary),var(--sal-secondary));
  box-shadow:0 12px 25px rgba(76,42,218,.20);
  font-size:16px;
  overflow:hidden;
}
.sal-login-button:before{
  content:"";
  position:absolute;inset:-100% auto -100% -35%;
  width:28%;
  transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  animation:salButtonShine 3s ease-in-out infinite;
}
@keyframes salButtonShine{
  0%,65%{left:-35%}
  100%{left:130%}
}
.sal-login-button:disabled{opacity:.78;cursor:wait}
.sal-button-arrow{
  position:relative;z-index:1;
  width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--sal-primary);background:#fff;font-size:13px;
}
.sal-login-button strong{position:relative;z-index:1}

.sal-success-screen{
  position:absolute;
  z-index:50;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.18),transparent 23%),
    linear-gradient(145deg,var(--sal-primary),var(--sal-secondary));
  animation:salSuccessReveal .38s ease-out both;
}
@keyframes salSuccessReveal{
  from{opacity:0;clip-path:circle(0% at 50% 72%)}
  to{opacity:1;clip-path:circle(130% at 50% 72%)}
}
.sal-success-orbit{
  position:absolute;
  width:180px;height:180px;
  animation:salOrbitRotate 8s linear infinite;
}
.sal-success-orbit span{
  position:absolute;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.75);
  box-shadow:0 0 18px rgba(255,255,255,.55);
}
.sal-success-orbit span:nth-child(1){left:50%;top:0}
.sal-success-orbit span:nth-child(2){right:8px;bottom:34px}
.sal-success-orbit span:nth-child(3){left:5px;bottom:42px}
@keyframes salOrbitRotate{to{transform:rotate(360deg)}}
.sal-success-check{
  position:relative;
  width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--sal-primary);background:#fff;
  font-size:36px;
  box-shadow:0 18px 45px rgba(18,10,87,.24);
  animation:salSuccessPop .55s cubic-bezier(.2,1.4,.3,1) both .2s;
}
@keyframes salSuccessPop{from{opacity:0;transform:scale(.35) rotate(-18deg)}to{opacity:1;transform:none}}
.sal-success-screen>strong{
  font-size:24px;letter-spacing:-.025em;
  animation:salFadeUp .35s ease both .42s;
}
.sal-success-screen>p{
  margin:0;color:rgba(255,255,255,.82);font-size:12px;
  animation:salFadeUp .35s ease both .5s;
}
@keyframes salFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sal-success-loader{
  width:115px;height:3px;margin-top:8px;
  overflow:hidden;border-radius:999px;background:rgba(255,255,255,.22);
}
.sal-success-loader i{
  display:block;width:45%;height:100%;border-radius:inherit;background:#fff;
  animation:salLoader 1s ease-in-out infinite;
}
@keyframes salLoader{from{transform:translateX(-110%)}to{transform:translateX(255%)}}

@media(max-height:760px){
  .sal-page{
    padding-top:calc(8px + env(safe-area-inset-top,0px));
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
    grid-template-rows:auto auto minmax(86px,1fr) auto;
  }
  .sal-app-brand{min-height:30px}
  .sal-welcome{padding-top:2px}
  .sal-welcome h1{font-size:24px}
  .sal-welcome p{margin-top:4px;font-size:11px}
  .sal-visual{min-height:86px;margin-bottom:-5px}
  .sal-hero-media,.sal-lottie{max-height:128px}
  .sal-hero-placeholder{height:102px;transform:scale(.66)}
  .sal-login-card{padding:12px 13px 13px;border-radius:23px}
  .sal-card-head{margin-bottom:9px}
  .sal-lock-icon{flex-basis:42px;width:42px;height:42px}
  .sal-card-head h2{font-size:17px}.sal-card-head p{font-size:10px}
  #student-login-form{gap:7px}
  .sal-field>span{font-size:10.5px}
  .sal-field>small{display:none}
  .sal-input{min-height:48px;grid-template-columns:44px minmax(0,1fr) 40px;border-radius:14px}
  .sal-input>i{width:34px;height:34px;font-size:16px}
  .sal-input input{height:45px}
  .sal-login-button{min-height:48px}
}
@media(max-width:390px){
  .sal-page{padding-left:12px;padding-right:12px}
  .sal-visual{margin-left:-12px;margin-right:-12px}
  .sal-login-card{padding-left:13px;padding-right:13px}
}

/* Lottie vector rendering v1.2 */
.sal-lottie{overflow:hidden}
.sal-lottie svg{
  width:100%!important;
  height:100%!important;
  display:block;
}


/* =========================================================
   Student App Login UI refine v1.3
   ========================================================= */

/* Remove the old decorative dot spacing and make the university name
   feel like a native app brand title. */
.sal-app-brand{
  gap:0;
  padding-inline:18px;
}
.sal-brand-dot{display:none!important}
.sal-app-brand strong{
  font-size:13.5px;
  text-align:center;
}

/* Use a deliberate hero height instead of allowing the CSS grid to create
   a large empty web-page-looking region on tall phones. */
.sal-page{
  grid-template-rows:auto auto auto auto;
}
.sal-visual{
  height:clamp(205px,29dvh,270px);
  min-height:205px;
  max-height:270px;
  margin-top:1px;
  margin-bottom:-24px;
  overflow:visible;
}
.sal-hero-media,
.sal-lottie{
  width:min(300px,66vw);
  max-height:205px;
}
.sal-hero-placeholder{
  height:170px;
  transform:scale(.78);
}

/* Quote beside the hero so the upper portion feels intentionally composed,
   rather than empty. */
.sal-education-quote{
  position:absolute;
  z-index:4;
  right:18px;
  top:26px;
  width:118px;
  padding:10px 10px 11px;
  border:1px solid rgba(105,83,233,.12);
  border-radius:15px;
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 28px rgba(54,43,139,.07);
  backdrop-filter:blur(8px);
  animation:salQuoteFloat 4.6s ease-in-out infinite;
}
.sal-education-quote:before{
  content:"“";
  position:absolute;
  right:8px;
  top:-8px;
  color:rgba(91,50,244,.16);
  font:900 39px/1 Georgia,serif;
}
.sal-education-quote small{
  display:block;
  margin-bottom:4px;
  color:#9297b1;
  font-size:7px;
  font-weight:700;
  letter-spacing:.015em;
}
.sal-education-quote strong{
  display:block;
  color:#18205a;
  font-size:11px;
  line-height:1.15;
  letter-spacing:-.02em;
}
.sal-education-quote span{
  display:block;
  margin-top:3px;
  font-size:11px;
  font-weight:900;
  line-height:1.15;
  background:linear-gradient(100deg,var(--sal-primary),#237ff5,#8a31ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@keyframes salQuoteFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* Bring the login card upward and give it a slightly stronger native-card
   presence without making the controls oversized again. */
.sal-login-card{
  margin-top:-10px;
  padding:19px 18px 20px;
  border-radius:30px;
  box-shadow:
    0 19px 48px rgba(33,38,90,.11),
    inset 0 1px 0 rgba(255,255,255,.94);
}
.sal-card-head{
  margin-bottom:14px;
}
.sal-lock-icon{
  flex-basis:52px;
  width:52px;
  height:52px;
  border-radius:16px;
}
.sal-card-head h2{font-size:21px}
.sal-card-head p{font-size:12px}
#student-login-form{gap:11px}
.sal-input{
  min-height:58px;
  border-radius:18px;
}
.sal-input input{height:55px}
.sal-login-button{
  min-height:58px;
  border-radius:18px;
}

/* Compact phones: keep the quote from colliding with the animation. */
@media(max-width:430px){
  .sal-education-quote{
    right:8px;
    top:22px;
    width:102px;
    padding:8px 8px 9px;
  }
  .sal-education-quote strong,
  .sal-education-quote span{font-size:9.5px}
  .sal-education-quote small{font-size:6.5px}
  .sal-hero-media,
  .sal-lottie{width:min(265px,64vw)}
}

/* Short screens: still keep the page completely app-like and non-scrollable. */
@media(max-height:760px){
  .sal-visual{
    height:clamp(120px,22dvh,155px);
    min-height:120px;
    max-height:155px;
    margin-bottom:-19px;
  }
  .sal-education-quote{
    top:12px;
    right:8px;
    transform:scale(.88);
    transform-origin:top right;
  }
  .sal-hero-media,
  .sal-lottie{max-height:125px}
  .sal-login-card{
    margin-top:-6px;
    padding:14px 14px 15px;
  }
}


/* =========================================================
   Student Login v1.4 — keyboard/WebView responsiveness
   and premium success handoff
   ========================================================= */

:root{
  --sal-app-height:100dvh;
}

/* Keep the app bound to VisualViewport, not the browser's old layout viewport. */
html,body{
  height:var(--sal-app-height,100dvh);
  min-height:var(--sal-app-height,100dvh);
}
.sal-page{
  height:var(--sal-app-height,100dvh);
  min-height:var(--sal-app-height,100dvh);
  max-height:var(--sal-app-height,100dvh);
}

/* Supplied Lottie is now the default hero. */
.sal-lottie{
  width:min(350px,78vw);
  height:min(170px,23dvh);
  min-height:120px;
  max-height:180px;
  animation:none;
}
.sal-lottie svg{
  width:100%!important;
  height:100%!important;
}

/* Remove old CSS character illustration from normal rendering.
   It only remains as a final emergency fallback in the HTML. */
.sal-hero-placeholder{display:none}

/* Android keyboard open state: collapse artwork and move the actual login controls
   into the visible VisualViewport instead of leaving the Login button behind keyboard. */
body.sal-keyboard-open{
  overflow:hidden;
}
body.sal-keyboard-open .sal-page{
  grid-template-rows:auto auto 1px minmax(0,1fr);
  padding:
    calc(4px + env(safe-area-inset-top,0px))
    10px
    5px;
}
body.sal-keyboard-open .sal-app-brand{
  min-height:25px;
  padding:0 12px;
}
body.sal-keyboard-open .sal-app-brand strong{
  font-size:10.5px;
}
body.sal-keyboard-open .sal-welcome{
  padding:1px 6px 2px;
}
body.sal-keyboard-open .sal-welcome h1{
  font-size:17px;
  line-height:1;
}
body.sal-keyboard-open .sal-welcome p{
  margin-top:3px;
  font-size:8.5px;
}
body.sal-keyboard-open .sal-visual{
  height:1px!important;
  min-height:1px!important;
  max-height:1px!important;
  margin:0!important;
  overflow:hidden!important;
  opacity:0;
  pointer-events:none;
}
body.sal-keyboard-open .sal-education-quote,
body.sal-keyboard-open .sal-background-art,
body.sal-keyboard-open .sal-campus-lines,
body.sal-keyboard-open .sal-lottie,
body.sal-keyboard-open .sal-hero-media{
  display:none!important;
}
body.sal-keyboard-open .sal-login-card{
  align-self:start;
  width:100%;
  margin-top:3px;
  padding:10px 11px 11px;
  border-radius:21px;
  box-shadow:0 12px 28px rgba(33,38,90,.10);
}
body.sal-keyboard-open .sal-card-head{
  gap:8px;
  margin-bottom:7px;
}
body.sal-keyboard-open .sal-lock-icon{
  flex-basis:36px;
  width:36px;height:36px;
  border-radius:11px;
}
body.sal-keyboard-open .sal-card-head h2{
  font-size:15px;
}
body.sal-keyboard-open .sal-card-head p{
  margin-top:1px;
  font-size:8.5px;
}
body.sal-keyboard-open #student-login-form{
  gap:6px;
}
body.sal-keyboard-open .sal-field{
  gap:2px;
}
body.sal-keyboard-open .sal-field>span{
  padding-left:3px;
  font-size:9px;
}
body.sal-keyboard-open .sal-field>small{
  display:none;
}
body.sal-keyboard-open .sal-input{
  min-height:43px;
  grid-template-columns:39px minmax(0,1fr) 38px;
  border-radius:13px;
}
body.sal-keyboard-open .sal-input>i{
  width:31px;height:31px;
  margin-left:5px;
  border-radius:9px;
  font-size:14px;
}
body.sal-keyboard-open .sal-input input{
  height:41px;
  font-size:16px; /* prevents Android/iOS zoom-like behavior */
}
body.sal-keyboard-open .sal-password-toggle{
  width:37px;height:37px;
  font-size:16px;
}
body.sal-keyboard-open .sal-remember{
  gap:6px;
  font-size:9px;
}
body.sal-keyboard-open .sal-remember>span{
  width:18px;height:18px;
  border-radius:5px;
}
body.sal-keyboard-open .sal-login-button{
  min-height:45px;
  border-radius:14px;
  font-size:14px;
}
body.sal-keyboard-open .sal-button-arrow{
  width:25px;height:25px;
}

/* While we dismiss the keyboard before POST, remove transitions that can stutter
   inside Android WebView. */
body.sal-submit-prepare *{
  animation-play-state:paused!important;
}
body.sal-submit-prepare .sal-login-button{
  animation:none!important;
}

/* Premium white success handoff — green check on white, no heavy full-screen purple. */
.sal-success-screen{
  position:absolute;
  z-index:80;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:24px;
  overflow:hidden;
  text-align:center;
  color:#17233a;
  background:
    radial-gradient(circle at 50% 42%,rgba(25,183,118,.10),transparent 27%),
    linear-gradient(180deg,#ffffff,#fbfffd);
  opacity:0;
  transform:scale(1.015);
  animation:none;
  transition:opacity .18s ease,transform .28s cubic-bezier(.2,.8,.2,1);
}
.sal-success-screen.is-ready{
  opacity:1;
  transform:scale(1);
}
.sal-success-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(.2px);
}
.sal-success-glow.one{
  width:180px;height:180px;
  background:rgba(25,183,118,.065);
  top:calc(50% - 120px);
  left:calc(50% - 90px);
}
.sal-success-glow.two{
  width:88px;height:88px;
  border:1px solid rgba(25,183,118,.10);
  top:calc(50% - 73px);
  left:calc(50% - 44px);
}
.sal-success-badge{
  position:relative;
  z-index:2;
  width:82px;height:82px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#14a86c;
  background:#fff;
  border:1px solid #d8f2e7;
  box-shadow:
    0 16px 38px rgba(22,141,94,.13),
    inset 0 0 0 7px #f2fbf7;
  font-size:37px;
  transform:scale(.55);
  opacity:0;
}
.sal-success-screen.is-ready .sal-success-badge{
  animation:salPremiumTick .48s cubic-bezier(.18,1.3,.35,1) .05s forwards;
}
.sal-success-ring{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid rgba(20,168,108,.18);
  opacity:0;
}
.sal-success-screen.is-ready .sal-success-ring{
  animation:salSuccessRing .7s ease-out .18s forwards;
}
@keyframes salPremiumTick{
  to{opacity:1;transform:scale(1)}
}
@keyframes salSuccessRing{
  0%{opacity:.75;transform:scale(.82)}
  100%{opacity:0;transform:scale(1.22)}
}
.sal-success-screen>strong{
  position:relative;z-index:2;
  margin-top:5px;
  color:#17243a;
  font-size:22px;
  font-weight:850;
  letter-spacing:-.025em;
  opacity:0;
  transform:translateY(6px);
  animation:none;
}
.sal-success-screen.is-ready>strong{
  animation:salSuccessText .28s ease .22s forwards;
}
.sal-success-screen>p{
  position:relative;z-index:2;
  margin:0;
  color:#7a8796;
  font-size:11px;
  opacity:0;
  transform:translateY(6px);
  animation:none;
}
.sal-success-screen.is-ready>p{
  animation:salSuccessText .28s ease .29s forwards;
}
@keyframes salSuccessText{
  to{opacity:1;transform:none}
}
.sal-success-loader{
  position:relative;z-index:2;
  width:94px;height:3px;
  margin-top:7px;
  overflow:hidden;
  border-radius:999px;
  background:#e3f3ec;
  opacity:0;
}
.sal-success-screen.is-ready .sal-success-loader{
  animation:salLoaderFade .2s ease .34s forwards;
}
.sal-success-loader i{
  display:block;
  width:40%;height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#19b776,#62d5a2);
  animation:salPremiumLoader .72s ease-in-out infinite;
}
@keyframes salLoaderFade{to{opacity:1}}
@keyframes salPremiumLoader{
  from{transform:translateX(-120%)}
  to{transform:translateX(260%)}
}

/* Small Android WebView landscape/keyboard heights. */
@media(max-height:520px){
  body:not(.sal-keyboard-open) .sal-page{
    padding-top:4px;
  }
  body:not(.sal-keyboard-open) .sal-visual{
    height:90px;
    min-height:90px;
    max-height:90px;
  }
  body:not(.sal-keyboard-open) .sal-lottie{
    height:86px;
    min-height:86px;
  }
}


/* =========================================================
   Login success Welcome handoff v1.5
   Uploaded Welcome Lottie: 2.0s, centered, play once.
   ========================================================= */
.sal-success-screen.sal-welcome-handoff{
  position:absolute;
  z-index:80;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:
    calc(22px + env(safe-area-inset-top,0px))
    22px
    calc(22px + env(safe-area-inset-bottom,0px));
  overflow:hidden;
  text-align:center;
  color:#17233a;
  background:
    radial-gradient(circle at 50% 38%,rgba(112,94,245,.12),transparent 27%),
    radial-gradient(circle at 78% 68%,rgba(44,139,255,.08),transparent 25%),
    linear-gradient(180deg,#ffffff 0%,#fbfbff 48%,#f8f9fd 100%);
  opacity:0;
  transform:scale(1.012);
  transition:
    opacity .16s ease,
    transform .26s cubic-bezier(.2,.8,.2,1);
}
.sal-success-screen.sal-welcome-handoff.is-ready{
  opacity:1;
  transform:scale(1);
}
.sal-welcome-ambient{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  opacity:0;
}
.sal-welcome-handoff.is-ready .sal-welcome-ambient{
  animation:salWelcomeAmbient 2s ease-out both;
}
.sal-welcome-ambient.one{
  width:240px;
  height:240px;
  top:calc(50% - 185px);
  left:calc(50% - 120px);
  background:rgba(101,78,237,.055);
}
.sal-welcome-ambient.two{
  width:150px;
  height:150px;
  top:calc(50% - 120px);
  left:calc(50% - 75px);
  border:1px solid rgba(103,87,222,.10);
}
@keyframes salWelcomeAmbient{
  0%{opacity:0;transform:scale(.72)}
  20%{opacity:1}
  100%{opacity:.15;transform:scale(1.18)}
}

.sal-success-welcome-lottie{
  position:relative;
  z-index:2;
  width:min(340px,84vw);
  height:112px;
  min-height:112px;
  display:grid;
  place-items:center;
  overflow:visible;
  opacity:0;
  transform:translateY(9px) scale(.94);
}
.sal-welcome-handoff.is-ready .sal-success-welcome-lottie{
  animation:salWelcomeLottieIn .28s cubic-bezier(.2,.9,.25,1) .03s forwards;
}
@keyframes salWelcomeLottieIn{
  to{opacity:1;transform:none}
}
.sal-success-welcome-lottie svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
}
.sal-success-welcome-fallback{
  color:#6558d8;
  font-size:39px;
  font-weight:900;
  letter-spacing:-.045em;
}
.sal-success-welcome-lottie.has-lottie .sal-success-welcome-fallback{
  display:none;
}

.sal-success-copy{
  position:relative;
  z-index:3;
  display:grid;
  justify-items:center;
  gap:3px;
  margin-top:-2px;
}
.sal-success-kicker{
  color:#969dac;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  opacity:0;
  transform:translateY(7px);
}
.sal-welcome-handoff.is-ready .sal-success-kicker{
  animation:salWelcomeTextIn .26s ease .18s forwards;
}
.sal-success-name{
  max-width:min(340px,88vw);
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:"Segoe Script","Brush Script MT","Lucida Handwriting",cursive;
  font-size:clamp(27px,7.6vw,36px);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.02em;
  background:
    linear-gradient(
      105deg,
      var(--sal-primary) 0%,
      #4e75e9 34%,
      #8b49db 64%,
      var(--sal-secondary) 100%
    );
  background-size:180% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:none;
  opacity:0;
  transform:translateY(9px) scale(.96);
}
.sal-welcome-handoff.is-ready .sal-success-name{
  animation:
    salWelcomeNameIn .34s cubic-bezier(.18,1.12,.3,1) .26s forwards,
    salWelcomeNameGradient 1.35s ease-in-out .48s forwards;
}
@keyframes salWelcomeNameIn{
  to{opacity:1;transform:none}
}
@keyframes salWelcomeNameGradient{
  0%{background-position:0% 50%}
  55%{background-position:100% 50%}
  100%{background-position:68% 50%}
}
.sal-success-copy>p{
  margin:3px 0 0;
  color:#858d9b;
  font-size:12px;
  font-weight:650;
  opacity:0;
  transform:translateY(6px);
}
.sal-welcome-handoff.is-ready .sal-success-copy>p{
  animation:salWelcomeTextIn .26s ease .39s forwards;
}
@keyframes salWelcomeTextIn{
  to{opacity:1;transform:none}
}

.sal-welcome-handoff .sal-success-loader{
  position:relative;
  z-index:3;
  width:110px;
  height:3px;
  margin-top:10px;
  overflow:hidden;
  border-radius:999px;
  background:#e8e9ef;
  opacity:0;
}
.sal-welcome-handoff.is-ready .sal-success-loader{
  animation:salWelcomeLoaderFade .18s ease .48s forwards;
}
.sal-welcome-handoff .sal-success-loader i{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--sal-primary),#7c6cf0,var(--sal-secondary));
  animation:salWelcomeLoader 1.1s ease-in-out infinite;
}
@keyframes salWelcomeLoaderFade{to{opacity:1}}
@keyframes salWelcomeLoader{
  from{transform:translateX(-120%)}
  to{transform:translateX(260%)}
}

@media(max-width:390px){
  .sal-success-welcome-lottie{
    width:min(310px,86vw);
    height:102px;
    min-height:102px;
  }
  .sal-success-kicker{font-size:11.5px}
  .sal-success-name{font-size:29px}
}
@media(max-height:560px){
  .sal-success-welcome-lottie{
    height:88px;
    min-height:88px;
  }
  .sal-success-name{font-size:25px}
  .sal-welcome-handoff .sal-success-loader{margin-top:6px}
}