/* Дизайн — как в родных приложениях Telegram (Настройки, список чатов, профиль):
   цвета — из Telegram.WebApp.themeParams (app.js кладёт их в --tg-theme-*), геометрия — токены.
   Собственные цвета есть только в блоке фолбэка ниже: он действует, пока Telegram не отдал
   тему (или страница открыта вне Telegram), и повторяет стандартные темы iOS-клиента. */

/* FALLBACK:BEGIN — палитра вне Telegram; в Telegram её перекрывают inline-переменные темы */
:root {
  --tg-theme-bg-color: #ffffff;
  --tg-theme-secondary-bg-color: #efeff4;
  --tg-theme-section-bg-color: #ffffff;
  --tg-theme-text-color: #000000;
  --tg-theme-hint-color: #8e8e93;
  --tg-theme-link-color: #007aff;
  --tg-theme-button-color: #007aff;
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-destructive-text-color: #ff3b30;
  --tg-theme-header-bg-color: #f7f7f7;
  --tg-theme-section-header-text-color: #6d6d72;
  --tg-theme-section-separator-color: #c8c7cc;
  --tg-theme-subtitle-text-color: #8e8e93;
  --tg-theme-accent-text-color: #007aff;
  --tg-theme-bottom-bar-bg-color: #f7f7f7;
  --backdrop: rgba(0, 0, 0, .4);
  --toast-bg: rgba(0, 0, 0, .78);
  --toast-text: #ffffff;
  --star: #ffcc00;          /* звезда «в избранном» — жёлтая, как в iOS; в themeParams такого цвета нет */
}
@media (prefers-color-scheme: dark) {
  :root {
    --tg-theme-bg-color: #1c1c1d;
    --tg-theme-secondary-bg-color: #000000;
    --tg-theme-section-bg-color: #1c1c1d;
    --tg-theme-text-color: #ffffff;
    --tg-theme-hint-color: #98989e;
    --tg-theme-link-color: #3e88f7;
    --tg-theme-button-color: #3e88f7;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-destructive-text-color: #eb5545;
    --tg-theme-header-bg-color: #1a1a1a;
    --tg-theme-section-header-text-color: #8d8e93;
    --tg-theme-section-separator-color: #3d3d40;
    --tg-theme-subtitle-text-color: #98989e;
    --tg-theme-accent-text-color: #3e88f7;
    --tg-theme-bottom-bar-bg-color: #1d1d1d;
    --backdrop: rgba(0, 0, 0, .6);
    --toast-bg: rgba(44, 44, 46, .96);
    --star: #ffd60a;
  }
}
:root[data-scheme="dark"] { --star: #ffd60a; }
/* FALLBACK:END */

/* --- токены: компоненты берут только их --- */
:root {
  --page: var(--tg-theme-secondary-bg-color);
  --surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color));
  --text: var(--tg-theme-text-color);
  --hint: var(--tg-theme-hint-color);
  --subtitle: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color));
  --link: var(--tg-theme-link-color);
  --accent: var(--tg-theme-accent-text-color, var(--tg-theme-link-color));
  --button: var(--tg-theme-button-color);
  --button-text: var(--tg-theme-button-text-color);
  --destructive: var(--tg-theme-destructive-text-color);
  --separator: var(--tg-theme-section-separator-color, var(--tg-theme-hint-color));
  --section-header: var(--tg-theme-section-header-text-color, var(--tg-theme-hint-color));
  --header: var(--tg-theme-header-bg-color, var(--tg-theme-secondary-bg-color));
  --bottom-bar: var(--tg-theme-bottom-bar-bg-color, var(--tg-theme-secondary-bg-color));

  --font-size: 17px;       /* основной текст строки, как в iOS-клиенте */
  --font-small: 15px;      /* подзаголовок строки */
  --font-caption: 13px;    /* заголовок секции, подпись под секцией */
  --font-title: 19px;      /* название бумаги в плашке выдачи */
  --font-number: 22px;     /* главное число плашки — доходность */
  --radius: 12px;          /* скругление блока секции */
  --radius-button: 10px;
  --tap: 44px;             /* минимальная тач-цель и высота строки */
  --row-pad: 16px;         /* горизонтальный отступ строки и секции */
  --lead: 40px;            /* ведущий элемент строки (аватар) */
  /* подвал «Фильтры» без safe-area: запасная = кнопка + отступы 10px, реальную ставит fitSheetFooter */
  --sheet-footer: calc(var(--tap) + 20px);
  /* высота шапки .top: запасная (кнопка + отступы + safe-area), реальную ставит fitTopBar */
  --header-h: calc(var(--tap) + 16px + env(safe-area-inset-top));
  --filter-bar: calc(var(--tap) + 12px);   /* высота закреплённой полоски «Фильтры» */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: var(--font-size);
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) var(--row-pad) 8px;
  background: var(--header);
}
.top h1 { font-size: var(--font-size); margin: 0; font-weight: 600; }

main { padding: 8px 0 24px; max-width: 720px; margin: 0 auto; }
.hidden { display: none !important; }
.muted { color: var(--hint); }
.small { font-size: var(--font-caption); }

:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }

/* --- кнопки --- */
button, .chip, .tab { touch-action: manipulation; }
button {
  min-height: var(--tap);
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--surface);
  color: var(--link);
  font-size: var(--font-size);
  font-family: inherit;
  cursor: pointer;
}
button:active { opacity: .6; }
button.primary { background: var(--button); color: var(--button-text); font-weight: 600; }
button.danger { color: var(--destructive); }
button.ghost { background: transparent; color: var(--link); padding: 8px 10px; }
button.wide { width: 100%; }
button[disabled] { opacity: .4; }

/* --- секции: надпись над скруглённой группой строк --- */
.section { margin: 0 0 24px; }
.section-header {
  margin: 0; padding: 0 calc(var(--row-pad) * 2) 6px;
  color: var(--section-header);
  font-size: var(--font-caption); font-weight: 400;
  text-transform: uppercase; letter-spacing: .02em;
}
/* надпись с иконкой справа (infoButton): иконка ≥44px, но строку не раздувает */
.section-head { display: flex; align-items: center; padding-right: var(--row-pad); }
.section-head .section-header { flex: 1; min-width: 0; padding-bottom: 0; }
.info-btn {
  position: relative; flex: none;
  min-width: var(--tap); min-height: var(--tap); margin: -8px 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--link);
  font-size: var(--font-small); font-weight: 600;
}
.info-btn::before {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 1.5px solid var(--link); border-radius: 50%;
}
.section-list {
  margin: 0 var(--row-pad);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.section-footer {
  margin: 0; padding: 6px calc(var(--row-pad) * 2) 0;
  color: var(--hint); font-size: var(--font-caption);
}
.section-pad { padding: 10px var(--row-pad); }
.section-pad + .section-pad { padding-top: 0; }

/* --- строка списка: ведущий элемент → заголовок/подзаголовок → значение/шеврон --- */
.list-row {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--tap);
  margin: 0; padding: 8px var(--row-pad);
  border: 0; border-radius: 0;
  background: transparent; color: var(--text);
  font: inherit; text-align: left;
}
button.list-row:active { background: var(--page); opacity: 1; }
/* разделитель — тонкая линия с отступом слева (под текстом, не под аватаром) */
.list-row + .list-row::before {
  content: ""; position: absolute; top: 0; right: 0;
  left: var(--row-pad);
  height: 1px; transform: scaleY(.5); transform-origin: top;
  background: var(--separator);
}
.row-below + .list-row::before, .section-pad + .list-row::before, .list-row + .section-pad::before {
  content: ""; position: absolute; top: 0; right: 0;
  left: var(--row-pad);
  height: 1px; transform: scaleY(.5); transform-origin: top;
  background: var(--separator);
}
.section-pad { position: relative; }
.list-row.has-lead::before { left: calc(var(--row-pad) + var(--lead) + 12px); }
.row-lead {
  flex: none; width: var(--lead); height: var(--lead);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--button); color: var(--button-text);
  font-size: var(--font-caption); font-weight: 600;
}
.row-main { flex: 1; min-width: 0; }
.row-title { display: block; font-size: var(--font-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-subtitle {
  display: block; margin-top: 2px;
  color: var(--subtitle); font-size: var(--font-small);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* правило бумаги вне избранного (T27): не действует — приглушено */
.list-row.dormant .row-title { color: var(--hint); }
.row-value { flex: none; max-width: 55%; text-align: right; color: var(--hint); }
.row-value.kv { color: var(--hint); font-size: var(--font-size); white-space: normal; }
.row-value .big { display: block; color: var(--text); font-size: var(--font-size); font-weight: 600; }
.row-value .tag { display: block; margin-top: 2px; font-size: var(--font-caption); color: var(--hint); }
.row-chevron { flex: none; color: var(--hint); font-size: 20px; line-height: 1; }
.row-below { position: relative; padding: 0 var(--row-pad) 10px; }
.row-below .chips { margin: 0; }
.list-row.wrap .row-title, .list-row.wrap .row-subtitle { white-space: normal; }
.list-row.destructive .row-title { color: var(--destructive); }
.list-row.link .row-title { color: var(--link); }

/* --- чипы фильтров --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 0; background: var(--page); color: var(--text);
  font-size: var(--font-small);
}
.chip[aria-pressed="true"] { background: var(--button); color: var(--button-text); font-weight: 600; }

input[type="text"], input[type="number"], textarea {
  width: 100%; min-height: var(--tap);
  padding: 10px 12px; border: 0; border-radius: var(--radius-button);
  background: var(--page); color: var(--text);
  font-size: var(--font-size); font-family: inherit;
}
/* select (T23): без системной плашки и стрелки — фон, радиус и стрелка из токенов темы.
   Стрелка — два градиента цветом --hint (галочка «вниз»), справа под неё отступ. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; min-height: var(--tap);
  padding: 10px 12px; padding-right: 40px; border: 0; border-radius: var(--radius-button);
  background-color: var(--page); color: var(--text);
  background-image: linear-gradient(45deg, transparent 50%, var(--hint) 50%),
                    linear-gradient(135deg, var(--hint) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
  font-size: var(--font-size); font-family: inherit;
}
select::-ms-expand { display: none; }

/* пикер (T23): строка со значением и стрелкой, под ней — список с галочкой, как выбор
   в Настройках Telegram; раскрытый список — в той же панели, без системного окна */
.picker {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: var(--tap);
  padding: 10px 14px 10px 12px;
  border-radius: var(--radius-button);
  background: var(--page); color: var(--text);
  text-align: left;
}
.picker-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-arrow {
  flex: none; width: 8px; height: 8px; margin: -4px 2px 0;
  border-right: 2px solid var(--hint); border-bottom: 2px solid var(--hint);
  transform: rotate(45deg); transition: transform .15s ease-out;
}
.picker[aria-expanded="true"] .picker-arrow { transform: translateY(4px) rotate(-135deg); }
.picker-list {
  margin: 0; padding: 0; list-style: none;
  border-radius: var(--radius-button);
  background: var(--page);
  overflow: hidden;
}
.picker-option {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--tap); padding: 10px 14px 10px 12px;
  color: var(--text); cursor: pointer;
}
.picker-option + .picker-option::before {
  content: ""; position: absolute; top: 0; right: 0; left: 12px;
  height: 1px; transform: scaleY(.5); transform-origin: top;
  background: var(--separator);
}
.picker-option:active { background: var(--surface); }
.picker-option[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.picker-check { flex: none; color: var(--accent); }

/* placeholder — цвет текста с прозрачностью: контрастнее --hint на фоне поля */
input::placeholder { color: var(--text); opacity: .55; }
.row { display: flex; gap: 8px; align-items: center; }
.row .grow, .grow { flex: 1 1 0; min-width: 0; }

/* поле с единицей: суффикс внутри поля, виден и при введённом значении */
.field { position: relative; display: block; }
.field input { width: 100%; min-width: 0; padding-right: 48px; }
.field .unit {
  position: absolute; top: calc(var(--tap) / 2); right: 12px; transform: translateY(-50%);
  color: var(--hint); font-size: var(--font-small); pointer-events: none;
}
/* от/до — две равные колонки: flex-basis 0 и min-width 0, иначе min-content инпута
   не даёт полю сжаться, и поля вылезают из блока */
.field input::-webkit-inner-spin-button, .field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* неверный ввод (T18): рамка и текст под полем — цветом destructive темы */
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--destructive); }
.field-error { display: block; margin-top: 4px; color: var(--destructive); font-size: var(--font-caption); }
.field-error:empty { display: none; }
.range { display: flex; gap: 8px; }
.range .field { flex: 1 1 0; min-width: 0; }

/* сегмент-контрол: варианты поровну на всю ширину, подпись переносится по центру;
   колонка сжимаемая, а слово длиннее колонки переносится внутри чипа, а не вылезает (T25) */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.segmented .chip {
  min-width: 0; min-height: var(--tap); padding: 6px 10px;
  text-align: center; white-space: normal; overflow-wrap: anywhere; hyphens: auto;
}
.between { justify-content: space-between; }

/* --- главное действие: в Telegram — MainButton, вне его — эта кнопка --- */
body.native-main .fallback-main { display: none; }
body.native-back .fallback-back { display: none; }

/* --- нижние вкладки --- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  background: var(--bottom-bar);
  box-shadow: 0 -0.5px 0 var(--separator);
}
.tab {
  min-height: 48px; border: 0; border-radius: 0; background: transparent; color: var(--hint);
  font-size: 11px; padding: 4px 2px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.tab[aria-selected="true"] { color: var(--accent); }
body.pushed .tabs { display: none; }
body.pushed { padding-bottom: env(safe-area-inset-bottom); }

/* --- экран поиска --- */
.count {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px;
  border-radius: 999px; background: var(--button); color: var(--button-text);
  font-size: var(--font-caption); font-weight: 600; text-align: center;
}
.saved { display: inline-flex; align-items: center; }
/* T21: полоска «Фильтры» закреплена под шапкой — видна при любой прокрутке выдачи.
   Только сверху (до нижних вкладок не тянется), ниже шапки и шторки по слоям; контент
   экрана начинается под ней, фокус с клавиатуры под неё не уезжает. */
.filter-bar {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 4;
  max-width: 720px; height: var(--filter-bar); margin: 0 auto;
  padding: 6px 0;
  background: var(--page);
}
.search-body { padding-top: var(--filter-bar); }
html:has(.filter-bar) { scroll-padding-top: calc(var(--header-h) + var(--filter-bar)); }
body.sheet-open .filter-bar { visibility: hidden; }
.list-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 var(--row-pad) 6px calc(var(--row-pad) * 2);
}
.list-toolbar .toolbar-title {
  flex: 1; color: var(--section-header);
  font-size: var(--font-caption); text-transform: uppercase; letter-spacing: .02em;
}
.pad-x { padding: 0 var(--row-pad) 24px; }

/* --- выдача: плашка на бумагу (T14). Название, эмитент и метрики переносятся, не обрезаются. */
.tiles { margin: 0 0 24px; }
.bond-tile {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  width: calc(100% - var(--row-pad) * 2); min-height: var(--tap);
  margin: 0 var(--row-pad) 8px; padding: 12px var(--row-pad);
  border: 0; border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; text-align: left; white-space: normal;
  cursor: pointer;
}
.bond-tile:has(.tile-open:active) { opacity: .6; }
.tile-head { display: flex; align-items: flex-start; gap: 12px; }
.tile-name { flex: 1; min-width: 0; }
/* T19: название — кнопка «открыть карточку», её ::after накрывает всю плашку */
.tile-title-row { display: flex; align-items: flex-start; }
.tile-open {
  flex: 0 1 auto; min-width: 0; min-height: 0; padding: 0;
  border-radius: 0; background: transparent; color: var(--text);
  font: inherit; text-align: left; white-space: normal;
}
.tile-open:active { opacity: 1; }
.tile-open:focus-visible { outline: none; }
.tile-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.tile-open:focus-visible::after { outline: 2px solid var(--link); outline-offset: -2px; }
/* звезда сразу за названием, поверх растянутой кнопки; тач-цель 44px без раздувания строки */
.bond-tile .star {
  position: relative; z-index: 1; flex: none;
  min-width: var(--tap); min-height: var(--tap); margin: -11px -8px -11px -6px; padding: 0;
  background: transparent; color: var(--hint);
  font-size: 22px; line-height: 1;
}
.bond-tile .star[aria-pressed="true"] { color: var(--star); }
.tile-title { display: block; font-size: var(--font-title); font-weight: 600; overflow-wrap: anywhere; }
.tile-issuer { display: block; margin-top: 2px; font-size: var(--font-small); overflow-wrap: anywhere; }
.tile-meta { display: block; margin-top: 2px; color: var(--hint); font-size: var(--font-caption); overflow-wrap: anywhere; }
.tile-yield { flex: none; max-width: 45%; text-align: right; }
.tile-yield-value { display: block; font-size: var(--font-number); font-weight: 700; }
.tile-yield .tile-label { display: block; }
.tile-metrics {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 12px;
  padding-top: 10px;
}
/* тонкая линия над метриками — как разделитель строк, не рамка */
.tile-metrics::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; transform: scaleY(.5); transform-origin: top;
  background: var(--separator);
}
.tile-metric { display: flex; flex-direction: column; min-width: 0; }
.tile-label { color: var(--hint); font-size: var(--font-caption); }
.tile-value { font-size: var(--font-small); overflow-wrap: anywhere; }
.tile-note { display: block; color: var(--hint); font-size: var(--font-caption); }
/* сортировка выдачи — сегмент под строкой «Найдено» (T23) */
.sort-bar { margin: 0 var(--row-pad) 8px; }
.sort-bar .chip { font-size: var(--font-caption); }
.list-toolbar button { min-height: 32px; padding: 4px 8px; background: transparent; font-size: var(--font-small); }

/* --- карточка бумаги: шапка как у профиля --- */
.profile { position: relative; padding: 8px var(--row-pad) 20px; text-align: center; }
.profile h2 { margin: 0; padding: 0 var(--tap); font-size: 22px; font-weight: 600; }
.profile .star {
  position: absolute; top: 0; right: 4px;
  min-width: var(--tap); min-height: var(--tap); padding: 0;
  background: transparent; color: var(--hint);
  font-size: 28px; line-height: 1;
}
.profile .star[aria-pressed="true"] { color: var(--star); }
.profile .issuer { margin-top: 4px; font-size: var(--font-size); color: var(--text); }
.profile .ticker {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  color: var(--hint); font-size: var(--font-small);
}
.profile .ticker button { min-height: var(--tap); padding: 0 10px; background: transparent; color: var(--link); font-size: var(--font-small); }
.profile .headline { margin-top: 12px; font-size: 34px; font-weight: 700; letter-spacing: -.01em; }
.profile .headline-label { color: var(--hint); font-size: var(--font-caption); }
.fallback-back { margin: 0 0 4px; padding-left: 8px; }
details.notes { margin: 0 var(--row-pad); color: var(--hint); font-size: var(--font-caption); }
details.notes summary { min-height: var(--tap); display: flex; align-items: center; color: var(--link); cursor: pointer; }
details.notes p { margin: 0 0 8px; }

/* --- панель «Фильтры» (bottom sheet) ---
   Поля скроллятся внутри панели; «Применить» закреплена у нижнего края экрана поверх них,
   поэтому у списка полей нижний отступ = высота подвала + safe-area. В Telegram вместо неё
   MainButton, и подвал не нужен. */
.sheet { position: fixed; inset: 0; z-index: 30; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--backdrop); }
/* --sheet-bar — высота подвала «Применить» (fitSheetFooter): панель кончается над ним,
   до замера — запасной токен */
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: var(--sheet-bar, var(--sheet-footer));
  max-width: 720px; margin: 0 auto;
  max-height: calc(92vh - var(--sheet-bar, var(--sheet-footer)));
  max-height: calc(92dvh - var(--sheet-bar, var(--sheet-footer)));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  animation: sheet-up .22s ease-out;
}
.sheet-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  padding: 14px 8px 8px var(--row-pad);
  background: var(--surface);
  touch-action: none;
}
.sheet-head h2 { flex: 1; margin: 0; font-size: var(--font-size); font-weight: 600; }
.grabber {
  position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px;
  border-radius: 3px; background: var(--separator);
}
/* --sheet-footer здесь — сколько низа панели закрыто невидимой частью webview
   (fitSheetFooter в app.js); подвал панель не накрывает — она кончается над ним */
.sheet-fields { padding: 0 0 calc(var(--sheet-footer) + 12px + env(safe-area-inset-bottom)); }
/* блоки панели — без «карточки в карточке»: один фон, между блоками тонкая линия */
.sheet .section { position: relative; margin: 0; padding: 12px 0 4px; }
.sheet .section + .section::before {
  content: ""; position: absolute; top: 0; right: 0;
  left: var(--row-pad);
  height: 1px; transform: scaleY(.5); transform-origin: top;
  background: var(--separator);
}
.sheet .section-header { padding: 0 var(--row-pad) 8px; }
/* надпись с «?» в шторке (T34): отступ снизу — у строки, иначе иконка съезжает вниз */
.sheet .section-head { padding-bottom: 8px; }
.sheet .section-head .section-header { padding-bottom: 0; }
.sheet .section-list { margin: 0; background: transparent; border-radius: 0; overflow: visible; }
.sheet .section-pad { padding: 0 var(--row-pad) 8px; }
.sheet .section-pad > * + * { margin-top: 8px; }
.sheet-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  max-width: 720px; margin: 0 auto;
  min-height: var(--sheet-footer);
  padding: 10px var(--row-pad) calc(10px + env(safe-area-inset-bottom));
  background: var(--bottom-bar);
  animation: sheet-up .22s ease-out;
}
body.native-main { --sheet-footer: 0px; --sheet-bar: 0px; }
body.native-main .sheet-footer { display: none; }
body.sheet-open { overflow: hidden; }
body.sheet-open .tabs { display: none; }
@keyframes sheet-up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }

/* --- попап-пояснение (T26): шторка поверх всего, кроме тоста --- */
.info { position: fixed; inset: 0; z-index: 35; }
.info-backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.info-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 720px; margin: 0 auto;
  max-height: 80vh; max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0 calc(16px + env(safe-area-inset-bottom));
  background: var(--surface); color: var(--text);
  border-radius: var(--radius) var(--radius) 0 0;
  animation: sheet-up .22s ease-out;
}
.info-head { display: flex; align-items: center; gap: 4px; padding: 10px 8px 4px var(--row-pad); }
.info-head h2 { flex: 1; margin: 0; font-size: var(--font-size); font-weight: 600; }
.info-text { margin: 0; padding: 0 var(--row-pad); line-height: 1.45; }

/* --- прочее --- */
.pager { display: flex; align-items: center; gap: 8px; margin: 0 var(--row-pad) 24px; }
.pager span { text-align: center; }
.toast {
  position: fixed; left: var(--row-pad); right: var(--row-pad);
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 40; padding: 12px var(--row-pad); border-radius: var(--radius);
  background: var(--toast-bg); color: var(--toast-text); font-size: var(--font-small);
}
.toast.err::before { content: "⚠️ "; }

.gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 18px; background: var(--page); z-index: 20; }
.offscreen { position: fixed; top: -1000px; left: 0; opacity: 0; }
.spinner { color: var(--hint); padding: 16px calc(var(--row-pad) * 2); }
.empty { padding: 24px calc(var(--row-pad) * 2); color: var(--hint); text-align: center; }