/* ============================================================
 * style-v2.css —— lmweb 首页 PC 端布局优化 + 公告弹窗 + 小程序引流
 * ============================================================
 * 定位：**覆盖层**。加载顺序放在 style.css / subpage.css 之后，
 *      只新增与覆盖，不删原有规则 → 不满意可整文件丢弃回滚。
 *
 *   <link rel="stylesheet" href="css/style.css?v=...">
 *   <link rel="stylesheet" href="css/subpage.css?v=...">
 *   <link rel="stylesheet" href="css/style-v2.css?v=...">   ← 新增这一行
 *
 * 手机端（<1024px）视觉**逐像素不变**，只新增能力：
 *   · PC 统一内容中轴（原为 760 / 960 / 通栏 三种宽度混用）
 *   · 公告由「一行纯文本」改为「单行摘要 + 点击弹窗详情」
 *   · PC 海报改通栏 cover（可切「不显示」，见文末 body.pc-no-cover）
 *   · PC 补 :hover / :focus-visible
 *   · 新增小程序码引流卡片（.mq-*）
 * ============================================================ */

/* ------------------------------------------------------------
 * 0. 设计令牌
 * ---------------------------------------------------------- */
:root {
  --container: 100%;      /* 内容中轴最大宽度 */
  --gutter: 16px;         /* 左右安全边距 */
  --cover-max: 760px;     /* PC 海报最大宽度（高度 = 该值 ÷ 封面宽高比，见 §3）
                             ⚠️ 用 px 不用 rem —— 本站在 html 上设了 font-size:14px，
                                写 rem 会被乘 14，尺寸完全不是你以为的数 */
  --brand-1: #6366f1;
  --brand-2: #8b5cf6;
  --brand-soft: rgba(99, 102, 241, .10);
  --brand-line: rgba(99, 102, 241, .22);
  --line: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .12);
  --surface: rgba(255, 255, 255, .04);
  --txt-1: #ffffff;
  --txt-2: rgba(255, 255, 255, .80);
  --txt-3: rgba(255, 255, 255, .48);
  /* 🔴 B7 令牌化新增（深色默认值；theme-light.css 重定义浅色值）：
       基础 style.css/subpage.css 已改用这些变量，缺定义 = 深色整站透明/崩。 */
  --bg: #0f0f1a;                 /* 页面底 */
  --bg-soft: rgba(255, 255, 255, .07);  /* :active / :hover 回应底 */
  --img-bg: #0a0a16;             /* 图片未加载占位底 */
  --link: #a5b4fc;               /* 链接/强调靛 */
  --amber: #fbbf24;              /* 琥珀（更新/链接/提示） */
  --shadow-2: 0 10px 26px rgba(0, 0, 0, .30);
  --shadow-3: 0 12px 30px rgba(0, 0, 0, .34);
  --ease: cubic-bezier(.2, 0, 0, 1);
}

@media (min-width: 640px)  { :root { --container: 720px;  --gutter: 20px; } }
@media (min-width: 1024px) { :root { --container: 1120px; --gutter: 24px; } }
@media (min-width: 1600px) { :root { --container: 1240px; } }

/* ------------------------------------------------------------
 * 1. 统一内容中轴
 * ------------------------------------------------------------
 * 用「百分比 padding + max()」把通栏区块的内边距推到中轴，
 * **不需要往 index.php 里塞任何 wrapper 容器**：
 *   手机  → max(16px, 0)                = 16px（与现状完全一致）
 *   桌面  → max(24px,(100% - 1120)/2)   → 内容稳定落在 1120px 中轴
 * ---------------------------------------------------------- */
.header,
.search-bar,
.search-panel,
.load-more,
.footer,
.section {
  padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--container)) / 2));
}

/* 网格不再各自限宽 —— 交给上面这条中轴统一管 */
.cat-grid,
.list-grid { max-width: none; margin-left: 0; margin-right: 0; }

/* ------------------------------------------------------------
 * 2. Header
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .header { height: 60px; }
  #header-logo { height: 28px; max-width: 110px; }
  .header-title { font-size: 18px; letter-spacing: .01em; }
  .header-right { width: 36px; height: 36px; font-size: 17px; }
}

/* ------------------------------------------------------------
 * 3. 海报轮播
 * ------------------------------------------------------------
 * 手机：**完全保持原样**（不动，见下方 media query 之外无任何规则）
 *
 * PC  ：原样是 max-width:760 / height:240 + object-fit:contain。
 *       容器比例 760:240 = 3.17:1，而封面原图 2480×1680 ≈ 1.476:1
 *       → contain 必然在左右各留 ~203px 纯黑，这正是"留白太多"的元凶。
 *
 * 🔴 但**不能简单改成 object-fit:cover**：style.css 里原作者写了
 *    「contain —— 完整显示封面，防止大字标题被上下裁切」，直接 cover
 *    在 1120×300 的框里会裁掉约 60% 高度，把标题上下切掉（已实测截图确认）。
 *
 * ✅ 正确解法：让**容器比例跟着封面走**（aspect-ratio）+ cover。
 *    比例一致时 cover 等价于"不裁不留边"；万一以后换了一张别的比例的
 *    封面，cover 也只是轻微裁切而**不会**再出现黑边。
 *
 * 尺寸：宽度由 --cover-max 控制（默认 52.3rem ≈ 520px，高度 ≈ 352px）。
 *      嫌小就调大 --cover-max；**不想要海报**就给 body 加 pc-no-cover（见下）。
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .cover-carousel {
    width: calc(100% - var(--gutter) * 2);
    max-width: min(var(--container), var(--cover-max));
    height: auto;                     /* 高度交给 aspect-ratio 算 */
    aspect-ratio: 2480 / 1680;        /* = 当前封面原图比例（换封面若比例不同请改这里） */
    margin: 20px auto 0;
    border-radius: 16px;
    overflow: hidden;
    background: #0a0a16;
  }
  .cover-carousel img {
    object-fit: cover;                /* 比例已匹配 → 等价不裁；换比例封面也不会留黑边 */
    object-position: center;
    border-radius: inherit;
  }
  .cover-dots { bottom: 12px; }
}

/* 备选：PC 完全不显示海报（给 body 加 pc-no-cover class 即生效，一行开关）
   🔴 必须 !important —— app.js 的 renderCoverCarousel() 会写
      `el.style.display = 'block'` 内联样式，内联优先级高于本类的选择器，
      不加 !important 这个开关会**静默失效**（已实测：海报照旧显示）。 */
@media (min-width: 1024px) {
  body.pc-no-cover .cover-carousel { display: none !important; }
  /* 不显示海报时，公告条上移到顶部留白处，避免顶部过空 */
  body.pc-no-cover .notice-bar,
  body.pc-no-cover .motto-bar { margin-top: 22px; }
}

/* ------------------------------------------------------------
 * 3b. 备选：通栏「无缝」横幅（给 body 加 pc-banner）
 * ------------------------------------------------------------
 * 思路：仍然用 object-fit:contain（**绝不裁切**），但给容器铺一条
 *       与封面**左右边缘同色**的水平渐变当底。
 *
 * 为什么这样能做到"看不出接缝"：实测封面（2480×1680）左右边缘像素为
 *   左 #fafafa（近白）… 右 #fbecf1（淡粉），且边缘 20px 内几乎无变化。
 * 于是 contain 留下的左右空白带 = 同一条渐变 → 与图片边缘自然衔接，
 * 视觉上是"一整块浅色底板 + 中间是封面"，既通栏又零裁切。
 *
 * ⚠️ 换封面时这两个色值要跟着改（改这里，或改 .cover-carousel 的 background）。
 * 高度可用 --cover-max 调，或直接改下面的 height。
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  body.pc-banner .cover-carousel {
    max-width: var(--container);
    width: calc(100% - var(--gutter) * 2);
    height: 420px;
    aspect-ratio: auto;              /* 横幅要的是宽高比 ≠ 封面比例，故关掉 */
    background: linear-gradient(90deg, #fafafa 0%, #fbecf1 100%);
  }
  body.pc-banner .cover-carousel img {
    object-fit: contain;             /* 完整显示，一个像素都不裁 */
    background: transparent;         /* 别让 style.css 的 #0a0a16 盖住渐变 */
  }
}

/* ------------------------------------------------------------
 * 4. 公告条（单行摘要 · 点击弹窗）
 * ------------------------------------------------------------
 * 🔴 这里必须用 **margin** 而不是 §1 那种 padding 来做中轴：
 *    公告条自己是"有底色的块"，padding 会把底色一起铺到边，视觉上变成
 *    一条几乎通栏的色带（实测 left=24/right=1416），而不是一个居中的圆角条。
 *    用 margin + max() → 盒子本身落在中轴上，圆角与底色才是想要的样子。
 *    手机档 max(16px, 负数) = 16px，与改动前的 margin:12px 16px 0 完全一致。
 * ---------------------------------------------------------- */
.notice-bar,
.motto-bar {
  margin-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  margin-right: max(var(--gutter), calc((100% - var(--container)) / 2));
}

.notice-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 10px 12px;
  min-height: 42px;
  border-radius: 11px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.notice-bar:active { background: rgba(99, 102, 241, .16); }
.notice-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #c7d2fe;
  background: rgba(99, 102, 241, .22);
}
.notice-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, .20);
}
.notice-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .74);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;        /* 单行核心 */
}
.notice-more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #a5b4fc;
  white-space: nowrap;
}
/* 手机端把「详情 ›」收成一个箭头，省横向空间 */
.notice-more-text { display: none; }
@media (min-width: 480px) { .notice-more-text { display: inline; } }

/* 无公告时的兜底：一言条（沿用老结构，只是收得更紧）
   margin 由上面 .notice-bar/.motto-bar 那组统一给，这里只覆盖纵向与内观 */
.motto-bar {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: .3px;
  color: var(--txt-3);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .notice-bar { margin-top: 16px; min-height: 46px; padding: 11px 14px; }
  .notice-text { font-size: 14px; }
  .notice-bar:hover { background: rgba(99, 102, 241, .15); border-color: rgba(99, 102, 241, .34); }
  .motto-bar { font-size: 13.5px; }
}

/* ------------------------------------------------------------
 * 5. 公告弹窗
 * ---------------------------------------------------------- */
.notice-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: rgba(6, 6, 14, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.notice-modal.active { display: flex; }

.notice-dialog {
  width: 100%;
  max-width: 580px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #14141f;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: noticePop .22s var(--ease);
}
@keyframes noticePop {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.notice-dialog-hd {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.notice-dialog-title {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--txt-1);
}
.notice-dialog-title::before {
  content: '';
  width: 3px; height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
}
.notice-dialog-close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .58);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.notice-dialog-close:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.notice-dialog-close:active { transform: scale(.94); }

.notice-dialog-body {
  flex: 1 1 auto;
  padding: 16px 18px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.notice-footer {
  flex-shrink: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.notice-footer-btn {
  display: block;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.notice-footer-btn:active { transform: scale(.985); }

/* ------------------------------------------------------------
 * 6. 公告正文（markdown 渲染结果 · 逐行解析）
 * ---------------------------------------------------------- */
.notice-body {
  font-size: 14px;
  line-height: 1.78;
  color: rgba(255, 255, 255, .80);
  word-break: break-word;
}
.notice-body > *:first-child { margin-top: 0; }
.notice-body > *:last-child  { margin-bottom: 0; }
.notice-body p { margin: 0 0 9px; }
.notice-body h1,
.notice-body h2,
.notice-body h3,
.notice-body h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--txt-1);
}
.notice-body h1::before,
.notice-body h2::before,
.notice-body h3::before,
.notice-body h4::before {
  content: '';
  width: 3px; height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  flex-shrink: 0;
}
.notice-body ul,
.notice-body ol { margin: 0; padding-left: 0; list-style: none; }
.notice-body li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  line-height: 1.72;
}
.notice-body li:last-child { margin-bottom: 0; }
.notice-body li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: .68em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(129, 140, 248, .85);
}
/* 公告里的重点（如 QQ 号）做成小胶囊，扫一眼就能抄 */
.notice-body strong {
  color: var(--txt-1);
  font-weight: 600;
  background: rgba(255, 255, 255, .10);
  border-radius: 5px;
  padding: 1px 6px;
  margin: 0 1px;
}
.notice-body em { color: rgba(255, 255, 255, .62); }
.notice-body a { color: #a5b4fc; text-decoration: underline; text-underline-offset: 2px; }
.notice-body code {
  font-family: 'Fira Code', Consolas, monospace;
  font-size: 12.5px;
  background: rgba(255, 255, 255, .08);
  color: #c4b5fd;
  border-radius: 5px;
  padding: 1px 6px;
}
.notice-body blockquote {
  margin: 9px 0;
  padding: 9px 13px;
  border-left: 2px solid var(--brand-1);
  background: rgba(99, 102, 241, .08);
  border-radius: 0 8px 8px 0;
  color: rgba(255, 255, 255, .68);
}
.notice-body hr {
  border: none;
  border-top: 1px solid var(--line-strong);
  margin: 13px 0;
}

/* ------------------------------------------------------------
 * 7. 搜索栏
 * ---------------------------------------------------------- */
.search-bar { padding-top: 14px; padding-bottom: 10px; }
.search-wrap {
  border-radius: 11px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.search-wrap:focus-within {
  border-color: rgba(99, 102, 241, .55);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}
@media (min-width: 640px) {
  .search-bar { padding-top: 16px; padding-bottom: 12px; }
  .search-wrap { max-width: 720px; margin: 0 auto; height: 44px; }
}
@media (min-width: 1024px) {
  /* 输入框太长会显得空，桌面收敛到 820 居中，与内容中轴视觉连贯 */
  .search-wrap { max-width: 820px; height: 48px; padding: 0 16px; }
  .search-icon { font-size: 16px; }
  .search-input { font-size: 15px; }
}
.search-panel .suggest-empty { padding: 20px 0; }

/* ------------------------------------------------------------
 * 8. 区块节奏
 * ---------------------------------------------------------- */
.section { padding-top: 18px; padding-bottom: 4px; }
.section-hd { margin-bottom: 14px; }
.section-title { font-size: 16px; letter-spacing: .01em; }
.section-title::before { width: 3px; height: 16px; }
@media (min-width: 1024px) {
  .section { padding-top: 28px; padding-bottom: 6px; }
  .section-hd { margin-bottom: 16px; }
  .section-title { font-size: 19px; }
  .section-title::before { width: 4px; height: 18px; }
}

/* ------------------------------------------------------------
 * 9. 分类网格：桌面改 flex 居中，最后一行不再左对齐留空
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .cat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  .cat-item {
    flex: 1 1 150px;
    max-width: 190px;
    padding: 20px 10px 18px;
    border-radius: 14px;
    border-color: var(--line);
  }
  .cat-icon,
  .cat-icon-text { width: 50px; height: 50px; font-size: 24px; }
  .cat-name { font-size: 13px; }
}

/* ------------------------------------------------------------
 * 10. 更多页面 / 精选文章
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .pages-grid { display: flex; flex-wrap: wrap; gap: 14px; }
  .page-item {
    flex: 1 1 260px;
    max-width: 340px;
    padding: 16px;
    border-radius: 14px;
  }
  .page-name { font-size: 14px; }
  .page-desc { font-size: 12px; }

  .list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  .art-item { border-radius: 14px; }
  .art-title { font-size: 14px; }
}

/* ------------------------------------------------------------
 * 11. 指针设备：hover / focus（PC 上原本一条都没有）
 * ---------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .cat-item:hover {
    background: rgba(255, 255, 255, .075);
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
  .art-item:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-3);
  }
  .art-item:hover .art-cover { transform: scale(1.03); }
  .page-item:hover {
    background: rgba(255, 255, 255, .06);
    border-color: var(--brand-line);
    transform: translateY(-2px);
  }
  .suggest-item:hover { background: rgba(255, 255, 255, .05); }
  .sp-item:hover { background: rgba(255, 255, 255, .07); border-color: var(--brand-line); }
  .load-more-btn:hover {
    background: rgba(255, 255, 255, .10);
    border-color: var(--line-strong);
    color: rgba(255, 255, 255, .85);
  }
  .join-group-link:hover { filter: brightness(1.1); transform: translateY(-1px); }
  .header-right:hover { opacity: .62; }
  .search-clear:hover { color: rgba(255, 255, 255, .7); }
  .cover-carousel img { transition: opacity .6s ease, transform .6s var(--ease); }
  .cover-carousel:hover img.active { transform: scale(1.015); }
}

/* ------------------------------------------------------------
 * 3b. 封面 Ken Burns（缓慢呼吸，第 11 轮 D3）
 * ------------------------------------------------------------
 * 改之前：**单张海报时整个封面完全静止**，就是一个不会动的大图块；
 *        多张时也只是每 3.5s 硬切一次透明度，中间毫无生气。
 *
 * 做法：给 `.active` 那张加一条 20s 的缓慢放大，`alternate` 来回 ——
 *      单张时会一直缓慢"呼吸"，多张时每次切换只播到一小段，
 *      贡献的是"两张图之间微微不同步"的呼吸感，不会互相打架。
 *
 * 🔴 四个注意点：
 *  1. **必须放在 hover 媒体查询外**。里面那条 `.cover-carousel:hover
 *     img.active { transform: scale(1.015) }` 是 PC 悬浮反馈，两者都写
 *     transform，放一起会互相覆盖。PC 端本来就 `body.pc-no-cover`
 *     把轮播 display:none 了，所以两者实际不会同时可见。
 *  2. **`alternate` 而不是单向** —— 单向放大到 1.08 后会"啪"地跳回 1，
 *     那一下比不动还难堪。alternate 才是"呼吸"。
 *  3. **切换时要平滑退回**：`.active` 摘掉后动画停止，元素从当前动画值
 *     过渡回 `transform: none` —— 靠的正是上面那条
 *     `transition: transform .6s`（与透明度淡出同时长），
 *     所以旧图是"边缩小边淡出"，不会有一帧突跳。
 *  4. **尊重减少动效**：由 ui.css §3 的全站压制规则统一处理
 *     （`animation-duration: .01ms` → 瞬间停在终态），这里不用重复写。
 *     与 A2 的「轮播暂停」是两件事：A2 管时间轴，这条管单帧位移。
 * ---------------------------------------------------------- */
.cover-carousel img.active {
  animation: lmw-kenburns 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes lmw-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.art-cover { transition: transform .3s var(--ease); }

a:focus-visible,
button:focus-visible,
.notice-bar:focus-visible {
  outline: 2px solid rgba(129, 140, 248, .75);
  outline-offset: 2px;
  border-radius: 9px;
}
input:focus-visible { outline: none; }

/* ------------------------------------------------------------
 * 12. 小程序引流卡片（miniapp 权限类型）
 * ---------------------------------------------------------- */
.mq-card {
  position: relative;
  margin: 18px 0 8px;
  padding: 22px 18px 20px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(99, 102, 241, .11), rgba(99, 102, 241, .035));
  border: 1px solid var(--brand-line);
  overflow: hidden;
}
/* 顶部一道极淡的品牌色光晕，让"要跳转"这件事有分量 */
.mq-card::before {
  content: '';
  position: absolute;
  left: 50%; top: -70px;
  width: 260px; height: 140px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(99, 102, 241, .28), transparent 70%);
  pointer-events: none;
}
.mq-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #c7d2fe;
  background: rgba(99, 102, 241, .20);
}
.mq-title {
  position: relative;
  margin-bottom: 6px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--txt-1);
  line-height: 1.45;
}
.mq-desc {
  position: relative;
  margin: 0 auto 16px;
  max-width: 340px;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .52);
}
.mq-code-wrap {
  position: relative;
  display: inline-block;
  padding: 9px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
  line-height: 0;
}
.mq-code {
  display: block;
  width: 176px;
  height: 176px;
  border-radius: 7px;
}
.mq-hint {
  position: relative;
  margin-top: 12px;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .38);
}
/* 小程序码没生成出来时的降级形态 */
.mq-fallback {
  position: relative;
  padding: 16px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
  border: 1px dashed rgba(255, 255, 255, .14);
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .62);
}
.mq-fallback b { color: #c7d2fe; font-weight: 600; }

@media (min-width: 768px) {
  .mq-card { padding: 26px 24px 24px; }
  .mq-code { width: 194px; height: 194px; }
  .mq-title { font-size: 17px; }
}

/* 小程序模式下的正文预览
   ⚠️ 不能沿用 .detail-preview（它带 white-space:pre-wrap，会把渲染后的 markdown 撑出乱换行） */
.mq-preview {
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .88);
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (min-width: 768px) { .mq-preview { font-size: 16px; } }

/* partial 模式的正文预览（2026-09-27）
   ⚠️ 预览改为 markdown 渲染后，style.css 里 `.detail-preview{white-space:pre-wrap}`
      会把渲染出的 HTML 换行**逐字撑开**（缩进/空行全变可见空行）→ 必须复位为 normal。
   `.detail-preview` 全项目**只被 partial 分支使用**，改动面可控。 */
.detail-preview { white-space: normal; }

/* 详情页：小程序模式下正文预览的收尾渐隐 */
.detail-body .mq-preview-fade {
  position: relative;
  margin-top: -46px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(15, 15, 26, 0), #0f0f1a 88%);
  pointer-events: none;
}

/* ------------------------------------------------------------
 * 12b. 详情页封面 / 预览条（PC）
 * ------------------------------------------------------------
 * 原样：`.detail-cover { width:100%; max-height:300px; object-fit:cover }`
 *   → 手机 375 宽时 cover 裁 20%，尚可；
 *   → PC 1440 宽 × 300 高 + cover，而封面原图常是 2048×2048 方形
 *     ⇒ 只显示整张图高度的 ~14%（一条横切面），视觉上就是"顶部一条空黑带"。
 *
 * 改成：落在详情页既有的 860px 中轴上（与 .detail-wrap 对齐，见 style.css:687）、
 *       高度自适应、contain **零裁切**。
 *       另加一圈细边 + 卡片底 + 阴影 —— 本类封面多为**暗底方形海报**，
 *       不加框时深色底会直接融进页面底色，看着像"标题在空气里飘"。
 * 手机档完全不动。
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .detail-cover {
    width: auto;
    max-width: 860px;
    max-height: 420px;
    height: auto;
    margin: 20px auto 0;
    object-fit: contain;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    padding: 6px;
    box-shadow: var(--shadow-3);
  }
  /* 预览图横滑条原本 padding:12px 16px 通栏，PC 上把它也推到 860 中轴 */
  .detail-swiper {
    padding-left: max(var(--gutter), calc((100% - 860px) / 2));
    padding-right: max(var(--gutter), calc((100% - 860px) / 2));
  }
}

/* ------------------------------------------------------------
 * 13. 收尾
 * ------------------------------------------------------------
 * style.css 的 768/1024 断点里写了 .hero / .hero-title，
 * 但 index.php 里早已没有这两个 class —— 部署时直接删掉那几条即可：
 *   .hero { min-height: …; padding: …; }   → 删
 *   .hero-title { font-size: …; }          → 删
 * 这里不重复声明，避免留下"看起来在改、其实没生效"的死规则。
 * ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .footer { margin-top: 24px; padding-top: 30px; padding-bottom: 48px; }
}