/* lvltop.com — базовые стили каркаса.
   Всё визуальное живёт в инлайн-стилях страниц (перенос 1:1 из канвасов Claude Design).
   Здесь только: reset, переключение десктоп/мобайл, обёртки страниц, плейсхолдер картинок,
   тёмная тема (трюк прототипа) и состояния попапов. Дизайн-стили сюда НЕ добавлять. */

/* --- reset (база из канваса) --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #F5F4F9; color: #1A1726; font-family: 'Onest', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* бегущая строка (из канваса) */
@keyframes tick-a { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- переключение версий --- */
.vd { display: block; }
.vm { display: none; }
@media (max-width: 1023px) {
  .vd { display: none; }
  .vm { display: block; }
}

/* --- обёртки страниц --- */
.pgd { width: 100%; max-width: 1440px; margin: 0 auto; background: #F5F4F9; color: #1A1726; font-family: 'Onest', sans-serif; position: relative; overflow-x: clip; }
.pgm { width: 100%; max-width: 480px; margin: 0 auto; background: #F5F4F9; color: #1A1726; font-family: 'Onest', sans-serif; position: relative; overflow-x: clip; }
/* Правка-3 #11: на части страниц шапка/подвал — прямые потомки .vd/.vm (вне .pgd/.pgm) и
   растягивались на всю ширину. Ограничиваем их той же шириной, что и .pgd/.pgm — как на главной.
   На страницах, где шапка уже внутри .pgd (.vd > .pgd > header), это правило не срабатывает. */
.vd > header, .vd > footer { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; }
.vm > header, .vm > footer { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }

/* --- плейсхолдер изображений (иконка внутри — remixicon) --- */
.img-ph { background: #EDEBF5; color: #8B87A0; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* --- тёмная тема: filter-инверсия как в прототипе; картинки инвертируются обратно --- */
#page.theme-dark { filter: invert(1) hue-rotate(180deg); }
#page.theme-dark img,
#page.theme-dark .img-ph { filter: invert(1) hue-rotate(180deg); }

/* --- попапы (#buy-popup / #login-popup): по умолчанию скрыты инлайн style="display:none";
       site.js убирает инлайн-display и вешает класс .open --- */
.fb-popup { position: fixed; inset: 0; z-index: 1000; background: rgba(26, 23, 38, .55); align-items: flex-start; justify-content: center; padding: 70px 16px 40px; overflow-y: auto; }
.fb-popup.open { display: flex; }
body.fb-popup-open { overflow: hidden; }