*{box-sizing:border-box}
body.dmec-login{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:#101d58;font-family:Sarabun,Arial,sans-serif;background:#edf7ff;letter-spacing:0}
.dmec-login button,.dmec-login input{font:inherit}
.dmec-login button,.dmec-login a,.dmec-login input{touch-action:manipulation}
.dmec-login button{cursor:pointer}
.dmec-login button:focus-visible,.dmec-login a:focus-visible,.dmec-login input:focus-visible{outline:3px solid #ffbd48;outline-offset:3px}
.login-stage{width:100%;max-width:1600px;margin:0 auto;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:48px 48px 40px;background:url('../css/cal-plan-hospital-background.png') left bottom/auto 100% no-repeat;min-height:0}
.login-brand{padding:42px 0 0;display:flex;flex-direction:column;min-width:0}
.brand-heading{display:flex;align-items:center;gap:18px}
.brand-heading img{width:110px;height:110px;object-fit:contain;flex-shrink:0}
.brand-heading h1{font-size:64px;line-height:1.1;margin:0;font-weight:800}
.brand-heading p{font-size:20px;color:#536b9c;margin:6px 0}
.login-brand h2{font-size:24px;line-height:1.5;margin:24px 0 6px}
.brand-description{font-size:18px;color:#526d99;margin:0}
.brand-quote{text-align:center;margin:24px 0;color:#101d60}
.quote-main{position:relative;display:inline-block;margin:0;padding:0 24px;font-size:30px;line-height:1.4;font-weight:600}
.quote-main strong{font-weight:800}
.quote-treatment{color:#0054ad}
.quote-opening,.quote-closing{font-family:Georgia,serif;font-size:68px;line-height:1;color:#76b8ff}
.quote-opening{position:absolute;left:-10px;top:-8px}
.quote-closing{position:static;display:inline-block;margin-left:20px;vertical-align:top;color:#087aff}
.quote-smile-line{position:relative;display:inline-block;color:#0069ff;padding-bottom:14px}
.quote-smile-line em{position:relative;display:inline-block;font-family:Sriracha,Sarabun,cursive;font-size:38px;font-style:normal;font-weight:400;transform:rotate(-6deg)}
.quote-smile-line em:after{content:"";position:absolute;left:4%;right:0;bottom:-5px;height:7px;border-top:4px solid #087aff;border-radius:50%;transform:rotate(-3deg)}
.quote-caption{font-size:15px;font-weight:500;color:#34538b;margin:18px 0 0}
@media(max-width:1000px){
.brand-quote{margin:20px 0 28px}
.quote-main{font-size:23px;padding:0 12px}
.quote-smile-line em{font-size:29px}
.quote-opening,.quote-closing{font-size:46px}
.quote-opening{left:-8px}.quote-closing{margin-left:16px}
.quote-caption{font-size:13px;line-height:1.6;margin-top:12px}
}
.mobile-login .quote-main{font-size:23px;padding:0 12px}
.mobile-login .quote-smile-line em{font-size:29px}
.brand-features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}
.brand-features>div{background:#ffffffd9;border:1px solid #fff;border-radius:8px;display:flex;align-items:center;flex-direction:column;text-align:center;padding:18px 6px;gap:12px;font-weight:600}
.brand-features i{font-size:28px;color:#087bfa}
.login-brand blockquote{margin:auto 0 20px;padding:25px;text-align:center;font-family:Sriracha,Sarabun,cursive;font-size:27px;font-weight:400;line-height:1.7;color:#1454a0;text-shadow:0 1px white}
.login-brand blockquote small{display:block;font-family:Sarabun,Arial,sans-serif;font-size:12px;line-height:1.5;margin-top:10px;color:#496c99}
.login-panel{background:#fffffff5;border:1px solid #d4e6ff;border-radius:24px;box-shadow:0 18px 50px #275d9320;padding:24px 32px 28px;min-width:0;align-self:start}
.panel-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#536b9c}
.panel-top a{text-decoration:none;color:#536b9c}.panel-top span{padding:7px 12px;border:1px solid #d3e3ff;border-radius:8px}
.welcome{text-align:center;margin:18px 0 24px}.welcome h2{font-size:42px;line-height:1.3;margin:0 0 4px;font-weight:800}.welcome p{font-size:21px;margin:0}
.login-tabs{display:grid;grid-template-columns:1fr 1fr;background:#f3f9ff;border:1px solid #cbdfff;border-radius:12px;margin-bottom:22px}
.login-tabs button{padding:14px 6px;border:0;border-radius:11px;background:transparent;color:#152b6c;font-weight:600;font-size:18px}
.login-tabs button[aria-selected=true]{color:white;background:linear-gradient(110deg,#1662ff,#00a5ef);box-shadow:0 3px 12px #1687ff33}
.login-tabs i{margin-right:8px;font-size:21px}
.field-label{display:block;margin:18px 0 8px;font-weight:600}
.login-field{display:flex;align-items:center;border:1px solid #cbdfff;background:#f8fbff;border-radius:12px;min-height:56px;padding:0 16px;gap:14px}
.login-field>i{color:#7588a6;font-size:19px}
.login-field input{width:100%;min-width:0;border:0;background:transparent;color:#122052;padding:16px 0;outline:none;font-size:17px}
.login-field:focus-within{border-color:#0785ff;box-shadow:0 0 0 3px #0885ff15}
.dmec-login .login-field input:focus-visible{outline:none}
.login-field input::placeholder{color:#7688aa}
.login-field button{background:none;border:0;color:#7a89a4;width:36px;height:42px;flex-shrink:0;font-size:20px}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0;font-size:15px}
.login-options label{display:flex;align-items:center;gap:8px}
.login-options input{width:20px;height:20px;accent-color:#076bff;margin:0}
.login-options button{background:none;border:0;padding:4px 0;color:#0066ef}
.login-submit{width:100%;min-height:62px;border:0;border-radius:12px;background:linear-gradient(110deg,#1561f6,#00a8eb);color:white;font-size:23px!important;font-weight:600!important;box-shadow:0 8px 20px #066dc329;display:flex;justify-content:center;align-items:center;gap:14px}
.login-submit .fa-arrow-right{font-size:18px;margin-left:auto;background:#ffffff40;border-radius:50%;padding:10px}.login-submit .fa-sign-in-alt{margin-left:auto}
.login-divider{display:flex;align-items:center;gap:12px;margin:24px 0 16px;color:#5f74a1;font-size:15px;text-align:center}
.login-divider:before,.login-divider:after{content:"";height:1px;background:#c8d8ee;flex:1}
.biometric-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.biometric-login-btn{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#fbfdff;border:1px solid #cfe3ff;border-radius:12px;padding:16px 8px;color:#132764;min-height:132px}
.biometric-login-btn:hover{background:#eef7ff;border-color:#248bff}.biometric-login-btn>i{font-size:40px;color:#0079ff;margin-bottom:6px}.biometric-login-btn strong{font-size:18px}.biometric-login-btn small{color:#7086a9;font-size:12px}
.biometric-hint{font-size:12px;color:#687d9b;text-align:center;line-height:1.6;margin:10px 0}
#biometric-unavailable{padding:14px;background:#fff7e2;color:#865500;border-radius:8px;font-size:14px}
.install-app-btn{display:flex;align-items:center;gap:12px;border:1px solid #cbdfff;border-radius:10px;background:#f7fbff;color:#086cec;width:100%;padding:14px;margin-top:12px;font-size:15px!important}
.install-app-btn .fa-chevron-right{margin-left:auto}
.install-app-btn.is-installed{background:#e8f8ee;border-color:#83d5a3;color:#14743c}
.install-app-btn.is-installed:hover{background:#daf2e3;border-color:#49ad73}
.install-app-btn.is-installed .fa-check-circle{color:#159447}
.login-error{background:#fff0f1;color:#ab243d;border:1px solid #ffced5;border-radius:8px;padding:12px;line-height:1.6;margin-bottom:15px}
.login-footer{background:#ffffffd9;padding:28px 40px;text-align:center;color:#526e9e}
.footer-benefits{display:grid;grid-template-columns:repeat(4,1fr);max-width:1050px;margin:0 auto 24px}
.footer-benefits>div{display:flex;flex-direction:column;gap:12px;border-right:1px solid #dae7fa;padding:8px;font-size:15px}.footer-benefits>div:last-child{border:0}.footer-benefits i{font-size:27px;color:#0078f9}
.login-footer p{font-size:12px;margin:0;padding-top:18px;border-top:1px solid #e6eff9}
[hidden]{display:none!important}
.mobile-login .login-stage{max-width:560px;display:block;padding:24px 20px;background-position:center top;background-size:auto 640px;min-height:0}
.mobile-login .login-brand{padding:0 8px}.mobile-login .brand-heading img{width:80px;height:80px}.mobile-login .brand-heading h1{font-size:44px}.mobile-login .brand-heading p{font-size:16px}.mobile-login .login-brand h2{font-size:20px;margin-top:16px}.mobile-login .brand-description{font-size:15px}.mobile-login .brand-motto{font-size:28px;margin:22px 0 30px}.mobile-login .brand-features,.mobile-login blockquote{display:none}.mobile-login .login-panel{padding:20px;border-radius:24px}.mobile-login .welcome h2{font-size:34px}.mobile-login .welcome p{font-size:18px}.mobile-login .footer-benefits{max-width:520px}.mobile-login .login-footer{padding:20px 16px}
@media(max-width:1000px){
.login-stage{display:block;padding:24px 16px;min-height:0;background-size:auto 600px;background-position:center top}
.login-brand{padding:0 8px}.brand-heading{gap:10px}.brand-heading img{width:76px;height:76px}.brand-heading h1{font-size:42px}.brand-heading p{font-size:15px}.login-brand h2{font-size:19px;margin:16px 0 4px}.brand-description{font-size:14px}
.brand-motto{font-size:28px;margin:22px 0 30px}.brand-features,.login-brand blockquote{display:none}
.login-panel{padding:18px;border-radius:24px}.welcome{margin:16px 0 22px}.welcome h2{font-size:34px}.welcome p{font-size:18px}
.login-tabs button{font-size:16px;padding:13px 4px}.login-tabs i{margin-right:5px;font-size:20px}
.field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.login-field{margin-top:16px;padding:0 12px;gap:10px}.login-field input{font-size:16px}
.login-options{font-size:13px;gap:5px}.login-options input{width:19px;height:19px}.login-submit{font-size:21px!important;min-height:58px}
.login-divider{font-size:13px;gap:8px}.biometric-choices{gap:10px}.biometric-login-btn{min-height:120px}.biometric-login-btn strong{font-size:16px}
.login-footer{padding:20px 12px}.footer-benefits{gap:4px}.footer-benefits>div{border:0;font-size:12px;padding:4px}.footer-benefits i{font-size:25px}.login-footer p span{display:block;margin-top:5px}
.mobile-login .login-stage{padding:24px 16px}.mobile-login .login-panel{padding:18px}
.login-stage,.mobile-login .login-stage{background-position:left top;background-size:auto 410px}
.login-stage{max-width:560px}
}
/* Compact desktop layout keeps the complete login form visible on laptop screens. */
@media(min-width:1001px){
.dmec-login:not(.mobile-login) .login-stage{width:94%;max-width:1320px;min-height:0;padding:clamp(12px,2.5vh,32px) clamp(16px,2vw,32px);gap:clamp(24px,3vw,40px);align-content:center}
.dmec-login:not(.mobile-login) .login-brand{padding-top:24px}
.dmec-login:not(.mobile-login) .brand-heading img{width:92px;height:92px}
.dmec-login:not(.mobile-login) .brand-heading h1{font-size:54px}
.dmec-login:not(.mobile-login) .brand-heading p{font-size:17px}
.dmec-login:not(.mobile-login) .login-brand h2{font-size:21px;margin-top:18px}
.dmec-login:not(.mobile-login) .brand-description{font-size:16px}
.dmec-login:not(.mobile-login) .brand-motto{font-size:29px;margin:24px 0}
.dmec-login:not(.mobile-login) .brand-features{margin:16px 0;gap:10px}
.dmec-login:not(.mobile-login) .brand-features>div{padding:12px 5px;gap:8px;font-size:14px}
.dmec-login:not(.mobile-login) .brand-features i{font-size:24px}
.dmec-login:not(.mobile-login) .login-brand blockquote{font-size:25px;padding:16px;margin-bottom:0}
.dmec-login:not(.mobile-login) .login-panel{padding:16px 24px 18px;border-radius:20px}
.dmec-login:not(.mobile-login) .welcome{margin:10px 0 14px}
.dmec-login:not(.mobile-login) .welcome h2{font-size:36px}
.dmec-login:not(.mobile-login) .welcome p{font-size:19px}
.dmec-login:not(.mobile-login) .login-tabs{margin-bottom:12px}
.dmec-login:not(.mobile-login) .login-tabs button{padding:10px 5px;font-size:17px}
.dmec-login:not(.mobile-login) .field-label{margin:10px 0 5px;font-size:15px}
.dmec-login:not(.mobile-login) .login-field{min-height:48px}
.dmec-login:not(.mobile-login) .login-field input{padding:11px 0;font-size:17px}
.dmec-login:not(.mobile-login) .login-options{margin:12px 0;font-size:15px}
.dmec-login:not(.mobile-login) .login-submit{min-height:50px;font-size:22px!important}
.dmec-login:not(.mobile-login) .login-divider{margin:14px 0 10px;font-size:13px}
.dmec-login:not(.mobile-login) .biometric-login-btn{min-height:94px;padding:10px 6px;gap:3px}
.dmec-login:not(.mobile-login) .biometric-login-btn>i{font-size:30px;margin-bottom:2px}
.dmec-login:not(.mobile-login) .biometric-login-btn strong{font-size:17px}
.dmec-login:not(.mobile-login) .biometric-hint{margin:6px 0 0;font-size:11px}
.dmec-login:not(.mobile-login) .install-app-btn{padding:10px;margin-top:8px}
.dmec-login:not(.mobile-login) .login-footer{padding:12px 32px}
.dmec-login:not(.mobile-login) .footer-benefits{margin:0 auto;max-width:960px}
.dmec-login:not(.mobile-login) .footer-benefits>div{flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:6px;font-size:13px}
.dmec-login:not(.mobile-login) .footer-benefits i{font-size:22px}
}
@media(min-width:1001px) and (max-height:800px){
.dmec-login:not(.mobile-login) .login-stage{padding-top:10px;padding-bottom:10px}
.dmec-login:not(.mobile-login) .login-panel{padding-top:12px;padding-bottom:12px}
.dmec-login:not(.mobile-login) .welcome{margin:6px 0 10px}
.dmec-login:not(.mobile-login) .field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.dmec-login:not(.mobile-login) .login-field{margin-top:12px}
.dmec-login:not(.mobile-login) .biometric-login-btn{min-height:82px;padding:6px}
.dmec-login:not(.mobile-login) .login-divider{margin-top:10px}
.dmec-login:not(.mobile-login) .login-footer{padding-top:6px;padding-bottom:6px}
}
@media(prefers-reduced-motion:no-preference){.login-tabs button,.biometric-login-btn{transition:background .15s,border-color .15s}}