/* ===== 整体容器 ===== */
.navigator .menu .qa-link {
    border-bottom: 0.125rem #FF6F08 solid; /* 2px */
}

.qa-container {
    max-width: 68.75rem; /* 1100px */
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3.75rem; /* 40px 20px 60px */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1f2a3a;
    background: #fff;
    min-height: 78vh;
}

img {
    max-width: 100%;
}

/* ===== 头部 ===== */
.qa-header {
    text-align: center;
    padding-bottom: 1.875rem; /* 30px */
    border-bottom: 0.0625rem solid #eef1f4; /* 1px */
    margin-bottom: 2.5rem; /* 40px */
}

.qa-title {
    font-size: 2rem; /* 32px */
    font-weight: 600;
    color: #0b1c2e;
    margin: 0 0 0.5rem 0; /* 8px */
    letter-spacing: -0.03125rem; /* -0.5px */
}

.qa-subtitle {
    font-size: 1.125rem; /* 18px */
    color: #5e6e7e;
    margin: 0 0 0.375rem 0; /* 6px */
    font-weight: 400;
}

.qa-small {
    font-size: 0.875rem; /* 14px */
    color: #8a9aa8;
    display: block;
    margin-bottom: 1.125rem; /* 18px */
}

/* ===== 搜索框 ===== */
.search-box {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    max-width: 31.25rem; /* 500px */
    margin: 0 0 0 auto;
}

.search-input {
    flex: 1;
    padding: 0.625rem 1rem; /* 10px 16px */
    border: 0.0625rem solid #d0d7de; /* 1px */
    border-radius: 0.375rem; /* 6px */
    font-size: 0.875rem; /* 14px */
    background: #f8fafc;
    transition: all 0.2s;
    outline: none;
}

.search-input:focus {
    border-color: #1e6bb8;
    background: #fff;
    box-shadow: 0 0 0 0.1875rem rgba(30, 107, 184, 0.1); /* 3px */
}

.search-btn {
    padding: 0.625rem 1.5rem; /* 10px 24px */
    background: #1e6bb8;
    color: #fff;
    border: none;
    border-radius: 0.375rem; /* 6px */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.search-btn:hover {
    background: #15549a;
}

/* ===== 分类标签 ===== */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.25rem; /* 8px 4px */
    margin-bottom: 1.875rem; /* 30px */
    padding-bottom: 1.125rem; /* 18px */
    border-bottom: 0.0625rem solid #eef1f4; /* 1px */
}

.tab-btn {
    padding: 0.375rem 1.125rem; /* 6px 18px */
    background: transparent;
    border: none;
    border-radius: 1.25rem; /* 20px */
    font-size: 0.875rem; /* 14px */
    font-weight: 450;
    color: #5e6e7e;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: #1e6bb8;
    background: #f0f5fb;
}

.tab-btn.active {
    color: #1e6bb8;
    background: #e6f0fa;
    font-weight: 500;
}

/* ===== Q&A 列表 ===== */
.qa-list {
    margin-top: 0.625rem; /* 10px */
}

.qa-item {
    border-bottom: 0.0625rem solid #f0f3f6; /* 1px */
    transition: background 0.15s;
}

.qa-item:last-child {
    border-bottom: none;
}

/* ----- 问题 ----- */
.qa-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0.5rem; /* 16px 8px */
    cursor: pointer;
    user-select: none;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    color: #1f2a3a;
    transition: color 0.2s;
}

.qa-question:hover {
    color: #1e6bb8;
}

.question-text {
    flex: 1;
    margin-right: 1.25rem; /* 20px */
    line-height: 1.5;
    font-weight: 600;
}

.toggle-icon {
    font-size: 0.8125rem; /* 13px */
    color: #9aabbb;
    transition: transform 0.3s, color 0.3s;
    flex-shrink: 0;
}

.qa-item.active .toggle-icon {
    transform: rotate(180deg);
    color: #1e6bb8;
}

/* ----- 答案 ----- */
.qa-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0 0.5rem; /* 8px */
    color: #3a4a5a;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.8;
}

.qa-item.active .qa-answer {
    max-height: 37.5rem; /* 600px */
    padding: 0 0.5rem 1.375rem 0.5rem; /* 0 8px 22px 8px */
    overflow-y: auto;
}

.qa-answer p {
    margin: 0 0 0.75rem 0; /* 12px */
}

/* ----- 问答条目卡片化背景 ----- */
.qa-item {
    background: #f8fafc; /* 整体浅灰蓝底 */
    border-radius: 0.5rem; /* 8px 圆角，与搜索框一致 */
    margin-bottom: 0.75rem; /* 12px 间距，替代原边框分割 */
    border-bottom: none; /* 去掉原边框，用间距和背景区分 */
    transition: background 0.15s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); /* 极淡阴影增加立体感 */
}

.qa-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* 悬停加深一点 */
}

/* 问题标题背景（覆盖在条目背景之上） */
.qa-question {
    background: #eef2f6; /* 比条目背景稍深，形成区分 */
    border-radius: 0.5rem 0.5rem 0 0; /* 上方圆角，与条目圆角匹配 */
    padding: 0.875rem 1rem; /* 稍增加内边距，更舒服 */
    margin: 0; /* 去除默认边距 */
    transition: background 0.2s;
}

/* 展开时，标题底部圆角消失（与答案连成一体） */
.qa-item.active .qa-question {
    border-radius: 0.5rem 0.5rem 0 0;
}

/* 答案区域背景微调（可保持纯白，或继承条目背景） */
.qa-answer {
    background: #ffffff; /* 答案区域纯白，与标题区分 */
    border-radius: 0 0 0.5rem 0.5rem; /* 下方圆角 */
    padding: 0 1rem 1.25rem 1rem; /* 调整内边距，配合新设计 */
}

/* 非展开状态时，答案区域隐藏，但背景不显示 */
.qa-item:not(.active) .qa-answer {
    padding: 0 1rem; /* 保留左右内边距 */
    max-height: 0;
}

/* 调整 toggle-icon 在标题中的位置 */
.qa-question .toggle-icon {
    margin-left: 0.5rem;
}

/* ----- Q&A 答案中的表格基础样式 -----
   粘贴的表格即使没有内联样式，也保证有网格线、表头背景等，风格与本页同系：
   表头浅蓝底蓝字，单元格浅灰网格线，隔行浅灰底。
   表格自带的内联样式优先级更高（style 属性 > class），原文档格式仍然生效。 */
.qa-answer table {
    width: 100%;
    margin: 0 0 0.75rem 0; /* 12px，与段落间距一致 */
    border-collapse: collapse;
    font-size: 0.9375rem; /* 15px，与正文一致 */
    line-height: 1.6;
}

.qa-answer th,
.qa-answer td {
    border: 1px solid #d0d7de; /* 1px 浅灰网格线（与搜索框边框同色） */
    padding: 0.5rem 0.75rem; /* 8px 12px */
    vertical-align: top;
}

.qa-answer th {
    background-color: #e6f0fa; /* 浅蓝表头底（与页面链接/选中色同系） */
    color: #1e6bb8;
    font-weight: 600;
    text-align: center;
}

.qa-answer td {
    text-align: left;
    color: #3a4a5a;
}

.qa-answer tbody tr:nth-child(even) td {
    background-color: #ecf1f7; /* 隔行浅灰（与搜索框底色同系） */
}

@media (max-width: 480px) {
    .qa-answer table {
        font-size: 0.8125rem; /* 13px，窄屏略缩 */
    }

    .qa-answer th,
    .qa-answer td {
        padding: 0.375rem 0.5rem; /* 6px 8px */
    }
}

/* ----- Q&A 答案中的链接：默认样式 + “卡片”样式 ----- */
.qa-answer a {
    color: #1e6bb8;
    text-decoration: underline;
    word-break: break-all;
}

.qa-answer a:hover {
    color: #15549a;
    text-decoration: underline;
}

/* 卡片 v1（简单内嵌）：兼容旧存量数据 */
.qa-answer a.qa-link-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem; /* 10px 16px */
    margin: 0.25rem 0 0.5rem;
    border: 1px solid #d0d7de;
    border-radius: 0.5rem;
    background: #f8fafc;
    text-decoration: none;
    color: #1e6bb8;
    max-width: 100%;
}

.qa-answer a.qa-link-card:hover {
    border-color: #1e6bb8;
    color: #15549a;
    background: #f0f5fb;
    text-decoration: none;
}

.qa-answer a.qa-link-card::after {
    content: "›";
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
}

/* 卡片 v2：双行布局。有图：上行[图|文字]+下行链接；无图：两行一列（文字行+链接行） */
.qa-answer a.qa-link-card-v2 {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-areas: "img txt" "url url";
    gap: 0.375rem 0.75rem;
    padding: 0.625rem 0.875rem;
    margin: 0.25rem 0 0.5rem;
    border: 1px solid #d0d7de;
    border-radius: 0.625rem;
    background: #f8fafc;
    text-decoration: none;
    color: #1f2a3a;
    align-items: start;
    max-width: 100%;
}

.qa-answer a.qa-link-card-v2.qa-link-card-noimg {
    grid-template-columns: 1fr;
    grid-template-areas: "txt" "url";
}

.qa-answer a.qa-link-card-v2:hover {
    border-color: #1e6bb8;
    background: #f0f5fb;
    text-decoration: none;
}

.qa-answer a.qa-link-card-v2::after {
    content: none;
}

.qa-answer a.qa-link-card-v2 .qa-card-img {
    grid-area: img;
}

.qa-answer a.qa-link-card-v2 .qa-card-img img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 0.375rem;
    display: block;
    background: #eef1f4;
}

.qa-answer a.qa-link-card-v2 .qa-card-title {
    grid-area: txt;
    color: #1f2a3a;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.qa-answer a.qa-link-card-v2 .qa-card-url {
    grid-area: url;
    color: #8a9aa8;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}

/* ----- 标签 ----- */
.qa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px */
    margin-top: 0.75rem; /* 12px */
}

.tag {
    display: inline-block;
    background: #f0f3f6;
    color: #5e6e7e;
    font-size: 0.75rem; /* 12px */
    padding: 0.125rem 0.875rem; /* 2px 14px */
    border-radius: 1.875rem; /* 30px */
    letter-spacing: 0.01875rem; /* 0.3px */
}

/* ===== 无结果/客服引导 ===== */
.no-result {
    text-align: center;
    padding: 3.125rem 1.25rem 1.875rem; /* 50px 20px 30px */
    color: #5e6e7e;
    font-size: 1rem; /* 16px */
    border-top: 0.0625rem solid #f0f3f6; /* 1px */
    margin-top: 1.25rem; /* 20px */
}

.no-result p {
    margin: 0.375rem 0; /* 6px */
}

.no-result .hint {
    margin-top: 1rem; /* 16px */
    font-size: 0.875rem; /* 14px */
    color: #8a9aa8;
}

.no-result img {
    display: block;
    max-width: 10rem; /* 160px */
    margin: 1rem auto 0; /* 16px */
    border: 0.0625rem solid #eef1f4; /* 1px */
    border-radius: 0.5rem; /* 8px */
    padding: 0.5rem; /* 8px */
    background: #fafcfd;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .qa-container {
        padding: 1.5rem 1rem 2.5rem; /* 24px 16px 40px */
    }

    .qa-title {
        font-size: 1.625rem; /* 26px */
    }

    .qa-subtitle {
        font-size: 1rem; /* 16px */
    }

    .search-box {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .search-input {
        width: 100%;
    }

    .search-btn {
        width: 100%;
        justify-content: center;
    }

    .tab-btn {
        font-size: 0.8125rem; /* 13px */
        padding: 0.3125rem 0.875rem; /* 5px 14px */
    }

    .qa-question {
        font-size: 0.9375rem; /* 15px */
        padding: 0.875rem 0.25rem; /* 14px 4px */
    }

    .qa-item.active .qa-answer {
        padding: 0 0.25rem 1.125rem 0.25rem; /* 0 4px 18px 4px */
    }
}

@media (max-width: 480px) {
    .qa-title {
        font-size: 1.375rem; /* 22px */
    }
}

/* ============ 答案图片：点击放大（lightbox） ============ */
.qa-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(0.25rem); /* 4px */
    -webkit-backdrop-filter: blur(0.25rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.qa-lightbox.show {
    opacity: 1;
    visibility: visible;
}

.qa-lightbox .qa-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 0.625rem; /* 10px */
    box-shadow: 0 1.875rem 5rem rgba(0, 0, 0, 0.55); /* 30px 80px */
    cursor: zoom-out;
}

.qa-lightbox-close {
    position: absolute;
    top: 1.125rem; /* 18px */
    right: 1.5rem; /* 24px */
    width: 2.75rem; /* 44px */
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 1.875rem; /* 30px */
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.qa-lightbox-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.24);
}

/* ============ 答案图片轮播分页器（data-images-pager=1 时启用） ============ */
.qa-img-swiper-wrap {
    position: relative;
    margin: 0.75rem 0; /* 12px */
}

.qa-img-swiper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.875rem; /* 14px */
    padding: 0.25rem 0.125rem 0.75rem; /* 4px 2px 12px */
    scrollbar-width: none;
}

.qa-img-swiper::-webkit-scrollbar {
    display: none;
}

.qa-img-swiper-slide {
    flex: 0 0 92%;
    scroll-snap-align: center;
    min-width: 0;
    text-align: center;
}

.qa-img-swiper-slide img {
    max-width: 88%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 0.5rem; /* 8px */
    cursor: zoom-in;
}

.qa-img-swiper-arrow {
    position: absolute;
    top: 44%;
    transform: translateY(-50%);
    z-index: 5;
    width: 2.125rem; /* 34px */
    height: 2.125rem;
    border-radius: 50%;
    border: 0.0625rem solid #dbe2ec; /* 1px */
    background: rgba(255, 255, 255, 0.92);
    color: #2f6fed;
    font-size: 1.125rem; /* 18px */
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.75rem rgba(2, 6, 23, 0.12); /* 4px 12px */
    transition: background 0.2s ease, color 0.2s ease;
}

.qa-img-swiper-arrow:hover {
    background: #2f6fed;
    color: #ffffff;
}

.qa-img-swiper-arrow.prev {
    left: 0.25rem;
}

/* 4px */
.qa-img-swiper-arrow.next {
    right: 0.25rem;
}

.qa-img-swiper-dots {
    display: flex;
    justify-content: center;
    gap: 0.375rem; /* 6px */
    padding: 0.125rem 0 0.375rem; /* 2px 0 6px */
}

.qa-img-swiper-dot {
    width: 0.5rem; /* 8px */
    height: 0.5rem;
    border-radius: 50%;
    background: #cfd8e6;
    cursor: pointer;
    transition: all 0.25s ease;
}

.qa-img-swiper-dot.active {
    width: 1.125rem; /* 18px */
    border-radius: 999px;
    background: #2f6fed;
}

.footer a {
    color: var(--color-warning);
}