/* =========================================================
   多端UI 设计规范 · 视图模板覆盖层（view/default）
   设计语言：蓝橙双主色 · 浅色扁平（识别点「蓝橙劈裂 / Split Duo」）
   与静态页（首页/一级分类/二级分类/详情页）同源：直接复用 site-common.css 的设计令牌与
   头部/底部/容器结构，使 CMS 模板在视觉与布局上与静态页一致。
   加载位置：common/layout.html 的 {__STYLE__} 之后（优先级高于 common.css 与页面内联）。
   本文件为「单一权威样式」：模板内联 <style> 已移除，一切视觉由此文件接管。
   ========================================================= */

/* ---------- 0. 基础重置 + 页面底 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-page); }
body.group-page {
  background: var(--bg-page);
  color: var(--text-main);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
/* 修复：skin-white 等可能在 body 上注入顶部留白，强制归零（顶部空行 bug） */
body.group-page, body.group-page.skin-white { padding-top: 0 !important; margin: 0 !important; }
.header { margin: 0 !important; }

/* ---------- 1. Token 重定义（对齐 site-common.css；兼容页面内联变量名） ---------- */
:root {
  --primary: #2B6FE4;                 /* 主蓝 */
  --text-main: #1d2b41;
  --text-sub: #546683;
  --text-faint: #5b7196;
  --surface: #ffffff;                 /* 卡片/面板表面 */
  --bg-page: #FFFFFF;                 /* 页面底色（对齐参考首页纯白） */
  --rim: 1px solid #E2E8F0;           /* hairline 描边（shorthand，供 border: var(--rim) 使用） */
  --rim-c: #E2E8F0;                   /* 描边颜色（供 border-color 单独使用，避免 shorthand 注入 border-color 导致整条声明失效） */
  --sh-out: 0 1px 2px rgba(15, 23, 42, .05);
  --sh-out-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --sh-in: inset 0 1px 2px rgba(15, 23, 42, .06);
  --page-max: 1360px;                 /* 导航与正文共用宽度 */
  --page-pad: 56px;                   /* 左右留白 */
  --accent: #FF7A1A;                  /* 橙色点缀（热度/强调） */
  --brand-secondary: #FF7A1A;
  --primary-strong: #2f6fe0;
  --primary-soft-bg: #e8f1fe;         /* 浅蓝底（标签/选中） */
  --header-dark: #15263f;             /* 暗色页头底 */
  --font-family: "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 圆角 / 控件 */
  --radius-small: 8px; --radius-medium: 12px; --radius-large: 16px; --radius-pill: 999px;
  --control-h: 36px;

  /* 卡片/列表旧模板内联变量名（此处统一为规范值，确保不会被旧内联覆盖） */
  --hot: #FF7A1A;
  --tint: #2B6FE4;
  --tint-soft: rgba(43, 111, 228, .12);
  --tint-line: rgba(43, 111, 228, .25);
  --panel: #ffffff;
  --panel-hover: #f1f5fb;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  --text: #1d2b41;
  --text-2: #546683;
  --text-3: #5b7196;
  --bg: #F6F8FB;
  --bg-2: #F6F8FB;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

/* ---------- 2. 顶部导航（蓝底实条 + 白字菜单） ---------- */
header {
  background: var(--primary);
  padding: 10px var(--page-pad);
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  box-shadow: none;
}
.nav-wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 48px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
  line-height: 1.2;
  flex-shrink: 0;
  text-decoration: none;
}
/* #8 需求：导航「科技工坊」悬浮态保持白色，不随全局 a:hover 变蓝 */
.logo:hover, a.logo:hover { color: #fff !important; }
.logo-mark {
  width: 32px; height: 32px; flex-shrink: 0; display: block;
  border-radius: 9px; background: #fff; object-fit: contain;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .14);
}
.nav-menu { display: flex; gap: 32px; align-items: center; margin-right: auto; }
.nav-menu .nav-item { color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 500; padding: 6px 0; position: relative; cursor: pointer; display: block; white-space: nowrap; flex-shrink: 0; }
.nav-menu .nav-label { color: inherit; text-decoration: none; display: inline-flex; align-items: center; position: relative; }
.nav-menu .nav-label::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -2px; height: 2px; background: #fff; border-radius: 2px; opacity: 0; transition: opacity .18s ease; }
.nav-menu .nav-item:hover .nav-label, .nav-menu .nav-item:focus-within .nav-label { color: #fff; }
.nav-menu .nav-item.active .nav-label { color: #fff; font-weight: 600; }
.nav-menu .nav-item.active .nav-label::after { opacity: 1; }
/* 悬浮桥接：弥合标签与浮层之间的空隙，避免移动到浮层时浮层消失（需求 #8） */
.nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
/* 工具下拉 */
.nav-item { position: relative; }
.nav-item .nav-label { display: flex; align-items: center; color: inherit; text-decoration: none; }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  /* 需求 #6：宽度适应文本，不再固定 380px */
  width: max-content; max-width: calc(100vw - 40px);
  background: var(--surface); border: var(--rim); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 12px; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60;
}
.dropdown::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: var(--surface); border-left: var(--rim); border-top: var(--rim); }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* 需求：导航分类悬浮菜单改单列（不再两列） */
.dd-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
.dropdown a { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 12px; color: var(--text-main); text-decoration: none; transition: background .15s ease; }
.dropdown a:hover { background: #eef4fc; }
/* 需求 #7：工具悬浮层图标改为顺序数字徽标 */
.dd-num { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; font-family: inherit; }
.dd-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dd-txt b { font-size: 12px; font-weight: 400; color: var(--text-sub); transition: color .15s ease; }
.dropdown a:hover .dd-txt b { color: var(--primary); }
.dropdown a.on { background: var(--primary-soft-bg); }
.dropdown a.on .dd-txt b { color: var(--primary); font-weight: 600; }
.dropdown a.on .dd-num { background: var(--primary-soft-bg); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
@media (max-width: 900px) {
  .dropdown { position: fixed; top: 70px; left: 16px; right: 16px; width: auto; max-width: none; transform: translateY(6px); }
  .nav-item:hover .dropdown, .nav-item:focus-within .dropdown { transform: translateY(0); }
  .dropdown::before { display: none; }
  .dd-grid { grid-template-columns: 1fr; }
}
/* 右侧：搜索 / 登录 / 主题 */
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-search { display: flex; align-items: center; gap: 9px; width: 230px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--rim); color: var(--text-sub); cursor: text; transition: .2s ease; }
.nav-search:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(43, 111, 228, .15); }
.nav-search:focus-within svg { opacity: 1; }
.nav-search svg { flex-shrink: 0; opacity: .92; }
.nav-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text-main); font-family: inherit; font-size: 14px; line-height: 1.2; }
.nav-search input::placeholder { color: var(--text-faint); }
.nav-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.login-group { display: flex; gap: 10px; }
.login-btn { height: 36px; padding: 0 12px; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-bottom: 2px solid transparent; color: rgba(255, 255, 255, .9); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: color .18s ease, border-color .18s ease; }
.login-btn:hover { color: #fff; }
.login-btn:active, .login-btn:focus-visible { color: #fff; font-weight: 700; border-bottom-color: #fff; outline: none; }
/* QQ 登录按钮：图标 + 文字，与「登录/注册」同款样式 */
.login-qq { gap: 5px; }
.login-qq .iconfont { font-size: 16px; line-height: 1; }
/* 登录页专用 QQ 登录按钮（供 login.qqlogin_snippet.html 片段使用） */
.login-qq-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 8px; background: #12B7F5; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
.login-qq-btn:hover { background: #0ea0d8; color: #fff; }
.login-qq-btn .iconfont { font-size: 18px; }
.theme-toggle-web { width: 36px; height: 36px; flex: none; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .2s ease, transform .2s ease; }
.theme-toggle-web:hover { background: rgba(255, 255, 255, .22); }
.theme-toggle-web:active { transform: scale(.95); }
.theme-toggle-web svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle-web .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle-web .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle-web .ic-sun { display: block; }

/* ---------- 3. 正文容器（与导航同宽同留白） ---------- */
.main-content { display: block; overflow-x: hidden; }
.container { max-width: calc(var(--page-max) + var(--page-pad) * 2); margin: 0 auto; padding: 24px var(--page-pad) 16px; }
#content-container { width: 100%; }

/* ---------- 4. 面包屑 ---------- */
.breadcrumb { background: transparent; padding: 0; margin: 0 0 18px; font-size: 13px; border-radius: 0; display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb > li { display: inline-flex; align-items: center; }
.breadcrumb > li + li::before { content: "/"; color: var(--text-faint); padding: 0 8px; }
.breadcrumb > li > a, .breadcrumb a { color: var(--text-sub); text-decoration: none; }
.breadcrumb > li > a:hover, .breadcrumb a:hover { color: var(--primary); }
.breadcrumb > .active { color: var(--primary); }
/* 详情页面包屑藏在 panel-heading 内时，给一点间距 */
.panel-heading .breadcrumb { margin-bottom: 0; }

/* ---------- 5. 面板 / 卡片（扁平 + hairline 描边） ---------- */
.panel { background: var(--surface); border: var(--rim); border-radius: var(--radius-large); box-shadow: var(--sh-out); margin-bottom: 16px; }
.panel-default { border-color: var(--rim-c); }
.panel-default > .panel-heading { background: var(--surface); color: var(--text-main); border-radius: var(--radius-large) var(--radius-large) 0 0; /* 需求：块标题距顶部=距左侧（均 18px） */ padding: 18px 18px; }
.panel-heading { display: flex; align-items: center; }
.panel-heading .panel-title { font-size: 15px; display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.panel-heading .panel-title::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--primary); flex: 0 0 auto; }
.panel-body { padding: 16px; color: var(--text-main); }
.panel-body.p-0, .panel-body.pt-0, .panel-body.py-0, .panel-body.pt-1, .panel-body.py-1 { padding: 0; }
.panel-body.pt-0 { padding-top: 0; } .panel-body.py-0 { padding-bottom: 0; }
/* 标题右侧「更多」链接 */
.panel-title .more, .panel-heading .more { margin-left: auto; }
.more, .panel-title .more a, .panel-heading .more a { font-size: 13px; color: var(--text-sub); text-decoration: none; white-space: nowrap; }
.more:hover, .panel-title .more a:hover, .panel-heading .more a:hover { color: var(--primary); }
.more.pull-right { float: right; }
/* 一级页（channel）子标题在 .panel-body 内，非 .panel 直接子元素，需单独去除 Bootstrap 默认底边细线（需求 #3） */
.panel-body .panel-heading { border-bottom: none; /* 需求：一级页子标题距顶部≈距左侧（panel-body 已给 16px 左距，此处补 16px 上距） */ padding: 16px 0 10px; }

/* ---------- 6. 区块/面板标题：蓝色竖条（对齐静态页 zone-title） ---------- */
.zone-title, .sec-title, .panel-heading .panel-title {
  font-size: 15px; font-weight: 700; letter-spacing: .5px; color: var(--text-main);
}

/* ---------- 7. 网格卡片 / 列表（核心：覆盖旧内联样式） ---------- */
.product-list, .article-list, .channel-list { margin-bottom: 20px; }

/* 一级页（频道页）块标题：黑字加粗 + 蓝色竖条（对齐参考图 image#2）。
   仅作用于 .channel-list 下的块标题，不误伤数据标题 .media-heading / .res-row h3，
   也不影响 .panel-heading 下的普通块标题（如「正版软件」「最近更新」）。
   根因：旧版 .panel-heading .panel-title 规则无法命中此处（标题不在 .panel-heading 内），
   改用更精确的选择器，文本强制黑字覆盖 common.css 的蓝色。 */
.channel-list h3.panel-title {
  color: var(--text-main) !important;
  font-weight: 700 !important;
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
}
.channel-list h3.panel-title::before {
  content: ""; width: 4px; height: 15px; border-radius: 2px;
  background: var(--primary); flex: 0 0 auto;
}
.channel-list h3.panel-title a { color: var(--text-main) !important; font-weight: 700 !important; }
.channel-list h3.panel-title em { margin-left: auto; font-style: normal; }
.channel-list h3.panel-title em a { color: var(--text-sub) !important; font-weight: 400 !important; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}
/* 列表型卡片（图标左 + 标题/标签/热度右） */
.card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 14px;
  border-radius: var(--radius-large);
  background: var(--surface);
  border: var(--rim);
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--sh-out); }
.card .c-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 54px; margin-top: 2px; }
.card .c-icon { width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; background: var(--surface); border: var(--rim); box-shadow: var(--sh-out-sm); text-decoration: none; }
.card .c-icon img { display: none; }
.card .c-icon::before { content: ""; width: 26px; height: 26px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B6FE4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3C/svg%3E") center/contain no-repeat; }
.card .c-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card .c-desc { font-size: 14px; color: var(--text-main); margin-top: 2px; margin-bottom: 10px; line-height: 1.5; font-weight: 500; }
.card .c-desc a { color: var(--text-main); text-decoration: none; }
.card .c-desc a:hover { color: var(--primary); }
.card .c-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.card .c-cat { flex-shrink: 0; font-size: 11px; padding: 3px 9px; border-radius: 6px; color: var(--primary); background: var(--primary-soft-bg); font-weight: 500; }
.card .c-time { font-size: 12px; color: var(--text-faint); }
.card .c-heat { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--accent); margin-left: auto; }
.card .c-heat svg { width: 14px; height: 14px; }
.card .c-heat b { font-weight: 600; }

/* 截图型卡片（大图 + 标题 + 脚注） */
.cardpic {
  position: relative;
  border-radius: var(--radius-large);
  background: var(--surface);
  border: var(--rim);
  box-shadow: none;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cardpic:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--sh-out); }
.cardpic .card-screenshot { width: 100%; height: 160px; background: #f3f4f6; overflow: hidden; }
.cardpic .card-screenshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cardpic .card-inner { padding: 14px; }
.cardpic .c-body { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.cardpic .c-desc { font-size: 14px; color: var(--text-main); margin-top: 2px; margin-bottom: 10px; line-height: 1.5; font-weight: 500; }
.cardpic .c-desc a { color: var(--text-main); text-decoration: none; }
.cardpic .c-desc a:hover { color: var(--primary); }
.cardpic .c-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.cardpic .c-cat { flex-shrink: 0; font-size: 12px; padding: 4px 10px; border-radius: 7px; color: var(--primary); background: var(--primary-soft-bg); font-weight: 500; }
.cardpic .c-time { font-size: 12px; color: var(--text-faint); }
.cardpic .c-heat { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--accent); margin-left: auto; }
.cardpic .c-heat svg { width: 14px; height: 14px; }
.cardpic .c-heat b { font-weight: 600; }

/* ---------- 7.5 资源列表行（对齐静态页 .res-row：固定图标 + 标题 + 标签/时间/热度 三列栅格） ---------- */
.res-list { display: block; }
.res-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 244px;
  align-items: center;
  column-gap: 14px;
  padding: 12px 4px;
  min-width: 0;
  position: relative;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  transition: background .15s ease;
}
.res-row:hover { background: #f5f8fd; }
/* #5 需求：行间的虚线/分隔线全部去掉 */
.res-row + .res-row::before { display: none; }
.res-row .card-icon {
  width: 56px; height: 56px; margin: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform .18s ease;
}
.res-row:hover .card-icon { transform: translateY(-1px) scale(1.04); }
/* 真实图标由 <img> 承载；移除旧占位 ::before，避免与 img 在 flex 中争位导致图标显示不全（需求 #2） */
.res-row .card-icon::before { display: none; }
/* 需求 #5：一级分类列表项前不要蓝条 / 分隔线（防御性兜底，确保无残留左蓝边/虚线） */
.res-row { border-left: none; }
.res-row::before, .res-row + .res-row::before { display: none !important; }
.res-row .card-icon { border: none; box-shadow: none; background: transparent; }
.res-main { min-width: 0; }
.res-row h3 {
  margin: 0;
  font-size: 14px; font-weight: 500; color: var(--text-main);
  line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .18s ease;
}
.res-row:hover h3 { color: var(--primary); }
.res-desc {
  margin-top: 4px;
  font-size: 12.5px; line-height: 1.3; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12px; line-height: 1; min-width: 0;
}
.res-tag {
  padding: 5px 6px; border-radius: 999px;
  background: var(--primary-soft-bg); color: var(--primary);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: none;
}
.res-time { color: var(--text-faint); white-space: nowrap; }
.res-hot { display: flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; flex: none; }
.res-hot svg { width: 13px; height: 13px; flex: none; }

/* ---------- 12.5 右侧栏（对齐静态页 .sidebar：白卡 + 蓝竖条标题 + 更多 + 虚线分隔） ---------- */
aside .panel { margin-bottom: 16px; }
aside .panel .panel-heading { /* 需求：块标题距顶部=距左侧（均 18px） */ padding: 18px 18px 12px; }
aside .panel .panel-title { font-size: 15px; }
aside .panel .panel-title .more,
aside .panel .panel-heading .more { margin-left: auto; font-size: 12px; color: var(--text-faint); }
aside .panel .panel-title .more:hover,
aside .panel .panel-heading .more:hover { color: var(--primary); }
aside .panel .panel-title .panel-head-tip { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-faint); }
aside .panel .panel-body { padding: 2px 18px 16px; }
/* 最近更新：虚线分隔 */
aside .lasest-update .panel-body ul li {
  height: auto; line-height: 1.5; padding: 9px 0;
  white-space: normal;
}
aside .lasest-update .panel-body ul li:last-child { border-bottom: none; }
aside .lasest-update .panel-body ul li a { color: var(--text-sub); }
aside .lasest-update .panel-body ul li a:hover { color: var(--primary); }
/* 推荐下载：编号 + 标题，虚线分隔 */
aside .recommend-article .media.media-number { padding: 9px 0; margin: 0; }
aside .recommend-article .media.media-number + .media.media-number { border-top: none; }
aside .recommend-article .media-left .num.tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  background: var(--primary-soft-bg); color: var(--primary); border: none;
}
aside .recommend-article .media-body a { color: var(--text-sub); font-size: 13.5px; }
aside .recommend-article .media-body a:hover { color: var(--primary); }
/* 热门标签：胶囊 */
aside .hot-tags .tags { display: flex; flex-wrap: wrap; gap: 8px; }
aside .hot-tags .tag { margin: 0; }

/* 网格卡顶部蓝橙劈裂条（对齐静态页卡片记忆点） */
.grids .grid, .grids .gridsub { background: var(--surface); border: var(--rim); border-radius: var(--radius-large); box-shadow: none; overflow: hidden; }
.grids .grid::before, .grids .gridsub::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #2B6FE4 0 50%, #FF7A1A 50% 100%); z-index: 2; }
.grids .grid:hover, .grids .gridsub:hover { box-shadow: var(--sh-out); transform: translateY(-4px); border-color: var(--primary); }
.grids .grid .img, .grids .gridsub .img { border-radius: 0; }

/* ---------- 8. 按钮 ---------- */
.btn { border-radius: var(--radius-small); font-weight: 500; padding: 7px 16px; transition: all .2s ease; border-width: 1px; }
.btn:focus, .btn.focus, .btn:active:focus { outline: none; box-shadow: 0 0 0 3px rgba(43, 111, 228, .25); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: #1E5FCC; border-color: #1E5FCC; color: #fff; }
.btn-primary:active, .btn-primary.active { background: #1A54B8; border-color: #1A54B8; }
.btn-warning, .btn-orange { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-warning:hover, .btn-orange:hover { background: #FF8C3D; border-color: #FF8C3D; color: #fff; }
.btn-default { background: #fff; border-color: var(--line-strong); color: var(--text-main); }
.btn-default:hover { background: #f1f5fb; border-color: var(--primary); color: var(--primary); }
.btn-link { color: var(--primary); }
.btn-link:hover { color: #1E5FCC; }
.btn-download-now, .btn-download { font-size: 13px; padding: 7px 18px; }
/* 下载按钮文本强制可见：覆盖任何旧版/冲突规则（蓝底必须配白字，需求 R50#1） */
.btn-primary,
.btn-primary.btn-download,
.btn-primary.btn-download-now,
#download .btn-primary,
.panel-body .btn-primary.btn-download { color: #fff !important; }
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary.btn-download,
[data-theme="dark"] .btn-primary.btn-download-now,
[data-theme="dark"] #download .btn-primary,
[data-theme="dark"] .panel-body .btn-primary.btn-download { color: #fff !important; }

/* 需求 #2：详情页所有按钮统一胶囊圆角 + 自适应宽度（对齐目标截图：蓝底白字、两端半圆的胶囊） */
.article-content .btn,
.article-donate .btn,
.article-actions .btn,
#download .btn,
#postcomment .btn,
.btn-download-now,
.btn-download {
  border-radius: 999px;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 需求：按钮文字与高度收敛（此前 15px/10px22px 偏高偏大） */
  font-size: 13px;
  line-height: 1.4;
  padding: 7px 18px;
}

/* 需求 #3：暗号输入框聚焦去掉黑边，改为细灰边 */
.ipt, #verifycode, input.ipt {
  border: 1px solid var(--rim-c);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-main);
  padding: 4px 10px;
  outline: none;
}

/* 需求 #13：暗号块布局优化（卡片式，对齐全站 UI 风格：浅底圆角卡片 + 左侧文字组 + 右侧二维码） */
.kjgf_hide_box {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px;
  border-radius: 12px;
  background: var(--primary-soft-bg);
  border: 1px solid var(--rim-c);
}
.kjgf_hide_box .anhao-main { flex: 1; min-width: 0; }
.kjgf_hide_box .anhao-tip { margin: 0 0 10px; font-size: 13.5px; color: var(--text-sub); line-height: 1.6; }
.kjgf_hide_box .anhao-err { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: #E5484D; }
.kjgf_hide_box .anhao-form { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.kjgf_hide_box .anhao-label { font-size: 14px; color: var(--text-main); flex: none; }
.kjgf_hide_box .anhao-form .ipt { flex: 1; min-width: 120px; max-width: 200px; height: 34px; }
.kjgf_hide_box .anhao-form .btn { flex: none; height: 34px; border-radius: 999px; padding: 0 20px; font-size: 13px; line-height: 1; }
.kjgf_hide_box .anhao-wx { margin: 0; font-size: 12.5px; color: var(--text-faint); line-height: 1.6; }
.kjgf_hide_box .anhao-wx b { color: var(--primary); font-weight: 600; }
.kjgf_hide_box .anhao-qr { width: 108px; height: 108px; flex: none; object-fit: contain; border-radius: 10px; background: #fff; padding: 6px; align-self: center; }
.ipt:focus, #verifycode:focus, input.ipt:focus {
  border-color: var(--line-strong);
  box-shadow: none;
  outline: none;
}

/* ---------- 9. 标签 / 徽标 ---------- */
.tag, .label { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--primary-soft-bg); color: var(--primary); font-size: 12px; font-weight: 500; line-height: 1.7; }
.tag-hot, .tag-orange, .label-warning { background: #FFF1E6; color: var(--accent); }

/* ---------- 10. 表单控件 ---------- */
.form-control { height: var(--control-h); border: 1px solid var(--line-strong); border-radius: var(--radius-small); box-shadow: none; color: var(--text-main); background: #fff; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(43, 111, 228, .18); }
.form-control::placeholder { color: var(--text-faint); }
/* 详情页评论输入框（未登录禁用态）：浅蓝填充 + 浅灰圆角边框，对齐目标样式（需求 R50#2） */
#comment-container #postcomment textarea.form-control[disabled],
#comment-container #postcomment textarea.form-control:disabled {
  background: var(--primary-soft-bg);
  border: 1px solid var(--line-strong);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* ---------- 11. 通栏 Banner / 焦点图：对齐 首页.html .banner-main ----------
   外层 .index-banner 为实线框；.item 内缩 12px 留出间隙；.carousel-img 内嵌浅蓝虚线框，
   图片置于虚线内；指示点落在右下角（当前页拉长胶囊）。 */
.focus-img { display: none; } /* 旧 7:5 焦点副图区：统一并入通栏 banner */
.carousel-focus, .index-focus { margin-bottom: 16px; }
/* 轮播包在 .index-banner 内时，去掉内部底部外边距，使图片与外层框四边间距一致（需求 #1） */
.index-banner .carousel-focus, .index-banner .index-focus { margin-bottom: 0; }
.carousel-focus .item, .index-focus .item { padding: 12px; }
.carousel-focus .item .carousel-img,
.index-focus .item .carousel-img {
  position: relative;
  width: 100%;
  height: 320px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;            /* 裁切框：图片放大时只框内溢出，不撑大外框 */
}
/* 用 ::before 承载背景图（仅继承父级 background-image，size/position 显式声明），
   悬浮时仅在其内部放大，外框尺寸恒定（需求 #1：只放大不拉伸整体）。
   注意：此前用 background:inherit 会触发部分浏览器不继承 background-size:cover，
   退化为 auto（宽图表现为「左右满、上下空」），故此处显式 cover 以撑满整框。 */
.carousel-focus .item .carousel-img::before,
.index-focus .item .carousel-img::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 用 CSS 变量 --cms-bg 承载图片 URL（自定义属性 inherit 可靠，规避 background-image:inherit 在部分浏览器不生效导致 ::before 无图、hover 不撑满） */
  background-image: var(--cms-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .45s ease;
}
.index-banner .carousel-focus:hover .carousel-img::before,
.index-banner .index-focus:hover .carousel-img::before { transform: scale(1.06); }
/* 禁用 common.css 对父级 .carousel-img 的 transform:scale(1.02)（会拉伸整体外框），仅保留 ::before 框内放大 */
.carousel-focus:hover .carousel-img,
.index-focus:hover .carousel-img { transform: none; }
.carousel-focus .item > a, .index-focus .item > a { display: block; }
/* 指示点：右下角，当前页拉长胶囊（对齐参考 .banner-dots） */
.carousel-indicators { right: 22px; left: auto; bottom: 26px; margin: 0; width: auto; }
.carousel-indicators li { width: 8px; height: 8px; border-radius: 50%; background: rgba(46,107,230,.3); border: none; margin: 0 3px; transition: width .28s ease, background .28s ease; }
.carousel-indicators li.active { background: var(--primary); width: 22px; border-radius: 999px; }
.carousel-control { width: 40px; opacity: .8; }
.carousel-control .fa { font-size: 22px; }

/* ---------- 12. 双栏布局（首页/详情/列表右栏） ----------
   注意：以下列内边距调整仅作用于桌面双栏（md ≥ 992px）。
   此前为无媒体查询作用域的全局规则，移动端元素带 col-xs-12 col-md-8 双类时，
   .col-md-8 后加载覆盖了 col-xs-12 的 15px padding，与 .row 的 -15px 负 margin 失衡，
   导致移动端整页向右溢出 ~9px 被 overflow-x:hidden 裁切（表现为「所有块贴右缘、右侧被切」）。
   故限定在桌面断点内，移动端由下方媒体查询统一清零列 padding，改用 .container 的 --page-pad 留白。 */
@media (min-width: 992px) {
.col-md-9, .col-md-8 { padding-right: 24px; }
.col-md-3, .col-md-4 { padding-left: 0; }
}
/* 侧栏卡片复用 .panel，标题加蓝竖条已在 .panel-title 处理 */
aside .panel .panel-title { font-size: 15px; }

/* ---------- 13. 链接 ---------- */
.main-content a { color: var(--primary); }
.main-content a:hover { color: #1E5FCC; }

/* ---------- 14. 页脚（深石板） ---------- */
.site-footer { margin-top: 0; background: #1f2730; color: var(--text-faint); padding: 16px var(--page-pad); }
.foot-inner { max-width: var(--page-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.foot-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.foot-mark { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: center; }
.foot-mark svg { width: 16px; height: 16px; fill: #1c232b; }
.foot-mark .foot-logo { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }
.foot-txt { min-width: 0; }
.foot-copy { font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }
.foot-copy a { color: var(--text-faint); text-decoration: none; }
.foot-copy a:hover { color: #fff; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.foot-links a { font-size: 13px; color: var(--text-faint); text-decoration: none; transition: color .18s ease; }
.foot-links a:hover { color: #fff; }

/* 修正「底部高度 bug」（需求 R71 #2）：覆盖 common.css 的 sticky-footer 残骸
   —— common.css 把 footer 强制 height:115px、并给 .main-content:after 注入 256px 空白占位，
   导致短页面底部出现一大块空高。此处还原为自然流式，页脚紧贴内容下方、高度自适应。 */
.main-content { margin: 0 auto !important; min-height: 0 !important; padding-bottom: 0 !important; }
.main-content:after { display: none !important; content: none !important; }
footer { height: auto !important; }
/* 需求 R72 #9：彻底去除底部大段空白——common.css 把 html,body 设为 height:100%（强制等于视口高），
   短页面时内容不足 100vh，body 下方留大片空白。此处还原为自然高度，页脚紧贴内容下方。 */
html, body { height: auto !important; min-height: 0 !important; }
/* 防御性：禁止整页横向溢出（需求 R77 #6：手机端偶发横向溢出把块裁切，根因多为旧 CSS 未部署；此处兜底防止任何子元素撑破视口） */
body { overflow-x: hidden; }

/* ---------- 15. 右侧浮窗（保留 CMS 功能，套用静态视觉） ---------- */
/* 悬浮栏：固定于视口右缘（需求 R72 #7：再右移一点，距右缘 16px，不再贴内容容器居中右缘） */
#floatbtn-anchor { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 80; pointer-events: none; }
.floatbtn-inner { max-width: calc(var(--page-max) + var(--page-pad) * 2); margin: 0 auto; padding: 0 4px 0 var(--page-pad); display: flex; justify-content: flex-end; }
#floatbtn { position: static; pointer-events: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#floatbtn > a, #floatbtn .floatbtn-item { pointer-events: auto;
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px; box-shadow: 0 3px 10px rgba(110, 145, 190, .20);
  border: none; cursor: pointer; color: #8a94a6; text-decoration: none;
  position: relative; z-index: 90; -webkit-user-select: none; user-select: none;
}
#floatbtn > a svg, #floatbtn .floatbtn-item svg { width: 20px; height: 20px; }
/* hover：灰色态（需求 R72 #7：颜色改灰，不再用主蓝），隐藏图标显示文字标签（与 CMS 默认一致）；
   但 #back-to-top 只有箭头无文字，hover 时须保留箭头（需求 R80 #2） */
#floatbtn > a.hover:not(#back-to-top):hover svg,
#floatbtn .floatbtn-item.hover:not(#back-to-top):hover svg { display: none; }
#floatbtn > a.hover:hover, #floatbtn .floatbtn-item.hover:hover { background: #eef1f5; color: var(--text-main); }
#floatbtn > a#back-to-top:hover svg { display: block; }

/* ---------- 16. 分类标题（隐藏但保留语义） ---------- */
.category-title { display: none; }

/* ---------- 17. 深色模式 ---------- */
[data-theme="dark"] {
  --surface: #171A20;
  --text-main: #E7E9EE;
  --text-sub: #A6ADB8;
  --text-faint: #868D98;
  --rim: 1px solid rgba(255, 255, 255, .09);
  --rim-c: rgba(255, 255, 255, .09);
  --sh-out: 0 8px 22px rgba(0, 0, 0, .45);
  --sh-out-sm: 0 4px 12px rgba(0, 0, 0, .4);
  --bg-page: #0E0F12;
  --panel-hover: #23262E;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .10);
  --primary-soft-bg: #16294A;
  --tint-soft: rgba(43, 111, 228, .18);
  --tint-line: rgba(43, 111, 228, .35);
}
html[data-theme="dark"] { background: #0E0F12; }
[data-theme="dark"] body.group-page { background: #0E0F12; color: var(--text-main); }
[data-theme="dark"] header { background: var(--header-dark); border-bottom-color: var(--rim-c); }
[data-theme="dark"] .logo-mark { box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
[data-theme="dark"] .nav-search { background: #23262E; border-color: var(--rim-c); color: var(--text-sub); }
[data-theme="dark"] .nav-search:focus-within { background: #22304d; border-color: var(--primary); }
[data-theme="dark"] .nav-search input { color: var(--text-main); }
[data-theme="dark"] .dropdown { background: #171A20; box-shadow: 0 12px 32px rgba(0, 0, 0, .6); }
[data-theme="dark"] .dropdown::before { background: #171A20; }
[data-theme="dark"] .dropdown a { color: var(--text-main); }
[data-theme="dark"] .dropdown a:hover { background: #22304d; }
[data-theme="dark"] .dropdown a.on { background: #16294A; }
[data-theme="dark"] .panel, [data-theme="dark"] .grids .grid, [data-theme="dark"] .grids .gridsub { background: var(--surface); border-color: var(--rim-c); }
[data-theme="dark"] .card, [data-theme="dark"] .cardpic { background: var(--surface); border-color: var(--rim-c); }
[data-theme="dark"] .res-row:hover { background: #1b2330; }
[data-theme="dark"] .res-row .card-icon { background: transparent; border: none; box-shadow: none; }
[data-theme="dark"] .res-row + .res-row::before { display: none; }
[data-theme="dark"] .res-time { color: var(--text-faint); }
[data-theme="dark"] .res-tag { background: var(--primary-soft-bg); color: var(--primary); }
[data-theme="dark"] aside .lasest-update .panel-body ul li,
[data-theme="dark"] aside .recommend-article .media.media-number + .media.media-number { border-color: var(--rim-c); }
[data-theme="dark"] aside .lasest-update .panel-body ul li a,
[data-theme="dark"] aside .recommend-article .media-body a { color: var(--text-sub); }
[data-theme="dark"] .card .c-icon, [data-theme="dark"] .cardpic .c-icon { background: #22304d; border-color: var(--rim-c); box-shadow: none; }
[data-theme="dark"] .card .c-desc a, [data-theme="dark"] .cardpic .c-desc a { color: var(--text-main); }
[data-theme="dark"] .cardpic .card-screenshot { background: #0E0F12; }
[data-theme="dark"] .form-control { background: #0E0F12; color: var(--text-main); border-color: var(--line-strong); }
[data-theme="dark"] .btn-default { background: var(--surface); border-color: var(--line-strong); color: var(--text-main); }
[data-theme="dark"] .tag, [data-theme="dark"] .label { background: var(--primary-soft-bg); color: var(--primary); }
[data-theme="dark"] .site-footer { background: #141a22; }
/* 需求 R72 #7：悬浮栏暗色态（灰底，不再刺眼白块） */
[data-theme="dark"] #floatbtn > a, [data-theme="dark"] #floatbtn .floatbtn-item { background: var(--surface); color: var(--text-sub); }
[data-theme="dark"] #floatbtn > a.hover:hover, [data-theme="dark"] #floatbtn .floatbtn-item.hover:hover { background: #23262E; color: var(--text-main); }
/* 详情页 Bootstrap 警告块（VIP / 价格提示）暗模式下改深色底，避免大白块 */
[data-theme="dark"] .alert { background: #1a1d23; border-color: var(--rim-c); color: var(--text-sub); }
[data-theme="dark"] .alert .btn { color: #fff; }
[data-theme="dark"] .alert-danger { background: #2a1d1f; border-color: rgba(220,80,80,.4); color: #f0c0c0; }
[data-theme="dark"] .alert-success { background: #16261d; border-color: rgba(80,200,120,.35); color: #b8e0c8; }
[data-theme="dark"] .alert-warning, [data-theme="dark"] .alert-info { background: #1f2330; border-color: var(--rim-c); color: var(--text-sub); }
/* 暗色：评论/表单输入框、面包屑强制深色，去除白块（需求 #5） */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-control[disabled],
[data-theme="dark"] .form-control:disabled { background: #0E0F12 !important; color: var(--text-main) !important; border-color: var(--line-strong) !important; }
[data-theme="dark"] .form-control::placeholder { color: var(--text-faint) !important; }
[data-theme="dark"] .breadcrumb { background: transparent !important; }
[data-theme="dark"] .breadcrumb > li > a,
[data-theme="dark"] .breadcrumb a { color: var(--text-sub); }
[data-theme="dark"] .breadcrumb > .active { color: var(--primary); }
/* 暗色：.index-banner 描边改用规范 --rim，去掉偏白的边（需求 #5） */
[data-theme="dark"] .index-banner { border-color: var(--rim-c); }
/* 需求④：详情页评论列表去白底（暗色） */
[data-theme="dark"] #comment-container { color: var(--text-sub); }
[data-theme="dark"] #comment-container h3 { background: transparent; color: var(--text-main); border-bottom: 1px solid rgba(255,255,255,.05); }
[data-theme="dark"] .loadmore-line { border-top-color: rgba(255,255,255,.08); }
[data-theme="dark"] .loadmore-line .loadmore-tips { background-color: var(--surface); color: var(--text-faint); }
[data-theme="dark"] #comment-container #commentlist dl { background: transparent; }
[data-theme="dark"] #comment-container #commentlist dl dt,
[data-theme="dark"] #comment-container #commentlist dl dd { color: var(--text-sub); }
[data-theme="dark"] #comment-container #postcomment .form-control,
[data-theme="dark"] #comment-container #postcomment textarea.form-control { background: #0E0F12; border-color: var(--line-strong); color: var(--text-main); }
/* 需求③：详情页正文暗色文本确保浅色（与全局 token 一致；具体色值以红框参考为准） */
[data-theme="dark"] .article-content,
[data-theme="dark"] .article-content p,
[data-theme="dark"] .article-content li,
[data-theme="dark"] .article-content .media-content { color: var(--text-sub); }
[data-theme="dark"] .article-content .media-heading,
[data-theme="dark"] .article-content h1,
[data-theme="dark"] .article-content h2,
[data-theme="dark"] .article-content h3 { color: var(--text-main); }

/* ---------- 18. 详情页专用组件（原模板内联样式已迁移至此） ---------- */
/* 基础字号兜底：预览截图/详细介绍等所有正文统一 14px，与列表块(.res-row h3 14px)一致（需求 R50#4） */
.article-content { font-size: 13px; line-height: 1.65; color: var(--text-sub); }
.article-content .entry-box { display: flex; gap: 20px; padding: 6px 0 16px; margin-bottom: 16px; }
.article-content .media-left { flex-shrink: 0; }
.article-content .media-left .embed-responsive, .article-content .media-left [class*="ph-img"] { border-radius: 12px; overflow: hidden; }
.article-content .media-body { flex: 1; min-width: 0; }
.article-content .media-heading { font-size: 16px; font-weight: 600; color: var(--text-main); margin: 0 0 10px; line-height: 1.3; }
.article-content .media-content { color: var(--text-sub); font-size: 13px; line-height: 1.65; margin-bottom: 14px; }
.article-content .media-extend { margin-top: 6px; }
.article-content .article-image { margin: 18px 0; }
.article-content .article-image h2,
.article-content .article-text h2,
.article-content .intro-box h2 { font-size: 15px; font-weight: 700; color: var(--text-main); margin: 0 0 10px; display: flex; align-items: center; gap: 9px; }
.article-content .article-image h2::before,
.article-content .article-text h2::before,
.article-content .intro-box h2::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--primary); flex: 0 0 auto; }
.article-content .article-text, .article-content .intro-box { color: var(--text-sub); font-size: 13px; line-height: 1.65; }
.article-content .article-text p, .article-content .intro-box p { margin-bottom: 10px; }
.article-content .copyright-box { background: transparent; border: none; border-radius: 0; padding: 12px 0; color: var(--text-sub); font-size: 13px; margin: 16px 0; }
.article-content .copyright-box a { color: var(--primary); text-decoration: none; }
.article-content .feature-list { margin: 12px 0 0 18px; color: var(--text-sub); }
.article-content .feature-list li { margin-bottom: 8px; }
/* 截图画廊 */
.gallery-top { height: 360px; border-radius: 12px; overflow: hidden; background: #f3f4f6; }
.gallery-top .swiper-slide { background-size: contain; background-position: center; background-repeat: no-repeat; }
.gallery-thumbs { height: 100px; margin-top: 10px; }
.gallery-thumbs .swiper-slide { background-size: cover; background-position: center; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.gallery-thumbs .swiper-slide:hover { border-color: var(--primary); }
/* 详情页操作区：点赞 / 打赏 / 分享 统一居中一行（需求 #3） */
.article-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 8px; }
.article-actions .article-donate { margin: 0; }
.article-actions .social-share { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
/* 点赞 / 打赏：图标 + 文本均可见（需求 #1 修复：改用内联 SVG，避免依赖外部字体导致空白） */
.article-donate { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.article-donate .btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.4; white-space: nowrap; padding: 7px 18px; font-weight: 500; }
.article-donate .btn .ic { width: 17px; height: 17px; flex: none; fill: currentColor; }
.article-donate .btn .btn-txt { line-height: 1; }
.article-donate .btn-like { background: var(--primary-soft-bg); border: 1px solid transparent; color: var(--primary); }
.article-donate .btn-like:hover { background: #dbe8fc; }
.article-donate .btn-donate { background: #fff; border: 1px solid #cfe0f5; color: #33415C; }
.article-donate .btn-donate:hover { border-color: var(--primary); color: var(--primary); }
/* 打赏图标：深蓝灰圆 + 白色 ¥ */
.article-donate .btn-donate .ic .donate-ic-circle { fill: currentColor; }
.article-donate .btn-donate .ic .donate-ic-yen { fill: #fff; font-size: 13px; font-weight: 700; font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif; }
/* 截图画廊：大窗为主，对齐首页轮播观感（需求 #2：去掉左右切换，仅保留底部圆点） */
.gallery-top { position: relative; height: 380px; border: none; border-radius: 14px; overflow: hidden; background: #f3f4f6; }
.gallery-top .swiper-slide { background-size: contain; background-position: center; background-repeat: no-repeat; }
.gallery-thumbs { display: none; }
/* 左右切换箭头：需求 #2 已移除 DOM，此处强制隐藏以防残留 */
.gallery-top .swiper-button-prev, .gallery-top .swiper-button-next { display: none !important; }
/* 分页圆点：底部居中，当前页拉长胶囊（对齐首页 .carousel-indicators） */
.gallery-top .swiper-pagination { right: auto; left: 0; width: 100%; text-align: center; bottom: 14px; }
.gallery-top .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(46,107,230,.35); opacity: 1; transition: width .28s ease, background .28s ease; }
.gallery-top .swiper-pagination-bullet-active { background: var(--primary); width: 20px; border-radius: 999px; }
/* 暗色 */
[data-theme="dark"] .article-content .entry-box { border-bottom: none; }
[data-theme="dark"] .gallery-top { background: #0E0F12; }
[data-theme="dark"] .article-content .copyright-box { background: transparent; border-color: transparent; }
[data-theme="dark"] .article-donate .btn-like { background: var(--primary-soft-bg); color: var(--primary); }
[data-theme="dark"] .article-donate .btn-donate { background: #23262E; border-color: rgba(120,160,220,.4); color: #C7D3E6; }
[data-theme="dark"] .article-donate .btn-donate .ic .donate-ic-circle { fill: #4a5a78; }

/* ---------- 22. 首页分类切换（需求 #5：软件标题改为一级分类按钮，点击切换该分类最新更新） ---------- */
.home-cat-panel .panel-heading { padding: 12px 18px; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cat-tab {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--rim); background: var(--surface);
  color: var(--text-sub); font-size: 14px; font-weight: 500;
  padding: 7px 18px; border-radius: 999px; cursor: pointer;
  transition: all .18s ease; font-family: inherit; line-height: 1.4;
}
.cat-tab:hover { color: var(--primary); border-color: var(--primary); }
.cat-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.cat-panels { position: relative; }
.cat-panel { display: none; }
.cat-panel.active { display: block; animation: catFade .25s ease; }
@keyframes catFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cat-more-wrap { padding: 4px 4px 14px; text-align: center; }
.cat-more { display: inline-block; font-size: 13px; color: var(--text-sub); text-decoration: none; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--rim); transition: all .18s ease; }
.cat-more:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft-bg); }
/* 需求 #5：面板头部右侧「查看分类」链接（随激活分类切换跳转目标） */
.cat-head-more { margin-left: auto; flex-shrink: 0; font-size: 13px; color: var(--text-sub); text-decoration: none; white-space: nowrap; transition: color .18s ease; }
.cat-head-more:hover { color: var(--primary); }
/* 需求①：首页分类面板「查看分类」改为「查看全部」并移至面板底部 */
.cat-foot-more { display: block; text-align: center; padding: 12px 16px; font-size: 13px; color: var(--text-sub); text-decoration: none; transition: color .18s ease; }
.cat-foot-more:hover { color: var(--primary); }

/* ---------- 23. 一级页（频道）区块标题：对齐通用栏（蓝竖条 + 加粗，无横线） ----------
   需求 R61：红框参考样式 = 左蓝竖条 + 加粗深色标题（与「推荐软件」等通用栏一致）。
   common.css 的 `h3 > a:before` 蓝条误放在「更多」链接前，需 display:none 清除；
   蓝竖条改由本文件在标题文本前新增 ::before 实现（与 .zone-title / 详情页 h2 同款）。
   横线已由 border-bottom:none 去除。 */
/* 一级页频道块标题：仅 .panel-title（红框所指的真正块标题）黑字加粗 + 蓝竖条
   需求 R74 #1：此前裸 h3 选择器误伤「每条数据标题」，现严格限定 .panel-title；
   数据条目标题（.media-heading / .inner-list li）单独复位，绝不套用蓝条/加粗 */
.channel-list .row .col-xs-12 h3.panel-title {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--text-main) !important;
  display: flex;
  align-items: center;
  gap: 9px;
}
/* 蓝竖条：需求 R76 #4 用户要求移除（一级页块标题只保留黑字加粗，不要竖条） */
/* 块标题文字（频道名，如 Adobe）：覆盖 .main-content a 蓝色，改为黑字加粗 */
.channel-list .row .col-xs-12 h3.panel-title > a {
  color: var(--text-main) !important;
  font-weight: 700 !important;
}
/* 「更多」链接（<em><a>）：灰色、不加粗、13px、右对齐 */
.channel-list .row .col-xs-12 h3.panel-title em a,
.channel-list .row .col-xs-12 h3.panel-title .more {
  color: var(--text-sub) !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  margin-left: auto;
}
/* 清除 common.css 误放到标题链接前的蓝条 */
.channel-list .row .col-xs-12 h3.panel-title > a:before { display: none !important; }
/* 一级页数据条目标题：非块标题，去蓝条、不加粗、黑字（需求 R74 #1） */
.channel-list .row .col-xs-12 h4.media-heading { font-weight: 500; color: var(--text-main); }
/* 需求 R80 #1 / 本轮强化：一级页每条数据间的细灰分隔线彻底清除
   覆盖 common.css 及核心前端 CSS 所有可能来源（media 外层、相邻项、inner-list、各伪元素） */
.channel-list .row .media,
.channel-list .row .media + .media,
.channel-list .row .col-xs-12 .media,
.channel-list .row .media .media-left,
.channel-list .row .media .media-heading,
.channel-list .row .media .media-body,
.channel-list .row .media .media-body p,
.channel-list .row ul.inner-list li {
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}
.channel-list .row .media::before,
.channel-list .row .media::after,
.channel-list .row .media .media-heading::before,
.channel-list .row .media .media-heading::after,
.channel-list .row .media .media-body p::before,
.channel-list .row .media .media-body p::after,
.channel-list .row ul.inner-list li::before,
.channel-list .row ul.inner-list li::after {
  display: none !important;
  content: none !important;
  border: none !important;
}
.channel-list .row .col-xs-12 .inner-list li a { font-weight: 400; color: var(--text-main); }

/* ---------- 21. 手机端抽屉导航（需求 R60：图标+科技工坊 左 / 汉堡按钮 右 / 左滑面板） ---------- */
/* 桌面端默认隐藏抽屉与汉堡按钮 */
.nav-drawer-toggle { display: none; }
.nav-drawer, .nav-drawer-backdrop { display: none; }

/* 汉堡按钮（手机端由媒体查询开启显示） */
.nav-drawer-toggle {
  flex: none; width: 40px; height: 40px; padding: 0; border: none; background: transparent;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer;
}
.nav-drawer-toggle .bar { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: .2s ease; }

/* 左滑抽屉面板（仿 img2：白底、左滑 264px、竖向菜单） */
.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 84vw; z-index: 10000;
  background: var(--surface); color: var(--text-main);
  transform: translateX(-100%); transition: transform .28s ease;
  flex-direction: column; overflow-y: auto;
  /* 需求 R70 #2：关闭态不投影，避免 translateX(-100%) 后阴影向视口左侧溢出形成左缘阴影；仅展开时投影 */
  box-shadow: none;
}
.nav-drawer.open { transform: translateX(0); box-shadow: 10px 0 28px rgba(15, 23, 42, .22); }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--rim-c); }
.nav-drawer-head .logo { color: var(--text-main); gap: 9px; }
.nav-drawer-head .logo:hover { color: var(--text-main); }
.nav-drawer-close { border: none; background: transparent; font-size: 26px; line-height: 1; color: var(--text-sub); cursor: pointer; padding: 0 2px; }
.nav-drawer-close:hover { color: var(--text-main); }

.drawer-nav { padding: 6px 0; flex: 1; }
.drawer-nav > a, .drawer-item > summary {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px 18px; font-size: 14px; color: var(--text-main) !important; text-decoration: none;
  border: none; border-bottom: 1px solid var(--rim-c); background: transparent; cursor: pointer; list-style: none;
}
.drawer-nav > a:hover, .drawer-item > summary:hover { background: var(--primary-soft-bg); }
/* 彻底隐藏各浏览器原生的 disclosure 三角（避免与自定义 chevron 重叠显示成「错误箭头」/ 实心三角 ▼）。
   多重保险：list-style:none + list-style-type:none + appearance:none（去掉默认 markers 的触发前提），
   再对 webkit / 标准 ::marker 显式 display:none，并对 summary 自身 display:flex（非 list-item 时原生三角不渲染）。 */
.drawer-item > summary { list-style: none; list-style-type: none; -webkit-appearance: none; appearance: none; }
.drawer-item > summary::-webkit-details-marker { display: none !important; }
.drawer-item > summary::marker { display: none !important; }
/* 自定义 V 形 chevron 必须可见（需求 R75 #5：箭头改为细线 V 形），强制 display 兜底，避免被任何规则隐藏 */
.drawer-item .chev { width: 16px; height: 16px; flex: none; display: block !important; color: var(--text-sub); transition: transform .2s ease; }
.drawer-item[open] > summary .chev { transform: rotate(180deg); }
.drawer-sub { counter-reset: dsub; }
.drawer-sub a {
  counter-increment: dsub;
  display: flex; align-items: center;
  padding: 12px 18px 12px 40px; font-size: 14px; color: var(--text-sub);
  text-decoration: none; border-bottom: 1px solid var(--rim-c);
}
/* 二级分类前的序号徽标（匹配网页端 序号 样式：主色圆形 + 白字） */
.drawer-sub a::before {
  content: counter(dsub);
  flex: 0 0 auto; width: 18px; height: 18px; margin-right: 10px;
  border-radius: 50%; background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.drawer-sub a:hover { background: var(--primary-soft-bg); color: var(--primary); }

.drawer-search { padding: 14px 18px; border-top: 1px solid var(--rim-c); }
.drawer-search form { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--rim-c); border-radius: 999px; color: var(--text-sub); }
.drawer-search svg { flex: none; }
.drawer-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text-main); font-family: inherit; font-size: 14px; }

.drawer-account { display: flex; gap: 10px; padding: 16px 18px 22px; border-top: 1px solid var(--rim-c); }
/* 需求 R75 #5：抽屉底部三个按钮（QQ登录/登录/注册）收敛高度——改用固定 38px + flex 居中，
   去掉原先过松的 padding:10px 0，避免单行文字上下留白过大显得过高 */
.drawer-account a { flex: 1; text-align: center; height: 38px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 500; }
.drawer-account .da-qq { background: #12B7F5; color: #fff; }
.drawer-account .da-login { border: 1px solid var(--primary); color: var(--primary); }
.drawer-account .da-register { background: var(--primary); color: #fff; }

.nav-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 9999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s ease; }
.nav-drawer-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; }

[data-theme="dark"] .nav-drawer { background: #11151C; }
[data-theme="dark"] .nav-drawer-head .logo { color: #E6ECF5; }
[data-theme="dark"] .drawer-nav > a, .drawer-item > summary { color: #D7DEEA; }
[data-theme="dark"] .drawer-sub a { color: #A8B2C2; }

/* ---------- 20. 首页 / 侧栏扩展组件（对齐参考 首页.html） ---------- */
/* 轮播外框：圆角 + 描边 + 外阴影，包住现有 Bootstrap 轮播 */
.index-banner {
  border-radius: 16px;
  box-shadow: var(--sh-out);
  overflow: hidden;
  background: var(--surface);
  border: var(--rim);
  margin-bottom: 16px;
}
.index-banner .swiper-container.index-focus { margin: 0; }
.index-banner .carousel-focus { border-radius: 16px; overflow: hidden; }

/* 占位图块（正版软件四宫格图位等） */
.ph-box {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed rgba(46,107,230,.28);
  border-radius: inherit;
  background:
    repeating-linear-gradient(135deg, rgba(46,107,230,.035) 0 9px, transparent 9px 18px),
    linear-gradient(150deg, #ffffff 0%, #e9f2fe 100%);
  color: var(--text-faint); text-align: center; overflow: hidden;
}
.ph-box svg { width: 36px; height: 36px; fill: none; stroke: #a6b9d2; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ph-box b { font-size: 14px; font-weight: 600; color: var(--text-faint); letter-spacing: .4px; }
.ph-box em { font-size: 12px; font-style: normal; color: var(--text-faint); }

/* 区域标题 */
.zone-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; min-width: 0; }
.zone-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 700; color: var(--text-main); letter-spacing: .5px; flex-shrink: 0; }
.zone-title::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--primary); }
.zone-sub { font-size: 13px; color: var(--text-faint); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-more { margin: 0; margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 13px; color: var(--text-faint); text-decoration: none; transition: color .18s ease; }
.zone-more:hover { color: var(--primary); }

/* 正版软件 四宫格 */
.promo-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; min-width: 0; margin-bottom: 16px; }
.mini-tile { background: var(--surface); border: var(--rim); border-radius: 12px; padding: 12px 12px 14px; box-shadow: var(--sh-out); text-align: center; text-decoration: none; color: inherit; cursor: pointer; transition: .25s ease; min-width: 0; }
.mini-tile:hover { box-shadow: 0 6px 16px rgba(15,23,42,.10); transform: translateY(-2px); }
.mini-tile:active { box-shadow: var(--sh-in); }
.tile-thumb { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; background: var(--surface); border: 1px solid rgba(150,178,214,.55); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px; transition: box-shadow .22s ease; }
.mini-tile:hover .tile-thumb { box-shadow: 0 6px 16px rgba(15,23,42,.10); }
.mini-tile:active .tile-thumb { box-shadow: var(--sh-in-sm); }
.tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-thumb .ph-box { position: absolute; inset: 0; gap: 5px; border-width: 1px; border-style: solid; border-color: rgba(150,178,214,.45); background: linear-gradient(150deg,#eef4fd,#e3eefc); }
.tile-thumb .ph-box svg,
.tile-thumb .ph-box b,
.tile-thumb .ph-box em { display: none; }
/* 需求 R72 #10：正版软件标题/描述字号对齐下方「软件列表」（.res-row h3 14px/500、.res-desc 12.5px） */
.mini-tile h3 { font-size: 14px; font-weight: 500; color: var(--text-main); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-tile p { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 侧栏：关注我们 */
.follow-card { display: flex; align-items: center; gap: 16px; min-width: 0; }
.qr-box { position: relative; width: 92px; height: 92px; flex-shrink: 0; border-radius: 14px; background: #fff; padding: 0; border: 1.5px dashed rgba(46,107,230,.3); box-shadow: var(--sh-out-sm); display: flex; align-items: center; justify-content: center; }
.qr-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-faint); }
.qr-ph svg { width: 26px; height: 26px; fill: none; stroke: #a6b9d2; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qr-ph b { font-size: 10.5px; font-weight: 600; color: var(--text-faint); letter-spacing: .2px; }
.qr-ph em { font-size: 8px; font-style: normal; line-height: 1.15; letter-spacing: -.1px; color: var(--text-faint); white-space: nowrap; }
.follow-body { flex: 1; min-width: 0; }
.follow-tip { font-size: 12.5px; line-height: 1.5; color: var(--text-faint); margin-bottom: 9px; }
.follow-tip b { display: block; font-size: 14px; color: var(--text-main); margin-bottom: 2px; }
.follow-links { display: flex; flex-wrap: wrap; gap: 7px; }
.flink { padding: 5px 11px; border-radius: 999px; background: #f5f8fd; border: 1px solid #e6eef8; box-shadow: none; font-size: 12px; line-height: 1.2; color: #68798f; text-decoration: none; white-space: nowrap; transition: .18s ease; }
.flink:hover { color: var(--primary); background: #eef5ff; border-color: #cfe2f8; }
/* 关注我们：真实二维码（默认显示公众号，点击视频号切换） */
.qr-box .qr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; display: none; }
.qr-box .qr-img.is-show { display: block; }
.flink.is-active { color: var(--primary); background: #eef5ff; border-color: #cfe2f8; }

/* 侧栏：最新公告 */
.notice-list { display: flex; flex-direction: column; }
.notice-item { position: relative; display: flex; align-items: flex-start; gap: 9px; padding: 10px 0; text-decoration: none; color: inherit; }
.notice-item:first-child { padding-top: 0; }
.notice-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 7px; }
.notice-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--text-sub); }
.notice-item:hover .notice-text { color: var(--primary); }
.notice-date { font-size: 12px; color: var(--text-faint); flex-shrink: 0; margin-top: 2px; }

/* 真实图标替换空占位（需求 #7）：img 覆盖占位，加载失败时 onerror 移除，回退到 ::before 图标 */
.res-row .card-icon { overflow: visible; padding: 0; }
.res-row .card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* 热度「Xk」格式化（需求 #9）：数字由 JS 统一转 k */
.res-hot .hot-k { font-variant-numeric: tabular-nums; }

/* ---------- 21. 扩展组件暗色（对齐参考 首页.html 暗模式） ---------- */
[data-theme="dark"] .index-banner { background: #171A20; border-color: var(--rim-c); }
[data-theme="dark"] .mini-tile { background: #171A20; }
[data-theme="dark"] .tile-thumb { background: #171A20; border-color: var(--rim-c); }
[data-theme="dark"] .ph-box { background: linear-gradient(150deg, #171A20 0%, #1E222A 100%); border-color: var(--rim-c); }
[data-theme="dark"] .ph-box svg { stroke: #6B7280; }
[data-theme="dark"] .ph-box b, [data-theme="dark"] .ph-box em { color: #868D98; }
[data-theme="dark"] .flink { background: #23262E; border-color: var(--rim-c); color: #A6ADB8; }
[data-theme="dark"] .flink:hover { background: #24272F; }
[data-theme="dark"] .qr-box { background: #171A20; border-color: rgba(43,111,228,.45); }
[data-theme="dark"] .qr-ph svg { stroke: #6B7280; }
[data-theme="dark"] .qr-ph b, [data-theme="dark"] .qr-ph em { color: #868D98; }
/* 精选合集暗色 */
[data-theme="dark"] .coll-tile { background: #171A20; }
[data-theme="dark"] .coll-thumb { background: #171A20; }

/* ---------- 20.5 首页「最近更新」与「精选合集」区块（需求 R69 #6/#7） ---------- */
/* 最近更新 标题区：与 .zone-head 同源（主色竖条 + 加粗标题 + 灰色副标题） */
.recent-head { margin-bottom: 14px; }
/* 精选合集：3 列网格卡片（参考 首页.html：图 + 名称 + 标签/日期/热度） */
.coll-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.coll-tile { background: var(--surface); border: var(--rim); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.coll-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-out); border-color: var(--line-strong); }
.coll-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #eef4fd, #e3eefc); overflow: hidden; }
.coll-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.coll-thumb .ph-box { position: absolute; inset: 0; border: none; border-radius: 0; gap: 6px; }
.coll-body { padding: 10px 12px 12px; }
.coll-name { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-faint); }
.coll-tag { padding: 3px 9px; border-radius: 999px; background: var(--primary-soft-bg); color: var(--primary); white-space: nowrap; }
.coll-time { margin-left: auto; white-space: nowrap; }
.coll-hot { margin-left: auto; display: flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 600; }
.coll-hot svg { width: 13px; height: 13px; flex: none; }

/* ---------- 19. 响应式（置于文件末尾，确保覆盖上方所有基础规则） ----------
   注意：此前该段写在 .promo-tiles 等基础规则之前，同优先级下被源文件靠后的基础规则压掉，
   导致「手机端正版软件 2 列」等覆盖不生效。现移至末尾以保证所有移动端覆盖生效。 */
@media (max-width: 900px) {
  :root { --page-pad: 20px; }
  .col-md-9, .col-md-8 { padding-right: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 768px) {
  /* 手机端：隐藏桌面导航菜单 / 登录 / 主题切换，保留 logo + 搜索 + 汉堡按钮 */
  .nav-wrap { gap: 12px; flex-wrap: nowrap; }
  .nav-menu { display: none; }
  /* 需求 R66：搜索栏显示在顶部导航（logo 与 汉堡 之间），占满中间剩余空间 */
  .nav-right { margin-left: 0; flex: 1; min-width: 0; }
  .nav-right .login-group, .nav-right .theme-toggle-web { display: none; }
  .nav-right .nav-search { display: flex; flex: 1; width: auto; min-width: 0; padding: 8px 12px; }
  .nav-right .nav-search input { font-size: 13px; }
  /* 顶部已有搜索栏，抽屉内不再重复显示 */
  .nav-drawer .drawer-search { display: none; }
  .nav-drawer-toggle { display: inline-flex; }
  .nav-drawer { display: flex; }
  .nav-drawer-backdrop { display: block; }
  /* 需求 R70 #3：手机端与容器统一 16px 留白（≤900 设为 20px，此处对齐 .container 的 16px，避免浮栏/页头与内容错位） */
  :root { --page-pad: 20px; }
  /* 需求 R82 #1：手机端块贴边根因 = common.css @media(max-width:768px) 内 .main-content>.container{padding:0} 用更高特异性覆盖了本文件 .container 的 --page-pad 留白（特异性优先于加载顺序）。
     此处改用同等特异性选择器 .main-content>.container，且本文件后于 common.css 加载，故后置于 cascade 生效，恢复 20px 页面级左右间隙。 */
  .main-content > .container { padding-left: var(--page-pad); padding-right: var(--page-pad); }
  /* 需求 R81 #2：移动端清零 Bootstrap 栅格的行负 margin 与列内边距，避免与 .row 的 -15px 失衡造成整页横向溢出
     （溢出被 body overflow-x:hidden 裁切 → 表现为「所有块贴右缘、右侧被切、浮条被裁」）。
     外留白统一由 .container 的 --page-pad(20px) 提供，对齐参考 首页.html 手机端。 */
  .row { margin-left: 0; margin-right: 0; }
  [class*="col-"] { padding-left: 0; padding-right: 0; }

  /* 轮播图（需求 R75 #6）：手机端按宽度等比缩放、整张 banner 铺满显示，
     对齐参考 首页.html 的 cover 填充，不再用 contain 导致 banner 上下出现蓝条、看起来「没显示全」。
     比例用 900/320（对齐运营上传的标准 banner 尺寸「建议尺寸 900 × 320」），
     cover 保证无空白条、标准尺寸下零裁切 */
  .carousel-focus .item .carousel-img,
  .index-focus .item .carousel-img {
    height: auto;
    aspect-ratio: 900 / 320;
    background-size: cover;
    background-position: center;
    background-color: #dbe8fb;
  }
  /* 悬浮放大仅作用于 ::before（桌面一致），手机端无 hover 不影响；同步 cover 铺满 */
  .carousel-focus .item .carousel-img::before,
  .index-focus .item .carousel-img::before { background-size: cover; background-position: center; }
  /* 需求 R70 #3：手机端隐藏轮播左右切换箭头（触屏无需；箭头贴右缘易被判裁切，与参考图只保留圆点一致） */
  .carousel-control { display: none; }

  /* 正版软件：手机端 2 列（一行两列、共两行）；用 minmax(0,1fr) 防止卡片内容撑出视口造成横向溢出（grid blowout），相邻卡片边框自然形成中缝竖线 */
  .promo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* 需求 R79 #1：手机端正版软件/精选合集等块的标题与描述只显示一行，超出以 … 结尾（对齐桌面单行截断规则） */
  .mini-tile h3, .mini-tile p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 需求 R70 #3：防止 meta / 合集脚注 / 标题区因固定内容宽度超出列宽而向右溢出被 overflow-x:hidden 裁切 */
  .res-meta, .coll-foot, .coll-tag, .res-main { min-width: 0; }
  .coll-foot { flex-wrap: wrap; }
  .zone-head { flex-wrap: nowrap; }
  .zone-sub { display: none; }
  .zone-more { flex-shrink: 0; }

  /* 软件列表：手机端三行显示（图标 | 标题 / 描述 / 标签·时间·热度），标题与描述显示回来（需求 R69 #5） */
  .res-row { grid-template-columns: 56px minmax(0, 1fr); align-items: start; column-gap: 12px; padding: 14px 4px; }
  .res-row .card-icon { grid-column: 1; grid-row: 1 / span 3; width: 56px; height: 56px; }
  .res-main { grid-column: 2; min-width: 0; }
  .res-row h3 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .res-desc { display: block; -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
  .res-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; justify-content: flex-start; }
  /* 手机端显示分类标签（参考图：标签位于第三行左，时间·热度紧随其后） */
  .res-tag { display: inline-flex; }
  .res-time, .res-hot { justify-self: start; }
  /* 需求：手机端一级页每条数据描述只显示一行（覆盖 common.css 的 2 行 line-clamp） */
  .channel-list .row .media .media-body p {
    display: block;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    padding-right: 8px;
  }
  /* 精选合集：手机端 2 列（需求 R69 #7） */
  .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* 浮动按钮列：手机端仅保留「返回顶部」，避免右侧竖列过高遮挡内容 */
  #floatbtn > a:not(#back-to-top),
  #floatbtn .floatbtn-item { display: none !important; }
}