/* ==========================================================================
 * VKC Mobile App Layer — 移动端「App 化」视觉层（老齐 2026-10-23）
 *
 * 设计语言来源：17素材网 Mobileshop 移动端电商模板（用户提供 zip）
 * 采用「C 方案：借视觉，不谈框架」——不套设备外框、不套 iframe，
 * 只把它的原生 App 观感搬到本站移动端：
 *
 *   1) 底部 Tab 栏      ← .tabs-footer：固定底栏 + 毛玻璃 blur(10px)
 *                        + 5 图标 + 激活态底部 3px 指示条
 *   2) 毛玻璃头部       ← .header：backdrop-filter blur(10px) 半透明
 *                        + env(safe-area-inset-*) 适配刘海屏
 *   3) 卡片体系         ← .card：border-radius 10px + 柔和投影
 *                        0 0 25px rgba(0,0,0,.1)
 *   4) 悬浮操作钮       ← 图片卡片右上角白色圆形收藏钮（.top-right .btn-rounded）
 *   5) 文字层级         ← small muted 元信息 → 标题 → 详情的三段式
 *
 * 配色已从模板的棕褐(#5F4534)换成本站军武主题：军工红 #c0392b / 深钢铁灰 #171a21
 *
 * 重要：本文件大部分规则仅在移动端（≤680px）生效，桌面端零影响。
 * 例外：第 0 节的「瓦片悬浮收藏钮基础样式」为全局规则——
 *       若只在移动端定义，桌面端 <button> 无显式尺寸，SVG 会按 viewBox
 *       撑满整个图块（表现为满格黑色实心心形）。该回归于 2026-10-23 修复。
 * ========================================================================== */

/* ---- 0. 瓦片悬浮收藏钮 · 基础样式（桌面端 + 移动端共用）----
   尺寸必须始终显式声明：button 无显式宽高时，内联 SVG 的
   width/height:auto 会解析为 viewBox 尺寸并撑满父级。 */
.vkc-photo-tile {
  position: relative;
}

.vkc-photo-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  color: #5f5e5a;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.vkc-photo-fav:active {
  transform: scale(0.88);
}

.vkc-photo-fav.is-faved {
  color: #c0392b;
}

.vkc-photo-fav svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.vkc-photo-fav.is-faved svg {
  fill: currentColor;
}

/* ---- 0b. 瓦片分类角标 · 基础样式（桌面端 + 移动端共用）----
   老齐 2026-10-23 要求：参考 demo 站样式改成
   「青色渐变胶囊 + 白色描边」，位置从左下角移到**左上角**
   （与右上收藏钮同排，且避开 .photo-preview-info 标题蒙层）。

   同样必须全局定义——原先只在 max-width:680px 的 media query 里，
   桌面端 .vkc-photo-badge 无定位（span 无 position 时是 static），
   会随文档流掉到网格下方。 */
.vkc-photo-wall .vkc-photo-badge,
.vkc-video-wall .vkc-photo-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: auto;
  z-index: 4;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  background: linear-gradient(135deg, #4fe3f0 0%, #17b8d8 55%, #0e93c4 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.3px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 60, 80, 0.35);
  white-space: nowrap;
  pointer-events: none;
}

/* 视频中央播放钮 · 基础样式（全局）
   span 无显式尺寸时，内联 SVG 同样会撑满父级，需显式约束。 */
.vkc-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(17, 19, 24, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.vkc-video-play svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
  flex: none;
}

/* ---- 1. 底部 Tab 栏（借 .tabs-footer）---- */
.vkc-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: none;
  /* 深钢铁灰毛玻璃（模板是白色半透明，本站头部即深色，保持统一） */
  background: rgba(23, 26, 33, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  /* 刘海屏/手势条安全区（模板原样用 env()，这里补上） */
  padding-bottom: env(safe-area-inset-bottom, 0);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vkc-tabbar-list {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vkc-tabbar-item {
  flex: 1 1 0;
  min-width: 0;
}

.vkc-tabbar-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 54px;
  padding: 0 2px;
  color: rgba(255, 255, 255, 0.52);
  text-decoration: none;
  transition: color 0.2s ease;
  /* 触点至少 44px 宽，满足移动端可点区域 */
  -webkit-tap-highlight-color: transparent;
}

.vkc-tabbar-link:active {
  opacity: 0.7;
}

.vkc-tabbar-link.is-active {
  color: #ffffff;
}

/* 激活态底部指示条：模板 .nav-link.active:after（3px 圆角实心条） */
.vkc-tabbar-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: #c0392b;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vkc-tabbar-link.is-active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.vkc-tabbar-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vkc-tabbar-text {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 红点（借模板 .notification-point）：有更新时提示 */
.vkc-tabbar-dot {
  position: absolute;
  top: 8px;
  right: 50%;
  margin-right: -16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c0392b;
  box-shadow: 0 0 0 2px rgba(23, 26, 33, 0.86);
}

/* ---- 2. 毛玻璃头部（借 .header backdrop-filter + safe-area）---- */
@media screen and (max-width: 680px) {
  /* 头部深色半透明 + 模糊，滚动时内容从底下透出 */
  .header-wrap,
  .navigation-widget-mobile-trigger {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }

  /* 页面底部留出 Tab 栏高度，避免最后一张卡片被压住 */
  .content-grid,
  .footer-wrap {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  /* ---- 3. 卡片体系（借 .card radius 10px + 柔和投影）---- */
  .post-preview,
  .vkc-photo-wall .photo-preview,
  .vkc-video-card,
  .vkc-forum-list {
    border-radius: 12px;
  }

  /* ---- 4. 壁纸瓦片 App 化 ---- */
  /* 瓦片包裹层：为悬浮钮/角标提供定位上下文。
     按钮必须是 <a> 的兄弟节点——嵌在链接里既无效也会被点击穿透 */
  .vkc-photo-tile {
    position: relative;
  }

  .vkc-photo-wall .photo-preview {
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }

  /* 收藏钮（.vkc-photo-fav）基础样式见文件第 0 节 —— 全局生效，
     桌面端同样需要显式尺寸，否则 SVG 会撑满图块。 */

  /* 分类角标（.vkc-photo-badge）基础样式同样见第 0 节：
     青色渐变 + 白框，壁纸墙与视频墙统一放左上角。 */

  /* ---- 5. 文字层级（借 small text-mute → 标题 → 详情三段式）---- */
  .vkc-photo-meta-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px;
    font-size: 11px;
    line-height: 1.4;
    color: #888780;
  }
}

/* Tab 栏只在移动端显示 */
@media screen and (max-width: 680px) {
  .vkc-tabbar {
    display: block;
  }
}

/* 真机访问时已经是移动视口，无需「设备外框」；
   桌面窄窗口（≤680px）同样按移动端规则渲染，保持一致 */

/* 桌面端隐藏：移动端商品卡文字区 / 首页分类宫格 */
@media screen and (min-width: 681px) {
  .vkc-tile-body,
  .vkc-cat-nav {
    display: none !important;
  }
}

/* ==========================================================================
 * 6. 页面浅灰底（借 Mobileshop bg-default-light 页面底）
 *    白卡浮在浅灰底上 = 「App 感」的关键；桌面端不受影响
 * ========================================================================== */
@media screen and (max-width: 680px) {
  body {
    background-color: #f3f3f5;
  }

  /* 首页 banner 是满宽深色图，与浅灰底直接相接会「跳」，
     给内容容器统一左右安全边距（父主题 content-grid 在移动端有自身 padding，
     这里只兜底） */
  .content-grid {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* ---- 7. 首页分类宫格（借 categoriestab1：白底圆角图标 + 名称）---- */
  .vkc-cat-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 4px;
    padding: 14px 10px 12px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(23, 26, 33, 0.05);
  }

  .vkc-cat-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .vkc-cat-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    /* 军工红 8% 淡底 + 红图标（模板是白底彩图，本站换主题色） */
    background: rgba(192, 57, 43, 0.08);
    color: #c0392b;
  }

  .vkc-cat-nav-icon svg {
    width: 24px;
    height: 24px;
  }

  .vkc-cat-nav-name {
    font-size: 11px;
    line-height: 1;
    color: #3a3d45;
    white-space: nowrap;
  }

  /* ---- 8. 栏目页商品网格（Mobileshop col-6 双列布局，老齐 2026-10-23）----
     父主题移动端规则是 repeat(auto-fit, 184px)：371px 容器只放得下一列，
     184px 窄条居中 + 两侧大空白 = 旧版「LOW」感的根源。
     改为双列密排 + 白卡 + 图下三段式文字（分类小字 → 标题 → 元信息）。 */
  .vkc-photo-wall .photos-masonry,
  .vkc-photo-wall.vkc-photo-sparse .photos-masonry,
  .vkc-photo-wall.vkc-video-wall .photos-masonry {
    grid-template-areas: none;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 12px;
    justify-content: stretch;
    margin-bottom: 20px;
  }

  /* 瓦片 = 白卡（借 .card border-0） */
  .vkc-photo-tile {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(23, 26, 33, 0.06);
  }

  /* 图：壁纸 3/4 竖比例（手机壁纸本站主流），视频 16/10；
     禁掉父主题 184px 固定高 */
  .vkc-photo-wall .photo-preview,
  .vkc-photo-wall.vkc-video-wall .photo-preview {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 0;
    box-shadow: none;
  }

  .vkc-photo-wall.vkc-video-wall .photo-preview {
    aspect-ratio: 16 / 10;
  }

  /* 桌面端的「图底渐变 + 白标题」蒙层在移动端隐藏：
     文字移到卡内的 .vkc-tile-body（Mobileshop 三段式） */
  .vkc-photo-wall .photo-preview .photo-preview-info {
    display: none;
  }

  /* 视频中央播放钮：缩小一档，别抢标题 */
  .vkc-video-wall .vkc-video-play {
    width: 40px;
    height: 40px;
  }

  /* 时长角标：右下（左下让给分类角标，参考站 badge 位） */
  .vkc-video-wall .vkc-video-duration {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: auto;
    z-index: 4;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: rgba(10, 12, 20, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 11px;
    color: #ffffff;
  }

  /* 分类角标：移动端隐藏——图下 .vkc-tile-cat 已显示同样信息，
     参考站图片上只留状态角标（New），分类走图下小字段（避免一词两处） */
  .vkc-photo-wall .vkc-photo-badge,
  .vkc-video-wall .vkc-photo-badge {
    display: none;
  }

  /* 文字三段式（借 small text-mute → 标题 → 价格的位置关系） */
  .vkc-tile-body {
    padding: 10px 12px 12px;
  }

  .vkc-tile-cat {
    margin: 0 0 3px;
    font-size: 11px;
    line-height: 1.3;
    color: #928d82;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vkc-tile-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #1a1d24;
    /* 两行截断，保证同行卡片等高（参考站标题也是定高块） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
  }

  .vkc-tile-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    line-height: 1;
    color: #928d82;
  }

  .vkc-tile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .vkc-tile-meta-item svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ---- 9. section 标题 / 筛选 pill（page-title 风格 + 白底红激活）---- */
  .vkc-photo-wall ~ .section-header,
  body.category .section-header {
    margin-bottom: 14px;
  }

  .section-pretitle {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #928d82;
  }

  .section-title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1d24;
  }

  .section-title .highlighted {
    font-size: 12px;
    font-weight: 400;
    color: #928d82;
    margin-left: 6px;
  }

  /* pill：白底 → 激活军工红（原紫色 #615dfa 与全站主题不符） */
  .vkc-category-tab {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12px;
    box-shadow: none;
    border: 1px solid rgba(23, 26, 33, 0.1);
    background: #ffffff;
    color: #3a3d45;
  }

  .vkc-category-tab.active {
    background: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
  }

  /* ---- 10. 首页卡片流 / BGM 行 / 壁纸 grid 收口 ---- */
  /* 动态大卡（post-sticky）：移动端图上文下，圆角投影统一 */
  .vkc-home-section {
    margin-top: 18px;
  }

  .post-sticky,
  .post-preview {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(23, 26, 33, 0.06);
  }

  /* 动态列表卡：封面改 16/10，标题 15px，摘要两行，底栏紧凑 */
  .post-preview .post-preview-image {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  /* 信息面板去桌面 demo 样式：-48px 叠图 + 320px 定高 + 91.67% 宽
     → 移动端改标准「图上文下」白卡（参考站商品卡结构），
     特色大卡（.post-preview.sticky，桌面是左图右面板）同样归一 */
  .post-preview .post-preview-info,
  .post-preview.sticky .post-preview-info,
  .post-preview .post-preview-info.fixed-height,
  .post-preview.medium.post-preview-normal {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    position: static;
    z-index: auto;
  }

  .post-preview .post-preview-info,
  .post-preview.sticky .post-preview-info {
    padding: 16px 16px 14px;
  }

  /* 「Read more...」链：整卡可点，移动端隐藏（参考站商品卡也没有多余 CTA）。
     父主题选择器 .post-preview .post-preview-info .post-preview-link 特异性 0-3-0，
     这里必须同重量级才压得住 */
  .post-preview .post-preview-info .post-preview-link {
    display: none;
  }

  .post-preview-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
  }

  /* 底栏（评论/分享）：去大边距，保留分隔线 */
  .post-preview .content-actions,
  .post-preview.medium.post-preview-normal .content-actions {
    margin: 12px 16px 0;
    padding: 10px 0 12px;
  }

  /* 特色大卡（.post-preview.sticky）专项：父主题 ≤960px 规则给它
     .content-actions { width: 100% }，块级过约束布局下 margin-right 被忽略、
     margin-left 生效 → 盒子整体右溢 16px，"0 次分享" 被卡片 overflow:hidden
     裁在右边界上（老齐 2026-10-23 截图反馈）。
     改走 padding 内缩（全局 border-box，不撑破 100% 宽），分隔线仍通栏。 */
  .post-preview.sticky .content-actions {
    box-sizing: border-box;
    margin: 12px 0 0;
    padding: 10px 16px 12px;
  }

  /* ---- 10b. 首页主列表：一行两列（老齐 2026-10-23）----
     父主题 grid-4-4-4 = repeat(auto-fit, 384px)：390px 视口只排 1 列大卡。
     移动端改 Mobileshop col-6 双列密排（与壁纸墙双列同语言），卡片内部同步收紧；
     桌面端 >680px 仍是 384px auto-fit 三列，不受影响。
     .stretched（align-items:stretch）保证同行卡片等高。 */
  .vkc-home-section .grid.grid-4-4-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* 双列窄卡（约 170px）内部收紧：仅作用于首页主列表的 medium 卡，
     特色大卡保持全宽 hero 版式不动。
     选择器必须带全父主题链路（.post-preview.medium.post-preview-normal .post-preview-info …）：
     父主题 medium 卡自带 0-3-0~0-4-0 规则（图片 320px 定高、标题 1.5rem、
     摘要 0.875rem+16px 外边距、底栏 52px 定高、info-bottom height:100%），
     子主题 style.css 还有一条 0-5-0 的 18px 标题——加 .vkc-home-section
     前缀提到 0-6-0 才压得住。 */
  .vkc-home-section .post-preview.medium.post-preview-normal .post-preview-image {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .vkc-home-section .post-preview.medium.post-preview-normal .post-preview-info {
    padding: 12px 12px 10px;
  }

  .vkc-home-section .post-preview.medium.post-preview-normal .post-preview-info .post-preview-timestamp {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vkc-home-section .post-preview.medium.post-preview-normal .post-preview-info .post-preview-title {
    font-size: 13px;
    line-height: 1.4;
  }

  .vkc-home-section .post-preview.medium.post-preview-normal .post-preview-info .post-preview-text {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
  }

  /* info-bottom 去 height:100%（父 0-4-0）：窄卡下消除摘要下方的空洞 */
  .vkc-home-section .post-preview .post-preview-info.fixed-height .post-preview-info-bottom {
    height: auto;
  }

  .vkc-home-section .post-preview.medium.post-preview-normal .content-actions {
    margin: 10px 12px 0;
    padding: 8px 0 10px;
    height: auto;
  }

  .post-preview-text {
    font-size: 13px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* BGM 行：白卡 + 圆形播放器容器 */
  .vkc-forum-list .vkc-forum-row {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(23, 26, 33, 0.05);
    padding: 14px 16px;
    margin-bottom: 10px;
  }

  .vkc-forum-list-header {
    display: none;
  }

  /* 首页壁纸 grid：方图圆角已在 style.css，补投影 */
  .vkc-photo-grid-item {
    box-shadow: 0 2px 10px rgba(23, 26, 33, 0.06);
  }

  /* ---- 11. 详情页 lightbox：信息面板卡片化 ---- */
  .vkc-photo-lightbox-page {
    padding: 16px 14px 28px;
  }

  .vkc-photo-lightbox-page .vkc-video-lightbox {
    max-height: none;
  }

  .vkc-photo-lightbox-page .vkc-video-lightbox-player {
    border-radius: 12px;
    overflow: hidden;
    border-bottom: none;
  }

  .vkc-photo-lightbox-page .vkc-photo-lightbox-stage img {
    border-radius: 12px;
  }

  .vkc-photo-lightbox-page .vkc-video-lightbox-info {
    margin-top: 12px;
    border-radius: 12px;
    padding: 18px 16px;
    box-shadow: 0 2px 10px rgba(23, 26, 33, 0.06);
  }

  .vkc-video-lightbox-title {
    font-size: 18px;
    line-height: 1.4;
  }

  /* ---- 12. 栏目筛选条：标签排 + 搜索框（老齐 2026-10-24）
   *
   * 问题：390px 视口下 8 个分类标签挤成 4/3/1 三行（末行只剩「枪械」），
   *       搜索框又被 .vkc-search-form 的固定 220px 宽顶到独占一行，
   *       整块筛选区高达 232px，浪费首屏。
   *
   * 方案：
   *   ① 标签排改「横向可滑动」单行（flex + overflow-x:auto + scroll-snap），
   *      不再换行堆叠，高度恒定一行 30px；
   *   ② 搜索框压缩成 36px 高的小圆角条，宽度自适应（不再固定 220px），
   *      与标签排同处一行，标签排在上、搜索框在下，整体更紧凑。
   * ------------------------------------------------------------------- */
  .vkc-forum-filters {
    margin-bottom: 2px;
  }

  /* 父主题 .section-filters-bar.v2 在 ≤1365px 时写死 padding:32px 28px，
   * 移动端这块留白比内容还高（老齐：包裹整体太高）。
   * 用 body.category + 双类名提高特异性，压到 16px。 */
  body.category .section-filters-bar.v2.vkc-forum-filters {
    padding: 16px;
  }

  .vkc-forum-filter-actions {
    gap: 10px;
  }

  /* 标签排：单行横向滚动，避免多行错位 */
  .vkc-category-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .vkc-category-tabs::-webkit-scrollbar {
    display: none;
  }

  .vkc-category-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 6px 13px;
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* 搜索框：压缩高度 + 自适应宽度，占满一行 */
  .vkc-search-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .vkc-search-form .form-row,
  .vkc-search-form .form-item {
    width: 100%;
  }

  .vkc-search-form .form-input.small.with-button {
    height: 36px;
  }

  .vkc-search-form .form-input.small input {
    height: 36px;
    font-size: 13px;
    padding-left: 14px;
    /* 父主题 .form-input.with-button input 给 64px 按钮留了 82px 右内边距，
       移动端按钮只有 36px，不改会把输入区压得只剩一条缝 */
    padding-right: 44px;
  }

  /* placeholder 承担提示职责（label 已视觉隐藏）。
     桌面端 style.css 把 placeholder 设为透明，这里恢复可见色。
     选择器与 style.css 完全一致（0-3-1），靠加载顺序取胜：
     vkc-mobile-app.css 在 vikingerchild-styles 之后加载。*/
  .vkc-search-form .form-input.small input::placeholder {
    color: var(--color-text-alt-2, #adafca);
    opacity: 1;
  }

  /* 父主题 .form-input.small label 是浮动 label 布局
     （label 绝对定位在 input 内，聚焦时 .active 上浮到 top:-6px）。
     移动端搜索框只有 36px 高，浮动 label 会与输入文字叠在一起，
     且 PHP 直出的表单拿不到父主题 React 组件驱动的 .active 状态机。
     解法（老齐 2026-10-24）：
       ① category.php 给 input 补 placeholder="搜索壁纸"，
          由原生 placeholder 承担提示职责；
       ② 移动端把 label 视觉隐藏（保留在 DOM 里，无障碍不丢）。
     注：不能用 input:focus + label —— label 在 DOM 中位于 input 之前。 */
  .vkc-search-form .form-input.small label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* 搜索按钮：小尺寸方钮，不占满输入框高度 */
  .vkc-search-form .form-input.small button {
    width: 36px;
    height: 36px;
    top: 0;
    border-radius: 0 9px 9px 0;
  }

  .vkc-search-form .form-input.small button svg {
    width: 15px;
    height: 15px;
  }

  /* 素材/壁纸栏目页顶部横幅下方的筛选条同样收口 */
  body.category .section-header + .section-filters-bar {
    margin-top: 4px;
  }
}

/* ==========================================================================
 * 12b. 平板筛选条 padding 收口（老齐 2026-10-24）
 *
 * 父主题 .section-filters-bar.v2 在 ≤1365px 时写死 padding: 32px 28px，
 * 平板（681~960px）下标签排已能单行放下，搜索框却仍独占一行，
 * 整块被 padding 撑到 161px。压缩到 20px，与手机端观感统一。
 * ========================================================================== */
@media screen and (min-width: 681px) and (max-width: 960px) {
  body.category .section-filters-bar.v2.vkc-forum-filters {
    padding: 20px 24px;
  }
}

/* ==========================================================================
 * 12. 横幅 Banner：通栏左右对齐 + 文字居中（老齐 2026-10-23 截图反馈）
 *
 * 反馈原文："banner文字居中，左右对齐"
 *
 * 1) 左右对齐：banner 原是 content-grid 内的圆角内缩卡——
 *    子主题 14px 容器内边距 + 父主题 ≤1365px 的 2.5% 侧缩（width:95%）
 *    ≈ 左右各 24px。用 calc() 负边距精确抵消，banner 左右缘与视口对齐，
 *    与顶部深色 header 连成一整块 hero；通栏后圆角会露缺角，一并去掉。
 *    home.php 与 category.php 的 section-banner 同时生效，全站一致。
 * 2) 文字居中：2026-10-22 删掉了左侧徽章图标，但子主题 style.css:2340 的
 *    padding-left:56px（非 media query，把 ≤960px 规则里的 104px 也压掉了）
 *    没撤——文字一直偏左。改左右对称 20px + text-align:center。
 * ========================================================================== */
@media screen and (max-width: 680px) {
  .section-banner {
    /* 通栏：-(14px 容器内边距 + 2.5vw 父主题侧缩) */
    margin-left: calc(-14px - 2.5vw);
    margin-right: calc(-14px - 2.5vw);
    border-radius: 0;
    /* 文字居中：左右对称内边距（上/下 14px 沿用 ≤960px 规则） */
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }

  /* 通栏后与顶部深色 header 连成一整块 hero：
     抵消 content-grid 的 32px 上内边距（仅当 banner 是首个子元素时，
     不影响详情页/会员页等首个元素不是 banner 的页面） */
  .content-grid > .section-banner:first-child {
    margin-top: -32px;
  }
}

/* ==========================================================================
 * 13. 移动端页脚：品牌块沉底 + 居中（老齐 2026-10-23 截图反馈）
 *
 * 反馈原文："这里放在底部，然后是居中左右对齐"
 * （红框 = 品牌区 环球武库资源站/GLOBAL ARMORY/陕ICP备，红箭头 = 移到三卡下方）
 *
 * 原移动端顺序：品牌块在上、三卡在下（父主题 footer-top 竖排 + align-items:center，
 * 品牌块被 shrink-wrap 成 154px 且文字左对齐，视觉上偏在左侧）。
 * 改为：三卡在上 → 品牌沉底，撑满页脚宽 + 三行文字整体居中（左右对称）。
 * 仅 ≤680px 生效；桌面端「品牌左 / 三卡右」布局不动。
 * ========================================================================== */
@media screen and (max-width: 680px) {
  /* 顺序反转：三卡 order:1 在上，品牌 order:2 沉底 */
  .footer-top .vkc-footer-cards {
    order: 1;
    /* 原 28px 是「品牌→三卡」的间距，顺序反转后挪到品牌块上方 */
    margin-top: 0;
  }

  .footer-top .footer-info {
    order: 2;
    margin-top: 32px;
    /* 撑满页脚宽（footer-top 是 align-items:center 的 flex 列，
      不 stretch 会被 shrink-wrap 成文字宽度） */
    align-self: stretch;
    text-align: center;
  }

  /* 品牌行（logo + 标题组）在撑满的容器里水平居中 */
  .footer-top .footer-info .footer-info-brand {
    justify-content: center;
  }
}

/* ==========================================================================
 * 14. 移动端文章详情页：缩字号 + 收间距（老齐 2026-10-23 反馈）
 *     反馈原文："移动端文章，因版式拉的太长了，缩小字体，协调版式"
 *
 * 实测 390px 修前垂直预算（总高 4576px）：
 *   封面 320（纯大图无文字）+ 标题区 110（36px×2行）+ 作者栏 82+60 边距
 *   + 档案卡 2071（卡头 247 / 规格宫格 344 / 三张数据表 981）
 *   + 相关文章 1078（2 张全宽卡 ×444：图 214 + 信息 166）
 *
 * 修法（全部 ≤680px，桌面不动）：
 *   a. 封面 320→200px（纯 hero 图不载文字）；白卡上叠 -100→-64px、
 *      上内边距 60→32px
 *   b. 标题 36→24px（11 字标题从 2 行变 1 行）；时间戳 16→12px
 *   c. 档案卡：文章内容里的内联 <style> 在 body 内、后于主题样式表加载，
 *      同特异性会赢——覆写一律加 .post-open-content-body 前缀提特异性。
 *      卡距 24→14px；h2 26→18px；徽章改可换行（nowrap 把标题组挤成
 *      4 行，是卡头 247px 的元凶）；数据表 13→12px、单元格内距 9→6px；
 *      规格值 15→13px
 *   d. 相关文章卡：图 210→120px、信息区内距 28→12px、标题 20→14px、
 *      摘要 14→12px（全宽紧凑列表项，保持 1 列）
 * ========================================================================== */
@media screen and (max-width: 680px) {
  /* ---- a. 封面 + 白卡上叠 ----
     注意：文章页 content-grid 带 full/content-grid_open-post 类，父主题
     ≤960px 用 0-4-0 选择器写死 cover 320px / body padding-top 60px，
     低特异性规则压不住——这里 mirror 同链选择器（后加载胜出） */
  .post-open .post-open-cover,
  .content-grid.full.content-grid_open-post .post-open-cover {
    height: 200px;
  }

  .post-open .post-open-body,
  .content-grid.full.content-grid_open-post .post-open-body {
    margin-top: -64px;
    padding-top: 32px;
  }

  /* ---- b. 标题区（0-4-0 压过父主题 ≤460px 的 2.25rem 与子主题 0-3-0）---- */
  .post-open .post-open-body .post-open-heading .post-open-timestamp {
    font-size: 12px;
  }

  .post-open .post-open-body .post-open-heading .post-open-title {
    font-size: 24px;
    line-height: 1.35;
    margin-top: 12px;
  }

  /* ---- c. 内容区间距 ---- */
  .post-open .post-open-body .post-open-content {
    margin-top: 24px;
  }

  .post-open .post-open-body .post-open-content .post-open-content-sidebar {
    margin-bottom: 24px;
  }

  .post-open .post-open-body .post-open-content .post-open-content-body {
    padding-bottom: 32px;
  }

  /* ---- d. 档案卡（内联样式覆写：前缀提特异性）---- */
  .post-open-content-body .gw-dossier-card {
    margin: 12px auto;
    padding: 14px;
  }

  .post-open-content-body .gw-dossier-card .gw-header {
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 14px;
  }

  .post-open-content-body .gw-dossier-card .gw-title-group h2 {
    font-size: 18px;
    line-height: 1.3;
  }

  .post-open-content-body .gw-dossier-card .gw-title-group .gw-sub-title {
    font-size: 11px;
    margin-top: 2px;
  }

  .post-open-content-body .gw-dossier-card .gw-badge-tactical {
    font-size: 10px;
    padding: 3px 6px;
  }

  .post-open-content-body .gw-dossier-card .gw-visual-frame {
    margin-bottom: 14px;
  }

  .post-open-content-body .gw-dossier-card .gw-visual-overlay {
    padding: 14px 10px 8px;
    font-size: 10px;
  }

  .post-open-content-body .gw-dossier-card .gw-section-title {
    font-size: 13px;
    margin: 12px 0 8px;
  }

  .post-open-content-body .gw-dossier-card .gw-specs-grid {
    gap: 8px;
    margin-bottom: 12px;
  }

  .post-open-content-body .gw-dossier-card .gw-spec-box {
    padding: 8px 10px;
  }

  .post-open-content-body .gw-dossier-card .gw-spec-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .post-open-content-body .gw-dossier-card .gw-spec-value {
    font-size: 13px;
  }

  .post-open-content-body .gw-dossier-card .gw-data-table {
    font-size: 12px;
    margin-bottom: 12px;
  }

  .post-open-content-body .gw-dossier-card .gw-data-table td {
    padding: 6px 6px;
  }

  .post-open-content-body .gw-dossier-card .gw-data-table td.gw-col-desc {
    line-height: 1.45;
  }

  .post-open-content-body .gw-dossier-card .gw-footer-meta {
    padding-top: 10px;
    font-size: 10px;
  }

  /* ---- e. 相关文章卡：紧凑列表项 ---- */
  .vkc-related-posts {
    padding-top: 24px;
  }

  .vkc-related-posts .grid.grid-6-6 {
    gap: 12px;
  }

  .vkc-related-posts .post-preview .post-preview-image {
    height: 120px;
  }

  .vkc-related-posts .post-preview .post-preview-info {
    padding: 12px 14px;
  }

  .vkc-related-posts .post-preview .post-preview-title {
    font-size: 14px;
    line-height: 1.4;
  }

  .vkc-related-posts .post-preview .post-preview-text {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* ==========================================================================
   素材栏「三端样机图」卡片墙（2026-10-23）
   参考淘宝/京东 8K 壁纸商品图：深灰底 + 笔记本/平板/手机叠放 + 徽标行。
   样机图由 scripts/make_device_mockup.py 生成并设为特色图。
   ========================================================================== */

.vkc-asset-wall {
  display: grid;
  /* 桌面端固定 3 列（老齐 2026-10-23：「素材一行排列 3 个」）。
     固定列数而非 auto-fill —— 保证不同屏宽下列数稳定，卡面尺寸一致。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 26px 0 8px;
}

.vkc-asset-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 4px 22px rgba(93, 93, 158, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.vkc-asset-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(93, 93, 158, 0.18);
}

/* ---- 样机图区：深灰底衬（与样机图本身的背景无缝衔接）---- */
.vkc-asset-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1440 / 1546;
  overflow: hidden;
  background-color: #1f2024;
}

.vkc-asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.vkc-asset-noimg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: #6d6f80;
}

/* 分辨率徽章（4K ULTRA HD）—— 与样机图左下角那块呼应
   ⚠️ z-index 必须给足：样机内壁纸图 img.vkc-mock-img 是 z-index:1，
      而本角标是样机的兄弟节点，默认 z-index:auto 会被壁纸图盖掉
      （实测角标只露出右半截 "TRA HD"）。给到 5 保证压在样机之上。 */
.vkc-asset-res {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background-color: rgba(20, 20, 22, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1;
  color: #ffffff;
}

/* ---- 信息区 ---- */
.vkc-asset-body {
  padding: 14px 16px 16px;
}

.vkc-asset-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #3e3f5e;
}

.vkc-asset-cat {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  background-color: rgba(0, 199, 217, 0.12);
  font-size: 11px;
  font-weight: 600;
  color: #00a8b8;
  vertical-align: 1px;
}

.vkc-asset-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.vkc-asset-spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #adafca;
}

.vkc-asset-spec svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.vkc-asset-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  background-color: #615dfa;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  transition: background-color 0.15s ease;
}

.vkc-asset-dl:hover {
  background-color: #4d49e0;
  color: #ffffff;
}

.vkc-asset-dl svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

@media screen and (max-width: 1200px) {
  .vkc-asset-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media screen and (max-width: 960px) {
  .vkc-asset-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media screen and (max-width: 680px) {
  .vkc-asset-wall {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 16px 0 4px;
  }
}