@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#083e2c;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f5f9ee}.login-layout{display:grid;grid-template-columns:52.5% 47.5%;min-height:100vh}.brand-panel{min-width:0;position:relative;background:#035334;overflow:hidden}.brand-art{position:absolute;inset:0;background-image:url('assets/login/login-brand-art.webp');background-position:center center;background-repeat:no-repeat;background-size:100% 100%}.brand-mobile{display:none}.login-side{padding:24px clamp(18px,3.3vw,65px) 32px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at 95% 92%,#e2efc2 0%,transparent 31%),radial-gradient(ellipse at 10% 4%,#f1f7e2 0%,transparent 37%),#fbfcf6;min-width:0}.login-nav{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;max-width:680px;border-radius:50px;background:#ffffffeb;padding:7px;box-shadow:0 5px 19px #183d2319}.login-nav a{font-family:Outfit,sans-serif;text-decoration:none;color:#083c2d;white-space:nowrap;display:flex;align-items:center;gap:8px;padding:9px clamp(7px,1vw,17px);border-radius:36px;font-size:clamp(12px,1.2vw,18px)}.login-nav a.active,.login-nav a:hover{background:#e7f5d6}.login-nav a span{background:#075634;color:#fff;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:16px}.login-card{width:100%;max-width:600px;margin:auto 0;background:#ffffffed;border:1px solid #edf1e8;border-radius:32px;box-shadow:0 18px 48px #21422c24;padding:clamp(22px,3vw,44px)}.login-heading{text-align:center;margin-bottom:23px}.login-heading h2{font:700 clamp(29px,2.4vw,40px)/1.2 Outfit,sans-serif;margin:0;color:#064b30}.login-heading h2 span{font-size:.8em}.login-heading p{color:#71808a;font-size:15px;margin:9px 0 0}form>label{display:block;font-size:15px;font-weight:600;margin:17px 0 8px}.field-icon{color:#438c12;padding-right:10px;font-weight:700}select,.input-wrap{width:100%;min-height:49px;border:1px solid #cbdcc6;background:#fbfcf9;border-radius:13px;font:500 15px 'DM Sans',sans-serif;color:#103e2f;box-shadow:0 2px 4px #1f3b1710}select{padding:0 16px;cursor:pointer}.input-wrap{display:flex;align-items:center;padding:0 13px;gap:11px}.input-wrap>span{color:#496c5d}.input-wrap input{border:0;outline:none;background:transparent;min-height:47px;width:100%;min-width:0;font:inherit;color:#103e2f}.input-wrap input::placeholder{color:#89969d}select:focus-visible,.input-wrap:focus-within{outline:2px solid #65a629;outline-offset:2px}.input-wrap button{border:0;background:none;color:#0e4b34;cursor:pointer;font-size:19px;padding:7px}.captcha-row{display:flex;align-items:center;justify-content:flex-end;gap:15px}.captcha-row output{display:grid;place-items:center;min-height:50px;width:min(67%,275px);border:1px solid #e1eed6;border-radius:14px;background:repeating-linear-gradient(145deg,#f1f9e9,#f1f9e9 8px,#edf7e6 8px,#edf7e6 11px);font:800 27px Outfit,sans-serif;letter-spacing:3px;color:#075e37}.refresh{border:0;background:transparent;font-size:30px;color:#055b38;cursor:pointer}.captcha-input{margin-top:8px}.form-options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:16px 0 27px;font-size:14px}.remember{display:flex;align-items:center;gap:8px;cursor:pointer}.remember input{accent-color:#11753c;width:17px;height:17px}.form-options a,.back-home a{color:#2d8917;text-decoration:none}.form-options a:hover,.back-home a:hover{text-decoration:underline}.login-submit{display:block;width:100%;min-height:54px;border:0;border-radius:14px;background:linear-gradient(180deg,#4a9a16,#096128);box-shadow:0 5px 12px #245d2540;color:white;font:700 20px Outfit,sans-serif;cursor:pointer}.login-submit:hover{filter:brightness(1.07)}.form-note{min-height:18px;margin:10px 0 0;text-align:center;font-size:13px;color:#9d4c10}.back-home{font-size:13px;margin:15px 0 0}@media(max-width:1100px){.login-layout{grid-template-columns:43% 57%}.login-side{padding:20px}.login-nav a{gap:5px;padding:7px;font-size:13px}.login-nav a span{width:23px;height:23px}.brand-art{background-size:cover;background-position:center}}@media(max-width:760px){.login-layout{display:block}.brand-panel{height:145px}.brand-art{display:none}.brand-mobile{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(130deg,#024a32,#0b7744)}.brand-symbol{font-size:25px;color:#a8de60}.brand-mobile h1{font:800 35px Outfit,sans-serif;color:white;margin:0}.brand-mobile p{color:#e5facf;margin:4px 0 0}.login-side{min-height:calc(100vh - 145px);padding:14px 14px 28px}.login-nav{padding:4px;gap:1px}.login-nav a{font-size:11px;padding:5px 4px;gap:4px}.login-nav a span{width:20px;height:20px;font-size:12px}.login-card{margin:22px 0 12px;border-radius:22px;padding:23px 19px}.login-heading{margin-bottom:15px}form>label{margin-top:14px}.back-home{margin-top:0}}@media(max-width:370px){.login-nav a span{display:none}.login-nav a{font-size:11px}.form-options{font-size:12px}}@media(min-width:1800px){.login-card{max-width:660px}}

/* Compact, viewport-fitting responsive login overrides. */
@media (min-width:761px){
 html,body{height:100%;}
 .login-layout{height:100vh;height:100dvh;min-height:0;overflow:hidden;}
 .brand-panel{height:100%;}
 .login-side{height:100%;min-height:0;overflow:hidden;padding:clamp(10px,1.7vh,18px) clamp(14px,2.5vw,42px);justify-content:space-between;gap:clamp(6px,1vh,12px);}
 .login-nav{flex-shrink:0;padding:4px;max-width:670px;}
 .login-nav a{padding:5px clamp(6px,.8vw,12px);font-size:clamp(12px,.95vw,15px);}
 .login-nav a span{height:23px;width:23px;font-size:14px;}
 .login-card{flex:0 1 auto;margin:0;max-width:570px;border-radius:24px;padding:clamp(16px,2.4vh,28px) clamp(20px,2.2vw,32px);overflow:auto;scrollbar-width:thin;}
 .login-heading{margin-bottom:clamp(7px,1.3vh,15px);}
 .login-heading h2{font-size:clamp(25px,2vw,35px);}
 .login-heading p{margin-top:4px;font-size:13px;}
 form>label{font-size:13px;margin:clamp(6px,1.15vh,11px) 0 4px;}
 select,.input-wrap{min-height:clamp(37px,5.15vh,46px);border-radius:11px;font-size:14px;}
 .input-wrap input{min-height:clamp(35px,5vh,44px);}
 .captcha-row output{min-height:clamp(36px,5vh,44px);font-size:23px;}
 .refresh{font-size:25px;}
 .captcha-input{margin-top:5px;}
 .form-options{margin:clamp(8px,1.5vh,14px) 0;font-size:13px;}
 .login-submit{min-height:clamp(42px,5.5vh,51px);font-size:18px;}
 .form-note{min-height:0;margin:5px 0 0;}
 .form-note:empty{display:none;}
 .back-home{display:none;}
}
@media (min-width:761px) and (max-height:680px){
 .login-side{padding-top:8px;padding-bottom:8px;gap:5px;}
 .login-card{padding:12px 20px;}
 .login-heading{margin-bottom:4px;}
 .login-heading h2{font-size:24px;}
 .login-heading p{font-size:12px;margin:2px 0 0;}
 form>label{margin:5px 0 3px;font-size:12px;}
 select,.input-wrap{min-height:35px;}
 .input-wrap input{min-height:33px;}
 .captcha-row output{min-height:34px;}
 .form-options{margin:7px 0;}
 .login-submit{min-height:39px;}
}
@media (max-width:760px){
 .brand-panel{height:95px;}
 .brand-mobile h1{font-size:27px;}
 .brand-mobile p{font-size:12px;}
 .login-side{min-height:calc(100dvh - 95px);padding:10px 12px 18px;}
 .login-card{margin:12px 0 8px;padding:17px 17px;border-radius:18px;}
 .login-heading h2{font-size:26px;}
 .login-heading{margin-bottom:8px;}
 .login-heading p{font-size:12px;margin-top:3px;}
 form>label{margin:9px 0 4px;font-size:13px;}
 select,.input-wrap{min-height:41px;font-size:13px;}
 .input-wrap input{min-height:39px;}
 .captcha-row output{min-height:40px;font-size:23px;}
 .captcha-input{margin-top:5px;}
 .form-options{margin:10px 0 13px;font-size:12px;}
 .login-submit{min-height:44px;font-size:17px;}
 .back-home{margin-top:0;}
}

/* ReaTure login card position / width adjustment */
@media (min-width:761px){
 .login-side{justify-content:flex-start;align-items:center;gap:0;}
 .login-nav{align-self:center;width:100%;}
 .login-card{width:min(100%,490px);max-width:490px;margin:clamp(24px,6vh,56px) auto 0;flex-shrink:1;}
}
@media (min-width:761px) and (max-height:740px){
 .login-card{margin-top:clamp(12px,3.4vh,28px);padding-top:14px;padding-bottom:14px;}
}
@media (min-width:761px) and (max-height:600px){
 .login-card{margin-top:8px;}
}
@media (max-width:760px){
 .login-card{max-width:490px;width:100%;margin:12px auto 8px;}
}
