:root {
  --bg: #fbf7f1;
  --card: #ffffff;
  --ink: #2b2622;
  --muted: #7a6f66;
  --line: #ece4d9;
  --accent: #e8743b;
  --accent-soft: #fdeee4;
  --amazon: #232f3e;
  --walmart: #0071dc;
  --t-le50: #b91c1c;
  --t-50-60: #ea580c;
  --t-60-70: #d97706;
  --t-70-80: #65a30d;
  --t-80-90: #0d9488;
  --t-90: #64748b;
  --radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* header */
.top { background: var(--ink); color: #fff; }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 34px; }
.brand h1 { margin: 0; font-size: 24px; letter-spacing: .5px; }
.tagline { margin: 0; color: #d8cfc5; font-size: 13px; }
.meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; color: #d8cfc5; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.1); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.dot.partial { background: #facc15; }
.dot.failed { background: #f87171; }

/* banner */
.banner { margin-top: 16px; padding: 12px 16px; border-radius: 10px; background: #fff7d6; border: 1px solid #f3df8a; font-size: 14px; }

/* tabs */
.tabs { display: flex; gap: 8px; margin: 20px 0 12px; overflow-x: auto; }
.tab { border: 0; background: transparent; font: inherit; font-size: 16px; padding: 8px 16px; border-radius: 999px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.tab:hover { background: #f1e9de; }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab .n { font-size: 12px; opacity: .7; margin-left: 4px; }

/* toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.toolbar select, .toolbar input[type=search] { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.toolbar input[type=search] { flex: 1 1 200px; min-width: 160px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: #fff; font: inherit; font-size: 14px; padding: 7px 12px; cursor: pointer; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.check { font-size: 14px; display: inline-flex; gap: 6px; align-items: center; color: var(--muted); cursor: pointer; }

/* tier chips */
.tierbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.chip { --c: var(--t-90); border: 1.5px solid var(--c); background: #fff; color: var(--c); font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--c); color: #fff; }
.chip .n { opacity: .8; margin-left: 4px; }

/* sections */
.tier { margin: 26px 0 8px; }
.tier-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--c); padding-bottom: 6px; margin-bottom: 14px; }
.tier-head h2 { margin: 0; font-size: 20px; color: var(--c); }
.tier-head .sub { color: var(--muted); font-size: 14px; }
.tier-head .count { margin-left: auto; color: var(--muted); font-size: 13px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* card */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(60, 40, 20, .08); }
.thumb { position: relative; aspect-ratio: 4/3; background: #f6f1ea; display: grid; place-items: center; }
.thumb img { max-width: 82%; max-height: 82%; object-fit: contain; }
.thumb .ph { font-size: 46px; opacity: .55; }
.off { position: absolute; top: 10px; left: 10px; background: var(--c); color: #fff; font-weight: 700; font-size: 15px; padding: 2px 9px; border-radius: 8px; }
.store { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 6px; letter-spacing: .3px; }
.store.amazon { background: var(--amazon); }
.store.walmart { background: var(--walmart); }
.body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.brandline { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.badge.low { background: #dcfce7; color: #15803d; }
.badge.stale { background: #f1f5f9; color: #64748b; }
.title { font-size: 14px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.now { font-size: 22px; font-weight: 700; }
.was { color: var(--muted); text-decoration: line-through; font-size: 14px; }
.small { font-size: 12px; color: var(--muted); }
.sns { color: #15803d; font-weight: 600; }
.go { display: block; text-align: center; margin-top: 8px; padding: 8px; border-radius: 9px; background: var(--ink); color: #fff; text-decoration: none; font-size: 14px; }
.go:hover { background: var(--accent); }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.foot { margin-top: 50px; padding: 26px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* tier colours */
[data-tier="le50"] { --c: var(--t-le50); }
[data-tier="50-60"] { --c: var(--t-50-60); }
[data-tier="60-70"] { --c: var(--t-60-70); }
[data-tier="70-80"] { --c: var(--t-70-80); }
[data-tier="80-90"] { --c: var(--t-80-90); }
[data-tier="90+"] { --c: var(--t-90); }

@media (max-width: 560px) {
  .wrap { padding: 0 12px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .now { font-size: 18px; }
  .title { font-size: 13px; }
  .toolbar select { flex: 1 1 45%; }
}