*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; overflow: hidden; } /* body сам не скроллится и не может "утечь" в закрытие свайпом */

html{
  scroll-padding-top: var(--safe-top);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button{ font-family: inherit; }

a{ color: inherit; text-decoration: none; }

/* Каждая страница — отдельный полноэкранный контейнер.
   padding-bottom учитывает и safe-area, и высоту таббара —
   когда таббар скрыт (body.tabbar-hidden), нижний паддинг схлопывается. */
.page{
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* нативная инерция скролла на iOS */
  overscroll-behavior-y: contain;      /* пружинка внутри страницы есть, но наружу (в жест закрытия) не "протекает" */
  padding-bottom: calc(var(--safe-bottom) + var(--tabbar-h) + 20px);
  transition: padding-bottom .15s ease;
}
body.tabbar-hidden .page{
  padding-bottom: calc(var(--safe-bottom) + 20px);
}

.content{
  padding: 0 var(--gap-page) var(--gap-page);
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* ---------- Topbar ---------- */
.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-top) + 12px) var(--gap-page) 8px;
}
.topbar--plain{ padding-bottom: 16px; }

.model-pill, .pro-pill{
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 590;
  color: var(--text-primary);
  background: rgba(120,120,128,0.24);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.pro-pill{ background: var(--accent-purple); color: #fff; }
.chev{ opacity: .8; }

.brand{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
}
.brand-star{ font-size: 20px; }

/* ---------- Hero-зона (шапка + hero главного экрана) ----------
   Один общий контейнер на topbar + hero: голубой градиент "живёт" здесь,
   поэтому шапка (пилюли) оказывается поверх голубого фона, а не поверх
   тёмного фона страницы — сама шапка (.topbar) остаётся прозрачной.
   Внизу элемент даёт лишние --hero-fade пикселей мягкого перехода в
   тёмный фон страницы; следующий блок контента "заезжает" на этот
   переход через отрицательный margin-top (см. .content > .block:first-child). */
:root{ --hero-fade: 56px; }

.hero-wrap{
  position: relative;
  padding-bottom: var(--hero-fade);
  background: linear-gradient(
    to bottom,
    var(--bg-hero-top) 0,
    var(--bg-hero-top) calc(100% - var(--hero-fade)),
    transparent 100%
  );
}

.hero{
  padding: 28px var(--gap-page) 26px;
  text-align: center;
}
.hero-icon{ margin: 4px auto 14px; width: 64px; height: 64px; }
.hero-title{ margin: 0; font-size: 26px; font-weight: 700; }

/* Пилюли шапки поверх голубого фона — тёмное полупрозрачное стекло,
   без сплошной заливки (в т.ч. без фиолетового Pro — тот только на
   тёмных экранах "Создать"/"Настройки", см. components.css). */
.hero-wrap .model-pill,
.hero-wrap .pro-pill{
  background: rgba(0,0,0,0.16);
  color: var(--text-primary);
}

/* Первый блок контента на главной "накладывается" на хвост градиента —
   position+z-index гарантируют, что карточки рисуются НАД градиентом,
   а не под ним (сам градиент лежит в hero-wrap, ниже по стеку). */
#homeContent.content{
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--hero-fade) + 8px);
}

/* ---------- Секции / заголовки блоков ---------- */
.block{ display: flex; flex-direction: column; gap: 10px; }
.block-title{
  font-size: 20px;
  font-weight: 700;
  margin: 0 2px;
}

/* Скрытие через атрибут — единая точка правды для всей видимости.
   Ставится JS-ом на основе config.js, ничего в разметке ломать не нужно. */
[data-hidden="true"]{ display: none !important; }