/* ============================================
   AI创作孵化智航方舟平台 - 全局样式
   核心配色：深空蓝 + 极光青 + 微光橙
   设计风格：轻量化高端科技风
   ============================================ */

/* ---------- CSS变量 - 配色体系 ---------- */
:root {
    /* 主色：深空蓝 - 科技、专业、可信 */
    --primary: #0F2557;
    --primary-light: #1A3A6E;
    --primary-dark: #0A1A3D;
    --primary-gradient: linear-gradient(135deg, #0F2557 0%, #1A3A6E 100%);

    /* 辅助色1：极光青 - AI创作、创意孵化、技术研发 */
    --accent-cyan: #2DD4BF;
    --accent-cyan-light: #5EEAD4;
    --accent-cyan-dark: #14B8A6;
    --cyan-glow: rgba(45, 212, 191, 0.3);

    /* 辅助色2：微光橙 - 兼职收益、佣金变现、活力共创 */
    --accent-orange: #FB923C;
    --accent-orange-light: #FDBA74;
    --accent-orange-dark: #F97316;
    --orange-glow: rgba(251, 146, 60, 0.3);

    /* 中性色：保证页面高级干净 */
    --white: #FFFFFF;
    --surface: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* 功能色 */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* 玻璃拟态 */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-bg-light: rgba(255, 255, 255, 0.7);
    --glass-border-light: rgba(255, 255, 255, 0.5);

    /* 阴影 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow-cyan: 0 0 30px rgba(45, 212, 191, 0.2);
    --shadow-glow-orange: 0 0 30px rgba(251, 146, 60, 0.2);

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* 过渡动画 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

    /* 布局容器 */
    --container-width: 1280px;
    --section-padding: 100px 0;
    --section-padding-mobile: 60px 0;
}

/* ---------- 深色主题配色体系 ---------- */
:root[data-theme="dark"] {
    /* 主色：深空蓝（保持科技感，加深一级） */
    --primary: #122E66;
    --primary-light: #1C4484;
    --primary-dark: #07142E;
    --primary-gradient: linear-gradient(135deg, #07142E 0%, #122E66 100%);

    /* 辅助色1：极光青（稍微提亮保证对比度） */
    --accent-cyan: #34E3CE;
    --accent-cyan-light: #72F2E2;
    --accent-cyan-dark: #19C9B1;
    --cyan-glow: rgba(52, 227, 206, 0.35);

    /* 辅助色2：微光橙（提亮保证对比度） */
    --accent-orange: #FDA45C;
    --accent-orange-light: #FFC999;
    --accent-orange-dark: #FA8228;
    --orange-glow: rgba(253, 164, 92, 0.35);

    /* 中性色反相 + 深蓝黑底色体系（替换原纯白/浅灰） */
    /* 注意：--white 保持 #FFFFFF 不变，用于深色/渐变背景上的文字色 */
    --surface: #0F1C36;             /* 原#FFFFFF → 卡片深色底（仅用于背景） */
    --gray-50: #0A1428;             /* 原#F9FAFB → 页面背景最深 */
    --gray-100: #112040;            /* 原#F3F4F6 → 二级背景 */
    --gray-200: #1A2D54;            /* 原#E5E7EB → 三级背景/分隔 */
    --gray-300: #2A4376;            /* 原#D1D5DB → 边框/分隔线 */
    --gray-400: #4A6798;            /* 原#9CA3AF → 次级边框 */
    --gray-500: #98AACC;            /* 原#6B7280 → 次要说明文字 */
    --gray-600: #C2CEE4;            /* 原#4B5563 → 常规文字 */
    --gray-700: #DEE6F4;            /* 原#374151 → 主要文字 */
    --gray-800: #EEF3FB;            /* 原#1F2937 → 强调文字 */
    --gray-900: #F8FAFD;            /* 原#111827 → 标题最重文字 */

    /* 功能色保持（对比度OK） */
    --success: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --info: #60A5FA;

    /* 玻璃拟态：深色透明度调整 */
    --glass-bg: rgba(10, 20, 40, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-bg-light: rgba(15, 28, 54, 0.75);
    --glass-border-light: rgba(255, 255, 255, 0.12);

    /* 阴影：深色模式下用冷色发光替代纯黑阴影，保持层次感 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 0 1px rgba(45, 212, 191, 0.05);
    --shadow-md: 0 4px 10px -1px rgba(0, 0, 0, 0.45), 0 0 18px rgba(15, 37, 87, 0.25);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.55), 0 0 30px rgba(15, 37, 87, 0.35);
    --shadow-xl: 0 24px 40px -8px rgba(0, 0, 0, 0.6), 0 0 50px rgba(15, 37, 87, 0.4);
    --shadow-glow-cyan: 0 0 36px rgba(52, 227, 206, 0.3);
    --shadow-glow-orange: 0 0 36px rgba(253, 164, 92, 0.3);
}

/* ---------- 全局重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-800);
    background-color: var(--gray-50);
    overflow-x: hidden;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
}

input, textarea, select {
    font-family: inherit;
    outline: none;
}

/* ---------- 公共布局容器 ---------- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: var(--section-padding);
    position: relative;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
    line-height: 1.3;
}

.section-title h2 span {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title p {
    font-size: 18px;
    color: var(--gray-500);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ---------- 按钮样式 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    cursor: pointer;
    white-space: nowrap;
    border: 2px solid transparent;
    line-height: 1.4;
}

.btn-primary {
    background: var(--primary-gradient);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(15, 37, 87, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 37, 87, 0.4);
}

.btn-cyan {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-cyan-dark) 100%);
    color: var(--white);
    box-shadow: 0 4px 15px var(--cyan-glow);
}

.btn-cyan:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--cyan-glow);
}

.btn-orange {
    background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
    color: var(--white);
    box-shadow: 0 4px 15px var(--orange-glow);
}

.btn-orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--orange-glow);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
}

.btn-outline-white {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-white:hover {
    background: #FFFFFF;
    color: var(--primary);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 18px 40px;
    font-size: 18px;
}

.btn-sm {
    padding: 10px 20px;
    font-size: 14px;
}

/* ---------- 卡片样式 ---------- */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    border: 1px solid var(--gray-100);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-orange) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.card:hover::before {
    opacity: 1;
}

.card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: all var(--transition-normal);
}

.card-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

/* ---------- 图标容器 ---------- */
.icon-box {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.icon-box.cyan {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.15) 0%, rgba(45, 212, 191, 0.05) 100%);
    color: var(--accent-cyan);
}

.icon-box.orange {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(251, 146, 60, 0.05) 100%);
    color: var(--accent-orange);
}

.icon-box.primary {
    background: linear-gradient(135deg, rgba(15, 37, 87, 0.15) 0%, rgba(15, 37, 87, 0.05) 100%);
    color: var(--primary);
}

/* ---------- 徽章/标签 ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
}

.badge-cyan {
    background: rgba(45, 212, 191, 0.15);
    color: var(--accent-cyan-dark);
}

.badge-orange {
    background: rgba(251, 146, 60, 0.15);
    color: var(--accent-orange-dark);
}

.badge-primary {
    background: rgba(105, 137, 87, 0.2);
    color: var(--primary);
}

/* 浅色模式（含默认浅色）下：index.html 赋能案例模块右上角 badge 文字改为黑色 */
html:not([data-theme="dark"]) #caseTabs .tab-pane .badge-cyan,
html:not([data-theme="dark"]) #caseTabs .tab-pane .badge-orange,
html:not([data-theme="dark"]) #caseTabs .tab-pane .badge-primary {
    color: #000000 !important;
}

/* 兼容无媒体查询触发（通过 <html data-mobile-sim="1"> 模拟移动端命中，供浏览器调试验证） */
html[data-theme="dark"][data-mobile-sim="1"] .card:has(.icon-box) > div[style*="margin-top: 20px"][style*="flex-wrap: wrap"] > .badge-primary {
    background: #4cae6a !important;
    color: var(--primary) !important;
}
/* 只匹配卡片内的「了解详情 →」按钮（a标签，排除 header 中的「商家入驻」按钮）
   使用 :root + body + a[href] + 子选择器 > 组合，突破任何潜在覆盖源 */
:root[data-theme="dark"][data-mobile-sim="1"] body .card > a.btn-outline.btn-sm[href],
html[data-theme="dark"][data-mobile-sim="1"] body .card > a.btn-outline.btn-sm[href] {
    color: #41639d !important;
    border-color: #41639d !important;
}
html[data-theme="dark"][data-mobile-sim="1"] div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 12px"] > div > div[style*="font-weight: 800"] {
    color: #b89417 !important;
}
html[data-theme="dark"][data-mobile-sim="1"] div[style*="border-top: 1px solid var(--gray-100)"] span > strong[style*="color: var(--primary)"] {
    color: #2eab9c !important;
}
/* 5. 仅匹配「AI开发与孵化班」的 ¥4,999（grid-3 下第 3 张培训卡） */
html[data-theme="dark"][data-mobile-sim="1"] .grid-3 > .card:nth-child(3) > h3 + div > span[style*="font-size: 28px"] {
    color: #2378c8 !important;
}
html[data-theme="dark"][data-mobile-sim="1"] .card[style*="text-align: center"] h3 + p[style*="color: var(--primary)"][style*="font-weight: 500"] {
    color: #235ecd !important;
}
html[data-theme="dark"][data-mobile-sim="1"] .card[style*="text-align: center"] ul li > span:first-child[style*="color: var(--primary)"] {
    color: #235ecd !important;
}

/* 移动端 + 深色模式（深度模式）@media (max-width:992px) 下：
   1. 核心优势4张卡片底部「企业/扶持/审核/权益」.badge-primary 托底颜色改为 #4cae6a
   2. 「了解详情 →」按钮字体颜色和边框线颜色改为 #41639d（统一桌面端&移动端）
   3. 「80集」「¥320W」「14天」→ #b89417
   4. 「已报名 X 人」数字 → #2eab9c
   5. AI开发与孵化班 「¥4,999」→ #2378c8
   6. AI技术开发者 「项目孵化创业直通」→ #235ecd，✓ 符号 → #235ecd */
@media (max-width: 992px) {
    html[data-theme="dark"] .card:has(.icon-box) > div[style*="margin-top: 20px"][style*="flex-wrap: wrap"] > .badge-primary {
        background: #4cae6a !important;
        color: var(--primary) !important;
    }
    :root[data-theme="dark"] body .card > a.btn-outline.btn-sm[href],
    html[data-theme="dark"] body .card > a.btn-outline.btn-sm[href] {
        color: #41639d !important;
        border-color: #41639d !important;
    }
    /* 3. 「80集」「¥320W」「14天」字体颜色改为 #b89417 */
    html[data-theme="dark"] div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 12px"] > div > div[style*="font-weight: 800"] {
        color: #b89417 !important;
    }
    /* 4. 「已报名 X 人」中的数字颜色改为 #2eab9c */
    html[data-theme="dark"] div[style*="border-top: 1px solid var(--gray-100)"] span > strong[style*="color: var(--primary)"] {
        color: #2eab9c !important;
    }
    /* 5. 高阶课程「AI开发与孵化班」中的「¥4,999」字体颜色改为 #2378c8 */
    html[data-theme="dark"] .grid-3 > .card:nth-child(3) > h3 + div > span[style*="font-size: 28px"] {
        color: #2378c8 !important;
    }
    /* 6. 「AI技术开发者」卡片中的「项目孵化创业直通」颜色改为 #235ecd */
    html[data-theme="dark"] .card[style*="text-align: center"] h3 + p[style*="color: var(--primary)"][style*="font-weight: 500"] {
        color: #235ecd !important;
    }
    /* 同卡片中 ✓ 符号颜色改为 #235ecd */
    html[data-theme="dark"] .card[style*="text-align: center"] ul li > span:first-child[style*="color: var(--primary)"] {
        color: #235ecd !important;
    }
}

/* 桌面端 + 深色模式（无媒体查询限制，电脑浏览器访问）：
   「了解详情 →」按钮颜色：#41639d，其他元素颜色同上 */
:root[data-theme="dark"] body .card > a.btn-outline.btn-sm[href],
html[data-theme="dark"] body .card > a.btn-outline.btn-sm[href] {
    color: #41639d !important;
    border-color: #41639d !important;
}
html[data-theme="dark"] div[style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 12px"] > div > div[style*="font-weight: 800"] {
    color: #b89417 !important;
}
html[data-theme="dark"] div[style*="border-top: 1px solid var(--gray-100)"] span > strong[style*="color: var(--primary)"] {
    color: #2eab9c !important;
}
html[data-theme="dark"] .grid-3 > .card:nth-child(3) > h3 + div > span[style*="font-size: 28px"] {
    color: #2378c8 !important;
}
html[data-theme="dark"] .card[style*="text-align: center"] h3 + p[style*="color: var(--primary)"][style*="font-weight: 500"] {
    color: #235ecd !important;
}
html[data-theme="dark"] .card[style*="text-align: center"] ul li > span:first-child[style*="color: var(--primary)"] {
    color: #235ecd !important;
}

/* ---------- 网格布局工具 ---------- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

/* ---------- 滚动渐入动画 ---------- */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ---------- 粒子背景 ---------- */
.particles-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    /* 渲染性能优化：独立层、隔离绘制 */
    contain: layout paint size;
    content-visibility: auto;
}

.particle {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-cyan);
    opacity: 0.45;
    /* 使用 CSS 变量存储随机偏移，transform 走 GPU 合成层 */
    --dx: 0px;
    --dy: 0px;
    --s: 1;
    transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scale(var(--s, 1));
    will-change: transform, opacity;
    animation: float 15s infinite ease-in-out;
    backface-visibility: hidden;
    perspective: 1000px;
}

.particle:nth-child(odd) {
    background: var(--accent-orange);
}

.particle:nth-child(3n) {
    background: #ffffff;
    opacity: 0.25;
}

@keyframes float {
    0%, 100% {
        transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scale(1);
        opacity: calc(var(--base-opacity, 0.4) * 0.6);
    }
    25% {
        transform: translate3d(calc(var(--bx, 0px) + 24px), calc(var(--by, 0px) - 36px), 0) scale(1.2);
        opacity: calc(var(--base-opacity, 0.4) * 1.4);
    }
    50% {
        transform: translate3d(calc(var(--bx, 0px) - 20px), calc(var(--by, 0px) - 12px), 0) scale(0.8);
        opacity: calc(var(--base-opacity, 0.4) * 0.8);
    }
    75% {
        transform: translate3d(calc(var(--bx, 0px) + 12px), calc(var(--by, 0px) + 24px), 0) scale(1.1);
        opacity: calc(var(--base-opacity, 0.4) * 1.2);
    }
}

/* ---------- 品牌视觉符号：协作圆环 ---------- */
.collab-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.collab-ring svg {
    width: 100%;
    height: 100%;
    animation: rotate 20s linear infinite;
}

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

/* ---------- 数字计数器 ---------- */
.stat-number {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-label {
    font-size: 16px;
    color: var(--gray-500);
    margin-top: 8px;
}

/* ---------- 固定快捷入口悬浮条 ---------- */
.quick-actions {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-action-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all var(--transition-normal);
    color: var(--primary);
}

.quick-action-btn:hover {
    transform: scale(1.1);
    background: var(--primary);
    color: var(--white);
}

.quick-action-btn.orange {
    color: var(--accent-orange-dark);
}

.quick-action-btn.orange:hover {
    background: var(--accent-orange);
    color: var(--white);
}

.quick-action-btn.cyan {
    color: var(--accent-cyan-dark);
}

.quick-action-btn.cyan:hover {
    background: var(--accent-cyan);
    color: var(--white);
}

/* ---------- 页面Banner通用样式 ---------- */
.page-hero {
    background: var(--primary-gradient);
    color: var(--white);
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232DD4BF' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.page-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.page-hero h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.page-hero p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.7;
    text-align: center;
}

.page-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    font-size: 14px;
    opacity: 0.8;
}

.page-breadcrumb a:hover {
    opacity: 1;
    color: var(--accent-cyan-light);
}

/* ---------- 响应式断点 ---------- */
@media (max-width: 1200px) {
    :root {
        --container-width: 100%;
    }
    .grid-5 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .section {
        padding: 80px 0;
    }
    .section-title h2 {
        font-size: 30px;
    }
    .stat-number {
        font-size: 40px;
    }
    .page-hero h1 {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    .section {
        padding: var(--section-padding-mobile);
    }
    .section-title {
        margin-bottom: 40px;
    }
    .section-title h2 {
        font-size: 26px;
        margin-bottom: 12px;
    }
    .section-title p {
        font-size: 15px;
    }
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .card {
        padding: 24px;
    }
    .btn {
        padding: 12px 24px;
        font-size: 15px;
    }
    .btn-lg {
        padding: 14px 30px;
        font-size: 16px;
    }
    .stat-number {
        font-size: 32px;
    }
    .page-hero {
        padding: 100px 0 60px;
    }
    .page-hero h1 {
        font-size: 30px;
    }
    .page-hero p {
        font-size: 16px;
    }
    .quick-actions {
        right: 16px;
        bottom: 16px;
    }
    .quick-action-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    .icon-box {
        width: 52px;
        height: 52px;
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .section-title h2 {
        font-size: 22px;
    }
    .page-hero h1 {
        font-size: 26px;
    }
}

/* ---------- 深色模式额外兜底样式 ---------- */
html[data-theme="dark"] .site-header.scrolled {
    background-color: rgba(10, 20, 40, 0.88);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gray-200);
}
html[data-theme="dark"] .nav-menu a {
    color: var(--gray-700);
}
html[data-theme="dark"] .nav-menu a:hover,
html[data-theme="dark"] .dropdown-menu a:hover {
    color: var(--accent-cyan);
}
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
}
html[data-theme="dark"] .site-footer {
    background: linear-gradient(180deg, #0A1428 0%, #070E1F 100%);
    border-top: 1px solid var(--gray-200);
}
html[data-theme="dark"] .footer-bottom {
    border-top: 1px solid var(--gray-200);
}
html[data-theme="dark"] .policy-wrap {
    background-color: var(--gray-50);
}
html[data-theme="dark"] .policy-card,
html[data-theme="dark"] .sitemap-card,
html[data-theme="dark"] .apply-form,
html[data-theme="dark"] .join-form {
    background-color: var(--surface);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-md);
}
html[data-theme="dark"] .breadcrumb a:hover,
html[data-theme="dark"] .toc-nav a:hover {
    color: var(--accent-cyan);
}
/* 首屏渐变横幅在深色模式下稍微加深避免发白 */
html[data-theme="dark"] .page-hero::before {
    background: radial-gradient(circle at 20% 20%, rgba(45,212,191,.18), transparent 50%), radial-gradient(circle at 80% 60%, rgba(251,146,60,.14), transparent 50%);
}
/* 表单控件深色兜底 */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color: var(--gray-800);
    background-color: var(--gray-100);
    border-color: var(--gray-300);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--gray-400);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    background-color: var(--gray-50);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 4px rgba(52, 227, 206, 0.15);
}
/* 深色模式下，顶部两个按钮的配色微调（轮廓按钮保持可读性） */
html[data-theme="dark"] .nav-actions .btn-outline {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}
html[data-theme="dark"] .nav-actions .btn-outline:hover {
    background-color: var(--accent-cyan);
    color: var(--primary-dark);
}
html[data-theme="dark"] .nav-actions .btn-primary {
    background: linear-gradient(135deg, #1A3A6E, #2A4376);
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
/* Toast 深色微调 */
html[data-theme="dark"] .toast {
    background-color: var(--surface);
    color: var(--gray-800);
    border: 1px solid var(--gray-300);
}

/* ---------- 深色模式文字对比度增强 ---------- */
/* 页脚文字：页脚始终为深色背景，深色模式下gray-300/400太暗不可读 */
html[data-theme="dark"] .site-footer {
    color: var(--gray-500);
}
html[data-theme="dark"] .footer-brand p,
html[data-theme="dark"] .footer-contact li,
html[data-theme="dark"] .footer-col ul li a,
html[data-theme="dark"] .footer-bottom p,
html[data-theme="dark"] .footer-bottom-links a,
html[data-theme="dark"] .footer-icp {
    color: var(--gray-500);
}
html[data-theme="dark"] .footer-col ul li a:hover,
html[data-theme="dark"] .footer-bottom-links a:hover {
    color: var(--accent-cyan-light);
}
html[data-theme="dark"] .social-links a {
    color: var(--gray-500);
    border-color: var(--gray-300);
}
/* 浮动快捷入口按钮：深色模式下图标颜色 */
html[data-theme="dark"] .quick-action-btn {
    color: var(--accent-cyan);
}
html[data-theme="dark"] .quick-action-btn.orange {
    color: var(--accent-orange);
}
html[data-theme="dark"] .quick-action-btn.cyan {
    color: var(--accent-cyan);
}
/* 卡片内标题和正文 */
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
    color: var(--gray-900);
}
/* 深色模式下所有.section-title子元素 */
html[data-theme="dark"] .section-title h2 {
    color: var(--gray-900);
}
html[data-theme="dark"] .section-title p {
    color: var(--gray-500);
}
/* 面包屑和目录链接 */
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .toc-nav a {
    color: var(--gray-500);
}
html[data-theme="dark"] .policy-card h2,
html[data-theme="dark"] .policy-card h3,
html[data-theme="dark"] .policy-card h4 {
    color: var(--gray-900);
}
/* 确保深色模式下所有段落和列表文字可读 */
html[data-theme="dark"] .policy-content p,
html[data-theme="dark"] .policy-content li,
html[data-theme="dark"] .guide-content p,
html[data-theme="dark"] .guide-content li,
html[data-theme="dark"] .faq-content p,
html[data-theme="dark"] .faq-content li {
    color: var(--gray-600);
}
/* 标签/徽章文字 */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .tag {
    color: var(--gray-800);
}

/* 深色模式：覆盖HTML内联style中的白色背景为surface色 */
html[data-theme="dark"] [style*="background: var(--white)"],
html[data-theme="dark"] [style*="background:var(--white)"] {
    background: var(--surface) !important;
}
html[data-theme="dark"] [style*="linear-gradient(180deg, var(--gray-50) 0%, var(--white)"] {
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--surface) 100%) !important;
}
/* 步骤圆圈和徽章在深色模式保持白色背景 */
html[data-theme="dark"] span[style*="background: var(--white)"][style*="color: var(--primary)"],
html[data-theme="dark"] span[style*="background:var(--white)"][style*="color:var(--primary)"] {
    background: #FFFFFF !important;
}
/* 深色模式：HTML <style>块内的白色背景覆盖 */
html[data-theme="dark"] .about-value-card,
html[data-theme="dark"] .about-milestone-card,
html[data-theme="dark"] .about-team-card,
html[data-theme="dark"] .about-partner-logo,
html[data-theme="dark"] .timeline-content,
html[data-theme="dark"] .scene-card,
html[data-theme="dark"] .role-card,
html[data-theme="dark"] .income-card,
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .flow-step,
html[data-theme="dark"] .path-content {
    background: var(--surface) !important;
}

/* ---------- 移动端响应式增强 ---------- */
@media (max-width: 992px) {
    /* 移动端导航栏按钮横排间距 */
    .nav-actions {
        gap: 10px;
    }
}

@media (max-width: 768px) {
    /* 移动端hero区域按钮组横向滚动或堆叠 */
    .nav-hero-cta,
    .hero-cta,
    .cta-group {
        flex-direction: column;
        width: 100%;
    }
    .nav-hero-cta .btn,
    .hero-cta .btn,
    .cta-group .btn {
        width: 100%;
    }
    /* 移动端卡片内边距缩小 */
    .card {
        padding: 20px;
    }
    /* 移动端section内边距 */
    .section {
        padding: 50px 0;
    }
    /* 移动端page-hero内边距 */
    .page-hero {
        padding: 80px 0 50px;
    }
    .page-hero h1 {
        font-size: 28px;
    }
    .page-hero p {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    /* 超小屏hero标题 */
    .page-hero h1 {
        font-size: 24px;
        line-height: 1.35;
    }
    .section-title h2 {
        font-size: 20px;
        line-height: 1.35;
    }
    /* 超小屏卡片内边距 */
    .card {
        padding: 16px;
    }
    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    .btn-lg {
        padding: 12px 24px;
        font-size: 15px;
    }
    /* 超小屏容器内边距 */
    .container {
        padding: 0 14px;
    }
}

/* ======================================================================
   tasks.html 任务卡片：查看详情按钮 - 文字 & 边框颜色 #2378c8
   覆盖 电脑浏览器 / 手机移动端浏览器 / mobile-sim 预览
   ====================================================================== */
/* ---------- 桌面端（电脑浏览器访问） ---------- */
body#tasksPage .card > div[style*="display: flex; align-items: center; justify-content: space-between;"] > div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href],
body#tasksPage .card div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href] {
    color: #2378c8 !important;
    border-color: #2378c8 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
}
body#tasksPage .card > div[style*="display: flex; align-items: center; justify-content: space-between;"] > div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href]:hover,
body#tasksPage .card div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href]:hover {
    color: #2378c8 !important;
    border-color: #2378c8 !important;
    background-color: rgba(35, 120, 200, 0.06) !important;
}

/* ---------- 手机端浏览器访问（≤992px / ≤768px / ≤480px 响应式） ---------- */
@media (max-width: 992px) {
    body#tasksPage .card > div[style*="display: flex; align-items: center; justify-content: space-between;"] > div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href],
    body#tasksPage .card div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href] {
        color: #2378c8 !important;
        border-color: #2378c8 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-appearance: none !important;
    }
    body#tasksPage .card > div[style*="display: flex; align-items: center; justify-content: space-between;"] > div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href]:hover,
    body#tasksPage .card div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href]:hover {
        color: #2378c8 !important;
        border-color: #2378c8 !important;
        background-color: rgba(35, 120, 200, 0.06) !important;
    }
}

/* ---------- IDE 移动预览模式（html[data-mobile-sim]） ---------- */
html[data-mobile-sim] body#tasksPage .card > div[style*="display: flex; align-items: center; justify-content: space-between;"] > div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href],
html[data-mobile-sim] body#tasksPage .card div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href] {
    color: #2378c8 !important;
    border-color: #2378c8 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
}
html[data-mobile-sim] body#tasksPage .card > div[style*="display: flex; align-items: center; justify-content: space-between;"] > div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href]:hover,
html[data-mobile-sim] body#tasksPage .card div[style*="display: flex; gap: 8px;"] > a.btn.btn-outline.btn-sm[href]:hover {
    color: #2378c8 !important;
    border-color: #2378c8 !important;
    background-color: rgba(35, 120, 200, 0.06) !important;
}