/* ==========================================
   全局主题变量 (Apple iOS Dark Mode 适配)
   适用于全站所有页面
   ========================================== */
:root {
    /* 1. 基础背景与面板 */
    --bg-base: #f8fafc;
    --bg-card: rgba(255, 255, 255, 0.88);
    --border-card: rgba(255, 255, 255, 0.6);
    /* 2. 表单与输入框 */
    --bg-input: #ffffff;
    --border-input: #e2e8f0;
    /* 3. 文字与品牌色 */
    --text-main: #0f172a;
    --text-sub: #64748b;
    --text-placeholder: #cbd5e1;
    --text-brand: #4f46e5;
    /* 4. 按钮与交互区域状态 */
    --bg-btn-secondary: rgba(241, 245, 249, 0.6);
    --bg-btn-tertiary: #e2e8f0;
    --bg-btn-ghost: rgba(238, 242, 255, 0.8);
    --border-btn-ghost: #e0e7ff;
    /* 5. 语言切换器专属 */
    --bg-lang-trigger: rgba(255, 255, 255, 0.6);
    --border-lang-trigger: rgba(255, 255, 255, 0.8);
    /* 6. 阴影与特效 */
    --shadow-main: rgba(15, 23, 42, 0.12);
    --shadow-focus: rgba(79, 70, 229, 0.15);
    --bg-error: #fef2f2;
}

/* 🍎 原生级 iOS 深色模式适配 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-base: #000000;
        --bg-card: rgba(28, 28, 30, 0.85);
        --border-card: rgba(255, 255, 255, 0.1);
        --bg-input: #1c1c1e;
        --border-input: #38383a;
        --text-main: #ffffff;
        --text-sub: #98989d;
        --text-placeholder: #636366;
        --text-brand: #5e5ce6;
        --bg-btn-secondary: rgba(44, 44, 46, 0.6);
        --bg-btn-tertiary: #3a3a3c;
        --bg-btn-ghost: rgba(94, 92, 230, 0.15); 
        --border-btn-ghost: rgba(94, 92, 230, 0.3);
        --bg-lang-trigger: rgba(44, 44, 46, 0.6);
        --border-lang-trigger: rgba(255, 255, 255, 0.1);
        --shadow-main: rgba(0, 0, 0, 0.5);
        --shadow-focus: rgba(94, 92, 230, 0.3);
        --bg-error: rgba(239, 68, 68, 0.15);
    }

    /* 👇 新增：全局 Tailwind 类名强行接管 (写在这里，全站通用！) */
    .text-slate-800, .text-slate-700, .text-slate-900 { color: var(--text-main) !important; }
    .text-slate-500, .text-slate-400 { color: var(--text-sub) !important; }
    .text-slate-300 { color: var(--text-placeholder) !important; }
    
    .bg-white { background-color: var(--bg-card) !important; }
    .bg-slate-50 { background-color: var(--bg-btn-secondary) !important; }
    .border-slate-100, .border-slate-50, .border-slate-200, .border-slate-200\/50 { border-color: var(--border-card) !important; }
    
    .text-indigo-600 { color: var(--text-brand) !important; }
    .bg-indigo-50 { background-color: var(--bg-btn-ghost) !important; }
    .bg-indigo-600 { background-color: var(--text-brand) !important; }

    .bg-slate-900 { background-color: var(--text-main) !important; color: var(--bg-base) !important; }
    .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
    .bg-red-50 { background-color: var(--bg-error) !important; }
}