:root{--school-photo:url('/assets/school-campus.webp')}
@media(max-width:700px){body .reference-hero{background-image:linear-gradient(90deg,rgba(10,42,32,.9),rgba(13,45,35,.65) 65%,rgba(12,37,30,.42)),var(--school-photo)!important}}
body.auth-screen .shell{position:relative;isolation:isolate;margin:0!important;width:100%;min-height:100svh;padding:0!important;background:#183f36}
body.auth-screen .shell::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(90deg,rgba(9,35,28,.62),rgba(12,37,30,.12) 65%,rgba(12,37,30,.16)),var(--school-photo);background-position:center,right top;background-size:100% 100%,cover;background-repeat:no-repeat}
body.auth-screen #main{width:100%;max-width:none;margin:0;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,460px);gap:clamp(30px,6vw,110px);align-items:center;padding:125px clamp(30px,7vw,120px) 60px!important;background:transparent}
.school-welcome{max-width:650px;color:#fff;text-shadow:0 2px 20px #092a2940;align-self:end;padding-bottom:50px}
.school-welcome .school-eyebrow{display:inline-block;font-size:12px;letter-spacing:2px;font-weight:700;border-left:3px solid #dddc9e;padding-left:12px;color:#f5efc8}
.school-welcome h2{font-size:clamp(32px,3.5vw,54px);line-height:1.22;letter-spacing:-1px;margin:24px 0 20px;color:#fff}
.school-welcome p{max-width:450px;font-size:16px;line-height:1.8;color:#f0f5ef;margin:0}
.auth-screen .login-card{width:100%;padding:32px;border-radius:0;border:1px solid #ffffff99;background:transparent;box-shadow:none;color:#000;backdrop-filter:none}
.auth-screen .login-brand{color:#000;font-size:17px;line-height:1.5;margin-bottom:23px}.auth-screen .login-card .badge{background:#ffffff24;color:#000}.auth-screen .login-card h1{color:#000}.auth-screen .login-card .btn{background:#12694f;color:white;border-radius:0}.auth-screen .login-card .input:focus{border-color:#66dfb2;outline-color:#66dfb2}
.auth-screen .login-card .field,.auth-screen .login-card .hint,.auth-screen .login-card .hint a{color:#000}.auth-screen .login-card .input{border-radius:0;background:#ffffffeb;color:#000}.auth-screen .login-card #login-error{color:#ffe0dc}
.reference-hero{background:linear-gradient(90deg,rgba(10,42,32,.91),rgba(13,45,35,.68) 48%,rgba(12,37,30,.08) 78%),var(--school-photo) center 62%/cover no-repeat!important;border-color:#d6e6db}
.reference-hero .banner-waves,.reference-hero .student-art,.reference-hero .hero-formulas,.reference-hero .banner-motto{display:none}.reference-hero .banner-copy{max-width:75%;z-index:1}.reference-hero .banner-copy h1{color:#fff!important}.reference-hero .banner-copy p{color:#f0f6ed}.reference-hero .start-learning{background:#fff;color:#24594a;border-color:#fff}
body[data-role="teacher"] .td-welcome{padding:22px;border-radius:14px;min-height:150px;background:linear-gradient(90deg,rgba(12,45,35,.94),rgba(12,45,35,.75) 60%,rgba(12,45,35,.25)),var(--school-photo) center 58%/cover no-repeat;color:white}
body[data-role="teacher"] .td-welcome h1{color:white}body[data-role="teacher"] .td-welcome p,body[data-role="teacher"] .td-welcome .td-date{color:#edf4e9}.td-welcome .td-class-select{background:white;border-radius:10px;padding:8px;color:#24594a}.td-welcome .td-class-select select{color:#173f35}
.parent-dashboard .pd-hero{background:linear-gradient(90deg,rgba(12,45,35,.92),rgba(12,45,35,.7) 60%,rgba(12,45,35,.12)),var(--school-photo) center 62%/cover no-repeat;border-color:#c9ded2}.parent-dashboard .pd-hero:before{display:none}.parent-dashboard .pd-hero>svg{display:none}.parent-dashboard .pd-child-photo{position:relative;z-index:1}
@media(max-width:1000px){.auth-screen #main{padding:40px 30px!important;gap:30px;grid-template-columns:minmax(0,1fr) minmax(320px,400px)}.school-welcome h2{font-size:35px}.school-welcome p{font-size:14px}}
@media(max-width:700px){:root{--school-photo:url('/assets/school-campus-mobile.webp')}body.auth-screen .shell{background-position:center,72% top}body.auth-screen #main{display:flex;flex-direction:column;justify-content:flex-start;gap:24px;padding:110px 20px 96px!important}.school-welcome{align-self:stretch;padding:10px 0 0;max-width:100%;min-height:210px}.school-welcome .school-eyebrow{font-size:10px;letter-spacing:1.3px}.school-welcome h2{font-size:31px;max-width:340px;margin:18px 0 12px}.school-welcome p{font-size:13px;max-width:320px}.auth-screen .login-card{max-width:460px;padding:25px}.reference-hero{background-position:center,72% 58%!important}.reference-hero .banner-copy{max-width:100%}.reference-hero .banner-copy p{max-width:280px}body[data-role="teacher"] .td-welcome{padding:18px;background-position:center,72% 58%}.parent-dashboard .pd-hero{background-position:center,72% 58%}}

/* Keep portrait phones and tablets in a readable single-column login layout. */
@media(max-width:1000px){body.auth-screen #main{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:24px;padding:110px 20px 48px!important}body.auth-screen .school-welcome{align-self:center;width:100%;max-width:460px;min-height:0;padding:0}body.auth-screen .school-welcome h2{font-size:30px;margin:16px 0 12px}body.auth-screen .school-welcome p{font-size:15px}body.auth-screen .login-card{max-width:460px;padding:24px}body.auth-screen .login-card .field,body.auth-screen .login-card p{font-size:15px}body.auth-screen .login-card .input{font-size:16px;min-height:48px}}