/* ==========================================================================
   Article Detail Page ( /topic?aid={id} )
   深度优化版 — 档案卡头部 + 两栏布局 + 目录联动 + 阅读进度
   ========================================================================== */

/* ---------- 文章专属 Hero 容器（独立于 page-head 模板） ---------- */
.article-hero{
  background: linear-gradient(180deg, #181C12 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  padding: 32px 0 12px;
}
.article-hero .hero-inner{
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}

/* ---------- 面包屑 ---------- */
.article-crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); padding-bottom:14px; }
.article-crumb a{ color:var(--muted); text-decoration:none; transition: color .15s ease; }
.article-crumb a:hover{ color:var(--gold); }
.article-crumb .sep{ color:var(--line); opacity:.7; }
.article-crumb .cur{ color:var(--ink); }

/* ---------- 档案卡 Hero ---------- */
.hero-card{
  position:relative;
  padding: 26px 28px 24px;
  margin-bottom: 30px;
  background:
    linear-gradient(135deg, rgba(217,164,65,.05) 0%, rgba(217,164,65,0) 60%),
    var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  overflow:hidden;
}
.hero-card::before{
  content:""; position:absolute; top:0; right:0; width:220px; height:100%;
  background-image:
    linear-gradient(90deg, transparent 0%, transparent 49%, var(--line-soft) 49%, var(--line-soft) 50%, transparent 50%, transparent 100%);
  background-size: 14px 14px;
  opacity:.25;
  pointer-events:none;
}
.hero-card.hero-missing{ border-left-color: var(--red); }

.badge-cat{
  display:inline-block; padding:3px 10px; font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  background: rgba(217,164,65,.15); color:var(--gold);
  border:1px solid rgba(217,164,65,.35); border-radius:2px;
  margin-bottom:14px;
}
.badge-cat[data-cat="mod"]{ background:rgba(217,164,65,.15); color:var(--gold); border-color:rgba(217,164,65,.35); }
.badge-cat[data-cat="strategy"]{ background:rgba(213,56,44,.15); color:var(--red); border-color:rgba(213,56,44,.35); }
.badge-cat[data-cat="guide"]{ background:rgba(166,201,74,.15); color:var(--green); border-color:rgba(166,201,74,.35); }
.badge-cat[data-cat="review"]{ background:rgba(91,155,213,.15); color:var(--blue); border-color:rgba(91,155,213,.35); }
.badge-cat[data-cat="news"]{ background:rgba(155,111,216,.15); color:var(--purple); border-color:rgba(155,111,216,.35); }

.hero-title{
  font-family: var(--disp, "Noto Serif SC", "Source Han Serif SC", serif);
  font-weight:600; font-size: clamp(26px, 3.2vw, 36px);
  line-height:1.3; color:var(--ink); letter-spacing:.01em;
  margin:0 0 14px; max-width: 820px;
}

.hero-lede{
  position:relative;
  font-size:15px; line-height:1.8; color:var(--muted);
  margin:0 0 18px; padding-left:18px;
  border-left:2px solid var(--line);
  max-width:780px;
}
.hero-lede .quote-mark{
  font-family: var(--disp, serif);
  font-size:32px; color:var(--gold); line-height:0;
  position:absolute; left:-2px; top:8px;
  opacity:.7;
}

.hero-meta{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line); padding-top:14px; margin-top:6px;
}
.hm-cell{ display:flex; flex-direction:column; min-width:120px; padding-right:24px; margin-right:24px; border-right:1px solid var(--line-soft); }
.hm-cell:last-child{ border-right:0; }
.hm-key{ font-size:11px; color:var(--muted); letter-spacing:.15em; text-transform:uppercase; margin-bottom:4px; }
.hm-val{ font-size:14px; color:var(--ink); font-weight:500; }
.hm-cta{ display:inline-block; margin-top:6px; padding:8px 18px; background:var(--gold); color:#1a1a0e; font-size:13px; text-decoration:none; border-radius:2px; transition: background .15s; }
.hm-cta:hover{ background:#e8b658; }

.hero-decor{
  position:absolute; right:24px; top:24px;
  display:flex; align-items:center; gap:6px;
  opacity:.4;
}
.deco-dot{ width:6px; height:6px; background:var(--gold); border-radius:50%; box-shadow:0 0 8px var(--gold); }
.deco-line{ width:24px; height:1px; background:var(--gold); }
.deco-tag{ font-size:10px; letter-spacing:.2em; color:var(--gold); }

/* ---------- 两栏布局 ---------- */
.article-wrap{ padding: 0 0 60px; background: var(--bg); }
.aw-inner{
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px;
}

/* ---------- 文章主区 ---------- */
.article-main{
  background: var(--panel);
  border:1px solid var(--line);
  padding: 24px 32px 36px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}

/* ---------- 顶部工具条 ---------- */
.ad-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.ad-progress{ flex:1; height:3px; background:var(--line-soft); border-radius:2px; overflow:hidden; }
.ad-progress-bar{ display:block; height:100%; width:0; background: linear-gradient(90deg, var(--gold) 0%, #e8b658 100%); transition: width .1s linear; box-shadow: 0 0 6px rgba(217,164,65,.4); }
.ad-tools{ display:flex; gap:6px; }
.ad-tool{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font-size:12px; padding:5px 10px; border-radius:2px; cursor:pointer;
  transition: all .15s ease; font-family:inherit;
}
.ad-tool:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- 正文 ---------- */
.ad-body{
  font-size:15px; line-height:1.9; color:var(--ink);
  word-break: break-word;
}
.ad-body > *{ margin: 0 0 16px; }
.ad-body > *:last-child{ margin-bottom: 0; }

.ad-body h1, .ad-body h2, .ad-body h3, .ad-body h4{
  font-family: var(--disp, "Noto Serif SC", serif);
  font-weight:600; color:var(--ink);
  line-height:1.35; letter-spacing:.01em;
  scroll-margin-top: 90px;
}
.ad-body h2{
  font-size:22px; margin: 36px 0 16px; padding: 6px 0 6px 14px;
  border-left: 4px solid var(--gold);
  background: linear-gradient(90deg, rgba(217,164,65,.08) 0%, transparent 70%);
  position:relative;
}
.ad-body h2::before{
  content:"§"; color:var(--gold); font-weight:400; margin-right:8px; opacity:.7;
}
.ad-body h3{
  font-size:17px; margin: 26px 0 10px; padding-left:10px;
  border-left: 2px solid var(--line);
}
.ad-body h4{ font-size:15px; margin:18px 0 8px; color:var(--muted); }

.ad-body p{ margin: 12px 0; }
.ad-body strong{ color:var(--ink); font-weight:600; }
.ad-body em{ color:var(--gold); font-style:normal; font-weight:500; }

.ad-body blockquote{
  position:relative;
  margin: 20px 0; padding: 16px 20px 16px 48px;
  background: rgba(217,164,65,.04);
  border-left:3px solid var(--gold);
  color:var(--ink);
  font-style:normal;
}
.ad-body blockquote::before{
  content:"\201C"; position:absolute; left:12px; top:6px;
  font-family: var(--disp, serif); font-size:36px; color:var(--gold); line-height:1; opacity:.5;
}
.ad-body blockquote p{ margin:4px 0; }
.ad-body blockquote p:last-child{ margin-bottom:0; }

.ad-body ul, .ad-body ol{ margin: 12px 0; padding-left: 28px; }
.ad-body ul li{ list-style:disc; margin:6px 0; }
.ad-body ol li{ list-style:decimal; margin:6px 0; }
.ad-body li::marker{ color:var(--gold); }
.ad-body li > strong:first-child{ color:var(--gold); }

.ad-body pre{
  background: rgba(0,0,0,.45); border:1px solid var(--line); border-radius:4px;
  padding: 14px 16px; overflow-x:auto;
  color:#E9E2CC; font-family: var(--mono, monospace); font-size:12.5px; line-height:1.7;
  margin:16px 0;
}
.ad-body code{
  font-family: var(--mono, monospace); font-size:13px;
  background: rgba(217,164,65,.1); color:var(--gold);
  padding: 1px 6px; border-radius:3px; border:1px solid rgba(217,164,65,.2);
}
.ad-body pre code{ background:transparent; border:0; padding:0; color:inherit; font-size:inherit; }

.ad-body a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(217,164,65,.35); transition: border-color .15s; }
.ad-body a:hover{ border-bottom-color:var(--gold); }

.ad-body table{
  width:100%; border-collapse:collapse; margin:18px 0;
  font-size:13.5px; background:rgba(0,0,0,.15);
}
.ad-body th, .ad-body td{ padding:8px 12px; border:1px solid var(--line); text-align:left; }
.ad-body th{ background:rgba(217,164,65,.08); color:var(--gold); font-weight:600; }

/* ---------- 图片与图注 ---------- */
.ad-body figure.ad-fig{
  margin: 22px 0; padding: 0;
  background: rgba(0,0,0,.18);
  border:1px solid var(--line-soft);
}
.ad-body figure.ad-fig img{
  display:block; max-width:100%; height:auto; margin:0;
  border-radius:0;
}
.ad-body figure.ad-fig figcaption{
  padding:8px 14px; font-size:12.5px; color:var(--muted);
  background:rgba(0,0,0,.25); border-top:1px solid var(--line-soft);
  text-align:center; font-style:italic;
}
.ad-body img{ max-width:100%; height:auto; border-radius:3px; }

/* ---------- 标签 ---------- */
.ad-tags{ display:flex; flex-wrap:wrap; gap:6px; margin: 28px 0 18px; padding: 14px 0; border-top:1px solid var(--line); }
.ad-tag{
  display:inline-block; padding:2px 10px; font-size:12px; color:var(--muted);
  background: rgba(255,255,255,.03); border:1px solid var(--line); border-radius:2px;
}
.ad-tag::before{ content:"#"; color:var(--gold); margin-right:2px; }

/* ---------- 作者签名卡 ---------- */
.ad-author-card{
  margin: 24px 0 18px; padding: 18px 22px;
  background: linear-gradient(135deg, rgba(217,164,65,.05) 0%, transparent 70%);
  border:1px solid var(--line); border-left:3px solid var(--gold);
  display:flex; flex-direction:column; gap:4px;
}
.ad-author-sign{ font-size:15px; font-weight:600; color:var(--ink); font-family:var(--disp,serif); }
.ad-author-bio{ font-size:12.5px; color:var(--muted); letter-spacing:.04em; }

/* ---------- 上一篇下一篇 ---------- */
.ad-prevnext{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin: 24px 0 18px;
}
.pn-card{
  display:flex; flex-direction:column; gap:6px;
  padding: 14px 18px; min-height:78px;
  background: rgba(255,255,255,.02); border:1px solid var(--line);
  text-decoration:none; color:var(--ink);
  transition: all .2s ease;
  border-radius:2px;
}
.pn-card:hover{ border-color:var(--gold); background:rgba(217,164,65,.06); transform: translateY(-1px); }
.pn-prev{ text-align:left; }
.pn-next{ text-align:right; }
.pn-dir{ font-size:11px; color:var(--muted); letter-spacing:.15em; text-transform:uppercase; }
.pn-title{ font-size:14px; font-weight:500; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pn-card:hover .pn-title{ color:var(--gold); }
.pn-loading, .pn-empty{ display:flex; align-items:center; justify-content:center; padding:20px; color:var(--muted); font-size:13px; background:rgba(255,255,255,.02); border:1px dashed var(--line); }

/* ---------- 返回列表 ---------- */
.ad-back{ text-align:center; margin-top: 28px; padding-top:24px; border-top:1px solid var(--line); }
.ad-back a{
  display:inline-block; padding: 10px 28px; font-size:14px;
  color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:2px;
  text-decoration:none; letter-spacing:.05em;
  transition: all .2s ease;
}
.ad-back a:hover{ border-color:var(--gold); color:var(--gold); background:rgba(217,164,65,.06); }

/* ---------- 侧栏 ---------- */
.article-side{ display:flex; flex-direction:column; gap:18px; }
.side-card{
  background: var(--panel); border:1px solid var(--line);
  padding: 18px 18px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.side-h{
  font-size:11px; letter-spacing:.2em; color:var(--gold); text-transform:uppercase;
  font-weight:600; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.side-h::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---------- 目录 ---------- */
.toc-list{ list-style:none; padding:0; margin:0; }
.toc-li{
  display:flex; align-items:flex-start; gap:8px;
  padding: 7px 4px 7px 0;
  cursor:pointer;
  font-size:13px; color:var(--muted); line-height:1.5;
  border-left:2px solid transparent; padding-left:10px; margin-left:-10px;
  transition: all .15s ease;
}
.toc-li:hover{ color:var(--ink); }
.toc-li.active{ color:var(--gold); border-left-color:var(--gold); background:rgba(217,164,65,.05); }
.toc-num{ font-family:var(--mono,monospace); font-size:11px; color:var(--gold); opacity:.6; flex-shrink:0; padding-top:2px; min-width:18px; }
.toc-li.active .toc-num{ opacity:1; }
.toc-text{ flex:1; }
.toc-li[data-tag="h3"]{ padding-left:22px; font-size:12.5px; }

/* ---------- 信息档案卡 ---------- */
.info-dl{ margin:0; display:grid; grid-template-columns: auto 1fr; gap:8px 16px; font-size:13px; }
.info-dl dt{ color:var(--muted); }
.info-dl dd{ margin:0; color:var(--ink); }

/* ---------- MOD 关联卡 ---------- */
.mod-link{
  display:flex; align-items:center; gap:10px;
  padding: 10px 0; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  transition: color .15s;
}
.mod-link:hover{ color:var(--gold); }
.mod-tag{ background:var(--gold); color:#1a1a0e; font-size:10px; padding:2px 6px; font-weight:600; letter-spacing:.1em; }
.mod-name{ flex:1; font-weight:500; }
.mod-arrow{ color:var(--muted); }

/* ---------- 分享卡 ---------- */
.share-btn{
  display:inline-block; padding: 8px 14px; margin: 0 6px 6px 0;
  font-size:13px; color:var(--ink); text-decoration:none;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:2px; cursor:pointer;
  transition: all .15s ease;
}
.share-btn:hover{ border-color:var(--gold); color:var(--gold); background:rgba(217,164,65,.06); }

/* ---------- 顶部固定阅读进度条 ---------- */
.read-progress{
  position:fixed; top:0; left:0; height:2px;
  width:0%; z-index:9999;
  background: linear-gradient(90deg, var(--gold) 0%, #e8b658 50%, var(--red) 100%);
  box-shadow: 0 0 8px rgba(217,164,65,.6);
  transition: width .08s linear;
  pointer-events:none;
}

/* ---------- 移动端单栏 ---------- */
@media (max-width: 960px){
  .aw-inner{ grid-template-columns: 1fr; gap: 24px; padding: 0 16px; }
  .article-main{ padding: 20px 18px 28px; }
  .hero-card{ padding: 20px 18px 18px; }
  .hero-title{ font-size: 22px; }
  .hero-meta{ gap:10px; }
  .hm-cell{ min-width:80px; padding-right:14px; margin-right:14px; }
  .hero-decor{ display:none; }
  .ad-toolbar{ flex-wrap:wrap; }
  .ad-progress{ order:2; flex:1 1 100%; }
  .ad-tools{ order:1; }
  .ad-body h2{ font-size:18px; }
  .ad-body h3{ font-size:15px; }
  .ad-prevnext{ grid-template-columns: 1fr; }
  .pn-next{ text-align:left; }
  .toc-card{ display:none; } /* 移动端隐藏目录，避免占用首屏 */
}
@media (max-width: 480px){
  .aw-inner{ padding: 0 12px; }
  .article-main{ padding: 16px 14px 24px; }
  .hero-card{ padding: 16px 14px; }
  .hero-title{ font-size: 20px; }
  .ad-tool{ padding:4px 8px; font-size:11px; }
}

/* ==========================================================================
   RA Design System 2.0 - Tactical Briefing Detail (战术作战简报详情页样式)
   Refined for redalert2.online (D11 ~ D12 规格标准)
   ========================================================================== */

.briefing-header {
  background: #111720;
  border-bottom: 2px solid rgba(230, 57, 70, 0.4);
  padding: 40px 0 32px;
  position: relative;
  overflow: hidden;
}

.briefing-header::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 400px; height: 100%;
  background: radial-gradient(circle at 100% 0%, rgba(230, 57, 70, 0.12), transparent 70%);
  pointer-events: none;
}

.briefing-meta-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.briefing-code-tag {
  font-family: monospace;
  font-size: 11px;
  color: #FFB703;
  background: rgba(255, 183, 3, 0.12);
  border: 1px solid rgba(255, 183, 3, 0.3);
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

.briefing-title {
  font-size: 32px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.35;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.briefing-author-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: #718096;
}

.briefing-author-name {
  color: #E2E8F0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.briefing-content-body {
  background: #111720;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 36px;
  margin-top: 28px;
  margin-bottom: 40px;
  color: #CBD5E1;
  font-size: 15px;
  line-height: 1.85;
}

.briefing-content-body h2 {
  font-size: 20px;
  font-weight: 700;
  color: #F8FAFC;
  margin: 32px 0 16px;
  padding-left: 12px;
  border-left: 3px solid #E63946;
}

.briefing-content-body h3 {
  font-size: 17px;
  font-weight: 600;
  color: #E2E8F0;
  margin: 24px 0 12px;
}

.briefing-content-body p {
  margin-bottom: 18px;
}

.briefing-content-body blockquote {
  background: #151D28;
  border-left: 3px solid #FFB703;
  padding: 14px 20px;
  margin: 20px 0;
  border-radius: 0 3px 3px 0;
  color: #94A3B8;
  font-size: 14px;
}

.briefing-content-body img {
  max-width: 100%;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 20px 0;
}