:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #efeff4);
  --sect: var(--tg-theme-section-bg-color, var(--bg));
  --ink: var(--tg-theme-text-color, #000000);
  --mut: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #6d6d72));
  --link: var(--tg-theme-link-color, #007aff);
  --btn: var(--tg-theme-button-color, #007aff);
  --btn-ink: var(--tg-theme-button-text-color, #ffffff);
  --sep: var(--tg-theme-section-separator-color, rgba(128,128,128,.3));
  --bad: var(--tg-theme-destructive-text-color, #ff3b30);
  --fire: #ff9500;
  --new: #177a41;                /* badge fill: white text on it is 5.2:1 */
  --good: #177a41;               /* green text on the page */
  --safe-b: var(--tg-safe-area-inset-bottom, 0px);
  --safe-t: var(--tg-content-safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg2); color: var(--ink);
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:root[data-scheme="dark"] { --good: #32d74b; }
body.detail-open #top, body.detail-open #main, body.detail-open #foot, body.detail-open #pager { display: none; }

/* ---- header: tabs, the one-line warning, tier chips ---- */
header { background: var(--bg); padding: 0 8px; border-bottom: 0.5px solid var(--sep); }
/* Not sticky: a page is ~1.5 screens and the bottom button is the page's action,
   so the tabs can scroll away and give the tiles the room. */
.bar { padding: calc(8px + var(--safe-t)) 0 8px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seg { display: flex; background: var(--bg2); border-radius: 10px; padding: 3px; }
.seg button { min-height: 38px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 15px; color: var(--mut); }
.seg button.on { background: var(--sect); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.seg .n { font-weight: 500; color: var(--mut); margin-left: 2px; }
.newcount { font-size: 14px; font-weight: 600; color: var(--good); padding-right: 6px; white-space: nowrap; }
#warn { margin: 8px 2px 0; font-size: 13px; color: var(--bad); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: none; min-height: 32px; padding: 0 14px; border-radius: 16px; background: var(--bg2);
  font-size: 14px; font-weight: 500; }
.chip::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }   /* 44 pt hit region */
.chip.on { background: var(--btn); color: var(--btn-ink); }

/* ---- grid + tiles ---- */
main { padding: 8px 8px 12px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { position: relative; background: var(--sect); border-radius: 12px; overflow: hidden; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--fire); opacity: 0; transition: opacity .15s; }
.tile.kept::after { opacity: 1; }
.tile.removed .ph img, .tile.removed .meta { opacity: .4; }
.open { display: block; width: 100%; text-align: left; }
.ph { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--bg2); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--mut); font-size: 13px; }
.badge { position: absolute; left: 6px; padding: 2px 7px; border-radius: 7px; font-size: 13px; font-weight: 700;
  background: rgba(0,0,0,.68); color: #fff; }
.badge.off { bottom: 6px; }
.badge.new { top: 6px; background: var(--new); font-size: 11px; letter-spacing: .03em; }
.badge.drop { top: 6px; background: var(--new); }
.meta { display: block; padding: 7px 10px 9px; min-width: 0; }
.brand, .sub { display: block; }
.brand { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keep { position: absolute; top: 0; right: 0; width: 48px; height: 48px; display: flex; align-items: center;
  justify-content: center; }
.keep span { width: 34px; height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.85); box-shadow: 0 1px 3px rgba(0,0,0,.25); font-size: 18px; }
.keep span b { filter: grayscale(1); opacity: .55; font-weight: normal; }
.tile.kept .keep span, .tile.saved:not(.removed) .keep span { background: var(--fire); }
.tile.kept .keep span b, .tile.saved:not(.removed) .keep span b { filter: none; opacity: 1; }
.keep:disabled { cursor: default; }

.pageinfo { text-align: center; color: var(--mut); font-size: 13px; padding: 14px 8px 2px; }
.sk .ph, .sk .line { background: rgba(128,128,128,.16); }
.sk .line { height: 12px; border-radius: 6px; margin: 9px 10px; }
.sk .line.short { width: 55%; }
@media (prefers-reduced-motion: no-preference) {
  .sk .ph, .sk .line { animation: pulse 1.2s ease-in-out infinite alternate; }
}
@keyframes pulse { from { opacity: 1; } to { opacity: .45; } }

.empty { text-align: center; padding: 64px 24px; }
.empty b { display: block; font-size: 18px; margin-bottom: 6px; }
.empty span { color: var(--mut); }
.empty button { margin-top: 18px; }
.big { min-height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 600; font-size: 16px; background: var(--bg2); }
.primary { background: var(--btn); color: var(--btn-ink); }
.big:disabled { opacity: .5; }

footer { color: var(--mut); font-size: 11px; padding: 6px 16px calc(24px + var(--safe-b)); }
body.has-pager { padding-bottom: calc(66px + var(--safe-b)); }
#pager { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 8px 8px calc(8px + var(--safe-b)); background: var(--bg);
  border-top: 0.5px solid var(--sep); }
#pager button { width: 100%; }

/* ---- detail: a full view with Telegram's Back button ---- */
#detail { min-height: 100vh; background: var(--bg); padding-bottom: calc(24px + var(--safe-b)); }
#detail .back { min-height: 44px; padding: 0 14px; color: var(--link); font-size: 16px; }
#detail .hero { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--bg2); }
#detail .hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
#detail .body { padding: 14px 16px 0; }
#detail .kicker { color: var(--mut); font-size: 14px; }
#detail .price { font-size: 28px; font-weight: 700; margin-top: 2px; }
#detail .price .was { color: var(--mut); text-decoration: line-through; font-size: 17px; font-weight: 500; margin-left: 8px; }
#detail .vs { font-size: 15px; font-weight: 600; color: var(--good); }
#detail .vs.none { color: var(--mut); font-weight: 400; }
#detail .facts { margin: 14px 0 0; padding: 0; list-style: none; border-top: 0.5px solid var(--sep); }
#detail .facts li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 0.5px solid var(--sep); font-size: 15px; }
#detail .facts li span:first-child { color: var(--mut); flex: none; }
#detail .facts li span:last-child { text-align: right; }
#detail .title { font-size: 14px; color: var(--mut); margin-top: 14px; }
#detail .fine { color: var(--mut); font-size: 12.5px; margin-top: 8px; }
#detail .acts { display: flex; flex-direction: column; gap: 8px; padding: 16px; }

/* ---- snackbar: one at a time, above the in-page pager when there is one ---- */
#snack { position: fixed; left: 8px; right: 8px; bottom: calc(10px + var(--safe-b)); z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 0 6px 0 16px;
  border-radius: 12px; background: rgba(28,28,30,.96); color: #fff; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
body.has-pager #snack { bottom: calc(76px + var(--safe-b)); }
#snackUndo { min-height: 44px; padding: 0 12px; color: #64d2ff; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tile::after { transition: none; } }
@media (prefers-reduced-motion: no-preference) {
  #snack { animation: rise .18s ease-out; }
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }