/* 登录与注册：克制的暗色创意工作台，背景由 auth-background.js 绘制液态金属高度场。 */
#auth-page.auth-page {
  --auth-bg: #030506;
  --auth-panel: rgba(8, 10, 14, .6);
  --auth-panel-mobile: rgba(7, 9, 13, .86);
  --auth-input: rgba(0, 0, 0, .42);
  --auth-gold: #c6a87c;
  --auth-gold-bright: #e8d5b0;
  --auth-text: #ece4d4;
  --auth-muted: #8a8a94;
  --auth-dim: rgba(255, 255, 255, .35);
  --auth-hairline: rgba(255, 255, 255, .055);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: 48px 20px 58px;
  color: var(--auth-text);
  background: var(--auth-bg);
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

#auth-page .auth-backdrop,
#auth-page .auth-backdrop > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#auth-page .auth-backdrop {
  z-index: -2;
  overflow: hidden;
  background: #030506;
}

#auth-page .auth-fallback {
  z-index: 0;
  background:
    radial-gradient(ellipse 720px 430px at 78% 34%, rgba(205, 214, 228, .13), rgba(205, 214, 228, .018) 38%, transparent 70%),
    radial-gradient(ellipse 850px 500px at 12% 102%, rgba(54, 89, 142, .16), rgba(54, 89, 142, .025) 42%, transparent 72%),
    radial-gradient(ellipse 650px 360px at 70% 104%, rgba(75, 103, 150, .08), transparent 70%),
    linear-gradient(180deg, #030506 0%, #05070a 100%);
}

#auth-page .auth-canvas-container {
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
}

#auth-page .auth-canvas-container canvas { display: block; width: 100% !important; height: 100% !important; }
#auth-page.auth-canvas-ready .auth-canvas-container { opacity: 1; }
#auth-page.auth-static .auth-canvas-container { display: none; }

#auth-page .auth-grid {
  z-index: 2;
  opacity: .56;
  background-image:
    linear-gradient(rgba(198, 168, 124, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 168, 124, .022) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 8%, transparent 72%);
}

#auth-page .auth-vignette {
  z-index: 3;
  background:
    radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, .18) 68%, rgba(0, 0, 0, .58) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 31%, transparent 74%, rgba(0, 0, 0, .28));
}

#auth-page .auth-grain {
  z-index: 4;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

#auth-page .auth-card {
  position: relative;
  width: min(100%, 460px);
  max-width: none;
  padding: 44px 42px 34px;
  overflow: hidden;
  border: 1px solid var(--auth-hairline);
  border-top-color: rgba(198, 168, 124, .22);
  border-radius: 4px;
  color: var(--auth-text);
  background: var(--auth-panel);
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .7),
    0 0 1px rgba(198, 168, 124, .15),
    inset 0 0 40px rgba(198, 168, 124, .015);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  backdrop-filter: blur(30px) saturate(125%);
  animation: auth-panel-in .9s cubic-bezier(.2, .9, .25, 1) both;
}

#auth-page.register-mode { align-items: flex-start; }
#auth-page.register-mode .auth-card { width: min(100%, 460px); }

#auth-page .auth-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1px;
  right: 18%;
  left: 18%;
  height: 1px;
  opacity: .72;
  background: linear-gradient(90deg, transparent, var(--auth-gold), transparent);
}

#auth-page .auth-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .22;
  border-radius: inherit;
  background-image: radial-gradient(rgba(198, 168, 124, .045) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

#auth-page .auth-card > :not(.auth-corner) {
  position: relative;
  z-index: 2;
}

#auth-page .auth-corner {
  position: absolute;
  z-index: 3;
  width: 10px;
  height: 10px;
  opacity: .75;
  pointer-events: none;
}

#auth-page .auth-corner-tl { top: -1px; left: -1px; border-top: 1.5px solid var(--auth-gold); border-left: 1.5px solid var(--auth-gold); }
#auth-page .auth-corner-tr { top: -1px; right: -1px; border-top: 1.5px solid var(--auth-gold); border-right: 1.5px solid var(--auth-gold); }
#auth-page .auth-corner-bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--auth-gold); border-left: 1.5px solid var(--auth-gold); }
#auth-page .auth-corner-br { right: -1px; bottom: -1px; border-right: 1.5px solid var(--auth-gold); border-bottom: 1.5px solid var(--auth-gold); }

#auth-page .auth-brand { margin-bottom: 34px; text-align: center; }

#auth-page .brand-title {
  display: block;
  margin: 0;
  color: transparent;
  background: linear-gradient(135deg, #fff 0%, #f9f1d8 32%, #c19a62 72%, #d4af71 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .7));
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: 39px;
  font-weight: 300;
  letter-spacing: .15em;
  line-height: 1.2;
  animation: auth-shimmer 7s ease-in-out infinite;
}

#auth-page #auth-subtitle {
  margin: 13px 0 0;
  color: var(--auth-muted);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .27em;
  line-height: 1.65;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}

#auth-page .auth-brand::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--auth-gold) 45%, transparent);
}

#auth-page .auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

#auth-page .auth-tab {
  position: relative;
  min-height: 43px;
  border: 0;
  color: var(--auth-muted);
  background: transparent;
  font: inherit;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  cursor: pointer;
  transition: color .25s ease, text-shadow .25s ease;
}

#auth-page .auth-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1.5px;
  background: var(--auth-gold);
  transform: scaleX(0);
  transition: transform .25s ease;
}

#auth-page .auth-tab:hover { color: var(--auth-text); }
#auth-page .auth-tab.active { color: var(--auth-gold); text-shadow: 0 0 8px rgba(198, 168, 124, .4); }
#auth-page .auth-tab.active::after { transform: scaleX(1); }

#auth-page .form-group { position: relative; margin-bottom: 20px; }

#auth-page .form-group label {
  margin-bottom: 7px;
  color: var(--auth-dim);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .11em;
  transition: color .25s ease, text-shadow .25s ease;
}

#auth-page .form-group:focus-within > label {
  color: var(--auth-gold);
  text-shadow: 0 0 8px rgba(198, 168, 124, .35);
}

#auth-page .form-group input,
#auth-page .form-group select {
  min-height: 39px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 2px;
  color: var(--auth-text);
  background: var(--auth-input);
  box-shadow: none;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  letter-spacing: .02em;
  transition: border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

#auth-page .form-group input::placeholder { color: rgba(255, 255, 255, .18); font-size: 11px; opacity: 1; }

#auth-page .form-group input:focus,
#auth-page .form-group select:focus {
  border-color: var(--auth-gold);
  background: rgba(198, 168, 124, .045);
  box-shadow: 0 0 14px rgba(198, 168, 124, .18), inset 0 0 10px rgba(198, 168, 124, .05);
}

#auth-page .form-group input:-webkit-autofill,
#auth-page .form-group input:-webkit-autofill:hover,
#auth-page .form-group input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--auth-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #080a0e inset !important;
  caret-color: var(--auth-gold);
  transition: background-color 9999s ease-in-out 0s;
}

#auth-page .form-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-text) !important;
  -webkit-box-shadow: 0 0 0 1000px #080a0e inset, 0 0 14px rgba(198, 168, 124, .2) !important;
}

#auth-page .password-toggle { right: 9px; color: rgba(232, 213, 176, .48); filter: grayscale(1) brightness(1.5); }

#auth-page .btn-primary {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 47px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid rgba(198, 168, 124, .42);
  border-radius: 2px;
  color: var(--auth-gold);
  background: rgba(198, 168, 124, .06);
  box-shadow: none;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-shadow: none;
  transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

#auth-page .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -100%;
  background: linear-gradient(90deg, transparent, rgba(198, 168, 124, .35), transparent);
  transition: left .7s ease;
}

#auth-page .btn-primary:hover {
  border-color: var(--auth-gold);
  color: #fff;
  background: rgba(198, 168, 124, .14);
  box-shadow: 0 0 24px rgba(198, 168, 124, .32), inset 0 0 14px rgba(198, 168, 124, .18);
  text-shadow: 0 0 10px rgba(198, 168, 124, .9);
  transform: none;
}

#auth-page .btn-primary:hover::before { left: 100%; }

#auth-page .auth-link { margin-top: 14px; color: var(--auth-muted); font-size: 10px; }
#auth-page .auth-link a { color: rgba(198, 168, 124, .72); font-weight: 500; text-decoration: none; }
#auth-page .auth-link a:hover { color: var(--auth-gold-bright); }

#auth-page .error-msg {
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(248, 113, 113, .25);
  border-radius: 2px;
  color: #fca5a5;
  background: rgba(127, 29, 29, .16);
  font-size: 12px;
}

#auth-page .gender-choice {
  min-height: 54px;
  border-color: rgba(255, 255, 255, .08);
  border-radius: 2px;
  background: var(--auth-input);
  box-shadow: none;
}

#auth-page .gender-choice img {
  width: 34px;
  height: 34px;
  opacity: .91;
  filter: grayscale(.21) sepia(.11) saturate(.89) brightness(.89) contrast(1.02);
  transition: opacity .2s ease, filter .2s ease;
}

#auth-page .gender-choice:hover,
#auth-page .gender-choice.active,
#auth-page .gender-choice.selected {
  border-color: var(--auth-gold);
  background: rgba(198, 168, 124, .06);
  box-shadow: 0 0 14px rgba(198, 168, 124, .12);
  transform: none;
}

#auth-page .gender-choice:hover img,
#auth-page .gender-choice.selected img {
  opacity: .97;
  filter: grayscale(.17) sepia(.15) saturate(.91) brightness(.92) contrast(1.03);
}

#auth-page .verification-code-actions .btn-secondary {
  min-height: 39px;
  border-color: rgba(198, 168, 124, .42);
  border-radius: 2px;
  color: var(--auth-gold-bright);
  background: rgba(198, 168, 124, .06);
  font-family: inherit;
  font-size: 11px;
}

#auth-page .verification-code-actions .btn-secondary:hover {
  border-color: var(--auth-gold);
  background: rgba(198, 168, 124, .13);
}

@keyframes auth-panel-in {
  from { opacity: 0; transform: translateY(28px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes auth-shimmer {
  0%, 100% { background-position: 0 center; }
  50% { background-position: 100% center; }
}

#password-reset-modal {
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#password-reset-modal .modal-card.small {
  border: 1px solid rgba(255, 255, 255, .06);
  border-top-color: rgba(198, 168, 124, .25);
  border-radius: 4px;
  color: var(--auth-text, #ece4d4);
  background: rgba(8, 10, 14, .94);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .72);
}

#password-reset-modal .modal-header { border-bottom-color: rgba(255, 255, 255, .06); background: rgba(8, 10, 14, .96); }
#password-reset-modal .modal-close { color: #aaa4a0; background: rgba(255, 255, 255, .06); }
#password-reset-modal .form-group label { color: rgba(255, 255, 255, .35); }
#password-reset-modal .form-group input { min-height: 39px; padding-block: 7px; border-color: rgba(255, 255, 255, .08); color: #ece4d4; background: rgba(0, 0, 0, .42); color-scheme: dark; }
#password-reset-modal .form-group input:focus { border-color: #c6a87c; box-shadow: 0 0 14px rgba(198, 168, 124, .18); }
#password-reset-modal .btn-secondary { border-color: rgba(198, 168, 124, .42); color: #e8d5b0; background: rgba(198, 168, 124, .06); }
#password-reset-modal .btn-primary { border-color: rgba(198, 168, 124, .42); color: #c6a87c; background: rgba(198, 168, 124, .06); }

@media (max-width: 560px) {
  #auth-page.auth-page { align-items: flex-start; padding: 32px 14px 70px; overflow: hidden; }
  #auth-page .auth-card { padding: 36px 24px 26px; border-radius: 3px; background: var(--auth-panel-mobile); }
  #auth-page .brand-title { font-size: 32px; letter-spacing: .11em; }
  #auth-page #auth-subtitle { letter-spacing: .16em; }
}

@media (max-width: 380px) {
  #auth-page .auth-card { padding-inline: 20px; }
  #auth-page .brand-title { font-size: 28px; }
}

@media (max-height: 760px) and (min-width: 561px) {
  #auth-page.auth-page { align-items: flex-start; padding-block: 26px 58px; }
}

@media (prefers-reduced-motion: reduce) {
  #auth-page .auth-canvas-container { transition: none; }
  #auth-page .brand-title,
  #auth-page .auth-card { animation: none; }
  #auth-page .auth-tab::after,
  #auth-page .btn-primary,
  #auth-page .btn-primary::before { transition: none; }
}