/*
 * 白鹿通行证 · 共享交互组件（登录 / 注册 / 找回 / 验证 / 已登录页共用）
 *  - 内联 SVG 图标（替代 Font Awesome CDN）
 *  - 按钮加载 / 发送中 / 已发送 状态与纸飞机动效
 *  - 验证页信封动效、验证码输入、重发倒计时环
 *  - 移动端：输入框 16px 防 iOS 聚焦缩放、44px 触控热区、安全区
 *  - prefers-reduced-motion 下关闭位移类动画
 */
:root {
    --au-brand: #2563eb;
    --au-brand-600: #1d4ed8;
    --au-brand-700: #1e40af;
    --au-brand-50: #eff6ff;
    --au-brand-100: #dbeafe;
    --au-success: #16a34a;
    --au-danger: #dc2626;
    --au-ink: #0f172a;
    --au-ink-2: #475569;
    --au-ink-3: #64748b;
    --au-line: #e2e8f0;
    --au-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --au-ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);
}

/* hidden 属性必须胜过组件自身的 display（如 .au-btn 的 flex） */
[hidden] { display: none !important; }

/* ── 图标 ── */
.au-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.125em;
}

/* ── 可访问性：键盘焦点可见，鼠标点击不出框 ── */
.auth-shell :focus-visible,
.verify-card :focus-visible,
.page-logged-in :focus-visible {
    outline: 2px solid var(--au-brand);
    outline-offset: 2px;
}
.auth-shell .form-input:focus-visible,
.verify-card .form-input:focus-visible,
.verify-card .code-input:focus-visible {
    outline: none;
}
.au-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── 按钮内容结构：[图标][文字]，状态切换不跳动 ── */
.au-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.submit-btn.au-btn { display: flex; width: 100%; }
.au-btn:active:not(:disabled) { transform: scale(0.985); }
.au-btn:disabled { cursor: default; }
.au-btn__icon {
    position: relative;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.au-btn__icon:empty { display: none; }
.au-btn__label { position: relative; white-space: nowrap; }

/* 次要按钮（描边） */
.au-btn--ghost {
    background: #fff !important;
    color: var(--au-brand) !important;
    border: 1px solid var(--au-brand) !important;
}
.au-btn--ghost:hover:not(:disabled) { background: var(--au-brand-50) !important; }

/* 加载：旋转环 */
.au-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    opacity: 0.9;
    animation: auSpin 0.7s linear infinite;
}
@keyframes auSpin { to { transform: rotate(360deg); } }

/* 发送中：纸飞机轻微浮动 + 按钮底部流光 */
.au-btn.is-sending .au-btn__icon svg { animation: auPlaneBob 1.1s ease-in-out infinite; }
.au-btn.is-sending::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    animation: auSweep 1.2s ease-in-out infinite;
}
.au-btn--ghost.is-sending::after { background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.55), transparent); }
@keyframes auPlaneBob {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(2px, -2px) rotate(-6deg); }
}
@keyframes auSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

/* 已发送：纸飞机飞出，✓ 画出，按钮转为成功色 */
.au-btn.is-sent {
    background: var(--au-success) !important;
    border-color: var(--au-success) !important;
    color: #fff !important;
}
.au-btn.is-sent .au-btn__icon .au-plane { animation: auPlaneFly 0.55s var(--au-ease-in) forwards; }
.au-btn.is-sent .au-btn__icon .au-check {
    position: absolute;
    inset: 0;
    margin: auto;
}
.au-check path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: auDraw 0.36s 0.28s var(--au-ease-out) forwards;
}
@keyframes auPlaneFly {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    30% { transform: translate(-3px, 2px) rotate(-8deg) scale(1); opacity: 1; }
    100% { transform: translate(46px, -30px) rotate(-18deg) scale(0.6); opacity: 0; }
}
@keyframes auDraw { to { stroke-dashoffset: 0; } }

/* ── 密码显示切换（两枚图标，CSS 切换） ── */
.password-toggle.au-pw-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    right: 4px !important;
    padding: 0;
    border-radius: 8px;
    font-size: 18px;
    color: #94a3b8;
}
.password-toggle.au-pw-toggle:hover { color: var(--au-ink-3); }
.au-pw-toggle .au-icon--off { display: none; }
.au-pw-toggle.is-visible .au-icon--on { display: none; }
.au-pw-toggle.is-visible .au-icon--off { display: inline-block; }
.au-has-toggle { padding-right: 48px !important; }

/* ── 步骤切换：淡入上移 ── */
.au-enter { animation: auEnter 0.32s var(--au-ease-out) both; }
@keyframes auEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
.au-reveal { animation: auReveal 0.3s var(--au-ease-out) both; }
@keyframes auReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* 字段错误：出现时轻微抖动提醒 */
.error-message.show { animation: auReveal 0.2s ease both; }
.form-input[aria-invalid="true"] {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

/* 提示条（成功 / 普通） */
.au-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #1e3a8a;
    background: var(--au-brand-50);
    border: 1px solid #bfdbfe;
}
.au-note .au-icon { margin-top: 2px; font-size: 15px; color: var(--au-brand); }
.au-note--success { color: #14532d; background: #f0fdf4; border-color: #bbf7d0; }
.au-note--success .au-icon { color: var(--au-success); }

.au-divider-or { margin: 20px 0 !important; }
.signup-link a .au-icon { margin-right: 4px; vertical-align: -0.15em; }

/* ── 发送状态卡（注册 / 找回：滑块通过后） ── */
.au-send {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px 8px 6px;
    text-align: center;
}
.au-send__stage {
    position: relative;
    width: 96px;
    height: 64px;
}
.au-send__trail {
    position: absolute;
    left: 6px;
    right: 18px;
    top: 50%;
    height: 2px;
    background-image: linear-gradient(90deg, #bfdbfe 50%, transparent 0);
    background-size: 10px 2px;
    animation: auTrail 0.6s linear infinite;
    opacity: 0.9;
}
@keyframes auTrail { to { background-position: -10px 0; } }
.au-send__plane {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    color: var(--au-brand);
    animation: auPlaneBob 1.1s ease-in-out infinite;
}
.au-send__done {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--au-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transform: scale(0);
    opacity: 0;
}
.au-send__text { font-size: 14px; color: var(--au-ink-2); line-height: 1.6; }
.au-send__text strong { color: var(--au-ink); font-weight: 600; }
.au-send.is-sent .au-send__trail { animation: none; opacity: 0; transition: opacity 0.2s; }
.au-send.is-sent .au-send__plane { animation: auPlaneFly 0.55s var(--au-ease-in) forwards; }
.au-send.is-sent .au-send__done { animation: auPop 0.42s 0.32s var(--au-ease-out) forwards; }
.au-send.is-error .au-send__trail,
.au-send.is-error .au-send__plane { animation: none; opacity: 0.35; }
@keyframes auPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ── 验证页：信封动效 ── */
.au-mail {
    position: relative;
    width: 104px;
    height: 88px;
    margin: 0 auto 14px;
    animation: auFloat 3.6s 1.6s ease-in-out infinite;
}
.au-mail svg { display: block; width: 100%; height: 100%; overflow: visible; }
.au-mail__body { fill: #c7dcfb; }
.au-mail__letter {
    animation: auLetterIn 0.62s 0.1s var(--au-ease-out) both;
}
.au-mail__paper { fill: #fff; stroke: #bfdbfe; stroke-width: 1.5; }
.au-mail__line { stroke: #cbd5e1; stroke-width: 3; stroke-linecap: round; }
.au-mail__line--brand { stroke: var(--au-brand); }
.au-mail__pocket { fill: #e3eeff; }
.au-mail__pocket-edge { fill: none; stroke: #bcd3f8; stroke-width: 1.5; stroke-linejoin: round; }
/* 打开的信封盖在信纸后面：信纸从上方落入信封，露出一截，随后 ✓ 徽标弹出 */
.au-mail__flap-open { fill: #9fc2f7; }
.au-mail__badge {
    position: absolute;
    right: 2px;
    top: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--au-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(37, 99, 235, 0.28);
    transform: scale(0);
    animation: auPop 0.42s 0.66s var(--au-ease-out) forwards;
}
.au-mail__badge .au-check path { animation-delay: 0.9s; }
@keyframes auLetterIn {
    0% { transform: translateY(-30px); opacity: 0; }
    30% { opacity: 1; }
    80% { transform: translateY(2px); }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes auFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
/* 验证成功：徽标变绿 */
.au-mail.is-success .au-mail__badge { background: var(--au-success); box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(22, 163, 74, 0.3); }
/* 会话失效：徽标变灰 */
.au-mail.is-expired { animation: none; }
.au-mail.is-expired .au-mail__badge { background: #94a3b8; box-shadow: 0 0 0 4px #fff; }

.verify-card .logo-container.au-verify-head { margin-bottom: 18px; }
.verify-card .au-verify-head .logo-title { font-size: 22px; }
.au-verify-sub {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--au-ink-2);
}
.au-verify-sub strong { color: var(--au-brand); font-weight: 600; word-break: break-all; }
.au-verify-meta { margin-top: 2px; font-size: 12.5px; color: #94a3b8; }

/* 验证码输入：按容器宽度自适应，6 格在 320px 屏也不溢出 */
.verify-card .code-input-container {
    gap: clamp(6px, 2.2vw, 10px);
    margin: 22px 0 6px;
    padding: 0;
}
.verify-card .code-input {
    width: clamp(40px, 12.5vw, 50px);
    height: clamp(48px, 14.5vw, 58px);
    font-size: clamp(22px, 6.4vw, 28px);
    font-variant-numeric: tabular-nums;
    border-radius: 12px;
}
/* 首屏依次浮入（只在页面打开时播放一次，脚本随后移除 au-stagger） */
.verify-card .au-stagger .code-input { animation: auEnter 0.36s var(--au-ease-out) both; }
.verify-card .au-stagger .code-input:nth-child(1) { animation-delay: 0.05s; }
.verify-card .au-stagger .code-input:nth-child(2) { animation-delay: 0.09s; }
.verify-card .au-stagger .code-input:nth-child(3) { animation-delay: 0.13s; }
.verify-card .au-stagger .code-input:nth-child(4) { animation-delay: 0.17s; }
.verify-card .au-stagger .code-input:nth-child(5) { animation-delay: 0.21s; }
.verify-card .au-stagger .code-input:nth-child(6) { animation-delay: 0.25s; }
.verify-card .code-input.ci-filled { border-color: #93c5fd; background: #fff; }
.verify-card .code-input.ci-error {
    border-color: #ef4444;
    background: #fef2f2;
    animation: ciShake 0.35s ease;
}
.verify-card .code-input.ci-success {
    border-color: var(--au-success);
    background: #f0fdf4;
    color: #15803d;
    animation: auCodeOk 0.4s var(--au-ease-out) both;
}
.verify-card .code-input.ci-success:nth-child(2) { animation-delay: 0.04s; }
.verify-card .code-input.ci-success:nth-child(3) { animation-delay: 0.08s; }
.verify-card .code-input.ci-success:nth-child(4) { animation-delay: 0.12s; }
.verify-card .code-input.ci-success:nth-child(5) { animation-delay: 0.16s; }
.verify-card .code-input.ci-success:nth-child(6) { animation-delay: 0.2s; }
@keyframes auCodeOk {
    0% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}
.code-input-container.is-busy .code-input { opacity: 0.7; }

.au-code-status {
    min-height: 22px;
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--au-ink-3);
}
.au-code-status.is-success { color: var(--au-success); font-weight: 600; }

/* 重发：倒计时环 */
.resend-section .resend-btn.au-btn {
    display: inline-flex;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 10px;
    gap: 8px;
}
.au-ring { width: 18px; height: 18px; transform: rotate(-90deg); }
.au-ring circle { fill: none; stroke-width: 2.5; }
.au-ring__track { stroke: #e2e8f0; }
.au-ring__bar {
    stroke: var(--au-brand);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
.resend-btn:not(:disabled) .au-ring { display: none; }

/* 新密码：强度提示 */
.au-pw-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 4px 0 14px;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: #94a3b8;
}
.au-pw-rules li { display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s; }
.au-pw-rules li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background-color 0.2s, transform 0.2s;
}
.au-pw-rules li.is-ok { color: var(--au-success); }
.au-pw-rules li.is-ok::before { background: var(--au-success); transform: scale(1.25); }

/* 成功面板（重置密码完成） */
.au-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 8px 0 4px;
}
.au-done__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--au-success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    animation: auPop 0.42s var(--au-ease-out) both;
}
.au-done__title { font-size: 18px; font-weight: 700; color: var(--au-ink); }
.au-done__text { font-size: 14px; color: var(--au-ink-2); }

/* ── 移动端 ── */
@media (max-width: 480px) {
    /* iOS Safari：输入框字号 <16px 会在聚焦时自动放大页面 */
    .auth-shell .form-input,
    .verify-card .form-input { font-size: 16px; }
    .auth-shell .submit-btn,
    .verify-card .submit-btn { min-height: 48px; font-size: 15px; }
    .auth-shell .signup-link a,
    .auth-shell .footer-text a,
    .verify-card .signup-link a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }
    .au-mail { width: 92px; height: 78px; }
    .verify-card .au-verify-head .logo-title { font-size: 21px; }
}
@media (max-width: 360px) {
    .auth-shell .login-card,
    .verify-card { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (hover: none) {
    .au-btn--ghost:hover:not(:disabled) { background: #fff !important; }
}

/* ── 减少动态效果 ── */
@media (prefers-reduced-motion: reduce) {
    .au-enter,
    .au-reveal,
    .error-message.show,
    .au-mail,
    .au-mail__letter,
    .verify-card .code-input,
    .verify-card .code-input.ci-success,
    .au-btn.is-sending .au-btn__icon svg,
    .au-btn.is-sending::after,
    .au-send__trail,
    .au-send__plane {
        animation: none !important;
    }
    .au-mail__badge,
    .au-send.is-sent .au-send__done,
    .au-done__icon { animation: none !important; transform: none; opacity: 1; }
    .au-check path { animation: none !important; stroke-dashoffset: 0; }
    .au-btn.is-sent .au-btn__icon .au-plane,
    .au-send.is-sent .au-send__plane { animation: none !important; opacity: 0; }
    .au-ring__bar { transition: none; }
}