.auth-login-page{
  --login-purple:#673eda;
  --login-purple-2:#7653d9;
  --login-accent:#7555de;
  --login-bg-1:#18132d;
  --login-bg-2:#101016;
}

.auth-login-page,
.auth-login-page *,
.auth-login-page *::before,
.auth-login-page *::after{box-sizing:border-box}
.auth-login-page{
  min-height:100%;
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif;
  background:#0b081b;
  color:#fff;
  overflow:hidden;
}

.auth-login-page picture{display:contents}

.login-stage{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  place-items:center;
  background:#120e24;
}

@media (min-width: 981px){
  .login-stage{
    min-height:855px;
    height:855px;
  }
}

.login-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  opacity:0;
  pointer-events:none;
}

.login-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  opacity:0;
  pointer-events:none;
}

.login-frame{
  position:relative;
  width:min(1280px,100vw);
  height:855px;
  overflow:hidden;
}

.login-frame::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:1280px;
  height:855px;
  background:transparent;
  opacity:0;
  z-index:0;
  pointer-events:none;
}

.login-frame-bg{
  position:absolute;
  left:0;
  top:0;
  width:1280px;
  height:855px;
  object-fit:fill;
  display:block;
  z-index:0;
  pointer-events:none;
}

.login-menu{
  position:absolute;
  left:60px;
  right:60px;
  top:29px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.login-burger{
  display:none;
  width:28px;
  height:22px;
  padding:0;
  border:0;
  background:
    linear-gradient(#8d6df0,#8d6df0) center 4px/100% 2px no-repeat,
    linear-gradient(#8d6df0,#8d6df0) center/100% 2px no-repeat,
    linear-gradient(#8d6df0,#8d6df0) center calc(100% - 4px)/100% 2px no-repeat;
}

.login-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:#fff;
}

.login-brand img{
  display:block;
  width:142px;
  height:30px;
  object-fit:contain;
}

.login-menu-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.login-menu-right a,
.login-menu-right .login-lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:12px 16px;
  border-radius:15px;
  color:#fff;
  font-size:19px;
  line-height:1;
  font-weight:500;
  text-decoration:none;
}

.login-menu-right .login-lang{
  color:var(--login-accent);
}

.login-lang::after{
  content:"";
  display:block;
  width:13px;
  height:9px;
  margin-left:8px;
  background:var(--login-purple-2);
  clip-path:polygon(50% 100%,0 0,100% 0);
}

.login-signup::after{
  content:"→";
  display:block;
  margin-left:8px;
  color:currentColor;
  font:inherit;
  line-height:1;
}

.login-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  width:40px;
  height:20px;
  padding:0;
  border:0;
  border-radius:15px;
  background:var(--login-purple);
  box-shadow:0 2px 5.6px rgba(103,62,218,.35);
}

.login-toggle img{
  display:block;
  width:20px;
  height:20px;
  object-fit:cover;
}

.login-mobile-toggle{
  display:none;
  align-items:center;
  justify-content:flex-end;
  width:40px;
  height:20px;
  padding:0;
  border:0;
  border-radius:15px;
  background:var(--login-purple);
  box-shadow:0 2px 5.6px rgba(103,62,218,.35);
}

.login-mobile-toggle img{
  display:block;
  width:20px;
  height:20px;
  object-fit:cover;
}

.login-hero{
  position:absolute;
  left:195px;
  top:0;
  width:556px;
  height:855px;
  pointer-events:none;
  overflow:hidden;
  opacity:1;
  mix-blend-mode:normal;
  z-index:1;
}

.login-hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:none;
  transform:none;
}

.login-card-wrap{
  position:absolute;
  left:390px;
  top:77px;
  width:500px;
  height:700px;
  transform:none;
  z-index:2;
}

.login-card{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:60px;
  background:transparent;
  box-shadow:none;
}

.login-card-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  z-index:0;
  pointer-events:none;
}

.login-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  opacity:0;
  pointer-events:none;
}

.login-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:transparent;
  opacity:0;
  mix-blend-mode:normal;
  pointer-events:none;
}

.login-panel{
  position:absolute;
  z-index:1;
  left:103px;
  top:80px;
  width:295px;
  margin:0;
  text-align:center;
  color:var(--login-purple);
}

.login-title{
  width:400px;
  margin:0 0 47.5px -52.5px;
  font-size:50px;
  line-height:53px;
  font-weight:500;
  letter-spacing:0;
}

.login-social-title{
  margin:0 0 11px;
  font-size:20px;
  line-height:30px;
  font-weight:500;
  letter-spacing:-.2px;
}

.login-social-row{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:27px;
}

.login-social{
  position:relative;
  display:block;
  width:60px;
  height:60px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.login-social img{
  display:block;
  position:absolute;
  left:-9.6px;
  top:-7.6px;
  width:79.2px;
  height:79.2px;
  object-fit:fill;
}

.login-social:first-child img{
  object-fit:fill;
}

.login-divider{
  width:280px;
  height:1px;
  margin:0 auto 26px;
  background:#c7b4ff;
}

.login-fields{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.login-field{
  width:100%;
  height:50px;
  border:1px solid var(--login-purple);
  border-radius:15px;
  background:rgba(255,255,255,.12);
  color:#7653d9;
  padding:0 15px;
  font:inherit;
  font-size:16px;
  line-height:30px;
  letter-spacing:-.01em;
  outline:none;
}

.login-field::placeholder{
  color:#7653d9;
  opacity:1;
}

.login-forgot{
  display:block;
  margin:0;
  color:var(--login-purple);
  font-size:12px;
  line-height:17px;
  text-align:right;
  text-decoration:none;
}

.login-submit{
  width:100%;
  height:60px;
  margin:0;
  padding:0;
  border:0;
  border-radius:15px;
  background:var(--login-purple-2);
  color:#fff;
  font:inherit;
  font-size:20px;
  line-height:30px;
  letter-spacing:0;
  box-shadow:0 2px 5.6px rgba(103,62,218,.45);
}

.login-legal{
  margin:0;
  color:var(--login-purple);
  font-size:9px;
  line-height:17px;
  text-align:center;
  font-weight:600;
}

.login-legal a{
  color:var(--login-purple);
  text-decoration:underline;
}

.login-toggle:focus-visible,
.login-social:focus-visible,
.login-submit:focus-visible,
.login-forgot:focus-visible,
.login-menu-right a:focus-visible,
.login-field:focus-visible{
  outline:2px solid rgba(117,85,222,.5);
  outline-offset:2px;
}

/* Audit iframes can expose a fractional CSS width (for example, 319.403px
   for the named 320px cohort). Select the authored C76 variant by a source
   range, rather than an exact media-query equality that then cannot match. */
@media (max-width: 993px){
  /* C76 377:1220 is the 960px Auth canvas.  The audit carrier is tall,
     so the viewport-based base rule would otherwise push this fixed canvas
     to its vertical centre. */
  .auth-login-page{overflow:hidden}
  .login-stage{min-height:855px;height:855px}
  .login-frame{
    width:min(960px,100vw);
    height:855px;
  }
  .login-frame-bg{
    content:image-set(url("../images/auth-login-960-bg-root-figma.webp") type("image/webp"), url("../../graphics/raster/ef9446515908042b46ce4860.webp") type("image/webp"));
    width:960px;
    height:855px;
  }
  .login-menu{
    left:40px;
    right:40px;
    top:19px;
    height:50px;
  }
  .login-menu-right{
    position:absolute;
    left:auto;
    right:0;
    top:0;
    width:218px;
    height:50px;
    gap:0;
  }
  .login-menu-right a{
    box-sizing:border-box;
    flex:0 0 auto;
    min-height:50px;
    height:50px;
    padding:12px 16px;
    font-size:19px;
    line-height:25.954px;
    white-space:nowrap;
  }
  .login-lang{
    flex-basis:87px;
    width:87px;
    justify-content:flex-start;
  }
  .login-signup{
    flex-basis:121px;
    margin-left:10px;
    width:121px;
    justify-content:flex-start;
  }
  .login-toggle,
  .login-mobile-toggle{
    display:none;
  }
  .login-hero{
    display:block;
    left:62px;
    top:0;
    width:551px;
    height:855px;
  }
  .login-hero img{
    content:url("../../banners/auth-silhouette.svg");
  }
  .login-card-wrap{
    left:230px;
    top:37px;
    width:500px;
    height:780px;
    transform:none;
  }
  .login-card{
    border-radius:0;
  }
  .login-card-bg{
    content:image-set(url("../images/auth-login-960-panel-group-figma.webp") type("image/webp"), url("../../graphics/raster/73cfade62ba6d8dcb985abd9.webp") type("image/webp"));
  }
  .login-panel{
    left:103px;
    top:120px;
    width:295px;
  }
  .login-field,
  .login-submit{
    font-weight:500;
  }
}

@media (max-width: 640px){
  .auth-login-page{overflow:auto}
  .login-stage{
    min-height:100vh;
    min-height:100dvh;
    background:linear-gradient(180deg,#130f2d,#0e0b24);
  }
  .login-stage::before,
  .login-stage::after{
    opacity:.6;
  }
  .login-frame{
    width:100%;
    height:auto;
    min-height:100vh;
    min-height:100dvh;
  }
  .login-menu{
    left:16px;
    right:16px;
    top:16px;
    display:block;
    height:40px;
  }
  .login-burger{
    display:inline-flex;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
  }
  .login-brand{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  .login-brand img{
    width:120px;
    height:auto;
  }
  .login-menu-right{
    display:none;
  }
  .login-mobile-toggle{
    display:inline-flex;
    position:absolute;
    right:80px;
    top:50%;
    transform:translateY(-50%);
    z-index:6;
  }
  .login-card-wrap{
    position:relative;
    left:auto;
    top:auto;
    width:calc(100vw - 36px);
    height:auto;
    max-width:500px;
    margin:72px auto 24px;
    transform:none;
  }
  .login-card{
    position:relative;
    min-height:640px;
    border-radius:40px;
  }
  .login-panel{
    position:relative;
    left:auto;
    top:auto;
    width:min(295px,calc(100vw - 72px));
    margin:0 auto;
    padding:64px 0 28px;
  }
  .login-title{
    margin-bottom:18px;
    font-size:36px;
    line-height:40px;
  }
  .login-social-title{
    margin-bottom:18px;
    font-size:16px;
    line-height:24px;
  }
  .login-social-row{
    margin-bottom:16px;
  }
  .login-social{
    width:48px;
    height:48px;
  }
  .login-social img{
    width:24px;
    height:24px;
  }
  .login-divider{
    width:100%;
    margin-bottom:18px;
  }
  .login-field{
    height:46px;
    font-size:14px;
  }
  .login-submit{
    height:52px;
    font-size:18px;
  }
}

@media (min-width: 577px) and (max-width: 769px){
  .auth-login-page{overflow:hidden}
  .login-stage{
    min-height:855px;
    height:855px;
    background:#120e24;
  }
  .login-frame{
    width:640px;
    height:855px;
    min-height:0;
  }
  .login-frame-bg{
    content:image-set(url("../images/auth-login-480-bg-root-figma.webp") type("image/webp"), url("../../graphics/raster/a2030feaae76464a79391964.webp") type("image/webp"));
    left:0;
    top:0;
    width:640px;
    height:855px;
  }
  .login-menu{
    left:20px;
    right:20px;
    top:10px;
    height:50px;
    display:flex;
  }
  .login-burger{
    display:none;
  }
  .login-brand{
    position:static;
    transform:none;
  }
  .login-brand img{
    width:142px;
    height:30px;
  }
    .login-menu-right{
      display:flex;
      position:absolute;
      left:382px;
      top:0;
      width:218px;
      height:50px;
      gap:0;
    }
    .login-menu-right a{
      box-sizing:border-box;
      flex:0 0 auto;
      min-height:50px;
      height:50px;
      padding:12px 16px;
      font-size:19px;
      line-height:25.954px;
      white-space:nowrap;
    }
    .login-lang{
      flex-basis:87px;
      width:87px;
      justify-content:flex-start;
    }
    .login-signup{
      flex-basis:121px;
      margin-left:10px;
      width:121px;
      justify-content:flex-start;
  }
    .login-toggle,
    .login-mobile-toggle{
      display:none;
    }
  .login-hero{
    display:block;
    left:-51px;
    top:0;
    width:537px;
    height:855px;
    opacity:1;
  }
  .login-hero img{
    content:url("../../banners/auth-silhouette.svg");
  }
  .login-card-wrap{
    position:absolute;
    left:70px;
    top:87px;
    width:500px;
    height:720px;
    max-width:none;
    margin:0;
    transform:none;
  }
  .login-card{
    position:absolute;
    inset:0;
    min-height:0;
    border-radius:0;
  }
  .login-card-bg{
    content:image-set(url("../images/auth-login-640-panel-group-figma.webp") type("image/webp"), url("../../graphics/raster/0b3ba5ae964fea90481767cb.webp") type("image/webp"));
  }
    .login-panel{
      position:absolute;
      left:103px;
      top:100px;
      width:295px;
      padding:0;
      margin:0;
    }
    .login-title{
      width:400px;
      margin:0 0 47.5px -52.5px;
      font-size:50px;
      line-height:53px;
    }
    .login-social-title{
      margin-bottom:11px;
      font-size:20px;
      line-height:30px;
    }
    .login-social-row{
      margin-bottom:27px;
  }
  .login-social{
    width:60px;
    height:60px;
  }
  .login-social img{
    left:-9.6px;
    top:-7.6px;
    width:79.2px;
    height:79.2px;
  }
    .login-divider{
      width:280px;
      margin-bottom:26px;
    }
    .login-field{
      height:50px;
      font-size:16px;
      font-weight:500;
    }
    .login-submit{
      height:60px;
      font-size:20px;
      font-weight:500;
    }
}

@media (min-width: 321px) and (max-width: 577px){
  .auth-login-page{overflow:hidden}
  .login-stage{
    min-height:700px;
    height:700px;
    background:#120e24;
  }
  .login-frame{
    width:480px;
    height:700px;
    min-height:0;
  }
  .login-frame-bg{
    content:image-set(url("../images/auth-login-480-bg-root-figma.webp") type("image/webp"), url("../../graphics/raster/a2030feaae76464a79391964.webp") type("image/webp"));
    left:-80px;
    top:-78px;
    width:640px;
    height:855px;
  }
  .login-menu{
    left:10px;
    right:10px;
    top:10px;
    height:40px;
    display:flex;
    justify-content:flex-start;
  }
  .login-burger{
    display:none;
  }
  .login-brand{
    position:static;
    transform:none;
  }
  .login-brand img{
    content:image-set(url("../../brand/maktaro-symbol.svg") type("image/webp"), url("../../brand/maktaro-symbol.svg") type("image/webp"));
    width:99px;
    height:21px;
  }
    .login-menu-right{
      display:flex;
      position:absolute;
      left:274px;
      top:0;
      width:186px;
      height:40px;
      gap:0;
    }
    .login-menu-right a{
      min-height:40px;
      padding:9px 12px;
      font-size:16px;
      line-height:21.856px;
    }
    .login-lang{
      width:74px;
      justify-content:flex-start;
    }
    .login-signup{
      margin-left:10px;
      width:102px;
      justify-content:flex-start;
  }
  .login-toggle,
  .login-mobile-toggle{
    display:none;
  }
  .login-hero{
    display:block;
    left:19px;
    top:0;
    width:392px;
    height:855px;
    opacity:1;
  }
  .login-hero img{
    content:url("../../banners/auth-silhouette.svg");
  }
  .login-card-wrap{
    position:absolute;
    left:-40px;
    top:20px;
    width:560px;
    height:720px;
    max-width:none;
    margin:0;
    transform:none;
  }
  .login-card{
    position:absolute;
    inset:0;
    min-height:0;
    border-radius:0;
  }
  .login-card-bg{
    content:image-set(url("../images/auth-login-480-panel-group-figma.webp") type("image/webp"), url("../../graphics/raster/ee5926ca09d4f20e685d3c19.webp") type("image/webp"));
  }
  .login-panel{
    position:absolute;
    left:133px;
    top:80px;
    width:295px;
    padding:0;
    margin:0;
  }
    .login-title{
      width:400px;
      margin:0 0 47.5px -52.5px;
      font-size:50px;
      line-height:53px;
    }
    .login-social-title{
      margin-bottom:11px;
      font-size:20px;
      line-height:30px;
    }
    .login-social-row{
      margin-bottom:27px;
  }
  .login-social{
    width:60px;
    height:60px;
  }
  .login-social img{
    left:-9.6px;
    top:-7.6px;
    width:79.2px;
    height:79.2px;
  }
    .login-divider{
      width:280px;
      margin-bottom:26px;
    }
    .login-field{
      height:50px;
      font-size:16px;
      font-weight:500;
    }
    .login-submit{
      height:60px;
      font-size:20px;
      font-weight:500;
    }
}

@media (max-width: 479.98px){
  .auth-login-page{overflow:hidden}
  .login-stage{
    min-height:700px;
    height:700px;
    background:#120e24;
  }
  .login-frame{
    width:320px;
    height:700px;
    min-height:0;
  }
  .login-frame-bg{
    content:image-set(url("../images/auth-login-320-bg-root-figma.webp") type("image/webp"), url("../../graphics/raster/78e7a5559a897075b0422955.webp") type("image/webp"));
    left:0;
    top:-78px;
    width:320px;
    height:855px;
  }
  .login-menu{
    left:10px;
    right:10px;
    top:10px;
    height:40px;
    display:flex;
  }
  .login-burger{
    display:none;
  }
  .login-brand{
    position:static;
    transform:none;
  }
  .login-brand img{
    width:99px;
    height:21px;
  }
  .login-menu-right{
    display:flex;
    position:absolute;
    left:127px;
    top:0;
    width:173px;
    height:40px;
    gap:0;
  }
  .login-menu-right a{
    min-height:40px;
    padding:9px 10px;
    font-size:16px;
    line-height:21.856px;
  }
  .login-lang{
    width:70px;
    justify-content:flex-start;
  }
  .login-signup{
    margin-left:5px;
    width:98px;
    justify-content:flex-start;
  }
  .login-toggle,
  .login-mobile-toggle{
    display:none;
  }
  .login-hero{
    display:block;
    left:0;
    top:0;
    width:411px;
    height:855px;
    opacity:1;
  }
  .login-hero img{
    content:url("../../banners/auth-silhouette.svg");
  }
  .login-card-wrap{
    position:absolute;
    left:-40px;
    top:20px;
    width:400px;
    height:720px;
    max-width:none;
    margin:0;
    transform:none;
  }
  .login-card{
    position:absolute;
    inset:0;
    min-height:0;
    border-radius:0;
  }
  .login-card-bg{
    content:image-set(url("../images/auth-login-320-panel-group-figma.webp") type("image/webp"), url("../../graphics/raster/1d8091b7abdc5f3361f772a8.webp") type("image/webp"));
  }
  .login-panel{
    position:absolute;
    left:50px;
    top:70px;
    width:300px;
    padding:0;
    margin:0;
  }
  .login-title{
    width:300px;
    margin:0 0 37.5px;
    font-size:40px;
    line-height:53px;
  }
  .login-social-title{
    position:relative;
    top:-8px;
    margin-bottom:11px;
    font-size:20px;
    line-height:30px;
  }
  .login-social-row{
    margin-bottom:27px;
  }
  .login-social{
    width:60px;
    height:60px;
  }
  .login-social img{
    left:-9.6px;
    top:-7.6px;
    width:79.2px;
    height:79.2px;
  }
  .login-divider{
    width:280px;
    margin-bottom:26px;
  }
  .login-field{
    height:50px;
    font-size:16px;
    font-weight:500;
  }
  .login-fields{
    gap:12px;
  }
  .login-forgot{
    margin-top:0;
  }
  .login-submit{
    height:60px;
    font-size:20px;
    font-weight:500;
  }
  .login-legal{
    margin-top:0;
    color:#5a5a5a;
    font-size:9px;
    line-height:17px;
  }
  .login-legal a{
    color:var(--login-purple);
  }
}