:root{
  --navy:#0b1035;
  --navy-2:#18235f;
  --yellow:#ffe500;
  --red:#e63c30;
  --ink:#181b29;
  --muted:#737786;
  --line:#e5e7ee;
  --surface:#f5f6f9;
  --white:#fff;
  --ease:cubic-bezier(.2,.75,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"DM Sans",Arial,sans-serif;background:var(--surface);color:var(--ink)}
body{min-height:100dvh}
button,input{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login-shell{min-height:100dvh;display:grid;grid-template-columns:minmax(460px,1.05fr) minmax(430px,.95fr)}
.login-showcase{position:relative;overflow:hidden;background:
  radial-gradient(circle at 20% 18%,rgba(255,229,0,.16),transparent 25%),
  radial-gradient(circle at 82% 78%,rgba(230,60,48,.14),transparent 28%),
  linear-gradient(145deg,#080d2c,#16215f);color:#fff;padding:40px 48px;display:flex;flex-direction:column;isolation:isolate}
.login-showcase::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.24) .65px,transparent .65px);background-size:24px 24px;opacity:.18}
.login-logo{width:190px;position:relative;z-index:3}
.login-showcase__copy{position:relative;z-index:3;margin-top:auto;max-width:650px;padding-bottom:40px}
.login-showcase__copy>span{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--yellow);font-weight:800}
.login-showcase h1{font-family:"Manrope";font-size:clamp(43px,5vw,72px);line-height:1.02;letter-spacing:-.05em;margin:17px 0 18px;max-width:720px}
.login-showcase p{max-width:610px;font-size:16px;color:rgba(255,255,255,.67);line-height:1.65}
.login-features{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}
.login-features span{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);backdrop-filter:blur(12px);border-radius:999px;padding:9px 13px;font-size:10px;font-weight:700;color:rgba(255,255,255,.76)}
.login-collage{position:absolute;z-index:1;right:-90px;top:7%;width:460px;height:520px;opacity:.78;transform:rotate(4deg)}
.login-photo{position:absolute;margin:0;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 25px 70px rgba(0,0,0,.28);background:#1d275d}
.login-photo img{width:100%;height:100%;object-fit:cover}
.login-photo--men{width:205px;height:255px;left:0;top:0;transform:rotate(-5deg)}
.login-photo--ladies{width:210px;height:270px;right:0;top:20px;transform:rotate(4deg)}
.login-photo--boys{width:190px;height:240px;left:18px;bottom:0;transform:rotate(5deg)}
.login-photo--girls{width:205px;height:245px;right:15px;bottom:-12px;transform:rotate(-4deg)}
.login-collage::after{content:"";position:absolute;inset:-40px;background:linear-gradient(90deg,rgba(8,13,44,.9),transparent 45%);pointer-events:none}
.login-showcase__footer{position:relative;z-index:3;font-size:10px;color:rgba(255,255,255,.4)}
.login-panel{display:grid;place-items:center;padding:48px;background:
  radial-gradient(circle at 80% 10%,rgba(17,26,84,.05),transparent 30%),
  #f7f8fb}
.login-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:28px;padding:38px;box-shadow:0 28px 90px rgba(17,26,84,.12)}
.login-card__eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--red);font-weight:800}
.login-card h2{font-family:"Manrope";font-size:38px;letter-spacing:-.04em;color:var(--navy);margin:10px 0 5px}
.login-card__top p{font-size:13px;color:var(--muted);margin:0 0 27px}
.login-field{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.login-field>span{font-size:11px;font-weight:800;color:#555966}
.login-field>div{height:50px;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;padding:0 12px;gap:10px;transition:.2s;background:#fff}
.login-field>div:focus-within{border-color:var(--navy);box-shadow:0 0 0 4px rgba(17,26,84,.07)}
.login-field.has-error>div{border-color:#d9433f;box-shadow:0 0 0 4px rgba(217,67,63,.07)}
.login-field svg{width:18px;color:#8b8e9a;flex:none}
.login-field input{border:0;outline:0;width:100%;height:100%;background:transparent;color:var(--ink)}
.password-toggle{width:35px;height:35px;border:0;background:transparent;color:#808391;display:grid;place-items:center;border-radius:8px}
.password-toggle:hover{background:var(--surface);color:var(--navy)}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:17px 0}
.login-options label{display:flex;align-items:center;gap:7px;font-size:11px;color:#5d606d}
.login-options input{accent-color:var(--navy)}
.login-options a{font-size:11px;color:var(--navy);font-weight:800}
.login-error{display:flex;align-items:center;gap:9px;background:#fff0ef;border:1px solid #f3c9c6;color:#a92925;border-radius:11px;padding:10px 12px;margin-bottom:13px}
.login-error[hidden]{display:none}
.login-error span{width:22px;height:22px;border-radius:50%;background:#d9423c;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}
.login-error p{font-size:11px;margin:0}
.login-submit{width:100%;height:52px;border:0;border-radius:13px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;box-shadow:0 14px 30px rgba(17,26,84,.22);transition:transform .25s var(--ease),background .25s}
.login-submit:hover{transform:translateY(-2px);background:var(--navy-2)}
.login-submit:disabled{opacity:.7;cursor:wait;transform:none}
.login-submit svg{width:19px;transition:transform .25s}
.login-submit:hover svg{transform:translateX(3px)}
.login-submit.is-loading svg{animation:loginPulse .7s alternate infinite}
@keyframes loginPulse{to{transform:translateX(5px);opacity:.45}}
.login-security{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:18px;color:#858895;font-size:10px}
.login-security svg{width:15px;color:#17875a}
.login-back{display:block;text-align:center;margin-top:24px;padding-top:21px;border-top:1px solid var(--line);font-size:11px;color:var(--navy);font-weight:800}
@media(max-width:1050px){
  .login-shell{grid-template-columns:1fr 1fr}
  .login-showcase{padding:34px}
  .login-collage{right:-190px;opacity:.52}
  .login-showcase h1{font-size:46px}
  .login-panel{padding:30px}
}
@media(max-width:760px){
  .login-shell{display:block;background:#0b1035}
  .login-showcase{min-height:310px;padding:24px 22px 34px}
  .login-logo{width:160px}
  .login-showcase__copy{margin-top:72px;padding:0;max-width:90%}
  .login-showcase h1{font-size:38px;max-width:540px}
  .login-showcase p{font-size:13px;max-width:520px}
  .login-features,.login-showcase__footer{display:none}
  .login-collage{right:-180px;top:0;height:360px;transform:rotate(7deg);opacity:.5}
  .login-panel{padding:0 14px 30px;background:#0b1035}
  .login-card{margin-top:-14px;position:relative;z-index:5;border-radius:24px;padding:28px 22px;box-shadow:0 25px 70px rgba(0,0,0,.25)}
  .login-card h2{font-size:32px}
}
@media(max-width:420px){
  .login-showcase{min-height:270px}
  .login-showcase__copy{margin-top:55px}
  .login-showcase h1{font-size:31px}
  .login-showcase p{display:none}
  .login-collage{right:-235px;opacity:.38}
  .login-options{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}