* { box-sizing: border-box; margin: 0; padding: 0; }

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', 'Microsoft YaHei', sans-serif;
  padding: 24px;
  overflow: hidden;
}

/* 双层背景用于切换时淡入淡出 */
.auth-bg-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.auth-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  background-size: 400% 400%;
  animation: authGradientFlow 18s ease infinite;
}

.auth-bg.is-active {
  opacity: 1;
}

@keyframes authGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 装饰光斑 */
.auth-bg::after {
  content: '';
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  animation: authOrbFloat 22s ease-in-out infinite;
}

@keyframes authOrbFloat {
  0%, 100% { transform: translate(-10%, -10%) scale(1); }
  50% { transform: translate(15%, 10%) scale(1.08); }
}

/* 各主题配色 */
.auth-bg.theme-sunset {
  background: linear-gradient(-45deg, #ffecd2, #fcb69f, #ff9a9e, #fecfef, #ffdde1);
}
.auth-bg.theme-sunset::after {
  background: rgba(255, 154, 158, 0.55);
  top: -20%;
  right: -15%;
}

.auth-bg.theme-ocean {
  background: linear-gradient(-45deg, #a8edea, #fed6e3, #89f7fe, #66a6ff, #c2e9fb);
}
.auth-bg.theme-ocean::after {
  background: rgba(102, 166, 255, 0.5);
  bottom: -25%;
  left: -10%;
}

.auth-bg.theme-forest {
  background: linear-gradient(-45deg, #d4fc79, #96e6a1, #a8e063, #56ab2f, #e8f5e9);
}
.auth-bg.theme-forest::after {
  background: rgba(86, 171, 47, 0.4);
  top: 10%;
  left: 20%;
}

.auth-bg.theme-night {
  background: linear-gradient(-45deg, #2c3e50, #4ca1af, #2c3e50, #3498db, #1a1a2e);
}
.auth-bg.theme-night::after {
  background: rgba(52, 152, 219, 0.35);
  top: 30%;
  right: 5%;
}

.auth-bg.theme-aurora {
  background: linear-gradient(-45deg, #a18cd1, #fbc2eb, #8fd3f4, #84fab0, #cfd9df);
}
.auth-bg.theme-aurora::after {
  background: rgba(161, 140, 209, 0.45);
  bottom: 10%;
  right: 25%;
}

.auth-bg.theme-peach {
  background: linear-gradient(-45deg, #fff1eb, #ace0f9, #ffecd2, #fcb69f, #ffeaa7);
}
.auth-bg.theme-peach::after {
  background: rgba(252, 182, 159, 0.5);
  top: -10%;
  left: 30%;
}

.auth-bg.theme-lavender {
  background: linear-gradient(-45deg, #e0c3fc, #8ec5fc, #f3e7e9, #c9d6ff, #e2d1f9);
}
.auth-bg.theme-lavender::after {
  background: rgba(142, 197, 252, 0.45);
  bottom: -15%;
  right: -5%;
}

.auth-bg.theme-midnight {
  background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e, #834d9b, #d04ed6);
}
.auth-bg.theme-midnight::after {
  background: rgba(131, 77, 155, 0.4);
  top: 20%;
  left: -15%;
}

.auth-bg.theme-rose {
  background: linear-gradient(-45deg, #f9ce34, #ee9ca7, #ffdde1, #ff9a9e, #fad0c4);
}
.auth-bg.theme-rose::after {
  background: rgba(238, 156, 167, 0.5);
  right: 10%;
  bottom: 20%;
}

/* 换背景按钮 */
.auth-bg-switch {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  color: #333;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.auth-bg-switch:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

.auth-bg-dots {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.auth-bg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.auth-bg-dot.is-active {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.25);
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 48px 40px 40px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.auth-title {
  font-family: 'Noto Serif SC', 'SimSun', serif;
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.auth-sub {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 28px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-form input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-form input:focus {
  border-color: #333;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.auth-btn {
  margin-top: 8px;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: #f5d547;
  color: #333;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(245, 213, 71, 0.45);
}

.auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 213, 71, 0.55);
}

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

.auth-link {
  text-align: center;
  margin-top: 24px;
  font-size: 0.9rem;
  color: #555;
}

.auth-link a {
  color: #2563eb;
  text-decoration: none;
}

.auth-link a:hover {
  text-decoration: underline;
}

.auth-msg {
  text-align: center;
  margin-top: 12px;
  font-size: 0.85rem;
  min-height: 1.2em;
  color: #dc2626;
}

.auth-msg.ok {
  color: #16a34a;
}

/* 深色主题下卡片略调亮文字对比 */
body[data-bg-theme="night"] .auth-card,
body[data-bg-theme="midnight"] .auth-card {
  background: rgba(255, 255, 255, 0.94);
}

body[data-bg-theme="night"] .auth-bg-switch,
body[data-bg-theme="midnight"] .auth-bg-switch {
  color: #eee;
  border-color: rgba(255, 255, 255, 0.2);
}