.login-main:has(.login-shell){position:relative;display:grid;place-items:center;overflow:hidden;padding:38px;background:#151315}
.login-main:has(.login-shell)::before{content:"";position:absolute;width:720px;height:720px;left:-310px;top:-330px;border-radius:50%;background:radial-gradient(circle,rgba(170,52,146,.48),rgba(170,52,146,.05) 56%,transparent 72%);filter:blur(3px)}
.login-main:has(.login-shell)::after{content:"";position:absolute;width:520px;height:520px;right:-180px;bottom:-260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 68%)}
.login-shell{position:relative;z-index:1;width:min(1080px,100%);min-height:650px;display:grid;grid-template-columns:1.08fr .92fr;background:#fff;border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;box-shadow:0 38px 110px rgba(0,0,0,.48)}
.login-showcase{position:relative;overflow:hidden;padding:58px 54px;color:#fff;background:linear-gradient(145deg,#211c21 0%,#171417 62%,#2a1525 100%);display:flex;flex-direction:column}
.login-showcase::before{content:"";position:absolute;inset:auto -100px -150px auto;width:480px;height:480px;border:1px solid rgba(231,145,214,.22);border-radius:50%;box-shadow:0 0 0 55px rgba(170,52,146,.06),0 0 0 110px rgba(170,52,146,.035)}
.login-showcase::after{content:"";position:absolute;right:56px;bottom:75px;width:220px;height:145px;border:1px solid rgba(255,255,255,.25);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025));backdrop-filter:blur(12px);box-shadow:0 22px 55px rgba(0,0,0,.3);transform:perspective(500px) rotateY(-9deg)}
.login-showcase .logo-reverse{width:245px;filter:brightness(0) invert(1);margin:0 0 86px}
.login-brandlockup{position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin:0 0 72px}.login-brandlockup img{width:20px;height:20px;display:block;border-radius:4px;box-shadow:none}.login-brandlockup span{font:600 20px Poppins;color:#fff;letter-spacing:-.035em}
.login-kicker{color:#dc81ca;font:700 11px Poppins;letter-spacing:.17em;text-transform:uppercase}
.login-showcase h2{position:relative;z-index:2;margin:18px 0;font:600 clamp(36px,4vw,53px)/1.08 Poppins;letter-spacing:-.045em;max-width:510px}
.login-showcase>p{position:relative;z-index:2;color:#c9c3c8;font-size:16px;line-height:1.75;max-width:480px}
.login-proof{position:relative;z-index:2;display:flex;gap:11px;flex-wrap:wrap;margin-top:auto;padding-top:40px}
.login-proof span{border:1px solid rgba(255,255,255,.17);border-radius:999px;padding:8px 12px;color:#d9d2d7;font-size:11px;background:rgba(255,255,255,.04)}
.login-card-wrap{display:grid;place-items:center;padding:60px 54px;background:linear-gradient(180deg,#fff,#fbf8fa)}
.login-card-wrap .login{width:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.login-card-wrap .login>img{width:210px;margin:0 0 42px}
.login-card-wrap .login h1{font-size:31px;letter-spacing:-.035em;margin:0 0 10px}
.login-card-wrap .login>p{color:#747074;margin:0 0 29px;line-height:1.6}
.login-card-wrap label{margin:18px 0}.login-card-wrap label>span{font-size:12px;color:#3c373b;margin-bottom:9px}
.login-card-wrap input{height:48px;border:1px solid #dad5d9;background:#fff;border-radius:7px;padding:0 14px;transition:border-color .2s,box-shadow .2s}
.login-card-wrap input:focus{outline:0;border-color:#aa3492;box-shadow:0 0 0 3px rgba(170,52,146,.11)}
.password-field{position:relative}.password-field input{padding-right:68px}.show-password{position:absolute;right:6px;top:6px;height:36px;padding:0 11px;background:#f3edf2;color:#882875;border-radius:5px;font-size:11px}
.login-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px}.login-actions>a{color:#8d2b79;font-weight:700;font-size:12px}.login-actions>button{min-width:128px;height:46px;box-shadow:0 10px 24px rgba(170,52,146,.23);transition:transform .2s,box-shadow .2s}.login-actions>button:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(170,52,146,.3)}
.login-security{display:flex;align-items:center;gap:8px;margin-top:27px;color:#858085;font-size:11px}.login-security::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;background:#aa3492;font-weight:700}
@media(max-width:820px){.login-main:has(.login-shell){padding:18px}.login-shell{grid-template-columns:1fr}.login-showcase{min-height:310px;padding:38px}.login-showcase .logo-reverse{margin-bottom:38px}.login-brandlockup{margin-bottom:34px}.login-showcase h2{font-size:38px}.login-showcase::after{display:none}.login-proof{margin-top:18px}.login-card-wrap{padding:45px 38px}}
@media(max-width:480px){.login-main:has(.login-shell){padding:0;background:#fff}.login-shell{border-radius:0;min-height:100vh}.login-showcase{min-height:255px;padding:28px 25px}.login-showcase .logo-reverse{width:190px;margin-bottom:24px}.login-brandlockup{margin-bottom:24px}.login-brandlockup img{width:18px;height:18px;border-radius:3px}.login-brandlockup span{font-size:18px}.login-showcase h2{font-size:31px;margin:12px 0}.login-showcase>p{font-size:13px}.login-proof{display:none}.login-card-wrap{padding:38px 25px}.login-card-wrap .login>img{display:none}.login-actions{align-items:stretch;flex-direction:column-reverse}.login-actions>button{width:100%}}
@media(max-width:820px){.login-main:has(.login-shell){align-items:stretch}.login-shell{min-height:calc(100vh - 36px)}.login-showcase{display:none}.login-card-wrap{min-height:100%;padding:58px clamp(30px,10vw,72px)}.login-card-wrap .login{max-width:500px}.login-card-wrap .login>img{display:block;width:215px;margin-bottom:54px}}
@media(max-width:480px){.login-main:has(.login-shell){padding:0}.login-shell{min-height:100vh}.login-card-wrap{padding:55px 28px}.login-card-wrap .login>img{display:block;width:195px;margin-bottom:48px}.login-actions{align-items:center;flex-direction:row}.login-actions>button{width:auto}}