:root{color-scheme:light;font-family:"Segoe UI",Tahoma,sans-serif;color:#18342c;background:#eef7f3;font-size:16px}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100svh;background:radial-gradient(circle at 10% 15%,#d9f0e4,transparent 40%),linear-gradient(145deg,#fafbf8,#edf7f3)}a{color:#076447}.login-page{max-width:1180px;margin:auto;padding:0 32px}.login-header{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #cee3da}.login-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:#173d30}.login-brand img{width:72px;height:72px;object-fit:contain}.login-brand strong{display:block;font-size:25px;line-height:1.2}.login-brand small{display:block;margin-top:6px;color:#537064;font-size:14px}.header-note{color:#557569;font-size:14px}.login-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,440px);align-items:center;gap:64px;min-height:calc(100svh - 174px);padding:36px 0}.intro{max-width:490px}.eyebrow{font-size:14px;font-weight:750;letter-spacing:1.8px;color:#087858}.intro h1{font-size:clamp(30px,3.5vw,43px);line-height:1.5;margin:14px 0;color:#173e31}.intro p{font-size:17px;color:#537267;line-height:1.85;margin:0}.intro img{display:block;width:min(100%,310px);height:auto;margin:8px auto 0;mix-blend-mode:multiply}.login-card{background:#fff;border:1px solid #cee4d9;border-radius:24px;padding:32px;box-shadow:0 18px 60px #1c59400e}.login-card h2{font-size:29px;margin:0 0 10px;line-height:1.4}.form-intro{font-size:16px;line-height:1.75;color:#577366;margin:0 0 24px}.login-card label{display:block;font-weight:650;font-size:16px;margin:20px 0 9px}.login-card input{width:100%;min-width:0;border:1.5px solid #bfd6ca;border-radius:11px;min-height:50px;padding:12px 14px;font:inherit;background:#fcfefd;color:#18342c}.password-field{position:relative}.password-field input{padding-right:83px}.password-toggle{position:absolute;right:6px;top:5px;min-height:40px;padding:7px 12px;font:inherit;font-size:14px;font-weight:650;color:#096d50;border:0;background:#edf7f1;border-radius:8px;cursor:pointer}.primary-button{display:block;width:100%;margin-top:27px;padding:13px 16px;min-height:52px;border:1px solid #087c59;border-radius:12px;background:#087c59;color:#fff;font:inherit;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 4px 0 #075d43}.primary-button:hover{background:#056b4b}.primary-button:disabled{opacity:.6;cursor:wait;box-shadow:none}.plain-button{font:inherit;border:0;background:transparent;text-decoration:underline;color:#37634f;padding:12px 0;margin-top:10px;cursor:pointer}.form-message{font-size:15px;line-height:1.7;color:#933022;background:#fff1ed;border:1px solid #f0cdc5;border-radius:10px;padding:12px;margin-top:16px}.help-note{margin:25px 0 0;padding-top:20px;border-top:1px solid #e2eee7;font-size:15px;color:#587467;line-height:1.8}.help-note a{font-weight:700;white-space:nowrap}.password-hint{font-size:14px;color:#587467;line-height:1.65}.login-footer{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px;color:#597267}.login-footer a{text-decoration:none}.login-card input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #edb938;outline-offset:3px}.login-card input:focus-visible{border-color:#087c59}#account-name{font-size:14px;align-self:center;color:#527167}.account-error{margin:0;padding:12px;color:#922f23;background:#fff0eb}.actions{flex-wrap:wrap}
@media(max-width:780px){.login-page{padding:0 20px}.login-header{min-height:86px}.login-brand img{width:60px;height:60px}.login-brand strong{font-size:23px}.header-note{display:none}.login-layout{grid-template-columns:1fr;gap:24px;padding:28px 0;min-height:auto;max-width:460px;margin:auto}.intro{position:relative;padding-right:142px;min-height:150px}.intro h1{font-size:27px;line-height:1.45;margin:8px 0}.intro p{font-size:15px}.intro img{position:absolute;right:0;bottom:0;width:140px}.eyebrow{font-size:13px}.login-card{padding:26px}.login-footer{flex-wrap:wrap;justify-content:center;text-align:center;padding:20px 0;min-height:auto}.login-card h2{font-size:27px}}
@media(max-width:380px){.login-page{padding:0 14px}.intro{padding-right:110px}.intro img{width:105px}.intro h1{font-size:24px}.login-card{padding:22px}}
.login-header{padding-block:12px}
.login-brand{min-width:0}
.login-brand>img{flex-shrink:0}
.brand-copy{display:block;min-width:0}
.brand-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.login-brand .brand-title{display:flex;flex-wrap:wrap;gap:.24em;max-width:100%;font-family:"Arial Rounded MT Bold","Trebuchet MS","Segoe UI",sans-serif;font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:900;line-height:1.2;letter-spacing:.035em;-webkit-text-stroke:.65px #fff;paint-order:stroke fill;text-shadow:0 2px 0 #173e58,0 4px 8px #15375020}
.brand-cai{color:#0867a5}
.brand-asian{color:#ce382f}
.login-brand .asean-emblem{display:block;width:56px;height:56px;object-fit:contain;flex-shrink:0;margin:0}
.brand-copy small{letter-spacing:.08em}
@media(max-width:780px){.login-brand{gap:10px}.brand-heading{gap:10px}.login-brand .asean-emblem{width:44px;height:44px}.login-brand .brand-title{font-size:clamp(1.3rem,4.3vw,1.8rem)}}
@media(max-width:380px){.login-brand{gap:8px}.login-brand>img{width:48px;height:48px}.brand-heading{gap:8px}.login-brand .asean-emblem{width:38px;height:38px}}
@media(forced-colors:active){.login-brand .brand-title{-webkit-text-stroke:0;text-shadow:none}.brand-cai,.brand-asian{color:CanvasText}}