/* 问答中心的视觉层，复用 content-tech.css；问答与筛选逻辑保持在原模板。 */
.fq-page :where(h1, h2, h3, p, ul, li) { margin: 0; padding: 0; list-style: none; }
.fq-page a { color: inherit; text-decoration: none; }

/* ---------- 浅色帮助中心标题区 ---------- */
.fq-page .fq-hero { position: relative; overflow: hidden; padding: 36px 0 44px; border-bottom: 1px solid #dfe8f5; background: radial-gradient(ellipse at 94% 0%, #dcecffb3, transparent 60%), linear-gradient(135deg, #f2f7ff, #f9fcff); }
.fq-page .fq-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#88a9d40a 1px, transparent 1px), linear-gradient(90deg, #88a9d40a 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(110deg, transparent 30%, #000); pointer-events: none; }
.fq-page .fq-hero > .mxs-container { position: relative; padding-right: 340px; }
.fq-page .fq-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #96a6bf; font-size: 12px; line-height: 1.8; }
.fq-page .fq-crumb a { color: #7a8ca8; transition: color .2s ease; }
.fq-page .fq-crumb a:hover { color: var(--ui-blue); }
.fq-page .fq-crumb em { color: #4c6487; font-style: normal; }
.fq-page .fq-hero__title { margin-top: 26px; color: #132b4d; font-size: 40px; font-weight: 700; line-height: 1.4; letter-spacing: -1.1px; text-wrap: balance; }
.fq-page .fq-hero__desc { margin-top: 18px; color: #647995; font-size: 14px; line-height: 1.95; }
.fq-page .fq-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 24px; color: #718aad; font-size: 12px; line-height: 1.8; }
.fq-page .fq-hero__meta span:first-child { color: #2c68ca; font-size: 20px; font-weight: 600; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.fq-page .fq-hero__meta i { flex: none; width: 1px; height: 14px; background: #d0dff2; }
.fq-page .fq-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.fq-page .fq-jump a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border: 1px solid #d2e0f6; border-radius: 7px; background: #ffffffb8; color: #45658f; font-size: 12px; line-height: 1.5; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.fq-page .fq-jump em { color: #8b9fbd; font: 500 11px/1.5 Arial, sans-serif; }
.fq-page .fq-jump a:hover { border-color: #8eb1ee; background: #eaf2ff; color: var(--ui-blue); }

/* 对话图形直接由 CSS 绘制，不含业务文字或交互。 */
.fq-page .fq-hero__art { position: absolute; top: 50%; right: 0; width: 290px; height: 235px; transform: translateY(-50%); pointer-events: none; }
.fq-page .fq-art__orbit { position: absolute; inset: 12px -10px; border: 1px solid #c0d6f44d; border-radius: 50%; background: radial-gradient(ellipse at center, #bbd9ff73, transparent 70%); transform: rotate(-24deg); }
.fq-page .fq-art__orbit::after { content: ""; position: absolute; inset: 26px -8px; border: 1px solid #c1d7f438; border-radius: 50%; transform: rotate(45deg); }
.fq-page .fq-art__bubble { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 20px 20px 6px 20px; }
.fq-page .fq-art__bubble--main { top: 28px; left: 28px; gap: 12px; width: 155px; height: 104px; border: 1px solid #79abef; background: linear-gradient(140deg, #244d8c, #102647); box-shadow: 0 18px 32px #365c9d33, inset 0 1px #b9e1ff40; transform: rotate(-7deg); }
.fq-page .fq-art__bubble--main i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #a7d9ff; box-shadow: 0 0 14px #75caff4d; }
.fq-page .fq-art__bubble--reply { top: 112px; left: 132px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 10px; width: 130px; height: 86px; padding-left: 24px; border: 1px solid #b6cfee; border-radius: 16px 16px 16px 5px; background: linear-gradient(135deg, #fffffff2, #e6f0ffdc); box-shadow: 0 12px 24px #487fc226, inset 0 1px #fff; transform: rotate(5deg); }
.fq-page .fq-art__bubble--reply b { display: block; width: 76px; height: 4px; border-radius: 3px; background: #92b5e6; }
.fq-page .fq-art__bubble--reply b:nth-child(2) { width: 62px; background: #b1caee; }
.fq-page .fq-art__bubble--reply b:nth-child(3) { width: 44px; background: #c5d9f3; }
.fq-page .fq-art__spark { position: absolute; right: 12px; top: 40px; width: 14px; height: 14px; border: 1px solid #a8c6ef; border-radius: 5px; background: #f1f8ff; box-shadow: 0 6px 18px #77afff33; transform: rotate(15deg); }

/* ---------- 主体：专题面板与固定侧栏 ---------- */
.fq-page .fq-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; padding-top: 40px; padding-bottom: 32px; }
.fq-page .fq-main { min-width: 0; counter-reset: faq-group; }
.fq-page .fq-group { min-width: 0; margin-bottom: 24px; padding: 28px 30px; border: 1px solid #dfe7f4; border-radius: 15px; background: #fff; scroll-margin-top: 88px; counter-increment: faq-group; transition: border-color .2s ease, box-shadow .2s ease; }
.fq-page .fq-group:target { border-color: #98b9ef; box-shadow: 0 0 0 3px #dceafe80; }
.fq-page .fq-group__head { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-bottom: 22px; border-bottom: 1px solid #e2eaf6; }
.fq-page .fq-group__title { display: flex; align-items: center; gap: 14px; min-width: 0; color: #213d62; font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: -.5px; }
.fq-page .fq-group__title::before { content: counter(faq-group, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border: 1px solid #d2e2fc; border-radius: 9px; background: linear-gradient(145deg, #f7faff, #eaf2ff); color: #6f98dc; font: 500 12px/1 Consolas, monospace; letter-spacing: 0; }
.fq-page .fq-group__count { flex: none; margin-left: auto; padding: 4px 9px; border-radius: 5px; background: #eff4fd; color: #6a8ab8; font-size: 11px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.fq-page .fq-group__desc { flex: 1 0 100%; margin-top: 2px; color: #7e8da4; font-size: 12px; line-height: 1.9; }
.fq-page .fq-list { margin-top: 6px; }
.fq-page .fq-item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid #e7edf6; border-radius: 0; background: transparent; transition: background .2s ease, box-shadow .2s ease; }
.fq-page .fq-item:last-child { border-bottom: 0; }
.fq-page .fq-item[open] { position: relative; background: #f5f9ff; box-shadow: 14px 0 #f5f9ff, -14px 0 #f5f9ff; }
.fq-page .fq-q { display: flex; align-items: center; gap: 20px; padding: 20px 0; color: #324d70; font-size: 14px; font-weight: 500; line-height: 1.85; cursor: pointer; list-style: none; }
.fq-page .fq-q::-webkit-details-marker { display: none; }
.fq-page .fq-q__text { flex: 1; min-width: 0; }
.fq-page .fq-q:hover, .fq-page .fq-item[open] .fq-q { color: #2466da; }
.fq-page .fq-q__arrow { position: relative; flex: none; width: 22px; height: 22px; margin: 0; border: 0; border-radius: 50%; background: #edf3fc; }
.fq-page .fq-q__arrow::before, .fq-page .fq-q__arrow::after { content: ""; position: absolute; top: 10px; left: 6px; width: 10px; height: 1px; border-radius: 1px; background: #7791b6; transition: transform .2s ease, background .2s ease; }
.fq-page .fq-q__arrow::after { transform: rotate(90deg); }
.fq-page .fq-item[open] .fq-q__arrow { background: #e4edff; }
.fq-page .fq-item[open] .fq-q__arrow::before, .fq-page .fq-item[open] .fq-q__arrow::after { background: #3776dc; }
.fq-page .fq-item[open] .fq-q__arrow::after { transform: rotate(0); }
.fq-page .fq-a { padding: 0 40px 22px 0; color: #627892; font-size: 13px; line-height: 2; overflow-wrap: anywhere; }
.fq-page .fq-a p { margin: 0; padding-top: 0; }
.fq-page .fq-from { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; color: #2e6dcc; font-size: 12px; line-height: 1.8; }
.fq-page .fq-from em { display: inline-block; font-style: normal; transition: transform .2s ease; }
.fq-page .fq-from:hover em { transform: translateX(4px); }
.fq-page .fq-empty { position: relative; padding: 48px 28px; border: 1px dashed #cbdcf4; border-radius: 15px; background: #fff; color: #7a8ea8; font-size: 14px; line-height: 2; text-align: center; }
.fq-page .fq-empty[hidden] { display: none; }
.fq-page .fq-empty::before { content: "?"; display: block; width: 44px; height: 44px; margin: 0 auto 20px; border: 1px solid #d6e4f9; border-radius: 12px; background: linear-gradient(145deg, #f7fbff, #eaf2ff); color: #7d9ed4; font: 500 23px/42px Arial, sans-serif; }
.fq-page .fq-empty a { color: var(--ui-blue); }

/* ---------- 搜索与专题导航，保留原来的即时筛选控件 ---------- */
.fq-page .fq-side { position: sticky; top: 88px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.fq-page .fq-search { margin: 0; padding: 24px; border: 1px solid #cfdef6; border-radius: 14px; background: linear-gradient(145deg, #fff, #f0f6ff); box-shadow: 0 8px 24px #254e8907; }
.fq-page .fq-search__label { display: block; color: #2f4e77; font-size: 16px; font-weight: 600; line-height: 1.7; }
.fq-page .fq-search__box { position: relative; margin-top: 18px; }
.fq-page .fq-search__icon { position: absolute; top: 50%; left: 14px; display: block; width: 18px; height: 18px; color: #8ba2c2; transform: translateY(-50%); pointer-events: none; }
.fq-page .fq-search__icon svg { display: block; width: 100%; height: 100%; }
.fq-page .fq-search__box input { display: block; width: 100%; min-width: 0; height: 46px; padding: 0 12px 0 41px; border: 1px solid #ccdcf4; border-radius: 8px; outline: none; background: #ffffffeb; color: #2d496d; font-family: inherit; font-size: 12px; transition: border-color .2s ease, box-shadow .2s ease; }
.fq-page .fq-search__box input::placeholder { color: #96a7bd; opacity: 1; }
.fq-page .fq-search__box input:focus { border-color: #7fa9ee; box-shadow: 0 0 0 3px #387cf412; }
.fq-page .fq-search__hint { min-height: 18px; margin-top: 12px; color: #7c95b7; font-size: 11px; line-height: 1.8; }
.fq-page .fq-side__nav { margin-top: 20px; padding: 24px; border: 1px solid #dfe7f4; border-radius: 14px; background: #fff; }
.fq-page .fq-side__title { margin-bottom: 16px; color: #7187a5; font-size: 12px; line-height: 1.8; }
.fq-page .fq-side__nav ul { margin: 0 -10px; padding: 0; }
.fq-page .fq-side__nav li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px; border: 0; border-radius: 7px; color: #415e83; font-size: 13px; line-height: 1.8; transition: background .2s ease, color .2s ease; }
.fq-page .fq-side__nav li a:hover { background: #f0f5fe; color: #2b6bd2; }
.fq-page .fq-side__nav li em { flex: none; min-width: 24px; color: #93a5bf; font: 500 11px/1.8 Arial, sans-serif; text-align: right; }
.fq-page .fq-side__links { display: grid; gap: 10px; margin-top: 20px; padding: 0; border: 0; }
.fq-page .fq-side__links a { position: relative; display: block; min-width: 0; padding: 17px 38px 17px 20px; border: 1px solid #dee8f7; border-radius: 10px; background: #f6f9ff; color: #375b8c; font-size: 13px; line-height: 1.8; transition: border-color .2s ease, background .2s ease; }
.fq-page .fq-side__links a::after { content: "↗"; position: absolute; top: 17px; right: 17px; color: #87a5d4; font-size: 16px; }
.fq-page .fq-side__links a em { display: block; margin-top: 5px; color: #8b9db6; font-size: 10px; font-style: normal; line-height: 1.8; }
.fq-page .fq-side__links a:hover { border-color: #acc7f0; background: #edf4ff; }
.fq-page .fq-side__note { margin-top: 18px; color: #97a6bb; font-size: 11px; line-height: 1.8; text-align: center; }

/* ---------- 底部帮助入口 ---------- */
.fq-page .fq-cta { padding: 0 0 64px; }
.fq-page .fq-cta__in { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 36px 40px; border: 1px solid #29436b; border-radius: 18px; background: linear-gradient(110deg, #102449ee, #0b1937), url("../images/home-tech/membership-orbit.jpg") left center / cover; }
.fq-page .fq-cta__in h2 { color: #f0f7ff; font-size: 26px; font-weight: 700; line-height: 1.5; letter-spacing: -.6px; }
.fq-page .fq-cta__in p { max-width: 780px; margin-top: 14px; color: #b3c7e5; font-size: 13px; line-height: 1.95; }
.fq-page .fq-cta__btns { display: flex; align-items: center; flex-wrap: wrap; flex: none; gap: 12px; }
.fq-page .fq-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px; border: 1px solid #7497c966; border-radius: 8px; background: #95bafa14; color: #d5e7ff; font-size: 13px; font-weight: 600; line-height: 1.6; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.fq-page .fq-btn:hover { border-color: #85b7ff; background: #95bafa26; transform: translateY(-2px); }
.fq-page .fq-btn--main { border-color: #66a9ff; background: linear-gradient(#2f88ff, #1d5dec); color: #fff; box-shadow: inset 0 1px #b2e7ff55, 0 6px 18px #165ce12b; }
.fq-page .fq-btn--main:hover { background: linear-gradient(#277bee, #1753d8); box-shadow: 0 8px 24px #1b6cf33b; }

/* 原生 details 负责展开，动效仅用于装饰和答案淡入。 */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .fq-page .fq-art__bubble--main i { animation: fq-dialog-glow 2.8s ease-in-out infinite alternate; }
    .fq-page .fq-art__bubble--main i:nth-child(2) { animation-delay: -.8s; }
    .fq-page .fq-art__bubble--main i:nth-child(3) { animation-delay: -1.6s; }
    .fq-page .fq-item[open] .fq-a { animation: fq-answer-in .25s ease-out; }
}
@keyframes fq-dialog-glow { from { opacity: .45; } to { opacity: 1; } }
@keyframes fq-answer-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 内容区响应式 ---------- */
@media (max-width: 1199px) {
    .fq-page .fq-hero > .mxs-container { padding-right: 290px; }
    .fq-page .fq-hero__title { font-size: 35px; }
    .fq-page .fq-hero__art { width: 265px; height: 230px; }
    .fq-page .fq-art__bubble--main { left: 8px; }
    .fq-page .fq-art__bubble--reply { left: 105px; }
    .fq-page .fq-body { grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; }
    .fq-page .fq-group { padding: 24px; }
    .fq-page .fq-group__title { font-size: 22px; }
    .fq-page .fq-search, .fq-page .fq-side__nav { padding: 22px; }
    .fq-page .fq-cta__in { flex-direction: column; align-items: flex-start; gap: 26px; }
}
@media (max-width: 900px) {
    .fq-page .fq-hero > .mxs-container { padding-right: 0; }
    .fq-page .fq-hero__art { display: none; }
    .fq-page .fq-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .fq-page .fq-side { position: static; order: -1; }
    .fq-page .fq-side__nav { display: none; }
    .fq-page .fq-side__links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
    .fq-page .fq-side__note { margin-top: 12px; }
    .fq-page .fq-search { padding: 24px; }
    .fq-page .fq-search__box { margin-top: 14px; }
    .fq-page .fq-group { padding: 26px; }
}
@media (max-width: 600px) {
    .fq-page .fq-hero { padding: 28px 0 32px; }
    .fq-page .fq-hero__title { margin-top: 24px; font-size: 29px; letter-spacing: -.6px; }
    .fq-page .fq-hero__desc { margin-top: 18px; font-size: 13px; line-height: 2; }
    .fq-page .fq-hero__meta { gap: 10px 16px; margin-top: 22px; font-size: 11px; }
    .fq-page .fq-hero__meta span:first-child { width: 100%; font-size: 22px; }
    .fq-page .fq-hero__meta i { display: none; }
    .fq-page .fq-jump { gap: 8px; margin-top: 24px; }
    .fq-page .fq-jump a { gap: 8px; padding: 8px 11px; font-size: 11px; }
    .fq-page .fq-body { gap: 24px; padding-top: 28px; padding-bottom: 20px; }
    .fq-page .fq-search { padding: 22px; }
    .fq-page .fq-search__label { font-size: 15px; }
    .fq-page .fq-search__box input { font-size: 13px; }
    .fq-page .fq-side__links { gap: 8px; }
    .fq-page .fq-side__links a { padding: 14px 11px; font-size: 11px; }
    .fq-page .fq-side__links a::after { display: none; }
    .fq-page .fq-side__links a em { margin-top: 6px; font-size: 9px; line-height: 1.8; }
    .fq-page .fq-side__note { font-size: 10px; }
    .fq-page .fq-group { margin-bottom: 20px; padding: 22px 20px; border-radius: 12px; }
    .fq-page .fq-group__head { gap: 12px; padding-bottom: 20px; }
    .fq-page .fq-group__title { gap: 10px; font-size: 20px; }
    .fq-page .fq-group__title::before { width: 28px; height: 28px; border-radius: 7px; font-size: 10px; }
    .fq-page .fq-group__desc { margin-top: 0; font-size: 11px; line-height: 1.9; }
    .fq-page .fq-group__count { padding: 3px 7px; font-size: 10px; }
    .fq-page .fq-q { gap: 14px; padding: 18px 0; font-size: 13px; }
    .fq-page .fq-q__arrow { width: 20px; height: 20px; }
    .fq-page .fq-q__arrow::before, .fq-page .fq-q__arrow::after { top: 9px; left: 5px; }
    .fq-page .fq-item[open] { box-shadow: 10px 0 #f5f9ff, -10px 0 #f5f9ff; }
    .fq-page .fq-a { padding-right: 12px; font-size: 12px; }
    .fq-page .fq-from { font-size: 11px; }
    .fq-page .fq-empty { padding: 32px 22px; font-size: 13px; }
    .fq-page .fq-cta { padding-bottom: 40px; }
    .fq-page .fq-cta__in { gap: 24px; padding: 28px 24px; }
    .fq-page .fq-cta__in h2 { font-size: 23px; }
    .fq-page .fq-cta__in p { font-size: 12px; }
    .fq-page .fq-cta__btns { width: 100%; }
    .fq-page .fq-btn { flex: 1 1 auto; padding-right: 14px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .fq-page *, .fq-page *::before, .fq-page *::after { animation: none !important; transition: none !important; }
    .fq-page .fq-btn:hover, .fq-page .fq-from:hover em { transform: none; }
}