:root {
  color-scheme: dark;
  --bg: #01040d;
  --panel: rgba(3, 11, 26, 0.94);
  --panel-soft: rgba(5, 13, 29, 0.84);
  --blue: #1288ff;
  --blue-2: #0065ff;
  --cyan: #35d6ff;
  --line: rgba(107, 158, 221, 0.34);
  --text: #f5f7fb;
  --muted: #c5ccda;
  --green: #69e52c;
  --green-dark: #0f3a15;
  --danger: #ff5f6d;
  --radius: 25px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI Variable", "Segoe UI", Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(36px, 5vh, 64px) clamp(24px, 4vw, 70px);
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 112, 255, 0.23) 0%, rgba(0, 59, 170, 0.10) 24%, rgba(1, 4, 13, 0) 52%),
    radial-gradient(circle at 50% 118%, rgba(0, 92, 255, 0.34) 0%, rgba(0, 63, 160, 0.12) 32%, transparent 55%),
    radial-gradient(circle at 13% 23%, rgba(6, 60, 174, 0.14), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(0, 83, 204, 0.12), transparent 30%),
    linear-gradient(180deg, #020617 0%, #01040d 62%, #02081a 100%);
}

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

.scene::before {
  opacity: 0.68;
  background-image:
    linear-gradient(90deg, transparent 0 7%, rgba(0, 109, 255, .30) 7.06% 7.12%, transparent 7.18% 15%, rgba(0, 109, 255, .16) 15.06% 15.12%, transparent 15.18% 100%),
    linear-gradient(90deg, transparent 0 82%, rgba(0, 109, 255, .20) 82.06% 82.12%, transparent 82.18% 91%, rgba(0, 109, 255, .28) 91.06% 91.12%, transparent 91.18% 100%),
    linear-gradient(145deg, transparent 0 42%, rgba(0, 100, 255, .12) 42.2% 42.35%, transparent 42.55% 100%),
    linear-gradient(35deg, transparent 0 48%, rgba(0, 109, 255, .10) 48.2% 48.35%, transparent 48.55% 100%);
  background-size: 430px 430px, 560px 560px, 520px 520px, 680px 680px;
  filter: drop-shadow(0 0 6px rgba(0, 102, 255, .55));
  mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 88%, transparent 100%);
}

.scene::after {
  top: 58%;
  opacity: 0.43;
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 119, 255, .24) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg, rgba(0, 119, 255, .17) 0 1px, transparent 1px 47px);
  transform: perspective(520px) rotateX(67deg) scale(1.8);
  transform-origin: center top;
  filter: drop-shadow(0 0 7px rgba(0, 80, 255, .6));
}

.ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}
.ambient-one { width: 470px; height: 230px; left: 33%; top: 9%; background: rgba(0, 93, 255, .18); }
.ambient-two { width: 610px; height: 220px; left: 31%; bottom: -9%; background: rgba(0, 105, 255, .28); }

.auth-layout {
  width: min(600px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  align-items: center;
}

.auth-layout-single .main-card {
  width: 100%;
}

.glass-card {
  position: relative;
  background: linear-gradient(180deg, rgba(5, 14, 31, .96), rgba(2, 8, 20, .96));
  border: 1px solid rgba(111, 153, 204, .46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .025),
    0 18px 44px rgba(0, 0, 0, .38);
  backdrop-filter: blur(14px);
}

.side-card {
  border-radius: 24px;
  padding: 30px 30px 31px;
  min-height: 292px;
}

.side-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 28px rgba(0, 82, 196, .08);
}

.main-card {
  min-height: 720px;
  border-radius: 28px;
  padding: 28px 54px 23px;
  text-align: center;
  border-color: rgba(90, 173, 255, .98);
  box-shadow:
    0 0 0 1px rgba(38, 111, 255, .38),
    0 0 16px rgba(23, 119, 255, .88),
    0 0 58px rgba(0, 83, 255, .34),
    inset 0 0 46px rgba(0, 37, 97, .15),
    0 22px 55px rgba(0, 0, 0, .44);
}

.main-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 21px;
  border: 1px solid rgba(255, 255, 255, .025);
  pointer-events: none;
}

.logo-wrap {
  height: 236px;
  display: grid;
  place-items: center;
  margin-top: -9px;
  margin-bottom: -4px;
}

.brand-logo {
  width: min(255px, 78%);
  max-height: 242px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(0, 213, 255, .75)) drop-shadow(0 0 19px rgba(0, 90, 255, .74));
}

.main-card h1 {
  margin: 0;
  font-family: "Arial Black", "Segoe UI Black", "Segoe UI", sans-serif;
  font-size: clamp(42px, 3.7vw, 59px);
  line-height: .98;
  letter-spacing: -2.8px;
  text-shadow: 0 2px 0 rgba(255,255,255,.10), 0 3px 12px rgba(0,0,0,.42);
}

.kick-title {
  margin: 17px 0 9px;
  color: #3f9dff;
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -.35px;
  text-shadow: 0 0 17px rgba(0, 100, 255, .2);
}

.intro {
  margin: 0 auto;
  max-width: 480px;
  color: #cbd2df;
  font-size: 17px;
  line-height: 1.48;
}

.connect-button {
  width: 100%;
  min-height: 68px;
  margin: 29px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: white;
  text-decoration: none;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -.2px;
  border: 1px solid #5bc8ff;
  border-radius: 12px;
  background: linear-gradient(180deg, #168cff 0%, #0872f4 50%, #0655d8 100%);
  box-shadow:
    0 0 15px rgba(0, 124, 255, .72),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -14px 25px rgba(0, 35, 143, .18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.connect-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 0 21px rgba(0, 140, 255, .95), inset 0 1px 0 rgba(255,255,255,.40);
}
.connect-button:active { transform: translateY(1px); }
.connect-button:focus-visible { outline: 3px solid rgba(85, 205, 255, .8); outline-offset: 4px; }
.connect-button.disabled { opacity: .55; cursor: not-allowed; filter: saturate(.65); }
.connect-button.loading { pointer-events: none; }

.button-text { white-space: nowrap; }

.ornament {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 19px 2px 11px;
  color: var(--blue);
}
.ornament span { height: 1px; background: linear-gradient(90deg, transparent, rgba(99, 143, 193, .42)); }
.ornament span:last-child { background: linear-gradient(90deg, rgba(99, 143, 193, .42), transparent); }
.ornament i { width: 12px; height: 12px; background: #3ab2ff; transform: rotate(45deg); box-shadow: 0 0 14px #008dff; }

.benefits {
  list-style: none;
  margin: 0;
  padding: 0 0 15px;
  display: grid;
  gap: 14px;
  text-align: left;
  border-bottom: 1px solid rgba(95, 126, 164, .20);
}
.benefits li { display: flex; align-items: center; gap: 13px; color: #eef2f8; font-size: 17px; line-height: 1.25; }
.check {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  border: 1.5px solid #168cff;
  border-radius: 50%;
  color: #1a9aff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 0 9px rgba(0, 115, 255, .18);
}

.main-footer {
  margin-top: 17px;
  color: #a7afbf;
  font-size: 16px;
  letter-spacing: .1px;
}
.main-footer span { padding: 0 7px; }

.side-heading { display: flex; align-items: center; gap: 14px; }
.side-heading h2 { margin: 0; color: #168dff; font-size: 17px; letter-spacing: .15px; font-weight: 720; }
.divider { height: 1px; margin: 18px 0 21px; background: linear-gradient(90deg, rgba(112,144,183,.42), rgba(112,144,183,.25)); }

.heading-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(0, 122, 255, .48);
  border-radius: 50%;
  box-shadow: inset 0 0 14px rgba(0, 88, 255, .12), 0 0 10px rgba(0, 96, 255, .12);
  position: relative;
}
.user-heading::before { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid #168cff; border-radius: 50%; left: 15px; top: 9px; }
.user-heading::after { content: ""; position: absolute; width: 16px; height: 9px; border: 2px solid #168cff; border-bottom: 0; border-radius: 10px 10px 0 0; left: 11px; top: 22px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.steps li { display: grid; grid-template-columns: 44px 1fr 28px; align-items: center; gap: 10px; min-height: 39px; }
.step-number {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  font-size: 18px; font-weight: 760; color: white;
  background: linear-gradient(180deg, #278eff, #0756dd);
  box-shadow: 0 0 13px rgba(0, 105, 255, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
.step-label { font-size: 17px; color: #f1f3f7; white-space: nowrap; }
.mini-icon { width: 24px; height: 24px; position: relative; justify-self: end; }
.user-mini::before { content:""; position:absolute; width:7px; height:7px; border:2px solid #168cff; border-radius:50%; left:7px; top:1px; }
.user-mini::after { content:""; position:absolute; width:15px; height:9px; border:2px solid #168cff; border-bottom:0; border-radius:9px 9px 0 0; left:3px; top:12px; }
.shield-mini::before { content:""; position:absolute; inset:1px 2px; border:2px solid #168cff; clip-path: polygon(50% 0,100% 17%,93% 70%,50% 100%,7% 70%,0 17%); }
.shield-mini::after { content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#168cff; font-size:12px; font-weight:800; }
.return-mini::before { content:""; position:absolute; width:13px; height:17px; border:2px solid #168cff; border-right:0; border-radius:4px 0 0 4px; top:3px; left:0; }
.return-mini::after { content:"→"; position:absolute; color:#168cff; font-size:27px; line-height:20px; left:8px; top:1px; }

.signal-heading { display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:11px; }
.signal-heading i { display:block; width:4px; border-radius:4px; background:#168cff; box-shadow:0 0 8px rgba(0,112,255,.65); }
.signal-heading i:nth-child(1){ height:8px; }.signal-heading i:nth-child(2){height:14px}.signal-heading i:nth-child(3){height:20px}

.status-content { min-height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.status-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: 174px; min-height: 60px; padding: 10px 24px;
  border-radius: 18px; font-size: 23px; font-weight: 760;
  transition: .2s ease;
}
.status-pill.ready { color: #6bea31; border: 1px solid rgba(48, 219, 43, .72); background: rgba(6, 38, 14, .74); box-shadow: 0 0 22px rgba(30, 194, 40, .12), inset 0 0 22px rgba(61, 223, 59, .08); }
.status-pill.unavailable { color: #ff7f89; border: 1px solid rgba(255, 87, 104, .65); background: rgba(52, 8, 16, .72); box-shadow: 0 0 22px rgba(255, 65, 86, .10); }
.status-check { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: currentColor; color: #07130a; font-size: 17px; font-weight: 900; }
.status-pill.unavailable .status-check { color:#2b090e; }
.status-content p { margin: 26px 0 0; color: #c5ccda; font-size: 15.5px; line-height: 1.55; }
.status-retry { margin-top: 15px; border: 1px solid rgba(36,145,255,.7); border-radius: 9px; padding: 8px 13px; color:#d9ecff; background:#06172e; cursor:pointer; }

.single-scene { padding-top: 50px; padding-bottom: 50px; }
.result-card { width: min(560px, calc(100vw - 40px)); min-height: 0; padding-bottom: 28px; }
.result-logo-wrap { height: 210px; }
.result-box { margin: 31px 0 0; padding: 20px 22px; display:flex; align-items:center; gap:17px; text-align:left; border-radius:16px; }
.result-box .result-icon { width: 50px; height: 50px; flex:0 0 50px; border-radius:50%; display:grid; place-items:center; font-size:30px; font-weight:900; }
.result-box strong { font-size: 21px; }.result-box p { margin: 5px 0 0; color:#d3d8e2; line-height:1.4; }
.success-box { border:1px solid rgba(86,223,47,.65); background:rgba(8,46,15,.58); }.success-box .result-icon{background:#69e52c;color:#09200a}.success-box strong{color:#73ed37}
.error-box { border:1px solid rgba(255,95,109,.65); background:rgba(62,9,18,.58); }.error-box .result-icon{background:#ff6875;color:#31060b}.error-box strong{color:#ff8892}
.result-button { margin-top: 24px; }
.close-note, .result-account, .error-code { color:#aeb6c5; font-size:14px; margin:18px 0 0; }
.result-account { color:#65b3ff; font-size:16px; }

@media (max-width: 1220px) {
  .scene { padding: 36px 26px; }
  .auth-layout { width: min(600px, 100%); }
  .main-card { padding-left: 48px; padding-right: 48px; }
}

@media (max-width: 680px) {
  .scene { padding: 22px 15px 34px; }
  .auth-layout { width: 100%; }
  .main-card { width: 100%; padding: 25px 25px 22px; min-height: 0; }
  .logo-wrap { height: 190px; }
  .brand-logo { width: 205px; }
  .main-card h1 { font-size: 40px; letter-spacing: -2px; }
  .kick-title { font-size: 24px; }
  .intro { font-size: 15px; }
  .desktop-break { display: none; }
  .connect-button { min-height: 62px; padding: 0 16px; font-size: 18px; }
  .benefits li { font-size: 15px; }
  .result-logo-wrap { height: 180px; }
}

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