.auth-immersive-page { background: #02070d; }

.auth-stage {
  --auth-bg: url("../../../images/auth/login-background.png");
  position: relative;
  display: grid;
  place-items: center;
  min-height: 850px;
  padding: clamp(56px, 7vw, 100px) clamp(18px, 4vw, 64px);
  background:
    radial-gradient(circle at 50% 15%, rgba(16, 80, 119, .22), transparent 42%),
    linear-gradient(180deg, #06111c, #02070d);
  isolation: isolate;
}
.auth-stage--register { --auth-bg: url("../../../images/auth/register-background.png"); }
.auth-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(47, 178, 235, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 178, 235, .035) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); }
.auth-panel {
  width: min(100%, 1003px);
  min-height: 612px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4.25vw, 61px);
  border: 1px solid rgba(117, 175, 210, .19);
  border-radius: 14px;
  background-image: linear-gradient(90deg, rgba(1, 8, 15, .04), rgba(2, 11, 20, .72) 51%, rgba(3, 13, 23, .94) 100%), var(--auth-bg);
  background-position: center;
  background-size: cover;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .52), inset 0 1px rgba(255,255,255,.025);
  overflow: hidden;
}
.auth-stage--register .auth-panel { background-image: linear-gradient(90deg, rgba(3, 13, 23, .94), rgba(2, 11, 20, .72) 49%, rgba(1, 8, 15, .04)), var(--auth-bg); }
.auth-panel > * { width: min(100%, 425px); }
.auth-stage--login .auth-panel > * { margin-left: auto; }
.auth-stage--register .auth-panel > * { margin-right: auto; }
.auth-brand { align-self: center; display: grid; justify-items: center; gap: 6px; margin-bottom: 24px; color: #dce8f1; }
.auth-brand img { width: 82px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 13px rgba(26, 174, 234, .16)); }
.auth-brand span { font-family: var(--ff-rajdhani); font-size: 12px; font-weight: 600; letter-spacing: 9px; text-transform: uppercase; transform: translateX(4px); }
.auth-heading { margin-bottom: 27px; text-align: center; }
.auth-heading h1 { color: #f5f8fb; font-family: var(--ff-rajdhani); font-size: clamp(32px, 4vw, 43px); font-weight: 700; line-height: 1; text-transform: uppercase; }
.auth-heading h1 span, .auth-alt a, .auth-check a { color: #20bff4; }
.auth-heading p { margin-top: 14px; color: #94a3b2; font-size: 14px; }
.auth-form--designed { gap: 17px; }
.auth-form--designed .auth-field { gap: 7px; }
.auth-form--designed .auth-field > span:first-child { color: #b8c4cf; font-family: var(--ff-rajdhani); font-size: 12px; letter-spacing: .5px; }
.auth-input-wrap { position: relative; display: block; }
.auth-input-wrap > svg { position: absolute; left: 17px; top: 50%; width: 19px; transform: translateY(-50%); fill: none; stroke: #8394a4; stroke-width: 1.5; pointer-events: none; }
.auth-form--designed .auth-input-wrap input { min-height: 50px; padding: 12px 44px 12px 47px; border: 1px solid rgba(103, 144, 171, .28); border-radius: 7px; background: rgba(8, 22, 34, .78); color: white; font-family: var(--ff-space-grotesk); font-size: 14px; }
.auth-form--designed input::placeholder { color: #728191; opacity: 1; }
.auth-form--designed .auth-input-wrap input:focus { border-color: #20bff4; box-shadow: 0 0 0 3px rgba(32, 191, 244, .11); }
.auth-password-toggle { position: absolute; right: 11px; top: 50%; display: grid; width: 36px; height: 36px; place-items: center; transform: translateY(-50%); color: #8394a4; }
.auth-password-toggle svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aab5c0; font-size: 13px; }
.auth-muted-link { color: #20bff4; }
.auth-check { display: flex; align-items: center; gap: 9px; color: #aab5c0; font-size: 13px; line-height: 1.4; cursor: pointer; }
.auth-check input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: #20bff4; }
.auth-check--terms { align-items: flex-start; }
.auth-check--terms > span { white-space: nowrap; }
.auth-primary-button { position: relative; min-height: 50px; margin-top: 7px; overflow: hidden; background: linear-gradient(110deg, #22bbed, #28c7fa); color: #01111b; font-family: var(--ff-rajdhani); font-size: 17px; font-weight: 700; text-transform: uppercase; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
.auth-primary-button::after { content: ""; position: absolute; right: 12px; top: 0; width: 5px; height: 100%; background: #062237; transform: skewX(-17deg); }
.auth-primary-button:hover { filter: brightness(1.1); box-shadow: 0 0 28px rgba(32, 191, 244, .25); }
.auth-primary-button:disabled { opacity: .65; cursor: wait; }
.auth-feedback { border-color: #dc5560; background: rgba(124, 20, 29, .28); font-size: 13px; }
.auth-alt { margin-top: 24px; color: #aab5c0; text-align: center; font-size: 14px; }
.auth-alt a { font-weight: 600; }

@media (max-width: 780px) {
  .auth-stage { min-height: auto; padding: 42px 16px; }
  .auth-panel { min-height: 595px; padding: 36px clamp(20px, 5vw, 36px); background-image: linear-gradient(rgba(3, 13, 23, .88), rgba(3, 13, 23, .96)), var(--auth-bg); }
  .auth-stage--register .auth-panel { background-image: linear-gradient(rgba(3, 13, 23, .88), rgba(3, 13, 23, .96)), var(--auth-bg); }
  .auth-panel > * { margin-inline: auto !important; }
}
@media (max-width: 430px) {
  .auth-stage { padding: 24px 12px; }
  .auth-panel { min-height: auto; padding: 34px 20px; }
  .auth-brand { margin-bottom: 22px; }
  .auth-brand img { width: 78px; height: 56px; }
  .auth-heading { margin-bottom: 25px; }
  .auth-heading h1 { font-size: 31px; }
  .auth-form--designed { gap: 16px; }
  .auth-form--designed .auth-input-wrap input { min-height: 52px; }
}

@media(max-width:575px){
  .auth-stage,.auth-panel,.auth-panel>*{width:100%;max-width:100%;min-width:0}
  .auth-stage{padding-inline:12px}
  .auth-panel{padding-inline:18px}
  .auth-form--designed,.auth-field,.auth-input-wrap,.auth-input-wrap input{width:100%;max-width:100%;min-width:0}
  .auth-options{align-items:flex-start;flex-direction:column}
  .auth-check--terms>span{white-space:normal}
  .auth-heading p,.auth-alt{overflow-wrap:anywhere}
}