@charset "UTF-8";

/* 认证入口（注册 / 登录 / 管理员登录）。
   继承 app.css 的液态玻璃变量与基元，只补充本页专有的版式与表单状态。
   这一层的目标是让表单成为绝对主体：说明只保留与当前任务直接相关的部分。 */

.auth-surface { min-height: 100svh; }
.auth-surface .shell { display: flex; align-items: center; padding-bottom: 40px; }
.auth-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.auth-page {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(348px, 428px);
  column-gap: clamp(36px, 5vw, 82px); row-gap: 24px;
  width: 100%; max-width: 1180px; margin: 0 auto;
}
.auth-story { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.auth-story-copy { max-width: 30ch; }
.auth-title { margin: 0 0 14px; font-size: clamp(34px, 3.5vw, 52px); font-weight: 700; line-height: 1.2; letter-spacing: -.04em; }
.auth-title > span { display: block; }
.auth-title .auth-title-prelude { color: var(--ink-2); font-weight: 450; }
.auth-title-stop { color: var(--accent); }
.auth-story-lead { max-width: 34ch; margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.85; }
.auth-story-note { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.7; }

/* 与首页同一套三维装配，静止镜头、只保留主体自身的环绕运动 */
.auth-orb { position: relative; width: min(340px, 58vmin); aspect-ratio: 1; margin: 4px 0 4px -10px; --p: 0; }
.auth-orb .core-rig { --s: 14deg; --t: -15deg; }
.auth-orb .orbit .runner { animation-duration: 34s; }
.auth-orb .orbit-2 .runner { animation-duration: 25s; }
.auth-orb .orbit-3 .runner { animation-duration: 43s; }

.auth-facts { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; max-width: 44ch; }
.auth-facts li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 6px 12px;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--glass-quiet); color: var(--ink-2); font-size: 13px; line-height: 1.7;
}
.auth-facts b { grid-column: 2; color: var(--ink); font-size: 14px; font-weight: 640; }
.auth-facts li > :last-child { grid-column: 2; }
.auth-fact-mark { grid-row: 1 / span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.auth-help { max-width: 46ch; }
.auth-help .faq-body p b { color: var(--ink); }

/* ── 表单面板 ────────────────────────────────────────────────────── */
.auth-surface .auth-panel { margin: 0; padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px) 22px; border-radius: var(--r-xl); }
.auth-panel-heading { display: flex; align-items: center; gap: 14px; }
.auth-panel-symbol { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); }
.auth-panel-symbol .auth-icon { width: 23px; height: 23px; }
.auth-surface .auth-panel h2 { margin: 0 0 3px; font-size: 25px; font-weight: 700; letter-spacing: -.025em; }
.auth-panel-heading p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; }

.auth-feedback-space { min-height: 32px; margin: 12px 0 10px; }
.auth-form[data-mode="login"] .auth-feedback-space, .auth-form[data-mode="admin"] .auth-feedback-space { min-height: 18px; margin: 10px 0 8px; }
.auth-surface #auth-feedback { margin: 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.auth-surface #auth-feedback.is-visible {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
  border: 1px solid #a52a3b40; border-radius: var(--r-xs); background: var(--danger-soft); color: var(--danger);
}
.auth-surface #auth-feedback p { margin: 0; }
.auth-feedback__icon { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-top: 2px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1; }

.auth-fields { display: grid; gap: 14px; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 6px; }
.auth-surface .auth-field label { margin: 0; font-size: 14px; font-weight: 620; }
.auth-input-wrap { position: relative; }
.auth-surface .auth-input-wrap input {
  display: block; width: 100%; height: 50px; margin: 0; padding: 12px 14px 12px 44px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--glass-strong); color: var(--ink); font-size: 15px; line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.auth-surface .auth-input-wrap input::placeholder { color: var(--ink-3); }
.auth-surface .auth-input-wrap input:hover { border-color: var(--ink-3); }
.auth-surface .auth-input-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-surface .auth-input-wrap input[aria-invalid="true"] { border-color: var(--danger); }
.auth-surface .auth-input-wrap input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.auth-surface .auth-input-wrap input[data-state="valid"] { border-color: #1a6a5166; }
.auth-input-icon { position: absolute; z-index: 1; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; transition: color .16s ease; }
.auth-input-wrap:focus-within .auth-input-icon { color: var(--accent); }
.auth-surface .auth-input-wrap--password input { padding-right: 50px; }
.auth-surface .auth-password-toggle {
  position: absolute; right: 3px; top: 50%; width: 44px; height: 44px; min-height: 0; padding: 0;
  transform: translateY(-50%); border: 0; border-radius: var(--r-xs); background: none; color: var(--ink-3); box-shadow: none;
}
.auth-surface .auth-password-toggle::after { display: none; }
.auth-surface .auth-password-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.auth-surface .auth-password-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.auth-field-feedback { min-height: 19px; margin: 6px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.auth-field-feedback[data-state="invalid"] { color: var(--danger); }
.auth-field-feedback[data-state="valid"] { color: var(--ok); }
.auth-caps-lock { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); font-size: 11.5px; line-height: 1.4; }
.auth-caps-lock .auth-icon { width: 13px; height: 13px; }
.auth-risk-slot { min-width: 0; }

/* ── 验证挑战（图形验证码 / Turnstile） ──────────────────────────── */
.auth-surface .auth-challenge { min-width: 0; margin: 16px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
.auth-challenge-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.auth-surface .auth-challenge-heading h3, .auth-surface .auth-challenge-heading label { margin: 0; font-size: 13.5px; font-weight: 620; }
.auth-challenge-context { color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.auth-surface .auth-turnstile-frame { min-height: 65px; width: 100%; max-width: 100%; border-radius: var(--r-xs); background: #ffffff8a; }
.auth-turnstile-frame > div { max-width: 100%; }
.auth-verification-feedback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 26px; margin-top: 6px; }
.auth-surface .turnstile-status { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.auth-surface .turnstile-status[data-state="error"], .auth-surface .turnstile-status[data-state="expired"], .auth-surface .turnstile-status[data-state="timeout"] { color: var(--danger); }
.auth-surface .turnstile-status[data-state="verified"] { color: var(--ok); }
.auth-form[data-verification-state="verified"] .auth-challenge-context { display: none; }
.auth-surface .auth-inline-action { min-height: 32px; padding: 2px 0; gap: 5px; border: 0; background: none; box-shadow: none; color: var(--accent); font-size: 12px; font-weight: 620; }
.auth-surface .auth-inline-action::after { display: none; }
.auth-surface .auth-inline-action:hover { background: none; color: var(--accent-hot); text-decoration: underline; text-underline-offset: 3px; }
.auth-inline-action .auth-icon { width: 14px; height: 14px; }
.auth-no-script { margin: 8px 0 0; padding: 10px 12px; border: 1px solid #7f562040; border-radius: var(--r-xs); background: #7f562012; color: var(--amber); font-size: 12px; line-height: 1.7; }
.auth-captcha-row { display: flex; align-items: center; gap: 12px; margin-bottom: 11px; }
.auth-captcha-image-frame { flex: 1; min-width: 0; display: flex; align-items: center; height: 76px; border: 1px solid var(--line); border-radius: var(--r-xs); background: #ffffffa6; overflow: hidden; }
.auth-surface .auth-captcha-row .captcha-image { width: 200px; max-width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; }
.auth-surface .auth-captcha-refresh { flex: none; min-width: 74px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--glass-quiet); color: var(--ink-2); box-shadow: none; font-size: 13px; }
.auth-surface .auth-captcha-refresh:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.auth-surface .auth-captcha-input { height: 46px; margin: 0; }
.auth-risk-blocked { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; padding: 13px 14px; border: 1px solid #7f562040; border-radius: var(--r-sm); background: #7f562012; color: var(--amber); }
.auth-risk-symbol { flex: none; padding-top: 2px; }
.auth-risk-copy { flex: 1; min-width: 0; }
.auth-risk-copy h3 { margin: 0 0 4px; font-size: 13.5px; }
.auth-risk-copy p { margin: 0; font-size: 12.5px; line-height: 1.7; }
.auth-risk-copy .auth-inline-action { color: inherit; }

/* ── 提交与页脚 ──────────────────────────────────────────────────── */
.auth-surface .auth-submit { width: 100%; min-height: 50px; margin-top: 20px; font-size: 15px; }
.auth-submit-arrow { width: 17px; height: 17px; transition: transform .25s cubic-bezier(.2,.8,.3,1); }
.auth-surface .auth-submit:hover:not(:disabled) .auth-submit-arrow { transform: translateX(3px); }
.auth-form[data-busy="true"] .auth-submit-arrow { display: none; }
.auth-submit-spinner { width: 18px; height: 18px; animation: auth-submit-spin 800ms linear infinite; }
@keyframes auth-submit-spin { to { transform: rotate(360deg); } }
.auth-panel-footer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-panel-footer p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.7; text-align: center; }
.auth-panel-footer a { font-weight: 620; }
.auth-recovery { margin-top: 4px !important; font-size: 12.5px !important; }
.auth-recovery a { color: var(--ink-3); font-weight: 500; text-decoration: underline; }
.auth-recovery a:hover { color: var(--accent); }
.auth-admin-note { display: flex; align-items: center; justify-content: center; gap: 7px; }
.auth-admin-note .auth-icon { width: 15px; height: 15px; }

/* ── 响应式 ──────────────────────────────────────────────────────── */
/* 中间档：笔记本高度上只收紧留白与主体尺寸，不删任何说明。 */
@media (min-width: 981px) and (max-height: 940px) {
  .auth-orb { width: min(250px, 34vmin); margin-block: 0; }
  .auth-story { gap: 14px; }
  .auth-title { font-size: clamp(32px, 3vw, 44px); }
  .auth-story-lead { line-height: 1.75; }
  .auth-facts li { padding: 10px 14px; }
  .auth-surface .shell { padding-bottom: 26px; }
}
@media (min-width: 981px) and (max-height: 820px) {
  .auth-orb { width: min(230px, 34vmin); margin-block: 0; }
  .auth-facts li { padding: 10px 13px; }
  /* 注册页的三点说明比装饰重要：矮屏优先保证它和表单同屏。 */
  .auth-page:has(.auth-form[data-mode="register"]) .auth-orb { display: none; }
  .auth-title { font-size: clamp(32px, 3vw, 44px); }
  .auth-story { gap: 13px; }
  .auth-surface .auth-panel { padding-top: 24px; }
  .auth-feedback-space { min-height: 26px; margin: 9px 0 8px; }
  .auth-fields { gap: 11px; }
  .auth-surface .auth-submit { margin-top: 16px; }
}
@media (max-width: 980px) {
  .auth-surface .shell { align-items: flex-start; }
  .auth-page { max-width: 560px; grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .auth-story { order: 2; gap: 16px; }
  .auth-panel-wrap { order: 1; }
  .auth-story-copy { display: none; }
  .auth-orb { display: none; }
  .auth-facts { max-width: none; }
  .auth-help { max-width: none; }
}
@media (max-width: 520px) {
  .auth-surface .auth-panel { padding: 22px 16px 18px; border-radius: var(--r-lg); }
  .auth-surface .auth-panel h2 { font-size: 22px; }
  .auth-panel-symbol { width: 42px; height: 42px; border-radius: 13px; }
  .auth-surface .auth-input-wrap input { height: 50px; font-size: 16px; }
  .auth-facts li { grid-template-columns: 26px minmax(0, 1fr); gap: 5px 10px; padding: 11px 13px; }
  .auth-fact-mark { width: 26px; height: 26px; border-radius: 9px; }
}
@media (max-width: 380px) {
  /* 360px 视口减去 15px 滚动条后面板宽 321px：保持 Cloudflare 组件不被压缩。 */
  .auth-surface .auth-panel { padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-submit-spinner, .auth-orb .orbit .runner, .auth-orb .core-caustics { animation: none; }
  .auth-surface .auth-input-wrap input, .auth-submit-arrow { transition: none; }
}