/* ============================================================
 * qa.css — Trading Journal 答疑板块样式
 * ============================================================
 * 隔离原则:
 *   - 选择器一律以 #page-qa 或 .qa-* 开头
 *   - modal/toast 例外: 挂在 body 上, 但 class 全部 qa- 前缀, 不会污染其它模块
 *   - 沿用项目色板: 主色 var(--accent), 背景/文字依 trading-journal 主题
 *   - 如果主题 CSS 没有 --accent 等变量, fallback 到具体色
 * ============================================================ */

/* ============================================================
 * 容器骨架
 * ============================================================ */
/* v0.3.3 fix: #page-qa 不能写 display!ID specificity 高过 .page / .page.active,
 * 写死 display 会让 #page-qa 永远显示,跟其他 page 叠加导致画面错乱。
 * 让它顺从全局 .page { display:none } / .page.active { display:flex } 即可。
 * flex-direction 留着没关系 — display:none 时不生效,active 时被 .page.active 接管。 */
#page-qa {
  width: 100%;
  height: 100%;
  flex-direction: column;
}
#page-qa .qa-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#page-qa .qa-header {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #2a2a30);
  background: var(--surface-1, #1a1a1f);
}
#page-qa .qa-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  background: var(--surface-0, #0f0f12);
}
#page-qa .qa-loading,
#page-qa .qa-empty,
#page-qa .qa-empty-replies {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted, #888);
  font-size: 14px;
}

/* ============================================================
 * 分类筛选条
 * ============================================================ */
#page-qa .qa-cat-bar {
  display: flex;
  flex-wrap: nowrap;   /* 工具栏内单行, 溢出由 toolbar-left 横向滚动 */
  gap: 8px;
  align-items: center;
}
/* 2026-05-21 重构: chip 视觉对齐播报 cat-chip (字号/字体/padding/圆角/颜色全部相同) */
#page-qa .qa-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Space Grotesk','Microsoft YaHei',sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.4;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: all .15s;
}
#page-qa .qa-cat-chip:hover {
  background: transparent;
  color: var(--text);
  border-color: var(--text3);
}
#page-qa .qa-cat-chip.active {
  background: rgba(230,126,34,0.08);
  color: var(--accent);
  border-color: var(--accent);
}
#page-qa .qa-cat-chip .qa-cat-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* admin 管理标签按钮: 维持原 margin-left:auto 让它贴最右. 视觉与普通 chip 同款冷色调 */
#page-qa .qa-cat-chip-admin {
  /* 2026-05-21 (修): 工具栏布局下不再用 margin-left:auto 推到右,
     让 admin chip 顺序跟在普通 chip 后面 */
  background: transparent;
  border-color: var(--border);
  color: var(--text3);
}
#page-qa .qa-cat-chip-admin:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* ============================================================
 * 列表卡片
 * ============================================================ */
/* 2026-05-23 修: max-width 920px → 1300px, 与 Statistics 页面宽度接近, 减少左右黑边 */
#page-qa .qa-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1300px;
  margin: 0 auto;
}
/* 卡片密度收紧 (对齐播报 .msg 的紧凑度): padding 7px 16px + head/title margin 缩到 2/3px */
#page-qa .qa-card {
  padding: 7px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
#page-qa .qa-card:hover {
  background: var(--bg3);
  border-color: var(--text3);
}
#page-qa .qa-card.pinned {
  border-color: var(--accent);
  border-width: 1px 1px 1px 3px;
}
#page-qa .qa-card.private {
  border-style: dashed;
}
#page-qa .qa-card.closed {
  opacity: 0.65;
}
#page-qa .qa-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
#page-qa .qa-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 3px;
  word-break: break-word;
}
#page-qa .qa-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text3);
}
#page-qa .qa-card-meta .qa-meta-sep {
  margin: 0 2px;
  color: var(--text3);
  opacity: 0.5;
}

/* ============================================================
 * 通用 tag / 状态徽章
 * ============================================================ */
#page-qa .qa-cat-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
#page-qa .qa-cat-tag-none {
  background: transparent;
  color: var(--text-faint, #555);
  border: 1px dashed var(--border, #2a2a30);
}
#page-qa .qa-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
#page-qa .qa-status-waiting  { background: rgba(245, 158, 11, .15); color: #f59e0b; }
#page-qa .qa-status-answered { background: rgba(16, 185, 129, .15); color: #10b981; }
#page-qa .qa-status-closed   { background: rgba(107, 114, 128, .2); color: #9ca3af; }

#page-qa .qa-pin-icon,
#page-qa .qa-private-icon {
  font-size: 13px;
}

/* ============================================================
 * 详情视图
 * ============================================================ */
#page-qa .qa-detail {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#page-qa .qa-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#page-qa .qa-back {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border, #2a2a30);
  color: var(--text, #e4e4e8);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
#page-qa .qa-back:hover {
  background: var(--surface-2, #2a2a30);
}
#page-qa .qa-admin-bar {
  display: flex;
  gap: 6px;
}
#page-qa .qa-adm-btn {
  padding: 5px 12px;
  background: var(--surface-2, #2a2a30);
  color: var(--text, #e4e4e8);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}
#page-qa .qa-adm-btn:hover {
  background: var(--surface-3, #353541);
}
#page-qa .qa-adm-danger {
  color: #ef4444;
  border-color: rgba(239, 68, 68, .3);
}
#page-qa .qa-adm-danger:hover {
  background: rgba(239, 68, 68, .1);
}

#page-qa .qa-detail-head {
  padding: 16px;
  background: var(--surface-1, #1a1a1f);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 8px;
}
#page-qa .qa-detail-head > * {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
#page-qa .qa-detail-title {
  display: block;
  margin: 8px 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #e4e4e8);
  line-height: 1.4;
  word-break: break-word;
}
#page-qa .qa-detail-meta {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted, #888);
}
/* 2026-06-02: 点击帖子即时展开时的加载占位(数据到位前给反馈) */
#page-qa .qa-detail-loading {
  padding: 18px 16px;
  font-size: 13px;
  color: var(--text-muted, #888);
  text-align: center;
  letter-spacing: 1px;
}
#page-qa .qa-detail-body {
  padding: 16px;
  background: var(--surface-1, #1a1a1f);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text, #e4e4e8);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
 * 回复
 * ============================================================ */
#page-qa .qa-replies-wrap {
  margin-top: 8px;
}
#page-qa .qa-replies-title {
  font-size: 13px;
  color: var(--text-muted, #888);
  margin-bottom: 10px;
  padding-left: 4px;
}
#page-qa .qa-replies {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#page-qa .qa-reply {
  padding: 12px 14px;
  background: var(--surface-1, #1a1a1f);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 8px;
  position: relative;
}
#page-qa .qa-reply-admin_answer {
  border-left: 3px solid #10b981;
  background: rgba(16, 185, 129, .04);
}
#page-qa .qa-reply-asker_followup {
  border-left: 3px solid var(--accent, #e67e22);
}
#page-qa .qa-reply-bystander_comment {
  opacity: 0.85;
  background: var(--surface-0, #0f0f12);
}
#page-qa .qa-reply-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #888);
  margin-bottom: 8px;
}
#page-qa .qa-kind {
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}
#page-qa .qa-kind-admin     { background: rgba(16, 185, 129, .15); color: #10b981; }
#page-qa .qa-kind-followup  { background: rgba(230, 126, 34, .15); color: var(--accent, #e67e22); }
#page-qa .qa-kind-bystander { background: rgba(107, 114, 128, .15); color: #9ca3af; }
#page-qa .qa-reply-author {
  font-weight: 500;
  color: var(--text, #e4e4e8);
}
#page-qa .qa-reply-del {
  margin-left: auto;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint, #555);
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
}
#page-qa .qa-reply-del:hover {
  background: rgba(239, 68, 68, .1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, .3);
}
#page-qa .qa-reply-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #e4e4e8);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
 * Composer (回复输入区)
 * ============================================================ */
#page-qa .qa-composer {
  padding: 12px;
  background: var(--surface-1, #1a1a1f);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 8px;
  margin-top: 12px;
}
#page-qa .qa-composer-hint {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-bottom: 6px;
}
#page-qa .qa-composer-body {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-0, #0f0f12);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 6px;
  color: var(--text, #e4e4e8);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  max-height: 220px;
  field-sizing: content;  /* 修(X+20): 随内容自动长高, 消除"小框内部滚动看不到底行"; 到上限后才内部滚动 */
  box-sizing: border-box;
}
#page-qa .qa-composer-body:focus {
  outline: none;
  border-color: var(--accent, #e67e22);
}
#page-qa .qa-composer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ============================================================
 * 提问按钮 (原 FAB 右下浮动, 2026-05-21 改为工具栏右段内紧凑按钮)
 * ============================================================ */
#page-qa .qa-fab {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-family: 'Space Grotesk','Microsoft YaHei',sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none;
  transition: filter .15s;
  white-space: nowrap;
}
#page-qa .qa-fab:hover {
  filter: brightness(1.1);
  transform: none;
  box-shadow: none;
}
#page-qa .qa-fab-plus {
  font-size: 14px;
  line-height: 1;
}
#page-qa .qa-fab-text { letter-spacing: 0.3px; }

/* ============================================================
 * 按钮统一
 * ============================================================ */
.qa-btn-primary {
  padding: 8px 18px;
  background: var(--accent, #e67e22);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
.qa-btn-primary:hover:not(:disabled) {
  background: var(--accent-strong, #d35400);
}
.qa-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.qa-btn-ghost {
  padding: 8px 18px;
  background: transparent;
  color: var(--text, #e4e4e8);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.qa-btn-ghost:hover {
  background: var(--surface-2, #2a2a30);
}

/* ============================================================
 * Modal (发问 / 分类管理 共用)
 * 挂在 body, 全屏覆盖
 * ============================================================ */
.qa-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.qa-modal-mask[hidden] {
  display: none;
}
.qa-modal {
  background: var(--surface-1, #1a1a1f);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.qa-modal-cat {
  max-width: 720px;
}
.qa-modal-head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border, #2a2a30);
}
.qa-modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #e4e4e8);
}
.qa-modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.qa-modal-close:hover { color: var(--text, #e4e4e8); }
.qa-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.qa-modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border, #2a2a30);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 表单字段 */
.qa-field-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted, #888);
  margin: 12px 0 6px;
}
.qa-field-label:first-child { margin-top: 0; }
.qa-field-input,
.qa-field-textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--surface-0, #0f0f12);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 6px;
  color: var(--text, #e4e4e8);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
.qa-field-input:focus,
.qa-field-textarea:focus {
  outline: none;
  border-color: var(--accent, #e67e22);
}
.qa-field-textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 360px;
  field-sizing: content;  /* 修(X+20): 随内容自动长高(发问框) */
}
.qa-field-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text, #e4e4e8);
  cursor: pointer;
}
.qa-field-color {
  width: 40px;
  height: 32px;
  padding: 2px;
  background: var(--surface-0, #0f0f12);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 6px;
  cursor: pointer;
}

/* ============================================================
 * 分类管理 list
 * ============================================================ */
.qa-cat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.qa-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-0, #0f0f12);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 6px;
  transition: background .12s, transform .08s;
}
.qa-cat-row.inactive {
  opacity: 0.5;
}
.qa-cat-row.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.qa-cat-row.dragover {
  border-color: var(--accent, #e67e22);
  background: rgba(230, 126, 34, .08);
}
.qa-cat-grip {
  cursor: grab;
  color: var(--text-faint, #555);
  font-size: 16px;
  padding: 0 4px;
  user-select: none;
}
.qa-cat-grip:active { cursor: grabbing; }
.qa-cat-row .qa-cat-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qa-cat-name {
  flex: 1;
  padding: 5px 8px;
  background: var(--surface-1, #1a1a1f);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text, #e4e4e8);
  font-size: 13px;
  min-width: 100px;
}
.qa-cat-name:focus {
  outline: none;
  background: var(--surface-0, #0f0f12);
  border-color: var(--accent, #e67e22);
}
.qa-cat-color {
  width: 32px;
  height: 28px;
  padding: 2px;
  background: var(--surface-1, #1a1a1f);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 4px;
  cursor: pointer;
}
.qa-cat-active {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted, #888);
  cursor: pointer;
}
.qa-cat-del {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, .3);
  color: #ef4444;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.qa-cat-del:hover {
  background: rgba(239, 68, 68, .1);
}
.qa-cat-new {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #2a2a30);
}
.qa-cat-new .qa-field-input {
  flex: 1;
}

/* ============================================================
 * Toast
 * ============================================================ */
.qa-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  padding: 10px 18px;
  background: var(--surface-2, #2a2a30);
  color: var(--text, #e4e4e8);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 8px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  transition: opacity .2s, transform .2s;
}
.qa-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.qa-toast-error {
  background: rgba(239, 68, 68, .15);
  border-color: rgba(239, 68, 68, .4);
  color: #fca5a5;
}
.qa-toast-warn {
  background: rgba(245, 158, 11, .15);
  border-color: rgba(245, 158, 11, .4);
  color: #fcd34d;
}

/* ============================================================
 * navbar 红点 (挂在主导航 tab 上, app.js 加 #qa-nav-badge 时生效)
 * ============================================================ */
.qa-nav-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 16px;
  vertical-align: middle;
  margin-left: 4px;
}
.qa-nav-badge[hidden] {
  display: none;
}

/* ============================================================
 * 移动端适配
 * ============================================================ */
@media (max-width: 640px) {
  #page-qa .qa-body { padding: 12px; }
  #page-qa .qa-card { padding: 6px 12px; }
  #page-qa .qa-card-title { font-size: 14px; }
  #page-qa .qa-detail-title { font-size: 17px; }
  #page-qa .qa-detail-head,
  #page-qa .qa-detail-body { padding: 12px; }
  /* qa-fab 已改为工具栏内 static 按钮, 移动端无需特殊定位 */
  #page-qa .qa-cat-chip-admin { margin-left: 0; }

  .qa-modal { max-width: 100%; }
  .qa-cat-row {
    flex-wrap: wrap;
  }
  .qa-cat-name { min-width: 80px; }
}

/* ============================================================
 * 图片上传 (composer 用)
 * ============================================================ */
.qa-img-btn {
  font-size: 13px;
  padding: 6px 12px;
}
.qa-img-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-top: 8px;
  background: var(--surface-0, #0f0f12);
  border: 1px solid var(--border, #2a2a30);
  border-radius: 6px;
}
.qa-img-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.qa-img-loading {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #2a2a30);
  color: var(--text-muted, #888);
  border-radius: 4px;
}
.qa-img-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.qa-img-status {
  font-size: 12px;
  color: var(--text-muted, #888);
}
.qa-img-x {
  background: transparent;
  border: 1px solid var(--border, #2a2a30);
  color: var(--text-muted, #888);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.qa-img-x:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* 拖拽悬停态: 给 composer 加视觉提示 */
.qa-composer.qa-drag-over,
#qa-ask-composer-wrap.qa-drag-over {
  border-color: var(--accent, #e67e22);
  background: rgba(230, 126, 34, .05);
}

/* 发问 modal 内 composer 包装 (复用 .qa-composer 但样式更简) */
#qa-ask-composer-wrap {
  background: transparent;
  border: 1px solid var(--border, #2a2a30);
  border-radius: 6px;
  padding: 8px;
}
#qa-ask-composer-wrap .qa-field-textarea {
  border: none;
  background: transparent;
  padding: 0;
}
#qa-ask-composer-wrap .qa-field-textarea:focus { border: none; }
.qa-ask-img-bar {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}

/* 帖子/回复内附图显示 */
.qa-thread-img,
.qa-reply-img {
  margin-top: 10px;
}
.qa-thread-img img,
.qa-reply-img img {
  max-width: 300px;
  max-height: 300px;
  border-radius: 6px;
  border: 1px solid var(--border, #2a2a30);
  cursor: zoom-in;
}

/* ============================================================
 * v0.3.6 图片 lightbox (复刻 broadcast .bc-lightbox)
 *   全局 fixed 蒙层, 不在 #page-qa 作用域内 (与 broadcast 共存)
 * ============================================================ */
.qa-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: qa-lbIn 0.18s ease-out;
}
@keyframes qa-lbIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.qa-lightbox .qa-lb-img {
  max-width: 95vw;
  max-height: 95vh;
  display: block;
  cursor: default;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}
.qa-lightbox .qa-lb-x {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qa-lightbox .qa-lb-x:hover {
  background: rgba(255, 255, 255, 0.2);
}