/* ============================================================
   Sora视频生成平台 - 登录界面 UI/UX 优化
   基于 UI/UX Pro Max Skill 设计系统
   风格：Dark Glass Morphism (深色毛玻璃)
   版本：2.0 Dark
   日期：2026-01-22
   ============================================================ */

/* 引入现代SaaS字体 - Plus Jakarta Sans */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* ============================================================
   1. 颜色系统（深色配色）
   ============================================================ */
:root {
    /* 霓虹色系（与Admin统一） */
    --login-neon-purple: #667eea;
    --login-neon-pink: #764ba2;
    --login-neon-blue: #4facfe;

    /* CTA按钮 - 橙色突出（与主页统一） */
    --login-cta: #F97316;
    --login-cta-hover: #EA580C;

    /* 深色背景 */
    --login-bg-dark: #0a0f1a;
    --login-bg-card: rgba(50, 55, 85, 0.95);
    --login-bg-card-light: rgba(60, 65, 95, 0.95);
    --login-bg-input: rgba(20, 25, 40, 0.9);

    /* 文字颜色（深色主题） */
    --login-text: #ffffff;
    --login-text-light: #c0c0c0;
    --login-text-lighter: #a0a0a0;

    /* 边框（霓虹效果） */
    --login-border: rgba(102, 126, 234, 0.3);
    --login-border-focus: rgba(102, 126, 234, 0.6);

    /* 状态色 */
    --login-success: #4ef98f;
    --login-error: #ff6b7f;
    --login-warning: #ffa855;
}

/* ============================================================
   2. 全局字体优化
   ============================================================ */
.auth-section,
.auth-box,
.auth-box * {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ============================================================
   3. 登录容器优化（深色毛玻璃）
   ============================================================ */
.auth-section {
    background: transparent !important; /* 使用页面深色背景 */
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-box {
    background: linear-gradient(145deg,
        var(--login-bg-card-light),
        var(--login-bg-card)) !important; /* 深色毛玻璃 */
    border-radius: 16px !important;
    border: 1px solid var(--login-border) !important;
    padding: 3rem 2.5rem !important;
    max-width: 440px !important;
    width: 100% !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(102, 126, 234, 0.15) !important; /* 深色阴影 + 外发光 */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* 顶部霓虹装饰线 */
.auth-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--login-neon-purple),
        var(--login-neon-pink),
        var(--login-neon-blue)) !important;
    opacity: 0.8;
}

.auth-box:hover {
    border-color: var(--login-border-focus) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7),
                0 0 60px rgba(102, 126, 234, 0.25) !important;
    transform: translateY(-2px);
}

/* ============================================================
   4. 标题区域优化（深色）
   ============================================================ */
.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h2,
#authTitle {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--login-text) !important; /* 白色标题 */
    margin: 0 0 0.5rem 0 !important;
    letter-spacing: -0.5px;
    text-shadow: 0 0 20px rgba(102, 126, 234, 0.4) !important; /* 霓虹发光 */
}

.auth-subtitle,
#authSubtitle {
    font-size: 15px !important;
    color: var(--login-text-light) !important; /* 浅灰色副标题 */
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.5;
}

/* ============================================================
   5. 表单组件优化（深色）
   ============================================================ */
.form-group-fancy {
    margin-bottom: 1.25rem !important;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon i {
    position: absolute;
    left: 16px;
    color: var(--login-neon-purple) !important; /* 霓虹紫色图标 */
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
    transition: all 0.2s ease;
    filter: drop-shadow(0 0 6px rgba(102, 126, 234, 0.4));
}

.input-with-icon input {
    width: 100% !important;
    min-width: 100% !important;
    height: 48px !important; /* 符合触摸目标 44px+ */
    padding: 0 16px 0 48px !important;
    border: 2px solid var(--login-border) !important; /* 霓虹边框 */
    border-radius: 8px !important;
    background: var(--login-bg-input) !important; /* 深色半透明背景 */
    color: var(--login-text) !important; /* 白色文字 */
    font-size: 15px !important;
    font-weight: 400 !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.2s ease;
}

.input-with-icon input::placeholder {
    color: var(--login-text-lighter) !important; /* 灰色placeholder */
    font-weight: 400;
}

/* 焦点状态 - 霓虹高亮 */
.input-with-icon input:focus {
    outline: none !important;
    border-color: var(--login-border-focus) !important;
    background: rgba(25, 30, 45, 0.95) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15),
                0 0 20px rgba(102, 126, 234, 0.3) !important; /* 霓虹外发光 */
}

.input-with-icon input:focus + i,
.input-with-icon:focus-within i {
    color: var(--login-neon-blue) !important; /* 聚焦时图标变亮蓝 */
    filter: drop-shadow(0 0 10px rgba(79, 172, 254, 0.6));
}

/* 禁用状态 */
.input-with-icon input:disabled {
    background: rgba(30, 35, 50, 0.5) !important;
    cursor: not-allowed;
    opacity: 0.5;
    border-color: rgba(102, 126, 234, 0.15) !important;
}

/* ============================================================
   6. 提交按钮优化（保持橙色CTA）
   ============================================================ */
.btn-fancy-auth,
#authSubmitBtn {
    width: 100% !important;
    height: 48px !important;
    background: linear-gradient(135deg, var(--login-cta), var(--login-cta-hover)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 1.5rem !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4),
                0 0 20px rgba(249, 115, 22, 0.2) !important; /* 橙色发光 */
    transition: all 0.2s ease;
}

.btn-fancy-auth:hover,
#authSubmitBtn:hover {
    background: linear-gradient(135deg, var(--login-cta-hover), #d94e08) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(249, 115, 22, 0.5),
                0 0 30px rgba(249, 115, 22, 0.3) !important;
}

.btn-fancy-auth:active,
#authSubmitBtn:active {
    transform: translateY(0);
}

.btn-fancy-auth:disabled,
#authSubmitBtn:disabled {
    background: rgba(100, 100, 120, 0.5) !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.5;
    box-shadow: none !important;
}

.btn-fancy-auth i {
    font-size: 14px;
}

/* ============================================================
   7. 登录/注册切换链接优化（深色）
   ============================================================ */
.auth-switch {
    text-align: center;
    margin-top: 1.5rem !important;
    font-size: 14px !important;
    color: var(--login-text-light) !important;
}

.auth-switch a,
#authSwitchLink {
    color: var(--login-neon-blue) !important; /* 霓虹蓝色链接 */
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
}

.auth-switch a:hover,
#authSwitchLink:hover {
    color: var(--login-neon-purple) !important;
    text-decoration: underline !important;
    text-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
}

/* ============================================================
   8. 错误/成功提示优化（深色）
   ============================================================ */
.auth-error {
    background: rgba(245, 87, 108, 0.2) !important;
    border: 1px solid rgba(245, 87, 108, 0.5) !important;
    color: var(--login-error) !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
    font-size: 14px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 15px rgba(245, 87, 108, 0.2);
}

.auth-error i {
    color: var(--login-error);
}

.auth-success {
    background: rgba(67, 233, 123, 0.2) !important;
    border: 1px solid rgba(67, 233, 123, 0.5) !important;
    color: var(--login-success) !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 1rem !important;
    font-size: 14px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 15px rgba(67, 233, 123, 0.2);
}

.auth-success i {
    color: var(--login-success);
}

/* ============================================================
   9. 响应式优化
   ============================================================ */

/* 平板 */
@media (max-width: 768px) {
    .auth-box {
        padding: 2.5rem 2rem !important;
        max-width: 400px !important;
    }

    .auth-header h2 {
        font-size: 24px !important;
    }
}

/* 手机 */
@media (max-width: 480px) {
    .auth-section {
        padding: 1rem;
    }

    .auth-box {
        padding: 2rem 1.5rem !important;
        border-radius: 8px !important;
    }

    .auth-header h2 {
        font-size: 22px !important;
    }

    .auth-subtitle {
        font-size: 14px !important;
    }

    .input-with-icon input {
        height: 46px !important;
        font-size: 16px !important; /* 防止iOS缩放 */
    }

    .btn-fancy-auth {
        height: 46px !important;
        font-size: 15px !important;
    }
}

/* ============================================================
   10. 可访问性优化
   ============================================================ */

/* 键盘导航焦点可见性 */
*:focus-visible {
    outline: 2px solid var(--login-primary) !important;
    outline-offset: 2px;
}

/* 减少动画（尊重用户偏好） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .auth-box {
        border-width: 2px !important;
    }

    .input-with-icon input {
        border-width: 2px !important;
    }
}

/* ============================================================
   11. 加载状态优化
   ============================================================ */
.btn-fancy-auth.loading,
#authSubmitBtn.loading {
    position: relative;
    color: transparent !important;
}

.btn-fancy-auth.loading::after,
#authSubmitBtn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   12. 清除旧样式冲突
   ============================================================ */

/* 移除渐变背景 */
.auth-box {
    background-image: none !important;
}

/* 移除所有阴影 */
.auth-box,
.input-with-icon input,
.btn-fancy-auth {
    box-shadow: none !important;
}

/* 确保扁平化 */
.auth-box *:not(i) {
    text-shadow: none !important;
}

/* ============================================================
   性能优化
   ============================================================ */

/* 使用GPU加速的transform和opacity */
.btn-fancy-auth,
.input-with-icon input,
.auth-switch a {
    will-change: auto; /* 仅在交互时使用 */
}

/* 字体渲染优化 */
.auth-box,
.auth-box * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}