/* ============================================================
   ForgeRank AI — 站内文章页共用样式（单一真源，单点维护）
   ------------------------------------------------------------
   使用方（两类页面共 42 篇，一套外观）：
     ① 7 篇 editorial 手写文章页  /blog/{slug}
        （backend/pages.py `_inject_article_sidebar` 把 <link> 注入 <head> 末尾；
          页面内联 <style> 中重复的基础规则已删除，只留本页专属规则）
     ② 35 个 QC 话题页             /trends/{platform}/{slug}
        （frontend/trends-topic.html 直接 <link> 本文件）

   结构骨架（两页共用）：
     .article-wrap           容器（1120px；<=1020 单列时 720px）
       .art-layout           两列 flex（gap 46）
         .art-main           正文主栏（flex 0 1 720px）
           .back-link / article(.article-hero + .article-body/…) / .art-end
         .art-aside          侧栏（300px sticky；Analyzer CTA + Related + 订阅）

   原则：值全部取自 editorial 页原内联 CSS（不改变 editorial 现状视觉）；
         QC 正文排版与 editorial 正文共用 .article-body 规则。
   ============================================================ */

/* ── 1. 页面基础 ── */
body.blog-page { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; -webkit-font-smoothing: antialiased; min-height: 100vh }
body.blog-page a { color: inherit; text-decoration: none }

/* 氛围光斑（editorial 原样移植；话题页同款，保证两页背景一致） */
.glow { position: fixed; width: 460px; height: 460px; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; z-index: 0 }
.glow-purple { top: -150px; right: -120px; background: radial-gradient(circle, #7F77DD, transparent 70%) }
.glow-gold { bottom: -190px; left: -140px; background: radial-gradient(circle, #EF9F27, transparent 70%) }
html[data-theme="light"] .glow, .theme-light .glow { opacity: .08 }

/* ── 2. 容器 + 两列骨架 ── */
/* box-sizing 对齐：editorial 页加载 style.css（其全局 border-box）；话题页不加载 style.css，
   故在文章区显式统一 border-box，保证两页容器/列宽逐像素一致 */
.article-wrap, .article-wrap * { box-sizing: border-box }
.article-wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 52px 24px 72px }
.art-layout { display: flex; gap: 46px; align-items: flex-start; justify-content: center }
.art-main { flex: 0 1 720px; min-width: 0 }
.art-aside { flex: 0 0 300px; min-width: 0; position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px }

.back-link { display: inline-block; margin-bottom: 20px; color: var(--purple); font-size: .85rem; font-weight: 700 }
.back-link:hover { text-decoration: underline }

/* ── 3. 文章头（editorial 与话题页同款）── */
.article-hero .pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(127, 119, 221, .12); border: 1px solid rgba(127, 119, 221, .45); color: var(--purple-bright); font-size: .76rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px }
.article-hero h1 { font-size: 2rem; font-weight: 800; line-height: 1.2; margin: 0 0 12px }
.article-hero .meta { color: var(--muted); font-size: .82rem; line-height: 1.6; margin-bottom: 26px }
.article-hero .meta .trend-delta { color: var(--gold); font-weight: 800 }

/* ── 4. 正文排版（editorial 手写正文 + QC 伪 markdown 正文共用）── */
.article-body { font-size: .95rem; line-height: 1.75; color: var(--text) }
.article-body h2 { font-size: 1.25rem; font-weight: 800; margin: 34px 0 10px }
.article-body h3 { font-size: 1.02rem; font-weight: 700; margin: 22px 0 6px }
.article-body p { margin: 0 0 14px }
.article-body ul { margin: 0 0 14px 22px; padding: 0 }
/* 有序列表仅 QC 正文（#article-body）规整缩进；editorial 手写页的 <ol> 保持其 UA 默认渲染不变 */
#article-body ol { margin: 0 0 14px 22px; padding: 0 }
.article-body li { margin-bottom: 8px }
.article-body a { color: var(--purple-bright); text-decoration: underline; text-underline-offset: 2px }
.article-body a:hover { color: var(--purple) }
.article-body strong { color: var(--text) }
.article-body hr { border: none; border-top: 1px solid var(--border); margin: 18px 0 }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: .88rem }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top }
.article-body th { background: var(--panel); font-weight: 700 }
.article-body code { background: var(--panel); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: .84rem }
/* QC 移动端宽表格：容器横向滚动（后端 _load_qc_article 会包 .qc-table-scroll） */
.article-body .qc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 10px 0 12px }
.article-body .qc-table-scroll table { margin: 0; min-width: 100% }

/* ── 5. 附注卡（editorial 的 .article-body .note + 话题页 article > .note 同款）── */
.article-body .note, .art-main article > .note { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin: 20px 0; font-size: .88rem; color: var(--muted); line-height: 1.6 }
.article-body .note b, .art-main article > .note b { color: var(--text) }
.article-body .note a, .art-main article > .note a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px }
.article-body .note a:hover, .art-main article > .note a:hover { color: var(--purple-bright) }

/* ── 6. 文末主 CTA（editorial 静态链接 + 话题页双态 CTA 同款样式）── */
.article-cta { text-align: center; margin: 44px 0 10px }
.cta-btn { display: inline-block; background: var(--purple); color: #fff; font-weight: 800; font-size: 1rem; padding: 14px 28px; border-radius: 11px; border: none; cursor: pointer; font-family: inherit; transition: filter .12s, transform .08s; text-decoration: none }
.cta-btn:hover { filter: brightness(1.08); transform: translateY(-1px) }
.cta-sub { color: var(--muted); font-size: .82rem; margin-top: 10px; line-height: 1.5 }
.free-pill { display: inline-block; background: rgba(95, 220, 138, .15); color: var(--green, #5fdc8a); border: 1px solid rgba(95, 220, 138, .4); border-radius: 999px; padding: 2px 10px; font-size: .7rem; font-weight: 700; margin-left: 8px; vertical-align: middle }

/* ── 7. 侧栏（Analyzer CTA / Related reading / 订阅，后端 _art_sidebar_html 注入）── */
.art-aside h3 { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px }
.art-aside p { font-size: .84rem; color: var(--muted); line-height: 1.6; margin: 0 0 12px }
.art-aside p b { color: var(--text) }
.art-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm) }
.art-card a { text-decoration: none }
.art-cta { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; background: var(--purple); color: #fff; font-weight: 800; font-size: .92rem; padding: 12px 18px; border-radius: 11px; border: none; cursor: pointer; text-align: center; font-family: inherit; transition: filter .12s, transform .08s }
a.art-cta { text-decoration: none }
.art-cta:hover { filter: brightness(1.08); transform: translateY(-1px) }
.art-cta-sub { font-size: .74rem; color: var(--muted); text-align: center; margin-top: 9px; line-height: 1.5 }
.art-side-link { display: block; text-align: center; color: var(--purple-bright); font-weight: 700; font-size: .8rem; margin-top: 9px; text-decoration: underline }
.art-rel-list { display: flex; flex-direction: column }
.art-rel { display: block; padding: 10px 0; border-top: 1px solid var(--border); color: var(--text) }
.art-rel:first-child { border-top: none; padding-top: 2px }
.art-rel:hover .art-rel-t { color: var(--purple-bright) }
.art-rel-t { display: block; font-size: .85rem; line-height: 1.45; font-weight: 700 }
.art-rel-sub { display: block; color: var(--muted); font-size: .7rem; line-height: 1.3; margin-top: 2px }
.art-sub-form { display: flex; flex-direction: column; gap: 8px }
.art-sub-form input { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; color: var(--text); font-size: .88rem; font-family: inherit; box-sizing: border-box; width: 100% }
.art-sub-form input:focus { outline: none; border-color: var(--purple) }
.art-sub-form .art-cta { padding: 11px 18px; font-size: .88rem }
.art-news-ok { display: none; background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .3); border-radius: 10px; padding: 10px 12px; color: #4ade80; font-size: .82rem; margin-top: 10px; line-height: 1.5 }
.art-news-note { font-size: .72rem; color: var(--muted); margin-top: 8px; line-height: 1.5 }
.art-news-note a { color: var(--purple); text-decoration: underline }

/* ── 8. 文末互动条（backend _art_end_strip_html 注入：反馈 / 分享 / 订阅 / 信任行）── */
.art-end { margin-top: 34px; border-top: 1px solid var(--border); padding-top: 6px }
.art-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 4px; font-size: .88rem }
.art-fb-q { color: var(--muted); font-weight: 600 }
.art-fb-btn { background: var(--panel); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: .84rem; font-weight: 700; padding: 6px 16px; border-radius: 999px; cursor: pointer; transition: border-color .12s, color .12s }
.art-fb-btn:hover { border-color: var(--purple); color: var(--purple-bright) }
.art-fb-btn.is-on { border-color: var(--purple); color: var(--purple-bright); background: var(--purple-subtle) }
.art-fb-done { color: var(--green); font-size: .82rem; margin: 0 0 0 4px }
.art-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 4px }
.art-share-label { color: var(--muted); font-size: .84rem; font-weight: 600; margin-right: 4px }
.art-share-link { display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--border); color: var(--text); font-size: .82rem; font-weight: 700; padding: 7px 14px; border-radius: 999px; text-decoration: none; transition: border-color .12s, color .12s }
.art-share-link:hover { border-color: var(--purple); color: var(--purple-bright) }
.art-share-link svg { width: 14px; height: 14px; flex: 0 0 auto }
.art-sub-form.art-sub-line { flex-direction: row }
.art-sub-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 18px 0 2px; font-size: .88rem }
.art-sub-line-label { color: var(--muted); font-weight: 600; margin-right: 2px }
.art-sub-line-row { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px }
.art-sub-line-row input { flex: 1 1 200px; min-width: 0; width: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; color: var(--text); font-size: .86rem; font-family: inherit; box-sizing: border-box }
.art-sub-line-row input:focus { outline: none; border-color: var(--purple) }
.art-sub-line-row .art-cta { padding: 9px 18px; font-size: .86rem; white-space: nowrap }
.art-end .art-news-ok { margin-top: 6px }
.art-trust { margin: 16px 0 2px; padding: 11px 14px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); font-size: .8rem; line-height: 1.6 }
.art-trust b { color: var(--text) }
.art-trust a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px }

/* ── 9. 话题页专属小件（QC 注入时后端整块移除 publish-box；仅无 QC 兜底/演示用）── */
.publish-box { display: none; background: rgba(127, 119, 221, .08); border: 1px solid rgba(127, 119, 221, .3); border-radius: 10px; padding: 14px 16px; margin-top: 14px }
.publish-box b { color: var(--purple-bright); font-size: .82rem; letter-spacing: .03em; text-transform: uppercase }
.publish-box .cap { font-size: .9rem; margin-top: 6px; line-height: 1.6; color: var(--text) }
.publish-box .tags { color: var(--gold); font-size: .85rem; margin-top: 6px }

/* ── 10. 响应式（editorial + 话题页同款断点）── */
@media (max-width: 1020px) {
  .article-wrap { max-width: 720px }
  .art-layout { flex-wrap: wrap }
  .art-main { flex: 1 1 100% }
  .art-aside { flex: 1 1 100%; position: static }
}
@media (max-width: 720px) {
  .article-wrap { padding: 34px 16px 30px }
  .article-hero h1 { font-size: 1.6rem }
  .article-body table { font-size: .8rem }
}
