/* ============================================================
   themes.css —— 子页面多主题系统（与主页 index.html 主题一致）
   引入方式：
     <link rel="stylesheet" href="/css/themes.css">
     <script src="/js/theme-switcher.js"></script>（放 </head> 前）
   页面自身 <style> 保留 :root 基础变量（深色 Indigo 默认主题）。
   主题选择：URL ?theme=xxx > localStorage > 默认（页面自身主题）。
   说明：仅含 [data-theme] 覆盖，不含 :root，避免覆盖子页面基础变量。
   ============================================================ */

/* ===== 月辉金 ink：深夜墨蓝 + 月金强调 ===== */
[data-theme="ink"] {
    --primary: #fbbf24; --primary-light: #fcd34d; --primary-dark: #d97706;
    --accent: #34d399;
    --bg: #080d1a; --bg-card: #121a2c; --bg-card-hover: #1a2438;
    --text: #e2e8f0; --text-muted: #94a3b8; --text-heading: #f8fafc;
    --border: #23304d;
    --gradient-hero: linear-gradient(135deg, #080d1a 0%, #0b1424 50%, #101d33 100%);
    --gradient-primary: linear-gradient(135deg, #fbbf24, #d97706);
    --gradient-warm: linear-gradient(135deg, #f59e0b, #ef4444);
    --shadow: 0 4px 24px rgba(0,0,0,0.35); --shadow-lg: 0 8px 40px rgba(0,0,0,0.45);
    --nav-bg: rgba(8, 13, 26, 0.85); --nav-bg-solid: rgba(8, 13, 26, 0.98);
    --hover-bg: rgba(251, 191, 36, 0.15); --accent-border: rgba(251, 191, 36, 0.3);
    --glow-sm: 0 4px 16px rgba(251,191,36,0.35); --glow: 0 4px 20px rgba(251,191,36,0.4); --glow-lg: 0 8px 30px rgba(251,191,36,0.5);
    --card-fade: rgba(10, 16, 30, 0.5);
}

/* ===== 手账纸 paper：暖米纸 + 墨色 + 番茄红 ===== */
[data-theme="paper"] {
    --primary: #d9483c; --primary-light: #e2574b; --primary-dark: #b23a30;
    --accent: #3b6fb5;
    --bg: #f6f1e3; --bg-card: #fbf7ec; --bg-card-hover: #f3ead6;
    --text: #33302a; --text-muted: #7a7263; --text-heading: #2b2620;
    --border: #c9bfa8;
    --gradient-hero: linear-gradient(135deg, #f6f1e3 0%, #efe7d2 50%, #e8ddc2 100%);
    --gradient-primary: linear-gradient(135deg, #d9483c, #e08a2e);
    --gradient-warm: linear-gradient(135deg, #e3b23c, #d9483c);
    --shadow: 0 4px 20px rgba(60,54,44,0.12); --shadow-lg: 0 8px 36px rgba(60,54,44,0.16);
    --nav-bg: rgba(246, 241, 227, 0.88); --nav-bg-solid: rgba(246, 241, 227, 0.98);
    --hover-bg: rgba(217, 72, 60, 0.12); --accent-border: rgba(60, 54, 44, 0.25);
    --glow-sm: 0 4px 16px rgba(217,72,60,0.18); --glow: 0 4px 20px rgba(217,72,60,0.22); --glow-lg: 0 8px 30px rgba(217,72,60,0.28);
    --card-fade: rgba(246, 241, 227, 0.55);
}

/* ===== 编辑极简 minimal：暖白 + 墨 + 单红点 ===== */
[data-theme="minimal"] {
    --primary: #1a1a1a; --primary-light: #404040; --primary-dark: #000;
    --accent: #c0392b;
    --bg: #faf9f6; --bg-card: #ffffff; --bg-card-hover: #f3f1ec;
    --text: #33302a; --text-muted: #8a8578; --text-heading: #141414;
    --border: #e4e0d6;
    --gradient-hero: linear-gradient(135deg, #faf9f6 0%, #f3f1ec 50%, #ece8de 100%);
    --gradient-primary: linear-gradient(135deg, #1a1a1a, #404040);
    --gradient-warm: linear-gradient(135deg, #c0392b, #e67e22);
    --shadow: 0 1px 3px rgba(0,0,0,0.06); --shadow-lg: 0 6px 24px rgba(0,0,0,0.08);
    --nav-bg: rgba(250, 249, 246, 0.9); --nav-bg-solid: rgba(250, 249, 246, 0.98);
    --hover-bg: rgba(26, 26, 26, 0.06); --accent-border: rgba(26, 26, 26, 0.15);
    --glow-sm: none; --glow: none; --glow-lg: none;
    --card-fade: rgba(250, 249, 246, 0.6);
    --radius: 6px; --radius-sm: 4px;
}

/* ===== 高级柔和 soft：奶油 + 淡紫柔光 ===== */
[data-theme="soft"] {
    --primary: #8b7cf6; --primary-light: #a79bf8; --primary-dark: #6c5ce7;
    --accent: #f2a6b4;
    --bg: #faf7f5; --bg-card: #ffffff; --bg-card-hover: #f6f1ee;
    --text: #4a4552; --text-muted: #9b93a6; --text-heading: #332e3d;
    --border: #ece6e8;
    --gradient-hero: linear-gradient(135deg, #f6f1f5 0%, #eef0fb 50%, #fdf3f4 100%);
    --gradient-primary: linear-gradient(135deg, #8b7cf6, #c9a0f0);
    --gradient-warm: linear-gradient(135deg, #f2a6b4, #f6b26b);
    --shadow: 0 6px 30px rgba(140,120,170,0.14); --shadow-lg: 0 12px 44px rgba(140,120,170,0.18);
    --nav-bg: rgba(250, 247, 245, 0.88); --nav-bg-solid: rgba(250, 247, 245, 0.98);
    --hover-bg: rgba(139, 124, 246, 0.12); --accent-border: rgba(139, 124, 246, 0.22);
    --glow-sm: 0 4px 18px rgba(139,124,246,0.2); --glow: 0 6px 26px rgba(139,124,246,0.25); --glow-lg: 0 10px 36px rgba(139,124,246,0.3);
    --card-fade: rgba(250, 247, 245, 0.6);
    --radius: 20px; --radius-sm: 12px;
}

/* ===== 工业粗野 brutal：纯黑白 + 橙红 + 直角 ===== */
[data-theme="brutal"] {
    --primary: #ff4d00; --primary-light: #ff6a2b; --primary-dark: #cc3c00;
    --accent: #ffe600;
    --bg: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f2f2f0;
    --text: #111; --text-muted: #555; --text-heading: #000;
    --border: #111;
    --gradient-hero: linear-gradient(135deg, #fff 0%, #fff 50%, #f6f6f4 100%);
    --gradient-primary: linear-gradient(135deg, #ff4d00, #ff4d00);
    --gradient-warm: linear-gradient(135deg, #ffe600, #ff4d00);
    --shadow: 6px 6px 0 #111; --shadow-lg: 10px 10px 0 #111;
    --nav-bg: rgba(255, 255, 255, 0.95); --nav-bg-solid: #fff;
    --hover-bg: rgba(255, 77, 0, 0.12); --accent-border: #111;
    --glow-sm: 4px 4px 0 #111; --glow: 6px 6px 0 #111; --glow-lg: 8px 8px 0 #111;
    --card-fade: rgba(255, 255, 255, 0.5);
    --radius: 0px; --radius-sm: 0px;
}

/* ===== 粉樱 sakura：浪漫粉 ===== */
[data-theme="sakura"] {
    --primary: #e86b9d; --primary-light: #f29ac0; --primary-dark: #c74f85;
    --accent: #f7b267;
    --bg: #fdf2f6; --bg-card: #fff8fb; --bg-card-hover: #fdeef4;
    --text: #5c4650; --text-muted: #a68a94; --text-heading: #402f38;
    --border: #f3d9e4;
    --gradient-hero: linear-gradient(135deg, #fdf2f6 0%, #fbe4ee 50%, #fad9e8 100%);
    --gradient-primary: linear-gradient(135deg, #e86b9d, #f79ac0);
    --gradient-warm: linear-gradient(135deg, #f7b267, #e86b9d);
    --shadow: 0 6px 24px rgba(232,107,157,0.16); --shadow-lg: 0 12px 40px rgba(232,107,157,0.22);
    --nav-bg: rgba(253, 242, 246, 0.88); --nav-bg-solid: rgba(253, 242, 246, 0.98);
    --hover-bg: rgba(232, 107, 157, 0.12); --accent-border: rgba(232, 107, 157, 0.25);
    --glow-sm: 0 4px 16px rgba(232,107,157,0.18); --glow: 0 6px 24px rgba(232,107,157,0.22); --glow-lg: 0 10px 34px rgba(232,107,157,0.28);
    --card-fade: rgba(253, 242, 246, 0.6);
    --radius: 18px; --radius-sm: 10px;
}

/* ===== 科技 tech：深蓝紫青 ===== */
[data-theme="tech"] {
    --primary: #22d3ee; --primary-light: #67e8f9; --primary-dark: #0891b2;
    --accent: #a78bfa;
    --bg: #060b16; --bg-card: #0b1424; --bg-card-hover: #101d33;
    --text: #d5e3f0; --text-muted: #7c94ad; --text-heading: #f0f7ff;
    --border: #1c2f4a;
    --gradient-hero: linear-gradient(135deg, #060b16 0%, #0a1428 50%, #0d1d35 100%);
    --gradient-primary: linear-gradient(135deg, #22d3ee, #6366f1);
    --gradient-warm: linear-gradient(135deg, #a78bfa, #22d3ee);
    --shadow: 0 4px 20px rgba(0,0,0,0.4); --shadow-lg: 0 8px 36px rgba(0,0,0,0.5);
    --nav-bg: rgba(6, 11, 22, 0.85); --nav-bg-solid: rgba(6, 11, 22, 0.98);
    --hover-bg: rgba(34, 211, 238, 0.12); --accent-border: rgba(34, 211, 238, 0.3);
    --glow-sm: 0 0 16px rgba(34,211,238,0.3); --glow: 0 0 24px rgba(34,211,238,0.35); --glow-lg: 0 0 36px rgba(34,211,238,0.45);
    --card-fade: rgba(7, 14, 26, 0.5);
    --radius: 8px; --radius-sm: 4px;
}

/* ===== 绿意 green：自然绿 ===== */
[data-theme="green"] {
    --primary: #22a55c; --primary-light: #34d399; --primary-dark: #15803d;
    --accent: #a3e635;
    --bg: #f0f7ec; --bg-card: #fbfdf8; --bg-card-hover: #f0f7ea;
    --text: #3a4637; --text-muted: #87947f; --text-heading: #24302a;
    --border: #dce8d4;
    --gradient-hero: linear-gradient(135deg, #f0f7ec 0%, #e6f2dd 50%, #dcefcb 100%);
    --gradient-primary: linear-gradient(135deg, #22a55c, #7ec850);
    --gradient-warm: linear-gradient(135deg, #a3e635, #22a55c);
    --shadow: 0 4px 20px rgba(34,165,92,0.14); --shadow-lg: 0 8px 36px rgba(34,165,92,0.18);
    --nav-bg: rgba(240, 247, 236, 0.88); --nav-bg-solid: rgba(240, 247, 236, 0.98);
    --hover-bg: rgba(34, 165, 92, 0.12); --accent-border: rgba(34, 165, 92, 0.25);
    --glow-sm: 0 4px 16px rgba(34,165,92,0.16); --glow: 0 6px 24px rgba(34,165,92,0.2); --glow-lg: 0 10px 34px rgba(34,165,92,0.26);
    --card-fade: rgba(240, 247, 236, 0.6);
    --radius: 16px; --radius-sm: 10px;
}

/* ============================================================
   子页面通用组件变量化（带 fallback：默认主题保持页面原样）
   适用于 test / ai / play / kepu 等统一模板页面
   ============================================================ */
.main-nav { background: var(--nav-bg, rgba(15, 15, 26, 0.85)); }
.nav-menu > li > a:hover, .nav-menu > li > a.active { background: var(--hover-bg, rgba(99, 102, 241, 0.15)); }
.dropdown-menu a:hover { background: var(--hover-bg, rgba(99, 102, 241, 0.15)); }
.page-hero { background: var(--gradient-hero); }
.page-hero-title .highlight { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.btn-primary { background: var(--gradient-primary); box-shadow: var(--glow, 0 4px 20px rgba(99, 102, 241, 0.4)); }
.btn-primary:hover { box-shadow: var(--glow-lg, 0 8px 30px rgba(99, 102, 241, 0.5)); }
.test-card:hover, .more-card:hover, .project-card:hover, .featured-card:hover, .post-card:hover { border-color: var(--accent-border, rgba(99, 102, 241, 0.3)); box-shadow: var(--glow-lg, 0 8px 40px rgba(0,0,0,0.4)); }
.back-to-top { background: var(--gradient-primary); box-shadow: var(--glow-sm, 0 4px 16px rgba(99, 102, 241, 0.4)); }
.filter-btn.active { background: var(--gradient-primary); box-shadow: var(--glow, 0 4px 16px rgba(99, 102, 241, 0.3)); }

/* ============================================================
   渐变文字标题（主页 .hero-title 与子页面 .page-hero-title）
   ============================================================ */
[data-theme="ink"] .hero-title, [data-theme="ink"] .page-hero-title { background: linear-gradient(135deg, #fff 0%, #fcd34d 60%, #f59e0b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="brutal"] .hero-title, [data-theme="brutal"] .page-hero-title { background: linear-gradient(135deg, #111 0%, #ff6a2b 55%, #ff4d00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="tech"] .hero-title, [data-theme="tech"] .page-hero-title { background: linear-gradient(135deg, #fff 0%, #67e8f9 55%, #a78bfa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="green"] .hero-title, [data-theme="green"] .page-hero-title { background: linear-gradient(135deg, #24302a 0%, #22a55c 70%, #7ec850 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="sakura"] .hero-title, [data-theme="sakura"] .page-hero-title { background: linear-gradient(135deg, #402f38 0%, #e86b9d 60%, #f7b267 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="soft"] .hero-title, [data-theme="soft"] .page-hero-title { background: linear-gradient(135deg, #332e3d 0%, #8fc1e3 60%, #7ba8f5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* 兼容个别子页使用 --bg-body / --text-body 变量的情况（如 ai/index.html） */
[data-theme] { --bg-body: var(--bg); --text-body: var(--text); }

/* ============================================================
   子页面移动端适配（窄屏：卡片瘦身 / 内容截断 / 去矩形感）
   覆盖 test / ai / kepu / play 等统一模板页面的通用组件
   ============================================================ */
@media (max-width: 768px) {

    /* Hero 紧凑 */
    .page-hero { padding: 108px 16px 36px !important; }
    .page-hero-title { font-size: 1.6rem !important; }
    .page-hero-desc { font-size: 0.9rem !important; margin-top: 8px !important; }
    .hero-stats { gap: 16px !important; }
    .hero-stat-num { font-size: 1.3rem !important; }
    .hero-stat-label { font-size: 0.7rem !important; }

    /* 卡片瘦身：小号紧凑矩形，描述两行截断 */
    .test-card, .more-card, .post-card, .project-card, .featured-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }
    .test-card-icon, .more-card-icon, .featured-card-icon, .project-icon { font-size: 1.4rem !important; }
    .test-card-header, .more-card-header { margin-bottom: 6px !important; }
    .test-card-desc, .post-card-excerpt, .featured-card-desc, .more-card-desc {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; font-size: 0.82rem !important; line-height: 1.5 !important;
    }
    .test-card-title, .post-card-title, .featured-card-title, .project-title, .more-card-title { font-size: 0.94rem !important; margin-bottom: 3px !important; }
    .test-card-meta, .featured-card-meta, .post-card-meta { gap: 8px !important; font-size: 0.72rem !important; }
    .test-card-header { margin-bottom: 6px !important; }
    .test-card-action, .more-card-link { font-size: 0.82rem !important; margin-top: 4px !important; }

    /* 网格间距压缩 */
    .tests-grid, .more-grid, .posts-grid, .featured-grid, .projects-grid { gap: 10px !important; }

    /* 区块留白压缩，减少页面过长感 */
    .tests-section, .more-section, .notice-section, .featured-section, .posts-section, .projects-section, .about-section, .cta-section { padding: 24px 0 34px !important; }
    .notice-box, .more-card, .cta-box { padding: 16px !important; }
    .section-title, .filter-title { font-size: 1.15rem !important; margin-bottom: 14px !important; }

    /* 筛选栏紧凑 */
    .filter-inner { gap: 8px !important; padding: 10px 4px !important; }
    .filter-btn { padding: 5px 12px !important; font-size: 0.8rem !important; }

    /* 页脚收拢 */
    .site-footer { padding: 28px 0 18px !important; }
    .footer-grid { gap: 20px !important; }
    .footer-col h4 { font-size: 0.95rem !important; margin-bottom: 10px !important; }
    .footer-col a { font-size: 0.82rem !important; }
}