/* ============================================================
   帮助中心 /help（主题变量全部复用 style.css 的 --color-* 体系）
   ============================================================ */
.help-page-wrap {
    width: 100%;            /* grid item 撑满轨道（配合 max-width 居中），否则 margin:0 auto 会把它收缩成内容宽 */
    max-width: 1400px;      /* 与全站内容页 .res-page / .doc-container 一致 */
    margin: 0 auto;
    padding: 28px 16px 56px;
}

/* 帮助中心主容器：卡片式，宽度用 --help-container-w 变量控制（后台自定义样式可覆盖） */
.help-container {
    width: 100%;
    max-width: var(--help-container-w, 1100px);
    margin: 0 auto;
    background: var(--color-bg-card);
    border: var(--color-border-width) dashed var(--color-border);
    border-radius: var(--radius-card);
    padding: 28px 32px 36px;
}

/* Hero */
.help-hero {
    text-align: center;
    padding: 18px 0 8px;
}
.help-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    margin-bottom: 12px;
}
.help-hero-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-title);
    margin: 0 0 6px;
}
.help-hero-sub {
    margin: 0 0 20px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* 搜索框 */
.help-search {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.help-search-ic {
    position: absolute;
    left: 14px;
    color: var(--color-text-dim);
    pointer-events: none;
}
.help-search-input {
    width: 100%;
    height: 46px;
    padding: 0 40px 0 42px;
    border-radius: 999px;
    border: var(--color-border-width) solid var(--color-border-strong);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: 15px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.help-search-input::placeholder { color: var(--color-text-dim); }
.help-search-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.help-search-clear {
    position: absolute;
    right: 12px;
    width: 24px; height: 24px;
    border: none; background: transparent;
    color: var(--color-text-dim);
    font-size: 20px; line-height: 1;
    cursor: pointer; border-radius: 50%;
}
.help-search-clear:hover { color: var(--color-text-primary); background: var(--color-bg-page-soft); }

/* 搜索结果（分组 + 锚点） */
.help-search-results {
    margin: 18px 0 8px;
    background: var(--color-bg-card);
    border: var(--color-border-width) solid var(--color-border);
    border-radius: 14px;
    padding: 8px 4px;
}
.help-search-group-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-dim);
    padding: 10px 16px 4px;
}
.help-search-link {
    display: block;
    padding: 10px 16px;
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
}
.help-search-link:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
}
.help-search-empty {
    padding: 16px;
    color: var(--color-text-dim);
    font-size: 15px;
    text-align: center;
}

/* Tabs */
.help-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 26px 0 18px;
    flex-wrap: wrap;
}
.help-tab {
    appearance: none;
    border: var(--color-border-width) solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    /* 三个按钮统一固定宽度（短一点，不随文字长度自适应） */
    width: 200px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    font-size: 15px;
    cursor: pointer;
    transition: all .15s;
}
.help-tab:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.help-tab.active {
    background: var(--color-accent-gradient);
    border-color: transparent;
    color: var(--color-text-title);
    font-weight: 500;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Panels */
.help-panel { animation: helpFade .2s ease; }
.help-panel[hidden] { display: none; }
@keyframes helpFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* FAQ 列表 */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.help-faq-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--color-text-dim);
    font-size: 15px;
    background: var(--color-bg-card);
    border: var(--color-border-width) dashed var(--color-border-strong);
    border-radius: 12px;
}
.faq-item {
    background: var(--color-bg-card);
    border: var(--color-border-width) solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.faq-item.open {
    border-color: var(--color-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.faq-item.faq-hit { border-color: var(--color-accent); }
.faq-item.faq-flash { animation: faqFlash 1.2s ease; }
@keyframes faqFlash {
    0%   { box-shadow: 0 0 0 3px var(--color-accent); }
    100% { box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 14%, transparent); }
}
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--color-text-title);
    font-size: 15px;
    font-weight: 500;
}
.faq-badge {
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    font-size: 12px; font-weight: 700;
}
.faq-q-text { flex: 1; min-width: 0; }
.faq-subcat {
    flex-shrink: 0;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-accent-dark);
    background: var(--color-accent-soft);
    border: var(--color-border-width) solid var(--color-border-strong);
}
.faq-arrow { flex-shrink: 0; color: var(--color-text-dim); transition: transform .2s; }
.faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--color-accent-dark); }
/* 答案区展开动画：grid 0fr → 1fr，高度随内容自适应。
   ⚠️ 别改回 max-height 定值 —— 原先 `.faq-item.open .faq-a { max-height: 600px }` 会把
   超过 600px 的长答案（多条列表 / 代码块 / 多段落）在 overflow:hidden 下直接裁掉底部。 */
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-body {
    overflow: hidden;          /* 0fr 时裁掉内容 */
    min-height: 0;             /* 允许 grid item 被压到 0 高，否则残留内容高度 */
    /* 左 52px 对齐 Q 徽标（16 padding + 24 badge + 12 gap）；
       折叠态 padding-bottom 必须为 0，否则 `.faq-a` 收起后仍残留 16px */
    padding: 0 16px 0 52px;
    color: var(--color-text-secondary);
    font-size: 14px;           /* 内容正文 */
    line-height: 1.8;
}
/* 展开态才加下留白与分隔线：折叠态加会露出 1px 边框 + 16px 空白 */
.faq-item.open .faq-a-body {
    padding-bottom: 16px;
    padding-top: 14px;
    border-top: var(--color-border-width) dashed var(--color-border);
}
.faq-a-body p { margin: 0 0 10px; }
.faq-a-body ul, .faq-a-body ol { margin: 0 0 10px; padding-left: 1.4em; }
.faq-a-body li + li { margin-top: 4px; }
.faq-a-body > :last-child { margin-bottom: 0; }
.faq-a-body strong { color: var(--color-text-title); }
/* FAQ 答案里的 md 标题：全局 .md-rendered 的 h1 24 / h2 20 在答案里过大、层级失衡，
   降级到 20/18/17 —— 相对原始值仍是「没改大」（h3 原本就是 17），且比正文 16px 高一档保持层级 */
.faq-a-body.md-rendered h1 { font-size: 20px; }
.faq-a-body.md-rendered h2 { font-size: 18px; }
.faq-a-body.md-rendered h3 { font-size: 17px; }
.faq-a-body.md-rendered h1,
.faq-a-body.md-rendered h2,
.faq-a-body.md-rendered h3 { margin: 1.1em 0 .5em; }

/* 打赏支持 */
.donate-wrap { display: flex; flex-direction: column; gap: 22px; }
.donate-qrs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.donate-qr-card {
    background: var(--color-bg-card);
    border: var(--color-border-width) solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}
.donate-qr-title {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 14px; font-weight: 500;
    color: var(--color-text-title);
    margin-bottom: 12px;
}
.donate-qr-imgbox {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 200px;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-page-soft);
    border-radius: 10px;
    overflow: hidden;
}
.donate-qr-img { width: 100%; height: 100%; object-fit: contain; }
.donate-qr-empty { color: var(--color-text-dim); font-size: 14px; padding: 0 12px; }
.donate-qr-imgbox.img-error::after {
    content: "图片加载失败";
    color: var(--color-text-dim);
    font-size: 14px;
}
.donate-account {
    margin-top: 12px;
    font-size: 14px;
    color: var(--color-text-secondary);
}
.donate-account code {
    background: var(--color-bg-page-soft);
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--color-accent-dark);
    font-family: ui-monospace, Consolas, monospace;
}

.donate-desc, .donate-services {
    background: var(--color-bg-card);
    border: var(--color-border-width) solid var(--color-border);
    border-radius: 14px;
    padding: 20px 22px;
}
.donate-desc-title {
    font-size: 15px; font-weight: 700;
    color: var(--color-text-title);
    margin: 0 0 14px;
}
.donate-desc .md-rendered { color: var(--color-text-secondary); font-size: 14px; line-height: 1.8; }
.donate-desc .md-rendered h2 { font-size: 18px; margin: 1.1em 0 .5em; color: var(--color-text-title); }
.donate-desc .md-rendered h3 { font-size: 17px; margin: 1.1em 0 .5em; color: var(--color-text-title); }
.donate-desc .md-rendered p { margin: 0 0 10px; }
.donate-desc .md-rendered ol, .donate-desc .md-rendered ul { margin: 0 0 10px; padding-left: 1.4em; }
.donate-desc .md-rendered li + li { margin-top: 4px; }
.donate-desc .md-rendered > :last-child { margin-bottom: 0; }

.donate-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.donate-service {
    display: flex; gap: 10px;
    padding: 12px 14px;
    background: var(--color-bg-page-soft);
    border-radius: 10px;
}
.donate-service-ic {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
}
.donate-service-name { font-size: 14px; font-weight: 500; color: var(--color-text-title); }
.donate-service-desc { font-size: 14px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.7; }

/* 响应式：≤991px 容器收紧、≤767px 二维码转单列 / Tab 撑满 / 答案缩进归位
   —— 均在 responsive.css 的对应断点块内（⑬ / ⑭ 段）。
   （本文件不放媒体查询：项目约定媒体查询只在 responsive.css。） */