*{box-sizing:border-box}
:root{
  --green-950:#0c2b21;
  --green-900:#10382a;
  --green-800:#165039;
  --green-700:#1d6547;
  --text:#183126;
  --muted:#6f7773;
  --border:#d8dfdb;
  --panel:#f6f8f7;
}
html,body{margin:0;min-height:100%;font-family:"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:#eef2f0}
body{min-height:100vh}
.auth-shell{position:relative;isolation:isolate;display:grid;grid-template-columns:53.5% 46.5%;min-height:100vh;overflow:hidden;background:#edf2f2}
.auth-shell:after{content:"";position:absolute;z-index:1;top:0;bottom:0;left:53.5%;width:240px;transform:translateX(-100%);pointer-events:none;background:linear-gradient(90deg,rgba(190,204,209,0) 0%,rgba(194,208,213,.08) 30%,rgba(197,211,216,.34) 58%,rgba(199,213,217,.74) 82%,#c7d5d9 100%)}

/* LEFT */
.visual-panel{position:relative;z-index:0;min-height:100vh;overflow:visible;background:#15392c}
.visual-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.visual-shade{display:none}
.visual-copy{position:relative;z-index:2;height:100%;min-height:100vh;color:white}
.brand{position:absolute;left:17.2%;top:31.2%;text-align:center;text-shadow:0 1px 2px rgba(255,255,255,.3)}
.brand-main{font:500 33px/1 system-ui,sans-serif;letter-spacing:.28em;color:#244d3b}
.brand-sub{margin-top:15px;font:400 13px/1 system-ui,sans-serif;letter-spacing:.42em;color:#263f36}
.visual-values{position:absolute;left:5.7%;top:57.1%;display:flex;flex-direction:column;gap:12px;padding-left:18px;border-left:2px solid rgba(240,255,246,.65);font:400 13px/1.05 system-ui,sans-serif;letter-spacing:.14em;color:rgba(255,255,255,.76)}
.visual-footer{position:absolute;left:6.1%;bottom:7.5%;display:flex;flex-direction:column;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.visual-footer strong{font-size:22px}
.visual-footer span{font-size:17px;margin-top:1px}

/* RIGHT */
.login-panel{position:relative;z-index:2;min-height:100vh;background:radial-gradient(ellipse at 0% 48%,rgba(111,142,155,.15),transparent 46%),linear-gradient(108deg,#c7d5d9 0%,#d5e0e3 16%,#e4ebed 34%,#f0f4f4 53%,#f8fafa 74%,#fff 100%)}
.login-panel:before{display:none}
.login-panel:after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 12%,rgba(255,255,255,.82),transparent 34%),radial-gradient(ellipse at 26% 86%,rgba(151,178,188,.15),transparent 46%)}
.login-stage{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:6.2vh 5.4vw}
.login-card{width:min(620px,100%);background:rgba(255,255,255,.97);border:1px solid rgba(22,80,57,.06);border-radius:17px;box-shadow:0 24px 70px rgba(31,58,47,.12);padding:37px 38px 30px}
.card-header{text-align:center}
.org-logo{width:112px;height:112px;object-fit:contain;margin:0 auto 13px;display:block}
.card-header h1{font-size:20px;line-height:1.5;margin:0;color:#103b2d;font-weight:700;white-space:normal}
.org-en{font-size:14px;line-height:1.5;margin:2px 0 20px;color:#202924}
.system-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:13px;margin:5px 17px 22px}
.system-title .line{height:1.5px;background:#235b43}
.system-title h2{margin:0;font-size:26px;line-height:1.1;color:#17553c;font-weight:700}
.system-title p{margin:5px 0 0;font-size:15px;color:#27342e}
.login-form{margin-top:8px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.login-alert{margin:0 0 15px;padding:11px 14px;border:1px solid transparent;border-radius:8px;font-size:14px;line-height:1.5;text-align:left}
.login-alert-success{color:#155b3d;background:#eaf7f0;border-color:#bfe5d0}
.login-alert-warning{color:#795712;background:#fff7df;border-color:#f0d897}
.login-alert-danger{color:#842b2b;background:#fff0f0;border-color:#ecc0c0}
.field{height:64px;border:1px solid #d3dad6;border-radius:8px;background:white;display:flex;align-items:center;position:relative;margin-bottom:15px;box-shadow:inset 0 1px 1px rgba(0,0,0,.01)}
.field:focus-within{border-color:#6f9a85;box-shadow:0 0 0 3px rgba(35,91,67,.08)}
.field .icon{width:58px;display:grid;place-items:center;flex:0 0 58px}
.field .icon svg,.eye svg,.login-icon svg{width:26px;height:26px;fill:#6d7170}
.field input{height:100%;flex:1;border:0;outline:0;background:transparent;padding:0 15px 0 0;font:400 17px "Noto Sans Thai",sans-serif;color:#26362f}
.field input::placeholder{color:#878c89;opacity:1}
.eye{width:58px;height:100%;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.options-row{display:flex;align-items:center;justify-content:space-between;margin:21px 1px 26px;font-size:15px}
.remember{display:flex;align-items:center;gap:10px;cursor:pointer}
.remember input{appearance:none;width:20px;height:20px;border:1.5px solid #1c4434;border-radius:3px;background:#fff;position:relative}
.remember input:checked{background:#18533c;border-color:#18533c}
.remember input:checked:after{content:"✓";position:absolute;color:#fff;font-size:14px;left:3px;top:-1px}
.forgot{color:#0862a6;text-decoration:none}
.forgot:hover{text-decoration:underline}
.login-btn{height:66px;width:100%;border:0;border-radius:8px;background:linear-gradient(90deg,#145238,#174b35);color:#fff;display:flex;align-items:center;justify-content:center;gap:16px;font:500 21px "Noto Sans Thai",sans-serif;cursor:pointer;box-shadow:0 8px 20px rgba(18,71,50,.13);transition:.15s ease}
.login-btn:hover{background:linear-gradient(90deg,#103f2d,#123f2d);transform:translateY(-1px)}
.login-icon svg{fill:#fff;width:29px;height:29px}
.card-footer{text-align:center;margin-top:32px;color:#666d69;font-size:11.5px}
.footer-rule{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-bottom:13px}
.footer-rule span{height:1px;background:#aeb5b1}
.footer-rule svg{width:27px;height:27px;fill:#646b67}
.card-footer p{margin:2px 0;line-height:1.45}
.release-info{display:inline-flex;align-items:center;gap:4px;margin-top:8px!important;color:#8a918d;font-size:10.5px;letter-spacing:.02em}
.release-info span{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;color:#737b77}

/* Responsive */
@media(max-width:1100px){
  .auth-shell{grid-template-columns:48% 52%}
  .login-stage{padding-left:4vw;padding-right:4vw}
  .login-card{padding:32px 31px 27px}
  .card-header h1{font-size:18px}
  .system-title h2{font-size:23px}
}
@media(max-height:800px) and (min-width:901px){
  .login-stage{padding-top:24px;padding-bottom:24px}
  .login-card{padding-top:25px;padding-bottom:21px}
  .org-logo{width:92px;height:92px;margin-bottom:9px}
  .org-en{margin-bottom:13px}
  .system-title{margin-bottom:16px}
  .field{height:57px;margin-bottom:12px}
  .options-row{margin-top:16px;margin-bottom:19px}
  .login-btn{height:58px}
  .card-footer{margin-top:22px}
}
@media(max-width:900px){
  .auth-shell{display:block}
  .auth-shell:after{display:none}
  .visual-panel{display:none}
  .login-panel{min-height:100vh}
  .login-panel{background:radial-gradient(circle at 10% 15%,rgba(101,126,142,.16),transparent 42%),linear-gradient(145deg,#e3e9eb,#f7f9f8 48%,#fff)}
  .login-panel:before{display:none}
  .login-stage{padding:76px 22px 30px}
  .login-card{max-width:650px}
}
@media(max-width:560px){
  .login-stage{align-items:flex-start;padding:28px 13px 20px}
  .login-card{padding:27px 19px 23px;border-radius:14px}
  .org-logo{width:88px;height:88px}
  .card-header h1{font-size:16px}
  .org-en{font-size:12px}
  .system-title{margin-left:0;margin-right:0;gap:9px}
  .system-title h2{font-size:21px}
  .system-title p{font-size:13px}
  .field{height:57px}
  .field input{font-size:15px}
  .options-row{font-size:13px}
  .login-btn{height:58px;font-size:18px}
  .card-footer{font-size:10px}
}