@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root { font-family:'Noto Sans Thai',system-ui,sans-serif; color:#173332; background:#eff5f3; font-synthesis:none; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; min-height:100vh; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(340px,.9fr) minmax(440px,1.1fr); }
.login-brand { position:relative; overflow:hidden; padding:clamp(42px,7vw,94px); display:flex; flex-direction:column; justify-content:center; color:white; background:radial-gradient(circle at 18% 80%,rgba(107,220,201,.3),transparent 30%),linear-gradient(145deg,#06494a,#087674); }
.login-brand:after { content:""; position:absolute; right:-120px; top:12%; width:360px; height:360px; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018); }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; color:#074c4b; background:#78d8c9; font-size:26px; font-weight:800; }
.login-brand p { margin:24px 0 8px; color:#91ddd2; font-size:12px; font-weight:700; letter-spacing:.17em; }.login-brand h1 { z-index:1; margin:0; max-width:560px; font-size:clamp(34px,4.4vw,58px); line-height:1.17; letter-spacing:-.035em; }.login-brand>span { z-index:1; max-width:470px; margin-top:18px; color:#bedbd8; font-size:16px; }
.login-panel { display:grid; place-items:center; padding:28px; }.login-panel form { width:min(420px,100%); padding:38px; border:1px solid #d9e5e2; border-radius:20px; background:white; box-shadow:0 24px 60px rgba(23,68,65,.09); }.eyebrow { margin:0; color:#12827d; font-size:11px; font-weight:700; letter-spacing:.14em; }.login-panel h2 { margin:6px 0 2px; font-size:30px; }.intro { margin:0 0 26px; color:#70817f; font-size:14px; }.login-panel label { display:grid; gap:7px; margin-top:15px; color:#536d6a; font-size:13px; font-weight:600; }.login-panel input { width:100%; min-height:48px; padding:0 14px; border:1px solid #d7e3e1; border-radius:11px; outline:0; color:#173332; font:inherit; }.login-panel input:focus { border-color:#39a69d; box-shadow:0 0 0 4px rgba(57,166,157,.12); }.login-panel button { width:100%; min-height:49px; margin-top:22px; padding:0 16px; border:0; border-radius:11px; display:flex; justify-content:center; align-items:center; gap:10px; color:white; background:#08706e; font:600 15px inherit; cursor:pointer; }.login-panel button:hover { background:#075b5a; }.login-panel button span { font-size:20px; }.login-panel small { display:block; margin-top:18px; color:#93a09f; text-align:center; font-size:10px; }.login-error { margin-bottom:15px; padding:10px 12px; border:1px solid #f1c6cb; border-radius:9px; color:#9d3844; background:#fff0f2; font-size:12px; }.mobile-brand { display:none; }
@media (max-width:760px) { .login-shell { display:block; padding:24px; }.login-brand { display:none; }.login-panel { min-height:100vh; padding:0; }.login-panel form { padding:28px 24px; }.mobile-brand { display:flex; align-items:center; gap:9px; margin-bottom:30px; color:#075b5a; font-weight:800; letter-spacing:.1em; }.mobile-brand span { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; color:#06494a; background:#78d8c9; letter-spacing:0; } }