* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-primary: #0a0a0a;
            --bg-secondary: #121212;
            --bg-card: #1a1a1a;
            --text-primary: #ffffff;
            --text-secondary: #b0b0b0;
            --accent: #ff3b30;
            --accent-hover: #ff5248;
            --border: #2a2a2a;
        }

        [data-theme="light"] {
            --bg-primary: #ffffff;
            --bg-secondary: #f5f5f7;
            --bg-card: #f0f0f5;
            --text-primary: #1d1d1f;
            --text-secondary: #6e6e73;
            --accent: #ff3b30;
            --accent-hover: #ff5248;
            --border: #d2d2d7;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.7;
            transition: background-color 0.3s, color 0.3s;
        }

        a {
            color: var(--text-primary);
            text-decoration: none;
            transition: color 0.2s;
        }

        a:hover {
            color: var(--accent);
        }

        /* 核心调整：减少留白，扩大内容宽度 */
        .container {
            max-width: 1400px;  /* 从1200px扩大到1400px */
            margin: 0 auto;
            padding: 0 16px;    /* 从20px减少到16px */
            width: 100%;
        }

        /* Header */
        header {
            padding: 20px 0;    /* 增加头部内边距 */
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            background-color: var(--bg-primary);
            z-index: 100;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 22px;    /* 从18px增大到22px */
            font-weight: 700;
            color: var(--accent);
        }

        .nav {
            display: flex;
            gap: 28px;          /* 增加导航间距 */
        }

        .nav a {
            font-size: 16px;    /* 从14px增大到16px */
            font-weight: 500;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .lang-switch {
            font-size: 14px;    /* 从12px增大到14px */
            color: var(--text-secondary);
        }

        .btn {
            padding: 10px 20px; /* 增大按钮尺寸 */
            border-radius: 8px;
            font-size: 16px;    /* 从14px增大到16px */
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }

        .btn-primary {
            background-color: var(--accent);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--accent-hover);
        }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 4px;
            cursor: pointer;
        }

        .hamburger span {
            width: 28px;        /* 增大汉堡菜单尺寸 */
            height: 3px;
            background-color: var(--text-primary);
            transition: all 0.3s;
        }

        .mobile-menu {
            display: none;
            position: absolute;
            top: 70px;          /* 适配头部高度 */
            left: 0;
            right: 0;
            background-color: var(--bg-secondary);
            padding: 24px;      /* 增大移动端菜单内边距 */
            flex-direction: column;
            gap: 20px;         /* 增大移动端菜单间距 */
            border-bottom: 1px solid var(--border);
        }

        .mobile-menu a {
            font-size: 18px;    /* 增大移动端菜单字体 */
        }

        .mobile-menu.active {
            display: flex;
        }

        /* Hero Section - 重点优化 */
        .hero {
            padding: 80px 0;    /* 增加上下内边距 */
            text-align: center;
        }

        .hero-icon {
            width: 72px;        /* 增大图标尺寸 */
            height: 72px;
            border-radius: 50%;
            margin: 0 auto 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 38px;    /* 增大图标内字体 */
            color: white;
        }

        .hero h1 {
            font-size: 64px;    /* 从48px增大到64px */
            font-weight: 700;
            margin-bottom: 12px;
            letter-spacing: -1px;
        }

        .hero-subtitle {
            font-size: 22px;    /* 从14px增大到22px */
            color: var(--text-secondary);
            margin-bottom: 20px;
        }

        .hero-desc {
            max-width: 800px;   /* 扩大描述文本宽度 */
            margin: 0 auto 32px;
            font-size: 18px;    /* 从14px增大到18px */
            color: var(--text-secondary);
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;  /* 增大徽章尺寸 */
            background-color: var(--bg-card);
            border-radius: 24px;
            font-size: 16px;    /* 从12px增大到16px */
            color: var(--text-secondary);
        }

        .hero-badge .new-tag {
            background-color: var(--accent);
            color: white;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;    /* 从10px增大到12px */
            font-weight: 600;
        }

        /* Quick Start Section */
        .section {
            padding: 60px 0;    /* 增加区块内边距 */
        }

        .section-title {
            font-size: 20px;    /* 从14px增大到20px */
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 32px;/* 增加标题下边距 */
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .install-card {
            background-color: var(--bg-card);
            border-radius: 16px;/* 增大圆角 */
            padding: 28px;      /* 增大内边距 */
            max-width: 800px;   /* 扩大安装卡片宽度 */
            margin: 0 auto;
        }

        .install-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 20px;
        }

        .install-tab {
            padding: 10px 20px; /* 增大选项卡尺寸 */
            border-radius: 8px;
            font-size: 16px;    /* 从12px增大到16px */
            cursor: pointer;
            transition: all 0.2s;
        }

        .install-tab.active {
            background-color: var(--accent);
            color: white;
        }

        .install-note {
            font-size: 16px;    /* 从12px增大到16px */
            color: var(--text-secondary);
            margin-bottom: 16px;
        }

        .install-code {
            background-color: var(--bg-primary);
            padding: 20px;      /* 增大代码块内边距 */
            border-radius: 10px;
            font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
            font-size: 16px;    /* 从12px增大到16px */
            color: var(--text-secondary);
            overflow-x: auto;
            line-height: 1.8;
        }

        .install-support {
            font-size: 14px;    /* 从10px增大到14px */
            color: var(--text-secondary);
            margin-top: 16px;
            text-align: center;
        }

        /* Features Section */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* 增大卡片最小宽度 */
            gap: 24px;         /* 增大卡片间距 */
        }

        .feature-card {
            background-color: var(--bg-card);
            border-radius: 16px;
            padding: 32px;      /* 增大卡片内边距 */
        }

        .feature-icon {
            width: 48px;        /* 增大图标尺寸 */
            height: 48px;
            background-color: var(--bg-primary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            color: var(--accent);
            font-size: 24px;    /* 增大图标内字体 */
        }

        .feature-card h3 {
            font-size: 20px;    /* 从14px增大到20px */
            font-weight: 600;
            margin-bottom: 12px;
        }

        .feature-card p {
            font-size: 16px;    /* 从12px增大到16px */
            color: var(--text-secondary);
        }

        /* Quick Links Section */
        .quick-links {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 增大卡片最小宽度 */
            gap: 60px;         /* 增大卡片间距 */
            margin-top: 60px;   /* 增加上边距 */
        }

        .quick-link-card {
            background-color: var(--bg-card);
            border-radius: 16px;
            padding: 20px;      /* 增大内边距 */
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .quick-link-icon {
            width: 40px;        /* 增大图标尺寸 */
            height: 40px;
            background-color: var(--bg-primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 18px;    /* 增大图标内字体 */
        }

        .quick-link-content h4 {
            font-size: 16px;    /* 从12px增大到18px */
            font-weight: 600;
            margin-bottom: 6px;
        }

        .quick-link-content p {
            font-size: 14px;    /* 从10px增大到14px */
            color: var(--text-secondary);
        }

        /* Testimonials Section */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* 增大卡片最小宽度 */
            gap: 24px;         /* 增大卡片间距 */
        }

        .testimonial-card {
            background-color: var(--bg-card);
            border-radius: 16px;
            padding: 28px;      /* 增大内边距 */
        }

        .testimonial-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }

        .testimonial-avatar {
            width: 48px;        /* 增大头像尺寸 */
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;    /* 增大头像内字体 */
            font-weight: 700;
            color: white;
        }

        .testimonial-name {
            font-size: 16px;    /* 从12px增大到16px */
            font-weight: 600;
        }

        .testimonial-handle {
            font-size: 14px;    /* 从10px增大到14px */
            color: var(--text-secondary);
        }

        .testimonial-text {
            font-size: 16px;    /* 从12px增大到16px */
            color: var(--text-secondary);
            line-height: 1.8;
        }

        /* FAQ Section */
        .faq-section {
            padding: 80px 0;    /* 增加FAQ区块内边距 */
        }

        .faq-title {
            text-align: center;
            font-size: 28px;    /* 从18px增大到28px */
            font-weight: 600;
            margin-bottom: 20px;
        }

        .faq-subtitle {
            text-align: center;
            font-size: 18px;    /* 从12px增大到18px */
            color: var(--text-secondary);
            margin-bottom: 60px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .faq-item {
            border-bottom: 1px solid var(--border);
            max-width: 900px;   /* 扩大FAQ宽度 */
            margin: 0 auto;
        }

        .faq-question {
            padding: 20px 0;    /* 增大问题区域内边距 */
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 18px;    /* 从14px增大到18px */
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s;
            font-size: 16px;    /* 从12px增大到16px */
            color: var(--text-secondary);
            padding: 0 0 20px;
            line-height: 1.8;
        }

        .faq-answer.active {
            max-height: 300px;  /* 增大答案最大高度 */
        }

        .faq-toggle {
            font-size: 24px;    /* 从18px增大到24px */
            color: var(--text-secondary);
            transition: transform 0.3s;
        }

        .faq-toggle.active {
            transform: rotate(45deg);
        }

        /* Subscribe Section */
        .subscribe-section {
            padding: 80px 0;    /* 增加订阅区块内边距 */
        }

        .subscribe-card {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 20px;/* 增大圆角 */
            padding: 56px;      /* 增大内边距 */
            text-align: center;
            max-width: 800px;   /* 扩大订阅卡片宽度 */
            margin: 0 auto;
        }

        .subscribe-title {
            font-size: 22px;    /* 从16px增大到22px */
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--accent);
        }

        .subscribe-desc {
            font-size: 18px;    /* 从12px增大到18px */
            color: var(--text-secondary);
            margin-bottom: 32px;
            line-height: 1.8;
        }

        .subscribe-form {
            display: flex;
            gap: 12px;
            max-width: 500px;   /* 扩大表单宽度 */
            margin: 0 auto;
        }

        .subscribe-input {
            flex: 1;
            padding: 16px 20px; /* 增大输入框内边距 */
            border-radius: 10px;
            border: 1px solid var(--border);
            background-color: var(--bg-primary);
            color: var(--text-primary);
            font-size: 16px;    /* 增大输入框字体 */
        }

        /* Footer */
        footer {
            padding: 60px 0 40px; /* 增加页脚内边距 */
            border-top: 1px solid var(--border);
        }

        .footer-nav {
            display: flex;
            justify-content: center;
            gap: 32px;         /* 增大页脚导航间距 */
            margin-bottom: 32px;
            flex-wrap: wrap;
        }

        .footer-nav a {
            font-size: 16px;    /* 从12px增大到16px */
            color: var(--text-secondary);
        }

        .footer-copyright {
            text-align: center;
            font-size: 14px;    /* 从10px增大到14px */
            color: var(--text-secondary);
            line-height: 1.8;
        }

        /* Theme Toggle */
        .theme-toggle {
            position: fixed;
            bottom: 30px;       /* 调整位置 */
            right: 30px;
            width: 60px;        /* 增大切换按钮尺寸 */
            height: 60px;
            border-radius: 50%;
            background-color: var(--accent);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
            transition: all 0.3s;
            font-size: 24px;    /* 增大图标尺寸 */
        }

        .theme-toggle:hover {
            transform: scale(1.1);
        }

        /* Responsive - 适配移动端 */
        @media (max-width: 768px) {
            .nav {
                display: none;
            }

            .hamburger {
                display: flex;
            }

            .hero h1 {
                font-size: 48px; /* 移动端适当调整 */
            }
            
            .hero-subtitle {
                font-size: 18px;
            }
            
            .hero-desc {
                font-size: 16px;
            }

            .features-grid,
            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            .subscribe-form {
                flex-direction: column;
            }
            
            .subscribe-card {
                padding: 32px 20px;
            }
            
            .faq-title {
                font-size: 24px;
            }
            
            .faq-subtitle {
                font-size: 16px;
            }
            
            .theme-toggle {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }
        }




/* 全局变量与基础重置 */
:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #121212;
    --bg-card: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --accent: #ff3b30;
    --accent-hover: #ff5248;
    --border: #2a2a2a;
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-card: #f0f0f5;
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --accent: #ff3b30;
    --accent-hover: #ff5248;
    --border: #d2d2d7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    transition: background-color 0.3s, color 0.3s;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--accent);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
}

/* 博客列表页样式 */
.blog-list-section {
    padding: 60px 0;
}

.blog-header {
    text-align: center;
    margin-bottom: 48px;
}

.blog-header h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 8px;
}

.blog-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
    gap: 24px;
}

.blog-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

.blog-cover {
    width: 200px;
    flex-shrink: 0;
}

.blog-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-content {
    padding: 20px;
    flex: 1;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.blog-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.blog-excerpt {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.blog-tags {
    display: flex;
    gap: 6px;
}

.tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    color: white;
}

.tag-announcement { background-color: #ff3b30; }
.tag-release { background-color: #2ea44f; }
.tag-models { background-color: #6f42c1; }
.tag-technical { background-color: #007bff; }
.tag-architecture { background-color: #17a2b8; }
.tag-contextengine { background-color: #28a745; }
.tag-guide { background-color: #fd7e14; }
.tag-soulmd { background-color: #e83e8c; }
.tag-personality { background-color: #6f42c1; }
.tag-beginners { background-color: #20c997; }
.tag-installation { background-color: #17a2b8; }
.tag-docker { background-color: #2496ed; }
.tag-deployment { background-color: #dc3545; }
.tag-security { background-color: #28a745; }
.tag-feishu { background-color: #0099ff; }
.tag-lark { background-color: #00c1b6; }
.tag-china { background-color: #de2910; }
.tag-integration { background-color: #6610f2; }
.tag-android { background-color: #3ddc84; }
.tag-termux { background-color: #000000; }
.tag-mobile { background-color: #ff9800; }
.tag-robotics { background-color: #9c27b0; }
.tag-unitree { background-color: #00bcd4; }
.tag-ros { background-color: #222222; }
.tag-hardware { background-color: #607d8b; }
.tag-media { background-color: #95a5a6; }
.tag-community { background-color: #ffc107; }
.tag-events { background-color: #3f51b5; }
.tag-spotlight { background-color: #8bc34a; }

/* 博客详情页样式 */
.blog-post-page {
    padding: 40px 0;
}

.post-back {
    margin-bottom: 24px;
}

.back-link {
    font-size: 14px;
    color: var(--text-secondary);
}

.post-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.post-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.post-author-block {
    display: flex;
    flex-direction: column;
}

.post-author {
    font-weight: 600;
    color: var(--text-primary);
}

.post-handle {
    font-size: 12px;
}

.post-cover {
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
}

.post-cover img {
    width: 100%;
    height: auto;
}

.post-content {
    max-width: 100%;
    margin: 0 auto;
}

.post-section {
    margin-bottom: 32px;
}

.post-section h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--accent);
}

.post-section p {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 48px 0;
    padding: 24px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.nav-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.nav-title {
    font-size: 16px;
    font-weight: 500;
}

.post-share {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

.share-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.share-icons {
    display: flex;
    gap: 12px;
}

.share-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-primary);
}

/* 订阅区样式 */
.subscribe-section {
    padding: 80px 0;
}

.subscribe-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 56px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.subscribe-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--accent);
}

.subscribe-desc {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.8;
}

.subscribe-form {
    display: flex;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.subscribe-input {
    flex: 1;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .blog-header h1 {
        font-size: 36px;
    }

    .blog-card {
        flex-direction: column;
    }

    .blog-cover {
        width: 100%;
        height: 200px;
    }

    .post-title {
        font-size: 28px;
    }

    .post-navigation {
        flex-direction: column;
        gap: 24px;
    }

    .subscribe-form {
        flex-direction: column;
    }

    .subscribe-card {
        padding: 32px 20px;
    }

    .theme-toggle {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* 博客详情页：左右布局容器 */
.post-container {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 左侧文章主体 */
.post-main {
    max-width: 100%;
}

/* 右侧边栏 */
.post-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--accent);
}

/* 相关文章列表 */
.related-posts {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.related-item {
    display: flex;
    gap: 12px;
}

.related-cover {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.related-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.related-content h4 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 4px;
}

.related-date {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 响应式适配：在小屏幕上，边栏移到文章下方 */
@media (max-width: 1024px) {
    .post-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .post-sidebar {
        order: 2;
    }
}

/* 安装页面全局样式 */
.install-page {
    padding: 40px 0 60px;
}

.install-header {
    text-align: center;
    margin-bottom: 48px;
}

.install-header h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
}

.install-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.version-tag {
    background-color: var(--accent);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.install-section {
    margin-bottom: 48px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 24px;
}

.section-icon {
    font-size: 18px;
}

/* 网格布局通用 */
.grid {
    display: grid;
    gap: 16px;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* 系统要求 */
.system-requirements {
    background-color: var(--bg-card);
    padding: 24px;
    border-radius: 12px;
}

.req-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.req-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.req-card p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 安装选项卡 */
.install-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.install-tab {
    padding: 8px 16px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.install-tab.active {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.install-tab-content {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 12px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* 代码块通用样式 */
.code-block {
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    white-space: pre-wrap;
    line-height: 1.6;
}

.code-block code {
    flex: 1;
}

.copy-btn {
    background-color: var(--bg-secondary);
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    align-self: flex-start;
}

.copy-btn:hover {
    background-color: var(--accent);
    color: white;
}

.tab-note {
    font-size: 12px;
    color: var(--text-secondary);
}

.install-tip {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
}

/* 验证安装 */
.verify-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.verify-step {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
}

.step-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* 初始配置 */
.config-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.config-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.config-step {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
}

.config-step h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.config-step p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.tag-inline {
    background-color: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-primary);
    margin-right: 4px;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn-outline:hover {
    background-color: var(--accent);
    color: white;
}

.config-note {
    margin-top: 16px;
    padding: 16px;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* 升级 OpenClaw */
.upgrade-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.upgrade-methods {
    margin-bottom: 16px;
}

.upgrade-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
}

.upgrade-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.release-link {
    font-size: 14px;
    color: var(--accent);
    display: inline-block;
}

/* 故障排查折叠面板 */
.troubleshoot-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accordion-item {
    background-color: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
}

.accordion-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.accordion-toggle {
    font-size: 18px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.accordion-content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s, padding 0.3s;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.accordion-content.active {
    padding: 0 20px 20px;
    max-height: 200px;
}

/* 遇到问题卡片 */
.help-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin: 40px 0;
}

.help-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
}

.help-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .install-header h1 {
        font-size: 28px;
    }

    .install-tab {
        flex: 1;
        text-align: center;
    }

    .code-block {
        flex-direction: column;
    }

    .copy-btn {
        align-self: flex-end;
    }

    .help-buttons {
        flex-direction: column;
    }

    .help-buttons .btn {
        width: 100%;
    }
}


/* 生态页面全局样式 */
.ecosystem-page {
    padding: 40px 0 60px;
}

.ecosystem-header {
    text-align: center;
    margin-bottom: 48px;
}

.ecosystem-header .badge {
    display: inline-block;
    background-color: var(--accent);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}

.ecosystem-header h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
}

.ecosystem-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
}

.link-accent {
    color: var(--accent);
    font-weight: 500;
}

/* 生态板块 */
.eco-section {
    margin-bottom: 48px;
}

.eco-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
}

.eco-icon {
    font-size: 18px;
}

.eco-section-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.eco-tip {
    background-color: var(--bg-secondary);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.eco-tip span {
    font-weight: 600;
    color: var(--accent);
}

/* 生态卡片网格 */
.eco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.eco-card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
}

.eco-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.eco-platform-icon {
    font-size: 20px;
    font-weight: 700;
}

.eco-tag {
    background-color: #2ea44f;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.eco-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.eco-card p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.eco-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.eco-tag-small {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.btn-tag {
    background-color: var(--accent);
    color: white;
}

.eco-link {
    font-size: 11px;
    color: var(--text-secondary);
    display: block;
}

/* 底部 CTA */
.eco-cta {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin: 40px 0;
}

.eco-cta h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.eco-cta p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.eco-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.eco-cta-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .ecosystem-header h1 {
        font-size: 28px;
    }

    .eco-grid {
        grid-template-columns: 1fr;
    }

    .eco-cta-buttons {
        flex-direction: column;
    }

    .eco-cta-buttons .btn {
        width: 100%;
    }
}

.pagination-wrap {padding: 20px 10px;margin-top: 20px;background: #fff;border-radius: 8px;}
        .pagination-wrap .paging-cls {text-align: center;}
        .pagination-wrap .paging-cls li {display: inline-block;margin: 0 5px;list-style: none;}
        .pagination-wrap .paging-cls span, .pagination-wrap .paging-cls a {display: inline-block;border: 1px solid #eef3f8;border-radius: 5px;height: 44px;line-height: 44px;width: 44px;margin: 0 3px;font-size: 14px;color: #000000;text-decoration: none;}