:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#101d38;font-synthesis:none}*{box-sizing:border-box}body.auth-page{margin:0;min-height:100vh;background:#f4f8ff;font-size:14px;color:#101d38}a{color:inherit}.auth-shell{width:min(100% - 72px,1360px);max-width:1360px;margin:0 auto;padding:19px 0 20px}.auth-header{height:52px;display:flex;justify-content:space-between;align-items:center;gap:25px;margin:0 24px 15px}.auth-logo img{display:block;width:255px;height:auto;max-width:100%}.auth-header nav{display:flex;gap:35px}.auth-header nav a{text-decoration:none;color:#74839e;font-size:13px}.auth-header nav a:hover{color:#187ee9}.auth-layout{display:grid;grid-template-columns:minmax(0,57fr) minmax(0,43fr);min-height:760px;overflow:hidden;border-radius:24px;border:1px solid #e4edf9;background:#fff;box-shadow:0 18px 65px #2b558018}.auth-showcase{position:relative;overflow:hidden;min-height:760px;background:#eef5fd}.showcase-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}.auth-panel{display:flex;flex-direction:column;justify-content:center;background:#fff;padding:44px 9%}.auth-form-wrap{width:100%;max-width:440px;margin:auto}.panel-logo{height:auto;width:230px;max-width:85%;display:block;margin:0 0 38px}.panel-kicker{display:none}.auth-form-wrap h2{font-size:40px;letter-spacing:-1.2px;color:#0c1935;margin:0 0 10px;font-weight:750;line-height:1.18}.auth-subtitle{font-size:17px;color:#65738b;line-height:1.55;margin:0 0 40px}.auth-form{display:flex;flex-direction:column;gap:23px}.auth-field label{display:block;color:#1e2941;font-size:14px;font-weight:600;margin:0 0 11px}.auth-field input{display:block;width:100%;height:53px;border:1px solid #d4deec;border-radius:9px;padding:0 17px;color:#0e1e38;background:#fff;font:inherit;outline:none}.auth-field input::placeholder{color:#a3afc2}.auth-field input:focus{border-color:#167de8;box-shadow:0 0 0 3px #167de822}.password-input{position:relative}.password-input input{padding-right:66px}.reveal{position:absolute;right:9px;top:9px;height:35px;border:0;padding:0 7px;background:transparent;color:#3975c0;font-size:12px;cursor:pointer}.auth-options{display:flex;justify-content:flex-start;align-items:flex-start;gap:8px;flex-wrap:wrap;margin:1px 0 3px;font-size:12px}.terms-check{display:flex;align-items:flex-start;gap:7px;line-height:1.55;color:#3b4b69;cursor:pointer;flex:1 1 100%;font-size:13px}.terms-check input{accent-color:#147be7;margin:2px 0 0;flex:none}.auth-link{color:#0879e8;text-decoration:none;font-weight:600}.auth-link:hover{text-decoration:underline}.auth-submit{width:100%;height:54px;border:0;border-radius:8px;background:#127aea;color:#fff;font:inherit;font-size:16px;font-weight:650;box-shadow:0 5px 12px #147de927;cursor:pointer}.auth-submit:hover{background:#0569d4}.auth-submit:focus-visible,.reveal:focus-visible,.auth-link:focus-visible{outline:3px solid #87c4ff;outline-offset:3px}.auth-note{margin-top:32px;text-align:center;color:#687991;font-size:13px;line-height:1.65}.auth-bottom{color:#8b9aaf;font-size:11px;line-height:1.5;text-align:center;margin-top:35px;border-top:1px solid #edf0f5;padding-top:19px}.auth-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:23px 23px 0;color:#8a9ab3;font-size:12px}.auth-footer div{display:flex;gap:22px}.auth-footer a{text-decoration:none}.auth-footer a:hover{color:#137be8}.auth-alert{padding:12px 13px;border-radius:9px;font-size:12px;line-height:1.6;margin-bottom:19px}.auth-alert.error{background:#fff1f1;color:#a52b34;border:1px solid #f6cfd2}.auth-alert.success{background:#e9f9f1;color:#176c48;border:1px solid #c8ebda}.auth-back{display:inline-block;margin-top:20px}.auth-field .hint{display:block;color:#8090a4;font-size:11px;margin-top:7px;line-height:1.5}@media(max-width:1050px){.auth-shell{width:min(100% - 36px,1360px)}.auth-layout{grid-template-columns:1fr 1fr}.auth-showcase{min-height:710px}.auth-panel{padding:36px 7%}}@media(max-width:760px){.auth-shell{width:min(100% - 26px,560px);padding-top:12px}.auth-header{margin:0 5px 12px;height:auto;min-height:47px}.auth-header nav{display:none}.auth-logo img{width:210px}.auth-layout{display:flex;flex-direction:column;min-height:0}.auth-showcase{min-height:260px}.showcase-image{height:260px}.auth-panel{padding:35px 28px}.panel-logo{margin-bottom:24px;width:190px}.auth-form-wrap h2{font-size:31px}.auth-subtitle{font-size:14px;margin-bottom:24px}.auth-footer{font-size:10px;line-height:1.5;flex-wrap:wrap;margin:19px 8px 0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Compact desktop: entire page stays inside the viewport without stretching the card. */
@media (min-width:761px){
html,body.auth-page{min-height:100%;height:100%}
.auth-shell{height:100dvh;min-height:570px;display:flex;flex-direction:column;padding:12px 0 10px}
.auth-header{height:46px;min-height:46px;margin:0 24px 10px}
.auth-logo img{width:225px}
.auth-layout{flex:1 1 auto;min-height:0;height:auto;max-height:780px}
.auth-showcase{min-height:0}
.showcase-image{height:100%;object-fit:cover;object-position:center 44%}
.auth-panel{min-height:0;padding:18px 7%;overflow-y:auto}
.panel-logo{width:200px;margin-bottom:22px}
.auth-form-wrap h2{font-size:clamp(28px,2.45vw,36px);margin-bottom:5px}
.auth-subtitle{font-size:14px;margin:0 0 22px}
.auth-form{gap:15px}
.auth-field label{font-size:12px;margin-bottom:7px}
.auth-field input{height:46px}
.auth-options{margin:0}
.auth-submit{height:47px}
.auth-note{margin-top:19px;font-size:12px}
.auth-bottom{margin-top:18px;padding-top:12px}
.auth-footer{min-height:28px;margin:9px 23px 0;font-size:11px}
}
/* Icons are part of the control, not decorative background images. */
.field-control{position:relative}
.field-control .field-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:#8191ae;pointer-events:none;z-index:1}
.auth-field .field-control input{padding-left:45px}
@media(max-width:760px){.auth-showcase{height:210px;min-height:210px}.showcase-image{height:210px;object-position:center 44%}.auth-panel{padding:26px 28px}.panel-logo{margin-bottom:18px}.auth-bottom{margin-top:18px}.auth-note{margin-top:20px}}
@media(min-width:761px) and (max-height:690px){.auth-shell{min-height:540px}.panel-logo{width:176px;margin-bottom:12px}.auth-form-wrap h2{font-size:28px}.auth-subtitle{margin-bottom:13px}.auth-form{gap:10px}.auth-field label{margin-bottom:5px}.auth-field input{height:42px}.auth-submit{height:42px}.auth-note{margin-top:12px}.auth-bottom{margin-top:10px;padding-top:8px}}

/* Show the complete login illustration without clipping either edge.
   The source is portrait-oriented, so empty side space is intentional. */
.auth-showcase{display:flex;align-items:center;justify-content:center;background:#eef5fd;overflow:hidden}
.auth-showcase .showcase-image{position:relative;display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center center!important}
@media(max-width:760px){
  .auth-showcase{height:auto;min-height:0;aspect-ratio:667/1000}
  .auth-showcase .showcase-image{height:100%;object-fit:contain!important}
}

/* Requested centered 1200px login panel and 60px separation from header. */
.auth-shell{max-width:1200px;width:min(100% - 48px,1200px)}
.auth-header{margin-bottom:60px}
.auth-note-second{display:block;margin-top:5px}
.auth-bottom{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap}
.security-label{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:normal}
.security-label svg{display:block;width:15px;height:15px;flex:0 0 15px;color:#748bab}
.security-separator{display:block;width:1px;height:16px;background:#d6dfeb}
@media (min-width:761px){
 .auth-shell{max-width:1200px;width:min(100% - 48px,1200px)}
 .auth-header{margin-bottom:60px}
 .auth-layout{max-height:none}
}
@media (max-width:760px){
 .auth-shell{width:min(100% - 26px,560px)}
 .auth-header{margin-bottom:60px}
}
@media(max-width:380px){.auth-bottom{gap:6px}.security-separator{display:none}}

/* Image-edge correction: size the artwork to its intrinsic aspect ratio.
   This removes the empty left/right letterboxing without stretching or cropping. */
.auth-shell{width:min(calc(100% - 48px),980px);max-width:980px;height:auto;min-height:0;display:block}
.auth-layout{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);height:auto;min-height:0;max-height:none;align-items:stretch}
.auth-showcase{position:relative;display:block;aspect-ratio:667 / 1000;width:100%;height:auto;min-height:0;background:transparent;overflow:hidden}
.auth-showcase .showcase-image{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain!important;object-position:center center!important}
.auth-panel{min-height:0;overflow:visible}
@media (min-width:761px){
 .auth-shell{width:min(calc(100% - 48px),980px);max-width:980px;height:auto;min-height:0;display:block}
 .auth-layout{grid-template-columns:minmax(0,46fr) minmax(0,54fr);height:auto;min-height:0;max-height:none}
 .auth-showcase{aspect-ratio:667 / 1000;min-height:0}
}
@media (max-width:760px){
 .auth-shell{width:min(calc(100% - 26px),560px)}
 .auth-layout{display:flex;flex-direction:column}
 .auth-showcase{width:100%;height:auto;aspect-ratio:667 / 1000;min-height:0}
 .auth-showcase .showcase-image{width:100%;height:100%}
}