/* ============================================================
   Auth Flow 增强样式（B4 OTP 完形 + B5 Google fallback）
   prefix: 复用 auth- 分区既有前缀；新增态类 otp-shake / otp-cascade /
   otp-success / auth-google-fallback。
   styles.css 冻结令（D§3.8 步骤 0）下的新样式落点；auth 存量分区仍在
   styles.css，s06「D 阶段 2 首轮触碰即迁」时向本文件收编。
   颜色/动效一律引用 token（T5：本文件不定义 --tm-*）。
   ============================================================ */

/* ---- B4 失败就地反馈：红框（styles.css .error 已有）+ 震动 ----
   复用 styles.css 既有 @keyframes auth-shake（级联全文档可见） */
.auth-otp-container.otp-shake .auth-otp-display {
  animation: auth-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ---- B4 粘贴波浪填充（记忆点预算制两高光之一，§2.2-3）---- */
.auth-otp-container.otp-cascade .auth-otp-slot.filled {
  animation: otp-slot-pop var(--tm-dur-normal, 250ms) var(--tm-ease-out, ease-out) both;
}
.auth-otp-container.otp-cascade .auth-otp-slot:nth-child(1) { animation-delay: 0ms; }
.auth-otp-container.otp-cascade .auth-otp-slot:nth-child(2) { animation-delay: 40ms; }
.auth-otp-container.otp-cascade .auth-otp-slot:nth-child(3) { animation-delay: 80ms; }
.auth-otp-container.otp-cascade .auth-otp-slot:nth-child(4) { animation-delay: 120ms; }
.auth-otp-container.otp-cascade .auth-otp-slot:nth-child(5) { animation-delay: 160ms; }
.auth-otp-container.otp-cascade .auth-otp-slot:nth-child(6) { animation-delay: 200ms; }

@keyframes otp-slot-pop {
  from { transform: scale(0.85); }
  60%  { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* ---- B4 身份时刻：verify 成功 → slots 集体转绿 + 按钮成功态 ----
   400ms 定格（accountFlow 侧节奏），收面板前的"确认感"而非"闪切" */
.auth-otp-container.otp-success .auth-otp-slot {
  border-color: var(--tm-status-success, #10b981);
  transition: border-color var(--tm-dur-fast, 150ms) var(--tm-ease-out, ease-out);
}
.auth-otp-container.otp-success .auth-otp-char {
  color: var(--tm-status-success, #10b981);
}
.auth-otp-submit-btn.success,
.auth-panel-btn.success {
  background: var(--tm-status-success, #10b981) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ---- B5 Google 弹窗被拦 fallback ---- */
.auth-google-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tm-space-2, 8px);
  margin: var(--tm-space-3, 12px) 0 var(--tm-space-1, 4px);
}
.auth-google-fallback .auth-panel-muted {
  font-size: var(--tm-text-sm, 12px);
  text-align: center;
}

/* ---- reduced-motion（组件轨；system.css 全局轨双保险）---- */
@media (prefers-reduced-motion: reduce) {
  .auth-otp-container.otp-shake .auth-otp-display,
  .auth-otp-container.otp-cascade .auth-otp-slot.filled {
    animation: none;
  }
}

/* ---- B10（s06）：focused 步 inline message 提类（原内联 style） ---- */
.auth-centered-subtitle {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---- s06 打磨（s04 传递候选）：mode-centered 登录面底层杂讯遮蔽 ----
   panel.mode-centered 时 overlay 只有 0.12 轻遮罩，欢迎面板文字透出视觉杂。
   毛玻璃遮蔽（F-M1 玻璃体系）替代闷实底；无 backdrop-filter 的旧内核退实底。
   （overlay 无 centered 态类，用 :not(.mode-full) 表达 centered 分支） */
.auth-panel-overlay:not(.mode-full) {
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
@supports not ((backdrop-filter: blur(1px))) {
  .auth-panel-overlay:not(.mode-full) {
    background: var(--bg-primary, #f8fafc);
  }
}