/* ====================================================================
   96IDCtx 前台主题 · 内容页扩展样式
   文件：assets/css/i9-pages.css
   --------------------------------------------------------------------
   用途     : 代理合作 / 静态住宅 IP / 宝塔面板 / 资源下载 等页面专用组件
   说明     : 100% 自行编写，全部走 i9-base.css 的设计令牌，与其余页面同源
   注意     : UTF-8 无 BOM
   ==================================================================== */

/* ---- 痛点卡（带序号）：静态住宅 IP 的「为什么选择我们」 ---- */
.i9-pain__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  font-family: var(--i9-font-num);
  font-size: 13px;
  font-weight: var(--i9-fw-bold);
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: 50%;
}

/* ---- 品质卡 ---- */
.i9-qcard {
  position: relative;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-qcard__t { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-qcard__d { margin-top: 8px; font-size: var(--i9-fs-sm); line-height: 1.8; color: var(--i9-text-3); }
.i9-qcard__tag {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 12px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-pill);
}

/* ---- 筛选标签条 ---- */
.i9-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.i9-tab {
  padding: 6px 16px;
  font-family: inherit;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-2);
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-radius-pill);
  cursor: pointer;
  transition: all var(--i9-dur-fast) var(--i9-ease);
}
.i9-tab:hover { color: var(--i9-brand); border-color: var(--i9-brand-4); }
.i9-tab.is-active {
  color: var(--i9-brand);
  font-weight: var(--i9-fw-medium);
  background: var(--i9-brand-1);
  border-color: var(--i9-brand-3);
}
.i9-tabs__sep { width: 1px; height: 18px; margin-inline: 6px; background: var(--i9-border); }

/* ---- 商品分组 ---- */
.i9-isp-group { margin-bottom: 26px; }
.i9-isp-group:last-child { margin-bottom: 0; }
.i9-isp-group__head { margin-bottom: 12px; }
.i9-isp-group__title {
  display: block;
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-1);
}
.i9-isp-group__desc {
  display: block;
  margin-top: 4px;
  font-size: var(--i9-fs-sm);
  line-height: 1.7;
  color: var(--i9-text-4);
}

/* ---- 商品卡（规格明细） ---- */
.i9-pcard2 {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease),
              transform var(--i9-dur) var(--i9-ease);
}
.i9-pcard2:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); transform: translateY(-2px); }
.i9-pcard2__name {
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-semibold);
  line-height: 1.5;
  color: var(--i9-text-1);
}
.i9-pcard2__specs { margin: 12px 0 0; padding: 0; list-style: none; flex: 1 1 auto; }
.i9-pcard2__specs li {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-2);
}
.i9-pcard2__specs b {
  flex: none;
  width: 34px;
  font-weight: var(--i9-fw-regular);
  color: var(--i9-text-4);
}
.i9-pcard2__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--i9-border-soft);
}
.i9-pcard2__price { font-size: var(--i9-fs-h3); font-weight: var(--i9-fw-bold); color: var(--i9-error); }
.i9-pcard2__price small { font-size: var(--i9-fs-xs); font-weight: var(--i9-fw-regular); color: var(--i9-text-4); }

/* ---- 客户评价 ---- */
.i9-review {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-review__head { display: flex; align-items: center; gap: 10px; }
.i9-review__av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  font-size: 14px;
  font-weight: var(--i9-fw-semibold);
  color: #fff;
  background: linear-gradient(135deg, var(--i9-brand), var(--i9-cyan));
  border-radius: 50%;
}
.i9-review__name { display: block; font-size: var(--i9-fs-body); font-weight: var(--i9-fw-medium); color: var(--i9-text-1); }
.i9-review__stars { font-size: 12px; color: #FF9A2E; letter-spacing: 1px; }
.i9-review__text { margin-top: 12px; font-size: var(--i9-fs-sm); line-height: 1.8; color: var(--i9-text-3); }
.i9-review__time { display: block; margin-top: 10px; font-size: var(--i9-fs-xs); color: var(--i9-text-4); }

/* ---- 代理等级卡 ---- */
.i9-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.i9-tier {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  overflow: hidden;
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-tier:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-2); }
.i9-tier--featured { border-color: var(--i9-brand); box-shadow: 0 0 0 1px var(--i9-brand-ring), var(--i9-sh-1); }
.i9-tier__head {
  padding: 16px 16px 12px;
  color: #fff;
  background: linear-gradient(135deg, #0F172A, #1E293B);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.i9-tier--featured .i9-tier__head { background: linear-gradient(135deg, #003CAB, var(--i9-brand)); }
.i9-tier__name { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-bold); }
.i9-tier__disc { margin-top: 4px; font-size: var(--i9-fs-xs); opacity: .85; }
.i9-tier__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 16px 16px 4px;
}
.i9-tier__price b { font-size: 26px; font-weight: var(--i9-fw-bold); color: var(--i9-text-1); line-height: 1; }
.i9-tier__price span { font-size: var(--i9-fs-xs); color: var(--i9-text-4); }
.i9-tier__pdesc { padding: 0 16px 14px; font-size: var(--i9-fs-xs); color: var(--i9-text-4); }
.i9-tier__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 12px 16px;
  list-style: none;
  border-top: 1px solid var(--i9-border-soft);
}
.i9-tier__list li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-2);
}
.i9-tier__list li:last-child { margin-bottom: 0; }
.i9-tier__list i { flex: none; font-style: normal; font-weight: 700; }
.i9-tier__list .is-yes i { color: var(--i9-success); }
.i9-tier__list .is-no { color: var(--i9-text-5); }
.i9-tier__list .is-no i { color: var(--i9-text-5); }
.i9-tier__tag {
  margin-left: auto;
  padding: 1px 7px;
  font-size: 11px;
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-pill);
  white-space: nowrap;
}
.i9-tier__list .is-no .i9-tier__tag { color: var(--i9-text-4); background: var(--i9-bg-soft); }
.i9-tier__foot { padding: 14px 16px 16px; }
.i9-tier__foot .i9-btn { width: 100%; }

/* ---- 安装命令块（宝塔页） ---- */
.i9-code {
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  overflow: hidden;
}
.i9-code__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-code__title { font-size: var(--i9-fs-body); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-code__sys { font-size: var(--i9-fs-xs); color: var(--i9-text-4); }
.i9-code__copy {
  margin-left: auto;
  padding: 4px 12px;
  font-family: inherit;
  font-size: var(--i9-fs-xs);
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border: 0;
  border-radius: var(--i9-radius-pill);
  cursor: pointer;
}
.i9-code__copy:hover { background: var(--i9-brand-2); }
.i9-code__body {
  margin: 0;
  padding: 14px 16px;
  font-family: var(--i9-font-num);
  font-size: 12.5px;
  line-height: 1.75;
  color: #E6EDF3;
  background: #0F172A;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.i9-code__body code { font-family: inherit; }

/* ---- 下载卡 ---- */
.i9-dl {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease),
              transform var(--i9-dur) var(--i9-ease);
}
.i9-dl:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); transform: translateY(-2px); }
.i9-dl__tag {
  align-self: flex-start;
  padding: 2px 10px;
  font-size: 11px;
  border-radius: var(--i9-radius-pill);
  color: #fff;
  background: var(--i9-brand);
}
.i9-dl__tag--home { background: linear-gradient(135deg, #0052D9, #2B7FFF); }
.i9-dl__tag--cart { background: linear-gradient(135deg, #E37318, #FF9A2E); }
.i9-dl__tag--member { background: linear-gradient(135deg, #00A660, #2BA471); }
.i9-dl__tag--full { background: linear-gradient(135deg, #7A3FE8, #A66BFF); }
.i9-dl__name { margin-top: 12px; font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-dl__desc { margin-top: 8px; font-size: var(--i9-fs-sm); line-height: 1.75; color: var(--i9-text-3); }
.i9-dl__feats { flex: 1 1 auto; margin: 12px 0 0; padding-left: 18px; }
.i9-dl__feats li { margin-bottom: 5px; font-size: var(--i9-fs-xs); line-height: 1.6; color: var(--i9-text-3); }
.i9-dl__foot { margin-top: 14px; }
.i9-dl__foot .i9-btn { width: 100%; }

/* ---- 介绍段落 ---- */
.i9-intro { padding: 20px 22px; margin-bottom: 14px; background: #fff; border: 1px solid var(--i9-border-soft); border-radius: var(--i9-radius-md); }
.i9-intro:last-child { margin-bottom: 0; }
.i9-intro__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-1);
}
.i9-intro__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.i9-intro__p { margin-top: 10px; font-size: var(--i9-fs-body); line-height: 1.9; color: var(--i9-text-2); }

/* ---- 关于我们：简介双栏 / 数据卡 / 带描述的列表 ---- */
.i9-about {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.i9-about__p { font-size: 15px; line-height: 2; color: var(--i9-text-2); }
.i9-about__p + .i9-about__p { margin-top: 14px; }
.i9-about__p b { font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }

/* 数据卡（关于我们页专用）
   注意：这里**不能**用 .i9-stats —— 首页 i9-home.css 已用同名类做 4 列统计条，
   而本文件在 i9-home.css 之后加载，同名会覆盖首页列数（曾导致首页统计变 2×2）。 */
.i9-factgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.i9-fact {
  padding: 18px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-fact__v {
  font-family: var(--i9-font-num);
  font-size: 28px;
  font-weight: var(--i9-fw-bold);
  line-height: 1.1;
  background: linear-gradient(100deg, var(--i9-brand), var(--i9-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.i9-fact__k { margin-top: 6px; font-size: var(--i9-fs-xs); color: var(--i9-text-4); }

/* 带描述的条目列表（优势 / 场景） */
.i9-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.i9-list__item {
  display: flex;
  gap: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-list__item:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); }
.i9-list__ico { flex: none; color: var(--i9-brand); }
.i9-list__b { min-width: 0; }
.i9-list__t { font-size: var(--i9-fs-body); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-list__d { margin-top: 6px; font-size: var(--i9-fs-sm); line-height: 1.75; color: var(--i9-text-3); }

/* 节点地区标签 */
.i9-regions { display: flex; flex-wrap: wrap; gap: 10px; }
.i9-region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-2);
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-radius-pill);
}
.i9-region .i9-ico { color: var(--i9-brand); }

@media (max-width: 992px) {
  .i9-about { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .i9-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .i9-factgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 机型对比表（比纯卡片堆叠更省版面、更易横向比较） ---- */
.i9-tablewrap {
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.i9-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: var(--i9-fs-sm); }
.i9-table th,
.i9-table td {
  padding: 13px 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: var(--i9-fs-xs);
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-4);
  background: var(--i9-bg-soft);
  border-bottom: 1px solid var(--i9-border);
}
.i9-table tbody tr { transition: background var(--i9-dur-fast) var(--i9-ease); }
.i9-table tbody tr:hover { background: var(--i9-brand-1); }
.i9-table tbody tr:last-child td { border-bottom: 0; }
.i9-table__name { font-weight: var(--i9-fw-medium); color: var(--i9-text-1); white-space: normal; min-width: 210px; }
.i9-table__price { font-family: var(--i9-font-num); font-size: 17px; font-weight: var(--i9-fw-bold); color: var(--i9-error); }
.i9-table__price small { font-size: var(--i9-fs-xs); font-weight: var(--i9-fw-regular); color: var(--i9-text-4); }
.i9-table__tag {
  display: inline-block;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-pill);
}
.i9-table__act { text-align: right; }

/* ---- 为什么选择我们：序号 + 图标组合卡 ---- */
.i9-adv {
  position: relative;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  overflow: hidden;
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease),
              transform var(--i9-dur) var(--i9-ease);
}
.i9-adv:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-2); transform: translateY(-3px); }
.i9-adv::after {
  content: attr(data-no);
  position: absolute;
  top: -10px;
  right: 10px;
  font-family: var(--i9-font-num);
  font-size: 56px;
  font-weight: var(--i9-fw-bold);
  line-height: 1;
  color: var(--i9-brand-1);
  pointer-events: none;
}
.i9-adv__ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-md);
}
.i9-adv__t { position: relative; margin-top: 14px; font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-adv__d { position: relative; margin-top: 8px; font-size: var(--i9-fs-sm); line-height: 1.8; color: var(--i9-text-3); }

/* ---- 检测结果卡（IP 品质） ---- */
.i9-check {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-check__head { display: flex; align-items: center; gap: 10px; }
.i9-check__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--i9-success);
  background: var(--i9-success-bg);
  border-radius: var(--i9-radius-sm);
}
.i9-check__t { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-check__d { margin-top: 10px; font-size: var(--i9-fs-sm); line-height: 1.8; color: var(--i9-text-3); }
.i9-check__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.i9-check__tag {
  padding: 3px 12px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-success-text);
  background: var(--i9-success-bg);
  border-radius: var(--i9-radius-pill);
}
.i9-check__tag--brand { color: var(--i9-brand); background: var(--i9-brand-1); }

/* ---- 场景条 ---- */
.i9-scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.i9-scene2 {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), transform var(--i9-dur) var(--i9-ease);
}
.i9-scene2:hover { border-color: var(--i9-brand-3); transform: translateY(-3px); }
.i9-scene2__ico { color: var(--i9-brand); }
.i9-scene2__t { margin-top: 12px; font-size: var(--i9-fs-body); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-scene2__d { margin-top: 6px; font-size: var(--i9-fs-xs); line-height: 1.75; color: var(--i9-text-3); }

@media (max-width: 1200px) { .i9-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .i9-scenes { grid-template-columns: minmax(0, 1fr); } }

/* ---- 步骤条（宝塔安装 / 主题部署） ---- */
.i9-steps { display: grid; gap: 12px; }
.i9-step {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-step__no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-family: var(--i9-font-num);
  font-size: 13px;
  font-weight: var(--i9-fw-bold);
  color: #fff;
  background: linear-gradient(135deg, var(--i9-brand), var(--i9-cyan));
  border-radius: 50%;
}
.i9-step__b { min-width: 0; }
.i9-step__t { font-size: var(--i9-fs-body); font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-step__d { margin-top: 5px; font-size: var(--i9-fs-sm); line-height: 1.75; color: var(--i9-text-3); }

/* ---- 目录结构 ---- */
.i9-tree {
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  overflow: hidden;
}
.i9-tree__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-tree__row:last-child { border-bottom: 0; }
.i9-tree__p {
  flex: none;
  min-width: 250px;
  font-family: var(--i9-font-num);
  font-size: 12.5px;
  color: var(--i9-brand);
  word-break: break-all;
}
.i9-tree__d { font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
@media (max-width: 768px) { .i9-tree__p { min-width: 0; } }

/* ---- 响应式 ---- */
@media (max-width: 1400px) { .i9-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .i9-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 992px) {
  .i9-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .i9-tiers { grid-template-columns: minmax(0, 1fr); }
  .i9-tabs__sep { display: none; }
}


/* ====================================================================
   帮助中心（help.html / help_content.html）
   --------------------------------------------------------------------
   左侧分类竖排 + 右侧文章面板。交互用自研 data-i9-tabs 驱动：
     .i9-help__nav-item.is-active     ← 当前分类
     .i9-help__panel[hidden]          ← 非当前分类
   ==================================================================== */
.i9-help {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* ---------------- 左：分类 ---------------- */
.i9-help__side {
  position: sticky;
  top: 84px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-help__side-title {
  margin-bottom: 12px;
  font-size: var(--i9-fs-sm);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
}
.i9-help__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.i9-help__nav-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 9px 12px 9px 14px;
  font-family: inherit;
  font-size: var(--i9-fs-sm);
  line-height: 1.5;
  color: var(--i9-text-2);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--i9-radius-sm);
  cursor: pointer;
  transition: color var(--i9-dur-fast) var(--i9-ease),
              background var(--i9-dur-fast) var(--i9-ease);
}
.i9-help__nav-item:hover {
  color: var(--i9-brand);
  background: var(--i9-brand-1);
}
.i9-help__nav-item.is-active {
  color: var(--i9-brand);
  font-weight: var(--i9-fw-semibold);
  background: var(--i9-brand-1);
}
/* 当前项左侧指示条 */
.i9-help__nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 16px;
  background: var(--i9-brand);
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
}
.i9-help__side-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--i9-border-soft);
}
.i9-help__side-tip {
  margin-bottom: 6px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-4);
}
.i9-help__side-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-brand);
}
.i9-help__side-link:hover { color: var(--i9-brand-hover); }

/* ---------------- 右：文章 ---------------- */
.i9-help__main {
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-help__main-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-help__main-title {
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
}
.i9-help__main-hint {
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-4);
}
.i9-help__body { padding: 8px 22px 18px; }
.i9-help__panel { padding-top: 6px; }
.i9-help__list { margin: 0; padding: 0; list-style: none; }
.i9-help__item + .i9-help__item { border-top: 1px solid var(--i9-border-soft); }
.i9-help__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 4px;
  color: var(--i9-text-2);
  transition: color var(--i9-dur-fast) var(--i9-ease);
}
.i9-help__link:hover { color: var(--i9-brand); }
.i9-help__link > .i9-ico:first-child { flex: none; color: var(--i9-text-4); }
.i9-help__link:hover > .i9-ico:first-child { color: var(--i9-brand); }
.i9-help__link-text { flex: 1 1 auto; min-width: 0; font-size: var(--i9-fs-body); }
.i9-help__link-go {
  flex: none;
  color: var(--i9-text-5);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--i9-dur-fast) var(--i9-ease),
              transform var(--i9-dur-fast) var(--i9-ease);
}
.i9-help__link:hover .i9-help__link-go { opacity: 1; transform: none; }

/* 文章详情页 */
.i9-help__crumb { margin-bottom: 16px; }
.i9-help__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* 富文本正文（平台输出的 .content）—— 只做基础排版约束 */
.i9-article-body { line-height: 1.9; color: var(--i9-text-2); }
.i9-article-body > :first-child { margin-top: 0; }
.i9-article-body img { max-width: 100%; height: auto; }
.i9-article-body h2,
.i9-article-body h3 { margin: 22px 0 10px; font-weight: var(--i9-fw-semibold); color: var(--i9-text-1); }
.i9-article-body p { margin: 0 0 12px; }
.i9-article-body ul,
.i9-article-body ol { margin: 8px 0 14px; padding-left: 22px; }
.i9-article-body li { margin-bottom: 6px; }
.i9-article-body a { color: var(--i9-brand); text-decoration: underline; }
.i9-article-body pre {
  margin: 12px 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: var(--i9-fs-sm);
  background: var(--i9-bg-soft);
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-sm);
}
.i9-article-body code {
  padding: 1px 5px;
  font-size: .92em;
  background: var(--i9-bg-soft);
  border-radius: 3px;
}
.i9-article-body pre code { padding: 0; background: none; }
.i9-article-body table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.i9-article-body th,
.i9-article-body td {
  padding: 9px 12px;
  font-size: var(--i9-fs-sm);
  text-align: left;
  border: 1px solid var(--i9-border-soft);
}
.i9-article-body th { background: var(--i9-bg-soft); font-weight: var(--i9-fw-semibold); }

/* ---------------- 空状态（补齐 .i9-empty 缺失的几个子元素）---------------- */
.i9-empty__desc {
  max-width: 520px;
  font-size: var(--i9-fs-sm);
  line-height: 1.8;
  color: var(--i9-text-4);
}
.i9-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 6px;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 992px) {
  .i9-help { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .i9-help__side { position: static; }
  /* 窄屏把分类横排滚动，省纵向空间 */
  .i9-help__nav {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .i9-help__nav-item {
    width: auto;
    flex: none;
    padding: 7px 14px;
    white-space: nowrap;
    border: 1px solid var(--i9-border-soft);
  }
  .i9-help__nav-item.is-active {
    border-color: var(--i9-brand);
    background: var(--i9-brand);
    color: #fff;
  }
  .i9-help__nav-item.is-active::before { display: none; }
  .i9-help__side-foot { display: none; }
}
@media (max-width: 768px) {
  .i9-help__main-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .i9-help__body { padding: 6px 16px 14px; }
}


/* ====================================================================
   文章模块（article_list.html / article_content.html）
   --------------------------------------------------------------------
   本主题此前缺失这两个模板，首页的「查看更多」与文章链接都会 404。
   这里给出列表与正文的样式，全部使用设计令牌。
   ==================================================================== */

/* ---- 面包屑 ---- */
.i9-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-4);
}
.i9-crumb a { color: var(--i9-text-4); }
.i9-crumb a:hover { color: var(--i9-brand); }
.i9-crumb__sep { color: var(--i9-text-5); }
.i9-crumb [aria-current="page"] { color: var(--i9-text-2); }

/* ---- 文章列表 ---- */
.i9-articles {
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-lg);
  background: #fff;
  overflow: hidden;
}
.i9-articles__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--i9-border-soft);
  transition: background var(--i9-dur-fast) var(--i9-ease);
}
.i9-articles__item:last-child { border-bottom: 0; }
.i9-articles__item:hover { background: var(--i9-bg-soft); }
.i9-articles__main { min-width: 0; }
.i9-articles__title {
  margin: 0 0 6px;
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  line-height: 1.5;
  color: var(--i9-text-1);
  transition: color var(--i9-dur-fast) var(--i9-ease);
}
.i9-articles__item:hover .i9-articles__title { color: var(--i9-brand); }
.i9-articles__desc {
  margin: 0;
  font-size: var(--i9-fs-sm);
  line-height: 1.7;
  color: var(--i9-text-4);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.i9-articles__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.i9-articles__date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--i9-fs-xs);
  color: var(--i9-text-5);
  white-space: nowrap;
}
.i9-articles__go { color: var(--i9-text-5); }
.i9-articles__item:hover .i9-articles__go { color: var(--i9-brand); }

/* ---- 文章正文 ---- */
.i9-article {
  max-width: var(--i9-container-narrow);
  margin: 0 auto;
}
.i9-article__head {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-article__title {
  margin: 0 0 12px;
  font-size: var(--i9-fs-h1);
  font-weight: var(--i9-fw-bold);
  line-height: 1.35;
  color: var(--i9-text-1);
}
.i9-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-4);
}
.i9-article__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* 正文排版：后台编辑器产物，这里只做阅读性基线 */
.i9-article__body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--i9-text-2);
  word-break: break-word;
}
.i9-article__body > *:first-child { margin-top: 0; }
.i9-article__body h1,
.i9-article__body h2,
.i9-article__body h3,
.i9-article__body h4 {
  margin: 28px 0 12px;
  font-weight: var(--i9-fw-semibold);
  line-height: 1.45;
  color: var(--i9-text-1);
}
.i9-article__body h2 { font-size: var(--i9-fs-h2); }
.i9-article__body h3 { font-size: var(--i9-fs-h3); }
.i9-article__body p { margin: 0 0 14px; }
.i9-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--i9-radius-md);
}
.i9-article__body ul,
.i9-article__body ol { margin: 0 0 14px; padding-left: 22px; }
.i9-article__body li { margin-bottom: 6px; }
.i9-article__body a { color: var(--i9-brand); }
.i9-article__body a:hover { text-decoration: underline; }
.i9-article__body blockquote {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--i9-bg-soft);
  border-left: 3px solid var(--i9-brand);
  border-radius: 0 var(--i9-radius-sm) var(--i9-radius-sm) 0;
  color: var(--i9-text-3);
}
.i9-article__body pre {
  margin: 0 0 14px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--i9-font-mono);
  font-size: var(--i9-fs-sm);
  background: var(--i9-bg-gray);
  border-radius: var(--i9-radius-md);
}
.i9-article__body code {
  padding: 1px 5px;
  font-family: var(--i9-font-mono);
  font-size: .92em;
  background: var(--i9-bg-gray);
  border-radius: var(--i9-radius-xs);
}
.i9-article__body pre code { padding: 0; background: none; }
.i9-article__body table {
  width: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
  font-size: var(--i9-fs-sm);
}
.i9-article__body th,
.i9-article__body td {
  padding: 9px 12px;
  border: 1px solid var(--i9-border-soft);
  text-align: left;
}
.i9-article__body th { background: var(--i9-bg-soft); font-weight: var(--i9-fw-medium); }

/* 正文底部操作 */
.i9-article__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: var(--i9-container-narrow);
  margin: 34px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--i9-border-soft);
}

/* ---- 窄屏 ---- */
@media (max-width: 768px) {
  .i9-articles__item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px 16px; }
  .i9-articles__title { font-size: var(--i9-fs-body); }
  .i9-article__title { font-size: var(--i9-fs-h2); }
  .i9-article__foot { flex-direction: column; align-items: stretch; }
}


/* ====================================================================
   在线服务：留言表单（.i9-msgform）
   --------------------------------------------------------------------
   原先表单直接把 .i9-field 套在 <form> 上（字段类）导致间距叠加、
   提交按钮孤零零贴左。这里给出独立的表单体系与操作区。
   ==================================================================== */
.i9-chat__form { padding: 0; }

.i9-msgform {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ---- 头部：返回 + 标题 ---- */
.i9-msgform__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--i9-bg-soft);
  border-bottom: 1px solid var(--i9-border-soft);
}
.i9-msgform__heading { min-width: 0; }
.i9-msgform__title {
  margin: 0;
  font-size: var(--i9-fs-h4);
  font-weight: var(--i9-fw-semibold);
  line-height: 1.4;
  color: var(--i9-text-1);
}
.i9-msgform__sub {
  margin: 4px 0 0;
  font-size: var(--i9-fs-xs);
  line-height: 1.6;
  color: var(--i9-text-4);
}

/* ---- 表单主体 ---- */
.i9-msgform__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}
.i9-msgform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.i9-msgform__field { margin-bottom: 16px; }
.i9-msgform__grid .i9-msgform__field { margin-bottom: 0; }
.i9-msgform__label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--i9-fs-sm);
  font-weight: var(--i9-fw-medium);
  color: var(--i9-text-2);
}
.i9-msgform__label .i9-req { color: var(--i9-error); font-weight: var(--i9-fw-regular); }
.i9-msgform__hint {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 7px 0 0;
  font-size: var(--i9-fs-xs);
  line-height: 1.6;
  color: var(--i9-text-4);
}
.i9-msgform__hint .i9-ico { flex: none; margin-top: 2px; }

/* 蜜罐字段：正常用户不可见 */
.i9-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

/* 输入框：聚焦态与站内表单统一 */
.i9-msgform__body .form-control {
  width: 100%;
  min-height: 42px;
  padding: 9px 13px;
  font-family: inherit;
  font-size: var(--i9-fs-body);
  line-height: 1.6;
  color: var(--i9-text-1);
  background: #fff;
  border: 1px solid var(--i9-border-input);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease),
              box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-msgform__body textarea.form-control {
  min-height: 132px;
  resize: vertical;
}
.i9-msgform__body .form-control::placeholder { color: var(--i9-text-5); }
.i9-msgform__body .form-control:focus {
  outline: none;
  border-color: var(--i9-brand);
  box-shadow: 0 0 0 3px var(--i9-brand-ring);
}
.i9-msgform__body .form-control:invalid:not(:placeholder-shown) {
  border-color: var(--i9-error);
}

/* ---- 底部操作区 ---- */
.i9-msgform__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--i9-border-soft);
}
.i9-msgform__btns {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
/* 结果显示为带左竖条的提示条 */
.i9-msgform__actions .i9-result {
  flex: 1 1 220px;
  margin: 0;
  font-size: var(--i9-fs-sm);
  line-height: 1.6;
}
.i9-msgform__actions .i9-result:not(:empty) {
  padding: 8px 12px;
  border-radius: var(--i9-radius-sm);
  border-left: 3px solid currentColor;
  background: var(--i9-bg-soft);
}
.i9-msgform__actions .i9-result.is-success { color: var(--i9-success); background: var(--i9-success-bg, var(--i9-bg-soft)); }
.i9-msgform__actions .i9-result.is-error { color: var(--i9-error); background: var(--i9-error-bg, var(--i9-bg-soft)); }

/* 提交按钮 */
.i9-msgform__btns .i9-chat__submit {
  height: 40px;
  padding: 0 24px;
  font-size: var(--i9-fs-body);
  font-weight: var(--i9-fw-medium);
  color: #fff;
  background: var(--i9-brand);
  border: 1px solid var(--i9-brand);
  border-radius: var(--i9-radius-md);
  cursor: pointer;
  transition: background var(--i9-dur) var(--i9-ease);
}
.i9-msgform__btns .i9-chat__submit:hover { background: var(--i9-brand-hover); }
.i9-msgform__btns .i9-chat__submit:disabled { opacity: .65; cursor: not-allowed; }

/* 该按钮自带 .i9-chat__spinner 转圈；
   屏蔽 i9-base.css 中通用 .i9-btn.is-loading::after 的转圈，避免出现「两个圈」 */
.i9-msgform__btns .i9-chat__submit.is-loading::after { content: none; }
.i9-msgform__btns .i9-chat__submit.is-loading { color: #fff !important; }

@media (max-width: 768px) {
  .i9-msgform__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .i9-msgform__grid .i9-msgform__field { margin-bottom: 16px; }
  .i9-msgform__head { padding: 14px 16px; }
  .i9-msgform__body { padding: 16px; }
  .i9-msgform__actions { flex-direction: column; align-items: stretch; }
  .i9-msgform__btns { margin-left: 0; flex-direction: column-reverse; }
  .i9-msgform__btns .i9-btn,
  .i9-msgform__btns .i9-chat__submit { width: 100%; justify-content: center; }
}