html,body{margin:0;padding:0;background:#f5f7fa;color:#303133;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;height:100vh;overflow:hidden;}
*{box-sizing:border-box;}
#app{display:flex;flex-direction:column;height:100vh;padding:8px 12px 6px;max-width:100%;}

/* 初始加载遮罩 */
.init-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.init-loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e0e0e0;
  border-top-color: #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.init-loading-text {
  margin-top: 20px;
  font-size: 16px;
  color: #666;
}

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

/* 顶部标题栏 */
.page-header{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;}
.page-title{font-size:16px;font-weight:600;margin:0;}
.page-sub{color:#909399;font-size:11px;}

/* 主区域：左筛选 + 右列表 */
.main-layout{flex:1;display:grid;grid-template-columns:260px 1fr;gap:8px;min-height:0;}

/* ============== 左侧：筛选栏 ============== */
.side-panel{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:auto;padding-right:2px;}
.side-card{background:#fff;border-radius:6px;padding:8px 10px;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.side-title{font-size:11px;color:#909399;margin:0 0 5px;font-weight:600;letter-spacing:.5px;border-left:3px solid #409eff;padding-left:6px;}

/* 桌面端：筛选条件标题行（标题 + 查码按钮同行） */
.filter-header{display:flex;align-items:center;gap:8px;margin:0 0 5px;}
.filter-header .side-title{margin-bottom:0;}
.filter-header-btns{display:flex;align-items:center;gap:6px;}
.btn-lookup{
  height:24px;padding:0 10px;font-size:11px;border-radius:4px;
  background:#67c23a;color:#fff;border:1px solid #67c23a;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;
}
.btn-lookup:hover{background:#85ce61;border-color:#85ce61;}
.btn-scan{
  height:24px;padding:0 10px;font-size:11px;border-radius:4px;
  background:#409eff;color:#fff;border:1px solid #409eff;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;
}
.btn-scan:hover{background:#66b1ff;border-color:#66b1ff;}

/* 统计：紧凑一行一个 */
.stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0;font-size:12px;}
.stat-row .label{color:#909399;font-size:11px;}
.stat-row .value{font-weight:600;font-size:14px;}
.stat-row .value.blue{color:#409eff;}
.stat-row .value.green{color:#67c23a;}
.stat-row .value.orange{color:#e6a23c;}
.stat-row .value.red{color:#f56c6c;}
.stat-divider{border:none;border-top:1px dashed #ebeef5;margin:4px 0;}

/* 筛选：每个字段 label+input 横向一行，小尺寸 */
.field{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.field label{flex:0 0 46px;color:#606266;font-size:11px;font-weight:500;}
.field input,.field select{flex:1;height:26px;padding:0 8px;border:1px solid #dcdfe6;border-radius:3px;font-size:12px;background:#fff;color:#303133;outline:none;transition:border-color .2s;}
.field input:focus,.field select:focus{border-color:#409eff;}
.side-panel .search-row{margin-bottom:8px;}
.side-panel .search-row label{flex:0 0 42px;}
.search-row input{height:28px;font-size:13px;}
.filter-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:6px;}

/* 按钮：缩小 */
.btn{height:26px;padding:0 12px;border:1px solid #dcdfe6;background:#fff;color:#606266;border-radius:3px;cursor:pointer;font-size:12px;transition:all .2s;display:inline-flex;align-items:center;}
.btn:hover{color:#409eff;border-color:#c6e2ff;background:#ecf5ff;}
.btn:disabled{cursor:not-allowed;opacity:.6;}
.btn-primary{background:#409eff;color:#fff;border-color:#409eff;}
.btn-primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff;}
.btn-success{background:#67c23a;color:#fff;border-color:#67c23a;}
.btn-success:hover{background:#85ce61;border-color:#85ce61;color:#fff;}
.btn-warning{background:#e6a23c;color:#fff;border-color:#e6a23c;}
.btn-warning:hover{background:#ebb563;border-color:#ebb563;color:#fff;}
.btn-sm{height:22px;padding:0 8px;border:1px solid #dcdfe6;background:#fff;color:#606266;border-radius:3px;cursor:pointer;font-size:11px;}
.btn-sm:hover:not(:disabled){color:#409eff;border-color:#c6e2ff;background:#ecf5ff;}
.btn-sm:disabled{cursor:not-allowed;opacity:.5;}

/* ============== 右侧：列表区域 ============== */
.table-panel{background:#fff;border-radius:6px;padding:8px 10px 6px;box-shadow:0 1px 2px rgba(0,0,0,.05);display:flex;flex-direction:column;min-height:0;gap:6px;}
.table-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.table-top .left{color:#909399;font-size:12px;}
.table-top .right{display:flex;gap:6px;flex-wrap:wrap;}
.export-count{color:#67c23a;font-weight:600;}

.table-wrap{flex:1;min-height:0;overflow:auto;position:relative;border:1px solid #ebeef5;border-radius:3px;}
.table-wrap.loading::after{content:"加载中...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.9);padding:8px 16px;border-radius:3px;color:#409eff;font-size:12px;box-shadow:0 2px 6px rgba(0,0,0,.1);}

/* 表格：压缩高度 */
.data-table{width:100%;border-collapse:collapse;font-size:12px;background:#fff;}
.data-table thead{position:sticky;top:0;z-index:10;}
.data-table th{background:#f5f7fa;color:#606266;font-weight:600;padding:6px 5px;text-align:center;vertical-align:middle;border-bottom:1px solid #ebeef5;white-space:nowrap;user-select:none;font-size:12px;}
.data-table th:not(.col-check):not(.col-idx):not(.col-img){cursor:pointer;}
.data-table th:not(.col-check):not(.col-idx):not(.col-img):hover{background:#ecf5ff;color:#409eff;}
.data-table th.sorted{background:#ecf5ff;color:#409eff;}
.sort-arrow{font-size:9px;color:#c0c4cc;margin-left:1px;}
th.sorted .sort-arrow{color:#409eff;}
.data-table td{padding:4px 5px;border-bottom:1px solid #f0f2f5;text-align:center;vertical-align:middle;}
.data-table td.num{text-align:center;font-variant-numeric:tabular-nums;}
.data-table tbody tr:hover{background:#f5f7fa;}
.data-table tbody tr.selected{background:#ecf5ff;}
.data-table .col-check{width:32px;text-align:center;}
.data-table .col-idx{width:40px;text-align:center;color:#909399;font-size:11px;}
.data-table .col-img{width:72px;text-align:center;}

/* 缩略图缩小 */
.thumb{width:60px;height:60px;border-radius:4px;background:#f5f7fa;object-fit:cover;border:1px solid #ebeef5;}
.thumb-placeholder{width:60px;height:60px;border-radius:4px;background:#f5f7fa;display:flex;align-items:center;justify-content:center;color:#c0c4cc;font-size:22px;border:1px solid #ebeef5;margin:0 auto;}

.price{color:#f56c6c;font-weight:600;}
.price-total{color:#606266;font-weight:500;}
.mono{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;}
.tag{display:inline-block;padding:1px 6px;border-radius:3px;background:#ecf5ff;color:#409eff;font-size:11px;margin-right:2px;line-height:1.4;}
.tag.warn{background:#fdf6ec;color:#e6a23c;}
.tag.success{background:#f0f9eb;color:#67c23a;}
.tag.danger{background:#fef0f0;color:#f56c6c;}

/* name-cell 压缩行间距 */
.name-cell{line-height:1.35;text-align:left;}
.name-line{margin-bottom:1px;}
.name-line:last-child{margin-bottom:0;}
.name-text{font-size:12.5px;font-weight:500;color:#303133;}
.meta-label{color:#909399;font-size:11px;}
.sub-meta{color:#909399;font-size:11px;margin-top:2px;}
.empty{text-align:center;padding:30px;color:#909399;}

/* 分页：压缩 */
.pagination{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
.page-info{color:#606266;font-size:12px;}
.page-info select{height:22px;padding:0 5px;border:1px solid #dcdfe6;border-radius:3px;font-size:11px;background:#fff;}
.page-buttons{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.page-current{padding:0 8px;font-size:12px;color:#409eff;font-weight:600;}
.page-jumper{font-size:12px;color:#606266;}
.page-jumper input{height:22px;padding:0 5px;border:1px solid #dcdfe6;border-radius:3px;font-size:11px;}

/* Toast 提示 */
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:4px;color:#fff;font-size:13px;box-shadow:0 3px 8px rgba(0,0,0,.12);z-index:9999;animation:toastIn .25s ease;}
.toast.success{background:#67c23a;}
.toast.error{background:#f56c6c;}
.toast.warning{background:#e6a23c;}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-12px);}to{opacity:1;transform:translate(-50%,0);}}

/* 复选框样式 */
input[type="checkbox"]{cursor:pointer;width:14px;height:14px;accent-color:#409eff;}
input[type="number"],input[type="text"],select{font-family:inherit;}

/* 悬浮大图（鼠标悬停） */
.img-popup{
  position:fixed;z-index:9998;padding:6px;background:#fff;border-radius:6px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);border:1px solid #ebeef5;
  pointer-events:auto;max-width:420px;max-height:420px;
  animation:popFade .12s ease;
}
@keyframes popFade{from{opacity:0;transform:translateY(4px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.img-popup-img{display:block;max-width:408px;max-height:360px;border-radius:4px;object-fit:contain;}
.img-popup-title{margin-top:4px;font-size:11px;color:#606266;line-height:1.4;word-break:break-all;max-width:408px;}
.img-popup-close{
  position:absolute;top:4px;right:4px;width:20px;height:20px;line-height:18px;text-align:center;
  background:rgba(0,0,0,.5);color:#fff;border-radius:50%;cursor:pointer;font-size:11px;
}
.img-popup-close:hover{background:#f56c6c;}
.thumb{cursor:zoom-in;transition:transform .15s;}
.thumb:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(64,158,255,.25);}

/* 点击后全屏遮罩大图 */
.img-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:99999;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  cursor:zoom-out;
}
.img-modal-img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.5);}
.img-modal-close{
  position:absolute;top:20px;right:26px;color:#fff;font-size:14px;cursor:pointer;
  padding:8px 14px;background:rgba(255,255,255,.12);border-radius:4px;letter-spacing:1px;
}
.img-modal-close:hover{background:rgba(255,255,255,.25);}
.img-modal-title{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px;background:rgba(0,0,0,.5);padding:8px 18px;border-radius:4px;
  max-width:80vw;word-break:break-all;text-align:center;
}

/* ============================================ */
/* 移动端：960px 以下改为单栏，搜索条件在上     */
/*   关键：布局从「固定视口高度 + 左右/上下两个内层滚动区」切换为「内容高度 + 整页滚动」 */
/*   所以要清掉 .main-layout 的 flex:1/min-height:0，清掉子容器的 overflow:auto，让内容自然撑开 */
/* ============================================ */
@media (max-width:960px){
  html,body{height:auto;overflow:auto;-webkit-text-size-adjust:100%;}
  #app{display:block;height:auto;min-height:100vh;padding:6px 8px 14px;max-width:100%;}
  /* 移动端：单栏 + 自然内容高度，不要 flex:1 和 min-height:0，否则会把顶部卡片挤压缩放 */
  .main-layout{display:block;height:auto;min-height:0;flex:none;gap:10px;}
  .main-layout > * + *{margin-top:10px;}
  .page-header{margin-bottom:6px;flex-wrap:wrap;gap:6px;}
  .page-title{font-size:15px;}
  .page-sub{font-size:11px;}

  /* 左侧筛选栏改为顶部区域：取消内层滚动，内容完全展开 */
  .side-panel{display:block;height:auto;min-height:0;max-height:none;overflow:visible;padding-right:0;}
  .side-panel > * + *{margin-top:8px;}
  .side-card{padding:12px 14px;border-radius:10px;}
  .side-title{font-size:12px;margin-bottom:8px;}

  /* ============ 移动端：把「数据概览」隐藏（用户要求不展示） ============== */
  .side-panel > .side-card:first-child,
  .side-panel > .side-card:nth-child(1){
    /* 第一块 side-card 是「数据概览」，直接隐藏 */
    display:none !important;
  }

  /* 统计卡片（兜底：即使被错误显示也看不到里面的行）*/
  .stat-row{display:none;}
  .stat-divider{display:none;}

  /* ============ 移动端：筛选条件改为 2 列 Grid ================ */
  .side-card:nth-child(2) { /* 第二个 side-card = 筛选条件块 */
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
    row-gap: 8px;
    column-gap: 8px;
  }
  .side-card:nth-child(2) > .side-title,
  .side-card:nth-child(2) > .filter-header{
    /* 标题/标题行单独一行两列通栏 */
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  /* 🔍 搜索单独一行两列通栏 */
  .side-card:nth-child(2) > .field.search-row{
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  /* 其他筛选字段（分类/供应商/单位/单价/库存…）每个占一列 */
  .side-card:nth-child(2) > .field{
    margin-bottom: 0;
    /* label + input/select 垂直堆叠更省高（原横向 1 列 2 行），
       并保证 input/select 宽度能完整放下（不要被 label 挤窄）*/
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap: 3px;
  }
  .side-card:nth-child(2) > .field label{
    flex:0 0 auto;
    font-size:11px;
    color:#909399;
    width:auto;
  }
  /* =========================================================
     移动端筛选条件：所有可交互控件（搜索框 / input / select / 重置 / 查询）
     统一高度为 38px，保证视觉和触摸手感一致，解决「搜索框和输入框都有点低」。
     关键：-webkit-appearance:none + 显式 border 保证 macOS/iOS <select>
           能正确服从 height:38px（否则原生下拉样式会强制变矮到 21px 左右）。
     ========================================================= */
  .side-card:nth-child(2) .field input,
  .side-card:nth-child(2) .field select{
    width:100% !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    border: 1px solid #dcdfe6 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
    background:#fff;
    color:#303133;
  }
  .side-card:nth-child(2) .field select{
    /* select 去原生样式后补一个自定义下拉小箭头图标（inline SVG，不依赖外部文件）*/
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'><path fill='%23909399' d='M2 4l4 4 4-4z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px !important; /* 给下拉箭头留空间，不遮挡文字 */
  }
  /* 🔍 搜索框：同样统一 38px（更宽一点的 padding，视觉更舒适） */
  .side-card:nth-child(2) .field.search-row input{
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  /* 重置 + 查询两个按钮作为整体占一整列（2列中的第2列），左列空着对齐；
     两个按钮的高度 / 字号 / 圆角 / padding 与上面 input/select/search 完全一致 */
  .side-card:nth-child(2) > .filter-actions{
    grid-column: 2 / 3;
    display:flex;
    margin-top: 0;
    gap: 6px;
    align-items: flex-end;  /* 左列字段（label+input）比按钮高，按钮底部对齐 */
  }
  .side-card:nth-child(2) > .filter-actions .btn{
    flex: 1 1 0;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    justify-content:center;
    box-sizing: border-box !important;
  }

  /* 表格区域：移动端改为普通 block（不要 flex 布局+min-height:0，避免被挤压），整页滚动 */
  .table-panel{display:block;height:auto;min-height:0;max-height:none;padding:8px 8px 12px;border-radius:10px;gap:10px;overflow:visible;}
  .table-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;}
  .table-top .left{font-size:12px;}
  .table-top .right{gap:5px;}

  /* ============================================ */
  /* 列表响应式：宽度 ≤ 760px 时，从「表格」改为   */
  /* 「每一行一张卡片」，采用 6 列 CSS Grid：      */
  /*  Row1: [勾选 2格] [单价 2格] [序号 2格]       */
  /*  Row2: [图片 3格] [名称 3格]                  */
  /*  Row3: [参考价 3格] [总价 3格]                */
  /*  Row4: [规格 3格] [库存 3格]                  */
  /* ============================================ */
  .table-wrap{border-radius:6px;overflow:visible;background:transparent;border:none;}
  .table-wrap.loading::after{content:"加载中...";position:fixed;top:50%;left:50%;}
  .data-table{background:transparent;}

  /* 隐藏表头（卡片布局不需要列名表头）*/
  .data-table thead{display:none;position:static;}

  /* tbody 块级，卡片之间间距缩小 */
  .data-table tbody{display:block;}
  .data-table tbody tr{
    /* 一张卡片 = 6 列 Grid 容器 */
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: auto;
    row-gap: 4px;
    column-gap: 4px;
    width:100%;
    margin:0 0 8px 0;
    padding:8px 8px 7px;
    border:1px solid #ebeef5;
    border-radius:9px;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    position:relative;
  }
  .data-table tbody tr:last-child{margin-bottom:0;}
  .data-table tbody tr.selected{
    border-color:#b3d8ff;
    background:#f5faff;
    box-shadow:0 2px 4px rgba(64,158,255,.10);
  }
  .data-table tbody tr:hover{background:#fff;}
  .data-table tbody tr.selected:hover{background:#f5faff;}
  .data-table tbody tr.empty{
    display:table-row;
    margin:0;padding:0;border:none;box-shadow:none;background:transparent;
  }

  /* 所有 td 默认：列名前缀（小）+ 内容，横向一行 */
  .data-table td{
    display:flex;
    flex-direction:row;
    align-items:center;
    width:auto;
    padding:2px 0!important;
    border:none!important;
    text-align:left!important;
    font-size:12px;
    line-height:1.38;
    background:transparent;
    vertical-align:middle;
  }
  .data-table td::before{
    content:attr(data-label) ":";
    flex:0 0 auto;
    color:#909399;
    font-size:11px;
    font-weight:500;
    margin-right:4px;
    white-space:nowrap;
  }
  .data-table td > *:not(:empty){max-width:100%;}
  .data-table td.num{text-align:left!important;font-variant-numeric:tabular-nums;}
  .data-table td.num::before{font-variant-numeric:normal;}
  .data-table td.num > span{margin-left:auto;}

  /* ========== 6 列 Grid 按列分配 ========== */

  /* Row1：勾选(2格) + 单价(2格) + 序号(2格) */
  .data-table td.col-check{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    padding:0!important;
    position:static;
    width:auto;
  }
  .data-table td.col-check::before{display:none!important;content:none;}

  .data-table td[data-label="单价"]{
    grid-column: 3 / 5;
    grid-row: 1 / 2;
    justify-content:center;
    align-items:center;
    padding:0!important;
    flex-direction:column;
  }
  .data-table td[data-label="单价"]::before{
    font-size:10px;
    margin-right:0;
    margin-bottom:1px;
    color:#c0c4cc;
  }
  .data-table td[data-label="单价"] > span{margin:0;}
  .data-table td[data-label="单价"] .price{font-size:14px;line-height:1.15;}

  .data-table td.col-idx{
    grid-column: 5 / 7;
    grid-row: 1 / 2;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    padding:0!important;
    color:#c0c4cc;
    font-size:11px;
    font-weight:600;
    position:static;
    width:auto;
  }
  .data-table td.col-idx::before{display:none!important;content:none;}

  /* Row2：图片(3格) + 名称(3格) */
  .data-table td.col-img{
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    padding:1px 0 2px 0!important;
    position:static;
  }
  .data-table td.col-img::before{display:none!important;content:none;}
  .data-table td.col-img .thumb,
  .data-table td.col-img .thumb-placeholder{
    width:64px!important;height:64px!important;
    flex:0 0 64px;
    margin:0;
    border-radius:7px;
  }

  .data-table td[data-label="商品名称"]{
    grid-column: 4 / 7;
    grid-row: 2 / 3;
    display:block;
    width:auto;
    padding:0 0 0 6px!important;
    line-height:1.35;
  }
  .data-table td[data-label="商品名称"]::before{display:none!important;content:none;}
  .name-cell{width:100%;}
  .name-line{margin-bottom:1px;}
  .name-text{font-size:13.5px;font-weight:600;color:#303133;line-height:1.33;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
  .name-cell .tag{font-size:10px;padding:0 5px;line-height:1.45;margin-bottom:2px;display:inline-block;}
  .meta-label{color:#909399;font-size:10.5px;}
  .mono{font-size:10.5px;}

  /* Row3：参考价(3格) + 总价(3格) */
  .data-table td[data-label="参考价(¥)"]{
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    justify-content:space-between;
    padding:2px 0 0!important;
  }
  .data-table td[data-label="总价"]{
    grid-column: 4 / 7;
    grid-row: 3 / 4;
    justify-content:space-between;
    padding:2px 0 0!important;
    border-left:1px dashed #f0f2f5!important;
    padding-left:6px!important;
  }

  /* Row4：规格(3格) + 库存(3格) */
  .data-table td[data-label="规格"]{
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    justify-content:space-between;
    padding:1px 0 2px!important;
  }
  .data-table td[data-label="规格"] > div{display:inline;}
  .data-table td[data-label="规格"] .sub-meta{display:inline-block;margin-top:0;margin-left:5px;color:#909399;}
  .data-table td[data-label="规格"] .sub-meta + .sub-meta{margin-left:8px;}
  .data-table td[data-label="库存"]{
    grid-column: 4 / 7;
    grid-row: 4 / 5;
    justify-content:space-between;
    padding:1px 0 2px!important;
    border-left:1px dashed #f0f2f5!important;
    padding-left:6px!important;
  }
  .price{color:#f56c6c;font-weight:700;font-size:13px;}
  .price-total{color:#606266;font-weight:600;font-size:12px;}
  .tag{display:inline-block;padding:0 6px;border-radius:3px;background:#ecf5ff;color:#409eff;font-size:11px;line-height:1.55;margin-left:auto!important;}
  .tag.success{background:#f0f9eb;color:#67c23a;}
  .tag.danger{background:#fef0f0;color:#f56c6c;}

  /* 6. 次要列：ID / 更新时间 —— 移动端统一隐藏（PC 端 table 仍显示） */
  .data-table td[data-label="ID"],
  .data-table td[data-label="更新时间"]{
    display:none!important;
  }

  /* 7. name-cell 下面的助记码 / 供应商 / 条码已经用 name-line / sub-meta 展示完了，不再需要额外列（已在 name 单元格内） */
  /* 表格整体：移动端不再需要 sticky header 了 */
  .data-table th{position:static;}
  .data-table{font-size:13px;}
  .thumb{cursor:zoom-in;}
  .thumb:hover{transform:none;box-shadow:none;}

  /* 额外的信息行：如果 name-cell 里 sub-meta 两行（helpcode + vendorname）需要紧凑一下 */
  .sub-meta{color:#909399;font-size:10.5px;margin-top:1px;line-height:1.3;}
  .sub-meta + .sub-meta{margin-top:1px;}

  /* 分页：移动端按钮高度加大 */
  .pagination{gap:8px;margin-top:8px;}
  .page-info{font-size:12px;}
  .page-info select{height:30px;padding:0 8px;font-size:13px;border-radius:5px;}
  .page-jumper{font-size:13px;}
  .page-jumper input{height:30px;padding:0 8px;font-size:13px;border-radius:5px;}
  .page-current{font-size:13px;padding:0 10px;}

  /* 悬浮大图在移动端禁用（改为直接点击全屏） */
  .img-popup{display:none !important;}

  /* 移动端禁用 hover 缩放，减少误触 */
  .thumb:hover{transform:none;box-shadow:none;}

  /* 移动端全屏大图关闭按钮更明显 */
  .img-modal-close{top:12px;right:12px;font-size:15px;padding:10px 16px;border-radius:6px;}
  .img-modal-title{bottom:20px;font-size:14px;padding:10px 16px;}

  /* 移动端复选框加大 */
  input[type="checkbox"]{width:18px;height:18px;}

  /* 移动端隐藏顶部三个导出按钮：全部 / 筛选 / 勾选（节省空间） */
  .table-top .right{
    display:none !important;
  }
  .table-top .left{width:100%;}

  /* 筛选条件标题行：标题 + 扫码按钮左右分布 */
  .filter-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    grid-column: 1 / -1;
    margin-bottom:0;
  }
  .filter-header .side-title{margin-bottom:0;}
  .filter-header-btns{display:flex;align-items:center;gap:6px;}
  .btn-scan{
    height:32px;
    padding:0 12px;
    font-size:13px;
    border-radius:6px;
    background:#409eff;
    color:#fff;
    border:1px solid #409eff;
    cursor:pointer;
    white-space:nowrap;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
  }
  .btn-scan:hover{background:#66b1ff;border-color:#66b1ff;}
  .btn-lookup{
    height:32px;
    padding:0 12px;
    font-size:13px;
    border-radius:6px;
    background:#67c23a;
    color:#fff;
    border:1px solid #67c23a;
    cursor:pointer;
    white-space:nowrap;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
  }
  .btn-lookup:hover{background:#85ce61;border-color:#85ce61;}
}

/* ====== 扫码弹窗样式（全局，不限移动端） ====== */
.scan-modal{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.8);
  z-index:10000;
  display:flex;align-items:center;justify-content:center;
}
.scan-container{
  background:#fff;
  border-radius:12px;
  width:90%;max-width:400px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.scan-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:#409eff;color:#fff;
}
.scan-title{font-size:15px;font-weight:600;}
.scan-close{
  background:none;border:none;color:#fff;font-size:18px;
  cursor:pointer;padding:0 4px;line-height:1;
}
.scan-reader{
  width:100%;
  min-height:260px;
  background:#000;
}
.scan-reader video{width:100%!important;border-radius:0;}
.scan-reader img{border-radius:0;}
.scan-hint{
  padding:10px 16px;
  font-size:13px;color:#909399;text-align:center;
  background:#f5f7fa;
}

/* 微信环境提示区域 */
.scan-wechat-tip{
  padding:30px 20px;
  text-align:center;
  background:#f5f7fa;
}
.scan-wechat-tip .wechat-icon{
  font-size:40px;
  margin-bottom:12px;
}
.scan-wechat-tip .wechat-text{
  font-size:14px;
  color:#606266;
  line-height:1.6;
  white-space:pre-line;
}