/* ==========================================================================
   V0.9 · 用户解读模块样式
   设计红线（V0.9 第 1、3.3 节）：
     · 物理隔离：用户解读独立区域，绝不出现在故事化讲解正文与史实层
     · 视觉隔离：独立配色（靛蓝系）+ 虚线边框 + 独立排版，与主线米黄纸色明显区分
     · 标签隔离：每条解读顶部固定「用户观点」徽章
     · 专家回应、精选各自独立样式，且均标注不代表产品立场
   ========================================================================== */

:root{
  --ugc-bg:#eef1f8;
  --ugc-bg-2:#e6ebf5;
  --ugc-card:#f7f9fd;
  --ugc-line:#b9c4dd;
  --ugc-line-strong:#7f8fb4;
  --ugc-ink:#2b3550;
  --ugc-ink-2:#4d5875;
  --ugc-ink-3:#6f7a95;
  --ugc-accent:#3d5580;
}
[data-theme="dark"]{
  --ugc-bg:#1e2433;
  --ugc-bg-2:#232a3b;
  --ugc-card:#283042;
  --ugc-line:#3a4560;
  --ugc-line-strong:#5b6b90;
  --ugc-ink:#dfe5f2;
  --ugc-ink-2:#c2cadb;
  --ugc-ink-3:#9aa5bd;
  --ugc-accent:#8fa6d6;
}

/* ---------------- 1. 解读区容器（视觉隔离） ---------------- */
.ugc-zone{
  background:var(--ugc-bg);
  border:1px dashed var(--ugc-line-strong);
  border-radius:var(--r-m);
  padding:16px 18px;
  margin:22px 0 4px;
}
.ugc-zone > .ugc-notice:first-child{ margin-top:0 }

.ugc-head{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin:0 0 12px;
}
.ugc-head h2{
  margin:0; font-family:var(--serif); font-size:19px; color:var(--ugc-ink);
}
.ugc-head .ugc-sub{ font-size:12px; color:var(--ugc-ink-3); font-family:var(--sans) }

/* 说明条：免责声明，永远置顶，不可关闭 */
.ugc-notice{
  background:var(--ugc-card);
  border:1px solid var(--ugc-line);
  border-left:4px solid var(--ugc-accent);
  border-radius:var(--r-s);
  padding:10px 14px;
  font-size:13px; line-height:1.75; color:var(--ugc-ink-2);
  margin:0 0 14px;
  font-family:var(--sans);
}
.ugc-notice b{ color:var(--ugc-ink) }
.ugc-notice.warn{ border-left-color:var(--cinnabar) }
.ugc-notice.warn b{ color:var(--cinnabar) }

/* ---------------- 2. 徽章 ---------------- */
.ugc-badge{
  display:inline-block; font-size:11px; line-height:1.6; font-family:var(--sans);
  padding:1px 7px; border-radius:999px; letter-spacing:.02em; white-space:nowrap;
  background:var(--ugc-accent); color:#fff; border:1px solid var(--ugc-accent);
}
.ugc-badge.ghost{ background:transparent; color:var(--ugc-accent) }
.ugc-badge.demo{ background:var(--gold); border-color:var(--gold); color:#fff }
.ugc-badge.expert{ background:var(--jade); border-color:var(--jade); color:#fff }
.ugc-badge.pick{ background:var(--gold-bg); border-color:var(--gold); color:var(--gold) }
.ugc-badge.mine{ background:transparent; border-color:var(--ugc-line-strong); color:var(--ugc-ink-2) }

/* 状态徽章 */
.ugc-st{ font-family:var(--sans); font-size:11px; padding:1px 7px; border-radius:var(--r-s); border:1px solid; white-space:nowrap }
.ugc-st.draft   { color:var(--ugc-ink-3); border-color:var(--ugc-line-strong); background:transparent }
.ugc-st.pending { color:var(--gold); border-color:var(--gold); background:var(--gold-bg) }
.ugc-st.published{ color:var(--jade); border-color:var(--jade); background:var(--jade-bg) }
.ugc-st.rejected{ color:var(--cinnabar); border-color:var(--cinnabar); background:var(--cinnabar-bg) }
.ugc-st.taken_down{ color:var(--ink-3); border-color:var(--line-strong); background:var(--paper-3) }

/* 立场 / 来源标签 */
.ugc-tag{
  font-family:var(--sans); font-size:11px; padding:1px 7px; border-radius:999px;
  border:1px solid var(--ugc-line-strong); color:var(--ugc-ink-2); background:var(--ugc-card);
  white-space:nowrap;
}
.ugc-tag.on{ background:var(--ugc-accent); border-color:var(--ugc-accent); color:#fff }

/* ---------------- 3. 解读卡片 ---------------- */
.ugc-card{
  background:var(--ugc-card);
  border:1px solid var(--ugc-line);
  border-radius:var(--r-m);
  padding:14px 16px;
  margin:0 0 12px;
}
.ugc-card.private{ border-style:dashed }
.ugc-card.mine{ box-shadow:inset 3px 0 0 var(--ugc-accent) }
.ugc-card h4{
  margin:0 0 6px; font-size:15px; font-family:var(--serif); color:var(--ugc-ink);
  display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
}
.ugc-meta{
  font-family:var(--sans); font-size:12px; color:var(--ugc-ink-3);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 8px;
}
.ugc-body{
  font-size:14px; line-height:1.9; color:var(--ugc-ink-2); font-family:var(--sans);
  white-space:pre-wrap; word-break:break-word;
}
.ugc-body.clip{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden }
.ugc-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.ugc-actions .chip{
  font-size:12px; padding:3px 10px; border-color:var(--ugc-line-strong); color:var(--ugc-ink-2);
}
.ugc-actions .chip:hover{ border-color:var(--ugc-accent); color:var(--ugc-accent) }
.ugc-actions .chip.on{ background:var(--ugc-accent); border-color:var(--ugc-accent); color:#fff }

/* 专家回应块 */
.ugc-reply{
  background:var(--jade-bg); border:1px solid var(--jade); border-radius:var(--r-s);
  padding:10px 14px; margin:10px 0 0; font-size:13.5px; line-height:1.85; color:var(--ink-2);
}
.ugc-reply .ugc-meta{ color:var(--jade) }
.ugc-reply-note{ font-size:11.5px; color:var(--ink-3); font-family:var(--sans); margin:6px 0 0 }

/* 精选标记条 */
.ugc-pickbar{
  font-family:var(--sans); font-size:11.5px; color:var(--gold);
  border-top:1px dotted var(--gold); padding-top:8px; margin-top:10px;
}

/* ---------------- 4. 空态与入口 ---------------- */
.ugc-empty{
  background:var(--ugc-card); border:1px dashed var(--ugc-line-strong); border-radius:var(--r-m);
  padding:16px; text-align:center; color:var(--ugc-ink-3); font-size:13px; font-family:var(--sans);
}
.ugc-empty b{ display:block; color:var(--ugc-ink); font-size:14px; margin-bottom:6px }
.ugc-ea{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px }

.ugc-entry{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px }
.ugc-entry .chip{ font-size:12.5px }
.ugc-entry .chip.primary{ background:var(--ugc-accent); border-color:var(--ugc-accent); color:#fff }
.ugc-entry .chip.primary:hover{ background:var(--ugc-ink); border-color:var(--ugc-ink) }
.ugc-entry .chip[disabled]{ opacity:.45; cursor:not-allowed }

/* 筛选条 */
.ugc-filter{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:10px 12px; background:var(--ugc-bg-2); border:1px solid var(--ugc-line);
  border-radius:var(--r-s); margin:0 0 14px; font-family:var(--sans); font-size:12.5px;
  color:var(--ugc-ink-2);
}
.ugc-filter .lb{ color:var(--ugc-ink-3) }
.ugc-filter .sep{ width:1px; height:16px; background:var(--ugc-line); margin:0 2px }

/* ---------------- 5. 写解读表单（模态） ---------------- */
.ugc-modal{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,14,.42); padding:18px;
}
.ugc-modal-in{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-2); width:min(680px,100%); max-height:88vh; overflow:auto;
  padding:18px 20px;
}
.ugc-modal-in h3{ margin:0 0 4px; font-family:var(--serif); font-size:18px }
.ugc-modal-in .muted{ font-size:12.5px; margin:0 0 14px }
.ugc-field{ margin:0 0 12px }
.ugc-field label{ display:block; font-size:12.5px; font-family:var(--sans); color:var(--ink-2); margin:0 0 5px }
.ugc-field label .req{ color:var(--cinnabar) }
.ugc-field input[type=text], .ugc-field textarea, .ugc-field select{
  width:100%; box-sizing:border-box; font-family:var(--sans); font-size:14px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line-strong); border-radius:var(--r-s);
  padding:8px 10px;
}
.ugc-field textarea{ min-height:150px; line-height:1.8; resize:vertical }
.ugc-field input:focus, .ugc-field textarea:focus, .ugc-field select:focus{
  outline:2px solid var(--ugc-accent); outline-offset:1px;
}
.ugc-counter{ font-size:12px; color:var(--ink-3); font-family:var(--sans); text-align:right; margin-top:4px }
.ugc-counter.bad{ color:var(--cinnabar) }
.ugc-opts{ display:flex; gap:8px; flex-wrap:wrap }
.ugc-opts .chip{ cursor:pointer; font-size:12.5px }
.ugc-hint{ font-size:12px; color:var(--ink-3); font-family:var(--sans); line-height:1.7; margin:6px 0 0 }
.ugc-modal-foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap }
.ugc-btn{
  font-family:var(--sans); font-size:13.5px; padding:8px 18px; border-radius:var(--r-s); cursor:pointer;
  border:1px solid var(--line-strong); background:var(--paper-2); color:var(--ink);
}
.ugc-btn:hover{ border-color:var(--ugc-accent); color:var(--ugc-accent) }
.ugc-btn.primary{ background:var(--ugc-accent); border-color:var(--ugc-accent); color:#fff }
.ugc-btn.primary:hover{ background:var(--ugc-ink); border-color:var(--ugc-ink); color:#fff }
.ugc-btn[disabled]{ opacity:.45; cursor:not-allowed }
.ugc-alert{
  background:var(--cinnabar-bg); border:1px solid var(--cinnabar); color:var(--cinnabar);
  border-radius:var(--r-s); padding:8px 12px; font-size:12.5px; font-family:var(--sans);
  line-height:1.7; margin:0 0 12px;
}

/* ---------------- 6. 审核台 ---------------- */
.ugc-review{
  background:var(--ugc-card); border:1px solid var(--ugc-line); border-radius:var(--r-m);
  padding:14px 16px; margin:0 0 12px;
}
.ugc-review .rv-top{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px }
.ugc-review .rv-t{ font-family:var(--serif); font-size:15px; color:var(--ugc-ink) }
.ugc-review .rv-body{
  font-size:13.5px; line-height:1.85; color:var(--ugc-ink-2); white-space:pre-wrap;
  background:var(--ugc-bg-2); border-radius:var(--r-s); padding:10px 12px; margin:8px 0;
}
.ugc-kv{ font-family:var(--sans); font-size:12px; color:var(--ugc-ink-3) }
.ugc-kv b{ color:var(--ugc-ink-2); font-weight:600 }

.ugc-stats{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:0 0 14px;
}
.ugc-stat{
  background:var(--ugc-card); border:1px solid var(--ugc-line); border-radius:var(--r-s);
  padding:10px 12px; text-align:center;
}
.ugc-stat b{ display:block; font-size:20px; font-family:var(--serif); color:var(--ugc-ink) }
.ugc-stat span{ font-size:11.5px; font-family:var(--sans); color:var(--ugc-ink-3) }

/* 日志表 */
.ugc-log{
  width:100%; border-collapse:collapse; font-family:var(--sans); font-size:12.5px;
}
.ugc-log th, .ugc-log td{
  border-bottom:1px solid var(--ugc-line); padding:7px 8px; text-align:left; color:var(--ugc-ink-2);
}
.ugc-log th{ color:var(--ugc-ink-3); font-weight:600; white-space:nowrap }
.ugc-log td.mono{ font-family:var(--mono); font-size:11.5px; color:var(--ugc-ink-3) }

/* ---------------- 7. 敏感事件提示 ---------------- */
.ugc-block{
  background:var(--cinnabar-bg); border:1px solid var(--cinnabar); border-radius:var(--r-m);
  padding:14px 16px; font-size:13px; line-height:1.8; color:var(--ink-2); font-family:var(--sans);
}
.ugc-block b{ color:var(--cinnabar) }

/* ---------------- 8. 响应式 ---------------- */
@media (max-width:640px){
  .ugc-zone{ padding:12px 12px }
  .ugc-modal-in{ padding:14px 14px }
  .ugc-modal-foot .ugc-btn{ flex:1 }
}

/* 减少动效 */
html[data-motion="0"] .ugc-card, html[data-motion="0"] .ugc-modal-in{ transition:none !important }