/* ==========================================================================
   V1.1 · 上下文感知的历史解读问答（前台样式）
   设计原则：
     · 与主线共用宣纸底色，但答案区用「批注纸」语气 —— 左侧朱砂竖线 + 引用角标
     · 角标是视觉主角：可点、有下划线、跳转后高亮，强调「有据可查」
     · 「暂无可靠资料」必须比正常答案更醒目，不能让人误以为是回答
   ========================================================================== */

:root{
  --qa-bg:#fffdf8;
  --qa-line:#e2dac9;
  --qa-line-2:#cdc2ab;
  --qa-mark:#a8321e;
  --qa-mark-bg:#fbeee9;
  --qa-soft:#f7f4ec;
  --qa-ok:#2e6f6a;
  --qa-ok-bg:#eaf2f0;
  --qa-warn:#a9803a;
  --qa-warn-bg:#f8f0e0;
  --qa-grey:#7c7466;
}
[data-theme="dark"]{
  --qa-bg:#1e1b14;
  --qa-line:#332c21;
  --qa-line-2:#4a4030;
  --qa-mark:#e0705a;
  --qa-mark-bg:#2e1c17;
  --qa-soft:#241f17;
  --qa-ok:#5fb3aa;
  --qa-ok-bg:#16241f;
  --qa-warn:#d3a85c;
  --qa-warn-bg:#2a2114;
  --qa-grey:#a89e8b;
}

/* ---------------- 1. 页头 ---------------- */
.qa-head h1{ max-width:24ch }
.qa-search{
  display:flex; gap:10px; align-items:stretch;
  margin:0 0 8px;
}
.qa-input{
  flex:1; min-width:0;
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--qa-bg); border:1px solid var(--qa-line-2);
  border-radius:var(--r-m); padding:11px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.qa-input:focus{
  outline:none; border-color:var(--qa-mark);
  box-shadow:0 0 0 3px var(--qa-mark-bg);
}
.qa-input-lg{ font-size:16px; padding:14px 16px }
.qa-submit{
  flex:none; font-family:var(--sans); font-size:14px; font-weight:600;
  color:#fff; background:var(--qa-mark); border:1px solid var(--qa-mark);
  border-radius:var(--r-m); padding:0 22px; cursor:pointer;
  transition:filter .15s;
}
.qa-submit:hover{ filter:brightness(1.08) }
.qa-submit:active{ transform:translateY(1px) }
.qa-search-tip{
  font-size:12.5px; color:var(--ink-3); margin:0 0 18px; font-family:var(--sans);
}

/* ---------------- 2. 热门问题 ---------------- */
.qa-hot{
  display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap;
  padding:12px 14px; margin:0 0 22px;
  background:var(--qa-soft); border:1px solid var(--qa-line); border-radius:var(--r-m);
}
.qa-hot-label{
  font-family:var(--sans); font-size:12px; color:var(--ink-3);
  padding-top:5px; flex:none;
}
.qa-hot-list{ display:flex; flex-wrap:wrap; gap:8px; flex:1; min-width:0 }
.qa-hot-item{
  font-family:var(--sans); font-size:13px; color:var(--ink-2);
  background:var(--qa-bg); border:1px solid var(--qa-line);
  border-radius:999px; padding:4px 12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s, color .15s;
}
.qa-hot-item:hover{ border-color:var(--qa-mark); color:var(--qa-mark) }
.qa-hot-n{
  font-size:11px; color:var(--ink-4); font-variant-numeric:tabular-nums;
}
.qa-hot-empty{ font-family:var(--sans); font-size:12.5px; color:var(--ink-3) }

/* ---------------- 3. 上下文条 ---------------- */
.qa-ctx{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px 14px; margin:0 0 14px;
  background:var(--qa-mark-bg); border:1px solid var(--qa-mark);
  border-radius:var(--r-m);
}
.qa-ctx-label{ font-family:var(--sans); font-size:12px; color:var(--qa-mark); font-weight:600 }
.qa-ctx-chip{
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--qa-mark); background:var(--qa-bg);
  border:1px solid var(--qa-mark); border-radius:999px; padding:2px 12px;
}
.qa-ctx-tip{ font-family:var(--sans); font-size:12px; color:var(--ink-3) }
.qa-ctx-clear{
  margin-left:auto; font-family:var(--sans); font-size:12px;
  color:var(--ink-3); background:transparent; border:1px solid var(--qa-line-2);
  border-radius:999px; padding:2px 10px; cursor:pointer;
}
.qa-ctx-clear:hover{ color:var(--qa-mark); border-color:var(--qa-mark) }

/* ---------------- 4. 空状态 ---------------- */
.qa-idle{ padding:4px 0 20px }
.qa-idle h3{
  font-family:var(--serif); font-size:16px; margin:0 0 12px; color:var(--ink-2);
}
.qa-idle-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px;
}
.qa-idle-card{
  background:var(--qa-soft); border:1px solid var(--qa-line);
  border-radius:var(--r-m); padding:12px 14px;
}
.qa-idle-card b{
  display:block; font-family:var(--sans); font-size:12.5px;
  color:var(--qa-mark); margin-bottom:5px;
}
.qa-idle-card p{
  margin:0; font-family:var(--sans); font-size:13px; color:var(--ink-3); line-height:1.7;
}
.qa-idle-note{
  font-family:var(--sans); font-size:12.5px; color:var(--ink-4); margin:12px 0 0;
}

/* ---------------- 5. 答案卡 ---------------- */
.qa-q-echo{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  margin:0 0 14px; padding:0 0 12px; border-bottom:1px dashed var(--qa-line-2);
}
.qa-q-label{
  font-family:var(--sans); font-size:12px; color:var(--ink-4); flex:none;
}
.qa-q-echo b{
  font-family:var(--serif); font-size:17px; color:var(--ink); font-weight:600;
}
.qa-q-time{ font-family:var(--sans); font-size:12px; color:var(--ink-4) }
.qa-again{
  margin-left:auto; font-family:var(--sans); font-size:12px;
  color:var(--ink-3); background:transparent; border:1px solid var(--qa-line-2);
  border-radius:999px; padding:2px 10px; cursor:pointer;
}
.qa-again:hover{ color:var(--qa-mark); border-color:var(--qa-mark) }

.qa-answer{
  background:var(--qa-bg); border:1px solid var(--qa-line);
  border-left:3px solid var(--qa-mark);
  border-radius:var(--r-m); padding:18px 20px 16px;
  box-shadow:var(--shadow-1);
}
.qa-answer.is-blocked{ border-left-color:var(--qa-grey) }

.qa-answer-head{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 14px;
}
.qa-badge{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  padding:2px 9px; border-radius:999px; border:1px solid;
  white-space:nowrap;
}
.qa-badge.hit{ color:var(--qa-ok); background:var(--qa-ok-bg); border-color:var(--qa-ok) }
.qa-badge.empty{ color:var(--qa-warn); background:var(--qa-warn-bg); border-color:var(--qa-warn) }
.qa-badge.blocked{ color:var(--qa-grey); background:var(--qa-soft); border-color:var(--qa-line-2) }
.qa-gen{
  font-family:var(--sans); font-size:11px; padding:2px 8px; border-radius:var(--r-s);
  border:1px dashed var(--qa-line-2); color:var(--ink-3);
}
.qa-gen.llm{ border-style:solid; border-color:var(--qa-ok); color:var(--qa-ok) }
.qa-conf{
  margin-left:auto; font-family:var(--sans); font-size:11.5px; color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}
.qa-sens{
  font-family:var(--sans); font-size:13px; line-height:1.75;
  color:var(--qa-warn); background:var(--qa-warn-bg);
  border:1px solid var(--qa-warn); border-radius:var(--r-s);
  padding:8px 12px; margin:0 0 14px;
}

/* 正文块 */
.qa-body{ font-family:var(--sans); font-size:14.5px; line-height:1.95; color:var(--ink-2) }
.qa-para{ margin:0 0 12px }
.qa-para h4{
  font-family:var(--serif); font-size:14.5px; color:var(--qa-mark);
  margin:0 0 4px; font-weight:600;
}
.qa-para p{ margin:0 }
.qa-meta-line{
  font-size:13px; color:var(--ink-3); margin:0 0 14px;
  padding-bottom:10px; border-bottom:1px dotted var(--qa-line-2);
}
.qa-quote{
  margin:0 0 14px; padding:10px 14px;
  background:var(--qa-soft); border-left:2px solid var(--qa-line-2);
  border-radius:0 var(--r-s) var(--r-s) 0;
  font-family:var(--serif); font-size:13.5px; line-height:1.9; color:var(--ink-2);
}
.qa-quote p{ margin:0 }
.qa-quote-src{
  display:block; font-family:var(--sans); font-size:11.5px;
  color:var(--ink-4); margin-bottom:4px;
}
.qa-notice{
  margin:0 0 14px; padding:12px 14px;
  background:var(--qa-warn-bg); border:1px solid var(--qa-warn);
  border-radius:var(--r-s);
}
.qa-notice b{
  display:block; font-family:var(--sans); font-size:13.5px;
  color:var(--qa-warn); margin-bottom:4px;
}
.qa-notice p{ margin:0; font-size:13.5px; line-height:1.8; color:var(--ink-2) }

/* 对比块 */
.qa-cmp{
  margin:0 0 14px; padding:12px 14px;
  border:1px solid var(--qa-line); border-radius:var(--r-s); background:var(--qa-soft);
}
.qa-cmp h4{
  margin:0 0 6px; font-family:var(--serif); font-size:14px; color:var(--qa-mark);
}
.qa-cmp-body{ font-size:13.5px; line-height:1.9; color:var(--ink-2) }

/* ---------------- 6. 引用角标 ---------------- */
.qa-cite-mark{
  display:inline-block; font-family:var(--sans); font-size:11px;
  line-height:1; padding:2px 4px; margin:0 1px;
  color:var(--qa-mark); background:var(--qa-mark-bg);
  border-radius:3px; text-decoration:none; vertical-align:super;
  font-variant-numeric:tabular-nums; font-weight:600;
  transition:background .12s, color .12s;
}
.qa-cite-mark:hover{ background:var(--qa-mark); color:#fff }

/* ---------------- 7. 引用列表 ---------------- */
.qa-cites{
  margin:20px 0 0; padding:16px 0 0;
  border-top:1px solid var(--qa-line);
}
.qa-cites-head{
  margin:0 0 10px; font-family:var(--sans); font-size:13px;
  color:var(--ink-2); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
}
.qa-cites-sub{ font-size:11.5px; color:var(--ink-4); font-weight:400 }
.qa-cite-list{ list-style:none; margin:0; padding:0 }
.qa-cite{
  display:flex; gap:10px; padding:10px 12px; margin:0 0 6px;
  background:var(--qa-soft); border:1px solid transparent; border-radius:var(--r-s);
  transition:border-color .2s, background .2s;
}
.qa-cite.flash{
  border-color:var(--qa-mark); background:var(--qa-mark-bg);
}
.qa-cite-no{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--qa-mark); color:#fff;
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.qa-cite-main{ flex:1; min-width:0 }
.qa-cite-head{
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin:0 0 4px;
}
.qa-cite-field{
  font-family:var(--sans); font-size:11px; color:var(--qa-mark);
  border:1px solid var(--qa-mark); border-radius:3px; padding:0 5px;
}
.qa-cite-src{
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink);
  text-decoration:none; border-bottom:1px dotted var(--qa-line-2);
}
.qa-cite-src:hover{ color:var(--qa-mark); border-color:var(--qa-mark) }
.qa-cite-origin{ font-family:var(--sans); font-size:11.5px; color:var(--ink-4) }
.qa-cite-quote{
  margin:0; font-family:var(--serif); font-size:13px; line-height:1.85; color:var(--ink-3);
}

/* ---------------- 8. 相关条目 ---------------- */
.qa-related{ margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--qa-line) }
.qa-related h4{
  margin:0 0 10px; font-family:var(--sans); font-size:13px; color:var(--ink-2);
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
}
.qa-rel-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px;
}
.qa-rel-item{
  display:block; padding:10px 12px; text-decoration:none;
  background:var(--qa-soft); border:1px solid var(--qa-line); border-radius:var(--r-s);
  transition:border-color .15s;
}
.qa-rel-item:hover{ border-color:var(--qa-mark) }
.qa-rel-type{
  display:inline-block; font-family:var(--sans); font-size:10.5px;
  color:var(--ink-4); border:1px solid var(--qa-line-2); border-radius:3px;
  padding:0 4px; margin-bottom:4px;
}
.qa-rel-item b{
  display:block; font-family:var(--serif); font-size:14px; color:var(--ink);
  margin-bottom:3px;
}
.qa-rel-sum{
  display:block; font-family:var(--sans); font-size:12px; line-height:1.65;
  color:var(--ink-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------------- 9. 反馈 ---------------- */
.qa-fb{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin:18px 0 0; padding:12px 0 0; border-top:1px dashed var(--qa-line-2);
}
.qa-fb-label{ font-family:var(--sans); font-size:12.5px; color:var(--ink-3) }
.qa-fb-btn{
  font-family:var(--sans); font-size:12.5px; color:var(--ink-2);
  background:transparent; border:1px solid var(--qa-line-2);
  border-radius:999px; padding:3px 12px; cursor:pointer;
  transition:all .15s;
}
.qa-fb-btn:hover:not(:disabled){ border-color:var(--qa-mark); color:var(--qa-mark) }
.qa-fb-btn.on{ background:var(--qa-mark); border-color:var(--qa-mark); color:#fff }
.qa-fb-btn:disabled{ opacity:.9; cursor:default }
.qa-fb-btn:disabled:not(.on){ opacity:.4 }
.qa-fb-done{ font-family:var(--sans); font-size:11.5px; color:var(--qa-ok) }

/* ---------------- 10. 加载 / 错误 ---------------- */
.qa-loading{
  padding:28px 16px; text-align:center;
  font-family:var(--sans); font-size:13.5px; color:var(--ink-3);
  background:var(--qa-soft); border:1px dashed var(--qa-line-2); border-radius:var(--r-m);
}
.qa-loading::after{
  content:''; display:inline-block; width:12px; height:12px; margin-left:8px;
  border:2px solid var(--qa-line-2); border-top-color:var(--qa-mark);
  border-radius:50%; vertical-align:-2px;
  animation:qa-spin .7s linear infinite;
}
@keyframes qa-spin{ to{ transform:rotate(360deg) } }
.qa-error{
  padding:18px 20px; background:var(--qa-mark-bg);
  border:1px solid var(--qa-mark); border-radius:var(--r-m);
}
.qa-error b{ font-family:var(--sans); font-size:14px; color:var(--qa-mark) }
.qa-error p{ margin:6px 0 12px; font-family:var(--sans); font-size:13px; color:var(--ink-2) }

/* ---------------- 11. 条目页内嵌问答区 ---------------- */
.qa-zone{
  margin:26px 0 4px; padding:18px 20px;
  background:var(--qa-bg); border:1px solid var(--qa-line);
  border-radius:var(--r-m);
}
.qa-zone-head{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin:0 0 12px;
}
.qa-zone-head h2{
  margin:0; font-family:var(--serif); font-size:18px; color:var(--ink);
}
.qa-zone-sub{ font-family:var(--sans); font-size:11.5px; color:var(--ink-4) }
.qa-zone-q{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px }
.qa-zone-qbtn{
  font-family:var(--sans); font-size:12.5px; color:var(--ink-2);
  background:var(--qa-soft); border:1px solid var(--qa-line);
  border-radius:999px; padding:4px 12px; cursor:pointer;
  transition:all .15s;
}
.qa-zone-qbtn:hover{ border-color:var(--qa-mark); color:var(--qa-mark); background:var(--qa-mark-bg) }
.qa-zone-in{ display:flex; gap:8px }
.qa-zone-in .qa-input{ font-size:14px; padding:9px 12px }
.qa-zone-in .qa-submit{ padding:0 18px; font-size:13px }
.qa-zone-tip{
  margin:8px 0 0; font-family:var(--sans); font-size:11.5px; color:var(--ink-4);
}


/* ---------------- 14. 解读方法面板（V1.2 八段式，默认折叠） ---------------- */
.qa-method{
  margin:14px 0 4px;
  border:1px solid var(--qa-line);
  border-radius:6px;
  background:var(--qa-soft);
  overflow:hidden;
}
.qa-method-sum{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; cursor:pointer; list-style:none;
  font-family:var(--sans);
}
.qa-method-sum::-webkit-details-marker{ display:none }
.qa-method-sum::before{
  content:"▸"; color:var(--qa-mark); font-size:11px; line-height:1;
  transition:transform .15s ease;
}
.qa-method[open] .qa-method-sum::before{ transform:rotate(90deg) }
.qa-method-t{ font-size:13px; font-weight:600; color:var(--ink) }
.qa-method-s{ font-size:11.5px; color:var(--qa-grey) }
.qa-mf-badge{
  margin-left:auto; padding:1px 7px; border-radius:3px;
  font-size:10.5px; line-height:1.7;
  color:var(--qa-warn); background:var(--qa-warn-bg);
  border:1px solid rgba(169,128,58,.28);
}
.qa-mf-badge.bad{ color:var(--qa-mark); background:var(--qa-mark-bg); border-color:rgba(168,50,30,.28) }
.qa-method-body{ padding:2px 13px 12px; border-top:1px solid var(--qa-line) }
.qa-ms{ padding:11px 0 0 }
.qa-ms + .qa-ms{ margin-top:11px; border-top:1px dashed var(--qa-line) }
.qa-ms-h{
  margin:0 0 5px; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.06em; color:var(--qa-grey);
}
.qa-ms-p{
  margin:0; font-size:13.5px; line-height:1.85; color:var(--ink-2);
}
.qa-ms-p.is-gap{ color:var(--qa-grey) }
.qa-ms-tag{
  display:inline-block; margin:0 0 5px; padding:0 6px; border-radius:2px;
  font-family:var(--sans); font-size:10.5px; line-height:1.7;
  background:var(--qa-warn-bg); color:var(--qa-warn);
}
.qa-ms-tag.ai{ background:var(--qa-ok-bg); color:var(--qa-ok) }
.qa-ms-tag.gap{ background:transparent; border:1px dashed var(--qa-line-2); color:var(--qa-grey) }
.qa-ms-layers{ display:flex; gap:6px; margin:0 0 7px }
.qa-ms-layer{
  padding:1px 9px; border-radius:3px; font-family:var(--sans); font-size:11px;
  color:var(--qa-grey); border:1px solid var(--qa-line-2); background:transparent;
}
.qa-ms-layer.on{
  color:var(--qa-ok); border-color:rgba(46,111,106,.35); background:var(--qa-ok-bg); font-weight:600;
}
.qa-ms-warn{
  margin:0 0 6px; font-family:var(--sans); font-size:11.5px; color:var(--qa-warn);
}
.qa-ms-hints{ margin:0; padding:0; list-style:none }
.qa-ms-hint{
  position:relative; padding-left:12px; margin:0 0 5px;
  font-size:13px; line-height:1.8; color:var(--ink-2);
}
.qa-ms-hint::before{ content:"·"; position:absolute; left:2px; color:var(--qa-mark) }
.qa-ms-hint-l{
  display:inline-block; margin-right:6px; padding:0 5px; border-radius:2px;
  font-family:var(--sans); font-size:10.5px;
  background:var(--qa-mark-bg); color:var(--qa-mark);
}

/* ---------------- 12. 响应式 ---------------- */
@media (max-width:640px){
  .qa-search{ flex-direction:column }
  .qa-submit{ padding:11px 0 }
  .qa-conf{ margin-left:0 }
  .qa-answer{ padding:14px 14px 12px }
  .qa-cites-head, .qa-related h4{ flex-direction:column; gap:2px }
}

/* ---------------- 13. 打印 ---------------- */
@media print{
  .qa-hot, .qa-fb, .qa-search-tip, .qa-again{ display:none }
  .qa-answer{ border:1px solid #ccc; box-shadow:none }
}