/* ==========================================================================
   站点样式表
   --------------------------------------------------------------------------
   模块划分：
     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;
}


/* ==========================================================================
   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%;
  height: 118px;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elevated);
  position: relative;
  cursor: pointer;   /* 点击缩略图进入详情页 */
}

.card-img-box img {
  width: 100%;
  height: 100%;
  /* v16.18：contain 完整显示 —— 站长反馈 cover 裁切把海报上的文字切掉了 */
  object-fit: contain;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  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;
}

/* ==========================================================================
   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: 14px;
  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: 14px;
  line-height: 1.95;
  word-break: break-word;
}
.dp-body img { display: block; width: 100%; height: auto; margin: 14px 0; border-radius: 8px; }

/* 声明区正文 */
.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;
}

/* 弹窗外关闭按钮 */
.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: 210px;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px 13px 19px;
  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: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  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: 15px; 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;
}

/* 复选框 / 单选 */
.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;
}

.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;
}


/* 返回顶部 */
#backTopBtn {
  position: fixed;
  right: 26px;
  bottom: 30px;
  z-index: var(--z-drawer);
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-panel-solid);
  color: var(--gold-text);
  font-size: 19px;
  cursor: pointer;
  transition: all var(--dur) ease;
}

#backTopBtn.show { display: flex; }

#backTopBtn:hover { background: var(--gold); color: #fff; }


/* ==========================================================================
   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 { height: 140px; 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; }
  .card-img-box { height: 200px; }
  .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);
}

/* 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. 顶部横图广告（后台可配）
   ========================================================================== */

.ad-banner {
  display: flex;
  flex-direction: column;   /* 广告竖排：一列一列往下排，不轮播 */
  gap: 10px;
  margin: 0 0 14px;
}
.ad-banner .ad-item {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
  background: var(--bg-elevated);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
}
.ad-banner .ad-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  object-position: center;              /* 正常大小：按原图比例完整显示，不裁剪不变形 */
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.ad-banner .ad-item:hover img { transform: scale(1.015); }

/* ==========================================================================
   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) {
  .kefu-fab { right: 14px; bottom: 70px; padding: 8px 11px 6px; }
  .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;

  --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: 14px; }
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 {
  height: 176px;
  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);
}
.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(--border); color: var(--text-sub); }
#backTopBtn:hover { background: var(--bg-elevated); color: var(--text); }

/* ---- 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-img-box { height: 140px; }
  .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; }
  .card-img-box { height: 200px; }
  .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: 184px;
  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; }

/* 移动端：侧边栏收为抽屉 */
@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: 12px; top: 12px;
    z-index: 500;
    width: 40px; height: 40px;
    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: 18px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
  }
  /* v14.9：只有带左侧抽屉的页面（index / tools，带 .with-sidebar）才需要
     给左上角悬浮的 .side-fab 让位；会员中心没有抽屉，原来白拿了 56px 顶部空白。 */
  .with-sidebar .wrap-container { padding-top: 56px; }
}
@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;
}

/* ---- 左侧会员区 ---- */
.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); }

/* ---- 广告图完整显示 ---- */
.ad-banner .ad-item img {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  display: block;
}
.ad-banner .ad-item {
  box-shadow: none;
  background: transparent;
}

/* ---- 详情弹窗放大 ---- */
.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);
}
.dp-idcard.has-media { grid-template-columns: 300px minmax(0, 1fr); }
/* v14.9：index.html / tools.html 把 .dp-idcard-main 当作网格子项在用，
   但这个类从未定义过 → 子项缺少 min-width:0，长标题 / 长链接会把卡片撑破。 */
.dp-idcard-main { min-width: 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-mute); }
.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);
}

/* 权限徽章 + 权限说明 + 浏览量 */
.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; }

/* 主按钮：跟全站 .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: 12px;
  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 {
  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-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);
}

/* ---- 卡片网格 ---- */
.col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.col-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: 136px;
}

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

.col-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

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

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

.col-go {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-text);
  white-space: nowrap;
}

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

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

.col-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;
}

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

.col-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;
}

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

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

.col-qun b {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.col-copy {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-sub);
  font-size: 11.5px;
  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: 4px 12px;
  border-radius: 8px;
  background: var(--gold);
  color: #fff;
  font-size: 12px;
  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.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;
  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; }
.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;
  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） */
.dlist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 110px auto;
  gap: 6px;
  margin-bottom: 6px;
  align-items: center;
}
.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 .dlist-del { grid-column: 2 / 3; justify-self: end; }
}


/* ==========================================================================
   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); }
/* 权限徽章统一成半透明白胶囊（横幅上彩色徽章会花）—— 仅工具库 */
#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;
}
/* 工具库深底横幅上 → 白字 */
#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 首页卡片同款骨架）---- */
.tcard--v {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
}
.tcard--v .tcard-thumb {
  width: 76%;
  max-width: 150px;
  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%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  /* v16.24：字号字重收一档（3122 卡片标题小巧柔和，黑粗大字太压迫） */
  font-size: 14.5px;
  font-weight: 600;
}
/* 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: 62%; }
}


/* ==========================================================================
   v16.25 工具卡密度对齐 3122（站长：框太大了）
   --------------------------------------------------------------------------
   3122 一行 8 个小卡（小图标+名+一行灰字+小按钮）；我们一行 2 个大卡。
   网格列宽砍半、图标缩到 72px、副标题单行、去掉卡上统计、按钮变小。
   ========================================================================== */
.tool-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.tcard--v { padding: 10px 10px 10px; }
.tcard--v .tcard-thumb {
  width: 62%;
  max-width: 72px;
  margin: 4px auto 8px;
  border-radius: 12px;
}
.tcard--v .tcard-title { font-size: 13px; }
.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) {
  .tool-card-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
  .tcard--v .tcard-thumb { width: 56%; }
}

/* ---- 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;
}