/* Minimal clean style */
:root {
 --bg:#0b0c10; 
 --card:#14161c; 
 --muted:#9aa4b2; 
 --text:#e6e8ee; 
 --line:#242837; 
 --chip:#1c2130; 
 }
*{ box-sizing:border-box; }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--text); }

.header{ position:sticky; top:0; z-index:10; background:rgba(11,12,16,.92); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line); padding:16px 18px; }
.title{ display:flex; flex-direction:column; gap:6px; }
h1{ margin:0; font-size:20px; }
.meta{ margin:0; color:var(--muted); font-size:12px; }

.controls{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.input, .select{ background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; outline:none; }
.input{ min-width:260px; flex:1; }
.select{ min-width:160px; }
.btn{ background:var(--text); color:#0b0c10; border:none; border-radius:10px; padding:10px 12px; cursor:pointer; }
.btn:hover{ opacity:.92; }

.main{ padding:18px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
/* 图片容器：固定高度，保证卡片一致 */
.thumb{
  width:100%;
  height:180px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(0,0,0,0) 55%),
            linear-gradient(135deg,#1a1f2e,#11131a);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 15px;               /* 给 contain 留点边距，观感更好 */
  overflow: hidden; /* 图片放大也不溢出 thumb */
}
/* 图片：完整显示，不裁剪 */
.thumb img{
  width:auto;
  height:auto;
  max-width: 100%; 
  max-height: 100%; 
  object-fit: contain;          /* 从 cover 改为 contain：不裁剪，完整显示 */
  object-position: center bottom;  /* “站在地面”的感觉，就用 bottom */
  display:block;
  transform: scale(1);                         /* 默认不放大，适当缩小 */
  transform-origin: bottom center;             /* 以底部为基准缩放，更像“站在地面” */
  transition: transform .45s ease;             /* 放大过渡 */
  will-change: transform;                      /* 更丝滑 */
}

.thumb .ph{ color:var(--muted); font-size:12px; padding:10px; text-align:center; }

.body{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.row1{ display:flex; justify-content:space-between; gap:10px; }
.model{ font-weight:700; font-size:14px; line-height:1.2; }
.brand{ color:var(--muted); font-size:12px; white-space:nowrap; }
.colorway{ color:var(--muted); font-size:12px; }

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ background:var(--chip); border:1px solid var(--line); color:var(--text); border-radius:999px; padding:4px 8px; font-size:12px; }
.chip.muted{ color:var(--muted); }

.kv{ display:grid; grid-template-columns: 1fr 1fr; gap:6px; }
.kv div{ color:var(--muted); font-size:12px; border-top:1px dashed rgba(255,255,255,.08); padding-top:8px; }
.kv b{ color:var(--text); font-weight:600; }

.tableWrap{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:auto; }
.table{ width:100%; border-collapse:collapse; min-width:980px; }
.table th, .table td{ border-bottom:1px solid var(--line); padding:10px 10px; font-size:12px; text-align:left; vertical-align:middle; }
.table th{ color:var(--muted); font-weight:600; position:sticky; top:0; background:rgba(20,22,28,.95); }
/* 表格视图小图：透明化 */
.timg{
  width:60px;
  height:40px;
  object-fit: contain;
  display: block;
  background: transparent;   /* 关键：去掉黑底 */
  border: none;               /* 去掉边框 */
  border-radius: 0;           /* 不要圆角（更像电商后台） */
  margin: 6px 0;
}
.hidden{ display:none; }
/* Image 列：加大左右边距（第 2 列） */
.table td:nth-child(2){
  padding-left: 16px;
  padding-right: 16px;
}
/* 图片浮动感（可选但强烈推荐） */
.table td:nth-child(2) img{
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.footer{ padding:14px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
code{ background:rgba(255,255,255,.06); padding:2px 6px; border-radius:8px; border:1px solid rgba(255,255,255,.08); }

/* =========================
   Tier Badge (with emoji)
   ========================= */

/* 基础：徽章和普通 chip 的区别 */
.chip.tier {
  font-weight: 800;
  letter-spacing: .2px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transform: translateY(-.5px);
}

/* 每个等级：更明显的“徽章底色” */
.tier-luxury {
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.35);
}

.tier-supreme {
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.26);
}

.tier-premium {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

.tier-classic {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  opacity: .92;
}

.tier-empty {
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.10);
  opacity: .65;
}

/* =========================
   Card Hover Feedback
   仅提供“被选中”的触感
   ========================= */

.card{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.card:hover{
  transform: translateY(-3px);                 /* 轻微上浮 */
  box-shadow: 0 16px 48px rgba(0,0,0,.55);     /* 阴影增强 */
  border-color: rgba(255,255,255,.14);         /* 边框更清晰 */
}

.card:hover .thumb img{
  transform: scale(1.05); /* 1.03~1.05 可调 */
}

/* =========================
   Card Hover Focus Light
   极细“聚焦光”效果（奢感）
   ========================= */

.card{
  position: relative;  /* 让伪元素定位在卡片内部 */
  overflow: hidden;    /* 裁掉光晕超出圆角的部分 */
}

/* 细描边光环（hover 时出现） */
.card::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;

  /* 这层是“极细光边”，默认透明 */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0),
    0 0 0 1px rgba(255,255,255,0);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, box-shadow .18s ease;
}

/* 顶光/聚焦光（hover 时出现） */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;               /* 略微放大，避免边缘断裂 */
  border-radius: inherit;

  /* 左上角一束很淡的聚焦光 + 右下角一丝反光 */
  background:
    radial-gradient(520px 260px at 18% 8%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(420px 220px at 88% 92%, rgba(120,150,255,.06), transparent 60%);
  
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.card:hover::after{
  opacity: 1;

  /* 关键：极细的光边，不要太亮 */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 0 0 1px rgba(255,255,255,.06);
}

.card:hover::before{
  opacity: 1;
}

/* 清除按钮：搜索框右侧 × */
.searchWrap{
  position: relative;
  flex: 1;                 /* 让搜索框在顶栏占满可用空间 */
  min-width: 320px;
}

.searchInput{
  width: 100%;
  padding-right: 40px;     /* 给右侧 × 留出空间 */
}

.clearBtn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 28px;
  height: 28px;
  border-radius: 999px;

  display: none;           /* 默认隐藏：只有有内容才显示 */
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);

  cursor: pointer;
  user-select: none;
  line-height: 1;
  font-size: 18px;
}

.clearBtn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}

.clearBtn:active{
  transform: translateY(-50%) scale(0.96);
}