/* ============================================================
   通玄 TONGXUAN · 登录/注册 auth.css —— 通关文牒
   夜空为底 · 双栏大卡：墨底拜帖（左） × 宣纸表单（右）
   ============================================================ */
[hidden] { display: none !important; }

/* ================= 夜空舞台 ================= */
.auth-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 52px) 24px 100px;
  background:
    radial-gradient(ellipse 90% 70% at 50% -20%, var(--ink-600) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 118%, rgba(212, 175, 106, 0.08), transparent 65%),
    linear-gradient(180deg, var(--ink-850) 0%, var(--ink-900) 55%, var(--ink-950) 100%);
}
.auth-stars { position: absolute; inset: 0; z-index: 0; }

/* ================= 通关文牒大卡 ================= */
.auth-card {
  position: relative; z-index: 2;
  width: min(960px, 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(184, 145, 75, 0.55);
  background: linear-gradient(175deg, var(--paper-50), var(--paper-100) 85%);
  box-shadow:
    0 42px 110px rgba(5, 8, 18, 0.6),
    0 6px 22px rgba(5, 8, 18, 0.4),
    0 0 0 1px rgba(212, 175, 106, 0.08);
  animation: authCardIn 0.9s var(--ease-out) 0.12s both;
}
.auth-card::after {                       /* 内衬金线 */
  content: "";
  position: absolute; inset: 8px; z-index: 6;
  border: 1px solid rgba(212, 175, 106, 0.3);
  border-radius: calc(var(--radius-lg) - 8px);
  pointer-events: none;
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ————— 演示模式提示条（金框，卡顶横贯） ————— */
.auth-demo {
  position: relative;
  padding: 11px 22px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 13.5px; letter-spacing: 0.1em;
  color: var(--gold-700);
  background:
    linear-gradient(90deg, rgba(212, 175, 106, 0.06), rgba(212, 175, 106, 0.18) 50%, rgba(212, 175, 106, 0.06));
  border-bottom: 1px solid rgba(212, 175, 106, 0.55);
}
.auth-demo b {
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--cinnabar);
  padding: 0 4px;
  vertical-align: -1px;
}

/* ================= 双栏布局 ================= */
.auth-body {
  display: grid;
  grid-template-columns: 388px minmax(0, 1fr);   /* minmax(0,·)：防输入框固有宽度撑破卡片 */
  min-height: 540px;
}

/* ————— 左栏 · 墨底拜帖 ————— */
.auth-side {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 44px 40px 38px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 130% 120% at 50% -40%, rgba(212, 175, 106, 0.16), transparent 55%),
    linear-gradient(150deg, var(--ink-800), var(--ink-950) 88%);
  border-right: 1px solid rgba(212, 175, 106, 0.4);
}
.auth-side::before {                      /* 底纹大字 · 心 */
  content: "心";
  position: absolute;
  right: -44px; bottom: -70px;
  font-family: var(--font-serif);
  font-size: 300px; font-weight: 700; line-height: 1;
  color: rgba(212, 175, 106, 0.05);
  pointer-events: none;
}
.auth-side > * { position: relative; }

/* 朱砂大字印「通玄」 */
.auth-seal {
  align-self: flex-start;
  writing-mode: vertical-rl;
  padding: 15px 9px 13px;
  font-family: var(--font-serif);
  font-size: 25px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.18em;
  color: var(--paper-50);
  background: linear-gradient(160deg, var(--cinnabar), var(--cinnabar-deep));
  border-radius: 10px;
  box-shadow:
    0 8px 24px rgba(150, 53, 44, 0.4),
    inset 0 0 0 2px rgba(248, 236, 216, 0.5),
    inset 0 0 0 5px rgba(150, 53, 44, 0.4);
  transform: rotate(-3deg);
}

/* 竖排引言 */
.auth-quote {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 30px;
  margin-top: 46px;
}
.auth-quote span {
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--gold-300);
  text-shadow: 0 2px 18px rgba(212, 175, 106, 0.25);
}
.auth-quote span:last-child {             /* 下联 · 靠左错落 */
  padding-top: 40px;
  font-size: 19px;
  color: var(--text-mid);
  text-shadow: none;
}

/* 三行卖点 */
.auth-points {
  margin: 0; padding: 0;
  margin-top: auto;
  padding-top: 40px;
  list-style: none;
  display: grid;
  gap: 13px;
}
.auth-points li {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; letter-spacing: 0.1em;
  color: var(--text-mid);
}
.auth-points li::before {
  content: "";
  flex-shrink: 0;
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-300), var(--gold-600));
}
.auth-points b {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--gold-300);
  padding: 0 2px;
}

/* ————— 右栏 · 宣纸表单 ————— */
.auth-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 48px 56px 38px;
  color: var(--paper-ink);
}
.auth-pane::before {                      /* 宣纸噪点 */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.auth-pane > * { position: relative; }

.auth-tag {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-family: var(--font-serif);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--gold-700);
}
.auth-tag::before, .auth-tag::after {
  content: "";
  width: 46px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-600));
}
.auth-tag::after { transform: scaleX(-1); }
.auth-note {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 13px; letter-spacing: 0.24em; text-indent: 0.24em;
  color: var(--paper-ink-soft);
}

/* ================= 两步切换容器 ================= */
.auth-steps { position: relative; margin-top: 38px; }
.auth-steps.switching {
  overflow: hidden;
  transition: height 0.45s var(--ease-out);
}
.auth-step {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease-soft), transform 0.32s var(--ease-out);
}
.auth-step.in { opacity: 1; transform: none; }

/* ————— 第一步 · 邮箱 ————— */
.auth-input {
  font-size: 19px;
  padding: 12px 2px 10px;
  letter-spacing: 0.05em;
}
.auth-error {
  min-height: 24px;
  margin-top: 10px;
  text-align: center;
  font-size: 13px; letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--cinnabar);
}
.auth-btn { width: 100%; margin-top: 22px; }

/* 抖动（校验失败） */
.shake { animation: authShake 0.45s var(--ease-out); }
@keyframes authShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* ————— 第二步 · 六格验证码 ————— */
.auth-sent {
  text-align: center;
  font-size: 14px; letter-spacing: 0.05em;
  color: var(--paper-ink-soft);
}
.auth-sent b {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper-ink);
  word-break: break-all;
}
.otp-row {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.otp-box {
  width: 56px; height: 66px;
  padding: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 27px; font-weight: 700;
  color: var(--paper-ink);
  caret-color: var(--gold-600);
  background: rgba(250, 247, 239, 0.9);
  border: 1px solid rgba(44, 42, 36, 0.22);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s, transform 0.25s var(--ease-out);
}
.otp-box:hover { border-color: rgba(184, 145, 75, 0.6); }
.otp-box:focus {
  outline: none;
  border-color: var(--gold-600);
  background: var(--paper-50);
  box-shadow: 0 0 0 3px rgba(212, 175, 106, 0.2);
  transform: translateY(-2px);
}
.otp-box.filled {
  border-color: rgba(150, 114, 58, 0.6);
  background: var(--paper-50);
  box-shadow: inset 0 -2px 0 rgba(184, 145, 75, 0.45);
}
.auth-resend {
  margin-top: 18px;
  text-align: center;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--paper-ink-soft);
}
.auth-resend button {
  padding: 0 0 1px;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--gold-700);
  border-bottom: 1px solid rgba(150, 114, 58, 0.45);
  transition: color 0.3s, border-color 0.3s;
}
.auth-resend button:hover { color: var(--gold-600); border-color: var(--gold-600); }
.auth-resend button:disabled { opacity: 0.6; cursor: default; }
.auth-swap {
  display: block;
  margin: 20px auto 0;
  padding: 2px 4px;
  font-family: var(--font-serif);
  font-size: 13px; letter-spacing: 0.1em;
  color: var(--paper-ink-soft);
  transition: color 0.3s;
}
.auth-swap:hover { color: var(--gold-700); }

.auth-resend button:focus-visible,
.auth-swap:focus-visible,
.otp-box:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* ————— 底部小字 ————— */
.auth-terms {
  margin-top: auto;
  padding-top: 34px;
  text-align: center;
  font-size: 12px; line-height: 2;
  letter-spacing: 0.05em;
  color: var(--paper-ink-soft);
}
.auth-terms a {
  color: var(--gold-700);
  border-bottom: 1px solid rgba(150, 114, 58, 0.4);
  transition: color 0.3s, border-color 0.3s;
}
.auth-terms a:hover { color: var(--gold-600); border-color: var(--gold-600); }

/* ================= 响应式 ================= */
@media (max-width: 920px) {
  .auth-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-side {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 22px;
    align-items: center;
    padding: 26px 28px 24px;
    border-right: none;
    border-bottom: 1px solid rgba(212, 175, 106, 0.4);
  }
  .auth-side::before { font-size: 180px; right: -30px; bottom: -60px; }
  .auth-seal {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 19px;
    padding: 11px 7px 9px;
  }
  .auth-quote {
    margin: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
  .auth-quote span,
  .auth-quote span:last-child {
    writing-mode: horizontal-tb;
    padding: 0;
    font-size: 15.5px;
    letter-spacing: 0.16em;
  }
  .auth-quote span:last-child::before { content: "· "; color: var(--gold-600); }
  .auth-points {
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap;
    gap: 5px 18px;
  }
  .auth-points li { font-size: 12px; letter-spacing: 0.06em; gap: 8px; }
  .auth-pane { padding: 40px 40px 32px; }
}

@media (max-width: 560px) {
  .auth-stage { padding: calc(var(--nav-h) + 30px) 16px 68px; }
  .auth-pane { padding: 34px 22px 28px; }
  .auth-side { padding: 22px 20px 20px; }
  .auth-demo { font-size: 12.5px; padding: 10px 14px; }
  .auth-demo b { font-size: 16px; }
  .otp-row { gap: 8px; }
  .otp-box {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    max-width: 52px;
    height: 58px;
    font-size: 22px;
  }
  .auth-btn { padding: 14px 20px; }
}

/* ================= 减动效 ================= */
@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
  .shake { animation: none; }
  .auth-step { opacity: 1; transform: none; }
}