/* ============================================================
   主题系统 theme.css（sundesgin 设计体系 · 深度换肤）
   - 日耀 SUN = 你的原始设计，不覆盖，直接由 happiness.css 渲染。
   - 其余 4 套主题（dark / dreamy / scifi / usbigtech）通过给 <html> 加
     .theme-deep 类触发「组件重绘规则」，接管 happiness.css 写死的白底 / 紫渐变 /
     表格 / Hero / 页脚，实现全站深度换肤。
   切换时机：<html data-theme="xxx" class="theme-deep?">，由 /sundesgin/theme.js 控制。
   本文件必须放在 happiness.css 之后引入（首页已满足）。
   ============================================================ */

/* ===================== 主题 2：dark（暗夜 · 深蓝午夜 + 青蓝高光） ===================== */
[data-theme="dark"] {
    --primary: #38bdf8;
    --primary-hover: #0ea5e9;
    --primary-light: rgba(56, 189, 248, .14);
    --gradient: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    --gradient-hover: linear-gradient(135deg, #0284c7 0%, #1d4ed8 100%);
    --gradient-topbar: linear-gradient(135deg, #1e293b 0%, #0b1120 100%);
    --gradient-brand: linear-gradient(135deg, #334155 0%, #0f172a 100%);
    --hero-grad: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --success: #34d399; --success-deep: #10b981;
    --warning: #fbbf24; --warning-deep: #f59e0b;
    --danger: #fb7185;  --danger-deep: #ef4444;
    --purple: #a78bfa;  --info: #38bdf8;
    --text-primary: #e2e8f0; --text-title: #f1f5f9; --text-secondary: #94a3b8;
    --text-muted: #64748b;  --text-light: #475569;
    --bg-body: #0b1120; --bg-header: #0b1120; --bg-soft: #131c2e; --bg-hover: #131c2e;
    --border-color: #2b3648; --border-light: #1b2436; --border-strong: #3b485f;
    --surface: #161e2e; --surface-alt: #1b2436; --surface-hover: #222c40;
    --topbar-text: rgba(226, 232, 240, .92);
    --radius: 10px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 22px;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, .55);
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, .4);
    --shadow-pop: 0 16px 50px rgba(0, 0, 0, .6);
    --shadow-hover: 0 10px 26px rgba(56, 189, 248, .22);
    --icon-soft: rgba(56, 189, 248, .14);
}

/* ===================== 主题 3：dreamy（梦幻 · 柔粉紫马卡龙 · 大圆角玻璃感） ===================== */
[data-theme="dreamy"] {
    --primary: #ec4899;
    --primary-hover: #db2777;
    --primary-light: rgba(236, 72, 153, .12);
    --gradient: linear-gradient(135deg, #f472b6 0%, #c084fc 100%);
    --gradient-hover: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
    --gradient-topbar: linear-gradient(135deg, #f9a8d4 0%, #c4b5fd 100%);
    --gradient-brand: linear-gradient(135deg, #f9a8d4 0%, #c4b5fd 100%);
    --hero-grad: linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 100%);
    --success: #34d399; --success-deep: #10b981;
    --warning: #fbbf24; --warning-deep: #f59e0b;
    --danger: #fb7185;  --danger-deep: #ef4444;
    --purple: #c084fc;  --info: #38bdf8;
    --text-primary: #5b3a4a; --text-title: #4a2a3a; --text-secondary: #b08397;
    --text-muted: #c79bae;  --text-light: #d6a9bd;
    --bg-body: #fdf2f8; --bg-header: #fff0f6; --bg-soft: #fff5fb; --bg-hover: #fff0f6;
    --border-color: #fbcfe8; --border-light: #fce7f3; --border-strong: #f9a8d4;
    --surface: #ffffff; --surface-alt: #fff0f6; --surface-hover: #ffe4f1;
    --topbar-text: rgba(91, 58, 74, .95);
    --radius: 18px; --radius-sm: 12px; --radius-md: 20px; --radius-lg: 24px; --radius-pill: 999px;
    --shadow-card: 0 12px 30px rgba(236, 72, 153, .12);
    --shadow-soft: 0 4px 14px rgba(236, 72, 153, .08);
    --shadow-pop: 0 16px 44px rgba(236, 72, 153, .18);
    --shadow-hover: 0 12px 28px rgba(236, 72, 153, .22);
    --icon-soft: rgba(236, 72, 153, .12);
}

/* ===================== 主题 4：scifi（科幻 · 霓虹赛博 · 深空 + 青紫辉光） ===================== */
[data-theme="scifi"] {
    --primary: #22d3ee;
    --primary-hover: #06b6d4;
    --primary-light: rgba(34, 211, 238, .14);
    --gradient: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%);
    --gradient-hover: linear-gradient(135deg, #0891b2 0%, #6d28d9 100%);
    --gradient-topbar: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%);
    --gradient-brand: linear-gradient(135deg, #22d3ee 0%, #7c3aed 100%);
    --hero-grad: linear-gradient(135deg, #08121f 0%, #1a0b2e 100%);
    --success: #34d399; --success-deep: #10b981;
    --warning: #fbbf24; --warning-deep: #f59e0b;
    --danger: #f43f5e;  --danger-deep: #e11d48;
    --purple: #a855f7;  --info: #22d3ee;
    --text-primary: #cffafe; --text-title: #e0fbff; --text-secondary: #5eead4;
    --text-muted: #3ba8a0;  --text-light: #256b6b;
    --bg-body: #05070f; --bg-header: #070b16; --bg-soft: #0a1426; --bg-hover: #0a1426;
    --border-color: #0e7490; --border-light: #0a2a3a; --border-strong: #155e75;
    --surface: #0a0f1e; --surface-alt: #0d1428; --surface-hover: #111a30;
    --topbar-text: rgba(207, 250, 254, .95);
    --radius: 4px; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 16px;
    --shadow-card: 0 0 22px rgba(34, 211, 238, .18);
    --shadow-soft: 0 0 14px rgba(34, 211, 238, .10);
    --shadow-pop: 0 0 40px rgba(124, 58, 237, .30);
    --shadow-hover: 0 0 26px rgba(34, 211, 238, .35);
    --icon-soft: rgba(34, 211, 238, .16);
}

/* ===================== 主题 5：usbigtech（世界顶级大厂 · 美国互联网极简 · indigo/白） ===================== */
[data-theme="usbigtech"] {
    --primary: #635bff;
    --primary-hover: #4f46e5;
    --primary-light: rgba(99, 91, 255, .10);
    --gradient: linear-gradient(135deg, #635bff 0%, #0a2540 100%);
    --gradient-hover: linear-gradient(135deg, #4f46e5 0%, #0a2540 100%);
    --gradient-topbar: linear-gradient(135deg, #0a2540 0%, #0b2a4a 100%);
    --gradient-brand: linear-gradient(135deg, #635bff 0%, #7c7bff 100%);
    --hero-grad: linear-gradient(135deg, #0a2540 0%, #635bff 100%);
    --success: #00b36b; --success-deep: #00875a;
    --warning: #f5a623; --warning-deep: #d97706;
    --danger: #ff5a5f;  --danger-deep: #e11d48;
    --purple: #635bff;  --info: #12adff;
    --text-primary: #0a2540; --text-title: #0a2540; --text-secondary: #425466;
    --text-muted: #697386;  --text-light: #8792a2;
    --bg-body: #ffffff; --bg-header: #ffffff; --bg-soft: #f6f9fc; --bg-hover: #f0f3f8;
    --border-color: #e6e8eb; --border-light: #f0f3f8; --border-strong: #d5d9e0;
    --surface: #ffffff; --surface-alt: #f6f9fc; --surface-hover: #f0f3f8;
    --topbar-text: rgba(255, 255, 255, .92);
    --radius: 8px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 22px;
    --shadow-card: 0 2px 10px rgba(10, 37, 64, .10);
    --shadow-soft: 0 1px 4px rgba(10, 37, 64, .08);
    --shadow-pop: 0 8px 30px rgba(10, 37, 64, .14);
    --shadow-hover: 0 6px 18px rgba(99, 91, 255, .22);
    --icon-soft: rgba(99, 91, 255, .10);
}

/* ==========================================================================
   深度主题：组件重绘规则（仅作用于 .theme-deep，即非「日耀 SUN」主题）
   把 happiness.css 写死的白底 / 紫色渐变 / 表格 / 页脚统一接管为变量，
   用 !important 确保覆盖原字面量。变量值随 [data-theme] 自动变化。
   「日耀 SUN」不加 .theme-deep，因此完全保持 happiness.css 原始设计。
   ========================================================================== */
.theme-deep body,
.theme-deep header {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

.theme-deep .topbar { background: var(--gradient-topbar) !important; }

.theme-deep .hxnav,
.theme-deep .hx-page .hxnav {
    background: var(--bg-header) !important;
    border-color: var(--border-color) !important;
}

/* 主表面：卡片 / 统计卡 / 侧栏 / 表格 / 面包屑 / 分页 / 下拉面板 / 步骤卡 */
.theme-deep .card, .theme-deep .stat-card, .theme-deep .sidebar, .theme-deep .hx-table,
.theme-deep .breadcrumb, .theme-deep .pagination li a, .theme-deep .pagination li span,
.theme-deep .language-menu, .theme-deep .location-menu, .theme-deep .theme-menu,
.theme-deep .hx-step-card, .theme-deep .news-card, .theme-deep .shared-search-card {
    background: var(--surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* 次级表面：列表项 / 项目卡 / 快捷操作 */
.theme-deep .ranking-item, .theme-deep .hot-item, .theme-deep .category-item,
.theme-deep .project-card, .theme-deep .action-btn, .theme-deep .topic-list li {
    background: var(--surface-alt) !important;
}
.theme-deep .ranking-item:hover, .theme-deep .hot-item:hover, .theme-deep .category-item:hover,
.theme-deep .project-card:hover, .theme-deep .action-btn:hover, .theme-deep .topic-list li:hover {
    background: var(--surface-hover) !important;
}
.theme-deep .hx-page .project-card:hover {
    background: var(--surface-hover) !important;
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* 表格 */
.theme-deep .hx-table th {
    background: var(--bg-soft) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
.theme-deep .hx-table td {
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}
.theme-deep .hx-table tbody tr:hover { background: var(--bg-soft) !important; }

/* 文字类 */
.theme-deep .card-title, .theme-deep .sidebar-title, .theme-deep .stat-value, .theme-deep .project-title,
.theme-deep .hot-title, .theme-deep .ranking-title, .theme-deep .logo-text, .theme-deep .user-name,
.theme-deep .hx-section-h2, .theme-deep .hx-step-card h3 {
    color: var(--text-title) !important;
}
.theme-deep .stat-label, .theme-deep .card-action, .theme-deep .hx-label, .theme-deep .project-desc,
.theme-deep .progress-info, .theme-deep .topic-name, .theme-deep .author-name, .theme-deep .project-meta,
.theme-deep .footer-copyright p, .theme-deep .news-list li span:not(.news-dot) {
    color: var(--text-muted) !important;
}
.theme-deep .card-action:hover { color: var(--primary) !important; }
.theme-deep .sidebar-menu a { color: var(--text-secondary) !important; }
.theme-deep .sidebar-menu a:hover, .theme-deep .sidebar-menu a.active { background: var(--primary-light) !important; color: var(--primary) !important; }

/* 品牌渐变：主按钮 / 筛选标签 / 标签 / 进度条 / 头像 / 返回顶部 / 步骤卡装饰 */
.theme-deep .btn-primary { background: var(--gradient) !important; color: #fff !important; }
.theme-deep .btn-primary:hover { background: var(--gradient-hover) !important; color: #fff !important; }
.theme-deep .btn-outline { border-color: var(--primary) !important; color: var(--primary) !important; }
.theme-deep .filter-tab { background: var(--surface-hover) !important; color: var(--text-secondary) !important; }
.theme-deep .filter-tab:hover { background: var(--bg-soft) !important; }
.theme-deep .filter-tab.active { background: var(--gradient) !important; color: #fff !important; }
.theme-deep .project-tag, .theme-deep .project-tag.ongoing, .theme-deep .project-tag.pending,
.theme-deep .project-tag.completed, .theme-deep .project-tag.ended, .theme-deep .project-tag.offline,
.theme-deep .card-action.btn-publish {
    background: var(--gradient-brand) !important; color: #fff !important;
}
.theme-deep .card-action.btn-publish:hover { background: var(--gradient-brand) !important; color: #fff !important; }
.theme-deep .progress-fill { background: var(--gradient-brand) !important; }
.theme-deep .category-item .count { background: var(--gradient-brand) !important; color: #fff !important; }
.theme-deep .author-avatar, .theme-deep .logo-icon, .theme-deep .user-avatar { background: var(--gradient-brand) !important; color: #fff !important; }
.theme-deep .back-to-top { background: var(--gradient) !important; color: #fff !important; box-shadow: var(--shadow-hover) !important; }
.theme-deep .ranking-rank.top, .theme-deep .hot-rank.top { background: var(--gradient-brand) !important; color: #fff !important; }
.theme-deep .topic-list li:first-child .topic-rank,
.theme-deep .topic-list li:nth-child(2) .topic-rank,
.theme-deep .topic-list li:nth-child(3) .topic-rank { background: var(--gradient-brand) !important; color: #fff !important; }

/* Hero 主张区 + 三步卡 + 图标盒子 */
.theme-deep .hx-hero { background: var(--hero-grad) !important; }
.theme-deep .hx-step-card::before { background: var(--gradient-brand) !important; }
.theme-deep .hx-step-icon { background: var(--gradient-brand) !important; color: #fff !important; }
.theme-deep .hx-step-card:hover { box-shadow: var(--shadow-hover); border-color: var(--border-color) !important; }
.theme-deep .hx-i-box { background: var(--primary-light) !important; color: var(--primary) !important; }
.theme-deep .hx-i-primary { color: var(--primary) !important; }
.theme-deep .icon-blue { background: var(--primary-light) !important; color: var(--primary) !important; }
.theme-deep .icon-purple { background: var(--primary-light) !important; color: var(--purple) !important; }

/* 下拉菜单项（语言 / 地区）文字与高亮 */
.theme-deep .language-item, .theme-deep .location-item { color: var(--text-primary) !important; }
.theme-deep .language-item:hover, .theme-deep .location-item:hover,
.theme-deep .language-item.active, .theme-deep .location-item.active {
    background: var(--surface-hover) !important; color: var(--primary) !important;
}
.theme-deep .language-item.active::before, .theme-deep .location-item.active::before { color: var(--primary) !important; }

/* 浅色页脚 */
.theme-deep .footer { background: var(--surface) !important; border-color: var(--border-color) !important; }
.theme-deep .footer .service-icon { background: var(--icon-soft) !important; border-color: var(--border-color) !important; color: var(--primary) !important; }
.theme-deep .footer .service-item:hover .service-icon { background: var(--surface-hover) !important; border-color: var(--primary) !important; box-shadow: 0 0 18px var(--icon-soft) !important; }
.theme-deep .footer .service-text h4 { color: var(--text-title) !important; }
.theme-deep .footer .service-text p { color: var(--text-muted) !important; }
.theme-deep .footer .footer-nav-col h4 { color: var(--primary) !important; }
.theme-deep .footer .footer-nav-col ul li a { color: var(--text-secondary) !important; }
.theme-deep .footer .footer-nav-col ul li a:hover { color: var(--primary) !important; text-shadow: none !important; }
.theme-deep .footer .footer-copyright { background: var(--bg-soft) !important; color: var(--text-muted) !important; }
.theme-deep .footer-phone { color: var(--primary) !important; }

/* 深色页脚（首页 footer-dark）：跟随主题变量，亮/暗主题都协调 */
.theme-deep .footer-dark { background: var(--bg-header) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; }
.theme-deep .footer-dark .footer-service { border-color: var(--border-color) !important; }
.theme-deep .footer-dark .service-icon { background: var(--icon-soft) !important; border-color: var(--border-color) !important; color: var(--primary) !important; }
.theme-deep .footer-dark .service-item:hover .service-icon { background: var(--surface-hover) !important; border-color: var(--primary) !important; box-shadow: 0 0 18px var(--icon-soft) !important; }
.theme-deep .footer-dark .service-text h4 { color: var(--text-title) !important; }
.theme-deep .footer-dark .service-text p { color: var(--text-muted) !important; }
.theme-deep .footer-dark .footer-logo-mark { background: var(--gradient-brand) !important; }
.theme-deep .footer-dark .footer-logo-name { color: var(--text-title) !important; }
.theme-deep .footer-dark .footer-desc { color: var(--text-muted) !important; }
.theme-deep .footer-dark .footer-phone { color: var(--text-title) !important; }
.theme-deep .footer-dark .footer-time { color: var(--text-muted) !important; }
.theme-deep .footer-dark .footer-social a { background: var(--surface-alt) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
.theme-deep .footer-dark .footer-social a:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.theme-deep .footer-dark .footer-nav-col h4 { color: var(--text-title) !important; }
.theme-deep .footer-dark .footer-nav-col ul li a { color: var(--text-secondary) !important; }
.theme-deep .footer-dark .footer-nav-col ul li a:hover { color: var(--primary) !important; }
.theme-deep .footer-dark .footer-bottom { border-color: var(--border-color) !important; }
.theme-deep .footer-dark .footer-copy, .theme-deep .footer-dark .footer-tagline { color: var(--text-muted) !important; }

/* 平滑过渡，避免切主题时闪烁生硬 */
body,
header,
.topbar,
.nav-section,
.card,
.stat-card,
.sidebar,
.dropdown-content,
.language-menu,
.location-menu,
.btn-primary,
.tool-btn,
.hx-table,
.hx-hero,
.hx-step-card,
.project-card,
.footer,
.footer-dark {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* ============ 主题下拉菜单 ============ */
.theme-menu {
    position: fixed;
    min-width: 184px;
    background: var(--surface, #fff);
    border: 1px solid var(--border-color, #eef2f3);
    border-radius: 14px;
    box-shadow: var(--shadow-pop, 0 16px 40px rgba(20, 50, 55, .16));
    padding: 6px;
    z-index: 2000;
    display: none;
}
.theme-menu.open { display: block; }
.theme-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary, #1e293b);
    transition: background .15s ease;
}
.theme-item:hover { background: var(--icon-soft, rgba(37, 99, 235, .10)); }
.theme-item.active { background: var(--icon-soft, rgba(37, 99, 235, .10)); font-weight: 600; }
.theme-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) inset;
}
.theme-name { flex: 1; white-space: nowrap; }
.theme-check { color: var(--primary, #2563eb); font-size: 12px; opacity: 0; }
.theme-item.active .theme-check { opacity: 1; }
/* 各主题色块预览 */
.theme-sundesgin { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.theme-dark { background: #0b1120; box-shadow: 0 0 0 1px #2b3648 inset; }
.theme-dreamy { background: linear-gradient(135deg, #f9a8d4 0%, #c4b5fd 100%); }
.theme-scifi { background: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%); }
.theme-usbigtech { background: linear-gradient(135deg, #0a2540 0%, #635bff 100%); }