/* ============================================================
   登录页 · 液态玻璃
   只在登录 / 注册页生效，覆盖 style.css 里的基础样式
   ============================================================ */

.auth {
  position: relative;
  isolation: isolate;
}

/* 背后的两团柔光，玻璃面板会折射它们 */
.auth::before,
.auth::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.auth::before {
  width: min(44vw, 580px);
  height: min(44vw, 580px);
  right: -12vw;
  top: -14vh;
  background: radial-gradient(
    circle at 36% 32%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 205, 226, 0.42) 38%,
    rgba(255, 173, 205, 0.12) 58%,
    transparent 72%
  );
  animation: liquid-orb 18s ease-in-out infinite;
}

.auth::after {
  width: min(28vw, 360px);
  height: min(28vw, 360px);
  left: 2vw;
  bottom: -8vh;
  background: radial-gradient(
    circle at 42% 38%,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(226, 210, 255, 0.34) 42%,
    transparent 70%
  );
  animation: liquid-orb 24s ease-in-out infinite reverse;
}

.auth > * {
  position: relative;
  z-index: 1;
}

@keyframes liquid-orb {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2.5%, 3.5%, 0) scale(1.06); }
}

/* 玻璃面板：多层透明 + 高光边缘 + 内阴影 */
.auth-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0.42) 40%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(130% 100% at 8% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(120% 100% at 100% 100%, rgba(255, 150, 190, 0.32) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.56), rgba(255, 226, 237, 0.34));
  -webkit-backdrop-filter: blur(32px) saturate(190%) brightness(1.02);
  backdrop-filter: blur(32px) saturate(190%) brightness(1.02);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -22px 44px -34px rgba(170, 30, 80, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 50px 100px -46px rgba(160, 30, 80, 0.6),
    0 18px 40px -26px rgba(160, 30, 80, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* 跟随指针的流光 */
.auth-panel::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx, 70%) var(--my, -8%),
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.18) 38%,
    transparent 68%
  );
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* 液态高光边框 */
.auth-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.18) 26%,
    rgba(255, 160, 190, 0.55) 54%,
    rgba(255, 255, 255, 0.2) 74%,
    rgba(255, 255, 255, 0.92) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.auth-panel > * {
  position: relative;
  z-index: 1;
}

/* 面板标题与副标题 */
.auth-panel-title {
  letter-spacing: 0.03em;
}

.auth-panel-sub {
  letter-spacing: 0.04em;
}

/* 玻璃输入框 */
.auth-panel .input {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.48) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -10px 20px -16px rgba(188, 48, 104, 0.28),
    0 1px 2px rgba(188, 48, 104, 0.05);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.auth-panel .input:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.58) 100%);
}

.auth-panel .input:focus {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(255, 127, 166, 0.9);
  box-shadow:
    0 0 0 4px rgba(255, 127, 166, 0.16),
    inset 0 1px 0 #fff,
    inset 0 -10px 20px -16px rgba(188, 48, 104, 0.2);
}

/* 密码眼睛做成小玻璃珠 */
.auth-panel .pw-toggle {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px -4px rgba(188, 48, 104, 0.35), inset 0 1px 0 #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-panel .pw-toggle:hover {
  background: #fff;
  color: var(--rose-deep);
}

/* 主按钮：玻璃光泽 + 掠过的高光 */
.auth-panel .btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ff9ebc 0%, #ff5f8f 46%, #f43f7c 100%);
  box-shadow:
    0 20px 40px -16px rgba(243, 79, 134, 0.78),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -3px 8px rgba(176, 20, 66, 0.22);
}

.auth-panel .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 18%,
    rgba(255, 255, 255, 0.12) 34%,
    rgba(255, 255, 255, 0.5) 48%,
    rgba(255, 255, 255, 0.12) 62%,
    transparent 78%
  );
  transform: translateX(-130%);
  transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}

.auth-panel .btn-primary:hover::after {
  transform: translateX(130%);
}

/* 记住账号密码：玻璃小开关 */
.remember-row {
  gap: 10px;
  min-height: 44px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 开关本体相对轨道定位，避免跟整行内边距错位 */
.switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
}

.remember-row input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 240, 246, 0.55));
  box-shadow:
    inset 0 2px 5px rgba(188, 48, 104, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.switch-knob {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #fff2f6);
  box-shadow:
    0 2px 5px rgba(160, 40, 80, 0.3),
    inset 0 1px 0 #fff;
  transform: translateY(-50%);
  transition: left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.remember-row input:checked {
  background: linear-gradient(135deg, #ff9ebc, #ff4f86);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 2px 6px rgba(150, 20, 60, 0.28),
    0 4px 10px -6px rgba(243, 79, 134, 0.8);
}

.remember-row input:checked + .switch-knob {
  left: 21px;
  transform: translateY(-50%);
}

.remember-row input:focus-visible {
  outline: 2px solid rgba(255, 95, 143, 0.55);
  outline-offset: 3px;
}

/* 记住提示做成一小条玻璃 */
.saved-login-hint {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  width: fit-content;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 错误提示也玻璃一点 */
.auth-error {
  border: 1px solid rgba(255, 120, 150, 0.28);
  background: rgba(255, 232, 238, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 左侧小卡片：玻璃质感 */
.auth-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5));
  box-shadow:
    0 10px 26px -16px rgba(188, 48, 104, 0.4),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.auth-quote {
  width: fit-content;
  max-width: min(100%, 440px);
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-left: 2px solid rgba(255, 143, 176, 0.7);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 255, 255, 0.26);
}

/* 没有 backdrop-filter 时回退成更实的底 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-panel {
    background: rgba(255, 249, 252, 0.94);
  }
}

/* 手机端减负，保留玻璃但少动 */
@media (max-width: 560px) {
  .auth::before,
  .auth::after {
    display: none;
  }

  .auth-panel {
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    backdrop-filter: blur(22px) saturate(165%);
  }

  .auth-panel::after {
    display: none;
  }

  .auth-panel .pw-toggle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .saved-login-hint {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth::before,
  .auth::after {
    animation: none;
  }

  .auth-panel .btn-primary::after {
    display: none;
  }
}