@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}body{margin:0;font:16px 'Noto Sans Thai',sans-serif;color:#19334c;background:#f8fafb}button,input,a{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #2eaf80;outline-offset:4px}.loginLayout{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr}.brandPanel{background:#142c46;color:#fff;padding:48px 11%;display:flex;flex-direction:column}.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;width:max-content}.wordmark img{height:64px;width:64px;object-fit:contain}.wordmark span{font-size:32px;font-weight:600;line-height:1.4}.wordmark small{display:block;font-size:13px;letter-spacing:1px;color:#a3c2cd;font-weight:400}.brandMessage{margin:auto 0;padding:65px 0}.label{font-size:14px;color:#91d9b9;border:1px solid #3e635f;border-radius:30px;padding:8px 15px;display:inline-block}.brandMessage h1{font-size:clamp(38px,4.3vw,64px);font-weight:600;line-height:1.55;letter-spacing:-1px;margin:26px 0 21px}.brandMessage h1>span{color:#78e0b0}.brandMessage p{font-size:17px;line-height:2;color:#adc2d2}.flow{display:flex;justify-content:space-between;border-top:1px solid #3c5266;padding-top:26px;margin-top:43px;gap:15px;font-size:13px;color:#7faba5}.flow b{display:block;font-size:15px;font-weight:500;color:#dceae7;margin-top:5px}.brandFoot{color:#8098aa;font-size:13px}.formPanel{padding:55px 9% 28px;display:flex;flex-direction:column;align-items:center}.loginCard{width:100%;max-width:420px;margin:auto 0;padding:35px 0}.overline{color:#4c8d70;font-size:14px}h2{font-size:34px;margin:8px 0 8px;line-height:1.5}.intro{color:#82919b;font-size:15px;margin:0 0 23px;line-height:1.9}.setupState{font-size:13px;color:#6c8176;background:#eff6f2;border:1px solid #dfebe4;border-radius:8px;padding:11px 14px;line-height:1.8;margin-bottom:24px}label{font-size:14px;font-weight:500;display:block;margin-bottom:9px}input{width:100%;min-height:50px;padding:12px 14px;border:1px solid #d6e0e6;background:#fff;border-radius:8px;font-size:16px;color:#19334c;outline:none}input:focus{border-color:#3eae83;box-shadow:0 0 0 3px #3eae8315}.passwordLabel{display:flex;align-items:center;justify-content:space-between;margin-top:22px}.passwordLabel button{border:0;background:none;font-size:12px;color:#6b8276;padding:0 0 9px}.passwordField{position:relative}.passwordField input{padding-right:68px}.passwordField button{position:absolute;right:12px;top:10px;background:none;border:0;color:#6d8581;font-size:13px;min-height:30px}.feedback{font-size:13px;color:#b25745;line-height:1.8;min-height:6px}.submit{width:100%;min-height:52px;padding:14px;border-radius:9px;border:0;background:#19384f;color:#fff;font-size:16px;font-weight:500}.submit:hover{background:#235573}.submit:disabled{background:#b6c3ca;cursor:not-allowed}.divider{display:flex;align-items:center;gap:15px;color:#94a2ab;font-size:12px;margin:25px 0}.divider:before,.divider:after{content:'';height:1px;background:#e0e7eb;flex:1}.demoLink{display:block;text-align:center;border:1px solid #d4e4dc;background:#f2faf6;padding:13px 10px;border-radius:9px;color:#34765b;font-size:14px;text-decoration:none}.smallprint{font-size:12px;text-align:center;line-height:1.8;color:#98a5ad}.securityHint{border-top:1px solid #e6ecef;padding-top:18px;margin-top:25px;font-size:12px;color:#849792;text-align:center;line-height:1.9}footer{font-size:12px;line-height:1.9;color:#7d8f9c;text-align:center;margin-top:25px}.mobileBrand{display:none}.accountCard{max-width:620px;margin:10vh auto;padding:30px;background:white;border:1px solid #e0e8e4;border-radius:16px}.accountCard h1{font-size:28px}.accountCard p{line-height:1.9;color:#71848b}.accountCard a{display:block;margin:20px 0}.accountCard button{padding:12px;border:1px solid #d6e3de;border-radius:7px;background:#f0f8f4}.accountCard footer{border-top:1px solid #eee;padding-top:20px}@media(max-width:1000px){.brandPanel{padding:35px 8%}.formPanel{padding:35px 8%}.brandMessage h1{font-size:39px}.brandMessage p{font-size:15px}.label{font-size:12px}}@media(max-width:720px){.loginLayout{display:block}.brandPanel{display:none}.formPanel{padding:25px 25px 22px;min-height:100dvh}.loginCard{max-width:440px;padding:0 0 15px}.mobileBrand{display:flex;align-items:center;gap:7px;margin-bottom:35px}.mobileBrand img{height:49px;width:49px;object-fit:contain}.mobileBrand b{font-size:26px;line-height:1.4}.mobileBrand small{display:block;font-size:11px;color:#6c8e7f;font-weight:400}h2{font-size:31px}.intro{font-size:14px}.overline{font-size:13px}.setupState{font-size:12px}.passwordLabel button{font-size:12px}.submit{min-height:52px}footer{font-size:11px;margin-top:15px}.accountCard{margin:30px 18px;padding:24px}}

/* Brand clarity refresh: retain all authentication controls and behavior. */
.brandPanel{background:radial-gradient(ellipse at 0 0,#285672 0,transparent 62%),linear-gradient(145deg,#162e48,#0c233b);padding:38px 9% 28px;border-right:1px solid #315267}.wordmark{gap:15px}.wordmark img{height:100px;width:100px;padding:6px;background:#f0faf6;border-radius:25px;box-shadow:0 12px 32px #00132440;border:1px solid #b7e8d4}.wordmark span{font-size:43px;font-weight:700}.wordmark small{font-size:16px;letter-spacing:1.8px;color:#9be4c5;margin-top:5px}.brandCategory{font-size:15px;color:#c6dbdf;margin-top:20px}.brandMessage{padding:35px 0}.brandMessage h1{font-size:clamp(38px,4vw,59px);letter-spacing:-.7px;margin:23px 0 17px}.brandMessage h1 em{font-style:normal;color:#91edc6}.brandMessage p{font-size:16px;line-height:2;color:#c2d3df}.documentTypes{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.documentTypes span{border:1px solid #426576;background:#ffffff08;color:#e0eeef;border-radius:7px;padding:7px 11px;font-size:12px}.flow{margin-top:28px;padding-top:22px}.formPanel{background:linear-gradient(160deg,#f1f7f5,#fff 65%);padding:34px 8% 23px}.loginCard{max-width:440px;padding:30px;background:#fff;border-radius:20px;box-shadow:0 16px 55px #173e4910;border:1px solid #e0ebe7}.intro{font-size:14px}.submit{background:linear-gradient(110deg,#173a51,#225570);box-shadow:0 5px 12px #1b40531c}.submit:hover{background:#1d5a70}.submit:disabled{background:#b6c3ca;box-shadow:none}.overline{font-size:13px;letter-spacing:.3px}.setupState{font-size:12px}.brandFoot{font-size:13px;color:#b2c6d2}.mobilePurpose{display:none}.securityHint{color:#718a80}.smallprint{color:#7f9098}footer{color:#647c87;font-size:12px}@media(max-width:1050px) and (min-width:721px){.brandPanel{padding:35px 7%}.wordmark img{height:82px;width:82px;border-radius:21px}.wordmark span{font-size:35px}.brandMessage h1{font-size:40px}.formPanel{padding:32px 5%}.loginCard{padding:24px}.brandCategory{font-size:14px}}@media(max-width:720px){.formPanel{background:linear-gradient(180deg,#e9f6ef 0,#f7faf9 300px,#fff 65%);padding:25px 20px 22px}.loginCard{background:transparent;box-shadow:none;border:0;padding:0;max-width:440px}.mobileBrand{gap:15px;margin:0 0 19px}.mobileBrand img{width:86px;height:86px;background:#fff;border:1px solid #d3e8dc;border-radius:22px;padding:4px;box-shadow:0 8px 20px #234c3d12}.mobileBrand b{font-size:37px;font-weight:700}.mobileBrand small{font-size:14px;letter-spacing:1px;color:#32755b;margin-top:4px}.mobilePurpose{display:block;padding:0 0 22px;margin-bottom:23px;border-bottom:1px solid #cbdfd5}.mobilePurpose b{display:block;font-size:22px;color:#1d4439;font-weight:600;line-height:1.6}.mobilePurpose p{font-size:14px;color:#537365;line-height:1.9;margin:7px 0 0}.overline{font-size:12px}h2{font-size:28px;margin-top:6px}.intro{font-size:14px;margin-bottom:17px}.setupState{margin-bottom:20px}.securityHint{margin-top:20px}.brandPanel{display:none}footer{font-size:11px;line-height:1.9}}

/* Balanced layout: fluid spacing, natural height, and readable controls. */
.loginLayout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.brandPanel,.formPanel{min-width:0;padding:clamp(24px,3vw,48px)}
.brandPanel{gap:0;justify-content:center}
.wordmark{max-width:100%;gap:16px}
.wordmark img{width:80px;height:80px;border-radius:20px;flex-shrink:0}
.wordmark span{font-size:clamp(30px,3vw,42px)}
.wordmark small{font-size:14px;letter-spacing:1px}
.brandCategory{font-size:14px;line-height:1.8;margin-top:16px}
.brandMessage{margin:0;padding:clamp(28px,4vh,48px) 0 24px}
.brandMessage h1{font-size:clamp(30px,3.2vw,46px);line-height:1.5;letter-spacing:0;margin:18px 0 14px;overflow-wrap:anywhere}
.brandMessage p{font-size:16px;line-height:1.85;margin:0}
.label{font-size:14px;padding:6px 12px}
.documentTypes{margin-top:18px;gap:7px}.documentTypes span{font-size:13px;padding:6px 9px}
.flow{margin-top:22px;padding-top:16px;font-size:13px}.flow b{font-size:14px}
.formPanel{justify-content:center;gap:16px}
.loginCard{max-width:440px;margin:0;padding:clamp(20px,2.5vw,32px);border-radius:18px}
.loginCard h2{font-size:30px;margin:6px 0;line-height:1.5}
.overline{font-size:14px;letter-spacing:0}.intro{font-size:16px;line-height:1.7;margin-bottom:16px}
.setupState{font-size:14px;line-height:1.65;padding:10px 12px;margin-bottom:18px}
.passwordLabel{margin-top:16px;gap:10px;flex-wrap:wrap}.passwordLabel button{font-size:14px}
.passwordField button{font-size:14px;top:3px;min-height:44px}
.feedback{font-size:14px;margin:10px 0;min-height:0}.feedback:empty{display:none}
.submit{margin-top:16px;min-height:48px;padding:11px 14px}
.divider{margin:18px 0;font-size:13px}.demoLink{font-size:14px;padding:11px}
.smallprint{font-size:13px;margin:10px 0 0}.securityHint{font-size:13px;margin-top:16px;padding-top:12px}
.formPanel footer{max-width:440px;margin:0;font-size:12px;overflow-wrap:anywhere}
@media(max-width:960px){
.loginLayout{display:block}.brandPanel{display:none}
.formPanel{padding:24px 20px;min-height:100dvh}
.mobileBrand{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.mobileBrand img{width:64px;height:64px;padding:3px;background:#f0faf6;border:1px solid #d3e8dc;border-radius:16px;object-fit:contain;flex-shrink:0}
.mobileBrand b{font-size:30px;line-height:1.4}.mobileBrand small{display:block;font-size:14px;font-weight:400;color:#32755b}
.mobilePurpose{display:block;border-bottom:1px solid #dce8e2;padding-bottom:16px;margin-bottom:18px}
.mobilePurpose b{display:block;font-size:20px;line-height:1.6;color:#1d4439}
.mobilePurpose p{font-size:14px;line-height:1.8;color:#537365;margin:5px 0 0}
}
@media(max-width:480px){
.formPanel{padding:20px 18px;justify-content:flex-start}
.loginCard{padding:0;border:0;box-shadow:none;background:transparent}
.loginCard h2{font-size:26px}.intro{font-size:16px}
.mobileBrand img{width:60px;height:60px}.mobileBrand b{font-size:28px}
.accountCard{max-width:calc(100% - 32px);margin:24px 16px;padding:22px}
}
/* Desktop viewport refinement: primary sign-in controls before secondary content. */
.loginLayout{min-height:100dvh;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.brandPanel{padding:28px clamp(24px,3vw,48px);justify-content:center}
.wordmark img{width:64px;height:64px;border-radius:17px}.wordmark span{font-size:34px}.wordmark small{font-size:14px}
.brandCategory{margin-top:12px}.brandMessage{padding:24px 0 16px}.brandMessage h1{font-size:clamp(28px,2.8vw,38px);line-height:1.45;margin:14px 0}
.brandMessage p{font-size:16px;line-height:1.7}.documentTypes{display:none}.flow{margin-top:18px;padding-top:14px}
.formPanel{padding:24px;gap:14px}.loginCard{max-width:420px;padding:24px}.loginCard h2{font-size:28px}.intro{font-size:16px;margin-bottom:14px}.setupState{margin-bottom:14px;font-size:14px}
.loginDetails{border-top:1px solid #e2e9ec;margin-top:18px;padding-top:12px}.loginDetails summary{font-size:14px;line-height:1.7;color:#47756c;cursor:pointer;padding:4px 0}.loginDetails .divider{display:none}.loginDetails .demoLink{margin-top:12px}
.loginDetails .securityHint{font-size:13px}.loginDetails .smallprint{font-size:13px}
@media(min-width:961px) and (max-height:720px){.brandPanel{padding-top:20px;padding-bottom:20px}.brandMessage{padding:18px 0 12px}.brandMessage h1{font-size:30px}.formPanel{padding:18px}.loginCard{padding:20px}.brandFoot{font-size:12px}.flow{margin-top:12px}}
@media(max-width:960px){.loginLayout{display:block}.formPanel{padding:20px}.loginCard{max-width:460px}.mobilePurpose{margin-bottom:14px;padding-bottom:12px}.mobilePurpose p{display:none}.mobileBrand{margin-bottom:10px}.mobileBrand img{width:52px;height:52px}.mobileBrand b{font-size:28px}}
@media(max-width:480px){.loginCard{padding:0}.formPanel{padding:20px 18px}.loginCard h2{font-size:25px}}
/* Japriang is the primary name; Work24 is the developer endorsement. */
.wordmark img{width:78px;height:78px;padding:0;border-radius:20px;border:1px solid #b8e7d3;box-shadow:0 10px 26px #001d3030}.wordmark span{font-size:clamp(36px,3.4vw,46px);font-weight:700;line-height:1.35}.wordmark small{font-size:12px;font-weight:400;letter-spacing:1px;color:#bad4d3;margin-top:7px}.brandCategory{margin-top:17px}.mobileBrand img{padding:0;width:64px;height:64px;border-radius:17px}.mobileBrand b{font-size:34px}.mobileBrand small{font-size:12px;font-weight:400;letter-spacing:.8px}.developer-credit,.copyright-credit{display:block;line-height:1.9}.developer-credit{font-size:13px;color:#587381}.developer-credit strong{font-weight:500}.copyright-credit{font-size:12px;color:#7b8e97;margin-top:3px}
@media(max-height:720px) and (min-width:961px){.wordmark img{width:66px;height:66px}.wordmark span{font-size:38px}}