/**
 * 暗色模式样式 - 自动适配浏览器/系统暗色模式
 * 使用 @media (prefers-color-scheme: dark) 自动检测
 */

@media (prefers-color-scheme: dark) {
    /* ===================== 基础颜色 ===================== */
    :root {
        color-scheme: dark;
    }
    
    /* 页面背景和基础文字 */
    body {
        background-color: #0f172a !important; /* slate-900 */
        color: #e2e8f0 !important; /* slate-200 */
    }
    
    /* 选中文字样式 */
    ::selection {
        background-color: rgba(59, 130, 246, 0.3) !important;
        color: #93c5fd !important;
    }
    
    /* 滚动条 */
    ::-webkit-scrollbar-track {
        background: #1e293b !important;
    }
    ::-webkit-scrollbar-thumb {
        background: #475569 !important;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #64748b !important;
    }
    
    /* ===================== Header 导航栏 ===================== */
    .glass-header {
        background: rgba(15, 23, 42, 0.85) !important;
        border-bottom-color: rgba(51, 65, 85, 0.6) !important;
    }
    
    /* Logo 文字 */
    header .bg-clip-text {
        background-image: linear-gradient(to right, #f1f5f9, #cbd5e1) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
    }
    
    /* 导航链接 */
    header nav a,
    header .text-slate-600 {
        color: #94a3b8 !important;
    }
    header nav a:hover {
        color: #60a5fa !important;
    }
    
    /* 登录按钮 */
    #loginTrigger {
        color: #94a3b8 !important;
    }
    #loginTrigger:hover {
        color: #60a5fa !important;
    }
    
    /* 已登录状态 */
    header .border-l {
        border-color: #334155 !important;
    }
    header .text-slate-500 {
        color: #64748b !important;
    }
    header .text-slate-700 {
        color: #e2e8f0 !important;
    }
    
    /* ===================== Hero Section ===================== */
    main section > div.bg-white {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }
    
    /* Hero 背景渐变圆 */
    main section > div.bg-white > .bg-blue-50 {
        background-color: rgba(30, 58, 138, 0.3) !important;
    }
    main section > div.bg-white > .bg-purple-50 {
        background-color: rgba(88, 28, 135, 0.3) !important;
    }
    
    /* Hero 标题 */
    h1.bg-clip-text {
        background-image: linear-gradient(to right, #f1f5f9, #cbd5e1) !important;
    }
    
    /* Hero 描述文字 */
    .text-slate-500,
    p.text-lg.text-slate-500 {
        color: #94a3b8 !important;
    }
    
    /* Hero 次要按钮 */
    a.bg-white.border {
        background-color: #1e293b !important;
        border-color: #475569 !important;
        color: #cbd5e1 !important;
    }
    a.bg-white.border:hover {
        background-color: #334155 !important;
        color: #60a5fa !important;
    }
    
    /* 状态指示器 */
    .bg-blue-50.text-blue-600.border-blue-100 {
        background-color: rgba(30, 64, 175, 0.2) !important;
        border-color: rgba(59, 130, 246, 0.3) !important;
    }
    
    /* ===================== 套餐卡片 ===================== */
    h2.text-slate-800,
    h3.text-slate-800,
    .text-slate-800 {
        color: #f1f5f9 !important;
    }
    
    /* 卡片背景 */
    .bg-white.rounded-3xl,
    div.bg-white.rounded-3xl {
        background-color: #1e293b !important;
        border-color: #334155 !important;
    }
    
    /* 卡片悬停阴影 */
    .bg-white.rounded-3xl:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* 卡片分割线 */
    .border-t.border-slate-50 {
        border-color: #334155 !important;
    }
    
    /* 卡片图标背景 - 各颜色 */
    .bg-blue-50 { background-color: rgba(30, 64, 175, 0.2) !important; }
    .bg-indigo-50 { background-color: rgba(67, 56, 202, 0.2) !important; }
    .bg-purple-50 { background-color: rgba(88, 28, 135, 0.2) !important; }
    .bg-amber-50 { background-color: rgba(146, 64, 14, 0.2) !important; }
    .bg-rose-50 { background-color: rgba(159, 18, 57, 0.2) !important; }
    
    /* ===================== 帮助区块 ===================== */
    section .bg-blue-600.rounded-3xl {
        background-color: #1e40af !important;
    }
    section .bg-blue-600.rounded-3xl .text-blue-100 {
        color: #bfdbfe !important;
    }
    
    /* ===================== Footer ===================== */
    footer.bg-white {
        background-color: #0f172a !important;
        border-color: #1e293b !important;
    }
    footer .text-slate-400 {
        color: #64748b !important;
    }
    footer .text-slate-400:hover {
        color: #60a5fa !important;
    }
    footer .text-slate-300 {
        color: #475569 !important;
    }
    
    /* ===================== 模态框 ===================== */
    /* 模态框背景遮罩 */
    .modal .bg-slate-900\/40 {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }
    
    /* 模态框内容 */
    .modal .bg-white,
    .modal-content-anim.bg-white,
    #orderModal .bg-white,
    #loginModal .bg-white,
    #registerModal .bg-white {
        background-color: #1e293b !important;
        color: #e2e8f0 !important;
    }
    
    /* 模态框标题 */
    .modal h3 {
        color: #f1f5f9 !important;
    }
    
    /* 模态框关闭按钮 */
    .modal button.text-slate-400 {
        color: #64748b !important;
    }
    .modal button.text-slate-400:hover {
        color: #f1f5f9 !important;
        background-color: #334155 !important;
    }
    
    /* ===================== 表单元素 ===================== */
    /* 输入框 */
    input.bg-slate-50,
    input[type="text"],
    input[type="email"],
    input[type="password"] {
        background-color: #0f172a !important;
        border-color: #334155 !important;
        color: #e2e8f0 !important;
    }
    input.bg-slate-50::placeholder,
    input::placeholder {
        color: #64748b !important;
    }
    input:focus {
        background-color: #1e293b !important;
        border-color: #3b82f6 !important;
    }
    
    /* Tab 切换器 */
    .bg-slate-100.rounded-xl,
    .flex.bg-slate-100 {
        background-color: #0f172a !important;
    }
    .bg-slate-100 button.text-slate-500 {
        color: #64748b !important;
    }
    .bg-slate-100 button.text-slate-500:hover {
        color: #94a3b8 !important;
    }
    .bg-slate-100 button.bg-white {
        background-color: #334155 !important;
        color: #60a5fa !important;
    }
    
    /* 发送验证码按钮 */
    button.bg-white.border-slate-200 {
        background-color: #334155 !important;
        border-color: #475569 !important;
        color: #94a3b8 !important;
    }
    button.bg-white.border-slate-200:hover {
        background-color: #475569 !important;
    }
    
    /* ===================== 订单确认弹窗 ===================== */
    /* 订单摘要卡片 */
    .bg-gradient-to-br.from-slate-50 {
        background: linear-gradient(to bottom right, #0f172a, rgba(30, 64, 175, 0.1)) !important;
        border-color: #334155 !important;
    }
    
    /* 图标背景 */
    .bg-blue-100.text-blue-600 {
        background-color: rgba(30, 64, 175, 0.3) !important;
    }
    
    /* 分割线 */
    .border-b.border-slate-200\/60 {
        border-color: rgba(51, 65, 85, 0.6) !important;
    }
    
    /* 支付方式选项 */
    #wechatPaymentBtn,
    #balancePaymentBtn {
        background-color: #0f172a !important;
    }
    #wechatPaymentBtn.border-slate-200,
    #balancePaymentBtn.border-slate-200 {
        border-color: #334155 !important;
    }
    #wechatPaymentBtn .text-slate-700,
    #balancePaymentBtn .text-slate-700 {
        color: #e2e8f0 !important;
    }
    #wechatPaymentBtn .text-slate-400,
    #balancePaymentBtn .text-slate-400 {
        color: #64748b !important;
    }
    
    /* 周期选择器 */
    #billingCycleSelector {
        background-color: #0f172a !important;
    }
    
    /* 二维码背景 */
    .bg-white.border-slate-100.shadow-inner {
        background-color: #f8fafc !important;
    }
    
    /* ===================== 移动端菜单 ===================== */
    #mobile-menu-overlay {
        background-color: rgba(0, 0, 0, 0.5) !important;
    }
    
    #mobile-menu-panel {
        background-color: rgba(30, 41, 59, 0.95) !important;
        border-color: rgba(51, 65, 85, 0.5) !important;
    }
    
    /* 菜单头部 */
    #mobile-menu-panel .border-b.border-slate-100 {
        border-color: #334155 !important;
    }
    #mobile-menu-panel h1 {
        color: #f1f5f9 !important;
    }
    #mobile-menu-panel .text-slate-500 {
        color: #64748b !important;
    }
    
    /* 关闭按钮 */
    #mobile-menu-close {
        background-color: #334155 !important;
        color: #94a3b8 !important;
    }
    #mobile-menu-close:hover {
        background-color: #475569 !important;
        color: #f1f5f9 !important;
    }
    
    /* 用户信息区 */
    #mobile-menu-panel .bg-slate-50\/50 {
        background-color: rgba(15, 23, 42, 0.5) !important;
    }
    #mobile-menu-panel .text-slate-700 {
        color: #e2e8f0 !important;
    }
    
    /* 菜单项 */
    .mobile-menu-link {
        background-color: rgba(15, 23, 42, 0.8) !important;
    }
    .mobile-menu-link:hover {
        background-color: rgba(30, 41, 59, 1) !important;
    }
    .mobile-menu-link .bg-white {
        background-color: #334155 !important;
        border-color: #475569 !important;
    }
    .mobile-menu-link .text-slate-700 {
        color: #e2e8f0 !important;
    }
    .mobile-menu-link .text-slate-400 {
        color: #64748b !important;
    }
    .mobile-menu-link .text-slate-300 {
        color: #475569 !important;
    }
    
    /* 菜单底部 */
    #mobile-menu-panel > .absolute.bottom-0 {
        background-color: rgba(30, 41, 59, 0.8) !important;
        border-color: #334155 !important;
    }
    
    /* 移动端登录/注册按钮 */
    #mobileLoginTrigger {
        background-color: #475569 !important;
    }
    #mobileRegisterTrigger {
        background-color: #1e293b !important;
        border-color: #475569 !important;
        color: #94a3b8 !important;
    }
    
    /* ===================== Toast 通知 ===================== */
    #toast {
        background-color: #1e293b !important;
        color: #f1f5f9 !important;
        border: 1px solid #334155 !important;
    }
    
    /* ===================== 其他页面通用元素 ===================== */
    /* 表格 */
    table {
        color: #e2e8f0 !important;
    }
    th {
        background-color: #1e293b !important;
        color: #94a3b8 !important;
    }
    td {
        border-color: #334155 !important;
    }
    tr:hover {
        background-color: #1e293b !important;
    }
    
    /* 卡片容器 */
    .bg-white {
        background-color: #1e293b !important;
    }
    
    /* 边框颜色 */
    .border-slate-100,
    .border-slate-200 {
        border-color: #334155 !important;
    }
    
    /* 文字颜色覆盖 */
    .text-slate-400 {
        color: #64748b !important;
    }
    .text-slate-500 {
        color: #94a3b8 !important;
    }
    .text-slate-600 {
        color: #cbd5e1 !important;
    }
    .text-slate-700 {
        color: #e2e8f0 !important;
    }
    .text-slate-800 {
        color: #f1f5f9 !important;
    }
    .text-slate-900 {
        color: #f8fafc !important;
    }
    
    /* 保持蓝色主题色 */
    .text-blue-600 {
        color: #60a5fa !important;
    }
    .text-blue-500 {
        color: #3b82f6 !important;
    }
    
    /* 绿色对勾保持 */
    .text-green-500 {
        color: #22c55e !important;
    }
    
    /* 购买按钮保持深色 */
    button.bg-slate-900 {
        background-color: #475569 !important;
    }
    button.bg-slate-900:hover {
        background-color: #3b82f6 !important;
    }
}