.koe-login-page{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 8% 12%,rgba(37,99,235,.13),transparent 30%),radial-gradient(circle at 92% 86%,rgba(124,58,237,.1),transparent 28%),#f4f7fb;color:#10213e;font-family:Poppins,Arial,sans-serif}
.koe-login-page *,.koe-login-page *::before,.koe-login-page *::after{box-sizing:border-box}.koe-login-page .koe-footer{display:none}
.koe-login{position:relative;display:grid;min-height:100vh;place-items:center;overflow:hidden;padding:34px}.koe-login::before,.koe-login::after{position:absolute;border-radius:50%;content:"";pointer-events:none}.koe-login::before{top:-165px;right:-145px;width:390px;height:390px;border:58px solid rgba(31,102,218,.06)}.koe-login::after{bottom:-175px;left:-135px;width:360px;height:360px;border:52px solid rgba(124,58,237,.05)}
.koe-login-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(390px,.97fr);width:min(1120px,100%);min-height:650px;overflow:hidden;border:1px solid rgba(148,163,184,.24);border-radius:30px;background:rgba(255,255,255,.94);box-shadow:0 32px 80px rgba(15,35,69,.16)}
.koe-login-brand{position:relative;display:flex;min-width:0;flex-direction:column;justify-content:space-between;overflow:hidden;padding:48px;background:radial-gradient(circle at 80% 18%,rgba(255,255,255,.18),transparent 25%),linear-gradient(145deg,#124aa8 0%,#1f66da 48%,#2b77e7 100%);color:#fff}.koe-login-brand::before{position:absolute;right:-120px;bottom:-135px;width:385px;height:385px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 48px rgba(255,255,255,.045),0 0 0 96px rgba(255,255,255,.03);content:""}
.koe-login-logo{position:relative;display:inline-flex;align-self:flex-start;padding:13px 16px 11px;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(5,29,78,.18)}.koe-login-logo img{display:block;width:166px;height:auto}
.koe-login-brand-copy{position:relative;max-width:470px;margin:44px 0}.koe-login-eyebrow{display:inline-flex;align-items:center;min-height:30px;margin:0 0 20px;padding:0 13px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.12);font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.koe-login-brand h1{max-width:460px;margin:0;color:#fff;font-size:clamp(2.3rem,4vw,3.8rem);font-weight:900;line-height:1.02;letter-spacing:-.045em}.koe-login-brand-copy>p:last-child{max-width:410px;margin:23px 0 0;color:rgba(255,255,255,.82);font-size:.96rem;line-height:1.75}
.koe-login-highlights{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.koe-login-highlights li{display:flex;min-width:0;min-height:68px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.1);color:#fff;font-size:.72rem;font-weight:700;line-height:1.35;backdrop-filter:blur(8px)}
.koe-login-panel{display:flex;min-width:0;align-items:center;padding:56px clamp(38px,5vw,74px);background:rgba(255,255,255,.97)}.koe-login-panel-inner{width:100%;max-width:410px;margin:0 auto}.koe-login-kicker{margin:0 0 8px;color:#1f66da;font-size:.72rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.koe-login-panel h2{margin:0;color:#10213e;font-size:clamp(1.8rem,3vw,2.35rem);font-weight:900;line-height:1.12;letter-spacing:-.035em}.koe-login-intro{margin:13px 0 30px;color:#66758c;font-size:.86rem;line-height:1.65}.koe-login-form{margin:0}.koe-login-field{margin-bottom:18px}.koe-login-field label{display:block;margin:0 0 8px;color:#334765;font-size:.75rem;font-weight:800}.koe-login-control{position:relative}
.koe-login-control input{width:100%;min-height:52px;padding:0 15px;border:1px solid #cfdae9;border-radius:13px;outline:none;background:#f9fbfe;color:#10213e;font:600 .86rem Poppins,Arial,sans-serif;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.koe-login-control input::placeholder{color:#98a5b7;font-weight:500}.koe-login-control input:hover{border-color:#afc0d7}.koe-login-control input:focus{border-color:#1f66da;background:#fff;box-shadow:0 0 0 4px rgba(31,102,218,.12)}.koe-login-control--password input{padding-right:76px}
.koe-login-password-toggle{position:absolute;top:50%;right:8px;min-height:36px;padding:0 10px;transform:translateY(-50%);border:0;border-radius:9px;background:transparent;color:#1f66da;font:800 .68rem Poppins,Arial,sans-serif;cursor:pointer}.koe-login-password-toggle:hover,.koe-login-password-toggle:focus-visible{background:#eaf2ff;outline:2px solid #8ab2f0;outline-offset:1px}
.koe-login-submit{display:inline-flex;width:100%;min-height:52px;align-items:center;justify-content:center;gap:10px;margin-top:7px;padding:0 20px;border:0;border-radius:13px;background:linear-gradient(135deg,#1d5fd7,#2b77e7);box-shadow:0 14px 30px rgba(37,99,235,.25);color:#fff;font:850 .86rem Poppins,Arial,sans-serif;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}.koe-login-submit::after{content:"→";font-size:1.2rem;line-height:1}.koe-login-submit:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(37,99,235,.32)}.koe-login-submit:focus-visible{outline:3px solid rgba(31,102,218,.3);outline-offset:3px}.koe-login-submit:disabled{cursor:wait;opacity:.72;transform:none}
.koe-login-status{min-height:23px;margin:14px 0 0;color:#66758c;font-size:.72rem;font-weight:650;line-height:1.45;text-align:center}.koe-login-status.is-error{color:#bd2c37}.koe-login-help{display:flex;align-items:center;gap:9px;margin:25px 0 0;padding-top:21px;border-top:1px solid #e5ebf3;color:#718096;font-size:.7rem;line-height:1.5}.koe-login-help::before{display:grid;width:25px;height:25px;flex:0 0 25px;place-items:center;border-radius:50%;background:#edf3fc;color:#31547f;content:"?";font-weight:900}
@media(max-width:900px){.koe-login{padding:22px}.koe-login-shell{grid-template-columns:1fr;width:min(620px,100%);min-height:0}.koe-login-brand{padding:30px 34px}.koe-login-logo img{width:138px}.koe-login-brand-copy{margin:30px 0 24px}.koe-login-brand h1{max-width:520px;font-size:clamp(2rem,7vw,3rem)}.koe-login-brand-copy>p:last-child{margin-top:15px}.koe-login-panel{padding:42px 34px}}
@media(max-width:560px){.koe-login{display:block;padding:0}.koe-login-shell{width:100%;border:0;border-radius:0;box-shadow:none}.koe-login-brand{padding:24px 22px 28px}.koe-login-logo{padding:10px 12px 9px;border-radius:13px}.koe-login-logo img{width:124px}.koe-login-brand-copy{margin:25px 0 0}.koe-login-eyebrow,.koe-login-brand-copy>p:last-child,.koe-login-highlights{display:none}.koe-login-brand h1{max-width:330px;font-size:2rem}.koe-login-panel{min-height:calc(100vh - 210px);align-items:flex-start;padding:36px 22px 42px}.koe-login-intro{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.koe-login-submit,.koe-login-control input{transition:none}}

/* Keep the configurable modules visible on small screens as well. */
@media(max-width:560px){
    .koe-login-highlights{display:grid;gap:8px;margin-top:24px}
    .koe-login-highlights li{min-height:64px;padding:9px;font-size:.65rem}
}

/* Logo colors stay attached to each module when its position changes. */
.koe-login-highlights{isolation:isolate;margin-bottom:18px;margin-top:96px}
.koe-login-highlights li{position:relative;transform-origin:center bottom;border-color:rgba(255,255,255,.4);box-shadow:0 5px 0 rgba(5,29,78,.22),inset 0 1px 0 rgba(255,255,255,.25);backdrop-filter:none}
.koe-login-highlights .koe-login-cube--red{background:#cf263e}
.koe-login-highlights .koe-login-cube--green{background:#12813f}
.koe-login-highlights .koe-login-cube--blue{background:#0736bf}
@media(max-width:560px){.koe-login-highlights{margin-top:96px;margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.koe-login-highlights{margin-bottom:0}}
.koe-login-status.is-connecting{position:relative;min-height:44px;padding:14px 14px 14px 44px;border:1px solid #c8d9fa;border-radius:12px;background:linear-gradient(120deg,#eff5ff,#f6f1ff);color:#173c86;line-height:1.6;text-align:left}
.koe-login-status.is-connecting::before{content:"";position:absolute;left:15px;top:18px;width:16px;height:16px;border:2px solid #c3d4f7;border-top-color:#1559c7;border-radius:50%}
@media(prefers-reduced-motion:no-preference){.koe-login-status.is-connecting::before{animation:koe-login-connecting .8s linear infinite}@keyframes koe-login-connecting{to{transform:rotate(360deg)}}}