/* ============ 使用说明（帮助中心）============ */
.help-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.help-top { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
.ht-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--text-1, #ececec); }
.ht-sub { font-size: 12px; color: var(--text-3, #707070); margin-left: 10px; }

/* 管理员一键更新条 */
.help-admin { margin: 12px 22px 0; padding: 12px 14px; border-radius: 10px;
  background: var(--bg-3, #212121); border: 1px solid var(--border, rgba(255,255,255,.08)); }
.hadm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hadm-ver { display: flex; flex-direction: column; gap: 2px; }
.hadm-ver span { font-size: 11px; color: var(--text-3, #707070); }
.hadm-ver b { font-size: 14px; font-weight: 500; color: var(--text-1, #ececec); }
.hadm-ver b.is-draft { color: #cccccc; }
.hadm-tag { font-style: normal; font-size: 11px; color: #cccccc; background: rgba(167,167,167,.12);
  padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.hadm-sp { flex: 1 1 auto; }
.hadm-gate { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2, #adadad); cursor: pointer; }
.hchg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hchg-item { font-size: 12px; color: var(--text-2, #adadad); background: var(--bg-2, #272727);
  border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 6px; padding: 3px 8px; }
.hchg-item b { font-weight: 500; margin-right: 6px; }
.hchg-item.is-add b { color: #b0b0b0; }
.hchg-item.is-mod b { color: #cccccc; }
.hchg-item.is-del b { color: #a8a8a8; }

/* 主体：左导航 + 右内容 */
.help-main { flex: 1 1 auto; display: flex; min-height: 0; }

.help-nav { width: 208px; flex: 0 0 208px; overflow: auto; padding: 14px 10px 24px;
  border-right: 1px solid var(--border, rgba(255,255,255,.08)); }
.hn-title { font-size: 11px; color: var(--text-3, #707070); padding: 0 8px 8px; }
.hn-group { margin-bottom: 4px; }
.hn-head { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0;
  padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--text-1, #ececec);
  font-size: 13px; font-weight: 500; text-align: left; }
.hn-head:hover { background: var(--bg-3, #212121); }
.hn-arrow { display: inline-flex; color: var(--text-3, #707070); }
.hn-items { display: none; padding-left: 14px; }
.hn-group.is-open .hn-items { display: block; }
.hn-item { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 6px 8px; border-radius: 6px; font-size: 12.5px; color: var(--text-2, #adadad); cursor: pointer; }
.hn-item:hover { background: var(--bg-3, #212121); }
.hn-item.is-on { background: rgba(126,126,126,.18); color: var(--text-1, #ececec); }

.help-content { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 22px 28px 40px; }
.hc-crumb { font-size: 11.5px; color: var(--text-3, #707070); }
.hc-title { margin: 6px 0 4px; font-size: 19px; font-weight: 500; color: var(--text-1, #ececec); }
.hc-meta { font-size: 11.5px; color: var(--text-3, #707070); margin-bottom: 14px; }
.hc-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.8; color: var(--text-2, #adadad); }
.hn-empty { padding: 40px 0; text-align: center; color: var(--text-3, #707070); }

/* 截图轮播 */
.help-carousel { position: relative; margin: 16px 0 4px; border-radius: 10px; overflow: hidden;
  background: var(--bg-3, #212121); border: 1px solid var(--border, rgba(255,255,255,.08)); }
.hc-view { position: relative; min-height: 140px; }
.hc-slide { display: none; }
.hc-slide.is-on { display: block; }
.hc-img { display: block; width: 100%; max-height: 380px; object-fit: contain; background: #14161a; cursor: zoom-in; }
.hc-ph { min-height: 140px; display: flex; align-items: center; justify-content: center;
  color: var(--text-3, #707070); font-size: 12.5px; }
.hc-cap { padding: 8px 12px; font-size: 12px; color: var(--text-3, #707070); text-align: center; }
.hc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff; border: 0; }
.hc-arrow:hover { background: rgba(0,0,0,.65); }
.hc-prev { left: 8px; }
.hc-next { right: 8px; }
.hc-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0 10px; }
.hc-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--text-3, #707070); opacity: .5; }
.hc-dot.is-on { opacity: 1; background: #7e7e7e; }

/* 反馈区 */
.hc-fb { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08)); }
.hcfb-t { font-size: 13px; color: var(--text-2, #adadad); }
.hcfb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px;
  background: var(--bg-3, #212121); border: 1px solid var(--border, rgba(255,255,255,.08));
  color: var(--text-2, #adadad); font-size: 12.5px; cursor: pointer; }
.hcfb-btn:hover { border-color: rgba(255,255,255,.22); color: var(--text-1, #ececec); }
.hc-issue { margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer;
  color: #b0b0b0; font-size: 12.5px; }

/* 灯箱（点击放大） */
.hlb-mask { position: fixed; inset: 0; background: rgba(0,0,0,.78); display: flex;
  align-items: center; justify-content: center; z-index: 9999; }
.help-lightbox { position: relative; max-width: 92vw; max-height: 92vh; display: flex;
  flex-direction: column; align-items: center; }
.help-lightbox .hlb-body { display: flex; align-items: center; justify-content: center; }
.help-lightbox .hlb-body img { max-width: 88vw; max-height: 84vh; object-fit: contain; border-radius: 8px; background: #14161a; }
.help-lightbox .hlb-ph { min-width: 320px; min-height: 200px; display: flex; align-items: center;
  justify-content: center; color: #adadad; background: #212121; border-radius: 8px; }
.hlb-x { position: absolute; top: -38px; right: 0; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: 0; display: flex; align-items: center;
  justify-content: center; cursor: pointer; }
.hlb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; border: 0; display: flex;
  align-items: center; justify-content: center; cursor: pointer; }
.hlb-prev { left: -52px; }
.hlb-next { right: -52px; }
.hlb-foot { margin-top: 12px; font-size: 12.5px; color: #d3d3d3; }

@media (max-width: 860px) {
  .help-main { flex-direction: column; }
  .help-nav { width: auto; flex: 0 0 auto; max-height: 40vh; border-right: 0;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); }
  .help-content { padding: 16px 16px 32px; }
  .hlb-prev { left: 4px; }
  .hlb-next { right: 4px; }
}