/* NQ Work login — unified responsive stylesheet (v5.0)
   The hero image and authentication markup are retained. */
:root{font-family:Inter,"Segoe UI",system-ui,sans-serif;color:#15345a;background:#eaf3fc}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
button,input{font:inherit}
.auth-page{min-height:100vh;min-height:100dvh;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,56%) minmax(370px,44%);gap:0;padding:clamp(10px,1.2vw,18px);background:#eaf3fc}
.auth-page::before,.auth-page::after{content:"";position:absolute;inset:clamp(10px,1.2vw,18px);border-radius:20px;pointer-events:none}
.auth-page::before{z-index:-2;background:url('/images/ui/login/login-hero.png') center/cover no-repeat;box-shadow:0 12px 36px #1f548337}
.auth-page::after{z-index:-1;background:linear-gradient(90deg,rgba(228,244,255,.76),rgba(228,244,255,.32) 42%,rgba(19,63,106,.05) 77%)}
.auth-intro{min-width:0;min-height:calc(100dvh - 36px);padding:clamp(26px,3.5vw,58px);display:flex;flex-direction:column;align-items:flex-start;position:relative}
.auth-brand{display:flex;align-items:center;gap:12px;max-width:min(100%,460px);padding:9px 20px 9px 9px;border:1px solid #bfd9f5;background:rgba(255,255,255,.94);border-radius:16px;color:#082f70;font-size:clamp(13px,1.15vw,18px);font-weight:800;line-height:1.45;box-shadow:0 9px 26px #144a7e24}
.auth-brand-mark{width:52px;height:52px;flex:none;display:grid;place-items:center;border:2px solid #1b6bc5;border-radius:50%;background:#fff;color:#ef9015;font-size:27px}
.auth-intro-main{width:100%;max-width:680px;display:flex;flex-direction:column;align-items:flex-start;margin-top:clamp(36px,7vh,90px)}
.auth-kicker{display:none}
.auth-intro h1{max-width:540px;color:#082f70;font-size:clamp(34px,3vw,50px);font-weight:800;letter-spacing:-.04em;line-height:1.14;margin:0 0 27px;text-shadow:0 2px 10px rgba(255,255,255,.84)}
.auth-intro p{display:none}
.auth-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,540px)}
.auth-feature{display:flex;align-items:center;gap:9px;min-width:0;min-height:58px;padding:12px 15px;border-radius:12px;border:1px solid #d4e5f5;background:rgba(255,255,255,.94);color:#15487f;font-size:clamp(12px,.9vw,14px);font-weight:700;line-height:1.4;box-shadow:0 5px 16px rgba(12,60,112,.13)}
.auth-feature span{flex:none;color:#086bd1;font-size:24px}
.auth-footer{margin-top:auto;display:inline-flex;align-items:center;max-width:100%;padding:9px 13px;border:1px solid #c8dff2;border-radius:9px;background:rgba(255,255,255,.93);color:#1d4776;font-size:12px;line-height:1.5;font-weight:600}
.auth-form-side{display:flex;align-items:center;justify-content:center;min-width:0;padding:24px clamp(18px,3vw,54px)}
.auth-card{width:100%;max-width:520px;padding:clamp(25px,2.7vw,43px);background:#fff;border:1px solid #dbe8f6;border-radius:23px;box-shadow:0 22px 55px rgba(12,48,101,.24)}
.auth-overline{display:inline-flex;align-items:center;border-radius:999px;background:#e8f3ff;color:#0753a1;padding:8px 13px;font-size:11px;letter-spacing:.04em;font-weight:800}
.auth-card h2{color:#0b326d;font-size:clamp(26px,2.1vw,35px);line-height:1.18;letter-spacing:-.025em;margin:16px 0 8px}
.auth-subtitle{color:#4b709a;font-size:14px;line-height:1.6;margin:0 0 22px}
.auth-label{display:block;color:#153f74;font-size:13px;font-weight:750;margin:16px 0 8px}
.auth-field{position:relative;display:flex;align-items:center}
.auth-field-icon{position:absolute;left:1px;top:1px;bottom:1px;width:50px;display:grid;place-items:center;border-right:1px solid #d4e4f4;border-radius:10px 0 0 10px;background:#f4f9ff;color:#1a65b8;font-size:23px;pointer-events:none}
.auth-input{display:block;width:100%;height:52px;padding:0 16px 0 63px;border:1px solid #c7d7e8;border-radius:11px;background:#fff;color:#163c68;font-size:15px;outline:none}
.auth-input:focus{border-color:#1476dc;box-shadow:0 0 0 3px #1476dc26}
.auth-field:has(.auth-password-toggle) .auth-input{padding-right:70px}
.auth-password-toggle{position:absolute;right:5px;top:5px;bottom:5px;border:0;border-radius:7px;background:transparent;color:#1463bd;padding:0 13px;font-size:13px;cursor:pointer}
.auth-password-toggle:hover{background:#edf6ff}
.auth-submit{position:relative;display:flex;justify-content:center;align-items:center;width:100%;min-height:53px;margin-top:24px;border:0;border-radius:10px;background:#0969ce;color:white;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 5px 13px #0f66cc39}
.auth-submit:hover{background:#075cbb}
.auth-submit span{position:absolute;right:18px;font-size:22px;font-weight:500}
.auth-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;color:#305684;font-size:13px}
.auth-options a{color:#1564bc}
.auth-remember{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.auth-remember input{width:16px;height:16px;margin:0;accent-color:#0869d1}
.auth-divider{display:flex;align-items:center;gap:12px;margin:22px 0 0;color:#6d88a6;font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:#dce8f4}
.auth-note{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:17px;background:#edf6ff;border-radius:11px;color:#315985;font-size:13px;line-height:1.55}
.auth-note span{font-size:17px}
.auth-note strong{color:#174c8a}
.auth-login-error{margin:14px 0 18px;padding:12px 14px;border:1px solid #efb3ba;border-left:4px solid #be3648;border-radius:9px;background:#fff1f3;color:#832234;font-weight:650;font-size:14px;line-height:1.5}
.auth-input:focus-visible,.auth-password-toggle:focus-visible,.auth-submit:focus-visible,.auth-options a:focus-visible{outline:3px solid #4896eb;outline-offset:3px}
/* Account support page reuses the shared brand element. */
.auth-help-page{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#dceeff,#f5faff)}
.auth-help-card{width:min(100%,510px);padding:34px;background:white;border:1px solid #d6e7f7;border-radius:18px;color:#24507e;box-shadow:0 16px 44px #10477f23}
.auth-help-card .auth-brand{margin-bottom:22px}
.auth-help-card h1{font-size:28px;color:#0b3672}
.auth-help-card p{line-height:1.7;font-size:14px}
.auth-back{display:inline-block;margin-top:12px;padding:12px 18px;border-radius:9px;background:#0b70d3;color:white;text-decoration:none}
@media(max-width:1100px) and (min-width:761px){
 .auth-page{grid-template-columns:minmax(0,53%) minmax(350px,47%)}
 .auth-intro{padding:24px}
 .auth-intro-main{margin-top:45px}
 .auth-feature-grid{max-width:460px}
 .auth-form-side{padding:22px}
 .auth-card{padding:28px}
}
@media(max-width:760px){
 .auth-page{display:flex;flex-direction:column;min-height:100dvh;gap:0;padding:8px}
 .auth-page::before,.auth-page::after{inset:8px 8px auto;height:480px}
 .auth-intro{min-height:390px;padding:22px}
 .auth-brand{font-size:13px}
 .auth-intro-main{margin-top:34px}
 .auth-intro h1{font-size:clamp(30px,5vw,39px);margin-bottom:20px}
 .auth-feature-grid{max-width:520px}
 .auth-footer{margin-top:21px}
 .auth-form-side{position:relative;width:100%;padding:0 12px 24px;margin-top:14px}
 .auth-card{max-width:550px}
}
@media(max-width:480px){
 .auth-page::before,.auth-page::after{height:470px}
 .auth-intro{min-height:415px;padding:15px}
 .auth-brand{gap:8px;font-size:11px;line-height:1.35;padding:7px 11px 7px 7px}
 .auth-brand-mark{width:41px;height:41px;font-size:21px}
 .auth-intro-main{margin-top:34px}
 .auth-intro h1{font-size:clamp(28px,7.4vw,34px)}
 .auth-feature-grid{gap:7px}
 .auth-feature{padding:9px;min-height:56px;font-size:11px}
 .auth-feature span{font-size:19px}
 .auth-footer{font-size:11px}
 .auth-form-side{padding:0 5px 20px}
 .auth-card{padding:24px 19px}
 .auth-options{font-size:12px}
 .auth-note{padding:13px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}