:root{--primary:#2563eb;--primary-dark:#1d4ed8;--text-main:#0f172a;--text-sub:#64748b;--bg-form:#fff;--bg-page:#f8fafc;--border:#e2e8f0}.login-page-wrapper{background:#fff;width:100%;min-height:100vh;font-family:Plus Jakarta Sans,Noto Sans Thai,sans-serif;display:flex}.login-visual-side{color:#fff;background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#2563eb 100%);flex-direction:column;flex:1.2;justify-content:space-between;padding:60px;display:flex;position:relative}.login-visual-side:before{content:"";z-index:1;background:linear-gradient(#0f172a99,#2563eb66);position:absolute;inset:0}.visual-content{z-index:2;position:relative}.visual-logo{filter:brightness(0)invert();height:48px;margin-bottom:40px}.visual-title{letter-spacing:-2px;margin-bottom:24px;font-size:52px;font-weight:900;line-height:1.1}.visual-subtitle{color:#fffc;max-width:400px;font-size:18px;font-weight:500;line-height:1.6}.visual-footer{z-index:2;color:#fff9;font-size:14px;font-weight:500;position:relative}.login-form-side{background:var(--bg-form);flex:1;justify-content:center;align-items:center;padding:40px;display:flex;position:relative}.form-container{width:100%;max-width:420px;animation:.6s cubic-bezier(.16,1,.3,1) slide-up}.form-header{margin-bottom:40px}.form-title{color:var(--text-main);letter-spacing:-1px;margin-bottom:12px;font-size:32px;font-weight:800}.form-subtitle{color:var(--text-sub);font-size:15px;font-weight:500}.field-group{margin-bottom:24px}.field-label{color:var(--text-main);margin-bottom:8px;font-size:13px;font-weight:700;display:block}.input-style{width:100%;height:52px;color:var(--text-main);background:#f1f5f9;border:2px solid #0000;border-radius:12px;padding:0 16px;font-size:15px;font-weight:600;transition:all .2s}.input-style:focus{border-color:var(--primary);background:#fff;outline:none;box-shadow:0 0 0 4px #2563eb1a}.btn-submit{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;height:52px;margin-top:32px;font-size:16px;font-weight:700;transition:all .2s;display:flex}.btn-submit:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 12px 24px -8px #2563eb66}.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}.demo-box{border-top:1px solid var(--border);margin-top:40px;padding-top:32px}.demo-title{color:var(--text-sub);text-transform:uppercase;letter-spacing:1px;text-align:center;margin-bottom:20px;font-size:12px;font-weight:800}.demo-grid-new{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.demo-btn{border:1px solid var(--border);cursor:pointer;text-align:left;background:#fff;border-radius:12px;align-items:center;gap:12px;padding:12px;transition:all .2s;display:flex}.demo-btn:hover{border-color:var(--primary);background:var(--brand-50)}.demo-btn-icon{border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;display:flex}.demo-btn-name{color:var(--text-main);margin-bottom:1px;font-size:13px;font-weight:700}.demo-btn-role{color:var(--text-sub);font-size:11px;font-weight:600}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:900px){.login-visual-side{display:none}}