:root {
  --void: #0A0A0F;
  --panel: #101015;
  --surface: #1A1A22;
  --line: rgba(255,255,255,.17);
  --soft-line: rgba(255,255,255,.08);
  --white: #FFFFFF;
  --muted: #a6a3ad;
  --blue: #2D7BFF;
  --purple: #A855FF;
  --violet: #D26CFF;
  --hot: #D26CFF;
  --gradient: linear-gradient(100deg,var(--blue) 0%,var(--purple) 48%,var(--violet) 100%);
  --display: "Bahnschrift", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --body: "Sora", "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(.22,.8,.25,1);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--void); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--white); background: var(--void); font-family: var(--body); overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .7rem 1rem; transform: translateY(-180%); color: var(--void); background: var(--white); font-size: .85rem; text-decoration: none; transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--blue); }

.login-header { position: fixed; z-index: 20; top: 0; left: 50%; display: flex; align-items: center; justify-content: space-between; width: min(100%,1600px); min-height: 5.6rem; padding: 0 clamp(1.25rem,3.6vw,4.6rem); transform: translateX(-50%); background: rgba(10,10,15,.88); border-bottom: 1px solid rgba(168,85,255,.25); backdrop-filter: blur(15px); }
.brand { display: block; width: clamp(8.5rem,10.5vw,10.8rem); height: clamp(1.35rem,1.7vw,1.72rem); overflow: hidden; line-height: 1; text-decoration: none; }
.brand__crop { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.brand__crop img { position: absolute; top: 0; left: 0; display: block; width: 100%; max-width: none; height: auto; transform: translateY(-70%); }
.back-link { display: inline-flex; align-items: center; gap: .75rem; color: #c7c3cc; font-size: .72rem; font-weight: 600; letter-spacing: .11em; text-decoration: none; }
.back-link span { color: var(--hot); font-size: 1rem; transition: transform .2s ease; }
.back-link:hover, .back-link:focus-visible { color: var(--hot); outline: none; }
.back-link:hover span { transform: translateX(-3px); }

.login-layout { display: grid; grid-template-columns: minmax(28rem,1.08fr) minmax(27rem,.92fr); min-height: 100svh; }
.brand-panel { position: relative; display: grid; min-height: 100svh; place-items: center; padding: 8rem clamp(2rem,5vw,6rem) 4rem; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 50% 43%,rgba(168,85,255,.15),transparent 25%), radial-gradient(circle at 27% 67%,rgba(45,123,255,.13),transparent 25%), #07070c; }
.brand-panel::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg,rgba(10,10,15,.8),transparent 43%), linear-gradient(90deg,rgba(10,10,15,.35),transparent 45%); pointer-events: none; }
.brand-panel__grid { position: absolute; inset: 5.6rem 0 0; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 3.5rem 3.5rem; mask-image: linear-gradient(to bottom,transparent,#000 18%,#000 75%,transparent); }
.brand-panel__orb { position: absolute; top: 50%; left: 50%; width: min(45vw,36rem); aspect-ratio: 1; transform: translate(-50%,-55%); border: 1px solid rgba(168,85,255,.18); border-radius: 50%; box-shadow: 0 0 80px rgba(45,123,255,.08),inset 0 0 80px rgba(168,85,255,.06); }
.brand-panel__orb::before, .brand-panel__orb::after, .brand-panel__orb i { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.brand-panel__orb::before { inset: 8%; }
.brand-panel__orb::after { inset: 22%; border-color: rgba(210,108,255,.16); }
.brand-panel__orb i:first-child { top: 50%; right: -1.5rem; left: -1.5rem; height: 1px; border: 0; border-top: 1px solid rgba(45,123,255,.2); border-radius: 0; }
.brand-panel__orb i:last-child { top: -1.5rem; bottom: -1.5rem; left: 50%; width: 1px; border: 0; border-left: 1px solid rgba(210,108,255,.15); border-radius: 0; }
.brand-panel__art { position: absolute; z-index: 1; top: 45%; left: 50%; width: min(34vw,27rem); aspect-ratio: 1; transform: translate(-50%,-50%); object-fit: contain; filter: drop-shadow(0 0 28px rgba(168,85,255,.18)); }
.brand-panel__copy { position: relative; z-index: 3; align-self: end; justify-self: start; }
.kicker { display: flex; align-items: center; gap: .75rem; margin: 0; color: #d4d1da; font-size: .75rem; font-weight: 600; letter-spacing: .16em; line-height: 1.4; }
.kicker i { display: block; width: 1.9rem; height: 1px; background: var(--gradient); box-shadow: 0 0 8px var(--violet); }
.brand-panel h1 { margin: 1.1rem 0 .8rem; font-family: var(--display); font-size: clamp(2.7rem,4.7vw,5.3rem); font-weight: 800; letter-spacing: .055em; line-height: .92; }
.brand-panel h1 span { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; }
.brand-panel__copy > p:last-child { margin: 0; color: #b6b2bc; font-size: .9rem; line-height: 1.65; }
.signal-line { position: absolute; z-index: 3; right: clamp(2rem,5vw,6rem); bottom: 4.5rem; display: flex; align-items: center; gap: 4px; height: 2.5rem; }
.signal-line i { display: block; width: 2px; background: linear-gradient(to top,var(--blue),var(--violet)); box-shadow: 0 0 5px rgba(168,85,255,.55); animation: signal 1.2s ease-in-out infinite alternate; }
.signal-line i:nth-child(3n) { height: 85%; animation-delay: -.4s; }
.signal-line i:nth-child(3n + 1) { height: 35%; animation-delay: -.8s; }
.signal-line i:nth-child(3n + 2) { height: 60%; animation-delay: -.2s; }

.login-panel { display: grid; min-height: 100svh; place-items: center; padding: 8rem clamp(2rem,6vw,7rem) 3rem; background: radial-gradient(circle at 100% 0,rgba(45,123,255,.07),transparent 24%),var(--void); }
.login-panel__inner { width: min(100%,28rem); }
.section-index { display: flex; justify-content: space-between; padding-bottom: 1rem; margin: 0 0 clamp(2.7rem,6vh,5rem); color: #74707b; border-bottom: 1px solid var(--soft-line); font-size: .68rem; font-weight: 600; letter-spacing: .12em; }
.section-index span { color: var(--hot); }
.login-panel h2 { margin: 1.1rem 0 .65rem; font-family: var(--display); font-size: clamp(2.25rem,4vw,4rem); font-weight: 800; letter-spacing: .06em; line-height: 1; }
.login-intro { margin: 0; color: #9c98a3; font-size: 1rem; line-height: 1.6; }
.otp-instruction strong { color: #ded9e4; font-weight: 600; overflow-wrap: anywhere; }
.access-status { display: grid; gap: .4rem; padding: 1rem 1.1rem; margin-top: 1.4rem; background: rgba(168,85,255,.07); border-left: 2px solid var(--hot); }
.access-status b { color: #e7e3eb; font-size: .78rem; letter-spacing: .1em; }
.access-status span { color: #9e9aa5; font-size: .78rem; line-height: 1.5; }
.login-form { display: grid; gap: 1.35rem; margin-top: 2.2rem; }
.field { display: grid; gap: .65rem; }
.field > span:first-child { color: #b8b4bf; font-size: .72rem; font-weight: 600; letter-spacing: .11em; }
.field input { width: 100%; height: 3.25rem; padding: 0; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1rem; outline: none; transition: border-color .2s ease,box-shadow .2s ease; }
.field input::placeholder { color: #5f5b66; }
.field input:focus { border-color: var(--violet); box-shadow: 0 1px 0 rgba(168,85,255,.35); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 4.2rem; }
.password-field button { position: absolute; top: 0; right: 0; height: 3.25rem; padding: 0; color: #8c8893; background: none; border: 0; font-size: .68rem; font-weight: 600; letter-spacing: .1em; cursor: pointer; }
.password-field button:hover, .password-field button:focus-visible { color: var(--hot); outline: none; }
.form-options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.form-options a, .remember-option { color: #8f8b96; font-size: .68rem; font-weight: 600; letter-spacing: .08em; }
.form-options a { text-decoration: none; }
.form-options a:hover, .form-options a:focus-visible { color: var(--hot); outline: none; }
.remember-option { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.remember-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.remember-option > span { display: grid; width: 1rem; height: 1rem; place-items: center; border: 1px solid #5f5b66; }
.remember-option input:checked + span { border-color: var(--hot); background: var(--gradient); box-shadow: inset 0 0 0 3px var(--void); }
.remember-option input:focus-visible + span { outline: 1px solid var(--blue); outline-offset: 2px; }
.login-submit { display: flex; align-items: center; justify-content: space-between; min-height: 3.3rem; padding: 0 1rem; margin-top: .35rem; color: var(--white); background: transparent; border: 1px solid transparent; border-image: linear-gradient(90deg,var(--violet),var(--blue)) 1; font-size: .75rem; font-weight: 600; letter-spacing: .12em; cursor: pointer; transition: box-shadow .2s ease; }
.login-submit b { color: var(--hot); font-size: 1.1rem; transition: transform .2s ease; }
.login-submit:hover, .login-submit:focus-visible { box-shadow: 0 0 28px rgba(168,85,255,.25); outline: none; }
.login-submit:hover b { transform: translateX(3px); }
.otp-field { padding: 0; margin: 0; border: 0; }
.otp-field legend { padding: 0; margin-bottom: .8rem; color: #b8b4bf; font-size: .72rem; font-weight: 600; letter-spacing: .11em; }
.otp-boxes { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: clamp(.4rem,1vw,.7rem); }
.otp-boxes input { width: 100%; min-width: 0; height: clamp(3.25rem,5vw,4rem); padding: 0; color: var(--white); background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.2); border-radius: .2rem; font-family: var(--display); font-size: clamp(1.35rem,2.2vw,1.8rem); font-weight: 700; text-align: center; caret-color: var(--violet); outline: none; transition: border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease; }
.otp-boxes input:focus { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(168,85,255,.15),0 0 20px rgba(168,85,255,.12); }
.otp-boxes.is-checking input { border-color: var(--blue); box-shadow: 0 0 16px rgba(45,123,255,.16); }
.otp-boxes.is-success input { color: #84f6ae; background: rgba(50,205,112,.08); border-color: #43d77a; box-shadow: 0 0 18px rgba(67,215,122,.2); }
.otp-boxes.is-error { animation: otp-shake .38s ease both; }
.otp-boxes.is-error input { color: #ff8499; background: rgba(255,69,101,.07); border-color: #ff4565; box-shadow: 0 0 15px rgba(255,69,101,.14); }
.otp-timers { display: flex; justify-content: space-between; gap: 1rem; color: #77737e; font-size: .65rem; font-weight: 600; letter-spacing: .08em; }
.otp-timers b { color: #c8c4ce; font-family: var(--display); font-size: .72rem; }
.otp-timers .is-expired { color: #ff607b; }
.resend-form { margin-top: 1rem; text-align: center; }
.resend-form button { padding: .5rem; color: #8f8b96; background: none; border: 0; font-size: .68rem; font-weight: 600; letter-spacing: .1em; cursor: pointer; }
.resend-form button:hover,.resend-form button:focus-visible { color: var(--hot); outline: none; }
.resend-form button:disabled { color: #4f4b56; cursor: not-allowed; }
.request-access { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.35rem 0; margin-top: 1.3rem; border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); }
.request-access > span { color: #77737e; font-size: .68rem; font-weight: 600; letter-spacing: .09em; }
.request-access a { color: #d9d5dd; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-decoration: none; }
.request-access a b { margin-left: .55rem; color: var(--hot); }
.request-access a:hover, .request-access a:focus-visible { color: var(--hot); outline: none; }
.request-access p { flex: 0 0 100%; margin: .3rem 0 0; color: #96929d; font-size: .78rem; line-height: 1.55; }
.login-panel__inner > small { display: block; margin-top: 1.25rem; color: #68646f; font-size: .7rem; line-height: 1.55; }

@keyframes signal { from { transform: scaleY(.5); opacity: .45; } to { transform: scaleY(1); opacity: 1; } }
@keyframes otp-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

@media (max-width: 900px) {
  .login-layout { grid-template-columns: minmax(18rem,.7fr) minmax(24rem,1fr); }
  .brand-panel { padding-right: 2.5rem; padding-left: 2.5rem; }
  .brand-panel__art { width: min(40vw,22rem); }
  .brand-panel h1 { font-size: clamp(2.5rem,6vw,4rem); }
  .signal-line { display: none; }
}

@media (max-width: 680px) {
  .login-header { min-height: 4.5rem; background: rgba(10,10,15,.88); backdrop-filter: blur(14px); }
  .brand { width: 8.2rem; height: 1.32rem; }
  .back-link { font-size: .62rem; }
  .login-layout { display: flex; flex-direction: column; }
  .brand-panel { display: block; min-height: 15rem; padding: 6.5rem 1.25rem 1.5rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-panel__grid { inset: 4.5rem 0 0; }
  .brand-panel__orb { top: 64%; left: 78%; width: 17rem; }
  .brand-panel__art { top: 62%; left: 79%; width: 12.5rem; opacity: .72; }
  .brand-panel__copy { position: relative; z-index: 3; }
  .brand-panel h1 { margin-top: .8rem; font-size: clamp(2rem,10vw,3rem); }
  .brand-panel__copy > p:last-child { display: none; }
  .login-panel { min-height: auto; padding: 3rem 1.25rem 3.5rem; }
  .section-index { margin-bottom: 2.5rem; }
  .login-panel h2 { font-size: clamp(2.15rem,11vw,3.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Two-column account entry */
.auth-panel { position: relative; display: grid; min-height: 100svh; place-items: center; padding: 8rem clamp(2rem,6vw,7rem) 3rem; overflow: hidden; }
.signup-panel { border-right: 1px solid var(--line); background: radial-gradient(circle at 18% 72%,rgba(45,123,255,.14),transparent 30%),radial-gradient(circle at 82% 20%,rgba(168,85,255,.12),transparent 28%),#07070c; }
.auth-grid { position: absolute; inset: 5.6rem 0 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 3.5rem 3.5rem; mask-image: linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent); }
.auth-card { position: relative; z-index: 1; width: min(100%,28rem); }
.auth-card h1, .auth-card h2 { margin: 1.1rem 0 .65rem; font-family: var(--display); font-size: clamp(2.25rem,4vw,4rem); font-weight: 800; letter-spacing: .06em; line-height: 1; }
.auth-card h1 span, .auth-card h2 span { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; }
.auth-card .section-index { margin-bottom: clamp(2.7rem,6vh,5rem); }

@media (max-width: 900px) {
  .login-layout { grid-template-columns: 1fr 1fr; }
  .auth-panel { padding-right: 2.25rem; padding-left: 2.25rem; }
}

@media (max-width: 680px) {
  .login-layout { display: block; }
  .auth-panel { min-height: auto; padding: 7.5rem 1.25rem 4rem; }
  .login-panel { padding-top: 4rem; }
  .signup-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-grid { inset: 4.5rem 0 0; }
}

@media (max-width: 680px) {
  .login-layout { display: flex; flex-direction: column; }
  .login-panel { order: 1; padding-top: 7.5rem; }
  .signup-panel { order: 2; padding-top: 4rem; }
  .login-layout.is-verifying .signup-panel { order: 1; padding-top: 7.5rem; }
  .login-layout.is-verifying .login-panel { order: 2; padding-top: 4rem; }
}