/* ============================================================
 * 登录 / 注册弹窗组件 —— 动画角色版（商城适配 [136]）
 * 来源 login-register-kit, 已改造:
 *   - 主题色改为商城品牌紫; 字体去掉 Google Inter 用系统字体
 *   - 图标全部内嵌 SVG(见 auth-kit.js), 这里补 SVG 尺寸样式
 *   - 作用域 .auth-kit-scope, 不污染宿主页面
 * ============================================================ */

:root {
    /* 商城品牌紫(与 style.css 的 #667eea→#764ba2 一致) */
    --auth-primary:      #667eea;
    --auth-primary-2:    #764ba2;
    --auth-primary-rgb:  102, 126, 234;
    --auth-stage-1:      #667eea;
    --auth-stage-2:      #764ba2;
    --auth-stage-3:      #5b3a8c;

    --auth-text-dark:    #1e293b;
    --auth-text-muted:   #94a3b8;
    --auth-border:       #e2e8f0;
    /* 系统字体(不加载任何外部 webfont, 保证打开速度) */
    --auth-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
}

/* 作用域内最小化重置 */
.auth-kit-scope * { margin: 0; padding: 0; box-sizing: border-box; }
/* [136b] 用 background-color:transparent 而非 background:none —— 后者是简写会把
   background-image 一起清成 none, 且本选择器(0,1,1)优先级高于 .login-submit(0,1,0),
   会把提交按钮的紫色渐变(背景图)覆盖掉→白底白字。只清背景色则不动渐变。 */
.auth-kit-scope button { cursor: pointer; border: none; background-color: transparent; font-family: inherit; }
.auth-kit-scope input { font-family: inherit; outline: none; }

/* 内嵌 SVG 图标统一尺寸(随父级 color 变色) */
.auth-kit-scope svg { display: block; }

/* 遮罩层
   [139] 类名从 .modal-overlay 改为独有的 .auth-kit-overlay:
   商城 style.css:1793 已有同名 .modal-overlay(默认 opacity:0/visibility:hidden,
   加 .active 才显形), 撞名导致登录弹窗 display:flex 了却永远隐身("点了没反应"的真凶)。
   z-index 提到 10010: 压过进店公告弹窗(#welcome-popup z-index:10000)。 */
.auth-kit-overlay {
    position: fixed; inset: 0; z-index: 10010;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45);
    font-family: var(--auth-font);
}
.login-cover {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: authFadeIn .26s ease forwards;
    padding: 16px;
}

/* 主面板 */
.login-pane {
    position: relative; display: grid; grid-template-columns: 1.05fr 1fr;
    width: 100%; max-width: 980px; height: 640px; max-height: calc(100vh - 32px);
    background: #fff; border-radius: 24px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.45), 0 10px 24px rgba(15, 23, 42, 0.18);
    animation: authPopIn .42s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
/* [144] 出错抖动已移除: 爷爷要求稳定交互, 红色错误提示已足够明显 */

.login-close {
    position: absolute; top: 18px; right: 18px; z-index: 50;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.4);
    color: #475569; box-shadow: 0 4px 12px rgba(15,23,42,0.15);
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s, background .2s, color .2s;
}
.login-close svg { width: 18px; height: 18px; }
.login-close:hover { background: #fff; color: #1e293b; transform: rotate(90deg); }

/* 左侧舞台 */
.login-stage {
    position: relative;
    background: linear-gradient(135deg, var(--auth-stage-1) 0%, var(--auth-stage-2) 55%, var(--auth-stage-3) 100%);
    color: #fff; overflow: hidden;
    display: flex; flex-direction: column;
}
.stage-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
    background-image:
      linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px);
    background-size: 24px 24px;
}
.stage-glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.stage-glow-1 { top: 20%; right: 12%; width: 240px; height: 240px; background: rgba(255,255,255,0.18); }
.stage-glow-2 { bottom: 8%; left: 8%; width: 320px; height: 320px; background: rgba(255,255,255,0.10); }

.stage-brand {
    position: relative; z-index: 5;
    padding: 32px 36px 0;
    display: flex; align-items: center; gap: 12px;
    font-size: 18px; font-weight: 700; letter-spacing: 1px;
}
.stage-brand-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px); color: #fff;
}
.stage-brand-icon svg { width: 18px; height: 18px; }

.stage-floor {
    position: relative; z-index: 5; flex: 1;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0 16px;
}
.stage-frame { position: relative; width: 460px; height: 360px; transform-origin: bottom center; }
.stage-foot {
    position: relative; z-index: 5;
    padding: 14px 36px 24px; font-size: 12px; color: rgba(255,255,255,0.65); letter-spacing: 0.6px;
}

/* 角色(配色独立于主题, 保留原吉祥物色) */
.char { position: absolute; bottom: 0; transform-origin: bottom center;
    transition: transform .7s ease-in-out, height .7s ease-in-out; }
.char-face { position: absolute; display: flex;
    transition: top .7s ease-in-out, left .7s ease-in-out, gap .7s ease-in-out; }

.char-purple { left: 60px; width: 150px; height: 340px; background: #6C3FF5; border-radius: 8px 8px 0 0; z-index: 1; }
.char-purple .char-face { gap: 22px; left: 38px; top: 36px; }
.char-purple .eye { width: 16px; height: 16px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; overflow: hidden; transition: height .15s ease; }
.char-purple .eye .eyeball { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.char-purple .eye .pupil { width: 6px; height: 6px; background: #2D2D2D; border-radius: 50%; transition: transform .12s ease-out; }

.char-black { left: 200px; width: 100px; height: 260px; background: #2D2D2D; border-radius: 6px 6px 0 0; z-index: 2; }
.char-black .char-face { gap: 18px; left: 22px; top: 28px; }
.char-black .eye { width: 14px; height: 14px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; overflow: hidden; transition: height .15s ease; }
.char-black .eye .eyeball { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.char-black .eye .pupil { width: 5px; height: 5px; background: #2D2D2D; border-radius: 50%; transition: transform .12s ease-out; }

.char-orange { left: 0; width: 200px; height: 170px; background: #FF9B6B; border-radius: 100px 100px 0 0; z-index: 3; }
.char-orange .char-face { gap: 22px; left: 70px; top: 76px; }
.char-orange .pupil-only { display: flex; align-items: center; justify-content: center; }
.char-orange .pupil-only .pupil { width: 11px; height: 11px; background: #2D2D2D; border-radius: 50%; transition: transform .12s ease-out; }

.char-yellow { left: 260px; width: 120px; height: 195px; background: #E8D754; border-radius: 60px 60px 0 0; z-index: 4; }
.char-yellow .char-face { gap: 18px; left: 44px; top: 34px; }
.char-yellow .pupil-only { display: flex; align-items: center; justify-content: center; }
.char-yellow .pupil-only .pupil { width: 11px; height: 11px; background: #2D2D2D; border-radius: 50%; transition: transform .12s ease-out; }
.char-yellow .char-mouth { position: absolute; left: 34px; top: 76px; width: 64px; height: 4px;
    background: #2D2D2D; border-radius: 4px; transition: top .2s ease-out, left .2s ease-out; }

.eye.is-blinking { height: 2px !important; }
.eye.is-blinking .eyeball { display: none; }

/* 右侧表单 */
.login-form-wrap { background: #fff; display: flex; align-items: center; justify-content: center; padding: 40px 36px; }
.login-form-inner { width: 100%; max-width: 380px; }

.login-tab-switch { position: relative; background: #f1f5f9; border-radius: 12px; padding: 4px; display: flex; margin-bottom: 28px; }
.login-tab-indicator {
    position: absolute; top: 4px; left: 4px;
    width: calc(50% - 4px); height: calc(100% - 8px);
    background: #fff; border-radius: 9px;
    box-shadow: 0 2px 8px rgba(var(--auth-primary-rgb), 0.18);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.login-tab-switch[data-mode="register"] .login-tab-indicator { transform: translateX(100%); }
.login-tab-btn { flex: 1; padding: 10px 0; font-size: 14px; font-weight: 600;
    color: #94a3b8; background: transparent; border: none; cursor: pointer;
    transition: color .25s; z-index: 1; position: relative; }
.login-tab-btn.active { color: var(--auth-primary); }

.login-form-title { font-size: 24px; font-weight: 700; color: var(--auth-text-dark); margin: 0 0 6px; }
.login-form-sub  { font-size: 13px; color: #94a3b8; margin: 0 0 24px; }

.lf-field { position: relative; margin-top: 16px; padding-bottom: 8px; }
.lf-icon  { position: absolute; left: 3px; top: 11px; color: #94a3b8;
    width: 18px; height: 18px; transition: color .25s, transform .25s; }
.lf-icon svg { width: 16px; height: 16px; }
.lf-field input {
    width: 100%; padding: 10px 38px 10px 30px;
    background: transparent; border: none; border-bottom: 1.5px solid var(--auth-border);
    border-radius: 0; font-size: 14px; color: var(--auth-text-dark); outline: none;
}
.lf-field input::placeholder { color: #cbd5e1; transition: color .25s; }
.lf-line { position: absolute; bottom: 8px; left: 50%; width: 0; height: 2px;
    background: linear-gradient(90deg, var(--auth-primary), var(--auth-primary-2));
    transition: width .35s ease, left .35s ease; transform: translateX(-50%); }
.lf-field input:focus ~ .lf-line { width: 100%; }
.lf-field:focus-within .lf-icon { color: var(--auth-primary); transform: scale(1.05); }

.lf-pwd-toggle { position: absolute; right: 0; top: 6px; width: 32px; height: 32px; border-radius: 50%;
    color: #94a3b8; background: transparent; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: color .2s, background .2s; }
.lf-pwd-toggle svg { width: 16px; height: 16px; }
.lf-pwd-toggle:hover { color: var(--auth-primary); background: #f8fafc; }

/* [140] 邮箱验证码行(输入框 + 获取验证码按钮) */
.lf-field-row { display: flex; align-items: center; gap: 10px; }
.lf-field-row input { flex: 1; min-width: 0; padding: 10px 12px 10px 30px; }
.lf-field-row .btn-send-code {
    flex-shrink: 0; height: 40px; padding: 0 14px; min-width: 108px;
    font-size: 13px; font-weight: 600;
    background: linear-gradient(135deg, var(--auth-primary) 0%, var(--auth-primary-2) 100%);
    color: #fff; border: none; border-radius: 10px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(var(--auth-primary-rgb), 0.3);
    transition: transform .15s, box-shadow .25s, opacity .25s;
    white-space: nowrap;
}
.lf-field-row .btn-send-code:hover:not(:disabled) {
    transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--auth-primary-rgb), 0.4);
}
.lf-field-row .btn-send-code:disabled {
    background: #cbd5e1; cursor: not-allowed; opacity: 0.85; box-shadow: none;
}
.lf-field-row .lf-line { max-width: calc(100% - 128px); }
.lf-field-row:focus-within .lf-line { width: calc(100% - 128px); }

/* 提交按钮 */
.login-submit {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin-top: 28px; padding: 13px 24px;
    background: linear-gradient(135deg, var(--auth-primary) 0%, var(--auth-primary-2) 100%);
    color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 1px;
    border: none; border-radius: 12px; cursor: pointer;
    box-shadow: 0 8px 24px rgba(var(--auth-primary-rgb), 0.35);
    transition: transform .15s, box-shadow .25s;
}
.login-submit::before {
    content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg); transition: left .7s ease;
}
.login-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--auth-primary-rgb), 0.45); }
.login-submit:hover:not(:disabled)::before { left: 120%; }
.login-submit:active:not(:disabled) { transform: translateY(0); }
.login-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.auth-submit-text { display: inline-block; }
.auth-submit-arrow { display: inline-flex; transition: transform .25s; }
.auth-submit-arrow svg { width: 16px; height: 16px; }
.login-submit:hover:not(:disabled) .auth-submit-arrow { transform: translateX(4px); }

/* 错误 / 提示条 */
.auth-error { font-size: 13px; margin-top: 14px; text-align: center; padding: 10px 14px; border-radius: 10px; font-weight: 500;
    animation: authErrorFlash .3s ease; }

/* 动画 */
@keyframes authFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes authPopIn {
    0%   { opacity: 0; transform: scale(.85) translateY(20px); }
    60%  { opacity: 1; transform: scale(1.02) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* [144] @keyframes authShake 已移除 */
@keyframes authErrorFlash { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* 响应式: 窄屏隐藏左侧角色舞台 */
@media (max-width: 880px) {
    .login-pane { grid-template-columns: 1fr; height: auto; max-height: 92vh; }
    .login-stage { display: none; }
    .login-form-wrap { padding: 36px 24px; }
}

/* [141] 修改密码弹窗: 单列小卡片, 字段/按钮/报错全部复用登录弹窗既有样式 */
.pwd-pane {
    position: relative; width: 100%; max-width: 440px;
    max-height: calc(100vh - 32px); overflow-y: auto;
    background: #fff; border-radius: 24px; padding: 40px 36px 36px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.45), 0 10px 24px rgba(15, 23, 42, 0.18);
    animation: authPopIn .42s cubic-bezier(.34, 1.56, .64, 1) forwards;
    margin: 16px;
}
/* [144] .pwd-pane.shake 已移除 */
.pwd-email-tip { font-size: 13px; color: #94a3b8; margin: 0 0 10px; word-break: break-all; }
.pwd-email-tip b { color: var(--auth-primary); font-weight: 600; }

/* [142] 忘记密码入口链接(登录 tab 下方) + 找回密码弹窗内的返回登录链接 */
.auth-forgot-row {
    text-align: right;
    margin: 4px 0 12px;
    font-size: 13px;
    line-height: 1.5;
}
.auth-forgot-link {
    color: #94a3b8;
    cursor: pointer;
    text-decoration: none;
    transition: color .18s ease;
}
.auth-forgot-link:hover { color: var(--auth-primary); text-decoration: underline; }

/* [142] 找回密码弹窗内的三步切换段(display 由 JS 控制, 无需 CSS 干预) */
.forgot-step { animation: authErrorFlash .3s ease; }