:root {
  --auth-bg: #030405;
  --auth-panel: rgba(15, 17, 22, 0.94);
  --auth-copy: #f7f7f5;
  --auth-muted: #a7aab2;
  --auth-line: rgba(255, 255, 255, 0.14);
  --auth-cyan: #43d8e8;
  --auth-violet: #8d72ff;
  --auth-magenta: #ef4e9a;
  --auth-orange: #ff9c45;
}
.tester-gate {
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  position: relative;
  isolation: isolate;
  padding: max(12px, env(safe-area-inset-top)) 12px
    calc(20px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(
      circle at 7% 4%,
      rgba(239, 78, 154, 0.18),
      transparent 27rem
    ),
    radial-gradient(
      circle at 100% 34%,
      rgba(75, 143, 255, 0.17),
      transparent 29rem
    ),
    linear-gradient(155deg, #09040b, #070a12 52%, #030405) !important;
  color: var(--auth-copy);
}
.tester-gate:before,
.tester-gate:after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
}
.tester-gate:before {
  width: 240px;
  height: 240px;
  right: -125px;
  top: 12%;
  background: linear-gradient(135deg, var(--auth-violet), var(--auth-cyan));
  animation: gw-auth-orbit-a 13s ease-in-out infinite alternate;
}
.tester-gate:after {
  width: 210px;
  height: 210px;
  left: -120px;
  bottom: 9%;
  background: linear-gradient(135deg, var(--auth-magenta), var(--auth-orange));
  animation: gw-auth-orbit-b 16s ease-in-out infinite alternate;
}
.gate-card {
  width: min(100%, 460px);
  min-height: 0;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding: 24px 22px 22px !important;
  border: 1px solid var(--auth-line) !important;
  border-radius: 22px !important;
  background: linear-gradient(
    145deg,
    rgba(20, 22, 28, 0.96),
    rgba(8, 10, 14, 0.97)
  ) !important;
  color: var(--auth-copy) !important;
  box-shadow:
    0 28px 75px rgba(0, 0, 0, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.035) !important;
  animation: gw-auth-card-in 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.gate-card:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--auth-magenta),
    var(--auth-violet),
    var(--auth-cyan),
    var(--auth-orange)
  );
  opacity: 0.9;
}
.gate-brand {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.35em;
  background: linear-gradient(
    90deg,
    #fff 0 32%,
    #ff78b7 50%,
    #8e7aff 68%,
    #61dce8 84%,
    #fff 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation:
    gw-auth-brand 8s ease-in-out infinite,
    gw-auth-copy-in 0.55s 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.gate-mark {
  width: 52px;
  height: 52px;
  margin: 24px 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    145deg,
    var(--auth-violet),
    var(--auth-magenta)
  ) !important;
  color: #fff !important;
  font-size: 24px;
  box-shadow: 0 12px 30px rgba(141, 114, 255, 0.28);
  animation:
    gw-auth-mark-in 0.55s 0.12s cubic-bezier(0.2, 0.85, 0.2, 1) both,
    gw-auth-mark-breathe 4s 1s ease-in-out infinite;
}
.gate-card .eyebrow {
  color: var(--auth-cyan) !important;
  animation: gw-auth-copy-in 0.52s 0.17s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.gate-card h1 {
  font-size: clamp(34px, 10vw, 44px);
  line-height: 0.98;
  margin-bottom: 10px;
  color: var(--auth-copy);
  animation: gw-auth-copy-in 0.55s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.gate-card > p:not(.eyebrow) {
  margin: 0;
  color: var(--auth-muted) !important;
  font-size: 14px;
  line-height: 1.45;
  animation: gw-auth-copy-in 0.55s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.gate-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 20px 0 10px;
  padding: 4px;
  border: 1px solid var(--auth-line);
  border-radius: 14px;
  background: #0c0e12;
  animation: gw-auth-control-in 0.48s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.gate-modes button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #989da5;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  transition:
    color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.18s ease;
}
.gate-modes button:active {
  transform: scale(0.97);
}
.gate-modes button.active {
  background: linear-gradient(105deg, #6f58ed, #b348b1 55%, #257f95);
  color: #fff;
  box-shadow: 0 8px 22px rgba(94, 75, 210, 0.25);
}
.gate-card form {
  display: grid;
  gap: 12px;
  animation: gw-auth-control-in 0.48s 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.gate-card form label {
  margin-top: 0;
  color: #e8eaed;
}
.gate-card input {
  margin-top: 7px;
  padding: 14px;
  border: 1px solid var(--auth-line) !important;
  background: #080a0d !important;
  color: var(--auth-copy) !important;
  outline: 0;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}
.gate-card input::placeholder {
  color: #747982;
}
.gate-card input:focus {
  border-color: var(--auth-cyan) !important;
  box-shadow:
    0 0 0 4px rgba(67, 216, 232, 0.1),
    0 10px 26px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}
.gate-card form button {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  border: 0 !important;
  background: linear-gradient(105deg, #25bed3, #6d55ef 58%, #db49b0) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(82, 68, 218, 0.25);
  transition:
    transform 0.18s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}
.gate-card form button:after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -42%;
  width: 32%;
  transform: skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.38),
    transparent
  );
  animation: gw-auth-sheen 4.8s ease-in-out infinite;
}
.gate-card form button:active {
  transform: scale(0.985);
}
.gate-card form button:disabled {
  cursor: default;
  opacity: 0.55;
  filter: saturate(0.55);
}
.gate-help {
  margin: 0 !important;
  color: var(--auth-muted) !important;
  font-size: 11px;
  line-height: 1.45 !important;
}
.gate-status {
  margin: 0;
  color: #ff817a !important;
  line-height: 1.4;
}
.gate-status.ok {
  color: #b8ff19 !important;
}
.gate-card > a {
  color: var(--auth-cyan) !important;
  transition: color 0.2s ease;
}
.gate-card > a:hover {
  color: #fff !important;
}
.forgot-password {
  width: 100%;
  margin: -3px 0 8px;
  padding: 9px;
  border: 0;
  background: transparent;
  color: var(--auth-cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: underline;
}
.forgot-password:disabled {
  opacity: 0.55;
}
.recovery-card {
  max-width: 560px;
}
.recovery-card .eyebrow {
  margin-top: 34px;
}
@keyframes gw-auth-card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes gw-auth-copy-in {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes gw-auth-control-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gw-auth-mark-in {
  from {
    opacity: 0;
    transform: scale(0.65) rotate(-14deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gw-auth-mark-breathe {
  0%,
  100% {
    box-shadow: 0 12px 30px rgba(141, 114, 255, 0.25);
  }
  50% {
    box-shadow: 0 14px 38px rgba(239, 78, 154, 0.36);
  }
}
@keyframes gw-auth-brand {
  0%,
  25% {
    background-position: 100% 50%;
  }
  65%,
  100% {
    background-position: 0 50%;
  }
}
@keyframes gw-auth-orbit-a {
  to {
    transform: translate(-65px, 100px) scale(1.18);
    filter: blur(72px);
    opacity: 0.3;
  }
}
@keyframes gw-auth-orbit-b {
  to {
    transform: translate(80px, -70px) scale(0.88);
    filter: blur(68px);
    opacity: 0.22;
  }
}
@keyframes gw-auth-sheen {
  0%,
  68% {
    left: -42%;
  }
  86%,
  100% {
    left: 120%;
  }
}
@media (max-width: 390px) {
  .tester-gate {
    padding: 10px 10px calc(18px + env(safe-area-inset-bottom));
  }
  .gate-card {
    padding: 20px 18px !important;
  }
  .gate-mark {
    width: 48px;
    height: 48px;
    margin: 18px 0 16px;
    font-size: 22px;
  }
  .gate-card h1 {
    font-size: 38px;
  }
  .gate-card > p:not(.eyebrow) {
    font-size: 13px;
  }
  .gate-modes {
    margin-top: 16px;
  }
}
@media (max-height: 720px) {
  .gate-card {
    padding-top: 18px !important;
  }
  .gate-mark {
    margin: 14px 0;
  }
  .gate-card h1 {
    font-size: 34px;
  }
  .gate-modes {
    margin-top: 14px;
  }
  .gate-card form {
    gap: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tester-gate:before,
  .tester-gate:after,
  .gate-card,
  .gate-brand,
  .gate-mark,
  .gate-card .eyebrow,
  .gate-card h1,
  .gate-card > p:not(.eyebrow),
  .gate-modes,
  .gate-card form,
  .gate-card form button:after {
    animation: none !important;
  }
  .gate-modes button,
  .gate-card input,
  .gate-card form button {
    transition: none !important;
  }
}