/* ============================================
   万能资源圈 全站公共样式（唯一公共样式文件，全站引用）
   - 滚动条全部隐藏（用户要求取消滚动轮，滚动功能保留）
   - CSS 变量统一：颜色/圆角/间距一处定义全站生效
   ============================================ */
/* ===== CSS 变量（全站统一，页面样式也复用同一套语义变量） ===== */
:root {
  --blue1: #1E88E5;
  --blue2: #1688FF;
  --green: #01C000;
  --red: #ff4444;
  --gray-bg: #f0f2f5;
  --gray-text: #666;
  --border-soft: #eee;
  --radius: 8px;
  --radius-lg: 14px;
  --gap: 10px;

  /* ===== R50：全站暗色模式变量（亮色值；[data-theme=dark] 覆盖为暗色值） ===== */
  --bg-page: #f2f7fd;    /* 页面底色 */
  --bg-light: #f5f7fa;   /* 浅色区块（次级底/占位/灰块） */
  --card-bg: #ffffff;    /* 卡片/弹窗/输入框/白底组件 */
  --border: #e8e8e8;     /* 分隔线/描边 */
  --text: #222;          /* 主文字 */
  --text-light: #666;    /* 次要文字 */
  --text-faint: #999;    /* 提示/占位文字（placeholder/hint） */
  --hover-bg: #f0f7ff;   /* 悬停浅蓝底 */
}
[data-theme="dark"] {
  --bg-page: #14151f;
  --bg-light: #1b1d29;
  --card-bg: #20232f;
  --border: #2e3348;
  --text: #e8eaf0;
  --text-light: #9aa0b5;
  --text-faint: #7a8098;
  --hover-bg: #1d2b45;
}

/* 隐藏所有滚动条（页面/弹窗/列表），滚动手势照常可用 */
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* ===== 全站统一「咨询客服」弹窗（对齐导航页：结构/尺寸/样式/动画一处定义全站生效） ===== */
.kf-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,0.76); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 16px;
}
.kf-mask.open { display: flex; animation: kfMaskIn 0.22s ease; }
@keyframes kfMaskIn { from { opacity: 0; } to { opacity: 1; } }
.kf-box {
  background: var(--card-bg); border-radius: var(--radius-lg); padding: 26px 22px; position: relative;
  max-width: 480px; width: 100%; max-height: 84vh; overflow-y: auto; text-align: center;
  animation: kfBoxIn 0.25s ease;
}
@keyframes kfBoxIn { from { opacity: 0; } to { opacity: 1; } }
.kf-title { font-size: 22px; color: var(--text); margin-bottom: 16px; letter-spacing: 1.3px; padding: 0 34px; text-align: center; }
.kf-qr {
  width: 250px; height: 250px; max-width: 100%; border: 1px solid var(--border); background: var(--bg-light);
  margin: 0 auto 14px; position: relative; display: flex; align-items: center;
  justify-content: center; border-radius: 6px; background: #f3f4f6;
}
.kf-qr img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.kf-qr img[src^="data:image/svg+xml"] { width: 100%; height: 100%; object-fit: contain !important; }
/* 二维码统一出场动画（每次打开客服弹窗由 ui-common.js 重放，全站时序/动效完全一致） */
@keyframes kfQrIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.kf-qr img.kf-qr-in { animation: kfQrIn 0.32s ease; }
/* 二维码统一出场动画（导航页公众号/群聊二维码与客服二维码同一套动效，全站复用） */
#modalImg.kf-qr-in { animation: kfQrIn 0.32s ease; }
.kf-tip { font-size: 16px; color: var(--gray-text); margin-bottom: 16px; letter-spacing: 0.9px; word-break: break-word; }
.kf-jump {
  width: 80%; margin: 0 auto 14px; border: none; border-radius: var(--radius); padding: 11px 32px;
  background: var(--green); color: #fff; font-size: 18px; font-weight: 500; cursor: pointer;
  letter-spacing: 0.9px; display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.10s ease;
}
.kf-close {
  background: var(--red); color: #fff; border: none; padding: 11px 32px; border-radius: var(--radius);
  font-size: 18px; cursor: pointer; letter-spacing: 0.9px; transition: all 0.10s ease;
}
/* ===== 全站统一弹窗按键动效（R17 唯一标准，所有弹窗确定/关闭键复用这一份）=====
   标准 = 资源页资源弹窗底部「咨询客服/关闭」两键的动效：
   鼠标经过 hover：轻微缩小 + 微降透明度（scale 0.97 / opacity 0.9）
   按压 active：更小 + 更淡 + 变暗（scale 0.94 / opacity 0.8 / brightness 0.9）
   过渡时长统一 0.10s ease；文字、颜色、大小等外观各键保持自身样式不变。
   各页面禁止再为弹窗按键写本地 hover/active 缩放副本。 */
.alert-ok, .ann-ok, .btn-item, .modal-inner-btn, .modal-close, .kf-jump, .kf-close {
  -webkit-tap-highlight-color: transparent;
  transition: all 0.10s ease;
}
.alert-ok:hover, .ann-ok:hover, .btn-item:hover, .modal-inner-btn:hover, .modal-close:hover, .kf-jump:hover, .kf-close:hover {
  transform: scale(0.97); opacity: 0.9;
}
.alert-ok:active, .ann-ok:active, .btn-item:active, .modal-inner-btn:active, .modal-close:active, .kf-jump:active, .kf-close:active {
  transform: scale(0.94); opacity: 0.8; filter: brightness(0.9);
}
.kf-x { position: absolute; top: 12px; right: 12px; z-index: 10; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--gray-bg); color: var(--gray-text); font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.10s ease; line-height: 1; }
.kf-x:hover { background: var(--red); color: #fff; transform: scale(0.97); opacity: 0.9; }
.kf-x:active { transform: scale(0.94); opacity: 0.8; filter: brightness(0.9); }
@media (max-width: 600px) {
  .kf-box { padding: 20px 16px; }
  .kf-title { font-size: 19px; }
  .kf-qr { width: 200px; height: 200px; }
  .kf-jump, .kf-close { font-size: 16px; padding: 10px 24px; }
}

/* ===== 全站统一关闭 ×：32px 圆形淡灰底 #666，hover 变红（弹窗/客服/放大预览通用） ===== */
.modal-close-x,
.kf-x {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important; border: none !important;
  background: var(--gray-bg) !important; color: var(--gray-text) !important;
  font-size: 19px !important; line-height: 1 !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; margin: 0 !important;
  transition: all 0.10s ease !important;
}
.modal-close-x:hover,
.kf-x:hover {
  background: var(--red) !important; color: #fff !important; transform: scale(0.97); opacity: 0.9;
}
.modal-close-x:active,
.kf-x:active { transform: scale(0.94); opacity: 0.8; filter: brightness(0.9); }

/* ===== 全站统一图片/视频放大查看器（lightbox） ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.92); touch-action: none;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }

/* ===== 全站弹窗层级规范（强制，后开永远在上层，杜绝倒挂/被媒体内容遮挡） =====
   业务弹窗遮罩 2000 → 分享/确认 3000 → 编辑器放大 6000/6001 →
   弹窗内子弹窗（时间选择/通用输入/插入链接/分类面板）6002 → 客服 10001 →
   放大预览 100000 → 轻提示 100001
   注：子弹窗统一取 6002，保证在"编辑器放大模式(6000/6001)"之上——放大态点插入图片/视频/链接
   的填写弹窗、时间选择等都不会被压住 */
.modal-mask { z-index: 2000 !important; }
#inputMask { z-index: 6002 !important; } /* R15：编辑器插入图片/视频等"弹窗里的输入弹窗"，必须高于业务弹窗与放大编辑器 */
.share-mask, .confirm-mask { z-index: 3000 !important; }
/* R16c：分享链接弹窗确定键——与资源页分享本站弹窗 .share-close 逐字复用（含按压动画，此前动态弹窗为纯内联样式无反馈） */
.share-ok {
  display: block; width: 100%; margin-top: 16px; padding: 11px 0; border: none; border-radius: 10px;
  background: #1E88E5; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: all 0.10s ease; letter-spacing: 1px; -webkit-tap-highlight-color: transparent;
}
.share-ok:active { transform: scale(0.94); opacity: 0.8; filter: brightness(0.9); }
.share-ok:hover { transform: scale(0.97); opacity: 0.9; }
#rteExitZoom { z-index: 6001 !important; }
.kf-mask, #kfFallback { z-index: 10001 !important; }
.lightbox { z-index: 100000 !important; }
.toast { z-index: 100001 !important; }

/* ===== 全站弹窗底部按键区统一：一行 N 键 N 等分、统一间距、等高、文字居中（所有弹窗复用） ===== */
.modal-footer {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--gap) !important;
  margin-top: 16px !important;
  width: 100% !important;
  box-sizing: border-box;
}
.modal-footer > button,
.modal-footer > .btn,
.modal-footer > a,
.modal-footer > input,
.modal-footer > .modal-inner-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 42px !important;
  margin: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  white-space: nowrap;
}
/* 窄屏：预览键独占整行排最前，保存/取消在下一行二等分；PC 端三键同一行三等分 */
@media (max-width: 768px) {
  .modal-footer > .preview-btn { flex: 1 1 100% !important; width: 100% !important; order: -1; }
}
/* 咨询客服弹窗底部按键：等分容器（jump/close 两键各占一半） */
.kf-actions {
  display: flex !important;
  gap: var(--gap) !important;
  width: 100% !important;
  margin-top: 16px !important;
}
.kf-actions > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
}
.kf-jump { width: auto !important; margin: 0 !important; }

/* ===== 全站统一顶栏 tab 按键（唯一实现）=====
   资源页顶栏「咨询客服/分享」、管理页「资源管理/分类管理/数据统计/平台设置/退出」
   完全同一套样式：蓝渐变顶栏上的半透明白胶囊，激活白底蓝字。
   两页禁止各自再写 .tab 样式（复用，非复制）。 */
.tab {
  border: none; background: rgba(255, 255, 255, 0.18);
  color: #fff; padding: 0 16px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; border-radius: 18px;
  font-size: 14px; white-space: nowrap; line-height: 1.2; gap: 5px;
  transition: all 0.2s; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tab.active { background: #fff; color: var(--blue1); font-weight: 600; }
.tab:hover { transform: scale(0.97); opacity: 0.9; }
/* 按下瞬间变白底蓝字：与管理页 tab 激活态同一观感（资源页咨询客服/分享按下也变白，两页统一） */
.tab:active { background: #fff; color: var(--blue1); transform: scale(0.94); }
.tab svg { width: 15px; height: 15px; flex-shrink: 0; display: block; }
.tab svg + span { margin-left: 5px; }

/* ===== 全站统一列表/网格切换（唯一实现，两页同色）=====
   R8 统一配色（用户定稿）：激活按键 = 淡白色底，未激活按键 = 淡蓝色底，
   两页（资源页蓝顶栏 / 管理页白背景工具栏）完全同一套色值，不再区分上下文。
   两页禁止各自再写 view-btn 样式（复用，非复制）。 */
.view-toggle {
  display: flex; align-items: center; gap: 4px;
}
.view-btn {
  padding: 0 10px; border: 1px solid #90CAF9; border-radius: 6px;
  background: #E3F2FD; color: #1565c0; cursor: pointer;   /* 未激活：淡蓝底蓝字 */
  font-size: 13px; height: 38px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; gap: 4px;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.view-btn:hover { transform: scale(0.96); opacity: 0.9; }
.view-btn:active { transform: scale(0.92); opacity: 0.8; }
.view-btn.active {
  background: #FFFFFF; color: #1565c0; border-color: #90CAF9; font-weight: 600; /* 激活：淡白底蓝字 */
}
/* R9 边框统一：激活/未激活边框统一为 #90CAF9（此前未激活为 #BBDEFB），两页同值 */
.view-toggle.on-blue {
  --vb-border: #90CAF9;
  --vb-bg: #E3F2FD;
  --vb-color: #1565c0;
  --vb-on-bg: #FFFFFF;
  --vb-on-color: #1565c0;
  --vb-on-border: #90CAF9;
}

/* 窄屏统一适配（tab 与 view-btn 同步缩放，两页一致） */
@media (max-width: 600px) {
  .tab { padding: 7px 12px; font-size: 13px; }
  .view-toggle .view-btn { padding: 6px 8px; font-size: 12px; }
  /* R8 小屏适配：带图标的按键（咨询客服/分享/列表/网格）窄屏只留图标、隐藏文字，
     title 悬停提示保留——手机顶栏空间有限，图标语义已足够，PC 端仍显示完整"图标+文字" */
  .tab svg + span { display: none; }
  .tab svg { margin: 0; }
  .topbar-actions .tab, .view-toggle .view-btn { padding: 6px 10px; }
  .view-btn span { display: none; }
}

/* ===== 弹窗底部按键隐藏修复 =====
   上方 .modal-footer > button / .kf-actions > button 的 display:inline-flex !important
   会覆盖 JS 设置的内联 style.display='none'，导致本该隐藏的按键被强行渲染
   （资源页"公众号讯"弹窗左侧多出空的绿色跳转键就是这个 bug）。
   内联样式写了 display:none 的按键必须真正隐藏：选择器特异性高于上面两条通用规则。 */
.modal-footer > button[style*="display: none"],
.modal-footer > button[style*="display:none"],
.modal-footer > .modal-inner-btn[style*="display: none"],
.modal-footer > .modal-inner-btn[style*="display:none"],
.kf-actions > button[style*="display: none"],
.kf-actions > button[style*="display:none"] {
  display: none !important;
}

/* ===== 弹窗媒体统一稳定（全站复用，禁止各弹窗单独写） =====
   1) 加载前用 .m-loading 预留 16:9 占位，图片/视频加载完成不会撑开弹窗导致尺寸跳动
   2) 媒体宽度锁死内容区、box-sizing 统一，右侧不会超出弹窗被遮挡，左右边距对称
   3) 弹窗仅允许纵向滚动，横向一律裁切，不出现横向滚动条 */
.modal-box img, .modal-box video, .kf-box img, .ann-box img, .ann-box video, .preview-box img, .preview-box video {
  max-width: 100%; box-sizing: border-box;
}
.m-loading { aspect-ratio: 16 / 9; background: var(--bg-light); border-radius: var(--radius); width: 100%; }
.m-loading.is-video { background: #000; }
.modal-box, .ann-box, .kf-box, .preview-box { overflow-x: hidden; }
/* 富文本内媒体（尺寸未知不锁比例）：统一加载底色，避免加载中空白塌陷的突兀跳动 */
.modal-detail img, .resource-content img, .ann-body img, .rte-editor img, .variant-detail img, .preview-detail img { background: var(--bg-light); }
.modal-detail video, .resource-content video, .ann-body video, .rte-editor video, .variant-detail video, .preview-detail video { background: #000; }

/* ===== 全站统一加载失败占位图（感叹号）尺寸：固定 16:9 + 最小高度，任何位置都不撑破容器、不引起弹窗高度跳动 ===== */
.modal-box img[src^="data:image/svg+xml"], .ann-box img[src^="data:image/svg+xml"], .resource-content img[src^="data:image/svg+xml"], .lightbox img[src^="data:image/svg+xml"] {
  height: auto !important; aspect-ratio: 16 / 9; min-height: 120px; max-width: 100%; margin: 8px auto; object-fit: contain;
}
.modal-cover[src^="data:image/svg+xml"], .preview-cover[src^="data:image/svg+xml"] {
  aspect-ratio: 16 / 9 !important; height: auto !important; max-height: 320px !important; object-fit: contain !important; width: calc(100% - 32px) !important; margin: 16px 16px 0 !important;
}


/* ===== R14 全站统一翻页组件（.uni-pager）：复用数据统计翻页样式（胶囊按钮），两页三处共用 =====
   结构（R35 两组，换行按组折行不拆散）：
   [上一页 | 页码信息（N / M（共X条））| 下一页] 一组  +  [跳页输入+跳转键] 一组 */
.uni-pager {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; padding: 14px 4px 2px; flex-wrap: wrap;
}
/* R35：翻页主组（上一页/页码/下一页）永不拆散——窄屏整体换行 */
.uni-pager .pg-main { display: inline-flex; align-items: center; gap: 8px; }
.uni-pager button.pg-btn {
  padding: 8px 16px; border: 1px solid var(--blue2, #90CAF9); background: var(--card-bg);
  color: var(--blue1, #1565c0); border-radius: 20px; cursor: pointer; font-size: 13px;
  -webkit-tap-highlight-color: transparent;
}
.uni-pager button.pg-btn:hover:not(:disabled) { background: var(--hover-bg); }
.uni-pager button.pg-btn:disabled { opacity: 0.4; cursor: default; }
.uni-pager .pg-info { color: var(--text-light); font-size: 13px; }
.uni-pager .pg-jump { display: inline-flex; align-items: center; gap: 6px; }
.uni-pager .pg-jump input {
  width: 52px; padding: 7px 4px; border: 1px solid var(--blue2, #90CAF9); border-radius: 8px;
  text-align: center; font-size: 13px; box-sizing: border-box; color: var(--text);
  -moz-appearance: textfield; appearance: textfield;
}
.uni-pager .pg-jump input::-webkit-outer-spin-button,
.uni-pager .pg-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.uni-pager .pg-jump button {
  padding: 7px 12px; border: 1px solid var(--blue2, #90CAF9); background: var(--card-bg);
  color: var(--blue1, #1565c0); border-radius: 8px; cursor: pointer; font-size: 13px;
  -webkit-tap-highlight-color: transparent;
}
.uni-pager .pg-jump button:hover { background: var(--hover-bg); }
@media (max-width: 600px) {
  .uni-pager { gap: 6px; }
  .uni-pager button.pg-btn { padding: 7px 12px; font-size: 12px; }
  .uni-pager .pg-info { font-size: 12px; }
}