:root { color-scheme: dark; }
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; font: 15px/1.35 system-ui, sans-serif;
  background: var(--tg-theme-bg-color, #12141c); color: var(--tg-theme-text-color, #eef0f6);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
/* В полноэкранном Telegram сверху его полоса (Назад, меню) — отступаем на её высоту. */
header { position: sticky; top: 0; z-index: 2; padding: calc(12px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 16px 8px; background: var(--tg-theme-bg-color, #12141c); }
#q {
  width: 100%; padding: 10px 14px; border: 0; border-radius: 12px; font: inherit; outline: none;
  background: var(--tg-theme-secondary-bg-color, #1d2030); color: inherit;
}
#chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.chip {
  flex: none; border: 0; padding: 6px 14px; border-radius: 999px; font: inherit; cursor: pointer;
  background: var(--tg-theme-secondary-bg-color, #1d2030); color: inherit;
}
.top { display: flex; align-items: center; gap: 8px; }
.top #q { flex: 1; }
#share { flex: none; border: 0; width: 40px; height: 40px; border-radius: 12px; font-size: 18px; cursor: pointer;
  background: var(--tg-theme-secondary-bg-color, #1d2030); color: inherit; }
.chip.on { background: var(--tg-theme-button-color, #3d8bff); color: var(--tg-theme-button-text-color, #fff); }
main { padding: 0 16px 24px; max-width: 1100px; margin: 0 auto; }
h2 { font-size: 17px; margin: 18px 0 10px; }
.row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card {
  flex: none; width: 150px; border: 0; padding: 10px; border-radius: 16px; text-align: left; cursor: pointer; font: inherit;
  background: var(--tg-theme-secondary-bg-color, #1d2030); color: inherit;
}
.grid .card { width: auto; }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.card b { display: block; margin-top: 8px; }
.card small { color: var(--tg-theme-hint-color, #8a90a6); display: block; }
.empty { text-align: center; padding: 60px 16px; color: var(--tg-theme-hint-color, #8a90a6); }
.empty a { color: var(--tg-theme-link-color, #6ab3ff); }
@media (min-width: 900px) { .card { width: 190px; } header, main { padding-left: 24px; padding-right: 24px; } }