.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* .layout-main (its parent, Layout.css) is already a flex:1 column
     filling the exact viewport height left over from the (hidden, on this
     page) header/footer - stretching to fill that with flex:1 centers
     within the real available space. A fixed min-height:100vh here instead
     double-counted the viewport (this page's own 100vh nested inside a
     parent that's already sized to the viewport), which pushed the card
     below true center and, on mobile browsers where 100vh includes space
     the address bar can hide/show, made the vertical centering drift. */
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 2rem;
  background: radial-gradient(ellipse at 50% 30%, rgba(47, 143, 255, 0.06) 0%, transparent 60%),
              var(--background);
}

.login-card {
  max-width: 400px;
  width: 100%;
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo img {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 16px rgba(47, 143, 255, 0.3));
}

.login-logo h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.login-logo .logo-playlist { color: var(--text-primary); }
/* Was a --gradient-primary text-clip - gradients are banned app-wide now
   (see base.css's token comment), flat accent-cyan instead. */
.login-logo .logo-lab { color: var(--accent-cyan); }

.login-subtitle {
  color: var(--text-secondary);
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  text-align: center;
}

.login-error {
  padding: 0.75rem;
  margin-bottom: 1rem;
  background-color: rgba(239, 83, 80, 0.08);
  border: 1px solid rgba(239, 83, 80, 0.3);
  border-radius: var(--radius-sm);
  color: var(--error);
  font-size: 0.875rem;
}

.login-pin-box {
  padding: 1.5rem;
  margin-bottom: 1rem;
  background-color: var(--background);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  text-align: center;
}

.login-pin-spinner {
  display: inline-block;
  width: 36px;
  height: 36px;
  border: 3px solid var(--primary-color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.login-pin-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.login-pin-code {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 1rem 0;
  letter-spacing: 2px;
}

.login-pin-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.login-pin-info {
  font-size: 0.8125rem;
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: rgba(47, 143, 255, 0.06);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.login-btn {
  width: 100%;
  padding: 0.875rem;
  background: transparent;
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  /* base.css's mobile rule turns every <button> into display:inline-flex
     (for the 44px touch-target min-height), which drops the native
     button's centered text-align in favor of flex's default
     justify-content:flex-start - left-pinning this label on phones. */
  display: flex;
  justify-content: center;
}

.login-btn:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.12);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.login-btn-cancel {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-btn-cancel:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-light);
  color: var(--text-primary);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Shared "first impression" decorative treatment (DESIGN.md §9/§12) - Login
   and Setup are the two confirmed opt-in surfaces for the grid-texture +
   HUD corner-accent language, paired so they read as one moment rather than
   two different styles. Lives here (not base.css, which stays token-only)
   and Setup links this file just for these two classes rather than
   duplicating the rules. A ::before overlay layer (not the element's own
   `background` shorthand) avoids fighting whatever background the host
   element already sets - .login-page's radial glow, .settings-page's plain
   var(--background) - since it paints on top instead of competing for the
   same property. */
.hero-backdrop {
  position: relative;
}

.hero-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(47, 143, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 143, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  /* Slow, restrained drift - "animated" per §12 without competing with the
     card content sitting on top of it. prefers-reduced-motion is
     deliberately unhandled app-wide (DESIGN.md §6/§14). */
  animation: hero-grid-drift 10s ease-in-out infinite;
}

@keyframes hero-grid-drift {
  0%, 100% { background-position: 0 0, 0 0; opacity: 0.7; }
  50% { background-position: 6px 6px, 6px 6px; opacity: 1; }
}

/* Every direct child needs to sit above the ::before overlay explicitly -
   the pseudo-element is a real stacking-context sibling (z-index:0), not a
   background, so without this the grid would paint over card content that
   has no z-index of its own. */
.hero-backdrop > * {
  position: relative;
  z-index: 1;
}

/* Thin cyan HUD-reticle corner accent, offset off two opposite corners of
   whichever card sits on the hero backdrop (.login-card on Login, the setup
   form's section on Setup). */
.hero-backdrop-card {
  position: relative;
}

.hero-backdrop-card::before,
.hero-backdrop-card::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.hero-backdrop-card::before {
  top: -8px;
  left: -8px;
  border-top: 2px solid var(--accent-cyan);
  border-left: 2px solid var(--accent-cyan);
}

.hero-backdrop-card::after {
  bottom: -8px;
  right: -8px;
  border-bottom: 2px solid var(--accent-cyan);
  border-right: 2px solid var(--accent-cyan);
}