:root {
  color-scheme: dark;
  --auth-canvas: #0a0f13;
  --auth-panel: rgb(13 19 23 / 0.9);
  --auth-raised: #182129;
  --auth-border: rgb(145 166 173 / 0.2);
  --auth-border-strong: rgb(166 185 191 / 0.34);
  --auth-text: #edf1f2;
  --auth-muted: #91a4ab;
  --auth-dim: #667980;
  --auth-accent: #9ab3bb;
  --auth-success: #88ab95;
  --auth-radius: 18px;
}

* {
  box-sizing: border-box;
}

html,
body {
  --page-bg-x: 0px;
  --page-bg-y: 0px;
  --page-light-x: 0px;
  --page-light-y: 0px;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  position: relative;
  display: grid !important;
  min-height: 100dvh !important;
  place-items: center !important;
  padding: clamp(24px, 5vw, 64px) 20px 120px !important;
  overflow-x: hidden !important;
  color: var(--auth-text) !important;
  background-color: var(--auth-canvas) !important;
  background-image:
    linear-gradient(90deg, rgb(5 9 12 / 0.9), rgb(5 9 12 / 0.28) 58%, rgb(5 9 12 / 0.72)),
    url("/assets/premium/stratus-clouds.webp") !important;
  background-position: 0 0, calc(50% + var(--page-bg-x)) calc(50% + var(--page-bg-y)) !important;
  background-size: cover !important;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
}

.page-parallax-layer {
  opacity: var(--layer-opacity, 1);
  scale: var(--layer-scale, 1);
  translate: var(--layer-x, 0) var(--layer-y, 0);
  transition: translate 80ms linear, opacity 180ms linear, scale 180ms linear;
  will-change: translate, opacity, scale;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: -20%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 36%, rgb(219 231 234 / 0.08) 49%, transparent 63%);
  content: "";
  transform: translate3d(calc(-5% + var(--page-light-x)), var(--page-light-y), 0) rotate(-3deg) scale(1.08);
  transition: transform 80ms linear;
  will-change: transform;
}

.container {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: min(100%, 500px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(30px, 5vw, 52px) !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: var(--auth-radius) !important;
  color: var(--auth-text) !important;
  background: var(--auth-panel) !important;
  box-shadow: 0 36px 100px rgb(0 0 0 / 0.35) !important;
  transform: perspective(1400px) rotateY(-0.8deg) translateZ(0) !important;
  transform-origin: center !important;
  transition: transform 260ms cubic-bezier(.2, .75, .2, 1), border-color 260ms ease !important;
}

.container:hover {
  border-color: var(--auth-border-strong) !important;
  transform: perspective(1400px) rotateY(0) translateY(-2px) !important;
}

.container::before {
  order: -3;
  display: block;
  margin-bottom: 32px;
  color: var(--auth-accent);
  content: "NETRENDER  /  PRIVATE ACCESS";
  font: 600 11px/1.2 "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.12em;
}

.container::after {
  position: absolute;
  top: 28px;
  right: 30px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--auth-success);
  border-radius: 50%;
  background: rgb(136 171 149 / 0.22);
  content: "";
}

#logintext {
  order: -2;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--auth-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(32px, 5vw, 40px) !important;
  font-weight: 620 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.055em !important;
  text-align: left !important;
  transform: translateZ(0) scale(1) !important;
  transform-origin: left center !important;
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1), letter-spacing 320ms ease !important;
}

#logintext span {
  display: inline !important;
  color: inherit !important;
  animation: none !important;
}

.auth-subtitle {
  order: -1;
  margin: 0 0 32px;
  color: var(--auth-muted);
  font-size: 15px;
  line-height: 1.6;
}

.login {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 0 14px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  perspective: none !important;
}

.login input {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid var(--auth-border-strong) !important;
  border-radius: 10px !important;
  outline: 0 !important;
  color: var(--auth-text) !important;
  background: var(--auth-raised) !important;
  box-shadow: none !important;
  font: inherit !important;
  opacity: 1 !important;
  transform: none !important;
  transition: border-color 160ms ease, background 160ms ease !important;
}

.login input::placeholder {
  color: var(--auth-dim) !important;
}

.login input:focus {
  border-color: var(--auth-accent) !important;
  background: #1c2730 !important;
  transform: translateX(3px) !important;
}

#identifier:not(.hidden-left),
#username:not(.hidden-left),
#password.active,
#loginCode.active {
  position: relative !important;
  display: block !important;
}

.hidden-left {
  display: none !important;
}

#loader {
  position: absolute !important;
  z-index: 4 !important;
  top: 10px !important;
  right: 12px !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  opacity: 0 !important;
  transform: none !important;
}

#loader.visible {
  opacity: 0.6 !important;
}

.nextbtn,
.back-btn,
.ya-btn {
  position: static !important;
  display: inline-flex !important;
  width: 100% !important;
  min-height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--auth-canvas) !important;
  background: var(--auth-text) !important;
  box-shadow: none !important;
  font: 600 14px/1 "Segoe UI Variable", "Segoe UI", Arial, sans-serif !important;
  text-decoration: none !important;
  transform: none !important;
  cursor: pointer !important;
  transition: background 150ms ease, opacity 150ms ease, transform 150ms ease !important;
}

.nextbtn:hover,
.ya-btn:hover {
  background: #fff !important;
  transform: translateY(-1px) !important;
}

.nextbtn:disabled {
  cursor: not-allowed !important;
  opacity: 0.42 !important;
}

.back-btn {
  margin-top: 10px !important;
  border-color: var(--auth-border) !important;
  color: var(--auth-muted) !important;
  background: transparent !important;
}

@media (hover: hover) and (pointer: fine) {
  .container:hover #logintext,
  .container:focus-within #logintext {
    letter-spacing: -0.065em !important;
    transform: translate3d(5px, 0, 0) scale(1.045) !important;
  }

  .nextbtn:hover,
  .ya-btn:hover {
    transform: translate3d(7px, -2px, 0) !important;
  }

  .back-btn:hover {
    color: var(--auth-text) !important;
    border-color: var(--auth-border-strong) !important;
    transform: translateX(-6px) !important;
  }
}

.nextbtn:active,
.back-btn:active,
.ya-btn:active {
  transform: scale(0.985) !important;
}

.step-hidden {
  display: none !important;
}

#authStatus {
  min-height: 22px !important;
  margin-top: 12px !important;
  color: var(--auth-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.cf {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-height: 0 !important;
  place-items: center !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.down {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  gap: 14px !important;
  margin: 24px 0 0 !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--auth-border) !important;
  color: var(--auth-muted) !important;
  transform: none !important;
}

.down > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 18px !important;
  margin: 0 !important;
}

.down a {
  color: var(--auth-muted) !important;
  font-size: 13px !important;
  text-decoration: none !important;
}

.down a:hover {
  color: var(--auth-text) !important;
}

.ya-btn {
  border-color: var(--auth-border-strong) !important;
  color: var(--auth-text) !important;
  background: var(--auth-raised) !important;
}

.message-box {
  position: static !important;
  display: grid !important;
  width: 100% !important;
  place-items: start !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 24px !important;
  border: 1px solid var(--auth-border) !important;
  border-radius: 14px !important;
  color: var(--auth-text) !important;
  background: rgb(24 33 41 / 0.72) !important;
  box-shadow: none !important;
  transform: none !important;
}

.message-box .lock-icon {
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 12px;
  border: 1px solid var(--auth-border);
  border-radius: 12px;
  filter: grayscale(1);
  opacity: 0.82;
  transition: none !important;
}

.message-box h2 {
  margin: 0 !important;
  color: var(--auth-text) !important;
  font-size: 22px !important;
  text-align: left !important;
}

.message-box p {
  margin: 0 !important;
  color: var(--auth-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

@media (max-width: 620px) {
  body {
    place-items: start center !important;
    padding: 18px 14px 100px !important;
    background-image:
      linear-gradient(0deg, rgb(6 10 13 / 0.88), rgb(6 10 13 / 0.38)),
      url("/assets/premium/stratus-clouds-mobile.webp") !important;
  }

  .container {
    width: 100% !important;
    padding: 28px 22px !important;
    border-radius: 14px !important;
    transform: none !important;
  }

  .container:hover {
    transform: none !important;
  }

  #logintext {
    font-size: 34px !important;
  }

  .login input:focus {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 1ms !important;
  }

  .page-parallax-layer {
    opacity: 1 !important;
    scale: none !important;
    translate: none !important;
  }
}