:root {
  --login-lime: #e9ff47;
  --login-ink: #080909;
  --login-muted: rgba(255,255,255,.56);
  --login-line: rgba(255,255,255,.1);
  --login-text: #f4f3ed;
}

.is-hidden { display: none !important; }

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

body.login-page {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--login-ink);
  color: var(--login-text);
  font-family: "DM Sans", sans-serif;
}

/* Same ambient-background language as Home/Discover (home.css's
   .home-ambient/.ambient-orb) — reproduced here rather than loading all
   of home.css just for this, since login.html only ever needed this one
   piece of it. */
.login-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(135deg, #0a0a0a, #070707 55%, #0a0a0a); }
.login-ambient::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,3,3,.14) 0%, rgba(3,3,3,.32) 55%, #030303 100%); }
.ambient-orb { position: absolute; inset: -30px; background: center / cover no-repeat; filter: saturate(.85); opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease; will-change: transform, opacity; }
.ambient-orb.is-active { opacity: 1; }
.ambient-orb-one { animation: ambientDriftOne 28s ease-in-out infinite alternate; }
.ambient-orb-two { animation: ambientDriftTwo 34s ease-in-out infinite alternate; }
.ambient-orb-three { animation: ambientDriftThree 31s ease-in-out infinite alternate; }
@keyframes ambientDriftOne { to { transform: translate3d(5vw, 7vh, 0) scale(1.2) rotate(8deg); } }
@keyframes ambientDriftTwo { to { transform: translate3d(-8vw, 4vh, 0) scale(1.18) rotate(-10deg); } }
@keyframes ambientDriftThree { to { transform: translate3d(4vw, -8vh, 0) scale(1.24) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .ambient-orb { animation: none; } }

.login-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 24px 5%; background: transparent; border-bottom: 1px solid transparent; transition: padding .4s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
/* Same glass-on-scroll treatment as index.html's .navbar.scrolled
   (site.css) — reproduced here since login.html loads its own
   login.css layer on top of site.css rather than home.css's shell
   chrome, but the effect (and the scroll listener that toggles it,
   in login.js) should read identically to every other page's topbar. */
.login-topbar.scrolled { padding: 12px 5%; background: rgba(8,9,9,.72); border-bottom-color: rgba(255,255,255,.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.login-topbar .logo-img { display: block; width: 150px; height: auto; }
.login-topbar-actions { display: flex; align-items: center; gap: 10px; }
.navbar-icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--login-text); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.navbar-icon-btn:hover, .navbar-icon-btn:focus-visible { background: rgba(233,255,71,.12); border-color: rgba(233,255,71,.5); color: var(--login-lime); outline: 0; }
.navbar-icon-btn svg { width: 18px; height: 18px; }

.login-stage { position: relative; z-index: 2; display: grid; place-items: center; width: min(460px, 92%); margin: 0 auto; padding: 24px 0 60px; min-height: calc(100vh - 88px); }

/* Same glass-panel treatment as home.css's .detail-card, applied to the
   whole auth card instead of a marketing-hero + separate card split —
   this is the "app-like, centered" login the redesign asked for. */
.login-card { position: relative; overflow: hidden; width: 100%; box-sizing: border-box; padding: clamp(26px, 4vw, 38px); border: 1px solid var(--login-line); border-radius: 16px; background: linear-gradient(135deg, rgba(13,17,25,.94), rgba(7,16,28,.9)); box-shadow: 0 30px 100px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); animation: loginCardIn .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes loginCardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.login-card > * { position: relative; z-index: 1; }

/* Decorative spinning disc tucked behind the card's bottom-right corner
   — same structure as the full-player's disc (vinyl-grooves/label-ring/
   record-label/record-hole), sized so most of it sits outside the card
   and .login-card's own overflow: hidden crops it to just the sliver
   that peeks out. Its record label carries the #1 track's own art
   (set from login.js), same "top track" idea the old floating-discs
   decoration used to show. */
.login-card-vinyl { position: absolute; z-index: 0; right: -22%; bottom: -22%; width: 95%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; opacity: .9; background: conic-gradient(from 20deg, transparent, rgba(255,255,255,.14), transparent 18%, rgba(255,255,255,.06), transparent 45%), repeating-radial-gradient(circle, #050505 0 2px, #181818 3px, #070707 5px, #121212 7px, #030303 9px); box-shadow: 0 0 0 1px rgba(255,255,255,.1); animation: vinylSpin 14s linear infinite; will-change: transform; }
.login-card-vinyl .label-ring { position: absolute; width: 40%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 4px, rgba(255,255,255,.08) 5px, transparent 6px 9px); box-shadow: 0 0 0 8px rgba(0,0,0,.75), inset 0 0 33px rgba(0,0,0,.6); }
.login-card-vinyl .record-label { position: absolute; width: 31%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; overflow: hidden; background: #252525 center / cover no-repeat; box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 0 0 6px rgba(0,0,0,.85); }
.login-card-vinyl .record-hole { position: absolute; width: 8%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: #0a0a0a; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
@keyframes vinylSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login-card-vinyl { animation: none; } }

.login-eyebrow, .login-card-kicker { display: block; color: var(--login-lime); font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.login-live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--login-lime); box-shadow: 0 0 12px var(--login-lime); animation: loginPulse 2s ease-in-out infinite; }
@keyframes loginPulse { 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .login-live-dot { animation: none; } }

.login-card-heading h1, .register-heading h2, .forgot-view .register-heading h2 { margin: 0 0 28px; font-family: Georgia, serif; font-size: 30px; font-weight: 400; letter-spacing: -.01em; }

.login-google, .login-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 700; }
.login-google { position: relative; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: rgba(255,255,255,.45); cursor: not-allowed; }
.login-google small { position: absolute; right: 13px; color: rgba(233,255,71,.7); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.google-mark { color: #9da69c; font-size: 18px; font-weight: 700; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: rgba(255,255,255,.3); font-size: 10px; white-space: nowrap; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; flex: 1; background: var(--login-line); }

.login-form { display: grid; gap: 9px; }
.login-form label, .login-password-label, .register-form label { color: rgba(255,255,255,.62); font-size: 11px; font-weight: 600; }
.login-form input, .register-form input {
  width: 100%; box-sizing: border-box; margin-bottom: 9px; padding: 14px 15px;
  border: 1px solid var(--login-line); border-radius: 10px; outline: none;
  background: rgba(255,255,255,.05); color: #fff; font: inherit; font-size: 13px;
  transition: border-color .2s ease, background .2s ease;
}
.login-form input:focus, .register-form input:focus { border-color: rgba(233,255,71,.7); background: rgba(233,255,71,.06); }
.login-form input::placeholder, .register-form input::placeholder { color: rgba(255,255,255,.25); }
.login-password-label { display: flex; }
.login-forgot-link { justify-self: start; margin: -4px 0 5px; color: var(--login-lime); font-size: 9px !important; opacity: .8; }

.login-submit { margin-top: 7px; border: 0; background: var(--login-lime); color: #11140d; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.login-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(233,255,71,.25); }
.login-submit span { font-size: 18px; }
.login-form-status { min-height: 16px; margin: 3px 0 0; color: rgba(233,255,71,.85); font-size: 11px; text-align: center; }
.login-signup { margin: 24px 0 0; color: rgba(255,255,255,.4); font-size: 11px !important; text-align: center; }
.login-link-button { padding: 0; border: 0; background: none; color: rgba(255,255,255,.82); font: inherit; cursor: pointer; }
.login-link-button span { color: var(--login-lime); }

.register-view, .forgot-view { animation: loginCardIn .35s ease both; }
.register-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 12px; border: 1px solid var(--login-line); border-radius: 14px; background: rgba(255,255,255,.03); }
.register-avatar-copy { display: grid; gap: 5px; min-width: 0; }
.register-avatar-copy strong { font-size: 12px; }
.register-avatar-copy > span { color: rgba(255,255,255,.42); font-size: 10px; line-height: 1.35; }
.vinyl-avatar { position: relative; flex: 0 0 auto; width: 84px; height: 84px; overflow: hidden; border-radius: 50%; background: repeating-radial-gradient(circle, #090909 0 3px, #232323 4px 5px, #0c0c0c 7px); box-shadow: 0 0 0 4px rgba(0,0,0,.5), 0 10px 24px rgba(0,0,0,.45); }
.vinyl-avatar::before { content: ""; position: absolute; inset: 25%; border-radius: 50%; background: var(--avatar-color, #26303a); box-shadow: 0 0 0 3px rgba(0,0,0,.65); }
.avatar-crop-stage { position: absolute; inset: 0; z-index: 1; display: none; overflow: hidden; border-radius: 50%; background-color: #111; cursor: grab; touch-action: none; }
.avatar-crop-stage.is-draggable { cursor: grab; }
.avatar-crop-stage:active.is-draggable { cursor: grabbing; }
.avatar-crop-image { position: absolute; top: 0; left: 0; max-width: none; max-height: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.vinyl-avatar.has-image::before { display: none; }
.vinyl-avatar.has-image .avatar-crop-stage { display: block; }
.vinyl-avatar-hole { position: absolute; inset: 46%; z-index: 1; border-radius: 50%; background: #111; }
.vinyl-avatar.has-image .vinyl-avatar-hole { display: none; }
.vinyl-avatar.is-selected { outline: 2px solid var(--login-lime); outline-offset: 4px; }
.vinyl-avatar[data-avatar="gold"] { --avatar-color: #a67d1e; }
.vinyl-avatar[data-avatar="rust"] { --avatar-color: #9c4f1e; }
@keyframes vinylAvatarSpin { to { transform: rotate(360deg); } }
.avatar-upload-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.avatar-upload-button { display: inline-flex; align-items: center; width: max-content; margin-top: 3px; padding: 6px 9px; border: 1px solid rgba(233,255,71,.45); border-radius: 7px; color: var(--login-lime); font-size: 10px; font-weight: 700; cursor: pointer; }
.avatar-upload-button:hover { background: rgba(233,255,71,.1); }
.avatar-editor { display: grid; grid-template-columns: auto minmax(70px, 120px); align-items: center; gap: 5px 8px; margin-top: 3px; color: rgba(255,255,255,.5); font-size: 9px; }
.avatar-editor input { width: 100%; accent-color: var(--login-lime); }
.avatar-editor input:disabled { opacity: .35; pointer-events: none; }
.avatar-reset-button { grid-column: 1 / -1; width: max-content; padding: 0; border: 0; background: none; color: rgba(255,255,255,.42); font: inherit; cursor: pointer; }
.avatar-reset-button:hover { color: var(--login-lime); }

.register-form { display: grid; gap: 8px; }
.register-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.register-field-grid > div { display: grid; gap: 8px; }
.register-availability-field { position: relative; display: grid; gap: 8px; }
.field-availability { position: absolute; top: 40px; right: 13px; min-height: 12px; margin: 0; transform: translateY(-50%); color: rgba(255,255,255,.42); font-size: 9px; line-height: 1.3; pointer-events: none; }
.field-availability.is-available { color: var(--login-lime); }
.field-availability.is-taken { color: #ff8b78; font-weight: 700; }
.register-form input.is-taken, .register-form input.is-password-mismatch, .register-form input.is-password-weak { border-color: #e95e50; background: rgba(233,94,80,.1); box-shadow: 0 0 0 2px rgba(233,94,80,.1); }
.availability-login-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.password-meter { display: flex; align-items: center; gap: 9px; margin: -1px 0 5px; }
.password-meter-track { display: flex; height: 5px; flex: 1; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.1); }
.password-meter-track span { width: 0; border-radius: inherit; background: var(--login-lime); transition: width .25s ease, background .25s ease; }
.password-meter > span { min-width: 72px; color: rgba(255,255,255,.42); font-size: 9px; text-align: right; }
.register-switch { margin: 20px 0 0; color: rgba(255,255,255,.4); font-size: 11px; text-align: center; }
.forgot-copy { margin: 0 0 20px; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.55; }
.forgot-vinyl { position: relative; width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 50%; background: repeating-radial-gradient(circle, #090909 0 3px, #242424 4px 5px, #0d0d0d 7px); box-shadow: 0 0 0 5px rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.45); animation: vinylAvatarSpin 8s linear infinite; }
.forgot-vinyl::before { content: ""; position: absolute; inset: 25%; border-radius: 50%; background: var(--login-lime); box-shadow: 0 0 0 3px rgba(0,0,0,.7); }
.forgot-vinyl span { position: absolute; inset: 46%; z-index: 1; border-radius: 50%; background: #111; }
@media (prefers-reduced-motion: reduce) { .forgot-vinyl { animation: none; } }

@media (max-width: 760px) {
  .login-topbar { padding: 18px 5%; }
  .login-stage { width: 92%; padding: 14px 0 40px; min-height: calc(100vh - 76px); }
  .login-card { padding: 24px 20px; }
  .register-field-grid { grid-template-columns: 1fr; gap: 8px; }
  /* iOS Safari auto-zooms the page in when a focused input's computed
     font-size is under 16px — the inputs above are 13px, so every tap
     into a field used to yank the viewport in. 16px here (below that
     threshold everywhere it matters) is what actually prevents it. */
  .login-form input, .register-form input { font-size: 16px; }
}