/* PriceSpider — Bootstrap 5 之上的少量补充样式。
   组件与排版一律用 Bootstrap 类，这里只放 Bootstrap 没有的定制部分。 */

:root {
  --ps-chart-h: 320px;
}

body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
}

/* ---------- 明细表 ---------- */
.ps-thumb {
  width: 40px; height: 40px; object-fit: contain;
  border-radius: 6px; background: #fff; border: 1px solid var(--bs-border-color);
  vertical-align: middle;
}
.ps-thumb-empty { display: inline-block; background: var(--bs-tertiary-bg); }
.ps-name {
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-vendor { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 行展开明细 */
tr.ps-detail-row > td {
  background: var(--bs-tertiary-bg);
  white-space: normal;
  padding: 14px 16px;
}
.ps-coupon-table { font-size: 12px; margin-top: 8px; }

/* ---------- 图表 ---------- */
.ps-chart { width: 100%; height: var(--ps-chart-h); }
.ps-chart-lg { height: 420px; }
.ps-chart-sm { height: 250px; }

/* ---------- 首页榜单 ---------- */
.ps-rank { display: flex; flex-direction: column; gap: 2px; }
.ps-rank-row {
  display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto auto auto;
  gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px;
}
.ps-rank-row:hover { background: var(--bs-tertiary-bg); }
.ps-rank-row .ps-idx { color: var(--bs-secondary-color); font-size: 12px; text-align: center; }
.ps-rank-row .ps-idx.top1 { color: #b7791f; font-weight: 700; }
.ps-rank-row .ps-idx.top2 { color: #64748b; font-weight: 700; }
.ps-rank-row .ps-idx.top3 { color: #a16207; font-weight: 700; }
.ps-rank-row .ps-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-rank-row .ps-nm em { font-style: normal; color: var(--bs-secondary-color); font-size: 12px; margin-left: 6px; }
.ps-rank-row .ps-val { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.ps-rank-row .ps-delta { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 92px; text-align: right; }

/* ---------- 覆盖矩阵 ---------- */
.ps-matrix table { width: auto; min-width: 100%; font-size: 12px; }
.ps-matrix th, .ps-matrix td { padding: 6px 10px; text-align: center; white-space: nowrap; }
.ps-matrix td.ps-na { color: #cbd5e1; background: var(--bs-tertiary-bg); }

/* ---------- 设置页选择器 ---------- */
.ps-picker { position: relative; max-width: 760px; }
.ps-picker-panel {
  position: absolute; z-index: 1040; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow: auto;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 9px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14); padding: 6px;
}
.ps-picker-panel .ps-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.ps-picker-panel .ps-opt:hover { background: var(--bs-primary-bg-subtle); }
.ps-picker-panel .ps-opt .ps-brand { color: var(--bs-secondary-color); font-size: 12px; }
.ps-picker-panel .ps-opt .ps-meta { margin-left: auto; color: var(--bs-secondary-color); font-size: 11px; }
.ps-picker-panel .ps-none { padding: 10px; color: var(--bs-secondary-color); font-size: 13px; text-align: center; }
.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- 趋势：按尺寸拆分的小图 ---------- */
.ps-size-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1180px) {
  .ps-size-grid { grid-template-columns: minmax(0, 1fr); }
}
.ps-subcard {
  border: 1px solid var(--bs-border-color);
  border-radius: 9px;
  background: var(--bs-body-bg);
  padding: 8px 10px 4px;
}
.ps-subcard-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--bs-secondary-color); padding-bottom: 4px;
}
.ps-subcard-head .ps-size { font-size: 14px; font-weight: 700; color: var(--bs-body-color); }
.ps-subcard-head .ps-gap { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- 其他 ---------- */
.ps-mono { font-variant-numeric: tabular-nums; font-family: Consolas, "Cascadia Mono", monospace; }
.ps-empty { padding: 46px 20px; text-align: center; color: var(--bs-secondary-color); }
.stat-card .stat-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-card .stat-value.sm { font-size: 17px; }