:root{font-family:'Noto Sans Thai',sans-serif;color:#203d34;background:#f5f7f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.login-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-intro{background:radial-gradient(ellipse at 100% 90%,#476e51 0,transparent 62%),#193f34;color:#fff;display:flex;flex-direction:column;padding:52px clamp(32px,5vw,90px);position:relative;overflow:hidden}.office-brand{display:flex;gap:14px;align-items:center;font-size:17px;font-weight:600;z-index:1}.office-brand small{display:block;font-size:12px;font-weight:400;color:#b9cec1;margin-top:4px}.brand-mark{background:#ffffff14;border:1px solid #ffffff25;display:grid;place-items:center;border-radius:14px;width:52px;height:55px}.brand-mark svg{width:29px;height:29px}.intro-copy{margin:auto 0;padding:76px 0;z-index:1}.eyebrow{font-size:10px;letter-spacing:2px;color:#bfcea4}.intro-copy h1{font-size:clamp(32px,3.5vw,55px);line-height:1.55;letter-spacing:-1px;margin:22px 0;font-weight:600}.intro-copy p{font-size:14px;line-height:2;color:#c5d7cc}.intro-note{display:flex;align-items:center;gap:10px;font-size:12px;margin-top:32px;color:#d8e5d8}.intro-note span{display:grid;place-items:center;border-radius:50%;background:#bad391;color:#274837;width:23px;height:23px}.intro-footer{font-size:11px;color:#adc5b6}.login-panel{display:grid;place-items:center;padding:55px 36px}.login-card{width:100%;max-width:390px}.welcome{font-size:12px;color:#69806b}.login-card h2{font-size:32px;font-weight:600;margin:9px 0 10px;letter-spacing:-.7px}.login-description{font-size:13px;line-height:1.9;color:#748276;margin:0 0 35px}label{display:block;font-size:13px;font-weight:500;margin:19px 0 9px}input{display:block;width:100%;padding:13px 15px;border:1px solid #d9e1d5;background:white;border-radius:9px;font-size:14px;color:#234435;min-height:49px}input::placeholder{color:#99a499}input:focus{outline:3px solid #dfead7;border-color:#618961}button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:28px;border:0;border-radius:9px;background:#204f41;color:#fff;padding:14px 18px;cursor:pointer;font-size:14px;font-weight:500}button:hover{background:#153d30}button:focus-visible{outline:3px solid #a4bf8b;outline-offset:3px}button span{font-size:21px;line-height:1}.login-help{text-align:center;color:#768576;font-size:12px;line-height:1.9;margin-top:27px}.login-footnote{font-size:11px;text-align:center;line-height:1.9;color:#889384;border-top:1px solid #e1e7dc;padding-top:22px;margin-top:26px}.login-error{padding:12px 15px;border-radius:8px;border:1px solid #f2c8c3;background:#fff1ef;color:#a02a25;font-size:13px;line-height:1.7}@media(max-width:760px){.login-shell{grid-template-columns:1fr}.login-intro{padding:28px 25px}.office-brand{font-size:15px}.intro-copy,.intro-footer{display:none}.login-panel{padding:38px 25px 48px;align-items:start}.login-card h2{font-size:29px}.login-description{margin-bottom:26px}.brand-mark{width:45px;height:47px}}
@media(max-width:760px){.login-shell{min-height:100dvh}.login-intro{padding:22px 22px}.login-panel{padding:30px 22px max(32px,env(safe-area-inset-bottom))}.login-card input{font-size:16px;min-height:50px}.login-card button{min-height:50px;font-size:16px}.login-description,.login-help{font-size:13px}.login-footnote{font-size:12px}.login-card label{font-size:14px}}