body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; padding: 20px;}
.header{display:flex;gap:12px;align-items:center;}
.table{width:100%;border-collapse: collapse;margin-top:10px}
.table th,.table td{border:1px solid #ddd;padding:8px;font-size:14px}
.table th{background:#f7f7f7}
.filters{display:grid;grid-template-columns: repeat(6, minmax(0,1fr));gap:8px;margin:10px 0}
.btn{padding:8px 14px;border:1px solid #333;background:#fff;cursor:pointer;border-radius:6px}
.btn-primary{background:#222;color:#fff}
.badge{display:inline-block;padding:2px 6px;border-radius:4px;background:#eee;margin-right:4px}
img.thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid #eee}
footer{margin-top:24px;color:#666;font-size:12px}
.card{background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.05);padding:12px}


/* --- Card Grid View (Responsive) --- */
.grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.card{background:#fff;border:1px solid #eaeaea;border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.06);display:flex;flex-direction:column}
.card .cover{position:relative;background:#f3f4f6;height:200px;display:flex;align-items:center;justify-content:center}
.card .cover img{width:100%;height:100%;object-fit:cover}
.card .body{padding:14px}
.card .title{font-size:18px;font-weight:700}
.card .subtitle{color:#6b7280;margin-top:2px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:#eef2ff;border:1px solid #e5e7eb;font-size:12px;color:#374151}
.meta{color:#6b7280;font-size:13px;margin-top:6px}
.notes{color:#6b7280;font-size:12px;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.price .main{font-size:20px;font-weight:800}
.price .ref{color:#9ca3af;font-size:12px}
.actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 14px;border-top:1px solid #f0f0f0}
.iconbtn{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px 10px;font-size:12px;cursor:pointer}
.iconbtn:hover{background:#111;color:#fff;border-color:#111}
.selectbox{position:absolute;right:10px;top:10px;background:#fff;border-radius:10px;padding:6px;border:1px solid #e5e7eb}
.fbar{position:sticky;bottom:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-top:1px solid #eee;padding:10px;display:flex;gap:8px;align-items:center}
.fbar input[type='text']{flex:1;padding:8px 10px;border:1px solid #ddd;border-radius:10px}
.countbadge{background:#111;color:#fff;border-radius:999px;padding:4px 8px;font-size:12px}

/* ===== Mobile 优化：搜索区改为单列，控件更易点 ===== */
@media (max-width: 640px){
  .filters{ grid-template-columns: 1fr !important; }
  .filters input, .filters select, .filters button{
    height: 44px;
    font-size: 16px;
  }
}

/* ===== 卡片封面：固定比例 & 不拉伸 ===== */
.card .cover{
  position: relative;
  background:#f3f4f6;
  /* 用现代浏览器支持的固定比例，防止图片把卡片撑坏 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.card .cover img{
  width:100%;
  height:100%;
  object-fit: cover;  /* 关键：裁切以保证不变形 */
  display:block;
}

/* ===== 大号复选框，触控更友好 ===== */
.selectbox input[type="checkbox"],
input[type="checkbox"]{
  inline-size: 22px;  /* 宽 */
  block-size: 22px;   /* 高 */
  accent-color: #111; /* 选中颜色（支持的浏览器） */
}
/* 让点选区域更大一些 */
.selectbox label{
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

/* ===== 置顶操作条（sticky top bar） ===== */
.tbar{
  position: sticky;
  top: 0;                     /* 关键：置顶吸附 */
  z-index: 60;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #eee;
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.tbar input[type="text"]{
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.tbar .countbadge{
  background:#111;color:#fff;border-radius:999px;padding:4px 8px;font-size:12px
}

/* （可选）底部浮动条如果保留，给点底部间距避免遮挡 */
@media (max-width: 640px){
  body{ padding-bottom: 80px; }
}