/* ═══════════════════════════════════════════════════════════════
   AUTH.CSS — 统一认证组件（登录 / 注册 / 找回密码 / App 登录浮层共用）
   ---------------------------------------------------------------
   依赖 theme.css 的 token。四处共用同一套类，确保像素一致：
   - public/login.html / register.html / forgot-password.html
   - public/offline-assist.html 的 #hz-auth-gate（App 内登录浮层）
   ═══════════════════════════════════════════════════════════════ */

/* 居中容器（页面 + 浮层通用）。叠加安全区，App 顶部状态条不遮挡 */
.auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px));
}

/* 认证卡片 */
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-gold);
}
.auth-card--wide { max-width: 400px; }

/* App 内登录门禁浮层（#hz-auth-gate）：全屏固定覆盖，盖住录音界面 */
.auth-wrap--gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-deep);
}

/* 标题 / 副标题 */
.auth-title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--gold-lt);
  letter-spacing: .28em;
  text-align: center;
  margin: 0 0 6px;
}
.auth-sub {
  font-size: 12px;
  color: var(--ink-mut);
  text-align: center;
  letter-spacing: .14em;
  margin: 0 0 24px;
}

/* 邀请制提示条 */
.auth-banner {
  background: var(--gold-soft);
  border: 1px solid var(--border-gold);
  color: var(--ink-sec);
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.auth-banner strong { color: var(--gold-lt); }

/* 提示条（错误 / 成功），默认隐藏，.show 显示 */
.auth-msg { padding: 8px 12px; border-radius: 10px; font-size: 12px; line-height: 1.5; margin-bottom: 14px; display: none; }
.auth-msg.show { display: block; }
.auth-error   { background: var(--danger-soft);  border: 1px solid var(--ruby);    color: #f0a89f; }
.auth-success { background: var(--success-soft); border: 1px solid var(--success); color: #9fd8b8; }

/* 字段 */
.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block;
  font-size: 11px;
  color: var(--ink-sec);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.auth-input {
  width: 100%;
  background: var(--bg-deep);
  color: var(--ink-pri);
  border: 1px solid var(--line-strong);
  padding: 11px 13px;
  border-radius: var(--radius-input);
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease;
}
.auth-input::placeholder { color: var(--ink-mut); }
.auth-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.auth-hint { font-size: 11px; color: var(--ink-mut); margin-top: 5px; line-height: 1.5; }

/* 主按钮：pill + 金渐变 */
.auth-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dk));
  color: var(--accent-text);
  border: none;
  padding: 13px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  margin-top: 6px;
  font-family: inherit;
  transition: filter var(--dur-fast, 150ms) ease, transform var(--dur-fast, 150ms) ease, box-shadow var(--dur-fast, 150ms) ease;
}
.auth-btn:hover { filter: brightness(1.08); box-shadow: 0 6px 18px rgba(196,146,77,.30); }
.auth-btn:active { transform: scale(.98); }
.auth-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ghost 按钮（找回密码的"获取验证码"）：pill + 金边透明 */
.auth-ghost-btn {
  flex: 0 0 auto;
  background: var(--bg-elev);
  color: var(--gold-lt);
  border: 1px solid var(--border-gold);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background var(--dur-fast, 150ms) ease;
}
.auth-ghost-btn:hover:not(:disabled) { background: var(--bg-elev2); }
.auth-ghost-btn:disabled { opacity: .4; cursor: not-allowed; }

/* 验证码行 */
.auth-code-row { display: flex; gap: 8px; }
.auth-code-row .auth-input { flex: 1; }

/* 切换链接 */
.auth-alt { text-align: center; margin-top: 20px; font-size: 12px; color: var(--ink-mut); }
.auth-alt a { color: var(--gold-lt); text-decoration: none; margin-left: 6px; }
.auth-alt a:hover { color: var(--gold-lt); filter: brightness(1.15); }