#loginScreen{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:34px;min-height:100dvh;padding:64px 32px 34px;background:linear-gradient(150deg,rgba(206,249,237,.79),rgba(194,239,245,.63) 50%,rgba(72,183,213,.49)),url('/assets/login-isp-background.png') center/cover;color:#17374c;overflow:hidden}
#loginScreen::before,#loginScreen::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:polygon(0 0,22% 0,89% 100%,64% 100%);background:rgba(255,255,255,.2)}
#loginScreen::after{clip-path:polygon(70% 0,84% 0,100% 29%,100% 50%);background:rgba(40,183,207,.1)}
.login-shell{position:relative;width:min(1080px,100%);min-height:590px;display:flex;align-items:center}
#loginScreen .login-intro{display:flex;position:relative;overflow:hidden;flex-direction:column;justify-content:flex-start;min-height:590px;width:84%;padding:42px 48px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);border-radius:20px;box-shadow:0 22px 65px #205c7229;color:#17374c}
#loginScreen .login-intro::before{content:none}
#loginScreen .login-brand{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:1.9px;line-height:1.6;color:#366176}
#loginScreen .login-brand b{display:block;font-size:13px;letter-spacing:2.7px;color:#1c4155}
#loginScreen .brand-symbol{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:13px;background:#e2f7f5;color:#169cab;font-size:20px;border:1px solid #caedeb}
.login-greeting{margin-top:43px;z-index:1}
#loginScreen .login-intro .eyebrow{color:#4e878d;font-size:10px;letter-spacing:2px;margin:0 0 12px}
#loginScreen .login-intro h2{font-size:clamp(32px,3.7vw,46px);font-weight:800;letter-spacing:-1.5px;line-height:1.2;margin:0 0 14px}
#loginScreen .login-description{font-size:15px;line-height:1.8;color:#6d8690;margin:0;max-width:440px}
#loginScreen .login-illustration{position:absolute;bottom:0;left:0;width:100%;height:330px;object-fit:cover;object-position:center;z-index:0}
#loginScreen .login-intro-footer{margin:auto 0 0;display:flex;gap:22px;align-items:center;font-size:11px;font-weight:700;color:#477a82;z-index:1;padding-top:180px}
.login-intro-footer span+span::before{content:"";display:inline-block;width:4px;height:4px;background:#70afb3;border-radius:50%;margin:0 22px 2px 0}
#loginScreen .login-form-wrap{position:absolute;right:0;width:386px;padding:0;margin:0}
#loginScreen .login-card{margin:0;padding:36px 30px 28px;border-radius:18px;border:1px solid #ffffff35;background:linear-gradient(145deg,rgba(48,62,91,.87),rgba(17,67,78,.87));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 60px #194d6860;color:#f5fcff}
.login-form-heading{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.login-lock{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#ffffff14;color:#6ae7e5}
#loginScreen .login-card .eyebrow{margin:0;color:#a5d5df;font-size:10px;letter-spacing:1.5px}
#loginScreen .login-card h1{font-size:24px;line-height:1.35;letter-spacing:-.6px;margin:0;color:#fff}
#loginScreen .login-card>.muted{font-size:12px;line-height:1.8;margin:10px 0 28px;color:#c3d7e3}
#loginScreen .field{color:#daeaf0;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;margin-bottom:18px;gap:9px}
#loginScreen .field>label{color:inherit;font-size:inherit;font-weight:inherit}
#loginScreen .field input{width:100%;min-height:49px;border:1px solid #ffffff29;border-radius:28px;background:#ffffff17;color:#fff;padding:12px 18px;font-size:14px;font-weight:500;letter-spacing:0;box-shadow:inset 0 1px 0 #ffffff08}
#loginScreen .field input::placeholder{color:#bfceda;opacity:1}
#loginScreen .field input:focus{outline:2px solid #40e1e0;outline-offset:3px;border-color:transparent;background:#ffffff20}
#loginScreen .password-field input{padding-right:52px}
#loginScreen .password-toggle{border-radius:50%;color:#c4e0e8;background:transparent}
#loginScreen .password-toggle:hover{background:#ffffff16;color:white}
#loginScreen #loginSubmit{border:0;border-radius:28px;margin:10px 0 0;min-height:49px;background:linear-gradient(100deg,#10bdf0,#03dfcd);color:#083d53;font-size:13px;font-weight:800;box-shadow:0 7px 20px #06d9da26;gap:14px}
#loginScreen #loginSubmit:hover{filter:brightness(1.09);transform:translateY(-1px)}
#loginScreen #loginSubmit:focus-visible,#loginScreen .password-toggle:focus-visible{outline:2px solid white;outline-offset:4px}
#loginScreen .login-help{font-size:11px;color:#c6e3e7;margin:25px 0 0;display:flex;align-items:center;justify-content:center;gap:8px}
.login-account-note{font-size:10px;line-height:1.7;text-align:center;color:#a9c6d0;margin:10px 0 0}
#loginScreen .login-card .error{color:#fff1f1;background:#7c2639b3;border:1px solid #ffadb475;border-radius:12px;font-size:12px;line-height:1.6;padding:10px 12px;letter-spacing:0}
.login-page-footer{margin:0;text-align:center;font-size:11px;color:#204f63;line-height:1.8;font-weight:600}.login-page-footer span{margin:0 9px;color:#5c8f9d}
@media(min-width:1200px){#loginScreen .login-intro{padding-left:54px}.login-shell{width:1080px}}
@media(max-width:899px){#loginScreen{padding:30px 20px;gap:26px}.login-shell{width:min(540px,100%);display:flex;flex-direction:column;min-height:0}#loginScreen .login-intro{width:100%;min-height:300px;padding:26px 28px 70px;border-radius:18px}#loginScreen .login-brand{font-size:9px}#loginScreen .login-brand b{font-size:11px}#loginScreen .brand-symbol{width:36px;height:36px;font-size:17px}.login-greeting{margin-top:23px}#loginScreen .login-intro h2{font-size:32px;letter-spacing:-1px}#loginScreen .login-description{font-size:12px;line-height:1.8}#loginScreen .login-intro .eyebrow{font-size:9px}#loginScreen .login-illustration{height:180px;opacity:.6}#loginScreen .login-intro-footer{display:none}#loginScreen .login-form-wrap{position:relative;width:calc(100% - 28px);margin:-35px auto 0;z-index:2}#loginScreen .login-card{padding:28px 26px 24px}#loginScreen .field input{font-size:16px}.login-page-footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){#loginScreen *{transition:none!important}}

/* Keep the ISP scene visible beside the overlapping login form. */
@media(min-width:900px){#loginScreen .login-illustration{width:calc(100% - 190px);object-fit:fill}}
#loginScreen .login-illustration{mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%)}

/* Keep introduction children below the complete interactive form. */
#loginScreen .login-intro{z-index:0}
#loginScreen .login-form-wrap{z-index:2}
#loginScreen .login-illustration{pointer-events:none}