/* Approved friendly login. Scoped so authenticated views retain their theme. */
body.login-page { background:#edf6ff; color:#071442; }
body.login-page .liquid-bg-container { display:none; }
body.login-page #app { display:block; min-height:100svh; }
body.login-page #app-main { padding:0 !important; margin:0 !important; width:100% !important; max-width:none !important; overflow:visible !important; }
.login-shell { --text-primary:#071442; --text-secondary:#344367; --text-muted:#657392; --error:#bd2547; min-height:100svh; padding:32px clamp(24px,3.4vw,64px) 18px; position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 0 100%,#d8eaff 0,transparent 40%),radial-gradient(ellipse at 100% 0,#d9f3f0 0,transparent 27%),#edf6ff; font-family:"Sukhumvit Set","Plus Jakarta Sans",system-ui,sans-serif; }
.login-shell::before,.login-shell::after { content:"";position:absolute;z-index:-1;width:190px;height:190px;border-radius:40%;border:1px dashed #76cfc9;opacity:.32;pointer-events:none; }
.login-shell::before {top:-90px;right:-60px;transform:rotate(20deg)}
.login-shell::after {bottom:-120px;left:-50px;transform:rotate(-20deg)}
.login-brand {position:relative;z-index:8;color:#071442; font-size:clamp(19px,2vw,29px);font-weight:850;letter-spacing:-.8px;line-height:1.3;}
.login-brand span {font-weight:650;white-space:nowrap;}
.login-layout {max-width:1480px;margin:30px auto 0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);gap:38px;align-items:center;min-height:calc(100svh - 140px);}
.login-hero {min-width:0;position:relative;align-self:center;}
.login-intro {position:relative;z-index:8;}
.login-intro h1 {font-size:clamp(36px,4.35vw,65px);font-weight:850;letter-spacing:-1.8px;line-height:1.27;margin:0 0 16px;color:#071442;}
.login-intro p {font-size:clamp(18px,1.9vw,27px);font-weight:700;color:#15234e;margin:0;display:inline-block;position:relative;}
.login-intro p::after {content:"";position:absolute;left:0;right:0;bottom:-9px;height:6px;border-top:3px solid #65c6c1;border-radius:50%;transform:rotate(-1deg)}
.login-art {height:420px;position:relative;margin-top:18px;}
.login-illustration {position:absolute;right:-20px;bottom:-10px;width:100%;height:auto;max-height:480px;object-fit:contain;object-position:bottom;z-index:1;pointer-events:none;animation:login-float 7s ease-in-out infinite;}
.login-orbit {position:absolute;width:100%;height:100%;inset:0;}
.login-bubble {position:absolute;right:36%;top:1%;background:#ffbdb2;color:#17254a;border-radius:48% 52% 48% 12%;padding:14px 20px;font-size:19px;line-height:1.15;font-weight:750;font-style:italic;transform:rotate(-8deg);z-index:3;}
.login-spark {position:absolute;font-size:42px;color:#63bfc1;z-index:3;}
.login-spark-one {left:-8px;top:16%;animation:login-sparkle 5s ease-in-out infinite;}
.login-spark-two {right:8%;top:8%;color:#ffa24a;animation:login-sparkle 5s 1s ease-in-out infinite;}
.login-chart {position:absolute;z-index:2;background:rgba(255,255,255,.96);border:1px solid #fff;border-radius:17px;padding:12px 15px;box-shadow:0 7px 15px #325e9820;color:#0d204c;pointer-events:none;}
.login-chart strong {display:block;font-size:12px;line-height:1.45;margin:2px 0 8px;}
.login-rings {left:0;top:8%;width:39%;animation:login-float 6s ease-in-out infinite;}
.login-ring-row {display:flex;gap:8px;align-items:center;}
.login-ring-item {flex:1;min-width:0;text-align:center;font-size:9px;font-weight:750;}
.login-ring-item svg {display:block;width:100%;max-height:74px;margin:0 auto 4px;}
.login-ring-item:nth-child(2) svg {transform:scale(1.07);}
.login-ring-track,.login-ring-fill {fill:none;stroke-width:7;}
.login-ring-track {stroke:#e5e7ed;}
.login-ring-fill {stroke-linecap:round;transform:rotate(-90deg);transform-origin:40px 40px;}
.login-parts {left:41%;top:28%;width:31%;z-index:0;}
.login-part-row {display:flex;align-items:center;gap:10px;margin:7px 0;font-size:9px;font-weight:650;}
.login-part-row>span {width:35px;flex-shrink:0;}
.login-part-row>div {flex:1;height:7px;background:#e9ebef;border-radius:20px;overflow:hidden;}
.login-part-row i {display:block;width:var(--part-width);background:var(--part-color);height:100%;border-radius:20px;}
.login-trend {left:3%;top:46%;width:30%;}
.login-trend svg {width:100%;display:block;}
.login-card.auth-container {width:100%;max-width:490px;justify-self:end;padding:44px 38px 42px;border-radius:27px;border:1px solid #ffffff;background:rgba(255,255,255,.98);box-shadow:0 12px 30px #4577af20;backdrop-filter:none;color:#071442;animation:login-enter .5s ease-out both;}
.login-card-heading {text-align:center;margin-bottom:34px;}
.login-wave {display:block;width:51px;height:51px;color:#fc827c;margin:0 auto 18px;transform-origin:50% 85%;animation:login-wave 1.1s .25s ease-in-out 1;}
.login-card h2 {font-size:clamp(30px,3vw,42px);color:#071442;font-weight:850;line-height:1.3;margin:0;letter-spacing:-.8px;}
.login-card #auth-form {gap:24px !important;}
.login-card .form-group {gap:9px;}
.login-card .form-group label {display:block;font-size:16px;line-height:1.5;color:#15234e;font-weight:650;margin-bottom:8px;}
body.login-page .login-card .form-control {width:100%;height:53px;background:#fff;color:#15234e;-webkit-text-fill-color:#15234e;caret-color:#155bff;border:1.5px solid #cbd1dc;border-radius:9px;padding:12px 14px;font:inherit;font-size:16px;box-shadow:none;transition:border-color .16s,box-shadow .16s;}
body.login-page .login-card .form-control:focus {border-color:#155bff;outline:none;box-shadow:0 0 0 4px #155bff14;}
body.login-page .login-card .form-control:-webkit-autofill {box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:#15234e;}
body.login-page .login-card .auth-password-field input {padding-right:55px;}
.login-card .auth-password-toggle {color:#687285;}
body.login-page .login-card #auth-submit-btn {height:56px !important;border:0;border-radius:9px;background:#1057f5;color:white;font-size:19px;font-weight:750;box-shadow:0 5px 13px #155bff1c;transition:transform .18s,box-shadow .18s,background .18s;}
body.login-page .login-card #auth-submit-btn:hover:not(:disabled) {background:#0648d9;transform:translateY(-2px);box-shadow:0 8px 17px #155bff30;}
body.login-page .login-card #auth-submit-btn:active:not(:disabled) {transform:translateY(0);}
.login-card #auth-submit-btn:disabled {opacity:.65;cursor:wait;}
.login-card :is(button,[role=tab]):focus-visible {outline:3px solid #155bff;outline-offset:4px;}
.login-card .auth-tabs {border:1px solid #e3e8f2;background:#f3f7ff;}
.login-card .auth-tab {color:#526287;}
.login-card .auth-tab.active {background:white;color:#104ad1;}
.login-card .auth-tabs {display:none !important;}
.login-mode-link-wrap {margin:0;text-align:center;color:#657392;font-size:13px;line-height:1.5;}
.login-mode-link {border:0;background:transparent;color:#1057f5;font:inherit;font-weight:750;padding:2px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.login-mode-link:hover {color:#0648d9;}
.login-card .redeem-login-notice {color:#203254;background:#eff6ff;border-color:#cbdcff;}
.login-footer {color:#233254;text-align:center;font-size:12px;letter-spacing:.5px;margin:22px 0 0;}
@keyframes login-float {0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes login-sparkle {0%,100%{opacity:.6;transform:rotate(-8deg)}50%{opacity:1;transform:rotate(8deg)}}
@keyframes login-wave {0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}70%{transform:rotate(10deg)}}
@keyframes login-enter {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px) {.login-layout{gap:60px}.login-art{height:480px}.login-illustration{max-height:540px}}
@media(max-width:1050px) and (min-width:701px) {.login-layout{gap:22px;grid-template-columns:minmax(0,1.25fr) minmax(310px,1fr)}.login-card.auth-container{padding:32px 25px}.login-art{height:335px}.login-parts{left:35%;width:35%;top:27%}.login-chart{padding:9px}.login-intro h1{font-size:36px}.login-bubble{font-size:15px}.login-trend{width:35%}.login-ring-item{font-size:8px}}
@media(max-width:700px) {
 .login-shell{padding:23px 20px 22px;}
 .login-brand{font-size:20px;letter-spacing:-.65px;}
 .login-layout{display:flex;flex-direction:column;gap:0;margin:34px auto 0;min-height:0;max-width:460px;}
 .login-hero{width:100%;}
 .login-intro{width:76%;}
 .login-intro h1{font-size:clamp(27px,7.8vw,38px);line-height:1.3;letter-spacing:-1px;margin-bottom:12px;}
 .login-intro p{font-size:15px;}
 .login-art{height:235px;margin-top:-35px;}
 .login-illustration{width:100%;right:-8px;bottom:0;max-height:none;}
 .login-bubble,.login-parts,.login-trend{display:none;}
 .login-rings{left:auto;right:-6px;top:-69px;width:122px;padding:9px;border-radius:12px;transform:scale(.85);transform-origin:top right;animation:none;}
 .login-ring-item{font-size:6px;}
 .login-ring-item svg{margin-bottom:2px;}
 .login-ring-row{gap:4px;}
 .login-spark-one{font-size:30px;left:5px;top:40%;}
 .login-spark-two{right:0;top:28%;font-size:27px;}
 .login-card.auth-container{max-width:none;padding:25px 23px 27px;border-radius:23px;margin-top:8px;}
 .login-card-heading{margin-bottom:24px;}
 .login-wave{width:37px;height:37px;margin-bottom:12px;}
 .login-card h2{font-size:30px;}
 .login-card #auth-form{gap:18px !important;}
 .login-card .form-group label{font-size:15px;margin-bottom:7px;}
 body.login-page .login-card .form-control{height:49px;}
 body.login-page .login-card #auth-submit-btn{height:51px !important;font-size:18px;}
 .login-footer{margin-top:26px;font-size:10px;}
}
@media(max-width:370px){.login-shell{padding-inline:15px}.login-brand{font-size:18px}.login-intro h1{font-size:26px}.login-intro p{font-size:13px}.login-rings{width:108px;right:-8px;top:-57px}.login-art{height:210px}.login-card.auth-container{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){.login-shell *,.login-shell *::before,.login-shell *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}}
/* Keep the teacher illustration in the foreground at every responsive breakpoint. */
.login-art {isolation:isolate;}
.login-illustration {z-index:5;mix-blend-mode:multiply;}
.login-parts {z-index:2;left:37%;width:27%;top:31%;}
.login-card .form-group {margin:0;}
@media(max-width:1050px) and (min-width:701px){.login-parts{left:37%;width:28%;padding:9px}.login-part-row{gap:5px;font-size:8px}.login-chart strong{font-size:10px}}