/* Telegram Mini App shell. All rules are scoped; the desktop website is unchanged. */
html[data-telegram-app] body.app { min-height:var(--tg-viewport-stable-height,100dvh); height:var(--tg-viewport-stable-height,100dvh); overflow:hidden; }
html[data-telegram-app] body.app .shell { height:100%; min-height:0; grid-template-rows:minmax(0,1fr); overflow:hidden; }
html[data-telegram-app] body.app .content { height:100%; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:calc(var(--app-bottombar-h) + var(--tg-safe-bottom,0px)); }
html[data-telegram-app] body.app .topbar { padding-top:8px; top:0; background:var(--sl-surface); backdrop-filter:none; }
html[data-telegram-app] body.app .sidebar-foot a { display:none; }
html[data-telegram-app] :is(.pwa-install,.pwa-banner,[data-pwa-install]) { display:none !important; }
html[data-telegram-app] .bottom-nav { display:block; padding-bottom:calc(6px + max(var(--tg-safe-bottom,0px),env(safe-area-inset-bottom,0px))); }
html[data-telegram-app] .bottom-nav .bottom-nav-inner > button { min-height:52px; }
html[data-telegram-app] body:not(.app) { min-height:var(--tg-viewport-stable-height,100dvh); }
html[data-telegram-app] :is(.modal,.sheet,[role='dialog']) { max-height:calc(var(--tg-viewport-stable-height,100dvh) - var(--tg-safe-top,0px) - 16px); }
@media(max-width:960px) { html[data-telegram-app] body.app .content { padding-bottom:calc(var(--app-bottombar-h) + var(--tg-safe-bottom,0px) + 8px); } }
html[data-telegram-app] { --sl-shadow:0 4px 14px rgba(16,24,32,.08); --sl-shadow-lg:0 12px 32px rgba(16,24,32,.16); }
html[data-telegram-app][data-theme='dark'] { --sl-text-faint:#9BAEB4; --sl-danger:#EE9696; --sl-shadow:0 4px 14px rgba(0,0,0,.22); --sl-shadow-lg:0 12px 32px rgba(0,0,0,.32); }
html[data-telegram-app] body { padding-left:max(var(--tg-safe-left,0px),env(safe-area-inset-left,0px)); padding-right:max(var(--tg-safe-right,0px),env(safe-area-inset-right,0px)); }
html[data-telegram-app] :is(h1,h2,h3,label,.panel-head,.field-hint,.sl-pd__plain) { overflow-wrap:anywhere; }
html[data-telegram-app] :is(.panel-head,.topbar,.topbar-actions,.sl-pcar__bar) { flex-wrap:wrap; }
/* Узкая шапка TMA: действия остаются в одной строке, иначе вторая строка
   выходила из 60px-полосы и перекрывала «Все настройки». Заголовок усекается. */
@media(max-width:480px) {
  html[data-telegram-app] body.app .topbar { flex-wrap:nowrap; flex-shrink:0; }
  html[data-telegram-app] body.app .topbar-actions { flex-wrap:nowrap; flex:none; }
  html[data-telegram-app] body.app .topbar-start { min-width:0; flex:1 1 auto; overflow:hidden; }
  html[data-telegram-app] body.app #pageTitle { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
html[data-telegram-app] :is(.panel-head > *,.form-grid > *,.switch-row > *,.sl-pcar__bar > *) { min-width:0; }
html[data-telegram-app] body.app .panel { padding:var(--sl-s3); box-shadow:var(--sl-shadow-sm); }
html[data-telegram-app] :is(.btn,.sl-btn,.settings-tabs button,.language-btn,.lang-btn) { min-height:44px; white-space:normal; overflow-wrap:anywhere; line-height:1.35; }
html[data-telegram-app] :is(.icon-btn,.sl-theme-toggle,.sl-pd__close) { min-width:44px; min-height:44px; }
html[data-telegram-app] :is(input:not([type='checkbox']):not([type='radio']):not([type='range']),select,textarea) { min-height:44px; min-width:0; font-size:16px; }
html[data-telegram-app] :focus-visible { outline:2px solid var(--sl-teal); outline-offset:3px; }
html[data-telegram-app][data-theme='dark'] :is(a:not(.sl-btn),.sl-plan__more,.sl-pcar__counter) { color:var(--sl-mint); }
html[data-telegram-app] .sl-pcar__dot { width:32px; height:44px; padding:19px 13px; flex:none; }
html[data-telegram-app] .sl-pcar__dot.is-active { width:38px; }
html[data-telegram-app] .modal-backdrop { padding-top:calc(12px + var(--tg-safe-top,0px)); padding-bottom:calc(12px + var(--tg-safe-bottom,0px)); }
html[data-telegram-app] .sl-pd { max-height:none; padding-top:var(--tg-safe-top,0px); }
html[data-telegram-app] .sl-pd__panel { max-height:min(92dvh,calc(var(--tg-viewport-height,100dvh) - var(--tg-safe-top,0px) - 12px)); padding-bottom:calc(16px + max(var(--tg-safe-bottom,0px),env(safe-area-inset-bottom,0px))); overscroll-behavior-y:contain; }
@media(max-width:390px) {
 html[data-telegram-app] body.app .page { padding:12px 10px 24px; }
 html[data-telegram-app] .form-grid { grid-template-columns:minmax(0,1fr); }
 html[data-telegram-app] .sl-pcar__bar { gap:4px; }
}
@media(prefers-reduced-motion:reduce) {
 html[data-telegram-app] *,html[data-telegram-app] *::before,html[data-telegram-app] *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
}
/* Checkbox controls must never inherit the full-width text-input geometry. */
html[data-telegram-app] input:is([type='checkbox'],[type='radio']) { width:20px; height:20px; min-height:20px; padding:0; margin:0; flex:0 0 20px; }
html[data-telegram-app] label:has(> input:is([type='checkbox'],[type='radio'])) { display:flex; align-items:flex-start; gap:10px; white-space:normal; overflow-wrap:normal; word-break:normal; min-width:0; }
#telegramAccountGate { box-sizing:border-box; }
#telegramAccountGate fieldset { min-width:0; display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
#telegramAccountGate fieldset label { flex:1 1 140px; box-sizing:border-box; padding:10px; border:1px solid var(--app-border); border-radius:10px; font-size:16px; line-height:1.4; }
#telegramAccountGate .dob-parts { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr); gap:8px; }
#telegramAccountGate .dob-parts label { overflow-wrap:normal; }

#telegramAccountGate [hidden] { display:none !important; }

/* Compact settings menu and one existing editor at a time. */
.settings-menu-back { display:none; }
html[data-telegram-app] .settings-layout { display:block; }
html[data-telegram-app] .settings-tabs { display:flex; flex-direction:column; gap:0; width:100%; }
html[data-telegram-app] .settings-tabs button { display:flex; justify-content:space-between; width:100%; text-align:left; padding:14px; border-bottom:1px solid var(--app-border); }
html[data-telegram-app] .settings-tabs.is-editing { display:none; }
html[data-telegram-app] .settings-menu-back { display:block; margin-bottom:12px; }
html[data-telegram-app] .settings-layout:has(.settings-tabs:not(.is-editing)) .settings-menu-back { display:none; }
html[data-telegram-app] .search-filters { margin-bottom:12px; }
html[data-telegram-app] .search-filters summary { min-height:44px; cursor:pointer; font-weight:600; }

/* The in-app language picker must fit even beside the account controls. */
#appLanguage { max-width:125px; width:auto; }
html[data-telegram-app] dialog { max-height:calc(var(--tg-viewport-stable-height,100dvh) - var(--tg-safe-top,0px) - var(--tg-safe-bottom,0px) - 24px); }

/* Public pricing chrome is not part of the Mini App navigation. */
/* Скрываем только футер сайта, не футер карточки тарифа: иначе вместе с ним
   пропадают CTA «Выбрать», «Подробно» и кнопка оплаты Stars. */
html[data-telegram-app] body.sl-pricing footer.footer,
html[data-telegram-app] body.sl-pricing header .nav,
html[data-telegram-app] body.sl-pricing header .buttons > a { display:none !important; }

/* Компактная мобильная шапка TMA: аватар слева, язык — иконка. */
html[data-telegram-app] body.app .topbar-start { gap: 8px; }
html[data-telegram-app] body.app .profile-avatar-btn { min-width: 40px; min-height: 40px; }
html[data-telegram-app] body.app #pageTitle { font-size: 16px; }
html[data-telegram-app] .sheet__panel { max-height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--tg-safe-top, 0px) - 6px); }
html[data-telegram-app] .sheet__panel--tall { max-height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--tg-safe-top, 0px) - 6px); }
html[data-telegram-app] .profile-drawer__panel { padding-top: calc(10px + var(--tg-safe-top, 0px)); }
html[data-telegram-app] .search-quick { margin-bottom: 10px; }
html[data-telegram-app] .search-filters-actions { padding-bottom: max(6px, var(--tg-safe-bottom, 0px)); }
@media (max-width: 480px) {
  /* Правая карточка аккаунта дублирует аватар и панель профиля — освобождаем место. */
  html[data-telegram-app] body.app .account { display: none; }
  html[data-telegram-app] body.app .topbar-actions { gap: 4px; }
}
/* Шторка не должна выходить за верхний край: контейнер получает safe-area
   отступ, панель ограничена его высотой. */
html[data-telegram-app] .sheet { padding-top: calc(var(--tg-safe-top, 0px) + 6px); }
html[data-telegram-app] .sheet__panel,
html[data-telegram-app] .sheet__panel--tall { max-height: 100%; }

/* ================================================
   P0: iPhone/TMA containment, header centering,
   notifications safe areas, XTR store chrome.
   Scoped: desktop/public web is unchanged.
   ================================================ */
html[data-telegram-app] body.app,
html[data-telegram-app] body.app .content { max-width: 100%; overflow-x: clip; }

/* Шапка: аватар слева, SparkLink строго по центру viewport, действия справа. */
html[data-telegram-app] body.app .topbar { position: relative; }
html[data-telegram-app] body.app .topbar-start { flex: 0 1 auto; overflow: visible; }
html[data-telegram-app] body.app .topbar-actions { flex: none; margin-left: auto; position: relative; z-index: 2; }
html[data-telegram-app] body.app :is(.notif-bell, .lang-globe) { min-width: 44px; min-height: 44px; }

/* Шторка: единственный вертикальный скролл, без неявного горизонтального пана. */
html[data-telegram-app] .sheet { padding-top: calc(var(--tg-safe-top, 0px) + 8px); }
html[data-telegram-app] .sheet__panel,
html[data-telegram-app] .sheet__panel--tall {
  width: 100%; max-width: min(560px, 100%); box-sizing: border-box;
  overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html[data-telegram-app] .sheet__panel--tall { overflow: hidden; }
html[data-telegram-app] .sheet__panel--tall .sheet__head { flex: none; }
html[data-telegram-app] .sheet__panel--tall .sheet__body { min-height: 0; overflow-y: auto; overflow-x: clip; }
html[data-telegram-app] .sheet__body > *,
html[data-telegram-app] .sheet__body .form-grid > *,
html[data-telegram-app] .sheet__body .range-pair > * { min-width: 0; max-width: 100%; }
/* На iPhone 393px старая сетка оставалась двухколоночной: инпуты и даты
   складывались шире панели и панель уезжала вбок. В шторке — одна колонка. */
html[data-telegram-app] .sheet__body .form-grid { grid-template-columns: minmax(0, 1fr); }
html[data-telegram-app] .sheet__body :is(input, select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; }
html[data-telegram-app] .sheet__body :is(input[type='range'], input[type='checkbox'], input[type='radio']) { width: auto; }
html[data-telegram-app] .sheet__body .chips-box { max-width: 100%; }
html[data-telegram-app] .sheet__body .search-filters-actions {
  position: sticky; bottom: 0; z-index: 1;
  padding-bottom: calc(8px + max(var(--tg-safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
  background: var(--app-surface); border-top: 1px solid var(--app-border);
}
/* With the keyboard reducing the viewport, a sticky action row can cover the
   focused city field. Keep it in the same scroll flow on compact screens. */
@media (max-height: 450px) {
  html[data-telegram-app] .sheet__body .search-filters-actions { position: static; }
}
html[data-telegram-app] .travel-dates { margin-top: 8px; }
html[data-telegram-app] .travel-dates summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; }

/* Уведомления: заголовок и кнопка не заходят под системную шапку и home bar. */
html[data-telegram-app] .notif-drawer {
  box-sizing: border-box; height: 100%;
  padding-top: var(--tg-safe-top, 0px);
  padding-bottom: max(var(--tg-safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
}
html[data-telegram-app] .notif-drawer__head,
html[data-telegram-app] .notif-filters,
html[data-telegram-app] .notif-drawer__foot { flex: none; }
html[data-telegram-app] .notif-list { min-height: 0; }
html[data-telegram-app] .notif-drawer__close { min-width: 44px; min-height: 44px; }
html[data-telegram-app] .notif-drawer__foot .ghost-btn { width: 100%; min-height: 48px; }

/* Магазин: статус подписки и запрет карточного checkout внутри Telegram. */
html[data-telegram-app] .store-status {
  display: grid; gap: 4px; margin-bottom: 12px; padding: 12px;
  border: 1px solid var(--app-border); border-radius: var(--app-radius);
  background: var(--app-surface-2);
}
html[data-telegram-app] .store-status__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
html[data-telegram-app] .store-sub-actions { display: none !important; }
.store-sub-note { display: none; }
html[data-telegram-app] .store-sub-note { display: block; margin-top: 8px; max-width: 60ch; }

@media (max-width: 960px) {
  html[data-telegram-app] body.app #pageTitle { display: none; }
  html[data-telegram-app] body.app .mobile-logo {
    display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 1; max-width: 34%; padding: 0; background: none; border: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
@media (max-width: 480px) {
  html[data-telegram-app] body.app .topbar { padding-inline: 12px; }
  /* Второстепенная кнопка темы уходит в настройки, чтобы не сжимать цели. */
  html[data-telegram-app] body.app [data-theme-toggle] { display: none !important; }
}

/* Шторка и центр уведомлений обязаны быть выше нижней навигации:
   иначе таббар остаётся видимым и кликабельным под модальным слоем. */
html[data-telegram-app] .sheet { z-index: 200; }
html[data-telegram-app] .notif-drawer { z-index: 210; }
html[data-telegram-app] .notif-drawer__foot .ghost-btn {
  background: var(--app-surface-2); border: 1px solid var(--app-border);
  border-radius: 12px; font-weight: 700;
}

/* Контейнер шторки должен занимать весь viewport: иначе нижняя навигация
   физически выступает под ним и остаётся видимой/кликабельной. */
html[data-telegram-app] .sheet {
  top: 0; right: 0; bottom: 0; left: 0;
  height: auto; max-height: none;
}

/* Компактная сводка магазина вместо пяти крупных карточек: баланс и
   инвентарь читаются одной строкой, каталог остаётся ниже. */
html[data-telegram-app] .inventory-grid { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-telegram-app] .inventory-grid .stat {
  flex: 1 1 92px; min-width: 0; padding: 8px 10px; border-radius: 12px;
  box-shadow: none; gap: 2px;
}
html[data-telegram-app] .inventory-grid .stat strong { font-size: 17px; line-height: 1.2; }
html[data-telegram-app] .inventory-grid .stat span { font-size: 10.5px; line-height: 1.25; }