/* ============================================
       万能资源圈・资源展示页
       风格与引导页统一：蓝色渐变 + 白圆角 + 红关闭
       ============================================ */
    * {
      -webkit-tap-highlight-color: transparent;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
    }

    *, *::before, *::after { min-width: 0; }
    img, video, svg { max-width: 100%; }
    table { max-width: 100%; }

    :root {
      --blue1: #1E88E5;
      --blue2: #64B5F6;
      --blue:  #1688FF;
      --red:   #ff4444;
      --topbar-h: 64px;
      /* R50：暗色相关变量（--bg-page/--bg-light/--card-bg/--border/--text/--text-light/--hover-bg）
         统一移至 ui-common.css 定义（含 [data-theme=dark] 暗色值），此处不再重复定义 */
    }
    /* R49：暗色变量块为死代码（0 处引用），已删，勿再空挂 */
    @keyframes pageFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .logo-enter { animation: logoFadeIn 0.8s ease forwards; }
    @keyframes logoFadeIn {
      from { opacity: 0; transform: scale(0.8); }
      to { opacity: 1; transform: scale(1); }
    }
    html {
      background: var(--bg-page);
      max-width: 100%; overflow-x: hidden; overflow-y: scroll; /* 阻止移动端整页橡皮筋下拉，避免露出蓝色底，自定义下拉刷新不受影响 */
      overscroll-behavior: none;
    }
    body {
      background: var(--bg-page);
      color: var(--text);
      min-height: 100vh; max-width: 100%; overflow-x: hidden;
      padding-top: 0;
      opacity: 1;
      overscroll-behavior: none;
    }

    @media (hover: hover) and (pointer: fine) { html, body { overscroll-behavior: auto; } }
    /* ---------- 顶部栏（固定） ---------- */
    .topbar {
      position: fixed;
      position: sticky; top: 0;
      z-index: 100;
      background: linear-gradient(180deg, var(--blue1) 0%, var(--blue2) 100%);
      box-shadow: 0 2px 10px rgba(30, 136, 229, 0.35);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .topbar.hidden {
      transform: translateY(-100%);
      box-shadow: none;
    }
    .topbar-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .shop-logo {
      width: 32px; height: 32px;
      border-radius: 50%;
      object-fit: cover;
      background: transparent; box-sizing: border-box; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 4px 14px rgba(30,80,140,0.22); transition: transform 0.12s ease, box-shadow 0.12s ease;
      flex-shrink: 0;
    }
    .shop-name {
      color: #fff;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 1.2px;
      white-space: nowrap;
    }
    .shop-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    .shop-logo-link { width: fit-content; text-decoration: none; opacity: 0; /* 进场前整体隐藏 */
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.12s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .shop-logo-link:hover .shop-logo {
      box-shadow: 0 0 0 3px rgba(255,255,255,0.45);
    }
    .shop-logo-link:active {
      transform: scale(0.9);
      opacity: 0.8;
    }
    /* 顶栏操作按钮：咨询客服 / 分享 */
    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    /* 顶栏 tab 按钮：直接引用 ui-common.css 全站公共 .tab（与管理页【资源管理/分类管理】同一份样式，零复制） */

    @keyframes toastIn {
      from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* ---------- 分享提示弹窗 ---------- */
    .share-mask {
      position: fixed; inset: 0; z-index: 998;
      background: rgba(0, 0, 0, 0.6);
      display: none; align-items: center; justify-content: center;
      padding: 16px;
    }
    .share-mask.open { display: flex; }
    .share-box {
      background: var(--card-bg); border-radius: 14px;
      position: relative; padding: 26px 20px; width: 100%; max-width: 400px;
      text-align: center; animation: modalIn 0.25s ease;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }
    .share-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 10px; letter-spacing: 1px; padding: 0 34px; text-align: center; }
    .share-tip { font-size: 14px; color: var(--text-light); margin-bottom: 14px; }
    .share-link {
      /* R15：与分享资源弹窗（showShareLinkModal）链接样式统一——蓝字居中 */
      background: var(--bg-light); border-radius: 8px;
      padding: 10px 12px; font-size: 14px; color: #1565c0;
      word-break: break-all; margin-bottom: 16px; text-align: center;
      user-select: all; line-height: 1.5; max-height: 100px; overflow-y: auto;
    }
    .share-close {
      display: block; width: 100%; margin-top: 16px; padding: 11px 0; border: none; border-radius: 10px;
      background: var(--blue1);
      color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
      transition: all 0.10s ease; letter-spacing: 1px;
    }
    .share-close:active { transform: scale(0.94); opacity: 0.8; filter: brightness(0.9); }
    .search-box {
      flex: 1;
      position: relative;
    }
    .search-input {
      width: 100%;
      height: 38px;
      border: none;
      border-radius: 19px;
      padding: 0 36px 0 38px;
      font-size: 14px;
      background: var(--card-bg);
      outline: none;
    }
    .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px; height: 18px;
      color: var(--text-light);
    }
    .search-clear {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: none;
      background: var(--bg-light);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      transition: all 0.10s ease;
      line-height: 1;
    }
    .search-clear:hover { background: #ff4444; color: #fff; }
    .search-clear.show { display: flex; }
    /* 搜索清除 × 与全站 × 统一：淡灰底 #666 */
    .search-clear { color: var(--text-light); }

    /* ---------- 分类标签栏 ---------- */
    .category-bar {
      position: sticky;
      top: var(--topbar-h);
      z-index: 90;
      background: var(--card-bg);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      overflow-x: auto;
      white-space: nowrap;
      padding: 10px 16px;
      border-bottom-left-radius: 14px;
      border-bottom-right-radius: 14px;
      -webkit-overflow-scrolling: touch; min-height: 56px;
    }
    /* 滚动条隐藏由 ui-common.css 全局处理 */
    .category-tag {
      display: inline-block;
      padding: 8px 20px;
      margin-right: 8px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: var(--card-bg);
      color: var(--text-light);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
    }
    .category-tag:hover {
      border-color: var(--blue1);
      color: var(--blue1);
      background: var(--hover-bg);
      transform: translateY(-1px);
    }
    .category-tag.active {
      background: var(--blue1);
      color: #fff;
      border-color: transparent;
      font-weight: 600;
      box-shadow: 0 3px 10px rgba(30,136,229,0.3);
    }

    /* ---------- 资源网格 ---------- */
    .product-grid {
      max-width: 1200px;
      margin: 0 auto;
      padding: 16px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
    }
    @media (max-width: 1200px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (max-width: 900px)  { .product-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 600px)  {
      .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; }
      .card-img { aspect-ratio: 16 / 10; }
      .card-body { padding: 8px 10px 10px; }
      .card-title { font-size: 13px; min-height: 36px; margin-bottom: 4px; line-height: 1.35; }
      .card-desc { font-size: 11px; line-height: 1.45; -webkit-line-clamp: 1; }
      .product-grid.list-view .card-img { width: 108px; min-width: 108px; }
    }

    /* 列表视图 */
    .product-grid.list-view {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .product-grid.list-view .product-card {
      display: flex;
      align-items: stretch;
    }
    .product-grid.list-view .card-img {
      width: 96px;
      min-width: 96px;
      aspect-ratio: 1 / 1;
      height: auto;
    }
    .product-grid.list-view .card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    @media (max-width: 600px) {
      .product-grid.list-view .card-img { width: 108px; min-width: 108px; }
    }

    /* 视图切换按钮：直接引用 ui-common.css 全站公共 .view-toggle/.view-btn（与管理页同一份样式，零复制） */
    /* 视图切换动画（管理页/资源页一致） */
    @keyframes viewSwitch { from { opacity: 0.4; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } }
    .view-switch-anim { animation: viewSwitch 0.18s ease; }
    /* 视图切换时不让图片/内边距做形变动画，只保留卡片悬浮效果（与管理页一致、不夸张） */
    .product-card { transition: transform 0.10s ease, box-shadow 0.10s ease !important; }
    .card-img, .card-body { transition: none !important; }
    /* 感叹号占位自适应：容器内完整显示、居中、淡白填充、不溢出 */
    img[src^="data:image/svg+xml"]{display:block;width:100%;height:100%;object-fit:contain!important;object-position:center;background:var(--bg-light)!important;}
    /* 弹窗内占位符统一：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"] { 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; }
    .modal-cover.m-loading { aspect-ratio: 16 / 9 !important; width: calc(100% - 32px) !important; margin: 16px 16px 0 !important; max-height: 320px !important; background: var(--bg-light); border-radius: 10px; }

    .product-card {
      background: var(--card-bg);
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
      transition: all 0.2s ease;
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(30,136,229,0.18);
    }
    .card-img {
      width: 100%;
      box-sizing: border-box;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      background: var(--bg-light);
      display: block;
      border: 1px solid var(--border);
      border-bottom: none;
      transition: all 0.2s ease;
    }
    .card-body {
      padding: 12px 14px 8px;
      transition: all 0.2s ease;
    }
    .card-body { padding: 12px 14px 14px; }
    .card-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
      min-height: 42px;
      letter-spacing: 0.3px;
    }
    .card-desc {
      font-size: 12px;
      color: var(--blue1); /* R24：简介字体颜色复用资源弹窗简介的蓝色（var(--blue1)），弹窗本身保持不变 */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.6;
      font-weight: 400;
    }

    .empty-tip {
      text-align: center;
      color: var(--text-light);
      padding: 60px 20px;
      font-size: 14px;
      display: none;
    }
    .empty-tip.show { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; z-index: 50; }
    .empty-tip .empty-icon {
      font-size: 48px;
      margin-bottom: 12px;
      opacity: 0.5;
    }
    .empty-tip .empty-title {
      font-size: 16px;
      color: var(--text-light);
      margin-bottom: 6px;
      font-weight: 500;
    }
    .empty-tip .empty-desc {
      font-size: 13px;
      color: var(--text-light);
    }

    /* ---------- 下拉刷新 ---------- */
    .pull-refresh {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 0;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 10px;
      z-index: 101;
      transition: height 0.2s ease;
      pointer-events: none;
      /* 修复：去掉整块蓝色渐变遮挡，改为轻量提示条，悬浮在内容上方不遮内容 */
      background: transparent;
    }
    .pull-refresh.show {
      height: 46px;
    }
    .pull-refresh-text {
      font-size: 12px;
      color: var(--blue1);
      background: rgba(255,255,255,0.92);
      border: 1px solid var(--blue2);
      border-radius: 20px;
      padding: 6px 16px;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .pull-refresh-icon {
      display: inline-block;
      width: 14px;
      height: 14px;
      border: 2px solid var(--blue2);
      border-top-color: var(--blue1);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ---------- 回到顶部按钮 ---------- */
    .back-top {
      position: fixed;
      right: 24px;
      bottom: 30px;
      z-index: 150;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: var(--blue1);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 14px rgba(30,136,229,0.4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .back-top.show {
      opacity: 0.72;
      visibility: visible;
      transform: translateY(0);
    }
    .back-top:hover {
      opacity: 1;
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(30,136,229,0.5);
    }
    .back-top svg {
      display: block;
      margin: 0 auto;
    }
    .back-top:active {
      transform: scale(0.9);
    }

    /* ---------- 详情弹窗 ---------- */
    .modal-mask {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0, 0, 0, 0.76);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .modal-mask.open { display: flex; }
    .modal-wrap {
      position: relative;
      width: 100%;
      max-width: 680px;
    }
    .modal-box {
      background: var(--card-bg);
      border-radius: 14px;
      width: 100%;
      max-height: 88vh;
      overflow-y: auto;
      scrollbar-gutter: auto;
      min-height: 160px; /* R12 与管理页统一（详情内容多时自然撑高，此保底值几乎不生效，无观感差） */
      animation: modalIn 0.22s ease;
    }
    .modal-box img, .modal-box video { max-width: 100%; height: auto; display: block; }
    @keyframes modalIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .modal-close-x {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 10;
      width: 32px; height: 32px;
      border-radius: 50%;
      border: none;
      background: var(--bg-light);
      color: var(--text-light);
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.10s ease;
    }
    .modal-close-x:hover {
      transform: scale(0.97);
      opacity: 0.9;
      background: var(--hover-bg);
      color: var(--text);
    }
    /* R10 资源弹窗左上角分享键：与右上角×成对角，规格（32px 圆形/12px 距角/过渡动效）完全复用×，
       但底色淡蓝、图标蓝色、悬停蓝底白图标，与×（灰底/悬停深灰）明确区分 */
    .modal-share-x {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 10;
      width: 32px; height: 32px;
      border-radius: 50%;
      border: none;
      background: #E3F2FD;
      color: #1565c0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.10s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .modal-share-x svg { width: 15px; height: 15px; display: block; }
    .modal-share-x:hover {
      transform: scale(0.97);
      opacity: 0.9;
      background: #1688FF;
      color: #fff;
    }
    .modal-share-x:active { transform: scale(0.94); opacity: 0.8; filter: brightness(0.9); }
    /* R36：封面图完整显示（原先 object-fit:cover 把大图裁得只显示中间一块——"显示不全"）；
       contain 保证整张图都在框内、不超框，比例不符时两侧留浅蓝底色 */
    /* R43：封面按内在比例自适应（用户"看情况用最大宽或最大高"的正解）：
       width/height 都 auto → 图片本体等比缩到 max-width/max-height 限制内；
       圆角直接裁在真实图片内容上（旧版固定 16:9 框 + contain 时竖图四周留白，
       圆角只裁到背景色，视觉上"没有圆角"）。占位符/加载失败态由专门的 !important 规则兜底保持 16:9 */
    img.modal-cover { /* R43：选择器升级为 img.modal-cover——505 行 .modal-box img{max-width:100%} 同特异性但位置靠前，被它压掉导致 max-width 计算值失效（图片满宽贴边）；升级后同特异性、位置靠后者胜 */
      width: auto; height: auto;
      max-width: calc(100% - 32px);
      max-height: 320px;
      display: block;
      margin: 16px auto 0;
      background: #eef4fb;
      border-radius: 10px;
      border: 1px solid #e0e0e0;
    }
    .modal-content { padding: 16px 20px 20px; }
    .modal-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .modal-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      flex: 1;
      line-height: 1.4;
      letter-spacing: 0.5px;
      padding-right: 36px;
    }
    .modal-price {
      color: #ff6b35;
      font-size: 24px;
      font-weight: 700;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .modal-desc {
      font-size: 15px;
      color: var(--blue1);
      margin-bottom: 14px;
      font-weight: 600;
      line-height: 1.6;
    }
    .modal-detail {
      background: var(--bg-light);
      border-radius: 10px;
      padding: 14px 16px;
      font-size: 14px;
      color: var(--text-light);
      line-height: 1.9;
      white-space: pre-wrap;
      margin-bottom: 14px;
      border-left: 3px solid var(--blue2); word-break: break-word; overflow-wrap: break-word;
    }

    /* 详情多图 / 多视频 */
    .media-list { margin-bottom: 12px; }
    .media-list img {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 8px;
      display: block;
    }
    .media-list video {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 8px;
      display: block;
      background: #000;
    }

    /* 弹窗内富文本图片/视频自适应（不超模、居中；R36 加高度上限——竖长图不再把弹窗撑爆） */
    .modal-detail img, .modal-detail video {
      max-width: 100%;
      max-height: 60vh;
      height: auto;
      display: block;
      margin: 10px auto;
      border-radius: 8px;
    }

    /* 图片/视频放大查看器（点击放大、双指缩放） */
    .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;
    }
    .lightbox.open { display: flex; }
    /* 类型切换 */
    .variant-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .variant-tab {
      padding: 6px 16px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--card-bg);
      color: var(--text-light);
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
    }
    .variant-tab:hover {
      border-color: var(--blue1);
      color: var(--blue1);
      background: var(--hover-bg);
      transform: translateY(-1px);
    }
    .variant-tab.active {
      background: var(--blue1);
      color: #fff;
      border-color: transparent;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(30,136,229,0.3);
    }
    /* 公告小项 tabs（与类型切换 tabs 完全同款，保证关联性） */
    .ann-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; padding: 0 2px; }
    .ann-tab { padding: 6px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-light); font-size: 13px; cursor: pointer; transition: all 0.15s ease; user-select: none; }
    .ann-tab:hover { border-color: var(--blue1); color: var(--blue1); background: var(--hover-bg); transform: translateY(-1px); }
    .ann-tab.active { background: var(--blue1); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 2px 8px rgba(30,136,229,0.3); }
    .variant-detail {
      background: var(--bg-light);
      border-radius: 8px;
      padding: 12px 14px;
      margin-bottom: 12px;
    }
    .variant-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--border);
    }
    .variant-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
    }
    .variant-price {
      color: #ff6b35;
      font-size: 17px;
      font-weight: 700;
    }
    .variant-detail .v-desc {
      font-size: 13px;
      color: var(--text-light);
      line-height: 1.8;
      white-space: pre-wrap;
      margin-bottom: 8px;
    }
    .variant-detail img, .variant-detail video {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 6px;
      display: block;
    }

    /* 资源码区域 */
    .resource-code-section {
      margin-top: 16px;
      padding: 16px;
      background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
      border-radius: 12px;
      border: 1px solid var(--border);
    }
    .resource-code-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 600;
      color: var(--blue1);
    }
    .resource-code-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .resource-code-input-row {
      display: flex;
      gap: 8px;
    }
    .resource-code-input {
      flex: 1;
      min-width: 0; /* 确保flex子元素可以正确收缩，避免溢出 */
      height: 40px;
      padding: 0 14px;
      border: 1.5px solid #c8e0f5;
      border-radius: 8px;
      font-size: 14px;
      color: var(--text);
      background: var(--card-bg);
      outline: none;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }
    .resource-code-input:focus {
      border-color: var(--blue1);
    }
    .resource-code-btn {
      height: 40px;
      padding: 0 20px;
      border: none;
      border-radius: 8px;
      background: var(--blue1);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }
    .resource-code-btn:hover {
      transform: scale(0.97);
      opacity: 0.9;
    }
    .resource-code-btn:active {
      transform: scale(0.93);
    }
    .resource-code-error {
      margin-top: 8px;
      font-size: 12px;
      color: #ff4444;
    }
    .resource-content {
      margin-top: 12px;
      padding: 14px;
      background: var(--card-bg);
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 13px;
      color: var(--text);
      line-height: 1.8;
      animation: fadeInUp 0.3s ease;
    }
    .resource-content img, .resource-content video {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 10px auto;
      border-radius: 8px;
    }
    .resource-content h4 {
      color: var(--blue1);
      margin-bottom: 8px;
      font-size: 15px;
    }
    .resource-content p {
      margin-bottom: 6px;
    }
    .resource-content a {
      color: var(--blue1);
      text-decoration: underline;
      word-break: break-all;
    }
    .resource-content img, .resource-content video {
      max-width: 100%;
      border-radius: 6px;
      margin: 8px 0;
    }

    /* 底部按钮 */
    .modal-footer {
      display: flex;
      gap: 10px;
      padding: 0 20px 20px;
    }
    .btn-contact {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      flex: 1;
      height: 46px;
      border: none;
      border-radius: 10px;
      background: var(--blue1);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.10s ease;
    }
    .btn-close-modal {
      background-color: var(--red); display: flex; align-items: center; justify-content: center;
      color: #fff;
      border: none;
      padding: 0 28px;
      border-radius: 10px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.10s ease;
    }
    .btn-contact:hover, .btn-close-modal:hover {
      transform: scale(0.97);
      opacity: 0.9;
    }
    .btn-contact:active, .btn-close-modal:active, .modal-close-x:active {
      transform: scale(0.94);
      opacity: 0.8;
      filter: brightness(0.9);
    }

    /* toast 轻提示 */
    .toast {
      position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
      background: rgba(0,0,0,0.82); color: #fff; padding: 10px 24px;
      border-radius: 8px; font-size: 14px; z-index: 9999;
      opacity: 0; transition: opacity 0.25s; pointer-events: none;
      max-width: 90%; text-align: center;
    }
    .toast.show { opacity: 1; }
    .toast.success { background: rgba(40,167,69,0.92); }


    /* 平台公告 */
    .ann-modal .ann-box { position: relative; background: var(--card-bg); border-radius: 14px; width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto; padding: 26px 22px; animation: modalIn 0.25s ease; text-align: left; }
    .ann-modal .ann-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 14px; padding: 0 30px; letter-spacing: 1px; cursor: pointer; border: none; background: transparent; display: block; text-align: center; line-height: 1.5; transition: color 0.15s ease; }
    .ann-modal .ann-title:hover { color: var(--blue1); }
    .ann-modal .ann-title.active { color: var(--blue1); }
    .ann-modal .ann-body { font-size: 14px; color: var(--text); line-height: 1.75; word-break: break-word; overflow-wrap: anywhere; }
    .ann-modal .ann-body img, .ann-modal .ann-body video { max-width: 100%; border-radius: 8px; margin: 6px 0; }
    .ann-modal .ann-body a { color: #1e88e5; }
    .ann-modal .ann-body p { margin: 6px 0; }
    .ann-modal .ann-body img, .ann-modal .ann-body video { max-width: 100%; height: auto; display: block; margin: 10px auto; border-radius: 8px; }
    /* 交互动效复用 ui-common.css 全站统一弹窗按键规则（R17 统一标准：hover 缩小变淡、按压更小更暗） */
    .ann-modal .ann-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; }
    .ann-modal .modal-close-x { top: 12px; right: 12px; width: 32px; height: 32px; }
    /* 分类栏 */
    .category-bar-wrap {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
    }
    /* 二级分类栏 */
    .sub-category-bar-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
      position: relative;
    }
    /* 一级分类展开按钮 - 三角形 */
    .cat-toggle {
      position: absolute;
      right: 26px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      color: var(--blue1);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 95;
      padding: 0;
      transition: color 0.2s ease;
    }
    .cat-toggle:hover { color: var(--blue1); }
    .cat-toggle .toggle-arrow {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      transform: rotate(-90deg); /* 收起状态：箭头向左 */
      filter: drop-shadow(0 1px 2px rgba(30,136,229,0.3));
    }
    .cat-toggle.open .toggle-arrow {
      transform: rotate(0deg); /* 展开状态：箭头向下 */
    }
    .category-bar {
      transition: min-height 0.3s ease, padding-bottom 0.3s ease;
    }
    .category-bar.expanded {
      flex-wrap: wrap;
      overflow: visible;
      white-space: normal;
      padding-bottom: 8px;
      min-height: auto;
    }
    .category-bar.expanded .category-tag {
      margin-bottom: 6px;
    }

    /* 二级分类栏 */
    .sub-category-bar {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 6px 24px 8px;
      gap: 6px;
      transition: min-height 0.3s ease, padding-bottom 0.3s ease;
    }
    .sub-category-bar::-webkit-scrollbar { display: none; }
    /* 二级分类展开按钮 - 更小更浅，体现层次感 */
    .sub-cat-toggle {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border: none;
      background: transparent;
      color: var(--blue1);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 95;
      padding: 0;
      transition: color 0.2s ease;
    }
    .sub-cat-toggle:hover { color: var(--blue1); }
    .sub-cat-toggle .toggle-arrow {
      width: 15px;
      height: 15px;
      transition: transform 0.3s ease;
      transform: rotate(-90deg); /* 收起状态：向左 */
    }
    .sub-cat-toggle.open .toggle-arrow {
      transform: rotate(0deg); /* 展开状态：向下 */
    }
    .sub-category-bar.expanded {
      flex-wrap: wrap;
      overflow: visible;
      padding-bottom: 6px;
    }
    .sub-category-bar.expanded .sub-category-tag {
      margin-bottom: 4px;
    }
    .sub-category-tag {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--bg-light);
      color: var(--text-light);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .sub-category-tag:hover {
      border-color: var(--blue2);
      color: var(--blue1);
      background: var(--hover-bg);
    }
    .sub-category-tag.active {
      background: var(--card-bg);
      color: var(--blue1);
      border-color: var(--blue2);
      font-weight: 600;
    }

    /* 手机端 */
    @media (max-width: 600px) {
      .category-bar-wrap::after { display: block; }
      .topbar-inner {
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
      }
      .shop-logo { width: 30px; height: 30px; }
      .shop-brand { flex: 0 1 auto; min-width: 0; }
      .shop-name { font-size: 16px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .topbar-actions { order: 1; margin-left: 0; gap: 6px; } /* R9：咨询客服/分享紧跟 logo 名称（左侧） */
      /* 手机端 .tab/.view-btn 窄屏适配已并入 ui-common.css 公共样式（两页一致） */
      .view-toggle { order: 1; flex-shrink: 0; margin-left: auto; } /* R9：列表/网格始终靠右 */
      .search-box { order: 2; flex: 1 1 100%; margin-top: 0; }
      .cat-toggle { right: 18px; width: 24px; height: 24px; }
      .modal-wrap { max-width: 100%; }
      .modal-box { max-width: 100%; max-height: 92vh; border-radius: 12px; }
      img.modal-cover { width: auto; max-width: calc(100% - 24px); margin: 12px auto 0; max-height: 220px; }
      .modal-content { padding: 12px 16px 16px; }
      .modal-title { font-size: 18px; }
      .modal-price { font-size: 20px; }
      .modal-desc { font-size: 14px; }
      .modal-detail { font-size: 13px; padding: 10px 12px; }
      .modal-footer { padding: 0 16px 16px; gap: 8px; }
      .btn-contact, .btn-close-modal { height: 42px; font-size: 15px; }
      .btn-close-modal { padding: 0 20px; }
      .modal-close-x { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 19px; }
      .product-grid { padding: 12px; gap: 10px; }
      /* 手机端资源卡片更紧凑：图片改方形、标题单行，避免占屏过大 */
      .card-img { aspect-ratio: 1 / 1; }
      .card-body { padding: 10px 10px 10px; }
      .card-title { font-size: 14px; min-height: 20px; -webkit-line-clamp: 1; margin-bottom: 3px; }
      .card-desc { font-size: 11px; -webkit-line-clamp: 1; }
      .product-grid.list-view .card-img { width: 96px; min-width: 96px; aspect-ratio: 1 / 1; }
      .product-grid.list-view .card-body { padding: 10px; }
      .product-grid.list-view .card-title { -webkit-line-clamp: 2; min-height: 38px; }
      .back-top { right: 16px; bottom: 20px; width: 40px; height: 40px; }
      .variant-tab { padding: 5px 14px; font-size: 12px; }
    }

    /* 平板端 */
    @media (min-width: 601px) and (max-width: 900px) {
      .modal-box { max-width: 90%; }
      /* 平板端文字不隐藏：与管理页 tab 按钮表现一致（.tab 样式统一由 ui-common.css 提供） */
    }
    /* logo 统一为名称大小（覆盖上方定义） */
    .shop-logo { width: 38px !important; height: 38px !important; align-self: center; display: block; }
    .shop-name { line-height: 1; display: flex; align-items: center; }
    /* 弹窗底部按钮宽度统一：2 个等宽 */
    .modal-footer button { flex: 1; min-width: 0; }
    @keyframes cardIn { from { opacity: 0.9; } to { opacity: 1; } }
    .product-card { animation: cardIn 0.15s ease; }
    .ann-modal .ann-body img, .ann-modal .ann-body video { opacity: 1; }
    .modal-mask #modalBox { max-height: 84vh; }
    .modal-mask#annModal > .ann-box { height: min(72vh, 600px) !important; max-height: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; overflow: hidden; overflow-x: hidden; max-width: 520px !important; width: 100% !important; margin: auto !important; box-sizing: border-box; }
    .modal-mask#annModal > .ann-box > * { box-sizing: border-box; max-width: 100%; }
    .modal-mask#annModal .ann-title, .modal-mask#annModal .ann-tabs, .modal-mask#annModal .ann-ok { flex-shrink: 0; }
    .modal-mask#annModal .ann-empty { min-height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 13px; padding: 24px 0; box-sizing: border-box; text-align: center; }
    .ann-modal .ann-body { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; box-sizing: border-box; }
    /* 商品页顶部 logo 栏复用管理页：logo/名字位置、大小、间距完全一致 */
    .shop-brand { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: 1.2px; white-space: nowrap; flex: 0 0 auto !important; gap: 12px !important; }
    /* logo 与一级分类白色栏左边缘对齐：一级分类栏加与二级分类栏一致的左右内边距 */
    .category-bar-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
    @media (max-width: 600px) { .category-bar-wrap, .sub-category-bar-wrap { padding: 0 12px; } }
    /* 三角键随白色栏内缩对齐：一级 22px（16+6）/ 二级 26px（16+10），不超模 */
    .sub-cat-toggle { right: 29px; }
    @media (max-width: 600px) { .cat-toggle { right: 18px; } .sub-cat-toggle { right: 21px; } }
    .topbar-inner { flex-wrap: wrap; }
    /* === 全系统弹窗横向溢出防护：禁止底部滑轮，内容超宽一律裁剪/换行 === */
    .modal-box, .modal-wrap, .ann-box, .modal-detail, .ann-body, .media-list, .variant-detail, .form, .rte-editor, .rte-large, .ann-list, .cat-picker-panel { overflow-x: hidden; }
    .modal-detail, .ann-body, .variant-detail, .rte-editor { word-break: break-word; overflow-wrap: anywhere; }
    .modal-detail video, .ann-body video, .variant-detail video, .rte-editor video, .media-list video { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; border-radius: 8px; }
    .modal-detail img, .modal-detail video, .modal-detail table, .modal-detail iframe, .modal-detail svg, .ann-body img, .ann-body video, .ann-body table, .ann-body iframe, .ann-body svg, .variant-detail img, .variant-detail video, .variant-detail table, .variant-detail iframe, .rte-editor img, .rte-editor video, .rte-editor table, .rte-editor iframe, .media-list img, .media-list video, .media-list table, .media-list iframe { max-width: 100% !important; height: auto; }
    /* === R21：弹窗内视频固定 16:9 占位（object-fit:contain 黑底完整显示）=== 未加载/加载完成/加载失败三种状态尺寸完全一致，弹窗不再先小后大跳动；!important 同时压过 mediaStable 的真实宽高比接管与富文本内联样式 */
    .modal-box video, .ann-body video, .ann-box video, .modal-detail video, .variant-detail video, .media-list video, .rte-editor video, .resource-content video {
      width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important;
      object-fit: contain; background: #000; display: block; border-radius: 8px;
    }
    /* 弹窗关闭按钮 × 复用导航页样式：圆形、淡灰底、hover 变红 */
    .modal-close-x { font-size: 19px; line-height: 1; border-radius: 50%; }
    .modal-close-x:hover { transform: scale(0.97); opacity: 0.9; background: #ff4444; color: #fff; }
    .modal-close-x:active { transform: scale(0.94); opacity: 0.8; filter: brightness(0.9); }
    /* 滚动条已恢复浏览器默认样式（用户要求取消自定义滚动轮） */
      /* 全系统弹窗遮罩层强制统一：填满整个视口+居中显示，覆盖任何异常样式 */
    .modal-mask, .share-mask, .lightbox { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; padding: 16px !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; }
    .modal-mask > *, .share-mask > *, .lightbox > * { margin: auto !important; float: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }