.login-page {
  align-items: center;
  display: grid;
  min-block-size: 100%;
  overflow: auto;
  padding: var(--space-4);
}

.login-shell {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: var(--player-content-max-inline-size);
}

.login-panel {
  background: var(--color-raised-panel);
  border: var(--rule-width) solid var(--color-graphite-rule);
  border-block-start: var(--accent-rule-width) solid var(--color-tally-red);
  border-radius: var(--radius-medium);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.login-kicker {
  color: var(--color-quiet-copy);
  font-size: var(--text-label);
  font-weight: 700;
  margin: 0;
}

.login-panel h1 {
  font-size: var(--text-display);
  line-height: var(--line-display);
  margin: 0;
}

.login-intro, .login-disclosure {
  color: var(--color-quiet-copy);
  margin: 0;
}

.login-disclosure { font-size: var(--text-caption); }

.login-form { display: grid; gap: var(--space-3); }

.login-field { display: grid; gap: var(--space-1); }

.login-field label { font-size: var(--text-label); font-weight: 700; }

.login-field input {
  background: var(--color-paper-white);
  border: var(--rule-width) solid var(--color-quiet-copy);
  border-radius: var(--radius-small);
  color: var(--color-graphite-ink);
  min-block-size: var(--target-min);
  padding: var(--space-2);
}

.login-panel .error-message { margin: 0; }
.login-panel .error-message[hidden] { display: none; }
.login-panel .status[hidden] { display: none; }
.login-submit {
  background: color-mix(in srgb, var(--color-tally-red) 88%, var(--color-graphite-ink));
  min-block-size: var(--target-primary);
}

@media (min-width: 768px) {
  .login-panel { padding: var(--space-5); }
}

/* —— 质感层：纸面氛围 + 卡片浮起 + 交互过渡 —— */
.login-page {
  background:
    radial-gradient(2.3px 2.3px at 95.6% 52.0%, rgba(245, 215, 142, 0.88) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 60.1% 42.9%, rgba(255, 255, 255, 0.64) 0 50%, transparent 51%),
    radial-gradient(2.3px 2.3px at 93.9% 48.6%, rgba(255, 255, 255, 0.83) 0 50%, transparent 51%),
    radial-gradient(2.7px 2.7px at 98.0% 7.7%, rgba(255, 255, 255, 0.75) 0 50%, transparent 51%),
    radial-gradient(2.8px 2.8px at 71.1% 83.3%, rgba(255, 255, 255, 0.57) 0 50%, transparent 51%),
    radial-gradient(2.7px 2.7px at 43.3% 79.0%, rgba(245, 215, 142, 0.77) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 38.0% 10.7%, rgba(255, 255, 255, 0.66) 0 50%, transparent 51%),
    radial-gradient(2.6px 2.6px at 25.7% 10.8%, rgba(255, 255, 255, 0.59) 0 50%, transparent 51%),
    radial-gradient(2.6px 2.6px at 49.8% 51.3%, rgba(255, 255, 255, 0.75) 0 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 18.3% 90.4%, rgba(255, 255, 255, 0.85) 0 50%, transparent 51%),
    radial-gradient(2.7px 2.7px at 33.4% 58.0%, rgba(245, 215, 142, 0.82) 0 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 49.9% 57.0%, rgba(255, 255, 255, 0.71) 0 50%, transparent 51%),
    radial-gradient(2.7px 2.7px at 59.2% 8.8%, rgba(255, 255, 255, 0.71) 0 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 11.7% 73.3%, rgba(255, 255, 255, 0.85) 0 50%, transparent 51%),
    radial-gradient(2.0px 2.0px at 49.7% 78.3%, rgba(255, 255, 255, 0.61) 0 50%, transparent 51%),
    radial-gradient(2.0px 2.0px at 81.5% 75.4%, rgba(245, 215, 142, 0.88) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 80.2% 6.3%, rgba(255, 255, 255, 0.77) 0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94.8% 46.5%, rgba(255, 255, 255, 0.72) 0 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 10.4% 24.8%, rgba(255, 255, 255, 0.61) 0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30.7% 2.5%, rgba(255, 255, 255, 0.86) 0 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 36.2% 50.4%, rgba(245, 215, 142, 0.57) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 71.0% 34.7%, rgba(255, 255, 255, 0.86) 0 50%, transparent 51%),
    radial-gradient(2.6px 2.6px at 73.0% 40.6%, rgba(255, 255, 255, 0.66) 0 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 47.4% 47.7%, rgba(255, 255, 255, 0.6) 0 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 51.7% 70.6%, rgba(255, 255, 255, 0.57) 0 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 94.1% 34.0%, rgba(245, 215, 142, 0.67) 0 50%, transparent 51%),
    radial-gradient(1100px 480px at 18% -8%, var(--color-pending-wash) 0%, transparent 62%),
    radial-gradient(900px 420px at 108% 12%, var(--color-incident-wash) 0%, transparent 55%),
    var(--color-mineral-ground);
}

.login-panel {
  border-radius: var(--radius-medium);
  box-shadow: var(--elevation-panel);
  padding: var(--space-5);
}

.login-panel h1 { letter-spacing: 0.02em; }

.login-field input,
.login-field select {
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.login-field input:focus-visible,
.login-field select:focus-visible {
  border-color: var(--color-tally-red);
  box-shadow: 0 0 0 3px var(--color-incident-wash);
  outline: none;
}

.login-submit {
  border: var(--rule-width) solid transparent;
  border-radius: var(--radius-small);
  transition: filter var(--motion-fast), transform var(--motion-fast);
}

.login-submit:hover { filter: brightness(0.94); }
.login-submit:active { transform: translateY(1px); }

@media (min-width: 768px) {
  .login-panel { padding: var(--space-6); }
}
.register-link { color: var(--color-graphite-ink); font-weight: 700; }

/* —— 品牌夜空层（2026-09-02 紫色重设计）：深夜紫渐变 + 漫天繁星 + 弯月 —— */
.login-page {
  position: relative;
  background:
    radial-gradient(2.1px 2.1px at 79.6% 57.3%, rgba(245, 215, 142, 0.69) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 94.3% 10.9%, rgba(255, 255, 255, 0.72) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 60.9% 42.8%, rgba(255, 255, 255, 0.64) 0 50%, transparent 51%),
    radial-gradient(2.4px 2.4px at 70.7% 78.5%, rgba(255, 255, 255, 0.47) 0 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 62.0% 65.8%, rgba(255, 255, 255, 0.74) 0 50%, transparent 51%),
    radial-gradient(2.3px 2.3px at 8.2% 91.9%, rgba(255, 255, 255, 0.52) 0 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 37.9% 45.3%, rgba(245, 215, 142, 0.64) 0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 32.0% 71.2%, rgba(255, 255, 255, 0.7) 0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 71.2% 35.2%, rgba(255, 255, 255, 0.46) 0 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 56.7% 58.6%, rgba(255, 255, 255, 0.64) 0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22.1% 82.5%, rgba(255, 255, 255, 0.48) 0 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 91.7% 57.2%, rgba(255, 255, 255, 0.6) 0 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 56.0% 25.6%, rgba(245, 215, 142, 0.58) 0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 18.1% 17.7%, rgba(255, 255, 255, 0.45) 0 50%, transparent 51%),
    linear-gradient(135deg, var(--color-brand-night) 0%, var(--color-brand-deep) 58%, var(--color-brand-mid) 100%);
}

/* 右上弯月：透明圆 + 偏移投影勾出月牙，带夜光 */
.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-page::before {
  block-size: 64px;
  inline-size: 64px;
  border-radius: 50%;
  box-shadow:
    20px 12px 0 0 var(--color-moon),
    20px 12px 14px 2px rgba(245, 215, 142, 0.45);
  left: auto;
  right: 13%;
  top: 9%;
  z-index: 0;
}

/* 漫天繁星闪烁层（与常亮层错相，呼吸感） */
.login-page::after {
  background:
    radial-gradient(1.3px 1.3px at 76.5% 67.0%, rgba(245, 215, 142, 0.52) 0 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 61.7% 74.7%, rgba(255, 255, 255, 0.58) 0 50%, transparent 51%),
    radial-gradient(1.0px 1.0px at 40.7% 65.6%, rgba(255, 255, 255, 0.48) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 65.3% 12.7%, rgba(255, 255, 255, 0.5) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 94.1% 85.7%, rgba(255, 255, 255, 0.49) 0 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 11.0% 41.2%, rgba(245, 215, 142, 0.45) 0 50%, transparent 51%),
    radial-gradient(2.0px 2.0px at 17.4% 2.7%, rgba(255, 255, 255, 0.48) 0 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 6.7% 29.0%, rgba(255, 255, 255, 0.44) 0 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 46.5% 54.1%, rgba(255, 255, 255, 0.54) 0 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 14.6% 91.8%, rgba(255, 255, 255, 0.48) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 95.9% 32.4%, rgba(245, 215, 142, 0.4) 0 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 29.6% 41.8%, rgba(255, 255, 255, 0.46) 0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 19.3% 13.4%, rgba(255, 255, 255, 0.62) 0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63.1% 71.9%, rgba(255, 255, 255, 0.4) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 11.9% 35.0%, rgba(255, 255, 255, 0.36) 0 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 11.7% 67.3%, rgba(245, 215, 142, 0.39) 0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 97.9% 57.2%, rgba(255, 255, 255, 0.62) 0 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 26.3% 23.4%, rgba(255, 255, 255, 0.57) 0 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 56.0% 3.0%, rgba(255, 255, 255, 0.59) 0 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 44.8% 13.5%, rgba(255, 255, 255, 0.57) 0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 63.9% 40.1%, rgba(245, 215, 142, 0.36) 0 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 2.4% 6.3%, rgba(255, 255, 255, 0.44) 0 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 86.0% 92.4%, rgba(255, 255, 255, 0.49) 0 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 50.9% 52.9%, rgba(255, 255, 255, 0.42) 0 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 31.7% 12.4%, rgba(255, 255, 255, 0.56) 0 50%, transparent 51%),
    radial-gradient(2.0px 2.0px at 81.4% 25.2%, rgba(245, 215, 142, 0.46) 0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 20.2% 79.1%, rgba(255, 255, 255, 0.54) 0 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 60.4% 4.5%, rgba(255, 255, 255, 0.4) 0 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 34.9% 6.3%, rgba(255, 255, 255, 0.54) 0 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 56.1% 2.2%, rgba(255, 255, 255, 0.48) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 47.0% 70.3%, rgba(245, 215, 142, 0.36) 0 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 96.5% 37.3%, rgba(255, 255, 255, 0.56) 0 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 93.8% 12.7%, rgba(255, 255, 255, 0.43) 0 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 54.8% 82.0%, rgba(255, 255, 255, 0.49) 0 50%, transparent 51%),
    radial-gradient(1.9px 1.9px at 7.2% 47.2%, rgba(255, 255, 255, 0.57) 0 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 5.7% 69.5%, rgba(245, 215, 142, 0.48) 0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 2.3% 73.4%, rgba(255, 255, 255, 0.5) 0 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 42.9% 4.0%, rgba(255, 255, 255, 0.54) 0 50%, transparent 51%),
    radial-gradient(90px 90px at 84% 16%, rgba(245, 215, 142, 0.12) 0%, transparent 70%);
  content: "";
  inset: 0;
  animation: star-twinkle 5.6s ease-in-out infinite alternate;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

@keyframes star-twinkle {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .login-page::after { animation: none; }
}

.login-shell {
  position: relative;
  z-index: 1;
}

.login-panel {
  background: var(--color-paper-white);
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(42, 24, 69, 0.35);
}

.login-logo {
  display: block;
  inline-size: 88px;
  block-size: 88px;
  margin: 0 auto var(--space-2);
  border-radius: 20px;
  box-shadow: 0 0 24px rgba(201, 160, 240, 0.55);
}

.login-kicker { color: var(--color-brand-deep); }

.login-submit { background: var(--color-brand-deep); }
.login-submit:hover { filter: brightness(1.15); }

.login-field input { border-color: var(--color-graphite-rule); }
.login-field input:focus-visible,
.login-field select:focus-visible {
  border-color: var(--color-brand-deep);
  box-shadow: 0 0 0 3px var(--color-scheduled-lavender);
}

.register-link { color: var(--color-brand-deep); }