/* ==========================================================================
   站点样式表
   --------------------------------------------------------------------------
   模块划分：
     01. 主题变量        —— v14.12 起只保留浅色一套（已取消黑白切换）
     02. 基础重置        —— reset / 排版 / 滚动条
     03. 顶部导航栏      —— 滚动吸附 + 毛玻璃 + 扫光
     04. 公告栏          —— 金色底 + 流光文字
     05. 筛选区          —— 双组维度筛选
     06. 搜索栏          —— 顶栏搜索表单
     07. 工具栏          —— 标题 / 计数 / 视图切换
     08. 卡片视图        —— 网格卡片
     09. 列表视图        —— 表格式列表
     10. 标签体系        —— 引擎 / 分类 / 权限标签
     11. 按钮            —— 主按钮 / 描边 / 金色
     12. 弹窗层          —— 详情弹窗 / 下载提示
     13. 图片预览        —— 全屏预览 + 动态水印
     14. 浏览历史        —— 侧边抽屉
     15. 表单控件        —— 输入框 / 下拉
     16. 会员中心        —— 侧栏菜单 + 内容面板
     17. 动画关键帧      —— 弹跳 / 抖动 / 流光 / 波纹
     18. 响应式          —— 1200 / 860 / 768 / 560
     19. 工具类          —— 通用辅助
   ========================================================================== */


/* ==========================================================================
   01. 主题变量
   ========================================================================== */

:root {
  /* 品牌色 —— 金色系 */
  --gold:        #ffd300;
  --gold-deep:   #ffd700;
  --gold-dark:   #b47c00;
  --gold-soft:   #ffc107;
  --gold-warm:   #ffb000;
  --gold-text:   var(--gold);
  /* 金色系「文字版」令牌。原先这几个变量被引用了却从未定义过：
     --gold-text-soft  购买金币按钮文字 / 发布表单「封面」角标
     --gold-text-deep  筛选命中的分类标签 / 详情页「演示网站」链接
     --gold-text-warm  同上 hover
     未定义时颜色会退化成继承值，浅色主题下深色文字压在深色遮罩上几乎看不见。 */
  --gold-text-soft: #b47c00;
  --gold-text-deep: #8a5e00;
  --gold-text-warm: #c47f00;

  /* 弱背景（面板头 / 预览框 / LOGO 棋盘格底），原先同样只被引用未定义 */
  --bg-soft: #f5f7fb;

  /* 功能色 */
  --blue:        #4099ff;
  --blue-deep:   #2b88dd;
  --cyan:        #00a4ef;
  --red:         #d42845;
  --red-soft:    #ff6060;
  --orange:      #ff9500;

  /* 尺度 */
  --radius-sm:   7px;
  --radius:      10px;
  --radius-lg:   12px;
  --gap:         20px;
  --max-width:   1400px;

  /* 动效 */
  --ease:        cubic-bezier(0.2, 0, 0.2, 1);
  --dur:         0.24s;
  --dur-slow:    0.4s;
  --dur-fast:    0.15s;  /* v14.7：原先只被引用未定义（购买按钮的 transition），补上 */

  /* 层级 */
  --z-banner:    100;
  --z-drawer:    500;
  --z-popup:     1000;
  /* v16.16：图片放大层提到右侧客服浮窗（z-index:9990）之上 ——
     以前浮窗压住放大层的「上一张/下一张」箭头（站长截图反馈）。
     放大层自带全屏深色底，盖住浮窗正是预期行为 */
  --z-preview:   9999;
  --z-toast:     1200;
}

/* ---- 单主题（浅色） ----
   v14.12：全站取消「明 / 暗」黑白主题切换，只保留浅色一套配色令牌，
   原先的 [data-theme="dark"] 变量块整体移除。
   这里同时挂到 :root —— 即使某个页面忘了写 data-theme 属性，
   也能拿到完整的浅色令牌，不会出现「变量未定义 → 文字/底色丢失」。 */
:root,
[data-theme="light"] {
  --bg:            #f4f7fc;
  --bg-page:       #eef2f9;
  --bg-panel:      #ffffff;
  --bg-panel-solid:#ffffff;
  --bg-card:       #ffffff;
  --bg-elevated:   #f7f9fd;
  --bg-input:      #f2f3f5;

  --text:          #1f2430;
  --text-sub:      #606266;
  --text-mute:     #9aa2b4;

  --border:        #dde2ec;
  --border-strong: rgba(180, 124, 0, 0.35);

  --shadow-card:   0 2px 12px rgba(31, 36, 48, 0.08);
  --shadow-hover:  0 10px 28px rgba(31, 36, 48, 0.16);
  --shadow-gold:   0 0 12px rgba(255, 200, 0, 0.45);

  --banner-bg:     rgba(255, 255, 255, 0.94);
  --banner-shadow: 0 2px 14px rgba(31, 36, 48, 0.1);
  --notice-bg:     rgba(255, 215, 0, 0.14);
  --notice-border: rgba(180, 124, 0, 0.25);

  --gold-text:     #a61b29; /* 亮色下金色文字加深为琥珀色，白底可读 */

  /* v14.7：补齐只被引用未定义的令牌，见暗色主题块同名注释 */
  --card:          var(--bg-card);
  --text-main:     var(--text);
}


/* ==========================================================================
   02. 基础重置
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB",
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-slow) ease, color var(--dur-slow) ease;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: bold; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold-text); }

img { max-width: 100%; display: block; border: 0; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

/* 滚动条：加粗加大，方便点按和拖动 */
html {
  scrollbar-width: auto;                                 /* Firefox */
  scrollbar-color: var(--gold) rgba(255, 255, 255, .07);
}

::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .06);
  border-radius: 9px;
}
::-webkit-scrollbar-thumb {
  min-height: 70px;
  border-radius: 9px;
  border: 3px solid transparent;      /* 留出空隙，滑块更精致 */
  background-clip: padding-box;
  background-color: var(--gold-text);
  background-image: linear-gradient(180deg, var(--gold-warm, #f7c948), var(--gold-deep, #c98a12));
}
::-webkit-scrollbar-thumb:hover {
  background-image: linear-gradient(180deg, #ffe08a, var(--gold-warm, #f7c948));
}
::-webkit-scrollbar-thumb:active {
  background-image: linear-gradient(180deg, var(--gold), var(--gold-deep, #c98a12));
}
::-webkit-scrollbar-corner { background: transparent; }


/* ==========================================================================
   03. 顶部导航栏
   ========================================================================== */

.top-banner {
  position: sticky;
  top: 0;
  z-index: var(--z-banner);
  width: 100%;
  min-height: 62px;
  padding: 10px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 16px;
  background: var(--bg-panel-solid);
  border-bottom: 1px solid var(--border);
  transition: all var(--dur-slow) ease;
  overflow: hidden;
}

/* 顶部扫光条 —— 细金线横向扫过 */
.top-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold) 45%,
    #fff8c4 50%,
    var(--gold) 55%,
    transparent 100%);
  animation: streamLight 4.5s linear infinite;
  pointer-events: none;
}

/* 滚动后吸附态 —— 毛玻璃 */
.top-banner.scroll-solid {
  background: var(--banner-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--banner-shadow);
}

.banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.banner-left img { height: 38px; width: auto; }

/* 副标题 / 标语（后台「网站设置」可改，留空则不占位） */
.banner-slogan {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.banner-slogan:empty { display: none; }

/* 图片 LOGO（后台「网站设置」上传后显示，未设置则用文字 LOGO） */
#siteLogoImg { max-height: 40px; max-width: 240px; object-fit: contain; }

/* 纯文字 Logo（无图片时使用） */
.banner-logo-text {
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 1px;
  background: linear-gradient(92deg, var(--gold-dark), var(--gold), var(--gold-warm));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* 顶栏中部搜索（宽屏显示） */
/* （顶栏搜索已移入内容区工具栏，原 .banner-search 样式移除） */

.nav-user-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-user-link {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  color: var(--gold-text);
  font-size: 13px;
  white-space: nowrap;
  transition: all var(--dur) ease;
}

.nav-user-link:hover {
  background: var(--gold);
  color: #fff;
  box-shadow: var(--shadow-gold);
}

/* 已登录时的用户胶囊 */
.nav-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  font-size: 13px;
  transition: all var(--dur) ease;
}

.nav-user-chip:hover { box-shadow: var(--shadow-gold); }

.nav-user-chip .avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  flex-shrink: 0;
}

.nav-user-chip .uname { color: var(--text); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 移动端菜单按钮 */
.nav-menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}


/* ==========================================================================
   04. 公告栏
   ========================================================================== */

.wrap-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 40px;
}

.notice-bar {
  margin: 16px 0;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  overflow: hidden;
}

.notice-bar .notice-icon {
  flex-shrink: 0;
  color: var(--gold-text);
  font-weight: bold;
}

.notice-bar .notice-label {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 5px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.notice-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.6;
  color: var(--text-sub);
}

.notice-text b { color: var(--gold-text); }

/* 公告文字：不再做流光动画（v15.4 去掉，最典型的模板痕迹）。
   类名保留，兼容老脚本与缓存页面。 */
.shine-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: inherit;
  animation: none;
}

/* 公告区容器 —— 多条公告时由脚本定时切换并淡入淡出 */
.notice-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.notice-marquee .notice-text {
  transition: opacity 0.26s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* v16.41：公告手动切换 —— 左右箭头 + 圆点指示器（多条公告时出现） */
.notice-stage {
  flex: 1;
  min-width: 0;
  transition: opacity 0.26s ease;
}
.notice-stage .notice-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v16.43：公告切换去掉左右箭头（站长嫌难看）—— 只留圆点指示器（可点圆点跳转）；
   箭头样式保留为隐藏兼容，老缓存页面不报错。 */
.notice-nav { display: none; }
.notice-dots {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}
.notice-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--border-strong);
  cursor: pointer;
  transition: background var(--dur) ease, transform var(--dur) ease;
}
.notice-dot:hover { background: var(--text-sub); }
.notice-dot.on { background: var(--gold); transform: scale(1.25); }


/* ==========================================================================
   05. 筛选区
   ========================================================================== */

.filter-wrap {
  margin: 20px 0;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.filter-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.filter-row + .filter-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.filter-label {
  flex-shrink: 0;
  min-width: 74px;
  padding-top: 7px;
  font-size: 13px;
  font-weight: bold;
  color: var(--gold-text);
  white-space: nowrap;
}

.filter-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

.filter-btn {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  transition: all var(--dur) ease;
}

.filter-btn:hover {
  transform: scale(1.04);
  border-color: var(--gold-text);
}

[data-theme="light"] .filter-btn:hover { box-shadow: 0 0 10px rgba(64, 153, 255, 0.4); }

.filter-btn.active {
  background: var(--gold) !important;
  color: #fff !important;
  border-color: var(--gold) !important;
  font-weight: bold;
  box-shadow: var(--shadow-gold);
}

/* 折叠更多筛选 */
.filter-more-btn {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--gold-text);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--dur) ease;
}

.filter-more-btn:hover { background: var(--notice-bg); }


/* ==========================================================================
   06. 搜索栏
   ========================================================================== */

.search-bar-wrap {
  display: flex;
  gap: 0;
  width: 100%;
}

/* 工具栏内搜索（原顶栏搜索移入「全部资源」标题栏，全端统一显示） */
.tool-bar .tb-search {
  flex: 1 1 240px;
  max-width: 420px;
  margin-left: auto;
}

.top-search-input {
  flex: 1;
  min-width: 0;
  padding: 10px 15px;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--bg-input);
  color: var(--text);
  outline: none;
  transition: border-color var(--dur) ease;
}

.top-search-input:focus { border-color: var(--gold-text); }

.top-search-input::placeholder { color: var(--text-mute); }

.top-search-btn {
  padding: 10px 20px;
  border: 1px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--gold);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur) ease;
}

.top-search-btn:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-gold);
}


/* ==========================================================================
   07. 工具栏
   ========================================================================== */

.main-container { margin-top: 22px; }

.left-content { width: 100%; }

.tool-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.page-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.page-title-text {
  font-size: 21px;
  font-weight: bold;
  color: var(--text);
  position: relative;
  padding-left: 13px;
  white-space: nowrap;
}

/* 标题左侧金色竖条 */
.page-title-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 17px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-warm));
}

.count-tip {
  font-size: 13px;
  color: var(--text-mute);
  white-space: nowrap;
}

.count-tip b { color: var(--gold-text); }

/* 站长QQ —— 流光渐变文字（参考 bbk.cq52.cn 风格，个性醒目） */
@keyframes textShine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.qq-shine {
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  background: linear-gradient(90deg, #ffd300, #ff9500, #4099ff, #ffd300);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShine 4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .qq-shine { animation: none; color: var(--gold-text); background: none; }
}

.view-switch-group { display: flex; gap: 10px; }

.view-btn {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-sub);
  cursor: pointer;
  transition: all var(--dur) ease;
}

.view-btn:hover { border-color: var(--gold-text); color: var(--gold-text); }

.view-btn.active {
  background: var(--gold);
  border-color: var(--gold-text);
  color: #fff;
}


/* ==========================================================================
   08. 卡片视图
   ========================================================================== */

.card-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: var(--gap);
}

.card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease,
              border-color 0.3s ease;
}

.card-item:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: var(--border-strong);
}

[data-theme="light"] .card-item:hover { box-shadow: var(--shadow-hover); }

.card-img-box {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
  position: relative;
  cursor: pointer;   /* 点击缩略图进入详情页 */
}

.card-img-box img {
  width: 100%;
  height: 100%;
  /* v17.16：16:10 cover 铺满 —— 容器统一比例 + 居中裁切，对齐参考站整齐观感
     （v16.18 的 contain 让扁图上下留白、卡片显松散，站长确认改回裁切） */
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s var(--ease);
}

.card-item:hover .card-img-box img { transform: none; }   /* v16.18：contain 后缩放会重新裁边，去掉 */

/* 图片角标 */
.card-img-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: bold;
  background: var(--gold);
  color: #fff;
}

.card-title {
  margin-bottom: 11px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  min-height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-title a { transition: color var(--dur) ease; }
.card-title a:hover { color: var(--gold-text); }

.card-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 13px;
  min-height: 26px;
}

.card-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
  color: var(--text-mute);
}


/* ==========================================================================
   09. 列表视图
   ========================================================================== */

.table-view {
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  overflow: hidden;
}

.table-row {
  display: grid;
  /* v16.15：一行式（站长钦定，参考老站 90gj 表格）—— 标题单行拉通占最大宽，
     右侧三列竖向对齐：标签列（性质+引擎，固定宽）| 价格胶囊列 | 星标列。
     列宽全部固定 → 每行每一列的起点完全一致，绝不参差；标题超长才出省略号 */
  grid-template-columns: 88px minmax(0, 1fr) 190px 124px 34px;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) ease;
}
/* 操作列内容不反向撑宽列（价签比普通按钮宽几px也会导致列位移） */
.table-row .row-fav {
  grid-column: 5;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.table-row:last-child { border-bottom: none; }

.table-row:hover { background: var(--notice-bg); }

.table-row .thumb {
  grid-column: 1;
  grid-row: 1;
  width: 88px;
  height: 62px;
  border-radius: 6px;
  /* v16.18：contain 完整显示，不裁切 */
  object-fit: contain;
  background: var(--bg-elevated);
  cursor: pointer;   /* 点击缩略图进入详情页 */
}

.table-row .name-link {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  font-weight: bold;
  /* v16.81：列表视图的标题也完整显示（原来是单行 + 省略号，长标题同样被砍）。
     整段换行铺开，行高跟着内容走。 */
  overflow: visible;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
  align-self: center;
  transition: color var(--dur) ease;
}

.table-row .name-link:hover { color: var(--gold-text); }

/* v16.15：标签回到独立固定列（性质+引擎竖向对齐成一列，像老站的「引擎」栏），
   列内左对齐 —— 每行第一个标签起点完全一致；超宽才内部裁剪，绝不换行 */
.table-row .row-tags {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  overflow: hidden;
  max-width: 100%;
}

.table-row .price-cta {
  grid-column: 4;
  grid-row: 1;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 5px 12px;
}
.table-row .price-cta b { font-size: 14px; }

/* v16.5：置顶 / 站长推荐 徽章 —— 显示在标题文字前面，红色小胶囊 */
.pin-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  vertical-align: 1px;
  white-space: nowrap;
}
/* v17.44：推荐 / NEW 两枚角标 —— 与「置顶」同尺寸同排法，只换颜色区分含义。
   置顶用品牌金（--gold，未改），推荐用蓝（人工运营位），NEW 用绿（新鲜度自动标）。 */
.pin-badge--rec { background: #2f6fd0; }
.pin-badge--new { background: #1f9e52; }

/* ==========================================================================
   10. 标签体系
   ========================================================================== */

/* 引擎标签（固定宽度，整齐对齐） */
.engine-tag {
  display: inline-block;
  width: 100px;
  box-sizing: border-box;
  text-align: center;
  padding: 3px 4px;
  border-radius: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  background: rgba(64, 153, 255, 0.16);
  color: var(--blue);
  border: 1px solid rgba(64, 153, 255, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 版本性质标签（固定宽度，整齐对齐） */
.engine-tag1 {
  display: inline-block;
  width: 100px;
  box-sizing: border-box;
  text-align: center;
  padding: 3px 4px;
  border-radius: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  background: rgba(166, 27, 41, 0.16);
  color: var(--gold-text, var(--gold));
  border: 1px solid rgba(166, 27, 41, 0.35);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 分类标签 */
.cate-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  background: var(--bg-elevated);
  color: var(--text-sub);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* 当前筛选命中的分类标签 —— 高亮，让用户立刻看清为什么这条被筛出来 */
.cate-tag.is-match {
  background: rgba(166, 27, 41, 0.16);
  color: var(--gold-text-deep);
  border-color: var(--gold-text);
  font-weight: 700;
}

/* 分类标签超过 3 个时的折叠提示 */
.cate-tag-more {
  cursor: help;
  opacity: 0.75;
}

/* 权限标签（下载按钮） */
.perm-tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: var(--bg-elevated);
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: 0.22s ease all;
}

.perm-tag:hover { transform: scale(1.06); }

.perm-free { background: #2e9e5b; }
.perm-vip  { background: var(--blue-deep); }
.perm-svip { background: var(--red); }
/* 统一下载按钮：金色（参照参考站的简洁风格），黑字保证对比度 */
.perm-dl   { background: var(--gold); color: #fff; }

/* 列表行内按钮更紧凑：随内容自适应宽度，不再撑满整列 */
.table-row .perm-tag {
  padding: 5px 12px;
  font-size: 12px;
}
/* v16.2：价签统一宽度、文字居中 —— 「98 元」和「200 元」占一样宽的格子，
   星标列与价签列的起点不再随价格位数漂移 */
.table-row .perm-tag--price {
  min-width: 76px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* v16.2：操作列撑满固定轨道、内容靠右 ——
   配合下方价签固定宽度，星标一列、价签一列逐行完全对齐 */
.table-row .row-fav {
  justify-self: stretch;
}


/* ==========================================================================
   11. 按钮
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 12px 26px;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  transition: 0.25s ease;
}

.btn:hover { transform: translateY(-1px); }

/* 按钮内的 SVG 图标（替代 emoji，图标定义见 app.js 顶部 ACT_ICON） */
.btn-ico {
  display: inline-flex;
  align-items: center;
  vertical-align: -3px;
  margin-right: 6px;
}
.btn-ico svg { width: 16px; height: 16px; }

.btn:active { transform: translateY(0) scale(0.99); }

.btn-gold {
  background: var(--gold);
  color: #fff;
  font-weight: bold;
}

.btn-gold:hover { box-shadow: var(--shadow-gold); }

.btn-danger {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #fff;
  font-weight: 600;
}

.btn-danger:hover { box-shadow: 0 4px 16px rgba(231, 76, 60, .4); }

/* 后台可点击的统计卡片（带 data-goto 跳转对应面板） */
.stat-card.stat-goto { cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); }
.stat-card.stat-goto:hover { transform: translateY(-2px); border-color: var(--gold-text); box-shadow: var(--shadow-gold); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-outline:hover { border-color: var(--gold-text); color: var(--gold-text); }

.btn-sm { padding: 8px 16px; font-size: 13px; }

.btn-block { display: block; width: 100%; }

.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* 点击波纹 */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: rippleAnim 0.62s linear;
  pointer-events: none;
}


/* ==========================================================================
   12. 弹窗层
   ========================================================================== */

.pop-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-popup);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.pop-layer.show { display: flex; }

.pop-content {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 30px 34px 26px;
  border-radius: 16px;
  background: var(--bg-panel-solid);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  animation: popBounce 0.42s var(--ease);
  overscroll-behavior: contain;
}

.pop-content h1,
.pop-content h3 {
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 1.4;
  color: var(--gold-text, var(--gold));
  text-align: center;
}

.pop-content p { margin: 0 0 12px; color: var(--text-sub); }

/* 详情标题：资源站标题普遍很长，原来 24px 纯金居中，一行放不下就折成
   两行金色大字，既刺眼又把弹窗顶部撑得很重。改为左对齐 + 金色竖条 +
   正文字色，字号收一档，长标题折行也整齐。 */
#popBox > h1 {
  position: relative;
  margin: 0 0 20px;
  padding-left: 15px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .2px;
  text-align: left;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
}

#popBox > h1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd75e, #eaa800);
}

/* 版本详情弹窗（首页 #popBox）：比通用弹窗更宽，长介绍与截图展示更舒展 */
#popBox {
  max-width: 1080px;
  padding: 34px 42px 30px;
}

/* 详情介绍区：不再单独内滚，整个弹窗统一滚动 */
.pop-detail-html {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-sub);
  font-size: 15.5px;
  line-height: 1.9;
  word-break: break-word;
}

.pop-detail-html img { display: block; width: 100%; height: auto; margin: 14px 0; border-radius: 8px; }

/* 弹窗内小图（详情图集） */
.pop-detail-html .detail-shot {
  width: 100%;
  margin: 10px 0;
  border-radius: 8px;
  cursor: zoom-in;
  border: 1px solid var(--border);
}

/* ==========================================================================
   详情弹窗：自动附加的「版本介绍 / 免责声明 / 底部固定文字」（v13）
   参考同类资源站的分区写法 —— 左侧深色标题片 + 向右延伸的红色虚线。
   这两段由 app.js 的 detail.contentHtml() 拼在每个版本详情的最下方，
   文案在后台「网站设置 → 详情页附加声明」统一维护。
   ========================================================================== */

/* 分节 = 一张卡片（v19 · 参考 82pc.com：白底 + 浅边框 + 圆角 + 内边距） */
.dp-sec {
  margin-top: 16px;
  padding: 20px 22px 22px;
  background: var(--bg-panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.dp-sec:first-child { margin-top: 6px; }

/* 分区标题行：蓝色竖条 + 加粗标题 + 下方一条细分隔线
   （原来是深色渐变小方块 + 一条红色虚线，像广告标签，已废弃） */
.dp-sec-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.dp-sec-t {
  flex: 0 0 auto;
  position: relative;
  padding-left: 13px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.4;
  color: var(--text);
  white-space: nowrap;
}
.dp-sec-t::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--gold-text);
}

/* 正文区（含版本截图大图堆） */
.dp-body {
  color: var(--text-sub);
  font-size: 15.5px;
  line-height: 1.92;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.dp-body img { display: block; width: 100%; height: auto; margin: 14px 0; border-radius: 8px; }
/* v16.33：详情正文防溢出 —— 后台粘贴的内容常带 text-wrap-mode:nowrap /
   white-space-collapse:preserve 之类的内联样式，会把整段文字撑出容器。
   这里强制恢复折行（内联样式没带 !important 的都会被覆盖），
   保证正文在任何宽度下都正常换行不跑出容器。 */
.dp-body div, .dp-body p, .dp-body li, .dp-body span, .dp-body b, .dp-body font {
  white-space: normal !important;
  text-wrap-mode: wrap !important;
  text-wrap: wrap !important;
  overflow-wrap: anywhere;
}
.dp-body table { max-width: 100%; table-layout: fixed; }

/* 声明区正文 */
.dp-notice {
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--bg-elevated, rgba(255, 255, 255, .03));
  border: 1px solid var(--border);
  color: var(--text-sub);
  font-size: 13.5px;
  line-height: 1.95;
  word-break: break-word;
}
.dp-notice > :first-child { margin-top: 0; }
.dp-notice > :last-child  { margin-bottom: 0; }
.dp-notice p { margin: 0 0 10px; }
.dp-notice b { color: var(--text); }
.dp-notice h4 {
  margin: 18px 0 10px;
  padding-left: 9px;
  border-left: 3px solid var(--gold, #f0b90b);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.dp-notice ol { margin: 0; padding-left: 22px; }
.dp-notice li { margin-bottom: 8px; }
.dp-notice li::marker { color: var(--gold, #f0b90b); font-weight: 700; }

/* 顶部站点声明（v15：从底部搬到版本介绍上方）
   承载：演示站防骗 + 来源说明 + 侵权处理 —— 是用户在版本详情里最先要看到的内容。
   v14.10：弃用「站点声明」标题；三排文字改成「编号 + 正文」的等高列表 ——
   编号列固定 18px、行间虚线分隔、正文两端对齐，左边缘整齐，不再一行长一行短。 */
.dp-top-notice {
  counter-reset: dpnote;
  padding: 4px 16px;
  border-radius: 10px;
  /* v15.4：原来是金渐变底 + 金色边框 + 金色圆点，三处金色堆一起就是模板味，压成中性 */
  background: var(--bg-soft, #f5f7fb);
  border: 1px solid var(--border, #e5e7eb);
  border-left: 3px solid var(--border-strong, #d1d5db);
  color: var(--text-sub);
  /* 12.5px 是「三排各自收成单行」的临界值：再大第一排（站长把站点名堆了关键词）
     就会折断成两行、只剩两个字吊在第二行，看着就散了。 */
  font-size: 12.5px;
  word-break: break-word;
}
.dp-top-notice > p {
  counter-increment: dpnote;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 10px 0;
  line-height: 1.8;
  /* 两端对齐：换行的那几行左右都顶到边，三排看起来一样宽 */
  text-align: justify;
}
/* 行间虚线分隔，把「三句话」变成「三条并列说明」 */
.dp-top-notice > p + p { border-top: 1px solid var(--border, #e5e7eb); }
/* 编号胶囊：flex 固定宽度，所以三排正文的左边缘永远在同一条竖线上 */
.dp-top-notice > p::before {
  content: counter(dpnote);
  flex: 0 0 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--border, #e5e7eb);
  color: var(--text-sub, #4b5563);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.dp-top-notice > :first-child { margin-top: 0; }
.dp-top-notice > :last-child  { margin-bottom: 0; }
/* 站长的自定义声明若写成列表，也保持同一套缩进 */
.dp-top-notice > ul,
.dp-top-notice > ol { margin: 10px 0; padding-left: 24px; }
.dp-top-notice b { color: var(--text); }
.dp-top-notice > p b:first-child { color: var(--gold, #f0b90b); font-weight: 800; }

/* 标题已去掉，外层分区留白收紧，不让金色声明块显得被套了两层 */
.dp-sec--top-notice { padding: 14px 16px 16px; }

@media (max-width: 600px) {
  .dp-top-notice { padding: 2px 12px; font-size: 12px; }
  .dp-top-notice > p { padding: 9px 0; gap: 8px; }
  .dp-sec--top-notice { padding: 12px 12px 14px; }
}

/* 底部固定文字：v15 起已搬到顶部，此处保留兼容旧 CSS 的样式以防个别改造遗留 */
.dp-footer-fixed {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px dashed var(--border-strong, var(--border));
  background: var(--bg-panel-solid, rgba(0, 0, 0, .02));
  /* 用 text-sub 而非 text-mute：亮色主题下 mute 是 #9aa2b4，压在白底上几乎读不出来 */
  color: var(--text-sub, var(--text-mute));
  font-size: 12.5px;
  line-height: 1.9;
  text-align: center;
}
.dp-footer-fixed p { margin: 0 0 6px; }
.dp-footer-fixed p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .dp-sec-t { padding: 4px 11px; font-size: 12.5px; letter-spacing: 1px; }
  .dp-notice { padding: 13px 14px; }
}

/* 警告图标 */
.warn-alert-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  animation: popBounce 0.5s var(--ease);
}

/* 金色提示条 */
.pop-gold-tip {
  margin: 14px 0;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  color: var(--gold-text, var(--gold));
  font-size: 13px;
  text-align: center;
}

.pop-btn-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* v16.43：详情弹窗操作条吸底 —— 抬头吸顶 + 按钮吸底，
   长详情滚到一半也能直接「复制链接 / 收藏 / 关闭」，不用滚回底部。
   （仅 #popBox 详情弹窗启用；下载提示等小弹窗保持原样） */
#popBox .pop-btn-group {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: 18px -34px -26px;
  padding: 12px 34px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 78%, transparent);
  border-radius: 0 0 16px 16px;
}
@media (max-width: 768px) {
  #popBox .pop-btn-group { margin: 18px -16px -20px; padding-left: 16px; padding-right: 16px; }
}

/* 弹窗外关闭按钮 */
.pop-outside-close {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--dur) ease;
}

.pop-outside-close:hover {
  background: var(--gold);
  color: #fff;
  transform: rotate(90deg);
}

/* 弹窗内标题栏 */
/* ==========================================================================
   缩略图封面卡（v15 重做）
   --------------------------------------------------------------------------
   旧版只是一张裸 img：240×160 圆角、1px 灰边、撑在标题下面。
   现在做成「hero 横幅封面」：撑满整行（不再留白）、金色描边 + 投影 +
   悬浮光效 + 左上角"封面 / COVER"金色标签 + 右下角"点击查看大图"提示。
   ========================================================================== */
.dp-cover {
  position: relative;
  display: block;
  width: 100%;
  margin: 4px 0 22px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel-solid, rgba(255, 255, 255, .02));
  border: 1px solid rgba(240, 185, 11, .38);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(240, 185, 11, .08) inset;
  cursor: zoom-in;
  transition:
    box-shadow .25s ease,
    transform .25s ease,
    border-color .25s ease;
}
.dp-cover:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 185, 11, .7);
  box-shadow:
    0 12px 28px rgba(240, 185, 11, .18),
    0 0 0 1px rgba(240, 185, 11, .14) inset;
}

/* 左上角封面标签：金色胶囊 + 双语 */
.dp-cover-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0b90b, #d49a0a);
  color: #1a1a1a;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  pointer-events: none;
  z-index: 2;
  user-select: none;
}
.dp-cover-tag svg { display: block; }
.dp-cover-tag-en {
  font-size: 10px;
  letter-spacing: 1.5px;
  opacity: .8;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid rgba(0, 0, 0, .25);
}

/* 图片本体：固定 16:9 比例，撑满整行；object-fit: cover 统一裁切 */
.dp-cover-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-panel, rgba(0, 0, 0, .08));
}

/* 右下角提示条：玻璃质感 */
.dp-cover-tip {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11.5px;
  letter-spacing: .5px;
  pointer-events: none;
  z-index: 2;
  user-select: none;
  border: 1px solid rgba(255, 255, 255, .12);
}
.dp-cover-tip svg { display: block; opacity: .9; }

/* 缩略图顶部到底部的暗渐变：让"封面 COVER"标签读起来更醒目 */
.dp-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 28%, transparent 70%, rgba(0, 0, 0, .18) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 缩略图悬浮：标签和提示条轻微放大 */
.dp-cover:hover .dp-cover-tag  { transform: translateY(-1px); }
.dp-cover:hover .dp-cover-tip  { transform: translateY(-1px); }
.dp-cover-tag,
.dp-cover-tip { transition: transform .25s ease; }

/* 无图占位态：去金色描边、改中性灰 */
.dp-cover.is-empty {
  border-color: var(--border);
  box-shadow: none;
  cursor: default;
}
.dp-cover.is-empty:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}
.dp-cover.is-empty .dp-cover-tag { background: var(--text-mute); color: #fff; }
.dp-cover.is-empty .dp-cover-tip { display: none; }

@media (max-width: 480px) {
  .dp-cover { width: 100%; border-radius: 10px; }
  .dp-cover-tag-en { display: none; }
  .dp-cover-tag { padding: 4px 9px; font-size: 10.5px; }
  .dp-cover-img { aspect-ratio: 4 / 3; }   /* 小屏更接近正方形 */
}

/* 弹窗元信息表（v14 重整）：顶部快捷操作 + 统一信息网格，整齐克制不花乱 */
.pop-meta-list {
  margin-bottom: 18px;
}

/* 信息面板：一整块卡片，内部用 1px 分隔线切成规整网格 */
.meta-panel {
  padding: 14px 16px 16px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.meta-panel-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  min-height: 22px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--text-sub);
}

.meta-panel-h i {
  flex-shrink: 0;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--gold);
}

/* 下载权限：状态徽章（原先是网格里的一格，属性与状态混在一起看不出重点） */
.meta-badge {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  color: #2ecc71;
  background: rgba(46, 204, 113, .13);
  border: 1px solid rgba(46, 204, 113, .38);
}
.meta-badge--vip       { color: #4aa3ff; background: rgba(74, 163, 255, .13); border-color: rgba(74, 163, 255, .38); }
.meta-badge--svip      { color: #b06bff; background: rgba(176, 107, 255, .15); border-color: rgba(176, 107, 255, .4); }
.meta-badge--coin      { color: #ffdf4d; background: rgba(240, 185, 11, .14); border-color: rgba(240, 185, 11, .42); }
.meta-badge--negotiate { color: #ff9f43; background: rgba(255, 159, 67, .14); border-color: rgba(255, 159, 67, .4); }

/* 浏览量：弱化的小统计，靠右 */
.meta-views {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-mute, var(--text-sub));
}
.meta-views svg { display: block; opacity: .8; }
.meta-views b { font-size: 12.5px; font-weight: 700; }

/* 3 列固定网格。
   原来是 flex-wrap，最后一行不足 3 项时会被 flex-grow 拉到双倍宽
   （实测第一行 188px / 第二行 471px），右下角出现一大块空白，非常失衡。
   改用固定列数 + 末行补齐规则，任何字段数量都能填满整行。 */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--border);
  overflow: hidden;
}

/* 末行补齐：3 列时余 1 项 → 占满整行；余 2 项 → 末项跨 2 列 */
.meta-item:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.meta-item:last-child:nth-child(3n + 2) { grid-column: span 2; }

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;      /* 居中：横向 */
  justify-content: center;  /* 居中：纵向 */
  text-align: center;
  gap: 6px;
  padding: 15px 14px;
  min-width: 0;
  background: var(--bg-panel-solid);
}

.meta-k {
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--text-mute, var(--text-sub));
  letter-spacing: .5px;
}

.meta-v {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}

/* 关键值只做文字着色，不再整块铺色 —— 这是之前"花、乱"的主因 */
.meta-v--gold      { color: var(--gold-text, var(--gold)); font-weight: 700; }
.meta-v--free      { color: #2ecc71; font-weight: 700; }
.meta-v--vip       { color: #4aa3ff; font-weight: 700; }
.meta-v--svip      { color: #b06bff; font-weight: 700; }
.meta-v--coin      { color: var(--gold-text, var(--gold)); font-weight: 700; }
.meta-v--negotiate { color: #ff9f43; font-weight: 700; }

/* 详情里的「演示网站」跳转 */
.pop-meta-list .meta-demo-link {
  color: var(--gold-text-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed var(--gold);
}
.pop-meta-list .meta-demo-link:hover { color: var(--gold-text-warm); }

/* 顶部「快捷操作」区：金币购买 / 在线直购 / 演示网站，等宽对齐 */
.meta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.meta-act {
  position: relative;
  /* flex-basis 用 0 而不是固定值：所有按钮严格等宽，宽度不再随文案长短变化 */
  flex: 1 1 0;
  min-width: 170px;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur) ease, box-shadow var(--dur) ease,
              border-color var(--dur) ease, background var(--dur) ease;
}

/* 左侧 4px 色条作为类型标识，取代整块渐变底色 */
.meta-act::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--border-strong);
}

.meta-act:hover { transform: translateY(-2px); }
.meta-act:active { transform: translateY(0); }

.meta-act-ico {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel-solid);
  color: var(--text-sub);
  line-height: 0;
}
.meta-act-ico svg { display: block; }

/* 图标跟随按钮类型色（SVG 用 currentColor 上色） */
.meta-act--coin .meta-act-ico { color: var(--gold-text, var(--gold)); }
.meta-act--buy  .meta-act-ico { color: #4aa3ff; }
.meta-act--free .meta-act-ico,
.meta-act--ok   .meta-act-ico { color: #2ecc71; }
.meta-act--lock .meta-act-ico { color: #ff9f43; }
.meta-act--demo .meta-act-ico { color: var(--gold-text, var(--gold)); }

.meta-act-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meta-act-t { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; }
.meta-act-s { font-size: 12px; color: var(--text-sub); line-height: 1.4; }

/* 价格在按钮里单独高亮：更饱和的颜色 + 更粗的字重，扫一眼就能看到 */
.meta-act-s em { font-style: normal; margin: 0 5px; opacity: .55; }
.meta-act-price { font-size: 14px; font-weight: 800; letter-spacing: .3px; }
.meta-act--coin .meta-act-price { color: #ffdf4d; }
.meta-act--buy  .meta-act-price { color: #6fbaff; }
.meta-act--lock .meta-act-price { color: #ffab52; }

/* 金币购买：金色 */
.meta-act--coin::before { background: linear-gradient(180deg, #ffd75e, #f0b90b); }
.meta-act--coin .meta-act-t { color: var(--gold-text, var(--gold)); }
.meta-act--coin .meta-act-ico { border-color: rgba(240, 185, 11, .45); background: rgba(240, 185, 11, .12); }
.meta-act--coin:hover {
  border-color: rgba(240, 185, 11, .7);
  box-shadow: 0 14px 28px -16px rgba(240, 185, 11, .75);
}

/* 在线直购：蓝色 */
.meta-act--buy::before { background: linear-gradient(180deg, #79bbff, #4aa3ff); }
.meta-act--buy .meta-act-t { color: #4aa3ff; }
.meta-act--buy .meta-act-ico { border-color: rgba(74, 163, 255, .45); background: rgba(74, 163, 255, .12); }
.meta-act--buy:hover {
  border-color: rgba(74, 163, 255, .65);
  box-shadow: 0 14px 28px -16px rgba(74, 163, 255, .7);
}

/* 免费下载 / 已购买：绿色 */
.meta-act--free::before,
.meta-act--ok::before { background: linear-gradient(180deg, #6ee7a0, #2ecc71); }
.meta-act--free .meta-act-t,
.meta-act--ok .meta-act-t { color: #2ecc71; }
.meta-act--free .meta-act-ico,
.meta-act--ok .meta-act-ico {
  border-color: rgba(46, 204, 113, .45);
  background: rgba(46, 204, 113, .12);
}
.meta-act--free:hover,
.meta-act--ok:hover {
  border-color: rgba(46, 204, 113, .65);
  box-shadow: 0 14px 28px -16px rgba(46, 204, 113, .7);
}

/* 需要解锁 / 价格面议：橙色 */
.meta-act--lock::before { background: linear-gradient(180deg, #ffbe76, #ff9f43); }
.meta-act--lock .meta-act-t { color: #ff9f43; }
.meta-act--lock .meta-act-ico { border-color: rgba(255, 159, 67, .45); background: rgba(255, 159, 67, .12); }
.meta-act--lock:hover {
  border-color: rgba(255, 159, 67, .65);
  box-shadow: 0 14px 28px -16px rgba(255, 159, 67, .7);
}

/* 演示网站：中性底 + 金色点缀，与购买按钮拉开层级 */
.meta-act--demo::before { background: linear-gradient(180deg, rgba(240, 185, 11, .8), rgba(240, 185, 11, .25)); }
.meta-act--demo .meta-act-ico { border-color: rgba(240, 185, 11, .35); }
.meta-act--demo:hover {
  border-color: var(--gold-text);
  box-shadow: 0 14px 28px -16px rgba(240, 185, 11, .55);
}

/* 详情弹窗底部操作条常驻：回滚到弹窗下方时依然可见 */
#popBtnWrap {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 18px;
  padding: 12px 0 8px;
  background: var(--bg-panel-solid);
  border-top: 1px solid var(--border);
  box-shadow: 0 -14px 22px -14px rgba(0, 0, 0, .7);
}

@media (max-width: 600px) {
  .meta-actions { flex-direction: column; }
  .meta-act { max-width: none; padding: 12px 14px 12px 17px; }
  #popBox > h1 { font-size: 17px; }

  /* 窄屏信息网格降为 2 列，并重置 3 列的末行补齐规则 */
  .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-item:last-child:nth-child(3n + 1),
  .meta-item:last-child:nth-child(3n + 2) { grid-column: auto; }
  .meta-item:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}

/* 亮色主题：金色 / 蓝色文字需要加深才看得清（原先在浅底上几乎读不出来） */
[data-theme="light"] .meta-act--coin .meta-act-price { color: #a61b29; }
[data-theme="light"] .meta-act--buy  .meta-act-price { color: #1567c8; }
[data-theme="light"] .meta-act--lock .meta-act-price { color: #b35c00; }
[data-theme="light"] .meta-badge--coin { color: #8a5e00; background: rgba(240, 185, 11, .16); border-color: rgba(180, 124, 0, .42); }
[data-theme="light"] .meta-badge--free { color: #1a8f4c; }
[data-theme="light"] .meta-badge--vip  { color: #1f6fd0; }
[data-theme="light"] .meta-badge--svip { color: #7b3fd0; }
[data-theme="light"] .meta-badge--negotiate { color: #b86400; }


/* ==========================================================================
   13. 图片预览
   ========================================================================== */

.img-preview-wrap {
  position: fixed;
  inset: 0;
  z-index: var(--z-preview);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
  overflow: hidden;          /* 放大后的图不撑出滚动条 */
}

.img-preview-wrap.show { display: flex; }

/* 缩放/平移只作用在盒子上（transform-origin: 0 0），
   盒子本身不改尺寸 —— 水印层是盒子内的绝对定位层，会跟着图片一起缩放；
   底部信息条与左右按钮在盒子外，不受缩放影响。 */
.img-preview-box {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  transform-origin: 0 0;
  will-change: transform;
}

.img-preview-box img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

.img-preview-wrap.zoomed .img-preview-box img { cursor: grab; }
.img-preview-wrap.dragging .img-preview-box img { cursor: grabbing; }

/* 水印层 —— 平铺在图片上 */
.img-preview-watermark-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.img-preview-watermark {
  width: 33.333%;
  padding: 18px 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.16);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  transform: rotate(-22deg);
  user-select: none;
  white-space: nowrap;
}

/* ---- 左右换图按钮：贴视口两侧常显（原来挂在图片框外的 -60px，
        图一宽就被切掉看不见，这里改为固定到视口边缘） ---- */
.img-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  padding-bottom: 5px;       /* ‹ › 视觉居中 */
  cursor: pointer;
  z-index: 3;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background var(--dur) ease, color var(--dur) ease,
              border-color var(--dur) ease, transform var(--dur) ease;
}

.img-preview-nav:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.img-preview-nav:active { transform: translateY(-50%) scale(0.93); }
.img-preview-nav.prev { left: 26px; }
.img-preview-nav.next { right: 26px; }

/* 只有一张图时没有「换图」可言，按钮收起来 */
.img-preview-wrap.single .img-preview-nav { display: none; }

/* ---- 底部信息条：张数 / 缩放比例 / 操作提示 ---- */
.img-preview-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 3;
  pointer-events: none;      /* 条空白处仍可点到遮罩关闭 */
}

.img-preview-bar > * { pointer-events: auto; }

.img-preview-index {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.img-preview-zoom {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}

.img-preview-zoom:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* 已放大时高亮，提示「再点一下就复位」 */
.img-preview-wrap.zoomed .img-preview-zoom {
  border-color: rgba(233, 180, 76, 0.8);
  color: #e9b44c;
}

.img-preview-hint {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
}


/* ==========================================================================
   14. 浏览历史抽屉
   ========================================================================== */

#historyBtn {
  position: fixed;
  right: 0;
  top: 42%;
  z-index: var(--z-drawer);
  width: 42px;
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 10px 0 0 10px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  transition: all var(--dur) ease;
}

#historyBtn:hover { padding-right: 8px; box-shadow: var(--shadow-gold); }

.history-list-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: 320px;
  max-width: 86vw;
  padding: 20px;
  background: var(--bg-panel-solid);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35);
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform 0.32s var(--ease);
}

.history-list-wrap.show { transform: translateX(0); }

/* 抽屉头部：标题 + 关闭按钮 */
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.history-head h3 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.history-close {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--dur) ease;
}

.history-close:hover {
  color: var(--gold-text, var(--gold));
  border-color: var(--gold-text);
}

.history-list-wrap h3 {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--gold-text, var(--gold));
}

.history-list-wrap li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}

.history-list-wrap li a { display: block; line-height: 1.5; }

.history-list-wrap li time {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-mute);
}

.history-clear {
  margin-top: 16px;
  padding: 9px 14px;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--dur) ease;
}

.history-clear:hover { border-color: var(--red); color: var(--red); }


/* ==========================================================================
   15. 表单控件
   ========================================================================== */

.form-item { margin-bottom: 18px; }

.form-item > label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: bold;
  color: var(--text-sub);
}

.form-item > label .req { color: var(--red-soft); margin-left: 3px; }

.form-control {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  outline: none;
  transition: all var(--dur) ease;
}

.form-control:focus {
  border-color: var(--gold-text);
  box-shadow: 0 0 0 3px rgba(166, 27, 41, 0.14);
}

.form-control::placeholder { color: var(--text-mute); }

/* v14.14：带固定单位的输入框（如「版本大小」单位恒为 G，用户只填数字）。
   后缀是纯展示层，不能挡住点击与选区，所以 pointer-events 关掉并留出右侧内边距。 */
.input-unit { position: relative; }

.input-unit .form-control { padding-right: 48px; }

.input-unit-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold-text);
  pointer-events: none;
  user-select: none;
}

/* 前缀版（短链标识要显示 /go/xxxx，前缀必须在左边才不会被误读成后缀） */
.input-unit-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gold-text);
  pointer-events: none;
  user-select: none;
}

.input-unit .form-control.has-prefix { padding-left: 52px; }

.form-control.error { border-color: var(--red-soft); animation: shake 0.4s ease; }

textarea.form-control { min-height: 96px; resize: vertical; }

.form-tip {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-mute);
}

.form-error {
  margin-top: 6px;
  font-size: 12px;
  color: var(--red-soft);
  display: none;
}

.form-error.show { display: block; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* v16.34：后台表单「更多选填」折叠区 —— 低频字段收进来，表单更短更好滚 */
.adv-details {
  margin: 4px 0 18px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}
.adv-details summary {
  cursor: pointer;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  user-select: none;
  list-style: revert;
}
.adv-details[open] summary {
  border-bottom: 1px dashed var(--border);
  margin-bottom: 14px;
}
.adv-details-body { padding: 2px 14px 14px; }

/* 复选框 / 单选 */
.check-group { display: flex; flex-wrap: wrap; gap: 14px; }

.check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.check-item input { accent-color: var(--gold-text); width: 15px; height: 15px; cursor: pointer; }

/* 下拉 */
select.form-control { cursor: pointer; }

/* v16.6：点击式分类标签（后台内容编辑）—— 点击选中/取消，替代多选下拉 */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--dur) ease;
}

.chip:hover { border-color: var(--gold-text); color: var(--gold-text); }

.chip.on {
  background: var(--gold-text);
  border-color: var(--gold-text);
  color: #fff;
  font-weight: bold;
}

/* v16.13：标题颜色色块选择（后台发布表单） */
.tcolor-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tcolor {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tcolor:hover { transform: scale(1.12); }
.tcolor.on { border-color: var(--gold-text); box-shadow: 0 0 0 2px rgba(166, 27, 41, .25); }
.tcolor-none {
  width: auto;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--bg-elevated);
  color: var(--text);
}
.tcolor-none.on { border-color: var(--gold-text); color: var(--gold-text); box-shadow: none; }

/* 验证码行 */
.captcha-row { display: flex; gap: 10px; }

.captcha-img {
  flex-shrink: 0;
  width: 110px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 3px;
  color: var(--gold-text);
  cursor: pointer;
  user-select: none;
  font-style: italic;
}


/* ==========================================================================
   16. 会员中心
   ========================================================================== */

.member-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--gap);
  align-items: start;
  margin-top: 22px;
}

.member-side {
  padding: 18px 0 6px;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  position: sticky;
  top: 82px;
  display: flex;
  flex-direction: column;
}

.member-side .side-user {
  padding: 0 18px 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.member-side .side-avatar {
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  overflow: hidden;
}

.member-side .side-avatar img { width: 100%; height: 100%; object-fit: cover; }

.member-side .side-name { font-size: 15px; font-weight: bold; }

.member-side .side-level {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 11px;
  border-radius: 999px;
  background: var(--blue-deep);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.member-side .side-level.svip { background: var(--red); }
.member-side .side-level.free { background: var(--text-mute); }

.member-side nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  font-size: 13.5px;
  color: var(--text-sub);
  border-left: 3px solid transparent;
  transition: all var(--dur) ease;
}

.member-side nav a:hover {
  background: var(--notice-bg);
  color: var(--gold-text);
}

.member-side nav a.active {
  background: var(--notice-bg);
  border-left-color: var(--gold-text);
  color: var(--gold-text);
  font-weight: bold;
}

/* v17.49：后台导航条改为「左右双竖排」——两列网格，降低侧栏高度
   仅作用于后台 #adminNav，不影响前台会员中心；原 JS 选择器（#adminNav a[data-panel]）全部照常工作 */
#adminNav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
  padding: 4px 10px 12px;
}
#adminNav a {
  border-left: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 6px;
  justify-content: center;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text-sub);
  transition: all var(--dur) ease;
}
#adminNav a:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--accent);
}
#adminNav a.active {
  background: var(--notice-bg);
  border-color: var(--gold-text);
  color: var(--gold-text);
  font-weight: bold;
}
/* 窄屏下回到横向自动换行，避免两列被压太窄 */
@media (max-width: 900px) {
  #adminNav { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 12px; }
  #adminNav a { flex: 1 1 44%; }
}

.member-main {
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  min-height: 420px;
}

.member-panel { display: none; }
.member-panel.active { display: block; }

.member-panel > h2 {
  margin-bottom: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  color: var(--gold-text, var(--gold));
}

/* 数据卡片组 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  text-align: center;
  transition: all var(--dur) ease;
}

.stat-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

.stat-card .stat-num {
  font-size: 25px;
  font-weight: bold;
  color: var(--gold-text);
  line-height: 1.3;
}

.stat-card .stat-label { font-size: 12.5px; color: var(--text-mute); margin-top: 4px; }

/* 数据表格 */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.data-table th {
  padding: 11px 12px;
  text-align: left;
  background: var(--bg-elevated);
  color: var(--text-mute);
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-sub);
}

.data-table tbody tr:hover { background: var(--notice-bg); }

.data-table .num { font-weight: bold; color: var(--gold-text); }

/* 会员升级 · 价格卡片 */
#levelGrid { grid-template-columns: repeat(3, 1fr); }
.level-card {
  position: relative;
  padding: 22px 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  text-align: center;
  transition: all var(--dur) ease;
  overflow: hidden;
}
.level-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.level-card--current {
  border-color: var(--gold-text);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 24px rgba(166, 27, 41, 0.12);
}
.level-card--current::before {
  content: '当前';
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 10px;
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  border-bottom-left-radius: var(--radius-sm);
}
.level-card-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 12px;
}
.level-card-price {
  font-size: 26px;
  font-weight: bold;
  color: var(--gold-text);
  line-height: 1.2;
  margin-bottom: 4px;
}
.level-card-price small {
  font-size: 12px;
  color: var(--text-mute);
  font-weight: normal;
  margin-left: 3px;
}
.level-card-coin {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 14px;
}

/* 会员升级 · 权益对比表 */
.right-name { color: var(--text-sub); }
.right-cell { text-align: center; width: 110px; }
#rightsTable tr:nth-child(even) { background: rgba(255,255,255,0.02); }
#rightsTable td { padding: 10px 12px; vertical-align: middle; }

/* 状态徽标 */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.badge-ok      { background: rgba(46, 158, 91, 0.16);  color: #2e9e5b; }
.badge-warn    { background: rgba(255, 149, 0, 0.16);  color: var(--orange); }
.badge-danger  { background: rgba(212, 40, 69, 0.16);  color: var(--red-soft); }
.badge-info    { background: rgba(64, 153, 255, 0.16); color: var(--blue); }
.badge-mute    { background: var(--bg-elevated);       color: var(--text-mute); }

/* 空状态 */
.empty-tip {
  padding: 50px 20px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13.5px;
}

.empty-tip .empty-icon { font-size: 40px; opacity: 0.35; margin-bottom: 10px; }

/* 加载更多 */
.loadmore-wrap { margin: 26px 0 10px; text-align: center; }

#loadMoreBtn {
  padding: 12px 40px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--gold-text);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all var(--dur) ease;
}

#loadMoreBtn:hover {
  background: var(--gold);
  color: #fff;
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

#loadMoreBtn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* 提示气泡 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 44px;
  z-index: var(--z-toast);
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--bg-panel-solid);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 13.5px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--ease);
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

.toast.ok    { border-color: rgba(46, 158, 91, 0.6); }
.toast.error { border-color: rgba(212, 40, 69, 0.6); }

/* --------------------------------------------------------------------------
   接口不可达提示条
   --------------------------------------------------------------------------
   场景：页面是被静态预览工具或 file:// 直接打开的，页面里的相对路径请求
   会打到别的服务上，接口全部失效。此时如果不提示，用户会误以为是
   「账号或密码错误」——所以这里直接把真实原因和正确访问地址摆出来。
   -------------------------------------------------------------------------- */
.api-hint {
  display: none;
  margin-bottom: 18px;
  padding: 13px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(212, 40, 69, 0.55);
  background: rgba(212, 40, 69, 0.10);
  color: var(--text);
  font-size: 13px;
  line-height: 1.75;
  text-align: left;
}

.api-hint.show { display: block; }

.api-hint__title {
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
  color: var(--red);
}

.api-hint b     { color: var(--gold-dark); }
.api-hint code  {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-panel-solid);
  border: 1px solid var(--border);
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
}


/* 返回顶部 —— v17.53：全站一键返回页头，略大/略上移/更醒目 */
#backTopBtn {
  position: fixed;
  right: 28px;
  bottom: 84px;                                /* 上移，少挡内容 */
  z-index: var(--z-drawer);
  width: 50px;                                /* 略大 */
  height: 50px;
  display: none;
  align-items: center;
  justify-content: center;
  border-width: 2px;                          /* 显式长写，避免被全局块 shorthand 吃掉宽度 */
  border-style: solid;
  border-color: var(--gold);                  /* 金边更醒目（深色主题下跟随站点主题=品牌红，浅色=金） */
  border-radius: 50%;
  background: var(--bg-panel-solid);
  color: var(--gold-text);
  font-size: 22px;                            /* 略大 */
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(190,150,55,.30);  /* 金色微光，更醒目 */
  transition: all var(--dur) ease;
}

#backTopBtn.show { display: flex; }

#backTopBtn:hover { background: var(--gold); color: #fff; box-shadow: 0 10px 26px rgba(190,150,55,.45); transform: translateY(-2px); }


/* ==========================================================================
   17. 动画关键帧
   ========================================================================== */

/* 弹窗弹入 */
@keyframes popBounce {
  0%   { opacity: 0; transform: scale(0.86) translateY(14px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 点击波纹 */
@keyframes rippleAnim {
  to { transform: scale(2.6); opacity: 0; }
}

/* 抖动 —— 表单校验失败 */
@keyframes shake {
  0%, 100%      { transform: translateX(0); }
  20%, 60%      { transform: translateX(-7px); }
  40%, 80%      { transform: translateX(7px); }
}

/* 顶部扫光 */
@keyframes streamLight {
  0%   { left: -120%; }
  100% { left: 120%; }
}

/* 文字流光 */
@keyframes textShine {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* 卡片淡入上浮 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-item { animation: fadeInUp 0.45s var(--ease) backwards; }

/* 尊重用户减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ==========================================================================
   18. 响应式
   ========================================================================== */

/* 大屏收窄：卡片列数自然减少，列表视图列宽压缩
   v16.15：一行式五列同步收窄（缩略图/标签列/价格列/星标），列宽仍固定强制对齐 */
@media (max-width: 1200px) {
  .card-grid-view { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .table-row { grid-template-columns: 76px minmax(0, 1fr) 172px 116px 30px; gap: 12px; }
  .table-row .thumb { width: 76px; height: 54px; }
  .table-row .price-cta { padding: 5px 10px; }
  .tool-bar .tb-search { max-width: 300px; }
}

/* 平板：筛选标签换行 */
@media (max-width: 860px) {
  .member-layout { grid-template-columns: 1fr; }
  .member-side { position: static; }
  .member-side nav { display: flex; flex-wrap: wrap; }
  .member-side nav a { flex: 1 1 46%; border-left: none; border-bottom: 3px solid transparent; justify-content: center; }
  .member-side nav a.active { border-left: none; border-bottom-color: var(--gold-text); }
  .filter-row { flex-direction: column; gap: 9px; }
  .filter-label { padding-top: 0; }
  .img-preview-nav { width: 44px; height: 44px; font-size: 22px; }
  .img-preview-nav.prev { left: 10px; }
  .img-preview-nav.next { right: 10px; }
  .img-preview-hint { display: none; }   /* 手机上没滚轮，操作提示没意义 */
  .img-preview-bar { bottom: 14px; gap: 8px; }
}

/* 手机：单列卡片，列表视图改为卡片式堆叠 */
@media (max-width: 768px) {
  .wrap-container { padding: 0 13px 30px; }
  .top-banner { padding: 9px 13px; min-height: 56px; }
  .banner-logo-text { font-size: 17px; }
  .nav-menu-btn { display: flex; align-items: center; justify-content: center; }

  .card-grid-view { grid-template-columns: 1fr 1fr; gap: 13px; }
  .card-item { padding: 13px; }
  .card-img-box { margin-bottom: 10px; }
  .card-title { font-size: 13px; min-height: 39px; }

  /* v16.15：手机也一行式 —— 缩略图 | 标题单行 | 价格小胶囊 | 星标，四个格子一条线。
     价格列固定宽（auto 会随「99元/100元/免费」文字变宽导致列参差）。
     标签在窄屏上让位（详情弹窗里有完整标签），绝不另起一行。 */
  .table-row {
    grid-template-columns: 60px minmax(0, 1fr) 116px 28px;
    gap: 10px;
    padding: 11px 12px;
  }
  .table-row .thumb { width: 60px; height: 44px; grid-column: 1; grid-row: 1; }
  .table-row .name-link { grid-column: 2; grid-row: 1; }
  .table-row .row-tags { display: none; }
  .table-row .price-cta { grid-column: 3; grid-row: 1; justify-self: stretch; justify-content: center; min-width: 0; padding: 4px 9px; }
  .table-row .row-fav { grid-column: 4; grid-row: 1; }

  .pop-content { padding: 20px 16px; max-height: 94vh; }
  #popBox { max-width: 100%; padding: 20px 16px; }  /* 手机上详情弹窗恢复紧凑内边距 */
  .pop-outside-close { top: 8px; right: 10px; width: 34px; height: 34px; font-size: 22px; }
  .pop-content h1 { font-size: 19px; }
  .history-list-wrap { width: 84vw; padding: 16px; }
  #historyBtn { width: 36px; font-size: 11px; padding: 11px 0; }
  .form-row { grid-template-columns: 1fr; }
  .tool-bar { padding: 12px 14px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  #levelGrid { grid-template-columns: repeat(2, 1fr); }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 9px 8px; }
}

/* 小屏手机 */
@media (max-width: 560px) {
  .card-grid-view { grid-template-columns: 1fr; }
  /* v17.16：缩略图高度交给 aspect-ratio 16/10，不再写死 */
  .nav-user-link { padding: 7px 11px; font-size: 12px; }
  .notice-bar { padding: 10px 12px; font-size: 12px; }
  .filter-wrap { padding: 14px; }
  .stat-grid { grid-template-columns: 1fr; }
  #levelGrid { grid-template-columns: 1fr; }
  .pop-btn-group { flex-direction: column; }
  .pop-btn-group .btn { width: 100%; }
}


/* ==========================================================================
   18b. 收藏按钮 / 骨架屏 / 加载态
   ========================================================================== */

/* 卡片右上角收藏按钮 —— 桌面端 hover 显现，触屏常显 */
.card-fav-btn {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: all var(--dur) ease;
}

.card-item:hover .card-fav-btn { opacity: 1; }

.card-fav-btn:hover { background: var(--gold); color: #fff; transform: scale(1.14); }

.card-fav-btn.active { opacity: 1; color: var(--gold-text); }
.card-fav-btn.active:hover { background: var(--gold); color: #fff; }

/* 触屏设备没有 hover，收藏按钮常显 */
@media (hover: none) {
  .card-fav-btn { opacity: 1; }
}

/* 列表视图行内收藏按钮 */
.row-fav-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-mute);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--dur) ease;
}

.row-fav-btn:hover { border-color: var(--gold-text); color: var(--gold-text); }
.row-fav-btn.active { border-color: var(--gold-text); color: var(--gold-text); background: var(--notice-bg); }

/* 骨架屏 —— 数据加载中的占位 */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-elevated) 25%,
    var(--bg-card) 37%,
    var(--bg-elevated) 63%);
  background-size: 400% 100%;
  animation: skeletonLoad 1.4s ease infinite;
  border-radius: 6px;
}

.skeleton-card { height: 296px; border: 1px solid var(--border); }

@keyframes skeletonLoad {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* 内联加载指示 */
.loading-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 34px 0;
  color: var(--text-mute);
  font-size: 13.5px;
}

.spinner {
  width: 17px;
  height: 17px;
  border: 2px solid var(--border);
  border-top-color: var(--gold-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 筛选结果切换时的轻微淡入 */
.list-refresh { animation: fadeInUp 0.32s var(--ease); }


/* ==========================================================================
   18c. 管理后台
   ========================================================================== */

/* 后台工具条：搜索 + 筛选 + 新增按钮 */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.admin-toolbar .grow { flex: 1; min-width: 160px; }

/* 表格操作按钮组 */
.row-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.btn-xs {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur) ease;
}

.btn-xs:hover { border-color: var(--gold-text); color: var(--gold-text); }
.btn-xs.danger:hover { border-color: var(--red-soft); color: var(--red-soft); }

/* 表格里的缩略图 */
.table-thumb {
  width: 64px;
  height: 46px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--bg-elevated);
  cursor: zoom-in;
}

/* 分页器 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.pager button {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-sub);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur) ease;
}

.pager button:hover:not(:disabled) { border-color: var(--gold-text); color: var(--gold-text); }

.pager button.active {
  background: var(--gold);
  border-color: var(--gold-text);
  color: #fff;
  font-weight: bold;
}

.pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* 图片上传区 */
.upload-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--bg-elevated);
}

.upload-preview {
  width: 96px;
  height: 68px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-card);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.upload-box .upload-info { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-mute); }

/* 弹窗内的表单更紧凑 */
.pop-content .form-item { margin-bottom: 14px; }

.pop-content .form-row { gap: 12px; }

/* 后台登录卡片（未登录时显示） */
.admin-login-mask {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg-page);
}

/* 表格横向滚动容器（窄屏） */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-scroll .data-table { min-width: 640px; }


/* ==========================================================================
   19. 工具类
   ========================================================================== */

.hidden { display: none !important; }
.text-gold { color: var(--gold-text, var(--gold)); }
.text-mute { color: var(--text-mute); }
.text-red { color: var(--red-soft); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex-wrap { flex-wrap: wrap; }

/* ===== 详情弹窗：多图图集 ===== */
.pop-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 16px;
}
.pop-gallery.hidden { display: none; }
.pop-gallery-thumb {
  width: 84px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: .7;
  transition: opacity .15s, border-color .15s;
  background: var(--card, #222);
}
.pop-gallery-thumb:hover { opacity: 1; }
.pop-gallery-thumb.active { border-color: var(--gold, #f0b90b); opacity: 1; }

/* ===== 详情弹窗：介绍下方的大图堆叠（原站风格） ===== */
.pop-img-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.pop-img-stack img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border, #333);
  cursor: zoom-in;
  background: var(--card, #222);
}
/* v17.06：详情截图 blur-up 渐进式 —— 加载时模糊占位，清晰档到位后去模糊变清晰（清晰度不变） */
.pop-img-stack img.blur-up {
  filter: blur(18px);
  transition: filter .6s ease;
}
.pop-img-stack img.blur-up.is-sharp {
  filter: none;
}

/* v16.10：正文（编辑器粘贴）图片同样可点击放大 */
.dp-body img {
  cursor: zoom-in;
}

/* ===== 后台：网站设置 ===== */
.site-logo-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid var(--border);
}
.site-logo-preview img {
  max-height: 46px; max-width: 220px; object-fit: contain;
  background: transparent; border-radius: 6px;
}
.site-logo-preview .logo-empty { color: var(--text-mute); font-size: 13px; }
.setting-tip { color: var(--text-mute); font-size: 12px; margin-top: 6px; line-height: 1.6; }

/* 购买设置面板（后台独立菜单）：卡片 + 实时预览弹窗 */
.buyset-card {
  border: 1px solid var(--border, rgba(125,125,125,.25));
  border-radius: 14px;
  padding: 18px 20px 8px;
  margin-bottom: 18px;
  background: var(--bg-elevated, rgba(125,125,125,.06));
}
.buyset-card-head {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 14px;
}
.buyset-preview {
  border: 1px dashed var(--border, rgba(125,125,125,.35));
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 56px;
  background: var(--bg, transparent);
}
.buyset-line { font-size: 13px; line-height: 1.9; word-break: break-all; }
.buyset-pop {
  max-width: 360px;
  margin: 0 auto;
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border, rgba(125,125,125,.25));
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  text-align: center;
}
.buyset-pop-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.buyset-pop-body { font-size: 13px; line-height: 1.9; word-break: break-all; }
.buyset-pop-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #f5a623, #f08c00);
}
.setting-row { display: flex; gap: 12px; flex-wrap: wrap; }
.setting-row > .form-item { flex: 1; min-width: 220px; }

/* ==========================================================================
   后台：水印设置（卡片式布局）
   原来是一长串 setting-row：两列滑块中间空一大片、按钮散排、看不出分组。
   现在拆成三张卡片「文字水印 / LOGO 水印 / 实时预览」，卡内一行一个参数。
   ========================================================================== */
.wm-intro {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  background: var(--bg-elevated);
  color: var(--text-sub);
  font-size: 12.5px;
  line-height: 1.75;
}

.wm-card {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
}
.wm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.wm-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.wm-card-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-mute);
}
.wm-card-switch .form-control {
  width: auto;
  min-width: 92px;
  padding: 6px 10px;
  font-size: 13px;
}
.wm-card-body { padding: 14px 16px; }

.wm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 26px;
}
.wm-span2 { grid-column: 1 / -1; }

/* 卡内字段：标签定宽在左、控件在右、数值贴最右 —— 一行一个，不再上下堆 */
.form-item.wm-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  min-width: 0;
}
.wm-field > label {
  flex: 0 0 104px;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-sub);
}
.wm-field > .form-control,
.wm-field > .wm-range {
  flex: 1 1 110px;
  min-width: 0;
  width: auto;
}
.wm-field > .wm-val { flex: 0 0 auto; margin-left: 0; min-width: 58px; }
.wm-field > .form-tip {
  flex: 1 1 100%;
  margin: 0 0 0 114px;
  font-size: 11.5px;
  line-height: 1.6;
}
.wm-field--stack > .form-control { flex: 1 1 100%; }
.wm-field--stack > .form-tip { margin-left: 0; }

/* 「仅平铺生效」分组提示条：正常是灰色分组标签，参数不可用时变琥珀色告警 */
.wm-subhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mute);
}
.wm-subhead::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--border-strong, var(--border));
  flex: 0 0 auto;
}
.wm-subhead.wm-inactive { color: #ffb020; }
.wm-subhead.wm-inactive::before { background: #ffb020; }

/* LOGO 卡片顶部：左边棋盘格预览，右边地址 + 四个按钮 */
.wm-logo-top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.wm-logo-box { flex: 0 0 240px; }
.wm-logo-side {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wm-logo-btns { margin-top: 0; }

/* ===== 后台：水印实时预览 ===== */
/* 预览卡夹在「文字水印 / LOGO 水印」两张卡片中间：
   上下都留间距，并用金色描边标明这是「两层合成的结果区」，与两张设置卡区分开 */
.wm-preview-wrap {
  margin: 18px 0;
  border: 1px solid rgba(240, 185, 11, .36);
  border-radius: var(--radius);
  background: #171c26;
  overflow: hidden;
  box-shadow: 0 16px 32px -26px rgba(0, 0, 0, .95);
}
.wm-preview-head {
  background: rgba(255, 255, 255, .045);
  border-bottom-color: rgba(255, 255, 255, .10);
}
.wm-preview-head .wm-card-title { color: var(--gold-text); }
.wm-preview-body { padding: 14px 16px 16px; }
.wm-preview-title { font-size: 13px; font-weight: 700; color: var(--gold-text); }

@media (max-width: 960px) {
  .wm-grid { grid-template-columns: 1fr; }
  .wm-logo-top { flex-direction: column; }
  .wm-logo-box { flex: 1 1 auto; width: 100%; }
  .wm-field > label { flex: 0 0 92px; }
  .wm-field > .form-tip { margin-left: 102px; }
}

/* 预览区底色固定为深色（模拟真实截图），所以文字颜色写死不跟主题变量走，
   否则亮色主题下 --text-mute 是深灰，压在深底上基本看不见 */
.wm-preview-note  { font-size: 12px; color: rgba(255, 255, 255, .60); }
.wm-preview-note.warn { color: #ffb020; font-weight: 600; }
.wm-preview-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #0e1219;
  border: 1px solid var(--border);
}

/* 参数摘要：画布下面一行，实时回显「当前生效的参数值」 */
.wm-preview-meta {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  word-break: break-word;
}
.wm-preview-meta:empty { display: none; }

/* 平铺专用参数：位置不是「整图平铺」时灰掉 + 给出切换入口 */
.form-item.wm-inactive > label { color: var(--text-mute); }
.form-item.wm-inactive .wm-val {
  background: rgba(125, 125, 125, .18);
  color: var(--text-mute);
}
.form-item.wm-inactive .wm-range { cursor: not-allowed; opacity: .55; }
.form-item.wm-inactive .wm-range::-webkit-slider-thumb {
  background: #8a8f99;
  border-color: #c9ccd2;
  box-shadow: none;
}

.wm-tile-switch {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 176, 32, .55);
  background: rgba(255, 176, 32, .14);
  color: #ffb020;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease;
}
.wm-tile-switch:hover { background: rgba(255, 176, 32, .26); }

/* 滑块：轨道加粗 + 大圆点，拖动更顺手 */
.wm-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
.wm-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 5px;
  /* 中性灰：深浅两套主题下都看得见 */
  background: rgba(125, 125, 125, .30);
  border: 1px solid var(--border);
}
.wm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-warm, #f7c948), var(--gold-deep, #c98a12));
  border: 2px solid #fff2cc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.wm-range:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(240, 185, 11, .22); }
.wm-range::-moz-range-track {
  height: 8px;
  border-radius: 5px;
  background: rgba(125, 125, 125, .30);
}
.wm-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #fff2cc;
}

/* 水印设置：层级小标题（旧样式，已被 .wm-card 取代，保留以防旧页面引用） */
.wm-layer-title {
  margin: 18px 0 10px;
  padding: 7px 12px;
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  background: var(--bg-elevated, rgba(0,0,0,.03));
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* 「本次上传不加水印」勾选项 */
.wm-skip-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-sub, var(--text));
  cursor: pointer;
  user-select: none;
}
.wm-skip-line input { accent-color: var(--gold-text); cursor: pointer; }

.wm-val {
  display: inline-block;
  min-width: 54px;
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--notice-bg, rgba(240, 185, 11, .12));
  color: var(--gold-text, var(--gold));
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* 后台：LOGO 水印设置 —— 图片预览 + 操作按钮 */
.wm-logo-box {
  display: flex; align-items: center; justify-content: center;
  min-height: 78px; padding: 12px;
  border-radius: 10px;
  border: 1px dashed var(--border-strong, var(--border));
  /* 深浅棋盘格，透明 LOGO 也看得清边界 */
  background-color: var(--bg-soft);
  background-image:
    linear-gradient(45deg, rgba(125,125,125,.10) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(125,125,125,.10) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(125,125,125,.10) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(125,125,125,.10) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.wm-logo-box img {
  max-width: 100%; max-height: 96px; object-fit: contain;
}
.wm-logo-box .logo-empty { color: var(--text-mute); font-size: 13px; }
.wm-logo-btns {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}

/* ===== 后台：图集编辑器 ===== */
.gallery-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.gallery-edit .form-tip { width: 100%; margin: 0; }
.gallery-thumb {
  position: relative;
  width: 88px;
  height: 62px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border, #333);
  background: var(--card, #222);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.gallery-del:hover { background: #d33; }

/* 第一张 = 缩略图（封面）：加金边 + 角标，避免站长搞不清哪张会被拿去当封面 */
.gallery-thumb--cover {
  border-color: var(--gold, #f0b90b);
  box-shadow: 0 0 0 1px rgba(240, 185, 11, .35);
}
.gallery-cover {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1px 6px;
  border-radius: 0 6px 0 0;
  background: var(--gold, #f0b90b);
  color: #241a00;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  pointer-events: none;
}


/* ==========================================================================
   20. 发布版本截图上传（会员中心）
   ========================================================================== */

.pub-shot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pub-shot-add {
  width: 104px;
  height: 78px;
  border: 1px dashed var(--border, #444);
  border-radius: var(--radius-sm);
  background: var(--bg-input, #242438);
  color: var(--text-mute, #8a8fa3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all var(--dur) ease;
  user-select: none;
}
.pub-shot-add:hover {
  border-color: var(--gold-text-soft);
  color: var(--gold-text-soft);
}
.pub-shot-add .pub-shot-plus { font-size: 22px; line-height: 1; }
.pub-shot-add small { font-size: 11px; }
.pub-shot-add.is-busy { opacity: .5; pointer-events: none; }

.pub-shot-item {
  position: relative;
  width: 104px;
  height: 78px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border, #444);
}
.pub-shot-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-shot-item .pub-shot-cover {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 2px 5px;
  font-size: 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
  color: var(--gold-text-soft);
}
.pub-shot-item .pub-shot-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.pub-shot-item .pub-shot-del:hover { background: #d33; }


/* ==========================================================================
   20. 顶部横图广告（后台可配）
   ========================================================================== */

/* v17.90（站长：4 格小图广告，参考乐玩版本库 267×80 版式）：
   广告区改 grid —— 小图广告（宽/高比 ≤3.2，如 267×80）一行 4 格平铺；
   超宽横幅（如招商长图 / 免责声明，宽高比 >3.2）由 app.js 检测原图比例后
   加 .ad-wide 自动独占整行。后台「广告管理」传图即可新增/更换，无需改代码。 */
.ad-banner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.ad-banner .ad-item {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  background: var(--bg-elevated);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
.ad-banner .ad-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .18s ease;
}
.ad-banner .ad-item:hover img { transform: scale(1.02); }
.ad-banner .ad-item.ad-wide { grid-column: 1 / -1; }

/* 手机端：小图 2×2，超宽横幅仍独占整行 */
@media (max-width: 760px) {
  .ad-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ==========================================================================
   21. 友情链接（前台页脚上方 + 后台列表徽标）
   ========================================================================== */

.friend-links {
  margin-top: 26px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}
[data-theme="light"] .friend-links { border-color: rgba(0, 0, 0, .08); }

/* 「友情链接：」与链接同行展示 */
.friend-links .fl-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.friend-links .fl-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-text);
  white-space: nowrap;
  flex: none;
}

.friend-links .fl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
/* v16.1：友情链接纯文字化 —— 无胶囊框、无首字徽章，名字即链接 */
.friend-links .fl-list a {
  display: inline;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur);
}
.friend-links .fl-list a:hover {
  color: var(--gold-text);
  text-decoration: underline;
}
.friend-links .fl-name {
  font-weight: 600;
  letter-spacing: .2px;
}
.friend-links .fl-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-card);
  vertical-align: -5px;
  margin-right: 4px;
}
.friend-links .fl-badge,
.fl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 700;
  flex: none;
}

/* ==========================================================================
   22. 页脚（前台）
   ========================================================================== */

.site-footer {
  margin-top: 26px;
  padding: 22px 20px 24px;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius);
  text-align: center;
  backdrop-filter: blur(8px);
}
[data-theme="light"] .site-footer { border-color: rgba(0, 0, 0, .08); }

.site-footer .footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, .1);
}
[data-theme="light"] .site-footer .footer-top { border-bottom-color: rgba(0, 0, 0, .1); }

.site-footer .footer-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.site-footer .footer-site-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-text);
}
.site-footer .footer-desc { font-size: 12.5px; color: var(--text-mute); }

.site-footer .footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer .footer-nav a {
  font-size: 13px;
  color: var(--text-sub);
  text-decoration: none;
  transition: color var(--dur);
}
.site-footer .footer-nav a:hover { color: var(--gold-text); }

.site-footer .footer-contact-line {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.site-footer .footer-contact-line b { color: var(--gold-text); }
.site-footer .footer-contact-line a { color: var(--gold-text); text-decoration: none; }

.site-footer .footer-legal { font-size: 12px; }
.site-footer .footer-legal:empty { display: none; }

@media (max-width: 768px) {
  .site-footer .footer-top { flex-direction: column; align-items: center; }
  .site-footer .footer-contact-line { gap: 4px 14px; }
}


/* ==========================================================================
   23. 会员中心 · 联系客服（概览卡片 / 面板提示 / 悬浮按钮弹窗）
   ========================================================================== */

.contact-card {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--bg-panel);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius);
}
[data-theme="light"] .contact-card { border-color: rgba(0, 0, 0, .08); }

.contact-card-title,
.kefu-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-text);
  margin-bottom: 12px;
}

.contact-rows { display: flex; flex-direction: column; gap: 0; }

.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px;
}
.contact-row:last-child { border-bottom: none; }
.contact-row .contact-label {
  color: var(--text-sub);
  width: 62px;
  flex: none;
  font-size: 12.5px;
}
.contact-row .contact-value { color: var(--text); font-weight: 600; word-break: break-all; }

.contact-copy {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur);
}
.contact-copy:hover { color: var(--gold-text); border-color: var(--gold-text); }

.contact-qq-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--gold-text);
  text-decoration: none;
}
.contact-qq-link:hover { text-decoration: underline; }

/* 面板底部提示行 */
.contact-tip {
  margin-top: 18px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-sub);
  background: rgba(212, 160, 23, .08);
  border: 1px dashed rgba(212, 160, 23, .45);
  border-radius: var(--radius);
}

/* 悬浮客服按钮（v17）：品牌深色底座 + 线性图标，跟站标同一套配色，
   不再是半透明金渐变 + emoji —— 那个组合一眼就是"AI 生成的" */
.kefu-fab {
  position: fixed;
  right: 22px;
  bottom: 78px;
  z-index: 90;
  width: 58px;
  padding: 10px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(240, 185, 11, .5);
  border-radius: 15px;
  background: linear-gradient(160deg, #24324f 0%, #0b1220 100%);
  color: #ffd98a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
}
.kefu-fab:hover {
  transform: translateY(-2px);
  border-color: #ffd98a;
  box-shadow: 0 12px 26px rgba(240, 185, 11, .26), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.kefu-fab .kefu-ico { display: block; width: 21px; height: 21px; }
.kefu-fab .kefu-ico svg { display: block; width: 100%; height: 100%; }
.kefu-fab .kefu-txt { line-height: 1; }

/* 弹窗 */
.kefu-mask {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* --dock：右下角气泡（首页 / 会员中心用）。
   遮罩透明且不拦截点击，弹窗贴着悬浮按钮弹出，而不是糊住整页的模态框。 */
.kefu-mask--dock {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 22px 150px;
  pointer-events: none;
}
.kefu-mask--dock .kefu-pop { pointer-events: auto; }

.kefu-pop {
  width: 100%;
  max-width: 344px;
  padding: 16px 18px 18px;
  background: var(--bg-panel-solid);
  border: 1px solid rgba(240, 185, 11, .32);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .4);
}
.kefu-mask--dock .kefu-pop { animation: kefuPop .2s var(--ease); }
@keyframes kefuPop {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* 标题条：金色竖条 + 主标题 + 副标题 + 关闭 */
.kefu-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.kefu-head::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd75e, #eaa800);
}
.kefu-head-t { flex: 0 0 auto; color: var(--text); }
.kefu-head-s {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kefu-close {
  flex: 0 0 auto;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-sub);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.kefu-close:hover { color: var(--gold-text); }
.kefu-body .contact-row .contact-value { flex: 1; }

/* 客服微信二维码 */
.qrcode-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(212, 160, 23, .35);
  text-align: center;
}
.qrcode-wrap .qrcode-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-text);
  margin-bottom: 10px;
}
.qrcode-wrap .qrcode-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.qrcode-wrap .qrcode-id {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-sub);
  word-break: break-all;
}
.qrcode-wrap .qrcode-id b,
.qrcode-wrap .qrcode-id strong { color: var(--gold-text); }

@media (max-width: 768px) {
  /* v17.53（站长）：移动端客服浮标改右下角小圆钮（只留图标）——
     原来竖排大按钮悬在屏幕中部右侧，正好压在搜索框/列表上，访客点不了内容 */
  .kefu-fab {
    right: 12px;
    bottom: 16px;
    width: 46px;
    padding: 12px 0 10px;
    border-radius: 50%;
    gap: 3px;
  }
  .kefu-fab .kefu-txt { display: none; }
  .kefu-fab .kefu-ico { width: 22px; height: 22px; }
  /* v17.53：真身是 #kfuFab（kefu.js 运行时注入样式，晚于本文件 → 必须 !important）。
     原来右中竖排大按钮（56×84）压在搜索框/列表上；改右下角小圆钮只留图标。 */
  #kfuFab {
    top: auto !important;
    bottom: 16px !important;
    right: 12px !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;          /* 藏「在线客服」四字（裸文本节点） */
    transform: none !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.28) !important;
  }
  #kfuFab:hover { transform: none !important; }
  #kfuFab .kfu-ico { width: 22px !important; height: 22px !important; }
  /* 详情页底部操作条是固定定位，客服小圆钮会压住「返回列表」右端；
     详情页信息表里已直接展示客服QQ，故详情页隐藏客服浮钮。 */
  body.detail-page #kfuFab { display: none !important; }
  .qrcode-wrap .qrcode-img { width: 150px; height: 150px; }
}

/* ==========================================================================
   广告位（竖排列表；轮播相关样式已随功能移除）
   ========================================================================== */

/* ==========================================================================
   「购买金币」按钮（首页顶栏 + 会员中心金币卡片）
   ========================================================================== */
.buy-coin-btn {
  display: inline-block;
  border: 1px solid var(--gold-dark);
  color: var(--gold-text-soft);
  background: rgba(166, 27, 41, .06);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast, .15s) ease, transform var(--dur-fast, .15s) ease;
}
.buy-coin-btn:hover { background: rgba(166, 27, 41, .16); transform: translateY(-1px); }
.buy-coin-btn:active { transform: translateY(0); }

.stat-card .buy-coin-btn {
  margin-top: 10px;
  padding: 4px 12px;
  font-size: 12px;
}

/* ==========================================================================
   28. BBK Editor 富文本编辑器（后台内容表单 + 会员发布表单）
   ========================================================================== */

.bk-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  overflow: hidden;
}

.bk-editor:focus-within { border-color: var(--gold-text); }

.bk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.bk-btn {
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 26px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: 0.15s ease all;
}

.bk-btn:hover { border-color: var(--border); background: var(--bg-elevated); }
.bk-btn.active,
.bk-btn.src-toggle-on { border-color: var(--gold-text); color: var(--gold-text); }
.bk-btn.busy { opacity: .5; pointer-events: none; }
.bk-btn span { font-size: 12px; }

.bk-area {
  min-height: 300px;
  max-height: 58vh;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text);
  outline: none;
  word-break: break-word;
}

.bk-area:empty::before {
  content: attr(data-placeholder);
  color: var(--text-mute);
  pointer-events: none;
}

.bk-area img { max-width: 100%; height: auto; border-radius: 6px; }
.bk-area h2 { font-size: 18px; margin: 14px 0 8px; }
.bk-area blockquote {
  margin: 10px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--gold);
  background: var(--bg);
  color: var(--text-mute);
  border-radius: 0 6px 6px 0;
}
.bk-area ul, .bk-area ol { padding-left: 24px; }
.bk-area a { color: var(--gold-text); }

/* 弹窗内的富文本编辑器再高一档：后台编辑内容 / 公告时视野更舒展 */
.pop-content .bk-area { min-height: 420px; max-height: 62vh; }
.pop-content .bk-source { min-height: 420px; }

.bk-source {
  display: block;
  width: 100%;
  min-height: 300px;
  padding: 14px 16px;
  border: none;
  outline: none;
  background: var(--bg);
  color: var(--text);
  font-family: Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  resize: vertical;
}

.bk-count {
  padding: 4px 10px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-mute);
  text-align: right;
}
.bk-count.over { color: var(--red-soft); }

/* ---- 编辑器增强细节 ---- */
.bk-toolbar {
  align-items: center;
}

.bk-sep {
  width: 1px;
  height: 18px;
  margin: 0 2px;
  background: var(--border);
  flex-shrink: 0;
}

.bk-select {
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  outline: none;
}
.bk-select:hover { border-color: var(--gold-text); }

.bk-btn-upload span { margin-left: 3px; font-size: 12px; }

.bk-area h1,
.bk-area h2,
.bk-area h3,
.bk-area h4 {
  margin: 14px 0 8px;
  font-weight: 600;
  line-height: 1.4;
}
.bk-area h1 { font-size: 20px; }
.bk-area h2 { font-size: 18px; }
.bk-area h3 { font-size: 16px; }
.bk-area h4 { font-size: 15px; }

.bk-area p { margin: 8px 0; }
.bk-area pre {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bg);
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
  overflow-x: auto;
}
.bk-area code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bg);
  font-family: Consolas, Monaco, monospace;
  font-size: 13px;
}
.bk-area hr {
  margin: 14px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.bk-area table.bk-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}
.bk-area table.bk-table th,
.bk-area table.bk-table td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  vertical-align: top;
}
.bk-area table.bk-table th {
  background: var(--bg);
  font-weight: 600;
}

.bk-fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.bk-fullscreen .bk-toolbar {
  flex-shrink: 0;
  padding: 8px 12px;
}
.bk-fullscreen .bk-area {
  flex: 1;
  max-height: none;
  overflow-y: auto;
  padding: 16px 20px;
}

/* 移动端广告图片同样按原比例完整显示（与桌面一致，无需额外处理） */

/* ==========================================================================
   金币收支标签页（v14.8：单一金币账本）
   ========================================================================== */
.coinlog-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 14px;
  border-radius: 10px;
  background: var(--bg-panel, rgba(0, 0, 0, .06));
  border: 1px solid var(--border);
}
.coinlog-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-sub, #606266);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  user-select: none;
}
.coinlog-tab:hover { color: var(--text-main, #303133); }
.coinlog-tab--active {
  background: linear-gradient(135deg, #f0b90b, #d49a0a);
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(240, 185, 11, .28);
}
.coinlog-tab--active:hover { color: #1a1a1a; }
.coinlog-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 2px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0, 0, 0, .18);
}


/* ==========================================================
   v17 工具库 —— 82pc 风格（面包屑 + 大搜索行 + 分组卡片板块）
   ========================================================== */

/* ---- 面包屑 ---- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 2px 0;
  font-size: 13px;
  color: var(--text-sub);
}
.crumbs a { color: var(--text-sub); transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--gold-text); }
.crumbs .crumb-sep { color: var(--text-mute); }
.crumbs .crumb-here {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-text);
}

/* ---- 搜索行 ---- */
.tool-search-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 14px 0 20px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.tool-search-row .tb-search { flex: 1 1 280px; margin: 0; }
.tool-search-row .tool-count-tip {
  font-size: 13px;
  color: var(--text-sub);
  white-space: nowrap;
}
.tool-search-row .tool-count-tip b {
  font-size: 17px;
  color: var(--gold-text);
}
.tool-search-row .qq-shine { margin-left: auto; }

/* ---- 分组板块 ---- */
.tool-sec { margin-bottom: 30px; }
.tool-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--gold);
  position: relative;
}
.tool-sec-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--red);
}
.tool-sec-ico { font-size: 20px; line-height: 1; }
.tool-sec-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.tool-sec-count {
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(166, 27, 41, 0.12);
  border: 1px solid rgba(166, 27, 41, 0.35);
  font-size: 12px;
  color: var(--gold-text);
  white-space: nowrap;
}
.tool-sec-more {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-sub);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.tool-sec-more:hover { color: var(--gold-text); }

/* ---- 工具卡片：无图占位（82pc 图标卡风格） ---- */
.card-img-ph {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  font-size: 44px;
  background: var(--bg-elevated);
}

/* ---- 移动端 ---- */
@media (max-width: 720px) {
  .tool-sec-title { font-size: 15px; }
  .tool-search-row .qq-shine { display: none; }
}


/* ==========================================================
   v17.1 顶部库入口大按钮（传奇工具库 / 传奇版本库）
   ========================================================== */
.nav-lib-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd300 0%, #ffb000 100%);
  color: #2b1c00 !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(255, 176, 0, 0.5);
  animation: libPulse 2.2s ease-in-out infinite;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav-lib-btn:hover {
  color: #2b1c00 !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(255, 176, 0, 0.7);
}
@keyframes libPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(255, 176, 0, 0.5), 0 0 0 0 rgba(166, 27, 41, 0.5); }
  50%      { box-shadow: 0 4px 16px rgba(255, 176, 0, 0.5), 0 0 0 9px rgba(166, 27, 41, 0); }
}
@media (max-width: 720px) {
  .nav-lib-btn { padding: 7px 14px; font-size: 13px; letter-spacing: 0; }
}


/* ==========================================================
   v17.2 顶部水平导航（3122 风格）+ 版本库左侧切换导航
   ========================================================== */

/* ---- 顶部第二行：水平菜单 ---- */
.main-nav {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 10px;
}
.main-nav-link {
  position: relative;
  padding: 6px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-sub);
  border-radius: 8px;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.main-nav-link:hover { color: var(--gold-text); background: var(--bg-elevated); }
.main-nav-link.active { color: var(--gold-text); }
.main-nav-link.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-warm));
}
.main-nav-link.nav-lib-btn { margin-left: 8px; padding: 7px 18px; font-size: 14px; animation: none; }
.main-nav-link.nav-lib-btn::after { display: none; }
.main-nav-link.nav-lib-btn:hover { transform: translateY(-1px); }

/* ---- 版本库左侧切换导航 ---- */
.main-container.has-side { display: flex; align-items: flex-start; gap: 18px; }
.main-container.has-side .left-content { flex: 1; min-width: 0; }
.ver-side {
  flex: 0 0 188px;
  position: sticky;
  top: 140px;
}
.side-block {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.side-block-title {
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 3px;
  padding: 6px 8px 6px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-sub);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side-link + .side-link { margin-top: 2px; }
.side-link:hover { background: var(--bg-elevated); color: var(--gold-text); }
.side-link.active {
  background: linear-gradient(135deg, #ffd300, #ffb000);
  color: #2b1c00;
  font-weight: 700;
}
.side-link-tools { color: var(--gold-text); font-weight: 600; }
.side-link-tools:hover { background: rgba(166, 27, 41, 0.1); }

/* 侧栏内的引擎按钮改成竖排列表样式 */
.ver-side .filter-btn {
  display: flex;
  width: 100%;
  margin: 0 0 2px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-sub);
  justify-content: flex-start;
}
.ver-side .filter-btn:hover { background: var(--bg-elevated); color: var(--gold-text); }
.ver-side .filter-btn.active { background: var(--bg-elevated); color: var(--gold-text); }

/* ---- 移动端 ---- */
@media (max-width: 960px) {
  .main-nav { overflow-x: auto; }
  .main-nav-link { padding: 6px 12px; font-size: 14px; }
  .main-container.has-side { flex-direction: column; }
  .ver-side {
    position: static;
    flex-basis: 100%;
    display: flex;
    gap: 12px;
  }
  .ver-side .side-block { flex: 1; margin-bottom: 0; }
  .ver-side .filter-btn { display: inline-flex; width: auto; margin-right: 4px; }
}


/* ==========================================================================
   v18 全站 UI 重做：3122 风格清爽版
   --------------------------------------------------------------------------
   覆盖此前过重的 AI 模板感：浅色优先、去金色光晕/彩虹渐变/呼吸动画、
   卡片改白底简洁、导航改单栏干净、侧边栏去黄底高亮。
   ========================================================================== */

/* ---- 1. 设计变量重置 ---- */
:root {
  --gold:        #a61b29;
  --gold-deep:   #7f1420;
  --gold-dark:   #7f1420;
  --gold-soft:   #e58890;
  --gold-warm:   #c23a45;
  /* v14.9：--gold-text 刻意不在这里定义。
     它是「金色文字」令牌，必须跟随主题（浅色要压深成 #a61b29、深色要用亮金）；
     写在 :root 里会因为「特异性相同且位置更靠后」压掉上面两套主题的取值，
     导致浅色白底上只有 3.3:1 对比度。 */

  --blue:        #2563eb;
  --blue-deep:   #1d4ed8;
  --cyan:        #0ea5e9;
  --red:         #dc2626;
  --red-soft:    #ef4444;
  --orange:      #f59e0b;
  --green:       #16a34a;

  /* v16.8：UI 强调色 = 深红 #a61b29（白底 7.5:1、白字 7.5:1），
     上一版深金被站长反馈「土黄难看」→ 全站按钮/悬停/激活统一深红；
     --gold 家族令牌同步翻红（令牌名不改，省 100+ 处引用） */
  --accent:      #a61b29;
  --accent-deep: #7f1420;

  --radius-sm:   6px;
  --radius:      8px;
  --radius-lg:   10px;
  --gap:         18px;
  /* v16.14：站长要求「首页页面大一点」—— 内容区从 1280 放宽到 1440，
     列表行的标题/标签拿到更多横向空间，不再一个字一个字地截断 */
  --max-width:   1440px;

  --shadow-card:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-gold:  none;
  --shadow-btn:   0 1px 2px rgba(0,0,0,0.05);
}

:root,
[data-theme="light"] {
  --bg:            #f8fafc;
  --bg-page:       #f1f5f9;
  --bg-panel:      #ffffff;
  --bg-panel-solid:#ffffff;
  --bg-card:       #ffffff;
  --bg-elevated:   #f8fafc;
  --bg-input:      #f1f5f9;

  --text:          #111827;
  --text-sub:      #4b5563;
  /* v14.9：原值 #9ca3af 压在白底上只有 ≈2.5:1，而全站有 64 处引用
     （表格表头、「加载中」、水印提示、副标题…）全部发虚看不清 →
     压深到 #6b7280（≈4.6:1），达到 WCAG AA 正文标准。 */
  --text-mute:     #6b7280;
  /* 金色文字同理：#7f1420 白底只有 3.3:1 → 用更深的琥珀色 #a61b29（≈4.7:1） */
  --gold-text:     #a61b29;

  --border:        #e5e7eb;
  --border-strong: #d1d5db;

  /* v16.81：滚动条配色（站长反馈「下拉条太不好找」—— 原来是透明轨道 +
     #d1d5db 浅灰滑块，白底上基本看不见）。轨道给浅灰底形成「槽」，
     滑块用站点红，一眼能看见、好拖。 */
  --sb-track:       #e8ebf0;
  --sb-thumb:       #a61b29;
  --sb-thumb-hover: #7f1420;

  --banner-bg:     rgba(255,255,255,0.98);
  --banner-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --notice-bg:     #fdf2f3;
  --notice-border: #f4d9db;
}

/* v14.12：原 [data-theme="dark"] 变量块已随「取消黑白切换」一并移除 */

body { background: var(--bg-page); color: var(--text); font-size: 15px; }
a:hover { color: var(--accent); }

/* v14.9：全站有 6 处 `outline:none`，而 :focus-visible 一处都没有 ——
   键盘 Tab 完全看不出焦点落在哪（侧栏导航、分类项、按钮都受影响）。
   :focus-visible 只在键盘操作时触发，鼠标点击不会冒出难看的外框。 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* v14.9：userinfo.html 的 .stat-tip 一直只有内联 color、没有类定义 →
   抽成类，让它跟随主题，也少两处内联样式 */
.stat-tip { color: var(--text-mute); font-size: 12px; line-height: 1.5; }

/* ==========================================================================
   v14.13：后台「本页已过期」提示条
   --------------------------------------------------------------------------
   后台是单页应用，标签页长期开着不会自己刷新。站长发新版后，旧标签页里
   点「编辑」跑的还是旧代码，看起来就像「改动没生效」。检测到服务端版本更新
   时这条会自动出现（默认 hidden），点「立即刷新」即可。
   跟随文档流、不吸顶 —— 顶栏在窄屏会换行变高，写死偏移会被顶栏盖住。
   ========================================================================== */
.ver-stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--notice-bg);
  border-bottom: 1px solid var(--notice-border);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.ver-stale[hidden] { display: none; }
.ver-stale b { color: var(--accent); }

@media (max-width: 720px) {
  .ver-stale { gap: 8px; padding: 9px 12px; font-size: 12.5px; }
}

/* ---- 2. 顶部导航 ---- */
.top-banner {
  position: sticky;
  top: 0;
  min-height: 0;
  height: 64px;
  padding: 0 24px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  background: var(--banner-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--banner-shadow);
  overflow: visible;
}
.top-banner::after { display: none; }
.top-banner.scroll-solid {
  background: var(--banner-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--banner-shadow);
}

.banner-left { flex: 0 0 auto; gap: 10px; }
.banner-left img { height: 34px; }
.banner-logo-text {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
.banner-slogan {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-mute);
  max-width: 260px;
}

/* 主导航居中 */
.main-nav {
  flex: 1 1 auto;
  flex-basis: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.main-nav-link {
  position: relative;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sub);
  transition: color .2s ease, background .2s ease;
}
.main-nav-link:hover {
  color: var(--text);
  background: var(--bg-elevated);
}
.main-nav-link.active {
  color: var(--accent);
  font-weight: 600;
  background: transparent;
}
.main-nav-link.active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* 去掉传奇工具库大按钮特效 */
.nav-lib-btn,
.main-nav-link.nav-lib-btn {
  background: transparent !important;
  color: var(--text-sub) !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-radius: 6px !important;
}
.nav-lib-btn:hover,
.main-nav-link.nav-lib-btn:hover {
  background: var(--bg-elevated) !important;
  color: var(--text) !important;
  transform: none !important;
  box-shadow: none !important;
}
.nav-lib-btn.active,
.main-nav-link.nav-lib-btn.active {
  color: var(--accent) !important;
}

/* 右上角用户区 */
.nav-user-right { gap: 10px; }
.nav-user-link,
#buyCoinBtn {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 500;
  transition: all .2s ease;
}
.nav-user-link:hover,
#buyCoinBtn:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: none;
  transform: none;
}
#buyCoinBtn { color: var(--gold-text); border-color: rgba(166,27,41,0.35); }
#buyCoinBtn:hover { background: rgba(166,27,41,0.08); }
.nav-user-chip {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  padding: 4px 12px 4px 4px;
}
.nav-user-chip .avatar { width: 24px; height: 24px; font-size: 11px; }

/* 移动端菜单按钮 */
.nav-menu-btn {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-sub);
}

/* ---- 3. 公告栏 ---- */
.notice-bar {
  margin: 14px 0;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  font-size: 13px;
}
.notice-bar .notice-label {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ---- 4. 工具栏/标题/搜索 ---- */
.main-container { margin-top: 18px; }
.tool-bar {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.page-title-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  padding-left: 0;
}
.page-title-text::before { display: none; }
.count-tip { font-size: 13px; color: var(--text-mute); }
.count-tip b { color: var(--text); font-weight: 600; }
.qq-shine {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mute);
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}
.qq-shine b, .qq-shine strong { color: var(--blue); font-weight: 600; }
.top-search-input {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-right: none;
  background: var(--bg-input);
  border-radius: 6px 0 0 6px;
}
.top-search-input:focus { border-color: var(--accent); }
.top-search-btn {
  padding: 9px 18px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  border-radius: 0 6px 6px 0;
}
.top-search-btn:hover {
  background: var(--blue-deep);
  box-shadow: none;
  filter: none;
}
.view-btn {
  height: 32px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-sub);
  border-radius: 6px;
}
.view-btn:hover { border-color: var(--border-strong); color: var(--text); }
.view-btn.active {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- 5. 卡片 ---- */
.card-grid-view {
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px;
}
.card-item {
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card-item:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}
.card-img-box {
  margin-bottom: 12px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.card-img-box img { transition: transform .35s ease; }
.card-item:hover .card-img-box img { transform: scale(1.04); }
.card-img-badge {
  top: 8px;
  left: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--green);
  color: #fff;
}
.card-img-ph {
  min-height: 176px;
  background: var(--bg-elevated);
  font-size: 36px;
  color: var(--text-mute);
}
.card-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  min-height: 42px;
  color: var(--text);
  /* v16.81：游戏版本标题**完整显示**，多长都不截断。
     上面那份旧 .card-title（758 行）是 display:-webkit-box + line-clamp:2，
     这里的覆盖没写 display / line-clamp / overflow，于是那三条照样生效 ——
     长标题就被砍成两行 + 省略号（正是站长说的「版本标题显示不全」）。
     现在显式改回普通块级，整段换行铺开。 */
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.card-title a:hover { color: var(--accent); }
.card-tag-row {
  gap: 6px;
  margin-bottom: 12px;
  min-height: 24px;
}
.card-bottom-bar {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-mute);
}

/* ---- 6. 标签 ---- */
.engine-tag,
.engine-tag1 {
  width: auto;
  min-width: 64px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 6px;
}
.engine-tag {
  background: rgba(166,27,41,0.08);
  color: var(--accent);
  border: 1px solid rgba(166,27,41,0.18);
}
.engine-tag1 {
  background: rgba(107,114,128,0.08);
  color: var(--text-sub);
  border: 1px solid rgba(107,114,128,0.22);
  font-weight: 600;
}
.cate-tag {
  padding: 4px 12px;
  font-size: 12.5px;
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-sub);
  border: 1px solid var(--border);
}
.cate-tag.is-match {
  background: rgba(166,27,41,0.08);
  color: var(--accent);
  border-color: rgba(166,27,41,0.18);
}

/* ---- 7. 下载/权限按钮 ---- */
.perm-tag {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  transition: all .2s ease;
}
.perm-tag:hover { transform: none; }
.perm-free { background: var(--green); }
.perm-vip  { background: var(--blue); }
.perm-svip { background: var(--red); }
.perm-dl   { background: var(--accent); color: #fff; }

/* ---- 8. 侧边栏 ---- */
.main-container.has-side { gap: 16px; }
.ver-side { flex: 0 0 180px; top: 80px; }
.side-block {
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.side-block-title {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 2px;
  padding: 6px 10px 4px;
  text-transform: uppercase;
}
.side-link {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-sub);
  transition: all .15s ease;
}
.side-link:hover {
  background: var(--bg-elevated);
  color: var(--text);
}
.side-link.active {
  background: rgba(166,27,41,0.08);
  color: var(--accent);
  font-weight: 600;
}
.side-link-tools { color: var(--text-sub); font-weight: 500; }
.side-link-tools:hover { background: var(--bg-elevated); }
.ver-side .filter-btn {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-sub);
}
.ver-side .filter-btn:hover {
  background: var(--bg-elevated);
  color: var(--text);
}
.ver-side .filter-btn.active {
  background: rgba(166,27,41,0.08);
  color: var(--accent);
  font-weight: 600;
}

/* ---- 9. 工具库分组板块 ---- */
.tool-sec { margin-bottom: 28px; }
.tool-sec-head {
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.tool-sec-head::after { display: none; }
.tool-sec-ico { font-size: 18px; }
.tool-sec-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.tool-sec-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-mute);
}
.tool-sec-more { font-size: 12px; color: var(--text-mute); }
.tool-sec-more:hover { color: var(--accent); }
.tool-search-row {
  padding: 12px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.tool-search-row .qq-shine { margin-left: auto; }

/* ---- 10. 列表视图 ---- */
.table-view {
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.table-row { border-bottom: 1px solid var(--border); }
.table-row:hover { background: rgba(166,27,41,0.03); }
.table-row .name-link:hover { color: var(--accent); }

/* ---- 11. 按钮 ---- */
.btn {
  padding: 10px 22px;
  border-radius: var(--radius);
  font-weight: 500;
  transition: all .2s ease;
}
.btn:hover { transform: none; }
.btn-gold {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.btn-gold:hover {
  background: var(--blue-deep);
  box-shadow: none;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ---- 12. 弹窗 ---- */
.pop-layer { background: rgba(0,0,0,0.55); }
.pop-content {
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  animation: none;
}

/* ==========================================================================
   v14.11：后台「发布 / 编辑」= 独立整页（不再是弹窗）
   --------------------------------------------------------------------------
   v14.10 只是把它从「居中弹窗」放大成「整屏浮层」，站长用下来仍觉得是弹窗：
   容易编辑一半就退出去、还老弹「是否放弃编辑」。根因是它始终浮在列表上面。
   现在它是 .member-main 里一个真正的页面（#panel-edit），与「内容管理」同级：
     顶栏吸顶（← 返回 / 标题 / 未保存提示）+ 表单区 + 底栏吸底（保存 / 取消返回）。
   没有任何「点一下就关」的区域，Esc 也不再关闭编辑。
   （「批量复制卡密」那种只读小窗仍保留弹窗形态，点掉也没有损失。）
   ========================================================================== */
.member-panel.edit-page {
  margin: -22px;                    /* 抵消 .member-main 的 22px 内边距，铺满内容区 */
  border-radius: var(--radius-lg);
  background: var(--bg-panel-solid);
}

.edit-page-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  background: var(--bg-panel-solid);
  border-bottom: 1px solid var(--border);
}
.edit-back-btn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 13px;
  font-size: 13px;
  color: var(--text-sub);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.edit-back-btn:hover { color: var(--accent); border-color: var(--accent); }

.edit-page-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 17px;
  font-weight: 700;
  color: var(--text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-dirty {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--gold-text);
  white-space: nowrap;
}

.edit-page-body { padding: 20px 22px 8px; }

.edit-page-foot {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 22px;
  background: var(--bg-panel-solid);
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  .edit-page-head { gap: 8px; padding: 11px 14px; }
  .edit-page-title { font-size: 15px; }
  .edit-dirty { display: none; }
  .edit-page-body { padding: 14px 14px 8px; }
  .edit-page-foot { padding: 12px 14px; }
}
.pop-content h1, .pop-content h3 {
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}
#popBox > h1 {
  color: var(--text);
  font-size: 18px;
  padding-left: 12px;
}
#popBox > h1::before { background: var(--accent); }
.pop-outside-close {
  background: var(--bg-elevated);
  color: var(--text-mute);
  border-radius: 8px;
}
.pop-outside-close:hover {
  background: var(--bg-elevated);
  color: var(--text);
  transform: none;
}

/* ---- 13. 加载更多/分页 ---- */
#loadMoreBtn {
  padding: 10px 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-sub);
  font-weight: 500;
}
#loadMoreBtn:hover {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: none;
  transform: none;
}
.pager button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ---- 14. 动画降噪 ---- */
.top-banner::after,
.qq-shine,
.nav-lib-btn,
.libPulse,
.streamLight { animation: none !important; }

/* ---- 15. 滚动条 ---- */
html { scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  min-height: 40px;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: var(--border-strong);
}
::-webkit-scrollbar-thumb:hover { background-color: #9ca3af; }

/* ---- 16. 会员中心 ---- */
.member-side nav a:hover { background: var(--bg-elevated); color: var(--accent); }
.member-side nav a.active {
  background: rgba(166,27,41,0.08);
  border-left-color: var(--accent);
  color: var(--accent);
}
.member-panel > h2 { color: var(--text); border-bottom-color: var(--border); }
.stat-card:hover { border-color: var(--border-strong); transform: none; }
.stat-card .stat-num { color: var(--accent); }
.level-card:hover { border-color: var(--border-strong); transform: none; }
.level-card--current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 18px rgba(166,27,41,0.08);
}
.level-card--current::before { background: var(--accent); color: #fff; }
.level-card-price { color: var(--accent); }
.data-table tbody tr:hover { background: rgba(166,27,41,0.03); }
.data-table .num { color: var(--accent); }

/* ---- 17. 收藏/历史/返回顶部 ---- */
.card-fav-btn:hover { background: var(--accent); color: #fff; }
.card-fav-btn.active { color: var(--accent); }
.card-fav-btn.active:hover { background: var(--accent); color: #fff; }
.row-fav-btn:hover { border-color: var(--accent); color: var(--accent); }
.row-fav-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(166,27,41,0.06); }
#historyBtn { background: var(--accent); color: #fff; }
#historyBtn:hover { box-shadow: none; }
#backTopBtn { border-color: var(--gold); color: var(--gold-text); box-shadow: 0 6px 18px rgba(190,150,55,.30); }
#backTopBtn:hover { background: var(--gold); color: #fff; box-shadow: 0 10px 26px rgba(190,150,55,.45); }

/* ---- 18. 响应式：平板以下导航换行 ---- */
@media (max-width: 960px) {
  .top-banner {
    flex-wrap: wrap;
    height: auto;
    min-height: 58px;
    padding: 10px 16px;
  }
  .main-nav {
    flex-basis: 100%;
    justify-content: flex-start;
    order: 3;
    padding-top: 4px;
  }
  .ver-side { position: static; flex-basis: 100%; }
}

@media (max-width: 768px) {
  .wrap-container { padding: 0 12px 24px; }
  .card-grid-view { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-item { padding: 12px; }
  .card-title { font-size: 13px; min-height: 39px; }
  .tool-bar { padding: 10px 12px; }
  .tool-search-row { padding: 10px 12px; }
}

@media (max-width: 560px) {
  .card-grid-view { grid-template-columns: 1fr; }
  /* v17.16：缩略图高度交给 aspect-ratio 16/10，不再写死 */
  .banner-slogan { display: none; }
  .nav-user-link { padding: 6px 10px; font-size: 12px; }
}


/* ==========================================================================
   v18.1 左侧统一侧边栏（取代顶部导航）
   ========================================================================== */

/* 仅带 .with-sidebar 的页面（版本库 / 工具库）隐藏旧顶栏，改用左侧统一侧边栏；
   会员中心(userinfo.html)与后台(admin.html)保留各自顶栏与“返回首页”入口 */
.with-sidebar .top-banner { display: none !important; }

.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }

.app-side {
  flex: 0 0 240px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  z-index: 100;
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.side-brand-mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.side-brand-text {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.3px;
}
.side-brand-logo {
  display: block;
  width: 208px;   /* v17.95：龙形徽标版加宽（356:96），原来的 184 会把字压小 */
  max-width: 100%;
  height: auto;
}
.ver-total-tip {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}
.ver-total-tip b { color: var(--accent); }

/* ---- 顶栏 / 登录页 LOGO（统一走 assets/logo.svg，矢量不糊） ---- */
.banner-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.banner-left .banner-logo-img,
.banner-logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

.login-brand-logo {
  display: inline-block;
  width: 236px;
  max-width: 100%;
  height: auto;
}

.side-toggle {
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text-sub);
  font-size: 16px;
  cursor: pointer;
}

.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sub);
  text-decoration: none;
  transition: all .15s ease;
}
.side-nav-link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-mute);
  opacity: 0.35;
  transition: all .15s ease;
}
.side-nav-link:hover { background: var(--bg-elevated); color: var(--text); }
.side-nav-link:hover::before { opacity: 0.6; }
.side-nav-link.active { background: rgba(166,27,41,0.08); color: var(--accent); font-weight: 600; }
.side-nav-link.active::before { background: var(--accent); opacity: 1; }

.side-scroll { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.side-scroll::-webkit-scrollbar { width: 5px; }
.side-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

.side-block { margin-bottom: 14px; }
.side-block-title {
  padding: 4px 8px 8px;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-sub);
  text-decoration: none;
  transition: all .15s ease;
}
.side-link:hover { background: var(--bg-elevated); color: var(--text); }
.side-link.active { background: rgba(166,27,41,0.08); color: var(--accent); font-weight: 600; }

.side-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.side-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--bg-elevated);
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
}
.side-user .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.side-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all .15s ease;
}
.side-btn-login { background: var(--accent); color: #fff; }
.side-btn-login:hover { background: var(--blue-deep); }
.side-btn-coin {
  background: var(--bg-elevated);
  color: var(--gold-text);
  border: 1px solid rgba(166,27,41,0.3);
}
.side-btn-coin:hover { background: rgba(166,27,41,0.08); }

.app-main { flex: 1; min-width: 0; }

/* v14.9：.side-fab 原来只在 ≤980px 的媒体查询里出现，没有基础规则 ——
   桌面端完全靠 min-width:981px 的 display:none!important 撑着，
   一旦被其它 display 声明覆盖就会在桌面漏出来。补一条基础规则。 */
.side-fab { display: none; }
/* v17.53：移动端顶部栏目条 —— 基础态隐藏，仅 ≤980px 媒体查询里启用。
   ⚠️ 类名必须用 .m-nav：.top-nav 已被文件 8887 行起的 v16.79「列表编辑页顶栏」占用，
   同名规则在文件更后位置，同特异性下后写者胜 —— 会把这里的样式整块覆盖掉（踩过的坑）。 */
.m-nav { display: none; }

/* 移动端：侧边栏收为抽屉 */
@media (max-width: 980px) {
  .app-shell { display: block; position: relative; }
  .app-side {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.1);
    z-index: 600;
  }
  .app-side.open { transform: none; }
  .side-toggle { display: inline-flex; }
  .side-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 590;
  }
  .side-backdrop.show { display: block; }
  .side-fab {
    position: fixed;
    left: auto; right: 10px; top: 6px;
    z-index: 620;
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-panel);
    color: var(--text-sub);
    font-size: 17px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
  }
  /* v17.53（站长）：移动端顶部栏目条 —— 主导航不再藏进汉堡，
     内容主栏目横向单行排开、一眼可见；账号/条款类留在汉堡抽屉。
     类名用 .m-nav（.top-nav 已被 v16.79 列表编辑页顶栏占用，会撞车）。 */
  .m-nav {
    display: flex;
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 560;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 54px 0 10px;   /* 右侧给汉堡让位 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-panel-solid);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .m-nav::-webkit-scrollbar { display: none; }
  .m-nav .m-nav-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-sub);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    text-decoration: none;
    white-space: nowrap;
  }
  .m-nav .m-nav-link.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
  }
  /* 顶部栏目条（sticky 在流内占 50px）替汉堡承担让位，内容只需留小空隙 */
  .with-sidebar .wrap-container { padding-top: 12px; }
}
@media (min-width: 981px) {
  .side-fab, .side-backdrop { display: none !important; }
}

/* v14.9：小屏不再强制表头不换行。
   `.data-table th { white-space: nowrap }` 配合多列表格会让 min-content 宽度
   超过容器，而会员中心的 12 张表都没有 .table-scroll 包裹 → 整个页面出现
   横向滚动条。这里在小屏放开换行并收紧内边距。 */
@media (max-width: 768px) {
  .data-table th { white-space: normal; }
  .data-table { font-size: 12.5px; }
  .data-table th, .data-table td { padding-left: 8px; padding-right: 8px; }
}

/* ==========================================================================
   v18.2 布局修正：分类/引擎横排 + 左侧站点导航 + 会员区 + 广告图修复
   ========================================================================== */

/* ---- 顶部水平筛选条（仅在版本库显示） ---- */
.filter-bar-wrap {
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.filter-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}
.filter-row + .filter-row {
  border-top: 1px solid var(--border);
}
.filter-row-label {
  flex: 0 0 auto;
  width: auto;   /* v16.17：文案改为「版本类型/引擎类型」四字，改随内容自适应 */
  padding-top: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 1px;
}
.filter-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 覆盖基础 filter-btn 的金色/缩放/光晕，改成清爽的灰底+蓝 active */
.filter-btn {
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all .15s ease;
}
.filter-btn:hover {
  transform: none;
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: none;
}
.filter-btn.active {
  background: rgba(166,27,41,0.08);
  color: var(--accent);
  border-color: rgba(166,27,41,0.25);
  font-weight: 600;
  box-shadow: none;
}

/* ---- v17.70：版本库首页筛选条 —— 站长钦定一律一排，且 1920 宽屏全部可见。
   第二档压缩（首版横滑兜底被站长指出「后面看不见」）：芯片 12px / padding 3×8 /
   gap 4，行距与标签同步收紧，1920 全屏 28 颗约 1290px < 容器 1336px，零滚动全见；
   更窄的窗口才横滑兜底（移动端同款：无遮罩、隐藏滚动条、active 自动滚进可视区）。
   吸取 v17.08 教训：绝不再用 mask 遮罩（那套会把末位吃掉像字被截断）。
   .filter-row--line 仅 index.html 使用，工具库页面零影响。 ---- */
.filter-row--line { padding: 7px 0; gap: 10px; }
.filter-row--line .filter-row-label { padding-top: 6px; white-space: nowrap; letter-spacing: 0; }
/* 下面两排（引擎类型 / 版本性质）与上一排拉开间距，整体更透气、不显空荡 */
.filter-row--line + .filter-row--line { margin-top: 20px; padding-top: 20px; }
.filter-row--line .filter-btn-group {
  flex: 1 1 auto;
  min-width: 0;            /* 允许收缩，溢出交给横向滚动而不是撑爆卡片 */
  flex-wrap: nowrap;       /* 一排，不折行 */
  overflow-x: auto;
  overflow-y: hidden;
  gap: 4px;
  align-items: center;
  padding: 2px 0 3px;      /* 给 hover 边框留一点呼吸位，避免上下被裁 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.filter-row--line .filter-btn-group::-webkit-scrollbar { display: none; }
.filter-row--line .filter-btn {
  flex: 0 0 auto;
  padding: 3px 7px;
  font-size: 12px;
}
.filter-row--line .filter-btn:hover { transform: none; }  /* 溢出容器里禁缩放，防止 hover 放大被裁边 */
.filter-bar-wrap { padding-left: 10px; padding-right: 10px; }  /* 让出一侧边距给芯片 */

/* ≤860px：媒体查询把 .filter-row 设为竖排（flex-direction: column）。
   这里让标签靠上、芯片组拉伸占满整行宽度再折行，避免手机端溢出屏幕。 */
@media (max-width: 860px) {
  .filter-row--line { align-items: stretch; }
  .filter-row--line .filter-row-label { align-self: flex-start; }
  .filter-row--line .filter-btn-group { width: 100%; }
}

/* ---- 左侧会员区 ---- */
.side-member { display: flex; flex-direction: column; gap: 8px; }
.side-guest { display: flex; flex-direction: column; gap: 8px; }
.side-btn-row { display: flex; gap: 8px; }
.side-btn-row .side-btn { flex: 1; }
.side-btn-vip {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}
.side-btn-vip:hover { filter: brightness(1.05); }
.side-btn-ghost {
  background: var(--bg-elevated);
  color: var(--text-sub);
  border: 1px solid var(--border);
}
.side-btn-ghost:hover { background: var(--bg-page); color: var(--text); }


/* ---- 详情弹窗放大 ---- */
.pop-content {
  max-width: 900px;
  width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  border-radius: 12px;
}
.pop-detail-html { max-height: none; }

/* ==========================================================================
   v18.3 版本介绍内固定防骗 + 免责声明块（截图上方，写死常驻）
   ========================================================================== */
.dp-fixed-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
}
.dp-fixed-note p { margin: 0 0 6px; }
.dp-fixed-note p:last-child { margin: 0; }
.dp-fixed-note-disc { color: var(--text-mute); }

/* ==========================================================================
   25. 详情弹窗 v19 · 82pc.com 式资源详情版式
   --------------------------------------------------------------------------
   参考站的版式：一张「资源信息卡」（图标 + 标题 + 简介 + 一行内联元信息 + 标签），
   下面「说明」「下载地址」各是一张白卡片，下载行右侧一颗主按钮。

   元信息从「2 列网格规格表」改成内联「分类：客户端  引擎：通用  大小：1.24 …」：
   同样能读到的字段更多、更紧凑，也不会再把 1.24 / 0 这种值渲染成
   大号右对齐加粗数字（那是后台表单的观感，不是资源站）。
   本节在文件末尾，覆盖前面的 v15 / v17 排版规则。
   ========================================================================== */

/* 弹窗内画布加一层底色，白色分节卡片才立得住（暗色主题跟随变量自动反转） */
#popBox { background: var(--bg); }

/* ---- ① 资源信息卡 ---- */
.dp-idcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
  padding: 22px 24px;
  background: var(--bg-panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
/* v16.44：抬头吸顶已按站长要求取消（v16.43 试过贴顶常驻，长详情往下滚时
   挡内容反而难受）—— 信息卡恢复随内容正常滚动，底部按钮条吸底保留。 */
/* v17.34（站长：缩略图与灰色框「一边高一边低」，不合适也不美观）：
   标题提到栅格第一行通栏；缩略图与右侧信息区同占第二行、等高拉伸，
   左右两块上下齐平，卡片右下不再留一大块参差空白。 */
.dp-idcard.has-media {
  /* v17.75（站长：详情页封面图太小、别扭）：左列 300 -> 420px。
     原图普遍 1440~1539px 宽，420 显示宽仍远低于原图分辨率，不会糊；
     也不至于大到失真。工具库 88px 图标、≤1300 单栏、≤900 移动端均有专属覆盖。 */
  /* v17.77（站长：「现在是每个版本不同的显示效果，太差劲」）：
     顶部信息卡整行锁死最小高度 340px —— 左缩略图固定 420×340，
     右侧参数表 stretch 到同一行高；所有版本点开左右两块严格等高、
     尺寸完全一致，不再随参数多少互相拉扯变形。 */
  /* v17.85（站长：「整体太高了，把容器改矮一点，连带缩略图一起降低」）：
     行高 340 -> 280。 */
  /* v17.88（站长：「高度再降低一点，缩略图再略微改小」）：
     行高 280 -> 240、左列 420 -> 380（灰框自然高仅 191，240 仍绰绰有余，
     stretch 照旧填满，底边齐平不受影响）。 */
  grid-template-columns: 380px minmax(0, 1fr);
  align-items: stretch;
  min-height: 240px;
}
/* 通栏标题：横跨两列独占第一行 */
/* v17.79（站长：所有版本点开要完全一样）：标题区锁两行高 64px ——
   卡片总高不再随标题 1 行 / 2 行浮动（#6 一行 446 vs #219 两行 478）。
   胶囊仍贴首行顶部（v17.35 的 flex-start 不动），一行标题下方留白统一。 */
.dp-idcard.has-media > .dp-title { grid-column: 1 / -1; min-height: 64px; }
/* v17.35（站长）：标题行里的分类字（微变 / 单职业）与「付费版本」徽章，
   原来紧贴标题文字、标题折行时它们跟着掉到第二行左对齐；站长要求挪到
   「灰色价格框外面的右上角」，也就是标题这一行的最右端，右边界与下方
   价格框（￥100 / 立即购买）对齐。
   做法：标题文字单独包一层 .dp-title-text 吃掉剩余宽度，右侧胶囊收进
   .dp-title-tags，用 margin-left:auto 顶到行尾；align-items:flex-start
   让胶囊始终贴标题首行顶部，标题折成两三行也不会把胶囊甩到中间去。 */
#popBox .dp-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* v17.39（站长：「为什么文章的标题不是连续而是另起了一行？」）：
     胶囊组是标题的 flex 兄弟节点，margin-left:auto 顶到行尾的同时会吃掉
     标题约 120px 可用宽度，长标题因此提前折行（末尾 [996PC引擎] 被挤到第二行）。
     这里给标题行建定位上下文，胶囊改成绝对定位脱流（见下），
     标题文字拿回整行宽度，能一行放下的就不再折行。 */
  position: relative;
}
#popBox .dp-title .dp-title-text { flex: 1 1 auto; min-width: 0; }
#popBox .dp-title .dp-title-tags {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: 0;
  /* 位置变更史（这块被改了四次，改之前先看清站长要的是哪一个）：
       v17.35 / v17.37：标题行最右端、灰框**外面**的右上角
       v17.38：下沉进「标题行盒底 → 灰框顶」那条 28px 缝里（仍在灰框外面）
       v17.40：收进灰框**内部**的右上角 —— 站长的红框量出来上沿贴着灰框顶边、
               高 35px，胶囊高 20px ⇒ 居中落点 = 灰框顶边下方 8px。
     换算：标题行盒底 + 10(h1 下外边距) + 18(栅格行间距) = 灰框顶边，
          所以 bottom:-56px ⇒ 胶囊顶边正好落在灰框顶边下方 8px。
     横向仍 right:0（与灰框右缘齐平，站长 v17.35 提过「右边界对齐」）。
     绝对定位＝脱流：既不挤占标题宽度（v17.39 修的折行），也不撑高标题行盒。 */
  position: absolute;
  right: 0;
  bottom: -56px;
  align-self: auto;
  margin-bottom: 0;
  padding-top: 0;
}
/* 工具库那条分支的版式不同（标题挂在深红横幅上、灰框紧跟其后、右列是
   「分类 / 版本」信息行），分类字仍留在灰框**上方**，不下沉进去 */
#popBox[data-pop-kind="tool"] .dp-title-tags { bottom: -25px; }
/* v17.86（站长：右上角的分类信息改到右下角试试）：
   版本库详情卡右上角的「分类字 + 权限徽章」整组搬到卡片**右下角** ——
   落进灰色参数框内部的右下角（距参数框底边 8px、右缘与参数框齐平），
   与原右上角落点上下镜像。原 v17.35~v17.40 的下沉量（bottom:-56px）对本支失效。
   做法：.dp-idcard 建定位上下文；标题行在版本库改回 static
   （否则胶囊的绝对定位仍锚在标题行上，够不到卡片底部）；
   工具库不动 —— 横幅版式短卡，胶囊继续挂标题行下方（bottom:-25px 生效如旧）。
   ⚠ 只在 >1300 双列版式生效：≤1300 单列时灰框在缩略图下方，
   bottom:30px 会让胶囊悬到灰框外面 20px（实测 1100px 宽），单列维持旧版落点。 */
@media (min-width: 1301px) {
  #popBox .dp-idcard { position: relative; }
  #popBox:not([data-pop-kind="tool"]) .dp-title { position: static; }
  #popBox:not([data-pop-kind="tool"]) .dp-title .dp-title-tags {
    right: 24px;
    bottom: 30px;
  }
}
/* 胶囊进容器后，原来写在自己身上的 margin-left 会多顶出一段空隙 */
#popBox .dp-title .dp-title-tags .dp-title-cat,
#popBox .dp-title .dp-title-tags .dp-title-perm { margin-left: 0; }
/* 手机宽度标题占满整行：胶囊折到标题下面单独一行、左对齐更整齐 */
@media (max-width: 760px) {
  #popBox .dp-title { flex-wrap: wrap; }
  #popBox .dp-title .dp-title-text { flex: 1 1 100%; }
  #popBox .dp-title .dp-title-tags {
    margin-left: 0;
    padding-top: 2px;
    justify-content: flex-start;
    /* v17.38：手机上胶囊本来就在标题下面单独一行，不需要再下沉
       v17.39：同时取消绝对定位，让它回到文档流里跟在标题下方 */
    align-self: auto;
    margin-bottom: 0;
    position: static;
    right: auto;
    bottom: auto;
  }
}
/* 缩略图：高度交给栅格拉伸（与右侧信息区等高）；图片 cover 填满、不变形，
   完整大图仍可点缩略图打开灯箱查看 */
/* v17.77：缩略图固定 420×340 —— 所有版本同尺寸（此前 height:auto 跟右栏
   stretch，参数少的版本图被拉扁、参数多的被拉高，每个版本长得不一样）。
   align-self:start 防止行高被右栏偶发撑高时把图也拉变形；
   cover 居中裁切量 <1%，清晰不变形。 */
.dp-idcard.has-media > .dp-thumb {
  width: 380px;   /* v17.88：420 -> 380（与栅格左列同步收窄） */
  height: 240px;  /* v17.88：280 -> 240（站长要求再压矮） */
  align-self: start;
}
#popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media > .dp-thumb { min-height: 0; }
#popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media .dp-thumb-img { object-fit: cover; }
/* 信息块自身那 18px 下外边距会在卡片内把栅格行撑高，造成「缩略图比灰框
   高出 18px」的错位；has-media 版式下归零，两块严格齐平（实测底部差 0px） */
#popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media .pop-meta-list,
#popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media .dp-meta-box { margin-bottom: 0; }
/* 工具库的缩略图是「软件小图标」（固定 88px 方图），不参与等高拉伸，
   在信息框左侧垂直居中即可 */
#popBox[data-pop-kind="tool"] .dp-idcard.has-media > .dp-thumb { align-self: center; }
/* v17.84（站长：工具库改回之前样式）：豁免 v17.77/79 给版本库加的两处锁高
   （卡片 340 / 标题 64px）—— 88px 图标版式下卡片高度本来自适应，
   锁高会把工具页凭空撑出一截空白 */
#popBox[data-pop-kind="tool"] .dp-idcard.has-media { min-height: 0; }
#popBox[data-pop-kind="tool"] .dp-idcard.has-media > .dp-title { min-height: 0; }
/* 中等宽度（视口 ≤1300）：卡片已经不够宽做左右并排 —— 右侧灰色信息框里
   价格块固定占 240px，剩下的宽度分给两列参数后每列只剩几十 px，
   值会被折成一列竖排单字、缩略图同时被拉成长条（实测 1092 视口下已崩）。
   直接改回「上下单栏」：缩略图横铺一层、信息区在下方，两者同宽。 */
@media (max-width: 1300px) {
  #popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  #popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media > .dp-title { grid-column: auto; }
  #popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media > .dp-thumb {
    width: 100%;
    height: 220px;
    min-height: 0;
  }
  /* 单栏时信息区需要自己的段间距，把之前为「齐平」归零的 margin 还回来 */
  #popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media .pop-meta-list,
  #popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media .dp-meta-box { margin-bottom: 14px; }
}
/* v14.9：index.html / tools.html 把 .dp-idcard-main 当作网格子项在用，
   但这个类从未定义过 → 子项缺少 min-width:0，长标题 / 长链接会把卡片撑破。 */
/* v17.78（站长：格式/图片展示一次做完美）：右栏改纵向 flex，
   灰色参数框 flex:1 填满整行高 —— 与左侧 420×340 缩略图严格等高，
   所有版本 / 工具点开顶部卡尺寸完全一致，不再随参数多少变形。 */
.dp-idcard-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* v17.81（站长：右栏下面空着一大片白）：v17.78 的 flex:1 写在 .dp-meta-box 上，
   但中间层 .pop-meta-list 没有 flex → 高度链在它这里断了，
   灰框只有内容高（#6 实测 212px），与 340px 缩略图之间空出 128px 白底。
   补齐链路：main(340, flex列) > pop-meta-list(flex:1 + flex列) > dp-meta-box(flex:1)
   → 灰框严格撑满 340、底边与缩略图齐平，参数与价格块在框内垂直居中。 */
.dp-idcard.has-media .dp-idcard-main > .pop-meta-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.dp-idcard-main .dp-meta-box { flex: 1 1 auto; }

/* v17.83（站长：灰框里上下一大片空，参数表跟缩略图对称点）：
   灰框已撑满 340，但 .dp-meta-box 是 align-items:center —— 参数表只有
   内容高（约 160px），在 340 框里垂直悬空、上下各空 90px。
   改 stretch + 参数表 flex:1：表格吃掉全部剩余高度，grid 默认
   align-content:stretch 把 4 行参数均分拉高铺满整框，与左侧大图对称；
   单元格内容改垂直居中（行变高后 baseline 会顶在格子上沿）。
   弹窗模式容器高度 auto，flex/stretch 无副作用，不需另开作用域。 */
.dp-idcard.has-media .dp-meta-box { align-items: stretch; }
.dp-idcard.has-media .dp-meta-main > .dp-metarow--v { flex: 1 1 auto; }
.dp-idcard.has-media .dp-metarow--v > * { align-items: center; }
/* v17.88（站长：高度再压 + 缩略图改小）：灰框同步收紧，给值列腾宽度 ——
   左列 420->380 后右栏虽宽 40px，但「623155000」「2026年09月」仍在值列
   卡线折行（实测值列仅 70px、整数串要 70px+）。三处挤出 ~24px：
   ① 灰框左右内边距 18->12、两块间距 22->14；② 格子左右内边距 12/8->10/6、
   标签-值间距 8->6；③ 价格块左内边距 22->14、内部间距 22->12。
   折行判定改实测：三版本值全部单行后才发版。 */
#popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media .dp-meta-box { padding: 14px 12px; gap: 14px; }
#popBox .dp-idcard.has-media .dp-metarow--v > * { padding-left: 10px; padding-right: 6px; gap: 6px; }
#popBox .dp-idcard.has-media .dp-priceline--inbox { padding-left: 14px; gap: 12px; }

/* ---- v17.84（站长：工具库详情页改回今天改动前的样式）----
   v17.78/80/81/82 给工具库独立页加的 420×340 大图 + 灰底面板覆盖块
   整体撤除，回落到原有版式：88px 软件图标（9135/9143）+ 右侧信息居中
   （10589）+ 细线抬头（10581）。版本库统一版式不受影响。 ---- */
@media (max-width: 1300px) {
  .dp-idcard.has-media { min-height: 0; }
}

/* 左侧图标位：固定尺寸 + 居中裁剪。
   原布局把它当作小截图塞进两栏网格里，会被压扁、还和右侧信息抢空间。 */
.dp-thumb {
  position: relative;
  width: 300px;
  height: 225px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dp-thumb:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.dp-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  /* v16.18：contain 完整显示 —— 封面海报上的字不再被裁掉 */
  object-fit: contain;
}

/* 工具库详情：这里的缩略图是「软件图标」，不是版本截图 —— 用小方图。
   版本库保持 132×100（那是版本封面截图），两者刻意区分开：
   图标是给人认软件用的，撑成大图只会糊一整屏（参考站 3122.cn / 82pc.com 也都是小图标）。 */
#popBox[data-pop-kind="tool"] .dp-idcard.has-media { grid-template-columns: 64px minmax(0, 1fr); }
#popBox[data-pop-kind="tool"] .dp-thumb {
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

/* 标题：左对齐、正文字色、字号收一档（长标题折两行也整齐） */
#popBox .dp-title {
  margin: 0 0 10px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .2px;
  text-align: left;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
#popBox .dp-title::before { display: none; }

/* 一句话简介 */
.dp-desc {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
}

/* 内联元信息：自动换行，宽屏两行内读完 */
.dp-metarow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-bottom: 11px;
}
.dp-mi {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: nowrap;
}
.dp-mi em { font-style: normal; color: var(--text-sub); }   /* v17.48：同上 */
.dp-mi em::after { content: '：'; }
.dp-mi b { font-weight: 600; color: var(--text); }

/* 标签行（分类 / 版本性质 / 工具分类） */
.dp-tagrow { display: flex; flex-wrap: wrap; gap: 7px; }
.dp-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  color: var(--accent);
  background: rgba(166, 27, 41, .09);
  border: 1px solid rgba(166, 27, 41, .22);
}

/* v17.07：详情页标题栏「立即购买」按钮（购买入口上移：标题栏 + 吸底条；
   付费未购买时「下载地址」整段隐藏，见 app.js downloadSection）。
   仅版本库付费未拥有时渲染。 */
.dp-buy-top { margin: 0 0 12px; }
.dp-buy-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-gold);
  transition: box-shadow var(--dur), transform var(--dur);
}
.dp-buy-top-btn:hover { transform: translateY(-1px); }
.dp-buy-top-btn svg { display: block; }
.dp-buy-top-btn b { font-weight: 800; }
/* 后台没填购买链接时走「联系客服」引导，改描边款与金色主按钮拉开层级 */
.dp-buy-top-btn.is-guide {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--gold-text, #a61b29);
  box-shadow: none;
}

/* v17.10：版本库详情标题栏重排第二版（仅版本库渲染 --v 修饰类，工具库不受影响）
   权限条 / 价格行 / 规格栅格 / 标签行，价格是唯一视觉主角 */
.dp-head--v { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
/* v17.27：价格行已移出表头条、独立成行（见 .dp-priceline 的 justify-content） */
.dp-pdate {
  font-size: 12.5px;
  color: var(--text-mute);
  white-space: nowrap;
}

/* 价格行：无底框平铺（京东/淘宝式），大号红价 + 立即购买一行
   v17.27：整行靠右对齐（站长要求：在表头栏右侧、分类栏下方） */
.dp-priceline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  /* v17.28（站长）：价格与「立即购买」再分开一点（16px → 30px），
     整组往左收 44px，不再死贴卡片右缘。 */
  gap: 30px;
  margin: 0 0 14px;
  padding-right: 44px;
}
/* v17.30（站长）：价格 + 立即购买 移进规格面板右侧时用这个修饰类 ——
   不再独占一行、不再往下推，靠一条竖分隔线跟左侧元信息分开 */
.dp-priceline--inbox {
  flex: 0 0 auto;
  align-self: stretch;          /* v17.31：竖分隔线撑满面板内容高度，不再只是文字那么高 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0 2px 0 22px;
  gap: 22px;
  border-left: 1px solid var(--border, #e8e8ec);
}
.dp-price {
  display: inline-flex;
  align-items: baseline;
  color: var(--accent, #a61b29);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.5px;
}
.dp-price i { font-style: normal; font-size: 18px; font-weight: 700; margin-right: 2px; }
.dp-price--nego { font-size: 19px; letter-spacing: 0; }

/* 规格区：栅格对齐（标签灰、值深），列宽自适应，不是流水账
   v17.30（站长）：灰底背景/内边距搬到 .dp-meta-box，网格只负责排列；
   列宽下限 180px → 190px —— 原来 1000px 宽会切出 5 列（每列 180px），
   「插件：996PCM2(2025.12.18.13)」这种长值会把「插件」两字挤成上下两行。 */
/* v17.31（站长「排列布局难看」）规格区排版定稿 —— 试错过程留档：
   ① 最早 repeat(auto-fit,minmax(190px,1fr)) 硬栅格：某一列的值都短时，
      剩余空间整块漏到右边（站长截图里右半边全空、「客服QQ」孤零零占一行）；
   ② 再试 auto 列宽 + space-between：列宽随各行最大内容变，而
      「插件：996PCM2(2025.12.18.13)」那行值特别长、把行内间隙吃光，
      两行的疏密看着不一致；
   ③ 定稿：等宽两列 + 每项内部「标签靠左、数值靠右」两端对齐。
      列宽固定 → 列位置对齐；项内两端对齐 → 信息铺满整列宽度，不再堆在左上角。 */
/* v17.32（站长「灰框里加格子试试」）：规格区改成一张「参数表格」——
   2 列格线 + 行分隔线，每格「标签：值」，标签列定宽 → 值左边界成一条线。
   为什么废弃 v17.31 的「项内两端对齐」：列宽 260px 时标签与值之间会拉开
   近 200px 空隙（站长截图里「引擎：        GOM」那种），看着松散、别扭。 */
.dp-metarow--v {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e6e7eb);
  border-radius: 8px;
  overflow: hidden;
}
/* 每格 = 「标签：值」；标签列定宽 68px（「补丁大小：」是最长的，
   13px 字号下 4 字 + 全角冒号 ≈ 65px），值从同一 x 起 → 左边界成一条线 */
.dp-metarow--v > * {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  /* v17.75：封面图放大后右栏变窄，左右 padding 12/14 -> 8/12，
     给「623155000」「2026年09月」这类中长值腾出折行前差的那几个 px */
  padding: 7px 8px 7px 12px;
  font-size: 13px;
  white-space: nowrap;
  border-top: 1px solid var(--border, #e6e7eb);
}
.dp-metarow--v > :nth-child(-n+2) { border-top: 0; }                      /* 第一行不要上边线 */
.dp-metarow--v > :nth-child(odd) { border-right: 1px solid var(--border, #e6e7eb); }
.dp-metarow--v > * > em {
  flex: 0 0 auto;
  width: 68px;
  font-style: normal;
  color: var(--text-sub, #4b5563);   /* v17.48：规格项标签原 #6b7280 太浅，压深一档 */
}
.dp-metarow--v > * > em::after { content: '：'; }
.dp-metarow--v > * > b {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  /* v17.87（站长：数值黑白太单调）：值文字改主题深红（与红头 banner / 价格同色系），
     标签（em）维持灰色不动，形成「灰标签 + 红值」层次 */
  color: var(--accent, #a61b29);
  text-align: left;
  /* 超长值（如「996PCM2(2025.12.18.13)」）折行显示完整、不打省略号；
     同行两格自动等高，表格依旧齐 */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* 超长值（如插件版本号）整格横跨一行，值一行放得下、不折断。
   「最后一项补满整行」不在这里做 —— 纯 CSS 的 :nth-child(odd) 算不出
   超长值项已经吃掉一整行，会出现「左边一格、右边空一半」。改由 JS 按
   实际占格数判断（见 app.js 的 _cells），奇数时才给末项加这个类。 */
.dp-metarow--v > .dp-mi--wide { grid-column: 1 / -1; border-right: 0; }
/* 表头条并进表格后把眼睛/锁图标去掉 —— 图标宽度不一，值就没法对齐成一条线 */
.dp-metarow--v .dp-bi > svg { display: none; }

/* v17.30（站长）：规格面板本体 —— 左侧元信息网格 + 右侧价格动作块，
   两块本来各占一行、右侧和下方留一大片空白，现在合成一个灰底面板 */
.dp-meta-box {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 14px;
  padding: 14px 18px;
  background: var(--bg-soft, #f7f7f9);
  border-radius: 10px;
}
/* v17.31：面板左侧信息区 —— 表头条 / promo 胶囊 / 规格项，竖排、行距统一。
   详情页所有零散信息（权限、热度、解压密码、发布时间、规格、客服QQ）
   都收进这一个灰框，不再各自占一行、把内容全挤在左上角。 */
.dp-meta-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.dp-meta-main > .dp-head,
.dp-meta-main > .dp-promo,
.dp-meta-main > .dp-metarow { margin: 0; }
/* 框内的胶囊原本背景 = --bg-soft（与框同色，会隐形），改白底 + 描边 */
.dp-meta-main .dp-promo-tag,
.dp-meta-main .dp-badge {
  background: var(--card, #fff);
  border-color: var(--border, #e6e7eb);
}
/* v17.28：规格区末尾的权限胶囊（原表头条徽章搬来），垂直居中占一格 */
.dp-metarow--v .dp-mi--chip { align-items: center; }

/* 权限徽章 + 权限说明 + 浏览量 */
.dp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
.dp-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  color: #1f9e52;
  background: rgba(46, 204, 113, .13);
  border: 1px solid rgba(46, 204, 113, .4);
}
.dp-badge--vip       { color: #2477d0; background: rgba(74, 163, 255, .13); border-color: rgba(74, 163, 255, .42); }
.dp-badge--svip      { color: #7a3fc4; background: rgba(176, 107, 255, .14); border-color: rgba(176, 107, 255, .44); }
.dp-badge--coin      { color: #a97a05; background: rgba(240, 185, 11, .16); border-color: rgba(240, 185, 11, .48); }
.dp-badge--negotiate { color: #c76a0e; background: rgba(255, 159, 67, .15); border-color: rgba(255, 159, 67, .44); }

.dp-head-perm { font-size: 12.5px; color: var(--text-sub); }
.dp-head-views {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
}
.dp-head-views svg { display: block; opacity: .8; }
.dp-head-views b { font-size: 12.5px; font-weight: 700; }

/* 分节标题：压掉窄屏媒体查询里遗留的小尺寸，统一成「蓝条 + 15px 加粗」 */
.dp-sec-t {
  padding: 0 0 0 13px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
}
/* 卡片内不再叠第二层白底描边 */
.dp-sec .dp-body { padding: 0; }

/* ---- ② 下载地址 ---- */
.dp-dl-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.dp-dl-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(166, 27, 41, .1);
  color: var(--accent);
}
.dp-dl-ico svg { display: block; }
.dp-dl-main { flex: 1 1 auto; min-width: 0; }
.dp-dl-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}
.dp-dl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-sub);
}
.dp-dl-meta b { color: var(--gold-dark); font-weight: 700; }

/* v17.02：下载行一行排版 —— 加粗文件名后跟淡色小字「更新 · 大小 · 提取码」 */
.dp-dl-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-sub);
  margin-left: 10px;
}
.dp-dl-dot {
  display: inline-block;
  font-style: normal;
  margin: 0 7px;
  color: var(--text-sub);
  opacity: .55;
}

/* 主按钮：跟全站 .btn-gold 同一套配色，只是尺寸收小 */
.dp-dl-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow var(--dur), transform var(--dur);
}
.dp-dl-btn:hover { box-shadow: var(--shadow-gold); transform: translateY(-1px); }
.dp-dl-btn svg { display: block; }

/* v14.10：下载栏右侧按钮组 —— 次要的「直购下载」+ 主下载按钮 */
.dp-dl-acts {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 直购下载：描边款，与金色实心主按钮拉开层级，避免两个主色按钮抢视线 */
.dp-dl-btn--buy {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--gold-text, #a61b29);
  font-weight: 700;
}
.dp-dl-btn--buy:hover {
  background: rgba(166, 27, 41, .06);
  box-shadow: none;
}
/* 会员本月免费下载额度（仅会员登录后由服务端下发并显示） */
.dp-dl-quota {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-sub);
}
.dp-dl-quota b {
  color: var(--accent);
  font-weight: 700;
}
.dp-dl-quota.is-empty b { color: var(--text-mute); }

.dp-dl-tip {
  margin: 9px 0 0;
  font-size: 14px; /* v16.29：12px → 14px，用户反馈偏小 */
  line-height: 1.7;
  color: var(--text-mute);
}

/* ---- ③ 窄屏 ---- */
@media (max-width: 760px) {
  .dp-idcard { padding: 18px 16px; }
  .dp-idcard.has-media { grid-template-columns: minmax(0, 1fr); }
  .dp-thumb { width: 100%; height: 200px; }
  .dp-thumb-img { object-fit: cover; }
  .dp-head-views { margin-left: 0; }
  .dp-dl-row { flex-wrap: wrap; }
  .dp-dl-main { flex: 1 1 100%; }
  /* v14.10：窄屏下按钮组独占一行，两颗按钮等分宽度 */
  .dp-dl-acts { flex: 1 1 100%; }
  .dp-dl-acts .dp-dl-btn { flex: 1 1 0; width: auto; }
}

/* ==========================================================================
   26. 工具库专用模板（v20）
   --------------------------------------------------------------------------
   工具库原来是直接复用版本库的大封面卡，代价是：
   · 卡片被压到 ~267px 宽，标题折成两行、断在括号中间，标签还折出孤零零一行；
   · 封面占掉一张卡 60% 的高度，而工具封面多是同一套占位图，翻两屏就分不清谁是谁；
   · 一屏只放得下 6 个，工具库本该是「扫一眼挑一个走」的场景，效率太低。
   参考 82pc.com / 3122.cn 的工具列表，换成紧凑横向卡：
   左侧 64px 图标 + 右侧标题 / 简介 / 标签 / 数据 + 金色下载按钮。
   版本库继续用原来的大封面卡（版本预览图确实需要大图）。
   ========================================================================== */

/* 板块内网格：内容区约 880px 时排 2 列，单卡 ~430px，标题一行能放下 20+ 字 */
.tool-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.tcard {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.tcard:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}

/* 图标位：固定 64px 方形，居中裁剪（不再用 16:9 大封面） */
.tcard-thumb {
  display: block;      /* v17.30：改成 <a> 后要显式 block，否则 width/height 失效 */
  color: inherit;
  text-decoration: none;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
}
.tcard-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tcard-thumb--imgerr img { display: none; }  /* v17.25：图挂了整块隐藏，不留破图 */
.tcard-ico-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(166, 27, 41, .07);
}

.tcard-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 标题：恒定最多两行 + 省略号。定高是为了让并排卡片的标题基线一致，
   不会出现「左卡标题一行、右卡标题两行」把下面的标签推歪的情况。 */
.tcard-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 42px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
  transition: color var(--dur);
}
.tcard-title:hover { color: var(--accent); }

.tcard-desc {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.tcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.tcard-tag {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: var(--accent);
  background: rgba(166, 27, 41, .08);
  border: 1px solid rgba(166, 27, 41, .2);
}

/* 底部数据条：margin-top:auto 把按钮压到底，
   一屏里所有卡片的下载按钮因此落在同一条水平线上 */
.tcard-foot {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 10px;
}
.tcard-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-mute);
  white-space: nowrap;
}
.tcard-stat svg { display: block; opacity: .75; }
.tcard-stat b { font-weight: 600; }
.tcard-meta {
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcard-fav {
  margin-left: auto;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur);
}
.tcard-fav:hover { color: var(--gold-text); border-color: var(--border-strong); }
.tcard-fav.active { color: var(--gold-text); }

.tcard-dl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow var(--dur);
}
.tcard-dl:hover { box-shadow: var(--shadow-gold); }
.tcard-dl svg { display: block; }

/* 板块标题：去掉 emoji 图标头，统一成「蓝条 + 加粗文字」（与详情页分节标题一致） */
.tool-sec-ico { display: none; }
.tool-sec-title { position: relative; padding-left: 12px; }
.tool-sec-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--accent);
}

/* 搜索行右侧统计组：把「共 N 个工具」和「实时显示工具数量」收进一个组，
   中间加分隔线，不再两段文字零散地挤在搜索框右边 */
.tool-stat-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}
.tool-stat-group .tool-count-tip { margin: 0; }
.tool-stat-group .ver-total-tip { margin: 0; font-weight: 500; color: var(--text-mute); }
.tool-stat-sep { color: var(--text-mute); opacity: .5; }

@media (max-width: 700px) {
  .tool-card-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-stat-group { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* 工具卡底部只放「文件大小」，不放日期——3 列布局下卡片正文仅 ~210px，
   再放日期必然被压成「1.24…」。日期在详情弹窗里有完整展示。 */

/* 工具库提示条（后台「工具站 → 工具库提示条」，留空整条不渲染） */
.tool-notice-bar {
  margin: 0 0 14px;
  padding: 11px 14px 11px 16px;
  background: linear-gradient(90deg, rgba(240, 185, 11, .12), rgba(240, 185, 11, .02) 60%);
  border: 1px solid rgba(240, 185, 11, .3);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-sub);
}

/* ---- 工具分类导航（v20 · 参考 82pc / 3122 的分类条） ----
   一行「全部 + 各工具分类」胶囊，每项带数量；当前分类实心蓝底高亮。
   分类清单由后台「工具站」模块维护，这里只负责样式。 */
.tool-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.tool-cat-nav:empty { display: none; }

.tcn-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  font-size: 13px;
  line-height: 1;
  color: var(--text-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur), border-color var(--dur),
              background var(--dur), box-shadow var(--dur);
}
.tcn-item:hover { color: var(--accent); border-color: rgba(166, 27, 41, .45); }
.tcn-item.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.tcn-item.is-active:hover { color: #fff; }

/* 空分类：后台配了就列出来，但不做成可点的死链——灰掉、不响应 hover、
   鼠标显示禁止。等这个分类下有工具了，下次渲染自然变回可点的胶囊。 */
.tcn-item.is-empty {
  color: var(--text-mute);
  opacity: .6;
  cursor: not-allowed;
  background: transparent;
}
.tcn-item.is-empty:hover { color: var(--text-mute); border-color: var(--border); }
.tcn-item.is-empty .tcn-num { opacity: .7; }

/* 数量胶囊：用中性半透明底，浅色/暗色主题下都不会和底色糊在一起 */
.tcn-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(127, 137, 160, .18);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.tcn-item.is-active .tcn-num { background: rgba(255, 255, 255, .26); color: #fff; }

/* ==========================================================================
   27. 后台「工具站」模块（v20）
   --------------------------------------------------------------------------
   与前台详情页保持同一套视觉语言：白卡片 + 蓝条小标题。
   面板里的控件都用 .ts-* 命名，避免和后台其它面板的通用表单样式互相干扰。
   ========================================================================== */
.ts-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-sub);
}
.ts-note b { color: var(--text); }

.ts-card {
  margin-bottom: 16px;
  padding: 18px 20px 20px;
  background: var(--bg-panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ts-card-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--border);
}
.ts-card-t {
  position: relative;
  padding-left: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.ts-card-t::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: var(--accent);
}
.ts-card-sub { font-size: 12px; line-height: 1.6; color: var(--text-mute); }

/* ---- 分类列表 ---- */
.ts-cat-list { display: flex; flex-direction: column; gap: 8px; }
.ts-loading { padding: 18px 4px; font-size: 13px; color: var(--text-mute); }

.ts-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.ts-cat-order {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(127, 137, 160, .16);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-sub);
}
.ts-cat-input { flex: 1 1 auto; min-width: 0; }
.ts-cat-count {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-mute);
  white-space: nowrap;
}

.ts-icon-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel-solid);
  color: var(--text-sub);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur);
}
.ts-icon-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.ts-icon-btn:disabled { opacity: .38; cursor: not-allowed; }
.ts-icon-btn--danger:hover { color: var(--red); border-color: var(--red); }

/* ---- 输入控件 ---- */
.ts-input {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.ts-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(166, 27, 41, .12); }
.ts-textarea { height: auto; padding: 9px 11px; line-height: 1.7; resize: vertical; }

.ts-cat-add { display: flex; gap: 10px; margin-top: 14px; }
.ts-cat-add .ts-input { flex: 1 1 auto; }
.ts-cat-add .btn { flex: 0 0 auto; }

/* ---- 「清单外分类」提示 ----
   只存在于工具数据、还没进分类清单的分类。前台导航条会兜底展示它们
   （保证每件工具都点得进分类），这里提示站长一键补进清单。 */
.ts-unlisted {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--notice-border);
  border-radius: var(--radius);
  background: var(--notice-bg);
}
.ts-unlisted-h { margin-bottom: 8px; font-size: 12.5px; color: var(--text); }
.ts-unlisted-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-unlisted-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 5px 3px 10px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ts-unlisted-item b { font-weight: 600; color: var(--text-mute); }
.ts-mini-btn {
  padding: 2px 8px;
  font-size: 12px;
  color: var(--text-sub);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ts-mini-btn:hover { color: var(--gold-text); border-color: var(--gold-text); }
.ts-unlisted-tip { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--text-mute); }

/* ---- 表单网格 ---- */
.ts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 18px;
}
.ts-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ts-field--wide { grid-column: 1 / -1; }
.ts-label { font-size: 12.5px; font-weight: 600; color: var(--text-sub); }
.ts-tip { font-size: 11.5px; line-height: 1.6; color: var(--text-mute); }

.ts-actions, .ts-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

@media (max-width: 700px) {
  .ts-cat-row { flex-wrap: wrap; }
  .ts-cat-count { width: 100%; padding-left: 32px; }
}

/* ---- v14.11：后台「导航条」面板的行编辑器 ----
   一行 = 序号 + 显示开关 + 名称 + 链接 + 新窗口开关 + 上移 / 下移 / 删除。 */
.nav-list { display: flex; flex-direction: column; gap: 8px; }

.nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.nav-order {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(127, 137, 160, .16);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-sub);
}
.nav-flag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.nav-flag input { accent-color: var(--blue); cursor: pointer; }
.nav-row .nav-text { flex: 0 1 180px; min-width: 0; }
.nav-row .nav-url  { flex: 1 1 220px; min-width: 0; }

.nav-add { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.nav-add .nav-add-text { flex: 0 1 200px; }
.nav-add .nav-add-url  { flex: 1 1 260px; }
.nav-add .btn { flex: 0 0 auto; }

@media (max-width: 760px) {
  .nav-row { flex-wrap: wrap; }
  .nav-row .nav-text,
  .nav-row .nav-url { flex: 1 1 100%; }
  .nav-add .nav-add-text,
  .nav-add .nav-add-url { flex: 1 1 100%; }
}

/* ==========================================================================
   v14.10：会员权益弹窗（侧栏「会员购买」）
   访客不登录也能看到 VIP / SVIP 的价格与权益，每档各自跳购买链接
   ========================================================================== */
.vip-pop { max-width: 720px; text-align: center; }
.vip-pop-title { margin: 0 0 6px; font-size: 20px; }
.vip-pop-sub { margin: 0 0 18px; font-size: 13px; color: var(--text-sub); }

.vip-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  text-align: left;
}
.vip-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated, rgba(0, 0, 0, .02));
}
.vip-plan--svip {
  border-color: rgba(240, 185, 11, .55);
  background: linear-gradient(180deg, rgba(240, 185, 11, .10), rgba(240, 185, 11, .02));
}
.vip-plan.is-mine { opacity: .75; }
.vip-plan-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text);
}
.vip-plan-head em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold, #f0b90b);
  color: #fff;
}
.vip-plan-price { display: flex; align-items: baseline; gap: 5px; }
.vip-plan-price b { font-size: 26px; font-weight: 800; color: var(--gold-text, #a61b29); }
.vip-plan-price small { font-size: 12px; color: var(--text-mute); }
.vip-plan-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-sub);
}
.vip-plan-list li { position: relative; padding-left: 18px; }
.vip-plan-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold, #f0b90b);
  font-weight: 800;
}
.vip-plan-list b { color: var(--gold-text, #a61b29); }

.vip-plan-btn {
  display: block;
  width: 100%;
  height: 38px;
  margin-top: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold-warm, var(--gold)));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
  transition: filter .2s var(--ease, ease);
}
.vip-plan-btn:hover { filter: brightness(1.07); }
.vip-plan-btn.is-mine {
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-mute);
  cursor: default;
  line-height: 36px;
}
.vip-plan-btn.is-mine:hover { filter: none; }
.vip-pop-note {
  margin: 16px 0 4px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-mute);
  text-align: left;
}
@media (max-width: 640px) {
  .vip-plan-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 管理员在前台不呈现为会员：隐藏购买入口，只留「进入管理后台」 */
.side-member.is-admin .side-btn-vip,
.side-member.is-admin .side-btn-coin { display: none; }


/* ==========================================================================
   v14.14：提交收录页（submit.html）
   工具 / 网址 / 交流群三个投稿入口共用一套表单与卡片样式。
   ========================================================================== */

/* ---------------- 页头 ---------------- */
.sub-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
  padding: 24px 26px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(166, 27, 41, .22) 0%, transparent 62%),
    linear-gradient(135deg, #ffffff 0%, #fdfbf2 100%);
  box-shadow: var(--shadow-card);
}

.sub-hero-left { min-width: 0; }

.sub-hero-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sub-hero-title::before {
  content: '';
  flex: 0 0 4px;
  width: 4px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.sub-hero-sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-sub);
}

.sub-hero-sub strong { color: var(--gold-text); font-weight: 700; }

/* 三步流程 */
.sub-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sub-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}

.sub-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #21180a;
  font-size: 11px;
  font-weight: 800;
}

.sub-step-arrow { color: var(--text-mute); font-style: normal; font-size: 15px; }

/* ---------------- 投稿已关闭提示 ---------------- */
.sub-closed {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: var(--shadow-card);
}

.sub-closed-ico { font-size: 24px; line-height: 1.2; }
.sub-closed b { display: block; margin-bottom: 4px; font-size: 14.5px; color: var(--text); }
.sub-closed p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-sub); }

/* ---------------- 两栏骨架 ---------------- */
.sub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 20px;
  align-items: start;
}

.sub-main { min-width: 0; }
.sub-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; }

/* ---------------- 三个入口 Tab ---------------- */
.sub-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sub-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s var(--ease, ease);
}

.sub-tab:hover { border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }

.sub-tab.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-warm));
  border-color: transparent;
  color: #241a05;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(255, 199, 0, .32);
}

.sub-tab:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.sub-tab-ico { font-size: 15px; line-height: 1; }

/* ---------------- 表单卡 ---------------- */
.sub-card {
  padding: 22px 24px 24px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: var(--shadow-card);
}

.sub-hint {
  margin-bottom: 20px;
  padding: 13px 16px;
  border-radius: 11px;
  background: rgba(166, 27, 41, .12);
  border: 1px solid rgba(180, 124, 0, .22);
  font-size: 12.8px;
  line-height: 1.75;
  color: var(--text-sub);
}

.sub-hint b { color: var(--gold-text); }

.sub-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sub-field { margin-bottom: 16px; min-width: 0; }

.sub-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
}

.sub-label .req { color: #d42845; font-style: normal; margin-left: 2px; }

/* 带前置图标的输入框 */
.sub-input { position: relative; }

.sub-input-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  opacity: .75;
  pointer-events: none;
}

.sub-input .form-control { padding-left: 38px; }

/* ---- v14.15：带单位后缀的输入框（群人数 → 人） ---- */
.sub-input--unit .form-control { padding-right: 46px; }

.sub-input-unit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text-mute);
  pointer-events: none;
}

/* 数字框去掉上下箭头：站长习惯直接敲数字，箭头在小屏上还容易误触 */
.sub-input--unit input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.sub-input--unit input[type="number"]::-webkit-outer-spin-button,
.sub-input--unit input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sub-field-tip { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-mute); }

.sub-input select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
    linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.sub-textarea { min-height: 104px; resize: vertical; line-height: 1.7; }

.sub-count {
  margin-top: 5px;
  text-align: right;
  font-size: 11.5px;
  color: var(--text-mute);
}

/* 验证码 */
.sub-captcha { display: flex; gap: 10px; align-items: stretch; }
.sub-captcha-input { flex: 1 1 auto; }

.sub-captcha-q {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 0 16px;
  border-radius: var(--radius-sm, 10px);
  border: 1px dashed var(--border-strong);
  background: rgba(166, 27, 41, .10);
  color: var(--gold-text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  transition: all .2s ease;
}

.sub-captcha-q:hover { background: rgba(166, 27, 41, .2); }
.sub-captcha-q:disabled { opacity: .6; cursor: wait; }

/* 提交按钮行 */
.sub-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}

.sub-submit {
  min-width: 168px;
  padding: 13px 30px;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold-warm));
  color: #241a05;
  transition: all .2s ease;
}

.sub-submit:hover { box-shadow: 0 10px 24px rgba(255, 199, 0, .38); transform: translateY(-1px); }
.sub-submit:disabled { opacity: .65; cursor: wait; transform: none; }

.sub-actions-tip { font-size: 12px; color: var(--text-mute); line-height: 1.6; }

/* ---------------- 最近收录 ---------------- */
.sub-recent { margin-top: 26px; }

.sub-sec-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text);
}

.sub-sec-title::before {
  content: '';
  flex: 0 0 4px;
  width: 4px;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.sub-sec-sub { font-size: 12px; font-weight: 500; color: var(--text-mute); }

.sub-recent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 14px;
}

.sub-rc-card {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: all .22s ease;
  min-height: 128px;
}

.sub-rc-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}

.sub-rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }

.sub-rc-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(166, 27, 41, .16);
  font-size: 17px;
}

.sub-rc-kind {
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--bg-input);
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 600;
}

.sub-rc-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-rc-desc {
  margin: 0 0 10px;
  font-size: 12.3px;
  line-height: 1.65;
  color: var(--text-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
}

.sub-rc-foot { display: flex; align-items: center; gap: 8px; min-width: 0; }

.sub-rc-tag {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(166, 27, 41, .16);
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 600;
}

.sub-rc-host {
  font-size: 11.5px;
  color: var(--text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-empty {
  padding: 42px 20px;
  text-align: center;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--bg-panel);
  color: var(--text-mute);
}

.sub-empty-ico { font-size: 30px; display: block; margin-bottom: 10px; }
.sub-empty p { margin: 0; font-size: 13px; }

/* ---------------- 侧栏卡片 ---------------- */
.sub-side-card {
  padding: 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: var(--shadow-card);
}

.sub-side-card--soft { background: var(--bg-panel); }

.sub-side-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.sub-side-title::before {
  content: '';
  flex: 0 0 3px;
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.sub-side-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sub-side-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 9px;
  font-size: 12.6px;
  line-height: 1.75;
  color: var(--text-sub);
}

.sub-side-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-dark);
  opacity: .75;
}

.sub-side-list li:last-child { margin-bottom: 0; }

.sub-side-text {
  margin: 0 0 10px;
  font-size: 12.6px;
  line-height: 1.8;
  color: var(--text-sub);
}

.sub-side-text:last-child { margin-bottom: 0; }
.sub-side-text b { color: var(--gold-text); }

.sub-side-contact { display: flex; flex-direction: column; gap: 9px; }

.sub-side-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--bg-input);
  font-size: 12.6px;
  color: var(--text-mute);
}

.sub-side-line b { color: var(--text); font-size: 13px; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1000px) {
  .sub-layout { grid-template-columns: 1fr; }
  .sub-side { position: static; }
}

@media (max-width: 640px) {
  .sub-hero { padding: 18px 16px; }
  .sub-hero-title { font-size: 19px; }
  .sub-card { padding: 18px 15px 20px; }
  .sub-row { grid-template-columns: 1fr; gap: 0; }
  .sub-tab { flex: 1 1 auto; justify-content: center; padding: 10px 12px; font-size: 13px; }
  .sub-captcha { flex-wrap: wrap; }
  .sub-captcha-q { flex: 1 1 100%; min-height: 46px; }
  .sub-recent-grid { grid-template-columns: 1fr; }
  .sub-submit { width: 100%; }
  .sub-actions { flex-direction: column; align-items: stretch; }
  .sub-actions-tip { text-align: center; }
}


/* ==========================================================================
   v14.14：后台「投稿审核」与「跳转管理」面板
   ========================================================================== */

/* 侧栏待审数量徽标 */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 2px 8px rgba(229, 72, 77, .45);
}

.sub-tally {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-mute);
}

.sub-tally b { color: #e5484d; font-size: 13.5px; }

/* 投稿类型标签 */
.sub-kind {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sub-kind-tool { background: rgba(255, 176, 32, .16); color: #a26a00; }
.sub-kind-url  { background: rgba(59, 130, 246, .14); color: #2563eb; }
.sub-kind-qun  { background: rgba(16, 185, 129, .15); color: #047857; }

/* 审核状态胶囊 */
.sub-st {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.sub-st-wait { background: rgba(255, 176, 32, .18); color: #a61b29; }
.sub-st-ok   { background: rgba(16, 185, 129, .16); color: #047857; }
.sub-st-no   { background: rgba(148, 163, 184, .22); color: #64748b; }

/* 表格单元格内容 */
.sub-cell-strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

.sub-cell-desc {
  margin-top: 3px;
  font-size: 11.8px;
  line-height: 1.6;
  color: var(--text-mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sub-cell-link {
  display: inline-block;
  max-width: 100%;
  margin-top: 2px;
  font-size: 11.8px;
  color: var(--gold-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.sub-cell-link:hover { text-decoration: underline; }

.sub-cell-why {
  margin-top: 3px;
  font-size: 11.5px;
  color: #b45309;
}

.sub-done-tag {
  display: inline-block;
  padding: 3px 8px;
  margin-right: 4px;
  border-radius: 6px;
  background: rgba(16, 185, 129, .15);
  color: #047857;
  font-size: 11px;
  font-weight: 700;
}

/* 表格里的「通过」按钮 */
.btn-xs.ok {
  border-color: rgba(16, 185, 129, .5);
  color: #047857;
  font-weight: 700;
}

.btn-xs.ok:hover { background: rgba(16, 185, 129, .14); }

/* 短链地址列：过长时省略 */
.sl-target {
  font-size: 11.8px;
  color: var(--text-sub);
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 跳转管理的内联表单 */
.sl-form {
  margin: 0 0 16px;
  padding: 18px 20px 20px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, #fffdf4 0%, var(--bg-panel) 100%);
  box-shadow: var(--shadow-card);
}

.sl-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sl-form-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
}

.sl-form-title::before {
  content: '';
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.sl-form-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all .18s ease;
}

.sl-form-close:hover { color: var(--text); border-color: var(--border-strong); }

.sl-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

@media (max-width: 760px) {
  .sl-form { padding: 14px 14px 16px; }
  .sl-form-actions { flex-direction: column; }
  .sl-form-actions .btn { width: 100%; }
}

/* 后台这两张新表：内容区可用宽度只有 ~750px，列一多就会把「名称」挤成一行一个字。
   给个最小宽度兜底，窄屏时让容器横向滚动，也比文字竖排可读。 */
.sub-table { min-width: 740px; }
.sl-table  { min-width: 700px; }

/* 内容列里的次要信息 */
.sub-cell-mini {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-mute);
  word-break: break-word;
}

.sub-cell-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.sub-mini-tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(166, 27, 41, .16);
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* 这两张表的操作列要放 3-4 个按钮，默认的按钮尺寸与间距会把最后一个挤到第二行，
   这里收紧一点，保证「通过/拒绝/删除」「复制/编辑/停用/删除」各自排一行 */
.sub-table .row-actions,
.sl-table .row-actions { flex-wrap: nowrap; gap: 5px; }

.sub-table .row-actions .btn-xs,
.sl-table .row-actions .btn-xs { padding: 3px 8px; font-size: 11.5px; white-space: nowrap; }

/* 目标地址：单行省略，完整地址放 title 里悬停可见 */
.sub-cell-target {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ==========================================================================
   📝 收录设置面板（v14.15）
   --------------------------------------------------------------------------
   和三栏「网站设置」不同：这里卡片很少，做成两列自适应网格，
   宽卡片（跳转默认项）跨整行，窄卡片在右边并排，避免一列拉到底留大片空白。
   ========================================================================== */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.sg-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}

.sg-card--wide { grid-column: 1 / -1; }

.sg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.sg-card-title { font-size: 14px; font-weight: 700; color: var(--text); }

.sg-card-tag {
  font-size: 11.5px;
  color: var(--text-mute);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.sg-card .form-item { margin-bottom: 14px; }
.sg-card .form-item:last-child { margin-bottom: 0; }
.sg-card .form-row { gap: 14px; }

.sg-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sg-actions-tip { font-size: 12.5px; color: var(--gold-text); }

/* v15.1：详情页「来自收录投稿」来源标 —— 跟普通分类胶囊同尺寸，
   只把描边染成品牌红，一眼能认出来但不会喧宾夺主。 */
.dp-tag--src {
  border-color: var(--gold);
  color: var(--gold-text);
  background: rgba(166, 27, 41, .06);
}

@media (max-width: 900px) {
  .sg-grid { grid-template-columns: 1fr; }
  .sg-card--wide { grid-column: auto; }
}

/* ==========================================================================
   29. 收录栏目页（v15.0 · urls.html 网址导航 / qun.html 传奇QQ群）
   --------------------------------------------------------------------------
   投稿审核通过的网址与交流群以前没有落地页面，站长后台点了「通过」前台也
   看不到。这两页把它们按分类铺开展示，外链统一走 /go 读秒页。
   视觉上沿用站点既有语言：白卡片 + 圆角 + 金色标签，分类条复用 .tool-cat-nav。
   ========================================================================== */

/* ---- 页头 ---- */
.col-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 220px at 6% -30%, rgba(166, 27, 41, .16) 0%, transparent 62%),
    var(--bg-panel);
  box-shadow: var(--shadow-card);
}

.col-hero-left { flex: 1 1 320px; min-width: 0; }

.col-hero-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--text);
}

.col-hero-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-sub);
}

.col-hero-sub b { color: var(--gold-text); }

.col-hero-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 11px;
  background: var(--gold);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
}

.col-hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(166, 27, 41, .3);
}

/* ---- 卡片网格 ----
   v16.64 大气版：最小列 360px（原 240px 卡片太小气）、图标 46px、标题 17px，
   底行 flex-wrap 允许换行 + 标签 nowrap/省略，长分类名不再挤压/遮挡「加群」按钮。 */
.col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.col-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: all .22s ease;
  min-height: 168px;
}

.col-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}

.col-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.col-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  background: rgba(166, 27, 41, .18);
}

.col-ico--qun { background: rgba(64, 153, 255, .16); font-size: 21px; }

/* v17.94：收录条目缩略图（网址导航 / 传奇QQ群卡片左上角图标位）。
   复用 .col-ico 的 46×46 圆角盒，img 用 cover 裁剪不变形 */
.col-ico--img { object-fit: cover; background: rgba(127, 127, 127, .12); }

/* 后台收录列表行内的小预览图 */
.sub-thumb {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 6px;
  vertical-align: -10px;
  border: 1px solid var(--border, rgba(127,127,127,.25));
}

.col-go {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-text);
  white-space: nowrap;
}

.col-size {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 99px;
  background: var(--bg-input);
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.col-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-desc {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
}

.col-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 8px;
  min-width: 0;
}

.col-tag {
  flex: 0 1 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 7px;
  background: rgba(166, 27, 41, .16);
  color: var(--gold-text);
  font-size: 12px;
  font-weight: 600;
}

.col-host {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 群号那一行（跳转失败时手动加群的退路） ---- */
.col-qun {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 11px;
  background: var(--bg-input);
  font-size: 12.5px;
  color: var(--text-mute);
}

.col-qun b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.col-copy {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-sub);
  font-size: 12px;
  cursor: pointer;
  transition: all .18s ease;
}

.col-copy:hover { color: var(--gold-text); border-color: var(--border-strong); }

/* 卡片上的「加群」按钮：小而不抢眼，主点击区还是整张卡片 */
.col-btn {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 6px 16px;
  border-radius: 9px;
  background: var(--gold);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- 空态 / 出错 ---- */
.col-err {
  grid-column: 1 / -1;
  padding: 34px 20px;
  text-align: center;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--bg-panel);
  color: var(--text-mute);
  font-size: 13px;
}

.col-empty-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 20px;
  border-radius: 10px;
  background: var(--gold);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

/* ---- 投稿页「最近收录」下面那条栏目入口（v15.0） ---- */
.sub-recent-more {
  margin: -8px 0 16px;
  font-size: 12.5px;
  color: var(--text-mute);
}

.sub-recent-more a {
  color: var(--gold-text);
  font-weight: 700;
  text-decoration: none;
}

.sub-recent-more a:hover { text-decoration: underline; }

.sub-recent-sep { margin: 0 6px; opacity: .55; }

@media (max-width: 700px) {
  .col-hero { padding: 18px 16px; }
  .col-hero-title { font-size: 18px; }
  .col-hero-btn { width: 100%; justify-content: center; }
  .col-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   v15.3 去 AI 味（视觉）
   --------------------------------------------------------------------------
   一套界面看着「像 AI 生成的」，基本就是这几样堆出来的：
     · 渐变金属色按钮（135deg 金色渐变 + hover 光晕）
     · hover 时整张卡片往上飘、发亮
     · 每一个入口都包一张大圆角卡片 + 软阴影
     · 落地页式 hero：彩色径向渐变底 + 「1 2 3」步骤胶囊
     · 满屏彩色胶囊标签
   下面统一压回「普通站」的样子：实色、少圆角、少投影、无动效。
   只改观感不动结构，所以整块放在文件最末尾覆盖。
   ========================================================================== */

/* 1. emoji 图标位一律不占位（HTML 里已清，这条兜住历史页面与缓存） */
.sub-tab-ico, .sub-input-ico, .sub-closed-ico, .sub-empty-ico, .sub-rc-ico { display: none; }
.sub-input .form-control { padding-left: 13px; }
.empty-icon { display: none; }

/* 2. 按钮：实色、不放大、不发亮 */
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover, .btn:active { transform: none; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); color: #fff; box-shadow: none; }
.btn-danger { background: #c0392b; }
.btn-danger:hover { background: #a93226; box-shadow: none; }
.tcard-dl:hover { box-shadow: none; }

/* 3. hero 不再当「头图」用，还原成一条普通的栏目标题 */
.sub-hero, .col-hero {
  padding: 14px 0 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.sub-hero-title { font-size: 20px; }
.sub-hero-title::before { background: var(--gold-dark); }
.sub-hero-sub { font-size: 13px; }

/* 「1 填写信息 › 2 人工审核 › 3 站内展示」是落地页套路，藏掉 */
.sub-steps { display: none; }

/* 栏目页右上角那个金色 CTA 改成普通次按钮 */
.col-hero-btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.col-hero-btn:hover { transform: none; box-shadow: none; background: var(--bg-soft); color: var(--text); }

/* 4. 卡片不再飘：hover 只换边框色 */
.tcard:hover, .col-card:hover, .sub-tab:hover { transform: none; }
.tcard:hover { box-shadow: none; }
.col-card:hover { box-shadow: none; }
.tcard, .col-card { border-radius: var(--radius); }

/* 5. 彩色胶囊标签统一成中性灰（蓝 / 金 / 绿混着跑最像模板） */
.tcard-tag, .col-tag, .dp-tag, .sub-rc-tag {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text-sub);
}
.dp-tag--src { background: var(--bg-soft); border-color: var(--border-strong); color: var(--gold-text); }
.sub-rc-kind { background: var(--bg-soft); }

/* 6. 选中态不用金色渐变 */
.sub-tab.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  box-shadow: none;
}

/* 7. 投稿提示条去掉黄底 */
.sub-hint { background: var(--bg-soft); border-color: var(--border); }

/* 8. 侧栏两个会员按钮去渐变 */
.side-btn-vip { background: #d97706; }
.side-btn-vip:hover { filter: none; background: #c2680a; }


/* ==========================================================================
   v15.3b 去 AI 味（第二轮）
   --------------------------------------------------------------------------
   第一轮压掉了渐变按钮、飘浮卡片和 hero。这一轮处理「颜色太多」：
   一张卡片上分类一个色、引擎一个色、性质又一个色，加上筛选条上高亮的金色，
   整页五颜六色 —— 这是模板感最直接的来源。
   ========================================================================== */

/* 1. 卡片标签一律中性灰（分类 / 引擎 / 性质 / 版本类型…） */
.card-tag-row span,
.cate-tag, .engine-tag, .engine-tag1, .engine-tag2,
.card-nature, .nature-tag, .ver-tag, .card-img-badge {
  background: var(--bg-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-sub) !important;
}
.tcard-tag { background: var(--bg-soft) !important; border-color: var(--border) !important; color: var(--text-sub) !important; }

/* 2. 筛选条：选中态墨黑，hover 不再放大发光 */
.filter-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.filter-btn:hover { transform: none; border-color: var(--border-strong); box-shadow: none; }
.filter-btn.active {
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: none !important;
}
.ver-side .filter-btn.active { color: var(--text) !important; }

/* 3. 侧栏「登录」用墨黑，跟字标同色，页面少一种蓝 */
.side-btn-login { background: #1f2937; color: #fff; }
.side-btn-login:hover { background: #111827; }

/* 4. 空状态那个金色按钮改成普通次按钮 */
.col-empty-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}
.col-empty-btn:hover { background: var(--bg-soft); color: var(--text); }

/* 5. 验证码题干不要黄底虚线，做成普通输入样 */
.sub-captcha-q {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 600;
}


/* ==========================================================================
   v15.4 去 AI 味（第三轮）— 残余渐变 / 动效清除记录
   --------------------------------------------------------------------------
   第三轮是拿真浏览器扫线上 DOM，按「实际渲染出来的渐变与动效」逐条清的。
   下面这些是就地改在各自定义处的，这里只留记录便于回溯：
     · .shine-text     去掉金色流光扫过动画（公告区）—— 最典型的模板痕迹
     · .tcard-dl       工具卡片「下载」：135deg 金渐变 → 实色 var(--gold)
     · .col-btn        收录卡片「加群」：亮金渐变 #f7dd8e→#d4a017 → 实色
     · .fl-badge       友链首字母圆牌：金渐变 → 中性灰底 + 边框
     · .sub-side-card--soft  投稿侧栏：米黄渐变底 → var(--bg-panel)
   另外：assets/app.js 里公告的两处 `notice-text shine-text` 已去掉 shine-text。
   排查手法见 2026-09-13-18-05-31/_deai-scan.js（扫 emoji / 渐变 / 大圆角投影 / 色板）。
   ========================================================================== */


/* ==========================================================================
   v16：后台「拖拽 / 粘贴图片上传」的视觉反馈
   --------------------------------------------------------------------------
   三处用到（都在后台的内容发布页）：
     .bk-editor.is-drag     富文本编辑区正被拖入图片 → 中间浮出提示、底色变浅
     [data-bbk-dropzone].is-drag   图集等投放区正被拖入图片 → 金色虚线高亮
     .bbk-drop-hint         投放区里的操作提示条（拖拽 / 粘贴两句话讲清）
   说明：投放区统一用 outline 而不是 border 做高亮 —— 各类上传框原本边框
   有无、宽窄都不一样，outline 不占位、不改布局，挂到任意元素上都成立。
   ========================================================================== */
.bk-editor { position: relative; }

.bk-droptip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--gold);
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 5;
}

.bk-editor.is-drag { border-color: var(--gold); }
.bk-editor.is-drag .bk-droptip { opacity: 1; }
.bk-editor.is-drag .bk-area { background: var(--bg-soft); }

/* 上传中：工具栏按钮变淡且不可点，避免一批还没传完又拖一批进来 */
.bk-editor.busy .bk-btn-upload { opacity: .5; pointer-events: none; }

[data-bbk-dropzone].is-drag {
  outline: 2px dashed var(--gold);
  outline-offset: -4px;
  background: var(--bg-soft);
}

.bbk-drop-hint {
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--text-mute);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

[data-bbk-dropzone].is-drag > .bbk-drop-hint {
  border-color: var(--gold);
  color: var(--gold-text);
  font-weight: 600;
}

/* ==========================================================================
   v15.8：搜索框加大 + 「共 N 条」后面的数量说明（.count-note）
   ========================================================================== */

/* 搜索框再大一点：宽 / 高 / 字号一起加，按钮同步加高，视觉才不歪 */
.tool-bar .tb-search {
  flex: 1 1 340px;
  max-width: 560px;
}
.top-search-input {
  padding: 12px 18px;
  font-size: 14.5px;
  border-radius: 8px 0 0 8px;
}
.top-search-btn {
  padding: 12px 26px;
  font-size: 14.5px;
  border-radius: 0 8px 8px 0;
}

/* 数量说明（后台「网站设置 → 数量说明文案」，留空整句不显示） */
.count-note {
  position: relative;
  padding-left: 13px;
  font-size: 12.5px;
  color: var(--text-mute);
  white-space: nowrap;
}
.count-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .85;
}

@media (max-width: 900px) {
  .tool-bar .tb-search { flex: 1 1 260px; max-width: 380px; }
}
@media (max-width: 560px) {
  .count-note { display: none; }   /* 小屏一行放不下：让位给标题和计数 */
}

/* v16.0：「付费下载」大按钮 —— 标示纯人民币版本（没填金币价），字大醒目 */
.meta-act--pay{border-color:#d9534f;background:#fff7f0;}
.meta-act--pay .meta-act-t{font-size:19px;font-weight:800;color:#d9534f;}
.meta-act--pay .meta-act-s{color:#6b7280;}

/* v16.0：详情页上方「版本价格」行 + 卡片价格标签 */
.meta-price-line{display:flex;align-items:center;gap:6px;width:100%;margin:0 0 10px;
  padding:8px 12px;border:1px dashed #f2c9cb;border-radius:8px;background:#fdf6f6;
  font-size:13px;color:#6b7280;}
.meta-price-label{color:#8a8f99;}
.meta-price-line b{font-size:18px;font-weight:800;}
.meta-price-rmb b{color:#d9534f;}
.meta-price-coin b{color:#b45309;}
.meta-price-line em{font-style:normal;color:#c2c7d0;}

/* 卡片右下角人民币价格标签：醒目 + 可点击跳详情 */
.perm-tag--price{font-size:14px;font-weight:800;color:#d9534f;border:1px solid #f0c9c7;
  border-radius:999px;padding:2px 10px;background:#fff5f4;}
.perm-tag--price:hover{background:#ffeceb;}

/* ==========================================================================
   v16.7：价格 CTA —— 大字价格 + 小字动作，列表行竖排、卡片底横排
   ========================================================================== */
/* 价格 CTA（v16.12：去掉大红实心块 —— 每行一个大色块太扎眼、与灰标签格格不入。改为浅底描边 + 深红字，hover 才实心） */
.price-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 86px;
  box-sizing: border-box;
  padding: 6px 12px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid rgba(166, 27, 41, .38);
  color: var(--accent);
  line-height: 1.25;
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.price-cta b { font-size: 15px; font-weight: bold; white-space: nowrap; }
.price-cta span { font-size: 11px; opacity: .82; white-space: nowrap; }
.price-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 3px 12px rgba(166, 27, 41, .22); transform: none; filter: none; }

/* 免费版 / 已拥有：弱化成中性描边，不抢付费版的戏 */
.price-cta--free, .price-cta--owned {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
}
.price-cta--free:hover, .price-cta--owned:hover { box-shadow: none; border-color: var(--accent); color: var(--accent); filter: none; }

/* 金币版：金色描边，和人民币实心区分 */
.price-cta--coin {
  background: transparent;
  border: 1px solid var(--gold-text);
  color: var(--gold-text);
}
.price-cta--coin:hover { background: rgba(166, 27, 41, .07); box-shadow: none; filter: none; }

/* 卡片底部：转横排、小一号 */
.card-bottom-bar .price-cta { flex-direction: row; gap: 7px; min-width: 0; padding: 6px 12px; }
.card-bottom-bar .price-cta b { font-size: 14px; }

/* v16.33：首页卡片双价 —— 人民币副价标（与金币主价同排基线对齐，不错位） */
.price-cta .pc-rmb {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: #d9534f;
  background: rgba(217, 83, 79, .08);
  border: 1px solid rgba(217, 83, 79, .3);
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
  line-height: 1.4;
  align-self: center;
}
.price-cta:hover .pc-rmb { color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }

/* v16.33：双价版本的「金币获取途径」提醒（v16.37 精简：按钮下一行小字，不再抢眼） */
.meta-coin-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  margin: 2px 0 0;
  padding: 6px 10px;
  border: 1px dashed rgba(180, 83, 9, .28);
  background: rgba(255, 200, 120, .07);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: #8a5a12;
  box-sizing: border-box;
}
.meta-coin-tip svg { flex: 0 0 auto; margin-top: 1px; width: 14px; height: 14px; }
.meta-coin-tip b { color: #b45309; }



/* ==========================================================================
   v16.16：后台「网站设置 → 版本库筛选类型」的 chip 编辑器
   ========================================================================== */
.tle-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  min-height: 42px;
  box-sizing: border-box;
}
.tle-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: #fff;
  /* v17.49：显式深色文字 —— 后台 admin.html 是页面级深色主题，
     这里不写死的话 chip 会继承深色主题的浅色文字 → 白底白字看不见 */
  color: #1f2430;
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
}
.tle-del {
  width: 17px;
  height: 17px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(166, 27, 41, .1);
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.tle-del:hover { background: var(--accent); color: #fff; }
/* v16.29：chip 调序按钮（↑↓），样式与删除键同族但用中性色 */
.tle-mv {
  width: 17px;
  height: 17px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(22, 37, 68, .08);
  color: var(--text-2, #444);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.tle-mv:hover { background: var(--text-2, #444); color: #fff; }
.tle-mv:disabled { opacity: .35; cursor: default; }
.tle-mv:disabled:hover { background: rgba(22, 37, 68, .08); color: var(--text-2, #444); }
.tle-empty { font-size: 12px; color: var(--text-mute); }
.tle-add { display: inline-flex; align-items: center; gap: 6px; }
.tle-input {
  width: 128px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: #1f2430; /* v17.49：同 .tle-chip，防深色主题下白底浅字 */
  font-size: 12.5px;
  outline: none;
}
.tle-input:focus { border-color: var(--accent); }
.tle-btn {
  padding: 5px 12px;
  border: 1px solid rgba(166, 27, 41, .38);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--accent);
  font-size: 12.5px;
  cursor: pointer;
}
.tle-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* v16.19：列表行「外链」小标 —— 该条填了跳转外链接，点击直接经中转页跳出去 */
.jump-tag {
  background: rgba(166, 27, 41, .08);
  color: var(--accent);
  border: 1px dashed rgba(166, 27, 41, .35);
}

/* v16.18：卡片头部的「保存筛选类型」按钮 */
.tle-save-btn {
  margin-left: auto;
  padding: 5px 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.tle-save-btn:hover { filter: brightness(1.08); }
.tle-save-btn[disabled] { opacity: .6; cursor: default; }

/* v16.21：详情弹窗「返回顶部」—— 浮在遮罩层上（弹窗右侧偏下），滚过一屏才出现 */
.pop-backtop {
  position: absolute;
  right: 28px;
  bottom: 88px;
  z-index: 6;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-panel-solid);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: color .2s, border-color .2s, transform .2s;
}
.pop-backtop small { font-size: 10px; }
.pop-backtop:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

@media (max-width: 768px) {
  .pop-backtop { right: 14px; bottom: 84px; width: 42px; height: 42px; font-size: 15px; }
}

/* v16.22：后台「下载地址」多行编辑器（对照 3122.cn）
   v16.79：第 4 列新增「更新时间」可编辑输入框（dl-t），列宽 150px */
.dlist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 100px 150px auto;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.dlist-row .dl-t { text-align: center; font-size: 12px; }
.dlist-row .dlist-del { flex: none; padding: 5px 10px; }
@media (max-width: 768px) {
  .dlist-row { grid-template-columns: 1fr 1fr; }
  .dlist-row .dl-size { grid-column: 1 / 2; }
  .dlist-row .dl-t { grid-column: 2 / 3; }
  .dlist-row .dlist-del { grid-column: 1 / 3; justify-self: end; }
}


/* v16.79：列表编辑页顶栏（此前 .topbar/.top-nav/.brand 漏写样式，导航条是裸链接、很难看；补全为自适应明暗的浅/深色吸顶导航，与全站红金风格统一） */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--card, #fff);
  border-bottom: 1px solid var(--border, #dde2ec);
  box-shadow: 0 1px 8px rgba(17,24,39,0.04);
}
.topbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 16px;
  height: 56px; display: flex; align-items: center; gap: 18px;
}
.topbar .brand {
  font-size: 17px; font-weight: 800; letter-spacing: .02em;
  color: var(--text, #1f2430); text-decoration: none; white-space: nowrap;
}
.topbar .brand:hover { color: var(--accent, #a61b29); }
.top-nav {
  display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap;
}
.top-nav a {
  position: relative; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-sub, #606266);
  text-decoration: none; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.top-nav a:hover { color: var(--gold-text, #a61b29); background: var(--bg-elevated, #f7f9fd); }
.top-nav a.active { color: #fff; background: var(--accent, #a61b29); }
.top-nav a.active:hover { color: #fff; background: var(--accent, #a61b29); }

/* ==========================================================================
   v16.23 对照 3122.cn 细节改版（v16.24 修订：横幅只上工具库）
   --------------------------------------------------------------------------
   ① 详情头部横幅化：资源信息卡改深红渐变横幅，白字、白胶囊、白信息行
      —— 仅工具库（3122 只有工具详情页是深色横幅，版本库保持浅色底）
   ② 下载行元信息用 | 分隔
   ③ 工具卡片竖排化：图标居中在上 + 名称 + 简介（可两行）+ 整宽下载按钮
   ========================================================================== */

/* ---- ① 详情头部 → 深红渐变横幅（仅工具库）---- */
#popBox[data-pop-kind="tool"] .dp-idcard {
  background: linear-gradient(135deg, #a61b29 0%, #8c1622 55%, #6e111b 100%);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 10px 26px -14px rgba(166, 27, 41, .55);
}
/* 横幅上的标题转白；分类小字两种底色各给一版 */
#popBox[data-pop-kind="tool"] .dp-title { color: #fff; }
.dp-title-cat {
  display: inline-block;
  margin-left: 10px;
  vertical-align: 2px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .3px;
  color: var(--text-mute);
}
#popBox[data-pop-kind="tool"] .dp-title-cat { color: rgba(255, 255, 255, .72); }
/* v17.29（站长：「付费版本」放标题后面、分类字后面）—— 标题行里的小号权限胶囊 */
.dp-title-perm {
  display: inline-flex;
  align-items: center;
  vertical-align: 3px;
  margin-left: 8px;
}
.dp-title-perm .dp-badge { height: 20px; padding: 0 9px; font-size: 11px; }
/* 权限徽章统一成半透明白胶囊（横幅上彩色徽章会花）—— 仅工具库 */
#popBox[data-pop-kind="tool"] .dp-badge {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
#popBox[data-pop-kind="tool"] .dp-badge--vip,
#popBox[data-pop-kind="tool"] .dp-badge--svip,
#popBox[data-pop-kind="tool"] .dp-badge--coin,
#popBox[data-pop-kind="tool"] .dp-badge--negotiate { color: #fff; }
#popBox[data-pop-kind="tool"] .dp-head-perm { color: rgba(255, 255, 255, .78); }

/* v16.23 新增：3122 同款「访问热度 / 解压密码 / 提取码」信息项
   v16.24：与权限胶囊同行，无底无框直接排在横幅底色上（3122 同款，
   白长条又宽又亮太突兀）；默认字色给版本库浅底用，工具库深底另给白字版 */
.dp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
}
.dp-bi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-sub);
}
.dp-bi svg { display: block; opacity: .85; flex: none; }
.dp-bi em { font-style: normal; color: var(--text-mute); }
.dp-bi b {
  color: var(--text);
  font-weight: 700;
  word-break: break-all;
  user-select: all;
}
/* v17.29（站长）：表头条「版本价格」——数字用强调红，跟下方大价格同色 */
.dp-bi--price b { color: var(--accent, #a61b29); font-weight: 800; }
/* 工具库深底横幅上 → 白字 */
#popBox[data-pop-kind="tool"] .dp-bi { color: rgba(255, 255, 255, .82); }
#popBox[data-pop-kind="tool"] .dp-bi em { color: rgba(255, 255, 255, .60); }
#popBox[data-pop-kind="tool"] .dp-bi b { color: #fff; }

/* 横幅上其余文字全部转白 —— 仅工具库 */
#popBox[data-pop-kind="tool"] .dp-desc { color: rgba(255, 255, 255, .86); }
#popBox[data-pop-kind="tool"] .dp-mi em { color: rgba(255, 255, 255, .62); }
#popBox[data-pop-kind="tool"] .dp-mi b { color: #fff; }
#popBox[data-pop-kind="tool"] .dp-tag {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .30);
  color: rgba(255, 255, 255, .92);
}
#popBox[data-pop-kind="tool"] .dp-tag--src {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .30);
  color: rgba(255, 255, 255, .92);
}
/* 缩略图在深底上描一道白边，立得住 —— 仅工具库；
   v16.24：图标放大到 88px（3122 图标几乎撑起横幅左侧，64px 太小没气势） */
#popBox[data-pop-kind="tool"] .dp-thumb {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
/* v16.24：图标放大后左栏同步加宽（5755 行的 64px 栅格被覆盖） */
#popBox[data-pop-kind="tool"] .dp-idcard.has-media { grid-template-columns: 88px minmax(0, 1fr); }

/* ---- ② 下载行元信息：多段之间用 | 分隔 ---- */
.dp-dl-meta span + span::before {
  content: '|';
  margin: 0 8px;
  color: var(--text-mute);
  opacity: .55;
}

/* ---- ③ 工具卡片竖排化（3122 首页卡片同款骨架）----
   v17.25：卡片缩略图维持本站原有的「小图标居中」样式 —— 这是站长认可的稿子，
   帮助文档页也已统一到这一套（不再单独覆写 16:10），两页观感完全一致。 */
.tcard--v {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
}
.tcard--v .tcard-thumb {
  width: 64%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  margin: 8px auto 12px;
  border-radius: 14px;
  overflow: hidden;
  /* v16.24：去掉灰底框 —— 3122 卡片上图标直接贴白卡面，轻得多 */
  background: transparent;
  border: 0;
  cursor: pointer;
}
.tcard--v .tcard-thumb .tcard-ico-ph { background: var(--bg-soft); border: 1px solid var(--border); }
.tcard--v .tcard-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.tcard--v .tcard-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.tcard--v .tcard-title {
  display: block;
  max-width: 100%;
  /* v16.81：工具名**完整显示**，多长都不省略（站长：名字给我完整显示，不要限制字数）。
     以前是 white-space:nowrap + text-overflow:ellipsis 单行截断
     （v16.37 那句「两行折行不合理」的旧决定），结果名字只能露出前半截 + 省略号 ——
     这正是反复被反馈的「工具名字显示不全」。
     现在改成整段换行显示：名字再长也完整铺开，卡片高度自适应。 */
  overflow: visible;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  /* v16.24：字号字重收一档（3122 卡片标题小巧柔和，黑粗大字太压迫） */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
/* v16.24：简介副标题可两行折行（一句话简介优先，信息量比单行分类大） */
.tcard-sub {
  margin: 5px 0 8px;
  max-width: 100%;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-mute);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.tcard-statline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 11px;
}
.tcard--v .tcard-dl,
.tcard-dl--full {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  /* v16.24：深红实心太重 —— 3122 是淡底红字小按钮，压得住又不太吵 */
  background: rgba(166, 27, 41, .08);
  color: #a61b29;
  border: 0;
  font-weight: 600;
}
.tcard--v .tcard-dl:hover,
.tcard-dl--full:hover {
  background: rgba(166, 27, 41, .16);
  color: #a61b29;
  box-shadow: none;
}
.tcard--v .tcard-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
}

@media (max-width: 768px) {
  #popBox[data-pop-kind="tool"] .dp-idcard { padding: 18px 16px; }
  .dp-head { gap: 6px 16px; padding: 9px 12px; }
  .tcard--v .tcard-thumb { width: 58%; }
}

/* ==========================================================================
   v16.33：公告详情弹层（点击公告条弹出看全文）
   ========================================================================== */
.notice-text--link { cursor: pointer; }
.notice-text--link:hover { opacity: .8; }
.notice-more {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #a61b29);
  white-space: nowrap;
}
.notice-pop-mask {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .45);
}
.notice-pop-mask.show { display: flex; }
.notice-pop {
  width: 100%;
  max-width: 560px;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .2);
  overflow: hidden;
}
.notice-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.notice-pop-head b { font-size: 16px; }
.notice-pop-close {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 2px 6px;
}
.notice-pop-body {
  padding: 16px 18px 20px;
  overflow: auto;
  font-size: 14px;
  line-height: 1.9;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   v16.25 工具卡密度对齐 3122（站长：框太大了）
   --------------------------------------------------------------------------
   3122 一行 8 个小卡（小图标+名+一行灰字+小按钮）；我们一行 2 个大卡。
   网格列宽砍半、图标缩到 72px、副标题单行、去掉卡上统计、按钮变小。
   ⚠️ v16.80 部分回退（站长后续反馈：卡太窄、工具名只显示半截）：
      列宽 148 → 186px、图标 72 → 86px、标题放开两行完整显示；副标题仍单行。
   ========================================================================== */
.tool-card-grid {
  /* v16.81：卡片加宽到 300px（站长：工具名不能折到第二排、也不能有省略号，
     那就只能把卡片加宽，让一行放得下整个名字）。
     桌面 1280 容器下一行 4 个；配合 JS 的 fitToolTitles() 自动缩字号，
     后台上限 60 字宽（30 个汉字）的名字也能在一行里完整显示。 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.tcard--v { padding: 12px 12px 12px; }
.tcard--v .tcard-thumb {
  position: relative;
  width: 66%;
  max-width: 100px;
  margin: 4px auto 10px;
  border-radius: 12px;
}
/* v17.26：缩略图加载失败才回落首字母（工具库 / 帮助文档共用）
   —— 平时 ::after 不显示，不占位、不遮图 */
.tcard--v .tcard-thumb::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  background: var(--bg-soft);
}
.tcard--v .tcard-thumb--imgerr::after { display: flex; }
.tcard--v .tcard-title {
  font-size: 13px;
  /* v16.81：**单行显示整个名字**，既不折行也不加省略号。
     nowrap 保证永远只有一排；字号由 fitToolTitles() 自动往下调
     （13px → 最低 9px）直到整行放得下，所以名字再长也是完整铺开。 */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;      /* 明确不要省略号 */
  min-height: 0;
  line-height: 1.45;
}
.tcard-sub {
  margin: 2px 0 8px;
  font-size: 11.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcard--v .tcard-dl,
.tcard-dl--full {
  height: 30px;
  font-size: 12px;
  border-radius: 8px;
}
.tcard--v .tcard-fav { top: 6px; right: 6px; }
@media (max-width: 768px) {
  /* v16.80：窄屏同样放宽（128 → 158），保证标题两行时也不至于一个字一折 */
  .tool-card-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
  .tcard--v .tcard-thumb { width: 58%; }
}

/* ---- v16.25 详情横幅「功能短说明 + 最后更新」胶囊行（3122 同款）---- */
.dp-promo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.dp-promo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-sub);
}
.dp-promo-tag svg { display: block; opacity: .8; flex: none; }
#popBox[data-pop-kind="tool"] .dp-promo-tag {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .30);
  color: #fff;
}

/* ========================================================================
   24. v16.48 会员中心 · 消息通知（收藏的工具更新提醒）
   ======================================================================== */

.notif-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--red, #d42845);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.notif-item {
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: var(--card, rgba(255, 255, 255, 0.03));
}

.notif-item--unread {
  border-color: rgba(245, 166, 35, 0.55);
  background: rgba(245, 166, 35, 0.06);
}

.notif-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}

.notif-item-time {
  flex: none;
  color: var(--mute, #8a93a3);
  font-size: 12px;
}

.notif-item-body {
  color: var(--text-2, #b9c0cc);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 8px;
}

.notif-item .btn-sm { padding: 4px 12px; font-size: 12px; }

/* ========================================================================
   26. v16.49 全站通知提醒（侧栏入口 + 右下角弹窗）
   ======================================================================== */

.side-notif { justify-content: center; }

.notif-pop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  max-width: 300px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--card, #fff);
  border: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.notif-pop.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notif-pop-title {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--text, #1c2333);
}

.notif-pop-body {
  font-size: 13px;
  color: var(--text-2, #4a5468);
  line-height: 1.6;
  margin-bottom: 6px;
  word-break: break-all;
}

.notif-pop-foot {
  font-size: 12px;
  color: var(--gold, #c8963e);
}

/* v17.16：27 节（v16.51 同图模糊填充）随「16:10 cover 铺满」方案移除 ——
   cover 铺满后无留白，模糊垫底层不再需要。 */

/* ========================================================================
   28. v16.53 会员功能可见性：会员中心「会员指南」+ 详情页金币购买提示
   ======================================================================== */

/* 侧栏菜单项上的「新」角标 */
.nav-new {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--gold, #c8992e);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 15px;
  vertical-align: middle;
}

/* 概览页顶部常驻引导条 */
.guide-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px dashed var(--gold, #c8992e);
  border-radius: 8px;
  background: rgba(200, 153, 46, 0.07);
  font-size: 13px;
  line-height: 1.7;
}

.guide-banner a {
  flex: none;
  color: var(--gold, #c8992e);
  font-weight: bold;
  white-space: nowrap;
}

/* 指南卡片网格 */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.guide-card {
  padding: 16px 18px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  background: var(--card, rgba(255, 255, 255, 0.03));
}

.guide-h {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: bold;
}

.guide-card ul {
  margin: 0 0 12px;
  padding-left: 18px;
}

.guide-card li {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2, #4a5468);
}

.guide-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.guide-acts a {
  font-size: 12px;
  font-weight: bold;
  color: var(--gold, #c8992e);
  cursor: pointer;
}

/* 详情页下载区底部的金币购买提示 */
.dp-coin-tip {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(200, 153, 46, 0.1);
  border: 1px solid rgba(200, 153, 46, 0.35);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-2, #4a5468);
}

.dp-coin-tip a {
  margin-left: 8px;
  font-weight: bold;
  color: var(--gold, #c8992e);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .guide-grid { grid-template-columns: 1fr; }
}

/* 未登录侧栏：登录后权益提示 */
.side-guest-tip {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-mute, #8a93a3);
}

/* ========================================================================
   29. v16.54 侧栏会员区补全：金币余额 / 我的收藏 / 退出登录
   ======================================================================== */

.side-coin {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(200, 153, 46, 0.1);
  border: 1px solid rgba(200, 153, 46, 0.3);
  font-size: 12px;
  color: var(--text-2, #4a5468);
}

.side-coin b {
  color: var(--gold, #c8992e);
  font-size: 14px;
}

.side-coin:hover {
  background: rgba(200, 153, 46, 0.16);
}

/* 退出登录：视觉上弱化，放在会员中心块最后 */
#navLogoutBtn {
  margin-top: 4px;
  color: var(--text-mute, #8a93a3);
}

#navLogoutBtn:hover {
  color: var(--red, #d42845);
  border-color: var(--red, #d42845);
}


/* ==========================================================================
   v16.80 后台微调（站长要求）
   --------------------------------------------------------------------------
   ① 左上角不再放 LOGO 图 —— admin.html 里已删掉 <img class="banner-logo-img">，
      顶栏只留「文字站名 + 管理后台」。site.js 的 applyLogo() 是按类名找节点的，
      找不到自然跳过，所以「网站设置」里的图片 LOGO 不会再被塞回后台。
   ② 页面整体往左移：后台顶栏与内容容器都收紧左侧留白。原来内容居中在
      1400px 容器里，宽屏下左右各空一大截，视觉上跟左侧菜单脱节。
   ========================================================================== */
#adminApp .top-banner { padding-left: 14px; padding-right: 18px; }
#adminApp .wrap-container {
  max-width: none;
  margin: 0;
  padding: 0 18px 40px 14px;
}

/* ==========================================================================
   v16.81 ①：滚动条加强存在感（站长：下拉条太不好找）
   --------------------------------------------------------------------------
   上面「15. 滚动条」那段把它压成了 10px 宽 + 透明轨道 + --border-strong(#d1d5db)
   浅灰滑块 —— 白底上几乎融进背景，根本看不出哪里能拖。
   现在：轨道给一层浅灰底 + 内描边（形成明显的「槽」），滑块用站点红，
   宽度回到 14px，hover/拖动时加深。
   ========================================================================== */
html { scrollbar-color: var(--sb-thumb) var(--sb-track); }   /* Firefox */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-thumb {
  min-height: 52px;
  border-radius: 8px;
  border: 3px solid transparent;          /* 留出空隙，滑块不顶边 */
  background-clip: padding-box;
  background-color: var(--sb-thumb);
}
::-webkit-scrollbar-thumb:hover  { background-color: var(--sb-thumb-hover); }
::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }

/* 侧边栏那种窄容器仍用细条，但配色跟主滚动条统一（原来也是浅灰看不见） */
.side-scroll::-webkit-scrollbar { width: 8px; }
.side-scroll::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 8px; }
.side-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: var(--sb-thumb);
  border-radius: 8px;
}

/* ==========================================================================
   v16.82：独立详情页（/version-<id>.html、/tool-<id>.html）
   --------------------------------------------------------------------------
   v16.81 只是把弹窗层搬进文档流，结果两处翻车（站长截图反馈）：
     ① 工具库 pop-layer 本来就在 .app-main 里 → app.js 的搬迁判断跳过，
        详情被排到页脚**下面**，上面还留着搜索框 / 分类 / 友情链接整页列表；
     ② 详情正文长得离谱：一条版本挂了 58 张截图，弹窗里是竖着一路排下来的，
        整页化之后就是 45000px 的长图墙，一条版本要滑几十屏。
   这一版把独立详情页当成一篇**正经文章页**来排：
     · 列表相关的整块 UI（公告 / 面包屑 / 搜索 / 分类 / 列表 / 友情链接）全收，
       只保留页脚；详情容器跟页脚同宽，左中右对齐；
     · 页面容器改成「透明壳 + 内部卡片」，不再是一张撑满的大白卡；
     · 工具库那条深红横幅在页面上改成白卡（弹窗里的深底是为遮罩服务的，
       放到白底页面上就是一大块刺眼的红）；
     · 版本截图 / 工具截图在整页下改成**缩略图网格**（每张 4:3 裁切、点击放大），
       58 张图从 45000px 压到 2000px 左右。
   想改回弹窗：assets/app.js 顶部的 DETAIL_AS_PAGE 改成 false 即可。
   ========================================================================== */

/* ① 列表 UI 全收起，只留页脚 */
body.detail-page .app-main > .wrap-container > *:not(.site-footer) { display: none !important; }

/* ② 详情层：正常文档流里的整页容器
   v16.88：宽度改成跟页脚（.wrap-container）**用同一套度量** ——
   max-width: var(--max-width) + padding 0 20px + margin 0 auto，
   与 .wrap-container 逐字一致，详情正文 / 底部按钮条因此与页脚左右严丝合缝。
   上一版给 #popBox 写死 1160px 是错的：窗口比 1400 宽时，页脚容器被
   margin:auto 居中摊到满宽（1360），而 #popBox 只有 1160 —— 于是详情比页脚
   窄一截、还整体往右偏（站长第二次截图反馈的就是这个）。 */
body.detail-page .pop-layer.as-page {
  position: static;
  display: block;
  inset: auto;
  z-index: auto;
  overflow: visible;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 40px;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.detail-page .pop-layer.as-page #popBox {
  /* ⚠ 选择器必须带 #popBox —— 1161 行有一条 `#popBox { max-width:1080px;
     padding:34px 42px 30px }`，只用类名（.pop-content）压不过 ID 选择器。 */
  max-width: none;
  width: 100%;
  margin: 0;
  max-height: none;
  overflow: visible;
  padding: 20px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}
/* 弹窗那颗右上角 × 在整页模式下没有意义（关闭 = 返回列表，见底部按钮） */
body.detail-page .pop-outside-close,
body.detail-page .pop-backtop { display: none; }

/* ③ 面包屑：首页 › 版本库/工具库 › 当前条目 */
.dp-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-sub);
}
.dp-crumb a { color: var(--text-sub); text-decoration: none; }
.dp-crumb a:hover { color: var(--accent); }
.dp-crumb-sep { color: var(--text-mute); }
.dp-crumb-cur { color: var(--text); font-weight: 700; }
/* v16.92：独立详情页顶部「返回」条（仅页首；滚动跟随由 .dp-back-float 负责） */
.dp-backbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 2px;
  background: var(--bg-panel-solid);
  border-bottom: 1px solid var(--border);
}
.dp-back-btn {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.dp-back-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-panel-solid); }
.dp-back-btn:active { transform: translateY(1px); }
/* v16.92：滚过标题栏后的浮钮（纯文字；吸顶栏 62px 之下，窄屏再让开汉堡） */
.dp-back-float {
  display: none;
  position: fixed;
  top: 76px;
  left: 14px;
  z-index: 90;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel-solid);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.dp-back-float.is-show { display: inline-flex; align-items: center; }
.dp-back-float:hover { border-color: var(--accent); color: var(--accent); }
.dp-back-float:active { transform: translateY(1px); }
/* 面包屑挂进返回条：去掉自身边距/边框，复用条的底边做分隔 */
.dp-backbar .dp-crumb { margin: 0; padding: 0; border: 0; flex: 1 1 auto; min-width: 0; }
/* v17.61：移动端详情页表头 —— 面包屑里的完整条目标题和下面红色大标题重复两遍，
   375px 屏上把表头撑成 4-5 行，用户没看到正文先滚半天。
   移动端面包屑只留「首页 › 版本库」，长标题交给红色大标题区单独展示；
   返回条压成单行紧凑排列。桌面端（>768px）维持原样。 */
@media (max-width: 768px) {
  .dp-backbar { padding: 8px 2px; gap: 10px; margin-bottom: 12px; }
  .dp-back-btn { padding: 8px 14px; font-size: 14px; border-radius: 9px; }
  .dp-crumb-lastsep, .dp-backbar .dp-crumb-cur { display: none; }
  .dp-backbar .dp-crumb { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; font-size: 12.5px; }
}
/* v16.91：仅会员可下载 —— 锁定态按钮（游客可见，点击引导登录） */
.dp-dl-btn.is-locked { background: var(--bg-elevated); color: var(--text-sub); border-color: var(--border); cursor: pointer; }
.dp-dl-btn.is-locked:hover { color: var(--accent); border-color: var(--accent); }
.tcard-dl.is-locked { background: var(--bg-elevated); color: var(--text-sub); border-color: var(--border); }
.tcard-dl.is-locked:hover { color: var(--accent); border-color: var(--accent); }

/* v16.94：会员专属工具 —— 游客详情登录墙（语言与 cdk.html 一致，克制不加戏） */
.dp-login-wall { max-width: 420px; margin: 48px auto; padding: 36px 28px 32px; text-align: center;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; }
.dp-login-wall .dp-login-ico { color: var(--accent); margin-bottom: 10px; }
.dp-login-wall .dp-login-ico svg { width: 34px; height: 34px; }
.dp-login-wall h3 { margin: 0 0 8px; font-size: 18px; color: var(--text); }
.dp-login-wall p { margin: 0 0 22px; font-size: 13px; line-height: 1.7; color: var(--text-sub); }
.dp-login-btns { display: flex; gap: 12px; justify-content: center; }


/* ④ 信息卡 / 标题：整页下标题给足层级（弹窗里 20px 合适，页面上略小） */
body.detail-page #popBox .dp-idcard { margin-bottom: 16px; }
body.detail-page #popBox .dp-title { font-size: 22px; font-weight: 800; line-height: 1.45; }

/* ⑤ 工具库那条深红横幅 → 页面模式下改回白卡（深底是给弹窗遮罩用的） */
body.detail-page #popBox[data-pop-kind="tool"] .dp-idcard {
  background: var(--bg-panel-solid);
  border-color: var(--border);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, .06));
}
body.detail-page #popBox[data-pop-kind="tool"] .dp-title { color: var(--text); }
body.detail-page #popBox[data-pop-kind="tool"] .dp-title-cat { color: var(--text-mute); }
body.detail-page #popBox[data-pop-kind="tool"] .dp-desc { color: var(--text-sub); }
body.detail-page #popBox[data-pop-kind="tool"] .dp-bi { color: var(--text-sub); }
body.detail-page #popBox[data-pop-kind="tool"] .dp-bi em { color: var(--text-mute); }
body.detail-page #popBox[data-pop-kind="tool"] .dp-bi b { color: var(--text); }
body.detail-page #popBox[data-pop-kind="tool"] .dp-mi em { color: var(--text-sub); }   /* v17.48：同上 */
body.detail-page #popBox[data-pop-kind="tool"] .dp-mi b { color: var(--text); }
body.detail-page #popBox[data-pop-kind="tool"] .dp-head-perm { color: var(--text-sub); }
body.detail-page #popBox[data-pop-kind="tool"] .dp-badge {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text-sub);
}
body.detail-page #popBox[data-pop-kind="tool"] .dp-badge--vip,
body.detail-page #popBox[data-pop-kind="tool"] .dp-badge--svip,
body.detail-page #popBox[data-pop-kind="tool"] .dp-badge--coin,
body.detail-page #popBox[data-pop-kind="tool"] .dp-badge--negotiate { color: var(--accent); }
body.detail-page #popBox[data-pop-kind="tool"] .dp-tag,
body.detail-page #popBox[data-pop-kind="tool"] .dp-tag--src,
body.detail-page #popBox[data-pop-kind="tool"] .dp-promo-tag {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text-sub);
}
body.detail-page #popBox[data-pop-kind="tool"] .dp-thumb {
  border-color: var(--border);
  box-shadow: none;
}

/* ⑥ 正文阅读宽度：整页下与页脚同宽（不再收窄），整体观感更舒展 */
body.detail-page .dp-body > :not(.pop-img-stack) { max-width: none; }

/* ⑦ 版本截图 / 工具截图：竖排一张一张（保留用户要的单列节奏）
       v17.54：不再满宽铺 —— 高度封顶 70vh，随访客屏幕高矮自适应伸缩
       （笔记本矮屏图自动小、大屏自动大），100% 缩放下整屏正好看全一张，
       不会大到要手动缩小浏览器；点图仍进灯箱看 1440 原图细节。
       v17.89（站长：详情页下面几十张截图偏小，尤其矮屏 / 手机）：
       桌面限高 70vh -> 85vh（矮屏也能更舒展，仍基本整屏看全一张）；
       手机端缩略图网格见下方 ≤980 块 minmax(118->150px)。 */
body.detail-page .pop-img-stack {
  display: flex;
  flex-direction: column;
  align-items: center;      /* 图宽不足列宽时居中，避免偏左 */
  gap: 14px;
  max-width: none;
  margin-top: 18px;
}
body.detail-page .pop-img-stack img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 85vh;
  margin: 0;
  border-radius: 10px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, .06));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.detail-page .pop-img-stack img:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
/* v17.06：整页模式同样走 blur-up（清晰度不变，仅加载过渡；specificity 高于上方通用规则） */
body.detail-page .pop-img-stack img.blur-up {
  filter: blur(18px);
  transition: filter .6s ease, box-shadow var(--dur) var(--ease);
}
body.detail-page .pop-img-stack img.blur-up.is-sharp {
  filter: none;
}
/* 「共 N 张截图 · 点击可放大」小提示（由 app.js 插在网格后面） */
.dp-shots-tip {
  margin: 10px 0 2px;
  font-size: 12.5px;
  color: var(--text-mute);
}

/* v16.88：整页模式下的底部操作条（演示网站 / 在线购买 / 复制链接 / 收藏 / 返回列表）
   —— 原来它带 `margin: 18px -34px -26px`，那是为「弹窗 42px 内边距」配的负外边距，
   整页模式下 #popBox 已经没有横向内边距了，再负 34px 就会比正文两侧各多出一截、
   跟页脚对不齐。现在改成一张与正文同宽的卡片，左右与页脚严丝合缝。 */
body.detail-page #popBox .pop-btn-group {
  position: static;
  z-index: auto;
  margin: 20px 0 0;
  padding: 14px 16px;
  background: var(--bg-panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, .06));
}

/* ==========================================================================
   v16.86 左导航底部「客服中心」块（替代原来右下角悬浮客服面板）
   --------------------------------------------------------------------------
   固定在 .app-side 最下方：两个客服 QQ（可点开 QQ 会话 / 复制）+ 微信二维码。
   无左导航的页面（登录 / 会员中心等）仍由原 kefu.js 浮窗兜底。
   ========================================================================== */
.side-kefu {
  margin-top: 14px;
  padding: 14px 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.side-kefu-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}
.side-kefu-h-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.side-kefu-list { display: flex; flex-direction: column; gap: 8px; }
.side-kefu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card-2);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur), background var(--dur);
}
.side-kefu-item:hover { border-color: var(--accent); background: var(--bg-soft); }
.side-kefu-qq {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; padding: 0 6px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 700;
}
.side-kefu-num { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.side-kefu-copy {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-sub);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.side-kefu-copy:hover { color: var(--accent); border-color: var(--accent); }
.side-kefu-wx { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); text-align: center; }
.side-kefu-wx-t { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.side-kefu-wx-img {
  display: block;
  width: 132px; height: 132px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  object-fit: contain;
}
.side-kefu-wx-id { margin-top: 8px; font-size: 12.5px; color: var(--text-sub); }

/* ⑧ 底部操作条：页面上是一条通栏吸底白条，不再是弹窗里那层渐变屁股 */
body.detail-page #popBox .pop-btn-group {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: 22px 0 0;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  justify-content: center;
  gap: 10px;
  background: var(--bg-panel-solid);
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, .3);
}

@media (max-width: 980px) {
  /* 顶部让位：窄屏时左上角有个悬浮汉堡按钮（.side-fab），站点给列表容器留了 56px
     （.with-sidebar .wrap-container{padding-top:56px}）。详情层是它的兄弟节点，
     不留这一截，面包屑第一行就被汉堡压住（站长手机端截图反馈）。 */
  /* v17.53：顶部栏目条（sticky 在流内）已替汉堡承担让位，详情层只留小空隙 */
  body.detail-page .pop-layer.as-page { padding: 14px 12px 22px; }
  body.detail-page .dp-back-float {
    top: 64px; left: 10px;
    /* v17.86：浮钮叠在红色 banner 上时要有悬浮感，平贴白块像贴错的贴纸 */
    box-shadow: 0 3px 12px rgba(0, 0, 0, .22);
    border-radius: 18px;
  }

  body.detail-page .pop-layer.as-page #popBox { padding-top: 4px; }
  body.detail-page #popBox .dp-title { font-size: 18.5px; }
  body.detail-page .dp-body > :not(.pop-img-stack) { max-width: none; }
  body.detail-page .pop-img-stack { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  /* 底部操作条：5 颗按钮竖排会吃掉半屏（实测 235px），窄屏改两列网格，
     末颗「返回列表」通栏 —— 手机上一屏 844，横竖都比原来省一半。 */
  body.detail-page #popBox .pop-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 18px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  body.detail-page #popBox .pop-btn-group > :last-child { grid-column: 1 / -1; }
  body.detail-page #popBox .pop-btn-group .btn { padding: 8px 10px; font-size: 13px; }
}

/* ==========================================================================
   v16.95：会员专享工具登录墙（app.js 注入，对标 cdk.html 的 loginWall）
   游客点开「仅会员可使用」的工具 → 整页居中卡片，不再进详情 / 不跳转
   ========================================================================== */
.bbk-mwall {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 18, 24, .55);
}
.bbk-mwall.show { display: flex; }
.bbk-mwall-box {
  position: relative;
  max-width: 480px;
  width: 100%;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  padding: 34px 26px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.bbk-mwall-lock { font-size: 40px; margin-bottom: 8px; }
.bbk-mwall-box h2 { margin: 0 0 10px; font-size: 19px; color: var(--text, #17181a); }
.bbk-mwall-box p { margin: 0 0 20px; color: var(--text-sub, #6b7280); font-size: 14px; line-height: 1.7; }
.bbk-mwall-box p strong { color: var(--gold-text, #b8860b); }
.bbk-mwall-btns { display: flex; gap: 12px; justify-content: center; }
.bbk-mwall-btns .btn { min-width: 96px; }
.bbk-mwall-x {
  position: absolute; top: 8px; right: 14px;
  font-size: 22px; line-height: 1; color: var(--text-sub, #6b7280);
  background: none; border: 0; cursor: pointer; padding: 4px;
}
.bbk-mwall-x:hover { color: var(--text, #17181a); }
html.bbk-mwall-lockscroll { overflow: hidden; }

/* ===== v17.30：窄屏时规格面板改成竖排 =====
   价格动作块从右侧落到下面一条，避免左右互挤；网格列宽同步收窄。 */
@media (max-width: 760px) {
  .dp-meta-box { flex-direction: column; align-items: stretch; gap: 12px; }
  .dp-priceline--inbox {
    align-self: auto;
    justify-content: space-between;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border, #e8e8ec);
  }
  .dp-meta-main { gap: 10px; }
  /* v17.32：窄屏改一列，格子里的值不再被压成省略号 */
  .dp-metarow--v { grid-template-columns: 1fr; }
  .dp-metarow--v > * { border-right: 0; }
  .dp-metarow--v > :nth-child(-n+2) { border-top: 1px solid var(--border, #e6e7eb); }
  .dp-metarow--v > :first-child { border-top: 0; }
}



/* ==========================================================================
   v17.41：手机 / 平板端排版重做 —— 对照 3122.cn 移动端逐页拆解
   --------------------------------------------------------------------------
   3122 的手法（从它 CSS 里扒的）：只有一个 785px 断点，桌面/移动两套布局；
   移动端把「大图卡」全压成一行信息横条（370x78），图片 float 左、操作按钮
   绝对定位右上、hover 动效全关，页面左右各留 10px。

   90gj 的病灶（390 视口实测）：顶部 4 条横幅竖排堆叠 133px + 公告 50px +
   筛选墙 746px，首屏 844px 内一条内容都看不到；版本卡单张 404px 高，
   首页总高 70810px —— 3122 只有 30211px。

   本层只覆盖 ≤900px，桌面端零影响；全部用高特异性 + !important 压住原规则，
   **绝不修改既有声明**（避免又踩「改一处崩一片」的坑）。
   ========================================================================== */
@media (max-width: 900px) {

  /* --- ① 页面左右留 10px（对齐 3122）--- */
  .wrap-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


  /* --- ③ 公告条收紧 --- */
  .notice-bar {
    margin: 0 0 8px !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }

  /* --- ④ 筛选墙 746px → 三行横滑 chip（约 240px）---
     3122 没有筛选墙（分类是独立区块）。这里折中：保留筛选功能，
     但每行改成「小标签 + 一行可左右划的 chip」，不再竖向堆成一大片。 */
  .filter-bar-wrap {
    padding: 6px 10px !important;
    margin-bottom: 10px !important;
  }
  .filter-row,
  .filter-row--line {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    padding: 7px 0 !important;
    margin-top: 0 !important;
  }
  .filter-row + .filter-row {
    margin-top: 0 !important;
    padding-top: 7px !important;
  }
  .filter-row-label,
  .filter-row--line .filter-row-label {
    padding-top: 0 !important;
    font-size: 11.5px !important;
    letter-spacing: .5px !important;
  }
  .filter-btn-group,
  .filter-row--line .filter-btn-group {
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 6px !important;
    padding: 1px 0 3px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-btn-group::-webkit-scrollbar { display: none; }
  .filter-btn,
  .filter-row--line .filter-btn {
    flex: 0 0 auto !important;
    padding: 5px 11px !important;
    font-size: 12.5px !important;
  }

  /* --- ⑤ 工具条：标题 / 计数 / 搜索 压成两行 --- */
  .tool-bar {
    padding: 8px 10px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .tool-bar .page-title-text { font-size: 15px !important; }
  .tool-bar .count-tip { font-size: 12px !important; }
  /* 移动端强制卡片视图：列表视图在小屏没意义，还占一颗切换按钮 */
  .tool-bar .view-switch-group { display: none !important; }
  .tool-bar .search-bar-wrap,
  .tool-bar .tb-search {
    flex: 1 1 100% !important;
    order: 5;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .top-search-input { border-radius: 6px 0 0 6px !important; }

  /* --- ⑥ 版本卡：404px 大图卡 → 约 130px 横条（本次核心）---
     纯 CSS Grid 重排，不动 app.js 生成的 HTML：
     img 跨三行占左侧，标题 / 标签 / 底栏依次排右侧。 */
  .card-grid-view {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .card-item {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    grid-template-areas: "img title" "img tags" "img bottom" !important;
    align-items: start !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    padding: 10px !important;
    border-radius: 10px !important;
    transform: none !important;
  }
  .card-item:hover {
    transform: none !important;
    box-shadow: var(--shadow-card) !important;
  }
  .card-item .card-img-box {
    grid-area: img !important;
    align-self: stretch !important;
    width: 108px !important;
    height: auto !important;
    min-height: 70px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }
  .card-item .card-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .card-item:hover .card-img-box img { transform: none !important; }
  .card-item .card-img-ph { min-height: 70px !important; font-size: 26px !important; }
  .card-item .card-title {
    grid-area: title !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding-right: 26px;      /* 给右上角收藏按钮让位 */
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  .card-item .card-tag-row {
    grid-area: tags !important;
    margin: 0 !important;
    min-height: 0 !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  /* 关键：chip 必须 flex:0 0 auto，否则会被 nowrap 压窄成「论…」这种半个字 */
  .card-item .card-tag-row .engine-tag,
  .card-item .card-tag-row .engine-tag1,
  .card-item .card-tag-row > * {
    flex: 0 0 auto !important;
    padding: 1px 7px !important;
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
    white-space: nowrap !important;
  }
  .card-item .card-bottom-bar {
    grid-area: bottom !important;
    margin: 0 !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--border) !important;
    font-size: 11.5px !important;
    gap: 8px !important;
  }
  .card-item .card-bottom-bar .price-cta {
    padding: 4px 10px !important;
    font-size: 12px !important;
  }
  .card-item .card-bottom-bar .price-cta b { font-size: 13px !important; }
  .card-item .card-fav-btn {
    top: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
  }

  /* --- ⑦ 工具卡：竖排小卡 → 横条（图左 / 文右 / 按钮钉右中）---
     3122 首页工具卡就是 370x78 一整行：图标在左，名称+简介在中间，
     「免费下载」绝对定位在右上。这里照搬。 */
  .tool-card-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .tcard--v {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    grid-template-areas: "thumb body" !important;
    align-items: center !important;
    column-gap: 10px !important;
    padding: 10px !important;
    padding-right: 96px !important;   /* 给右侧下载按钮留位 */
    border-radius: 10px !important;
  }
  .tcard--v .tcard-thumb {
    grid-area: thumb !important;
    width: 68px !important;
    max-width: 68px !important;
    min-width: 68px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }
  .tcard--v .tcard-body {
    grid-area: body !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .tcard--v .tcard-title {
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
  .tcard-sub {
    text-align: left !important;
    margin: 2px 0 4px !important;
    font-size: 12px !important;
    -webkit-line-clamp: 1 !important;
  }
  .tcard-statline {
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    font-size: 11px !important;
  }
  /* 下载按钮从「整宽条」改成钉在卡片右侧中间的胶囊 —— 3122 同款 */
  .tcard--v .tcard-dl,
  .tcard--v .tcard-dl--full {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    min-width: 72px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
  }
  .tcard--v .tcard-fav {
    top: 4px !important;
    right: 4px !important;
    transform: scale(.82) !important;
    transform-origin: right top !important;
  }

  /* --- ⑧ 网址导航 / 交流群 的栏目卡：收掉大内边距，防横向溢出 --- */
  .col-card {
    padding: 12px 12px 10px !important;
    min-height: 0 !important;
    border-radius: 12px !important;
  }
  .col-card,
  .col-card * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .col-card:hover { transform: none !important; }

  /* --- ⑨ 区块标题统一成 3122 的「左竖红条 + 粗体」--- */
  .page-title-text {
    position: relative;
    padding-left: 10px !important;
  }
  .page-title-text::before {
    display: block !important;
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 15px;
    border-radius: 2px;
    background: var(--accent);
  }

  /* --- ⑩ 悬浮客服按钮缩小，别压内容 --- */
  #kfuFab {
    transform: scale(.92);
    transform-origin: right center;
  }
}

/* ==========================================================================
   v17.42（站长：「把这几个字改得稍微醒目一点」）
   详情页灰色价格框内右上角那组「微变 / 单职业 · 付费版本」——
   分类字原先取最浅一档灰（--text-mute）+ 字重 500，铺在浅灰价格框上偏淡；
   权限胶囊又是 .13 的浅色底，远看只剩一团色块。
   这里只提一档、不换风格：分类字加深到正文次级灰、字重 600、字号 +0.5px；
   胶囊放大半档，浅底上的权限胶囊底色统一加浓。
   作用域锁死在 #popBox 详情页标题行内，列表页 / 卡片上的同名 class 不动。
   ========================================================================== */
#popBox .dp-title .dp-title-tags .dp-title-cat {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--text-sub);
}
/* 工具库那支不跟着加深：横幅上是半透明白（等同 8823 那条原值），
   详情页整页模式是浅底（等同 9656 那条原值）—— 两条都原样回写，
   只让它吃到上面的字号 / 字重提升，颜色零回归。 */
#popBox[data-pop-kind="tool"] .dp-title .dp-title-tags .dp-title-cat {
  color: rgba(255, 255, 255, .72);
}
body.detail-page #popBox[data-pop-kind="tool"] .dp-title .dp-title-tags .dp-title-cat {
  color: var(--text-mute);
}
#popBox .dp-title .dp-title-tags .dp-title-perm .dp-badge {
  height: 22px;
  padding: 0 11px;
  font-size: 12px;
}
/* 版本库是浅底，权限胶囊原来那层 .13~.16 的底几乎看不出形状 —— 各加浓一档 */
#popBox:not([data-pop-kind="tool"]) .dp-title .dp-title-tags .dp-badge--free {
  background: rgba(46, 204, 113, .20);
  border-color: rgba(31, 158, 82, .52);
  color: #16803f;
}
#popBox:not([data-pop-kind="tool"]) .dp-title .dp-title-tags .dp-badge--coin {
  background: rgba(240, 185, 11, .24);
  border-color: rgba(198, 150, 12, .58);
  color: #8a6100;
}
#popBox:not([data-pop-kind="tool"]) .dp-title .dp-title-tags .dp-badge--negotiate {
  background: rgba(255, 159, 67, .22);
  border-color: rgba(214, 122, 25, .55);
  color: #b25c07;
}

/* ==========================================================================
   v17.44（站长：「工具库详情页的抬头（标题栏）太难看太 LOW」）
   --------------------------------------------------------------------------
   只重做工具库这一支的详情抬头。**每条选择器都带 [data-pop-kind="tool"]**，
   版本库那一支一个字不碰。
   原来的三处病根：
     ① 权限徽章被塞在灰框里，和标题彻底脱节；
     ② 工具分类在标题右上角飘一次、又在灰框下面排一遍 —— 同一件事印两遍；
     ③ 灰框 1004×94，内容只占左边一半，右半片空白 ⇒ 又空又廉价。
   改法：拆掉灰块，换成标准抬头 —— 标题行（一条细线）信息区。
   结构侧改动（徽章上移 / 标签去重）在 app.js，这里只管版式。
   ========================================================================== */

/* ---- ① 标题行：徽章上移后与分类字同在右端，贴着标题首行 ----
   这里用 position:static（回到文档流）而不是 5917 那种绝对定位：
   绝对定位的胶囊是脱流的，长标题会从它下面穿过去；工具库的标题普遍较短，
   回到流里 margin-left:auto 顶到行尾既不会重叠、也照样是「右端对齐」。
   （5925 那条 ≤760px 的 position:static 依旧生效，不冲突。） */
#popBox[data-pop-kind="tool"] .dp-title .dp-title-tags {
  position: static;
  align-self: flex-start;
  margin-left: auto;
  right: auto;
  bottom: auto;
  padding-top: 5px;
  gap: 8px;
}
/* 标题行下压一条细线 —— 它取代了原来那层灰底，成为抬头唯一的边界 */
#popBox[data-pop-kind="tool"] .dp-title {
  margin: 0;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--border, #e6e7eb);
}
/* 标题行与下面那行之间的间距（.dp-idcard 的栅格行间距默认 18px，略松） */
#popBox[data-pop-kind="tool"] .dp-idcard.has-media { row-gap: 15px; }
/* 图标 88px 比两行信息高，信息块居中对齐 —— 不然又是「一边高一边低」 */
#popBox[data-pop-kind="tool"] .dp-idcard.has-media > .dp-idcard-main { align-self: center; }

/* ---- ② 拆掉灰块（内容照旧，只是不再用一块灰底去「框」它）---- */
#popBox[data-pop-kind="tool"] .dp-meta-box {
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0;
}
#popBox[data-pop-kind="tool"] .dp-meta-main { gap: 9px; }

/* ---- ③ 元信息：统一成一条「标签：值」行 ----
   原来「访问热度 12」（无冒号 + 眼睛图标）和「引擎：GOM」（有冒号 + 无图标）
   混排在一条线上，一眼就是两种风格拼的。统一字号 / 冒号 / 字重，去掉图标，
   相邻项之间用中点分隔。 */
#popBox[data-pop-kind="tool"] .dp-head,
body.detail-page #popBox[data-pop-kind="tool"] .dp-head {
  gap: 5px 0;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
}
#popBox[data-pop-kind="tool"] .dp-head > .dp-bi,
#popBox[data-pop-kind="tool"] .dp-head > .dp-mi { font-size: 12.5px; }
#popBox[data-pop-kind="tool"] .dp-head .dp-bi svg { display: none; }
#popBox[data-pop-kind="tool"] .dp-head > .dp-bi { gap: 0; }
#popBox[data-pop-kind="tool"] .dp-head > .dp-bi em::after { content: '：'; }
#popBox[data-pop-kind="tool"] .dp-head > .dp-bi b,
#popBox[data-pop-kind="tool"] .dp-head > .dp-mi b { font-weight: 600; }
/* 中点分隔写在每一项自己身上（用 gap 的话换行时行首会多出一颗）。
   实测 0.5 的不透明度在 3x 下都几乎看不见，提到 0.8 —— 它只是个分隔符，
   不该抢戏，但也不能等于没有。 */
#popBox[data-pop-kind="tool"] .dp-head > * + *::before {
  content: '·';
  margin-right: 9px;
  color: var(--text-mute);
  opacity: .8;
  font-weight: 400;
}

/* ---- ④ 功能短说明 / 发布时间：去掉胶囊底，回到正文级文本 ---- */
#popBox[data-pop-kind="tool"] .dp-promo,
body.detail-page #popBox[data-pop-kind="tool"] .dp-promo {
  gap: 0;
  margin: 0;
}
#popBox[data-pop-kind="tool"] .dp-promo-tag,
body.detail-page #popBox[data-pop-kind="tool"] .dp-promo-tag {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--text-sub);
}
#popBox[data-pop-kind="tool"] .dp-promo-tag + .dp-promo-tag::before {
  content: '·';
  margin: 0 4px 0 10px;
  color: var(--text-mute);
  opacity: .8;
  font-weight: 400;
}
#popBox[data-pop-kind="tool"] .dp-promo-tag svg { color: var(--accent, #a61b29); opacity: .85; }

/* ---- ⑤ 标题行里的权限徽章：免费=绿、付费=金/橙（浅底上要能一眼分出）---- */
#popBox[data-pop-kind="tool"] .dp-title .dp-title-tags .dp-title-perm .dp-badge {
  height: 21px;
  padding: 0 10px;
  font-size: 11.5px;
}
#popBox[data-pop-kind="tool"] .dp-title .dp-title-tags .dp-badge--free {
  background: rgba(46, 204, 113, .14);
  border-color: rgba(31, 158, 82, .42);
  color: #16803f;
}
#popBox[data-pop-kind="tool"] .dp-title .dp-title-tags .dp-badge--coin {
  background: rgba(240, 185, 11, .18);
  border-color: rgba(198, 150, 12, .50);
  color: #8a6100;
}
#popBox[data-pop-kind="tool"] .dp-title .dp-title-tags .dp-badge--negotiate {
  background: rgba(255, 159, 67, .16);
  border-color: rgba(214, 122, 25, .45);
  color: #b25c07;
}
/* 深红横幅（弹窗模式）下仍是半透明白胶囊，别把横幅上的可读性弄丢。
   ⚠️ 判据只能用 body 上的 .detail-page —— #popBox 自己永远不带这个 class，
   写成 #popBox:not(.detail-page) 会在整页模式下也命中，
   把浅底上的徽章刷成「白字 + 白底」，等于把「免费下载」藏起来。 */
body:not(.detail-page) #popBox[data-pop-kind="tool"] .dp-title .dp-title-tags .dp-badge {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
/* 分类字给到正文次级灰（原来最浅一档灰，压在细线上几乎看不见） */
#popBox[data-pop-kind="tool"] .dp-title .dp-title-tags .dp-title-cat {
  color: var(--text-sub, #4b5563);
}

/* ---- ⑥ 窄屏：胶囊组折到标题下面单独一行、左对齐 ---- */
@media (max-width: 760px) {
  #popBox[data-pop-kind="tool"] .dp-title .dp-title-tags {
    margin-left: 0;
    align-self: auto;
    padding-top: 2px;
  }
  #popBox[data-pop-kind="tool"] .dp-head > * + *::before { margin-right: 7px; }
}

/* ==========================================================================
   v17.50：移动端详情页重做（§7 待办头等项）
   --------------------------------------------------------------------------
   对照 3122.cn 移动端详情页：深红 banner 居中大图标 + 竖条小标题 + 下载卡。
   遵循 v17.41 约定：只加不改，全部高特异性(#popBox) + !important 压住原规则；
   弹窗模式与独立页模式(#popBox 通用)都生效，桌面端零影响。
   ========================================================================== */
@media (max-width: 900px) {

  /* --- ① 版本库详情：深红 banner 抬头 + 居中大图标（3122 同款）---
       工具库本身已是深红横幅，这里只处理版本库。 */
  #popBox:not([data-pop-kind="tool"]) .dp-idcard {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
    margin: 0 0 14px !important;
    padding: 22px 14px 0 !important;
    background: linear-gradient(165deg, #c0212f 0%, #a61b29 55%, #8c1422 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(140, 20, 34, .28) !important;
    color: #fff !important;
  }
  #popBox:not([data-pop-kind="tool"]) .dp-idcard.has-media > .dp-thumb,
  #popBox:not([data-pop-kind="tool"]) .dp-idcard > .dp-thumb {
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 12px !important;
    border-radius: 20px !important;
    border: 3px solid rgba(255, 255, 255, .92) !important;
    background: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25) !important;
  }
  #popBox:not([data-pop-kind="tool"]) .dp-idcard .dp-thumb-img { object-fit: contain !important; }
  /* v17.86：标题改纵向 flex —— 标题文字独占整行，胶囊组（分类字+徽章）
     换到标题下方**独占一行居中**。此前 .dp-title 是 block、胶囊是
     inline-flex 文档流，会黏在标题最后一行末尾（长标题折行时挤成一坨）。 */
  #popBox:not([data-pop-kind="tool"]) .dp-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    color: #fff !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    position: static !important;
    font-size: 20px !important;
  }
  #popBox:not([data-pop-kind="tool"]) .dp-title .dp-title-text {
    display: block !important;
    width: 100% !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .28) !important;
  }
  #popBox:not([data-pop-kind="tool"]) .dp-title-tags {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 8px 0 2px !important;
  }
  #popBox:not([data-pop-kind="tool"]) .dp-title-tags .dp-title-cat { color: rgba(255, 255, 255, .85) !important; }
  #popBox:not([data-pop-kind="tool"]) .dp-title-tags .dp-badge {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .4) !important;
    color: #fff !important;
  }
  /* 元信息白卡：贴底停靠，与红 banner 同宽、底部圆角对齐 */
  #popBox:not([data-pop-kind="tool"]) .pop-meta-list { margin: 14px 0 0 !important; }
  #popBox:not([data-pop-kind="tool"]) .dp-meta-box {
    margin: 0 !important;
    padding: 16px 14px !important;
    background: var(--bg-panel-solid) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 0 16px 16px !important;
  }
  #popBox:not([data-pop-kind="tool"]) .dp-meta-main > .dp-head { justify-content: center !important; }
  #popBox:not([data-pop-kind="tool"]) .dp-buy-top { text-align: center !important; }
  #popBox:not([data-pop-kind="tool"]) .dp-buy-top-btn {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center !important;
    height: 42px !important;
    font-size: 15px !important;
  }

  /* --- ② 工具库详情移动端：小图标居中 --- */
  #popBox[data-pop-kind="tool"] .dp-idcard.has-media {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center !important;
  }
  #popBox[data-pop-kind="tool"] .dp-idcard.has-media > .dp-thumb {
    width: 76px !important;
    height: 76px !important;
    margin: 0 auto 10px !important;
  }
  #popBox[data-pop-kind="tool"] .dp-title { text-align: center !important; }
  #popBox[data-pop-kind="tool"] .dp-title-tags { justify-content: center !important; }

  /* --- ③ 分区：竖条小标题（深红）+ 收紧内边距 --- */
  #popBox .dp-sec { padding: 16px 14px 18px !important; margin-top: 12px !important; }
  #popBox .dp-sec:first-child { margin-top: 4px !important; }
  #popBox .dp-sec-h { margin-bottom: 10px !important; padding-bottom: 8px !important; }
  #popBox .dp-sec-t { font-size: 14px !important; padding-left: 11px !important; letter-spacing: .3px !important; }
  #popBox .dp-sec-t::before {
    width: 4px !important;
    height: 14px !important;
    border-radius: 2px !important;
    background: var(--accent) !important;
  }
  #popBox .dp-body { font-size: 15px !important; line-height: 1.85 !important; }

  /* --- ④ 下载卡：整行卡片 + 全宽主按钮（移动端更好点） --- */
  #popBox .dp-dl-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  #popBox .dp-dl-main { min-width: 0 !important; }
  #popBox .dp-dl-acts { width: 100% !important; }
  #popBox .dp-dl-btn {
    width: 100% !important;
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
  #popBox .dp-dl-btn--buy { width: 100% !important; }
}

/* ==========================================================================
   v17.67：侧栏会员面板「身份等待态」
   HTML 默认是未登录样式，JS 确认身份前先用 visibility 隐藏面板内容，
   防止每次刷新页面都先闪现「未登录」再跳变成登录态。
   app.js user.render() 首次渲染时移除 body.auth-wait；
   页面内联脚本 2.5 秒兜底移除（JS 加载失败时保证登录入口可见）。
   ========================================================================== */
body.auth-wait .side-member { visibility: hidden; }