/* QLNS Glass v2 - visual-only, scopes every change to the signed-out view. */
html,body { min-width:0; }
body.qlns-login-active { margin:0; background:#0c3d7a; }
body.qlns-login-active .shell {
  --glass-edge:rgba(255,255,255,.47);
  position:relative; isolation:isolate; box-sizing:border-box;
  min-height:100svh; width:100%; overflow-x:clip;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,460px);
  align-items:center; gap:clamp(35px,5vw,90px);
  padding:clamp(28px,5vw,76px) clamp(28px,7vw,110px);
  background:#0c62b3 url('/background.webp') center center/cover no-repeat;
}
/* A dim scenic scrim is essential: blur alone on a pale backdrop looks opaque. */
body.qlns-login-active .shell::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,rgba(1,24,63,.65),rgba(6,53,116,.31) 51%,rgba(4,34,78,.32)),
             linear-gradient(0deg,rgba(0,29,68,.2),transparent 42%);
}
body.qlns-login-active .intro {
  position:relative; z-index:1; min-width:0; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  width:auto; max-width:570px; transform:none; top:auto; left:auto;
  padding:0; background:none; color:white;
}
body.qlns-login-active .intro > :not(.qlns-slogan){ display:none !important; }
.qlns-slogan {display:none;}
body.qlns-login-active .qlns-slogan {display:block; max-width:540px; text-shadow:0 3px 24px rgba(0,24,69,.36);}
body.qlns-login-active .qlns-slogan h2 {
  display:flex; flex-direction:column; gap:3px; margin:0; padding:0;
  font-family:system-ui,"Segoe UI",Arial,sans-serif; font-size:clamp(29px,3.1vw,48px);
  line-height:1.17; font-weight:850; letter-spacing:.018em; color:#fff;
  overflow-wrap:normal; word-break:keep-all;
}
body.qlns-login-active .qlns-slogan h2 span {display:block; white-space:nowrap;}
body.qlns-login-active .qlns-slogan .qlns-line {width:64px;height:3px;border-radius:3px;background:#c7ebff;margin:24px 0 17px;}
body.qlns-login-active .qlns-slogan p {color:rgba(255,255,255,.94);font-size:clamp(14px,1.3vw,17px);line-height:1.62;margin:0;letter-spacing:0;}
body.qlns-login-active .right {
  position:relative; z-index:1; grid-column:2; width:100%; min-width:0;
  display:flex; justify-content:center; align-items:center; padding:0; min-height:0;
}
body.qlns-login-active .right > .card:not([hidden]) {
  position:relative; isolation:isolate; overflow:hidden; box-sizing:border-box;
  width:100%; max-width:460px; min-width:0; padding:30px 35px 25px;
  border:1px solid var(--glass-edge); border-radius:26px;
  background:linear-gradient(136deg,rgba(255,255,255,.22),rgba(221,241,255,.09) 59%,rgba(255,255,255,.16));
  -webkit-backdrop-filter:blur(28px) saturate(145%);backdrop-filter:blur(28px) saturate(145%);
  box-shadow:0 26px 68px rgba(0,22,63,.29),inset 0 1px 0 rgba(255,255,255,.36);
  color:#fff;
}
body.qlns-login-active .right > .card:not([hidden])::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(155deg,rgba(255,255,255,.17),transparent 48%,rgba(12,79,145,.08));
}
body.qlns-login-active .right > .card:not([hidden]) > .icon {display:none;}
body.qlns-login-active #loginCard > .qlns-login-logo{width:76px;height:76px;object-fit:contain;display:block;margin:0 auto 12px;filter:drop-shadow(0 5px 10px rgba(0,24,68,.2));}
body.qlns-login-active #loginCard > h2{text-align:center;font-size:25px;line-height:1.2;font-weight:850;letter-spacing:.02em;color:#fff;margin:0 0 3px;}
body.qlns-login-active #loginCard > p{text-align:center;color:rgba(255,255,255,.81);font-size:12px;letter-spacing:.1em;line-height:1.4;margin:4px 0 17px;}
body.qlns-login-active #loginCard > p::after{content:"";display:block;width:42px;height:2px;background:#a9e9ff;border-radius:2px;margin:14px auto 0;}
body.qlns-login-active #loginCard form{margin:0;display:flex;flex-direction:column;gap:0;}
body.qlns-login-active #loginCard form > label{color:#fff;font-size:12px;font-weight:700;margin:0 0 7px;text-shadow:0 1px 4px rgba(0,28,67,.25);}
body.qlns-login-active #loginCard form > input,
body.qlns-login-active #loginCard form > .qlns-pass-wrap > input{
  box-sizing:border-box;width:100%;height:48px;margin:0 0 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.73);background:rgba(250,253,255,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);padding:0 15px;
  color:#183c60;font-size:14px;outline:0;
}
body.qlns-login-active #loginCard form > .qlns-pass-wrap > input{padding-right:52px;}
body.qlns-login-active #loginCard input::placeholder{color:#58718a;}
body.qlns-login-active #loginCard input:focus{outline:2px solid #e0f3ff;outline-offset:2px;background:rgba(255,255,255,.91);}
body.qlns-login-active #loginCard #submit{display:block;width:100%;height:49px;border:0;border-radius:12px;background:linear-gradient(100deg,#147fe5,#0871df);color:#fff;font-size:14px;font-weight:850;box-shadow:0 7px 15px rgba(0,57,128,.25);}
body.qlns-login-active #loginCard #googleLogin{width:100%;height:45px;min-height:45px;padding:10px 12px;margin:14px 0 0;border-radius:12px;background:rgba(255,255,255,.82)!important;border:1px solid rgba(255,255,255,.83)!important;color:#1762ac!important;font-size:13px;box-shadow:none;}
body.qlns-login-active #loginCard #forgotToggle {display:block;margin:9px auto 0;padding:5px 9px;color:#e5f6ff;font-weight:650;font-size:12px;}
body.qlns-login-active #loginCard small{display:block;text-align:center;color:rgba(255,255,255,.79);font-size:11px;line-height:1.45;margin:14px 0 0;}
body.qlns-login-active #loginCard #error,body.qlns-login-active #loginCard #googleStatus{color:#ffe7ea;font-size:12px;line-height:1.4;min-height:0;margin:5px 0;}
body.qlns-login-active #forgotCard h2,body.qlns-login-active #resetCard h2{color:#fff;}
body.qlns-login-active #forgotCard p,body.qlns-login-active #resetCard p{color:rgba(255,255,255,.9);}
body.qlns-login-active #forgotCard label,body.qlns-login-active #resetCard label{color:#fff;}
body.qlns-login-active #forgotCard .textlink,body.qlns-login-active #resetCard .textlink{color:#ecf7ff;}
.qlns-pass-wrap{position:relative;display:block;width:100%;}
.qlns-pass-wrap .qlns-eye{position:absolute;right:8px;top:6px;width:38px;height:36px;display:grid;place-items:center;border:0;background:transparent;box-shadow:none;color:#175d99;font-size:18px;padding:0;line-height:1;}
@media(max-width:900px){
  body.qlns-login-active .shell{grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:24px;padding:30px;}
  body.qlns-login-active .qlns-slogan h2{font-size:clamp(24px,3.5vw,32px);}
  body.qlns-login-active .right>.card:not([hidden]){padding:25px 26px 22px;}
}
@media(max-width:700px){
  body.qlns-login-active .shell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;min-height:100svh;overflow-x:hidden;padding:32px 18px 38px;background-position:62% center;}
  body.qlns-login-active .shell::before{background:linear-gradient(180deg,rgba(0,27,71,.58),rgba(0,37,79,.38) 50%,rgba(0,31,72,.61));}
  body.qlns-login-active .intro{position:relative;display:block;width:min(100%,440px);max-width:440px;min-height:0;margin:0;padding:0;text-align:center;}
  body.qlns-login-active .qlns-slogan{width:100%;max-width:none;}
  body.qlns-login-active .qlns-slogan h2{font-size:clamp(23px,5vw,30px);line-height:1.17;gap:0;letter-spacing:.015em;}
  body.qlns-login-active .qlns-slogan h2 span{white-space:nowrap;}
  body.qlns-login-active .qlns-slogan .qlns-line{width:42px;height:2px;margin:12px auto 9px;}
  body.qlns-login-active .qlns-slogan p{font-size:12px;line-height:1.48;}
  body.qlns-login-active .right{width:min(100%,440px);grid-column:auto;display:flex;margin:0;}
  body.qlns-login-active .right>.card:not([hidden]){max-width:440px;padding:24px 24px 21px;border-radius:22px;}
  body.qlns-login-active #loginCard>.qlns-login-logo{width:65px;height:65px;margin-bottom:7px;}
  body.qlns-login-active #loginCard>h2{font-size:23px;}
  body.qlns-login-active #loginCard>p{margin-bottom:12px;}
  body.qlns-login-active #loginCard form>input,body.qlns-login-active #loginCard form>.qlns-pass-wrap>input{height:46px;margin-bottom:11px;}
  body.qlns-login-active #loginCard #submit{height:46px;}
}
@media(max-width:380px){body.qlns-login-active .shell{padding:21px 12px 28px;gap:12px;}body.qlns-login-active .qlns-slogan h2{font-size:22px;}body.qlns-login-active .right>.card:not([hidden]){padding:19px 17px;}body.qlns-login-active #loginCard>.qlns-login-logo{width:55px;height:55px;}}
@media(prefers-reduced-motion:reduce){body.qlns-login-active *,body.qlns-login-active *::before{transition:none!important;animation:none!important;}}

/* Final phone layout: scenic banner above a genuinely translucent card. */
@media (max-width:700px) {
  body.qlns-login-active .shell {
    width:100%; min-height:100svh; height:auto;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(12px,2.5vh,24px);
    padding:calc(18px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
    background-position:68% center; background-attachment:scroll;
  }
  body.qlns-login-active .shell::before {
    background:linear-gradient(180deg,rgba(0,35,79,.44),rgba(0,53,104,.24) 40%,rgba(0,30,69,.50));
  }
  body.qlns-login-active .intro, body.qlns-login-active .right {
    flex:0 0 auto; width:min(100%,410px); max-width:410px;
  }
  body.qlns-login-active .qlns-slogan {text-align:center;}
  body.qlns-login-active .qlns-slogan h2 {
    display:flex; flex-direction:column; align-items:center; gap:1px;
    font-size:clamp(23px,6.5vw,30px); line-height:1.16; letter-spacing:.01em;
    font-weight:900; text-shadow:0 2px 13px rgba(0,30,70,.4);
  }
  body.qlns-login-active .qlns-slogan h2 span {white-space:nowrap;max-width:100%;}
  body.qlns-login-active .qlns-slogan p {font-size:12px;line-height:1.45;color:#edf8ff;}
  body.qlns-login-active .right > .card:not([hidden]) {
    width:100%; max-width:410px; min-width:0;
    padding:clamp(18px,4.5vw,28px) clamp(17px,5vw,26px) 20px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.65);
    background:linear-gradient(140deg,rgba(255,255,255,.17),rgba(222,242,255,.08) 60%,rgba(255,255,255,.13));
    -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 20px 50px rgba(0,23,63,.27),inset 0 1px rgba(255,255,255,.4);
  }
  body.qlns-login-active #loginCard > .qlns-login-logo {width:65px;height:65px;margin-bottom:9px;}
  body.qlns-login-active #loginCard > h2 {font-size:24px;}
  body.qlns-login-active #loginCard > p {font-size:11px;margin:4px 0 13px;}
  body.qlns-login-active #loginCard form > label {margin-bottom:5px;font-size:12px;}
  body.qlns-login-active #loginCard form > input,
  body.qlns-login-active #loginCard form > .qlns-pass-wrap > input {
    height:45px;margin-bottom:10px;background:rgba(255,255,255,.78);
  }
  body.qlns-login-active #loginCard #submit {height:46px;}
  body.qlns-login-active #loginCard #googleLogin {height:43px;min-height:43px;margin-top:11px;}
  body.qlns-login-active #loginCard small {font-size:10px;margin-top:9px;}
}
@media (max-width:700px) and (max-height:690px){
  body.qlns-login-active .shell{justify-content:flex-start;gap:9px;padding-top:10px;padding-bottom:14px;}
  body.qlns-login-active .qlns-slogan h2{font-size:21px;}
  body.qlns-login-active .qlns-slogan .qlns-line{margin:7px auto 5px;}
  body.qlns-login-active .qlns-slogan p{font-size:10px;}
  body.qlns-login-active .right>.card:not([hidden]){padding:13px 16px 13px;}
  body.qlns-login-active #loginCard>.qlns-login-logo{width:46px;height:46px;margin-bottom:5px;}
  body.qlns-login-active #loginCard>h2{font-size:21px;}
  body.qlns-login-active #loginCard>p{margin-bottom:8px;}
  body.qlns-login-active #loginCard form>input,
  body.qlns-login-active #loginCard form>.qlns-pass-wrap>input{height:40px;margin-bottom:7px;}
  body.qlns-login-active #loginCard #submit{height:40px;}
  body.qlns-login-active #loginCard #googleLogin{height:40px;min-height:40px;margin-top:7px;}
}


/* v3 refinement: light, breathable, mobile-first glass; no auth logic changes. */
body.qlns-login-active .shell {
  background-position:center center;
}
body.qlns-login-active .shell::before {
  background:linear-gradient(90deg,rgba(4,57,125,.29),rgba(8,79,144,.08) 55%,rgba(4,39,91,.11));
}
body.qlns-login-active .right > .card:not([hidden]) {
  border:1px solid rgba(255,255,255,.68);
  background:linear-gradient(145deg,rgba(234,247,255,.30),rgba(224,242,255,.14) 48%,rgba(238,250,255,.24));
  -webkit-backdrop-filter:blur(18px) saturate(133%);
  backdrop-filter:blur(18px) saturate(133%);
  box-shadow:0 20px 52px rgba(8,41,89,.17),inset 0 1px rgba(255,255,255,.54);
}
body.qlns-login-active .right > .card:not([hidden])::before {background:linear-gradient(145deg,rgba(255,255,255,.13),transparent 55%);}
body.qlns-login-active #loginCard > h2 {color:#0c3157;font-weight:800;letter-spacing:.012em;}
body.qlns-login-active #loginCard > p {color:#416886;letter-spacing:.105em;}
body.qlns-login-active #loginCard > p::after {background:#1177e5;margin-top:12px;}
body.qlns-login-active #loginCard form > label {color:#173e62;text-shadow:none;}
body.qlns-login-active #loginCard form > input,
body.qlns-login-active #loginCard form > .qlns-pass-wrap > input {
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.88);
  box-shadow:0 1px 7px rgba(11,63,107,.04),inset 0 1px 0 rgba(255,255,255,.74);
  color:#173451;
}
body.qlns-login-active #loginCard input:focus {outline:2px solid rgba(19,119,237,.75);outline-offset:1px;}
body.qlns-login-active #loginCard #submit {
  border-radius:12px;background:linear-gradient(110deg,#1489f2,#056bdc);
  box-shadow:0 8px 18px rgba(8,92,181,.16);
  font-size:14px;font-weight:750;letter-spacing:.015em;
}
body.qlns-login-active #loginCard #googleLogin {
  margin-top:0;border-radius:12px;
  background:rgba(255,255,255,.80)!important;color:#173b5d!important;
  border:1px solid rgba(255,255,255,.88)!important;
  font-size:14px;font-weight:650;display:flex;align-items:center;justify-content:center;gap:11px;
}
body.qlns-login-active #loginCard .qlns-or {
  display:flex;align-items:center;gap:12px;color:#315e80;font-size:12px;
  margin:14px 3px 13px;text-align:center;
}
body.qlns-login-active #loginCard .qlns-or::before,
body.qlns-login-active #loginCard .qlns-or::after {content:'';height:1px;flex:1;background:rgba(39,91,127,.23);}
body.qlns-login-active #loginCard #forgotToggle {color:#065ba8;font-weight:600;}
body.qlns-login-active #loginCard small {color:#365c7b;}
body.qlns-login-active #loginCard #error,
body.qlns-login-active #loginCard #googleStatus {color:#952828;}
body.qlns-login-active #loginCard .qlns-google-g {display:inline-flex;width:20px;height:20px;flex:0 0 20px;}
body.qlns-login-active #loginCard .qlns-google-g svg {width:100%;height:100%;}
body.qlns-login-active .qlns-slogan h2 {font-weight:830;letter-spacing:.004em;}
@media (max-width:700px){
  body.qlns-login-active .shell {
    justify-content:flex-start;gap:20px;min-height:100svh;
    padding:calc(34px + env(safe-area-inset-top)) 15px calc(32px + env(safe-area-inset-bottom));
    background-position:63% center;
  }
  body.qlns-login-active .shell::before {background:linear-gradient(180deg,rgba(0,64,134,.15),transparent 38%,rgba(5,52,104,.12));}
  body.qlns-login-active .intro,body.qlns-login-active .right {width:min(100%,390px);max-width:390px;}
  body.qlns-login-active .qlns-slogan {text-align:left;max-width:100%;}
  body.qlns-login-active .qlns-slogan h2 {
    align-items:flex-start;font-size:clamp(24px,6.4vw,30px);line-height:1.11;
    letter-spacing:.012em;font-weight:850;text-shadow:0 3px 17px rgba(0,39,97,.25);
  }
  body.qlns-login-active .qlns-slogan .qlns-line {margin:12px 0 11px;width:43px;}
  body.qlns-login-active .qlns-slogan p {font-size:12px;line-height:1.48;color:#fff;}
  body.qlns-login-active .right > .card:not([hidden]) {
    border-radius:23px;padding:22px clamp(17px,5vw,25px) 20px;
    background:linear-gradient(137deg,rgba(237,250,255,.28),rgba(214,240,255,.13) 57%,rgba(233,247,255,.24));
    -webkit-backdrop-filter:blur(17px) saturate(132%);
    backdrop-filter:blur(17px) saturate(132%);
    box-shadow:0 16px 42px rgba(1,48,105,.19),inset 0 1px rgba(255,255,255,.56);
  }
  body.qlns-login-active #loginCard > .qlns-login-logo {width:64px;height:64px;margin-bottom:10px;}
  body.qlns-login-active #loginCard > h2 {font-size:23px;}
  body.qlns-login-active #loginCard > p {font-size:11px;}
  body.qlns-login-active #loginCard form>input,
  body.qlns-login-active #loginCard form>.qlns-pass-wrap>input {height:45px;margin-bottom:11px;}
  body.qlns-login-active #loginCard #googleLogin {height:45px;min-height:45px;}
}
@media (max-width:700px) and (max-height:690px){
  body.qlns-login-active .shell {gap:12px;padding-top:12px;}
  body.qlns-login-active .qlns-slogan h2{font-size:23px;}
  body.qlns-login-active .right>.card:not([hidden]){padding:16px 18px;}
  body.qlns-login-active #loginCard>.qlns-login-logo{width:48px;height:48px;}
  body.qlns-login-active #loginCard .qlns-or{margin:9px 3px;}
}

/* V4: balance the composition, unify input spacing and replace eye glyph with SVG. */
body.qlns-login-active .shell { box-sizing:border-box; }
body.qlns-login-active .right > #loginCard:not([hidden]) {
  padding:clamp(22px,2.6vw,30px) clamp(21px,3vw,34px) 23px;
  border-radius:25px;
  background:linear-gradient(145deg,rgba(245,252,255,.28),rgba(217,238,252,.18) 54%,rgba(241,250,255,.25));
  border:1px solid rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(21px) saturate(135%);
  backdrop-filter:blur(21px) saturate(135%);
}
body.qlns-login-active #loginCard > .qlns-login-logo {margin-bottom:8px;}
body.qlns-login-active #loginCard > h2 {margin-bottom:4px;}
body.qlns-login-active #loginCard > p {margin:2px 0 16px;}
body.qlns-login-active #loginCard > p::after {margin-top:11px;}
body.qlns-login-active #loginCard form > label {margin:0 0 5px;font-size:12px;}
body.qlns-login-active #loginCard form > input,
body.qlns-login-active #loginCard form > .qlns-pass-wrap > input {
  height:46px; margin-bottom:11px; border-radius:12px;
  font-size:14px; font-weight:450;
}
body.qlns-login-active #loginCard form > .qlns-pass-wrap {width:100%;position:relative;}
body.qlns-login-active #loginCard form > .qlns-pass-wrap > input {padding-right:55px;}
body.qlns-login-active #loginCard .qlns-eye {
  -webkit-appearance:none;appearance:none;
  position:absolute;right:5px;top:2px;
  z-index:2;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;margin:0;
  border:0;border-radius:10px;background:transparent;
  color:#1678d5; box-shadow:none;cursor:pointer;
  transform:none;line-height:1;
}
body.qlns-login-active #loginCard .qlns-eye svg {display:block;width:21px;height:21px;stroke:currentColor;fill:none;}
body.qlns-login-active #loginCard .qlns-eye:hover {background:rgba(15,104,206,.09);}
body.qlns-login-active #loginCard .qlns-eye:focus-visible {outline:2px solid #116cd7;outline-offset:-3px;}
body.qlns-login-active #loginCard #submit {height:46px;min-height:46px;margin-top:2px;font-size:14px;}
body.qlns-login-active #loginCard .qlns-or {margin:10px 0 9px;font-size:12px;}
body.qlns-login-active #loginCard #googleLogin {height:44px;min-height:44px;padding:8px 12px;font-size:13px;}
body.qlns-login-active #loginCard #forgotToggle {margin:8px auto 0;padding:5px 8px;}
body.qlns-login-active #loginCard small {margin-top:7px;font-size:10px;opacity:.78;}
body.qlns-login-active #loginCard #error:empty,
body.qlns-login-active #loginCard #googleStatus:empty {display:none!important;margin:0!important;padding:0!important;min-height:0!important;}
@media (max-width:700px) {
  body.qlns-login-active .shell {
    justify-content:flex-start;align-items:center;gap:clamp(12px,2vh,19px);
    width:100%;min-height:100svh;
    padding:calc(23px + env(safe-area-inset-top)) 15px calc(24px + env(safe-area-inset-bottom));
    background-size:cover;background-position:62% center;
  }
  body.qlns-login-active .intro,body.qlns-login-active .right {
    box-sizing:border-box;width:min(100%,390px);max-width:390px;margin:0;
  }
  body.qlns-login-active .qlns-slogan h2 {font-size:clamp(23px,6.25vw,28px);line-height:1.13;gap:1px;}
  body.qlns-login-active .qlns-slogan .qlns-line {margin:10px 0 8px;}
  body.qlns-login-active .qlns-slogan p {font-size:11.5px;line-height:1.42;}
  body.qlns-login-active .right > #loginCard:not([hidden]) {
    box-sizing:border-box;max-width:390px;padding:19px 19px 16px;border-radius:22px;
  }
  body.qlns-login-active #loginCard > .qlns-login-logo {width:60px;height:60px;margin-bottom:7px;}
  body.qlns-login-active #loginCard > h2 {font-size:22px;line-height:1.15;}
  body.qlns-login-active #loginCard > p {font-size:10px;margin:3px 0 12px;}
  body.qlns-login-active #loginCard > p::after {margin-top:9px;}
  body.qlns-login-active #loginCard form > label {font-size:11px;margin-bottom:4px;}
  body.qlns-login-active #loginCard form > input,
  body.qlns-login-active #loginCard form > .qlns-pass-wrap > input {height:43px;margin-bottom:9px;font-size:13px;}
  body.qlns-login-active #loginCard .qlns-eye {top:1px;width:41px;height:41px;}
  body.qlns-login-active #loginCard .qlns-eye svg {width:20px;height:20px;}
  body.qlns-login-active #loginCard #submit {height:43px;min-height:43px;}
  body.qlns-login-active #loginCard .qlns-or {margin:9px 0 8px;}
  body.qlns-login-active #loginCard #googleLogin {height:42px;min-height:42px;}
  body.qlns-login-active #loginCard #forgotToggle {margin-top:5px;}
  body.qlns-login-active #loginCard small {margin-top:4px;font-size:9px;}
}
@media (max-width:380px) {
  body.qlns-login-active .shell {padding:18px 12px 22px;gap:11px;}
  body.qlns-login-active .right > #loginCard:not([hidden]) {padding:16px 16px 14px;}
  body.qlns-login-active #loginCard > .qlns-login-logo {width:53px;height:53px;}
}


/* V5 MOBILE HEIGHT FIX: center the whole group inside the viewport.
   This avoids the large empty blue area below the login card. */
@media (max-width:700px) {
  body.qlns-login-active, body.qlns-login-active .shell {
    width:100%; min-width:0;
  }
  body.qlns-login-active .shell {
    min-height:100vh; min-height:100dvh;
    height:auto;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:clamp(12px,2.2dvh,20px);
    padding:clamp(14px,3dvh,25px) 14px;
    padding-top:max(14px,env(safe-area-inset-top));
    padding-bottom:max(14px,env(safe-area-inset-bottom));
    overflow-x:clip;
    background-size:cover;
    background-position:65% center;
  }
  body.qlns-login-active .intro,
  body.qlns-login-active .right {
    flex:0 0 auto;
    min-height:0;
    width:min(100%,390px);
    max-width:390px;
    margin:0;
  }
  body.qlns-login-active .qlns-slogan h2 {
    font-size:clamp(22px,5.8vw,27px);
    line-height:1.09;
  }
  body.qlns-login-active .qlns-slogan .qlns-line {
    margin:8px 0 7px;
  }
  body.qlns-login-active .qlns-slogan p {
    font-size:11px;
    line-height:1.36;
  }
  body.qlns-login-active .right > #loginCard:not([hidden]) {
    padding:16px 18px 14px;
    border-radius:21px;
  }
  body.qlns-login-active #loginCard > .qlns-login-logo {
    width:52px;
    height:52px;
    margin-bottom:6px;
  }
  body.qlns-login-active #loginCard > h2 {
    font-size:21px;
    line-height:1.12;
    margin-bottom:2px;
  }
  body.qlns-login-active #loginCard > p {
    font-size:10px;
    margin:2px 0 9px;
  }
  body.qlns-login-active #loginCard > p::after {
    margin-top:7px;
  }
  body.qlns-login-active #loginCard form > label {
    font-size:11px;
    margin-bottom:3px;
  }
  body.qlns-login-active #loginCard form > input,
  body.qlns-login-active #loginCard form > .qlns-pass-wrap > input {
    height:40px;
    margin-bottom:8px;
    font-size:13px;
  }
  body.qlns-login-active #loginCard .qlns-eye {
    width:39px;height:39px;top:0;
  }
  body.qlns-login-active #loginCard #submit {
    height:41px;min-height:41px;
  }
  body.qlns-login-active #loginCard .qlns-or {
    margin:7px 0;
  }
  body.qlns-login-active #loginCard #googleLogin {
    height:40px;min-height:40px;
    padding:6px 10px;
  }
  body.qlns-login-active #loginCard #forgotToggle {
    margin-top:4px;padding:3px 8px;
  }
  body.qlns-login-active #loginCard small {
    margin-top:3px;font-size:9px;
  }
}
/* Short phones: remain fully usable without clipping buttons. */
@media (max-width:700px) and (max-height:680px) {
  body.qlns-login-active .shell {justify-content:flex-start;gap:10px;padding-top:12px;padding-bottom:12px;}
  body.qlns-login-active .qlns-slogan h2 {font-size:21px;line-height:1.06;}
  body.qlns-login-active .qlns-slogan p {font-size:10px;}
  body.qlns-login-active .right > #loginCard:not([hidden]) {padding:12px 16px 11px;}
  body.qlns-login-active #loginCard > .qlns-login-logo {width:45px;height:45px;margin-bottom:4px;}
  body.qlns-login-active #loginCard > p {margin-bottom:6px;}
  body.qlns-login-active #loginCard form > input,
  body.qlns-login-active #loginCard form > .qlns-pass-wrap > input {height:37px;margin-bottom:6px;}
  body.qlns-login-active #loginCard .qlns-eye {width:37px;height:37px;}
  body.qlns-login-active #loginCard #submit {height:39px;min-height:39px;}
  body.qlns-login-active #loginCard #googleLogin {height:38px;min-height:38px;}
  body.qlns-login-active #loginCard .qlns-or {margin:5px 0;}
}