:root {
  --auth-bg: #050a12;
  --auth-panel: #070d17;
  --auth-line: rgba(151, 173, 203, 0.16);
  --auth-muted: rgba(225, 233, 245, 0.61);
  --auth-cyan: #39d8ff;
  --auth-blue: #1467ff;
}

body:has(.auth-page),
body:has(.auth-welcome-page) {
  background: var(--auth-bg);
  color: #f7f9fc;
}

.auth-page {
  min-height: 100svh;
  background: var(--auth-bg);
}

.auth-layout {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(430px, 0.82fr);
}

.auth-visual {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #07111d;
}

.auth-visual-image,
.auth-visual-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-visual-image {
  z-index: -3;
  object-fit: cover;
  object-position: 54% 48%;
}

.auth-visual-shade {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(2, 7, 14, 0.3) 0%, rgba(2, 7, 14, 0.08) 38%, rgba(2, 7, 14, 0.88) 100%),
    linear-gradient(90deg, rgba(2, 7, 14, 0.28), transparent 60%, rgba(2, 7, 14, 0.18));
}

.auth-brand,
.auth-mobile-brand,
.auth-welcome-brand {
  display: inline-flex;
  align-items: center;
}

.auth-brand {
  position: absolute;
  top: 34px;
  left: 42px;
}

.auth-brand img,
.auth-mobile-brand img,
.auth-welcome-brand img {
  width: auto;
  height: 27px;
  object-fit: contain;
}

.auth-live {
  position: absolute;
  top: 38px;
  right: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.auth-live i,
.auth-market-strip > span i,
.auth-welcome-page section > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55eb89;
  box-shadow: 0 0 16px rgba(85, 235, 137, 0.72);
}

.auth-visual-copy {
  position: absolute;
  left: clamp(34px, 5vw, 76px);
  bottom: 112px;
  max-width: 580px;
}

.auth-visual-copy > span {
  display: block;
  margin-bottom: 17px;
  color: var(--auth-cyan);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-visual-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 4.25vw, 74px);
  font-weight: 520;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.auth-visual-copy p {
  margin: 21px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 17px;
  letter-spacing: 0.012em;
}

.auth-market-strip {
  position: absolute;
  inset: auto 0 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(28px, 4vw, 62px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 8, 15, 0.72);
  backdrop-filter: blur(18px);
  overflow: hidden;
  white-space: nowrap;
}

.auth-market-strip > span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  color: #60ef91;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.auth-market-strip strong { color: rgba(255, 255, 255, 0.78); font-size: 12px; font-weight: 520; }
.auth-market-strip b { color: #fff; font-size: 13px; }
.auth-market-strip em { color: #60ef91; font-size: 11px; font-style: normal; }

.auth-panel {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 30px clamp(32px, 4.5vw, 78px) 24px;
  border-left: 1px solid var(--auth-line);
  background:
    radial-gradient(circle at 80% 18%, rgba(24, 103, 255, 0.08), transparent 24rem),
    var(--auth-panel);
}

.auth-mobile-brand { visibility: hidden; }

.auth-panel-inner {
  width: min(100%, 510px);
  display: grid;
  align-content: center;
  margin: auto;
  padding: 28px 0;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-heading {
  margin-bottom: 10px;
}

.auth-heading > span {
  display: block;
  margin-bottom: 13px;
  color: var(--auth-cyan);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.auth-heading h1 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(36px, 3.2vw, 52px);
  font-weight: 550;
  letter-spacing: -0.045em;
  line-height: 1.01;
}

.auth-heading p {
  max-width: 460px;
  margin: 15px 0 0;
  color: var(--auth-muted);
  font-size: 15px;
  line-height: 1.55;
}

.auth-field {
  display: grid;
  gap: 8px;
}

.auth-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(239, 244, 252, 0.78);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0.025em;
}

.auth-field > span a,
.auth-switch a,
.auth-legal a,
.auth-help a,
.auth-welcome-signin {
  color: #77c9ff;
  text-decoration: none;
}

.auth-field input,
.auth-username-field {
  width: 100%;
  min-height: 53px;
  border: 1px solid rgba(151, 173, 203, 0.23);
  border-radius: 10px;
  background: rgba(10, 18, 30, 0.82);
  color: #fff;
  font: inherit;
  font-size: 14px;
  outline: none;
}

.auth-field input { padding: 0 16px; }
.auth-field input::placeholder { color: rgba(207, 220, 239, 0.34); }
.auth-field input:focus,
.auth-username-field:focus-within {
  border-color: rgba(57, 216, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(57, 216, 255, 0.1);
}

.auth-password { position: relative; }
.auth-password input { padding-right: 50px; }
.auth-password > svg {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  color: rgba(227, 235, 246, 0.48);
  transform: translateY(-50%);
  pointer-events: none;
}

.auth-primary {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 3px;
  border: 1px solid rgba(83, 150, 255, 0.75);
  border-radius: 10px;
  background: linear-gradient(180deg, #2474ff, #1258dc);
  color: #fff;
  box-shadow: 0 14px 34px rgba(18, 88, 220, 0.24), inset 0 1px rgba(255, 255, 255, 0.22);
  font: inherit;
  font-size: 14px;
  font-weight: 680;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.auth-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.auth-primary:disabled { cursor: wait; opacity: 0.62; transform: none; }
.auth-primary svg { width: 17px; height: 17px; }

.auth-switch,
.auth-legal,
.auth-help {
  margin: 0;
  text-align: center;
}

.auth-switch { color: var(--auth-muted); font-size: 13px; }
.auth-switch a { margin-left: 4px; font-weight: 650; }
.auth-legal { margin-top: 7px; color: rgba(214, 225, 240, 0.38); font-size: 10.5px; line-height: 1.55; }
.auth-legal a { color: rgba(214, 225, 240, 0.62); text-decoration: underline; }
.auth-help { color: rgba(214, 225, 240, 0.44); font-size: 12px; }

.auth-panel-security {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: rgba(214, 225, 240, 0.28);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.auth-panel-security svg { width: 13px; }

.auth-form-compact { max-width: 470px; }
.auth-back {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: rgba(231, 238, 248, 0.65);
  font-size: 12px;
  text-decoration: none;
}
.auth-back svg { width: 16px; }

.auth-symbol {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(57, 216, 255, 0.25);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(57, 216, 255, 0.13), rgba(20, 103, 255, 0.06));
  color: var(--auth-cyan);
}
.auth-symbol svg { width: 21px; }

.auth-password-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: rgba(222, 232, 245, 0.5);
  font-size: 11px;
}
.auth-password-rules span { display: flex; align-items: center; gap: 5px; }
.auth-password-rules svg { width: 13px; color: #5de890; }

.auth-progress {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  margin-bottom: 28px;
}
.auth-progress span { height: 3px; border-radius: 999px; background: rgba(205, 219, 238, 0.13); }
.auth-progress span.active { background: linear-gradient(90deg, var(--auth-cyan), var(--auth-blue)); }

.auth-username-field { display: flex; align-items: center; overflow: hidden; }
.auth-username-field b {
  min-height: 51px;
  display: grid;
  place-items: center;
  padding: 0 0 0 16px;
  color: rgba(226, 235, 248, 0.5);
  font-size: 15px;
}
.auth-username-field input { min-height: 51px; border: 0; background: transparent; box-shadow: none !important; }
.auth-onboarding-form .username-status { margin: -8px 0 0; text-align: left; }

.auth-interests { margin: 4px 0 0; padding: 0; border: 0; }
.auth-interests legend { margin-bottom: 10px; color: rgba(239, 244, 252, 0.78); font-size: 12px; }
.auth-interests > div { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-interests button {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(151, 173, 203, 0.18);
  border-radius: 999px;
  background: rgba(151, 173, 203, 0.05);
  color: rgba(231, 238, 248, 0.62);
  font: inherit;
  font-size: 11px;
}
.auth-interests button.active { border-color: rgba(57, 216, 255, 0.42); background: rgba(57, 216, 255, 0.1); color: #e8fbff; }
.auth-interests svg { width: 14px; }

.signin-message {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgba(151, 173, 203, 0.12);
  border-radius: 9px;
  background: rgba(151, 173, 203, 0.06);
  color: rgba(236, 242, 250, 0.76);
  font-size: 12px;
}
.signin-message.error { border-color: rgba(255, 98, 126, 0.22); background: rgba(255, 61, 102, 0.08); color: #ffc9d2; }
.signin-message.success { border-color: rgba(93, 232, 144, 0.22); background: rgba(93, 232, 144, 0.08); color: #caffdc; }

.auth-welcome-page {
  min-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 82px 28px 54px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(18, 97, 210, 0.18), transparent 40rem),
    #050a12;
  text-align: center;
}
.auth-welcome-brand { position: absolute; top: 30px; left: 36px; }
.auth-welcome-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle, #000, transparent 72%);
}
.auth-welcome-page > * { position: relative; z-index: 1; }
.auth-welcome-art { width: min(72vw, 780px); margin-bottom: -62px; }
.auth-welcome-art img { width: 100%; display: block; }
.auth-welcome-page section { max-width: 820px; display: grid; justify-items: center; }
.auth-welcome-page section > span { display: flex; align-items: center; gap: 9px; color: var(--auth-cyan); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.auth-welcome-page h1 { max-width: 940px; margin: 15px 0 0; color: #fff; font-size: clamp(38px, 4.35vw, 64px); font-weight: 510; letter-spacing: -.055em; line-height: .98; }
.auth-welcome-page p { max-width: 650px; margin: 20px 0 26px; color: var(--auth-muted); font-size: 16px; line-height: 1.55; }
.auth-welcome-cta { width: 230px; }
.auth-welcome-signin { margin-top: 18px; font-size: 12px; }

.auth-logout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 5, 12, 0.76);
  backdrop-filter: blur(18px);
}
.auth-logout-modal {
  position: relative;
  width: min(100%, 470px);
  display: grid;
  justify-items: center;
  padding: 38px;
  border: 1px solid rgba(151, 173, 203, 0.2);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0, rgba(20,103,255,.12), transparent 18rem), #09111d;
  box-shadow: 0 36px 110px rgba(0,0,0,.58);
  text-align: center;
}
.auth-logout-modal > span { margin-top: 18px; color: var(--auth-cyan); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.auth-logout-modal h2 { margin: 10px 0 0; font-size: 32px; font-weight: 560; letter-spacing: -.035em; }
.auth-logout-modal p { max-width: 340px; margin: 12px 0 26px; color: var(--auth-muted); font-size: 14px; line-height: 1.5; }
.auth-logout-modal > div:last-child { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-logout-modal > div:last-child button { min-height: 49px; border: 1px solid var(--auth-line); border-radius: 9px; background: rgba(255,255,255,.04); color: #fff; font: inherit; font-size: 13px; }
.auth-logout-modal > div:last-child .danger { display: flex; align-items: center; justify-content: center; gap: 8px; border-color: rgba(255,85,111,.5); background: linear-gradient(180deg, #dc3c56, #ae243c); }
.auth-logout-modal > div:last-child svg { width: 15px; }
.auth-logout-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--auth-line); border-radius: 50%; background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); }
.auth-logout-close svg { width: 17px; }

@media (max-width: 980px) {
  .auth-layout { grid-template-columns: minmax(0, 0.84fr) minmax(390px, 1fr); }
  .auth-visual-copy h2 { font-size: clamp(40px, 5.2vw, 58px); }
  .auth-market-strip strong:nth-of-type(2),
  .auth-market-strip strong:nth-of-type(2) + b,
  .auth-market-strip strong:nth-of-type(2) + b + em { display: none; }
}

@media (max-width: 760px) {
  .auth-layout { display: block; }
  .auth-visual {
    min-height: 285px;
    height: 34svh;
  }
  .auth-visual-image { object-position: 50% 35%; }
  .auth-visual-shade { background: linear-gradient(180deg, rgba(2,7,14,.18), rgba(2,7,14,.12) 44%, #070d17 100%); }
  .auth-brand { top: 21px; left: 22px; }
  .auth-live { top: 24px; right: 22px; }
  .auth-visual-copy { left: 22px; right: 22px; bottom: 29px; }
  .auth-visual-copy > span { margin-bottom: 9px; font-size: 9px; }
  .auth-visual-copy h2 { font-size: clamp(31px, 9vw, 43px); }
  .auth-visual-copy p,
  .auth-market-strip { display: none; }
  .auth-panel {
    min-height: calc(66svh + 16px);
    padding: 0 22px 22px;
    border: 0;
    background: var(--auth-panel);
  }
  .auth-mobile-brand { display: none; }
  .auth-panel-inner { width: 100%; padding: 22px 0 30px; }
  .auth-form { gap: 15px; }
  .auth-heading { margin-bottom: 5px; }
  .auth-heading > span { margin-bottom: 9px; }
  .auth-heading h1 { font-size: clamp(32px, 9vw, 42px); }
  .auth-heading p { margin-top: 11px; font-size: 14px; }
  .auth-field input, .auth-username-field { min-height: 52px; }
  .auth-panel-security { display: none; }
  .auth-recovery .auth-visual { min-height: 215px; height: 25svh; }
  .auth-recovery .auth-visual-copy { display: none; }
  .auth-back { margin-bottom: 2px; }
  .auth-symbol { width: 44px; height: 44px; }
  .auth-progress { margin-bottom: 9px; }
  .auth-interests button { min-height: 38px; }
  .auth-welcome-page { align-content: center; padding: 80px 22px 42px; }
  .auth-welcome-brand { top: 24px; left: 22px; }
  .auth-welcome-art { width: 118vw; margin: 0 -18vw -18px; }
  .auth-welcome-page h1 { font-size: clamp(39px, 11.5vw, 57px); }
  .auth-welcome-page p { font-size: 14px; }
  .auth-logout-modal { padding: 34px 22px 22px; }
  .auth-logout-modal > div:last-child { grid-template-columns: 1fr; }
}

@media (max-width: 420px) and (max-height: 760px) {
  .auth-visual { min-height: 190px; height: 26svh; }
  .auth-visual-copy { bottom: 19px; }
  .auth-visual-copy h2 { font-size: 30px; }
  .auth-panel-inner { padding-top: 14px; }
  .auth-heading h1 { font-size: 30px; }
  .auth-heading p { font-size: 13px; }
  .auth-field input, .auth-primary { min-height: 48px; }
  .auth-legal { display: none; }
}

@media (max-width: 420px) and (min-height: 761px) {
  .auth-signin .auth-visual,
  .auth-create .auth-visual {
    min-height: 250px;
    height: 30svh;
  }

  .auth-signin .auth-visual-copy,
  .auth-create .auth-visual-copy {
    bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-primary { transition: none; }
}