/* ============================================================
   QuickFind 支持中心（support.html）专属美化层
   - 仅 UI 表现：不改内容、不改结构语义、不动 data-i18n 键
   - 全部规则限定在 body[data-page="support"] 内，不影响其它页面
   - 只消费站点既有 token（--brand / --brand-grad / --card / --line-2 …）
     亮色与暗色自动适配
   ============================================================ */


/* ---------- 1. Hero：细网格纹理，增强层次 ---------- */
body[data-page="support"] .page-hero { position: relative; overflow: hidden; }
body[data-page="support"] .page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(680px 300px at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(680px 300px at 50% 0%, #000 0%, transparent 78%);
}
body[data-page="support"] .page-hero .container { position: relative; z-index: 1; }


/* ---------- 2. 「本页小节」锚点导航 ---------- */
body[data-page="support"] .doc-pages {
  border-style: solid; border-color: var(--line-2);
  background: var(--card); box-shadow: var(--shadow-sm);
  padding: 9px 12px; border-radius: var(--radius);
}
body[data-page="support"] .doc-page-chip {
  font-weight: 600; padding: 5px 13px;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
body[data-page="support"] .doc-page-chip:hover {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep);
}
body[data-page="support"] .doc-page-chip[href="#triage"] {
  background: var(--brand-grad-soft); border-color: transparent; color: var(--brand-deep);
}


/* ---------- 3. 自助分流三步卡片 ---------- */
body[data-page="support"] .sup-step {
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body[data-page="support"] .sup-step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-grad); opacity: 0; transition: opacity .18s ease;
}
body[data-page="support"] .sup-step:hover {
  transform: translateY(-3px); border-color: var(--brand-2); box-shadow: var(--shadow);
}
body[data-page="support"] .sup-step:hover::before { opacity: 1; }
body[data-page="support"] .sup-step-n {
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 4px 10px -4px var(--brand-glow);
}
body[data-page="support"] .sup-step-a { display: inline-flex; align-items: center; gap: 5px; }
body[data-page="support"] .sup-step-a::after { content: "\2192"; transition: transform .18s ease; }
body[data-page="support"] .sup-step:hover .sup-step-a::after { transform: translateX(3px); }


/* ---------- 4. 表格（按症自查 / 响应范围） ---------- */
body[data-page="support"] .tbl-wrap { border: 1px solid var(--line-2); }
body[data-page="support"] .tbl thead th {
  background: linear-gradient(180deg, var(--brand-soft), var(--bg-2));
  border-bottom: 1px solid var(--line);
}
body[data-page="support"] .tbl tbody tr { transition: background-color .15s ease; }
body[data-page="support"] .tbl tbody tr:hover td:first-child { color: var(--brand-deep); }

/* 响应范围表：版本徽章点（与定价页 matrix 的 Free/Pro/Team 配色一致） */
body[data-page="support"] .tbl th[scope="row"] { font-weight: 700; white-space: nowrap; }
body[data-page="support"] .tbl th[scope="row"]::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 3px;
  margin-right: 8px; vertical-align: 1px; background: var(--muted);
}
body[data-page="support"] .tbl tbody tr:nth-child(1) th[scope="row"]::before { background: var(--ok); }
body[data-page="support"] .tbl tbody tr:nth-child(2) th[scope="row"]::before { background: var(--warn); }
body[data-page="support"] .tbl tbody tr:nth-child(3) th[scope="row"]::before { background: var(--brand); }


/* ---------- 5. 诊断信息卡 + 复制清单 ---------- */
body[data-page="support"] .sup-diag-card {
  transition: border-color .15s ease, box-shadow .15s ease;
}
body[data-page="support"] .sup-diag-card:hover {
  border-color: var(--brand-2); box-shadow: var(--shadow-sm);
}
body[data-page="support"] .sup-diag-card h3 { display: flex; align-items: center; gap: 8px; font-weight: 700; }
body[data-page="support"] .sup-diag-card h3::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 2.5px;
  background: var(--brand-grad);
}

/* 复制清单：深色代码块 + 终端窗口标题条 */
body[data-page="support"] .checklist-card { position: relative; overflow: hidden; }
body[data-page="support"] .checklist-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-grad);
}
body[data-page="support"] .cl-pre {
  position: relative; padding-top: 38px;
  border: 1px solid var(--qf-code-border);
  box-shadow: var(--shadow-sm);
}
body[data-page="support"] .cl-pre::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background-color: rgba(255, 255, 255, .05);
  background-image:
    radial-gradient(circle 5px at 16px 14px, #ff5f57 98%, transparent),
    radial-gradient(circle 5px at 34px 14px, #febc2e 98%, transparent),
    radial-gradient(circle 5px at 52px 14px, #28c840 98%, transparent);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}


/* ---------- 6. 支持渠道卡片 ---------- */
body[data-page="support"] .support-card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body[data-page="support"] .support-card:hover {
  transform: translateY(-3px); border-color: var(--brand-2); box-shadow: var(--shadow);
}
body[data-page="support"] .support-card .p-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--brand-grad-soft); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
}
body[data-page="support"] .support-card .p-icon svg { width: 21px; height: 21px; }
body[data-page="support"] .support-card:hover .p-icon { background: var(--brand-grad); color: #fff; }
body[data-page="support"] .support-card h3 { font-weight: 700; }


/* ---------- 7. 常见问题 ---------- */
/* 搜索面板：上为渐变标题带、下为工具卡，合成一整块 */
body[data-page="support"] .faq-hero-bar {
  background: var(--brand-grad-soft);
  border: 1px solid var(--line-2); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 18px 22px 16px; margin-bottom: 0;
}
body[data-page="support"] .faq-hero-title { font-weight: 800; }
body[data-page="support"] .faq-tools-host {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 16px 22px 18px; box-shadow: var(--shadow-sm);
}
body[data-page="support"] .faq-input { flex: 1 1 240px; min-width: 0; }
body[data-page="support"] .faq-clear { flex: none; }

/* 分类 chips */
body[data-page="support"] .faq-chip {
  font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
body[data-page="support"] .faq-chip:hover {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep);
}
body[data-page="support"] .faq-chip.active { box-shadow: 0 2px 8px -3px var(--brand-glow); }

/* 分类标题 */
body[data-page="support"] .faq-cat-title {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}
body[data-page="support"] .faq-cat-n {
  font-weight: 700; color: var(--brand-deep); background: var(--brand-soft);
}

/* 问答条目：+ / − 徽章化，展开态强调 */
body[data-page="support"] .faq-item { transition: border-color .15s ease, box-shadow .15s ease; }
body[data-page="support"] .faq-item:hover { border-color: var(--brand-2); }
body[data-page="support"] .faq-item[open] { box-shadow: var(--shadow-sm); }
body[data-page="support"] .faq-q {
  border-radius: var(--radius-sm);
  transition: background-color .15s ease, color .15s ease;
}
body[data-page="support"] .faq-q:hover { background: var(--brand-grad-soft); }
body[data-page="support"] .faq-item[open] .faq-q { color: var(--brand-deep); }
body[data-page="support"] .faq-q::before {
  content: "+"; width: 22px; height: 22px; border-radius: 7px;
  background: var(--brand-soft); color: var(--brand-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; font-weight: 800;
  transition: background .15s ease, color .15s ease;
}
body[data-page="support"] .faq-item[open] .faq-q::before {
  content: "\2212"; background: var(--brand-grad); color: #fff;
}
body[data-page="support"] .faq-a { padding-left: 48px; }

/* 「想读长文」链接区卡片化 */
body[data-page="support"] .faq-deeper {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
body[data-page="support"] .faq-deeper h3 { font-weight: 800; }
body[data-page="support"] .faq-deeper-list { gap: 2px; }
body[data-page="support"] .faq-deeper-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-xs); font-weight: 500;
  transition: background-color .15s ease;
}
body[data-page="support"] .faq-deeper-list a:hover { background: var(--brand-grad-soft); }
body[data-page="support"] .faq-deeper-list a::after {
  content: "\2192"; color: var(--brand); opacity: .5;
  transition: transform .15s ease, opacity .15s ease;
}
body[data-page="support"] .faq-deeper-list a:hover::after { transform: translateX(3px); opacity: 1; }


/* ---------- 8. 联系我们 ---------- */
/* 邮箱地址 chip 强化 */
body[data-page="support"] .contact-mail-row code {
  font-size: 15px; padding: 7px 13px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-deep);
  border: 1px solid var(--brand-soft-2);
}
/* 主题标签 */
body[data-page="support"] .contact-topic {
  font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
body[data-page="support"] .contact-topic:hover {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep);
}
/* 事实行：hover 高亮 */
body[data-page="support"] .fact-row {
  padding: 11px 10px; border-radius: var(--radius-xs);
  transition: background-color .15s ease;
}
body[data-page="support"] .fact-row:hover { background: var(--brand-grad-soft); }
/* 表单卡阴影升级 */
body[data-page="support"] .form-card { box-shadow: var(--shadow); }


/* ---------- 9. 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  body[data-page="support"] *,
  body[data-page="support"] *::before,
  body[data-page="support"] *::after {
    transition: none !important;
    animation: none !important;
  }
}