/* ---------- RESET & 全屏基础 ---------- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 独立模块 + 全屏模式：根元素占满视口，背景纯白，无外部依赖 */
        html, body {
            width: 100%;
            min-height: 100vh;
            background: #ffffff;
        }

        body {
            font-family: system-ui, "Segoe UI", "Microsoft YaHei", "PingFang SC", Roboto, "Helvetica Neue", sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        /* 主容器：全屏响应式，内容最大宽度舒适，左右留白自动，但仍保持全屏背景 */
        .faq-fullscreen-module {
            width: 100%;
            max-width: 1440px;
            margin: 0 auto;
            padding: 40px 60px 80px 60px;
            background: #ffffff;
            box-shadow: none; /* 干净无投影，保证全屏一体化 */
        }

        /* 针对较小屏幕调整内边距，保持呼吸感 */
        @media (max-width: 768px) {
            .faq-fullscreen-module {
                padding: 24px 20px 60px 20px;
            }
        }

        /* ---------- 标题样式 ---------- */
        .faq-title {
            text-align: center;
            font-size: 48px;
            font-weight: 600;
            color: #111;
            margin-bottom: 28px;
            letter-spacing: -0.3px;
        }

        .divider-top {
            height: 1px;
            background: #eaeef2;
            margin-bottom: 48px;
            width: 100%;
        }

        /* 两栏布局：左侧导航 + 右侧内容 */
        .faq-layout {
            display: flex;
            gap: 64px;
            align-items: flex-start;
            flex-wrap: wrap; /* 移动端可换行，保持自适应 */
        }

        /* 左侧分类导航 (独立模块化视觉) */
        .faq-sidebar {
            width: 200px;
            flex-shrink: 0;
            border-left: 2px solid #eef2f6;
            padding-left: 24px;
        }

        .sidebar-item {
            font-size: 16px;
            font-weight: 450;
            color: #5b6e8c;
            margin: 22px 0;
            cursor: pointer;
            padding: 4px 0;
            transition: all 0.2s ease;
            position: relative;
        }

        .sidebar-item:hover {
            color: #1a2c3e;
        }

        .sidebar-item.active {
            color: #0a1c2f;
            font-weight: 600;
            border-left: 2px solid #0a1c2f;
            margin-left: -26px;
            padding-left: 24px;
        }

        /* 右侧 QA 列表区域 — 弹性伸缩 */
        .faq-content {
            flex: 1;
            min-width: 0; /* 防止溢出 */
        }

        /* 问答组容器（每个分类独立） */
        .faq-group {
            width: 100%;
            animation: fadeSlide 0.2s ease-out;
        }

        @keyframes fadeSlide {
            from {
                opacity: 0;
                transform: translateY(6px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 每个问答条目：独立模块边界 */
        .faq-item {
            border-bottom: 1px solid #edf0f5;
            padding: 20px 0;
            transition: background 0.2s;
        }

        /* 问题行：使用 flex 布局，伪元素实现三角图标（收起时向下正三角 ▼，展开时向上倒三角 ▲） */
        .faq-question {
            font-size: 17px;
            font-weight: 500;
            color: #1f2f45;
            cursor: pointer;
            line-height: 1.5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            transition: color 0.2s;
        }

        /* 默认状态：向下正三角 (表示可展开/当前收起) */
        .faq-question::after {
            content: "▼";
            font-size: 14px;
            font-weight: normal;
            color: #8e9eae;
            transition: transform 0.2s, color 0.2s;
            line-height: 1;
            display: inline-block;
        }

        /* 激活状态（展开）：倒三角 ▲ 表示可收起 */
        .faq-question.active::after {
            content: "▲";
            color: #1a2c3e;
        }

        .faq-question:hover {
            color: #000;
        }

        .faq-question.active {
            color: #0a1c2f;
            font-weight: 600;
        }

        .faq-answer {
            margin-top: 12px;
            font-size: 15px;
            color: #3e4e64;
            line-height: 1.6;
            padding-right: 12px;
            display: none;
            background: #fafcff;
            padding: 14px 18px;
            border-radius: 14px;
            margin-top: 14px;
            border: 1px solid #f0f3f9;
        }

        .faq-answer.show {
            display: block;
        }

        /* 使答案区域内链接样式（若有）自然 */
        .faq-answer a {
            color: #2469F0;
            text-decoration: none;
        }

        /* 响应式：窄屏时左侧导航可转为顶部或者flex自适应 */
        @media (max-width: 760px) {
            .faq-layout {
                flex-direction: column;
                gap: 24px;
            }
            .faq-sidebar {
                width: 100%;
                border-left: none;
                padding-left: 0;
                display: flex;
                flex-wrap: wrap;
                gap: 12px 28px;
                border-bottom: 1px solid #eef2f6;
                padding-bottom: 16px;
            }
            .sidebar-item {
                margin: 0;
                border-left: none;
                padding: 6px 0;
            }
            .sidebar-item.active {
                margin-left: 0;
                padding-left: 0;
                border-left: none;
                border-bottom: 2px solid #0a1c2f;
                color: #0a1c2f;
            }
            .faq-question {
                font-size: 16px;
            }
            .faq-question::after {
                font-size: 13px;
            }
        }

        /* 保持全屏背景干净，模块内部组件完全独立 */
        .faq-fullscreen-module, body, html {
            background: #ffffff;
        }

        /* 无额外全局干扰 */
        button, input, textarea {
            font-family: inherit;
        }