/* Fonts are loaded centrally by the login template. */
:root{color-scheme:light;--ink:#142541;--muted:#5c6c86;--blue:#3B6DFF;--stroke:#dae3f3}*{box-sizing:border-box}html,body{min-height:100%;margin:0;font:400 15px 'Inter','Noto Sans Thai',system-ui,sans-serif;color:var(--ink)}body{background:radial-gradient(circle at 80% 10%,#edf0ff 0%,transparent 40%),linear-gradient(120deg,#ffffff,#f4f7ff)}button,input{font:inherit}button{cursor:pointer}.auth-layout{min-height:100dvh;display:grid;grid-template-columns:minmax(400px,39%) minmax(0,61%);gap:16px;padding:clamp(20px,2.5vw,40px);padding-bottom:78px;position:relative;overflow:hidden}.auth-layout:before{content:'';position:absolute;pointer-events:none;inset:-25% 65% -25% -15%;border:95px solid #dbe6ff69;border-radius:50%;transform:rotate(-18deg)}.auth-pane{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.auth-card{width:min(100%,475px);padding:36px 31px 28px;background:#ffffff;border:1px solid #e2e8f5;border-radius:27px;box-shadow:0 20px 55px #244c9720;position:relative;overflow:hidden}.auth-card:before{content:'';height:4px;position:absolute;left:0;right:0;top:0;background:linear-gradient(90deg,#00C2FF,#3B6DFF,#7A3BFF,#C026FF)}.brand{display:flex;justify-content:center;align-items:center;gap:15px;margin:0 0 32px}.brand img{display:block;object-fit:contain}.brand .movix-wordmark-login{width:144px;height:36px;max-width:100%;object-fit:contain;object-position:left center}.brand strong{display:block;font:700 35px 'Inter','Noto Sans Thai',sans-serif;letter-spacing:-1px}.brand small{display:block;color:#62738d;font-size:12px}.heading{text-align:center}.heading h1{margin:0 0 8px;font-size:29px;line-height:1.3;font-weight:700}.heading p{margin:0 0 29px;color:#64748b;font-size:14px;line-height:1.8}label{display:block;font-size:14px;font-weight:600;margin:0 0 10px}.phone-group{height:56px;display:flex;border-radius:15px;border:1px solid #cdd9ed;background:#f8faff;overflow:hidden;transition:.2s}.phone-group:focus-within{border-color:#2775f9;box-shadow:0 0 0 3px #377cff1c}.phone-group>span{display:flex;align-items:center;justify-content:center;min-width:72px;border-right:1px solid #dae5f3;color:#64748b;font-weight:600}.phone-group input{border:0;width:100%;min-width:0;padding:0 15px;outline:0;background:transparent;color:#1d2d48;font-size:17px}.phone-group input::placeholder{color:#8b9bb2}.primary{width:100%;border:0;border-radius:13px;background:linear-gradient(105deg,#3B6DFF,#7A3BFF);color:white;font-weight:700;min-height:54px;margin-top:18px;box-shadow:0 8px 18px #1553ee20}.primary:hover{filter:brightness(1.07)}.mail-note{display:flex;align-items:center;gap:12px;margin:24px 0 16px}.mail-note p{font-size:12px;color:#62738d;margin:0;line-height:1.7}.mail-icon{width:45px;height:45px;background:#e9f0ff;color:#3b6dff;border-radius:12px;display:grid;place-items:center;font-size:23px;flex:none}.note{border-top:1px solid #dbe5f4;padding-top:19px;margin-top:22px;text-align:center;color:#65758e;font-size:12px}.note span{color:#2568eb;font-size:18px}.message{padding:12px 14px;background:#edf3ff;color:#264375;border:1px solid #b6c9ff;border-radius:13px;margin:0 0 16px;font-size:13px;line-height:1.6}.message.error{background:#fff0f2;color:#a92b43;border-color:#f4b3bc}.mail-summary{display:flex;align-items:center;gap:12px;background:#f1f5ff;border:1px solid #dbe4f4;border-radius:14px;padding:12px;margin-bottom:24px}.mail-summary small{display:block;color:#64748b}.mail-summary strong{display:block;font-size:16px}.otp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.otp-digit{height:55px;min-width:0;width:100%;border:1px solid #cbd7ef;border-radius:12px;text-align:center;color:#152844;font-size:24px;font-weight:700;outline:0;background:#ffffff}.otp-digit:focus{border-color:#2f76fb;box-shadow:0 0 0 3px #2970ff22}.otp-hint{text-align:center;color:#65758e;margin:15px 0 8px;font-size:12px}.auth-links{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;font-size:12px;flex-wrap:wrap}.auth-links a{color:#3d62cc;text-decoration:none}.auth-links form{margin:0}.textbutton{border:0;background:transparent;color:#6842ce;padding:6px}.textbutton:disabled{opacity:.5;cursor:not-allowed}.auth-hero{position:relative;min-height:640px;border-radius:30px;overflow:hidden;box-shadow:0 20px 50px #4167b527;background:#d8eafb}.hero-art{position:absolute;inset:0;background-image:url('/static/img/whcc-auth-hero.jpg');background-size:cover;background-position:center}.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#1055a700 22%,#05285835 63%,#082759b5 100%)}.hero-wordmark{position:absolute;top:26px;left:28px;color:#fff;text-shadow:0 2px 15px #00396d;display:grid}.hero-wordmark span{font-size:30px;font-weight:700}.hero-wordmark small{font-size:13px}.hero-bottom{position:absolute;left:30px;bottom:38px;right:28px;color:white;display:grid;gap:12px;text-shadow:0 2px 12px #06244e}.hero-bottom strong{font-size:clamp(20px,2.1vw,32px);line-height:1.4}.hero-status{display:flex;align-items:center;gap:9px;font-size:13px}.status-dot{background:#39e5aa;width:10px;height:10px;border-radius:50%}.auth-footer{position:absolute;bottom:25px;left:0;right:0;text-align:center;font-size:12px;color:#64748b}@media(max-width:950px){.auth-layout{grid-template-columns:1fr;gap:14px;padding:22px 18px 68px}.auth-pane{min-height:550px}.auth-hero{min-height:260px;max-height:360px}.auth-card{width:min(100%,490px)}.hero-wordmark{top:14px}.hero-bottom{bottom:20px}}@media(max-width:520px){.auth-layout{padding:12px 12px 57px}.auth-pane{min-height:0;padding:18px 0}.auth-card{padding:27px 18px 24px;border-radius:22px}.brand{margin-bottom:20px}.brand strong{font-size:29px}.brand img{width:49px}.heading h1{font-size:25px}.otp-grid{gap:5px}.otp-digit{height:49px;font-size:20px}.auth-hero{min-height:180px}.hero-bottom strong{font-size:16px}.hero-wordmark{display:none}}
/* MARKLENS 2026 type scale for the two-stage phone + OTP login */
.auth-card{font-family:var(--mark-font)!important}
.auth-card .brand strong{font-size:29px;font-weight:700;letter-spacing:-.025em}
.auth-card .brand small{font-size:12px;font-weight:400;line-height:1.4}
.auth-card .heading h1{font-size:28px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.auth-card .heading p{font-size:13px;line-height:1.6;font-weight:400}
.auth-card label{font-size:13px;font-weight:600;line-height:1.5}
.auth-card .phone-group input{font-size:16px;font-weight:500}
.auth-card .primary{font-size:15px;font-weight:700;letter-spacing:0}
.auth-card .otp-digit{font-family:var(--mark-font-numbers)!important;font-size:24px;font-weight:700}
.auth-card .hint,.auth-card .mail-note,.auth-card .note,.auth-card .auth-links{font-size:12px;line-height:1.6}
.auth-hero .hero-bottom strong{font-size:clamp(19px,2.05vw,30px);line-height:1.25;font-weight:700;letter-spacing:-.015em}
@media(max-width:620px){.auth-card .heading h1{font-size:25px}.auth-card .brand strong{font-size:26px}}

/* V.1.0.3: version visible on phone and OTP steps without moving login controls. */
.movix-login-version{text-align:center;margin-top:20px;font:500 11px/1.5 Inter,'Noto Sans Thai',sans-serif;letter-spacing:.035em;color:#64748b}