/* ==========================================================================
   Пять экранов (2026-10-03): телефон, планшет, ноутбук, монитор 27″, 34″ 21:9.
   Подключается последним. Здесь только то, что нашёл разбор по снимкам:
   вылеты за край, разнобой ширины блоков, слипшиеся числа, мелкие цели
   под палец, большой монитор без своего масштаба, мелкие отклики.
   Решения владельца (стекло, плашки, монета, центральная ось) не меняются.
   ========================================================================== */

/* --- 1. Лендинг: общие правки ------------------------------------------------ */

/* Полоса «Сначала проверьте» была шире соседних блоков на два поля и на
   планшете с телефоном упиралась в края экрана. Теперь её край совпадает
   с краем остальных карточек. */
.risk.r5 .risk-inner {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--wrap) - 2 * var(--gutter));
}

/* Шаги в два столбца: линия от второго и четвёртого номера уходила за край
   экрана (на планшете страница прокручивалась вбок на 122 px). */
@media (min-width: 561px) and (max-width: 1000px) {
  .steps-row li:nth-child(2n)::after { display: none; }
}
@media (min-width: 561px) and (max-width: 760px) {
  .steps-row li:nth-child(2n + 1)::after { display: block; }
}

/* Тарифы на планшете стоя: три карточки в ряд вместо трёх растянутых полос */
@media (min-width: 740px) and (max-width: 1000px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
  .plan { padding: var(--s-4); }
  .plan-price { flex-wrap: wrap; row-gap: 0; }
  .plan-amount { font-size: clamp(1.5rem, 1rem + 1.9vw, 1.9rem); }
  .plan-feats { font-size: var(--t-xs); }
  .plan-flag { top: var(--s-3); right: var(--s-3); }
}

/* Ссылки шапки: тонкая черта выезжает из центра — видно, куда наведён курсор */
@media (hover: hover) {
  .nav-links a { position: relative; padding-block: 0.35rem; }
  .nav-links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor; opacity: 0.55;
    transform: scaleX(0); transition: transform var(--dur-2) var(--ease);
  }
  .nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
}

/* --- 2. Палец: цели не меньше 44 px ------------------------------------------ */
@media (pointer: coarse) {
  .foot-col a, .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot.f2 .foot-col ul, .foot-col ul { gap: 0; }
  .auth-check { width: 24px; height: 24px; }
  label[for='auth-agree'] a, .auth-foot a { display: inline-block; padding-block: 0.55rem; }
  .how-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- 3. Кабинет: телефон ------------------------------------------------------ */

/* Карточки с числами: на телефоне общее правило «у карточки поля 16 px» перебивало их нулевые
   поля — черты между числами не доходили до краёв. */
.cab-card.cab-stats { padding: 0; }

@media (max-width: 559px) {
  /* Три столбца на телефоне не держались: «израсходовано» не помещалось и упиралось в черту,
     у «Баланса» оставалась дыра под цифрой, черты не доходили до краёв карточки. Теперь три равные
     строки во всю ширину: подпись слева, значение и стрелка справа, черты от края до края. */
  .cab-card.cab-stats:not(.kb-stats) { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .cab-stats:not(.kb-stats) .cab-stat {
    grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; justify-items: start; column-gap: 0.6rem;
    min-height: 58px; padding: 0.55rem 0.95rem 0.55rem 1.15rem; text-align: left; border-radius: 0;
  }
  .cab-stats:not(.kb-stats) .cab-stat + .cab-stat { box-shadow: inset 0 1px 0 var(--cab-rule); }
  .cab-stats:not(.kb-stats) .cab-stat:first-child { border-radius: var(--cab-r) var(--cab-r) 0 0; }
  .cab-stats:not(.kb-stats) .cab-stat:last-child { border-radius: 0 0 var(--cab-r) var(--cab-r); }
  .cab-stats:not(.kb-stats) .cab-stat small { order: -1; display: block; font-size: var(--t-sm); line-height: 1.3; color: var(--ink-2); text-align: left; }
  .cab-stats:not(.kb-stats) .cab-stat small svg { display: none; }
  /* значение справа: цифра, под ней мелко «из …» — подпись слева остаётся в одну строку */
  .cab-stats:not(.kb-stats) .cab-stat b { display: grid; justify-items: end; justify-self: end; gap: 1px; font-size: 1.0625rem; line-height: 1.15; white-space: nowrap; text-align: right; }
  .cab-stats:not(.kb-stats) .cab-stat b i { display: block; margin: 0; font-size: 0.75rem; line-height: 1.2; }
  .cab-stats:not(.kb-stats) .cab-stat small { white-space: nowrap; }
  .cab-stats:not(.kb-stats) a.cab-stat::after {
    content: ''; width: 16px; height: 16px; background: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Плитки по три в ряд не помещались — становятся строками: значок слева,
     название и пояснение справа */
  .kb-row.n3.is-tiles { --n: 1; gap: var(--s-2); }
  .kb-row.n3.is-tiles .kb-tile {
    grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center;
    column-gap: var(--s-4); row-gap: 0; min-height: 68px; padding: 0.8rem 1.1rem; text-align: left;
  }
  .kb-row.n3.is-tiles .kb-tile > :first-child { align-self: center; }
}

/* Три показателя под графиком: подписи разной длины сдвигали цифры по высоте.
   Подпись и цифра живут в общих строках — цифры всегда на одной линии. */
.ov-mini { grid-template-rows: auto auto auto; }
.ov-mini > div { grid-row: span 2; grid-template-rows: subgrid; align-content: normal; }
.ov-mini dt { align-self: end; }
.ov-mini dd { align-self: start; }
@media (max-width: 559px) { .ov-mini dd i { display: block; } }

@media (max-width: 359px) {
  .cab-stats:not(.kb-stats) .cab-stat { padding-inline: 0.9rem 0.7rem; column-gap: 0.4rem; }
  .cab-stats:not(.kb-stats) .cab-stat small { font-size: var(--t-xs); }
  .cab-stats:not(.kb-stats) .cab-stat b { font-size: 1rem; }
}

/* На сенсорном экране подсветка «наведения» залипала после нажатия и оставалась пятном */
@media (hover: none) { a.cab-stat:hover { background: none; } }

/* Подпись «скоро» и мелкие пометки: не меньше 11 px */
.kb-soon { font-size: max(0.6875rem, 11px); }

/* --- 5. Кабинет: отклики ------------------------------------------------------ */
.kb-tr, .cab-row { transition: background var(--dur-1) var(--ease); }
@media (hover: hover) {
  .kb-table .kb-tr:not(.kb-th):hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
}
.kb-tile:active, a.kb-card:active, button.kb-card:active, a.cab-stat:active { transform: scale(0.985); transition-duration: 0.08s; }
@media (max-width: 860px) {
  .cab-tab { transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
  .cab-tab:active { transform: scale(0.94); }
}


/* --- 6. Большой монитор (27″, 2560 px) ---------------------------------------- */
/* Весь сайт рассчитан на ноутбук: на 27″ колонка оставалась шириной 1200 px
   и терялась на экране. Здесь шире полотно и на ступень крупнее шрифт. */
@media (min-width: 1800px) {
  :root { --wrap: 1320px; }
}
@media (min-width: 2200px) {
  html { font-size: 112.5%; }
  :root { --wrap: 1480px; --wrap-narrow: 840px; }
  .nav-inner { height: 76px; }
  .nav .brand-word { width: 240px; }
  .btn { min-height: 50px; }
  .btn-lg { min-height: 60px; }
  .btn-sm { min-height: 42px; }
  .section-title { max-width: 24ch; }

  .cab { --cab-side: 292px; }
  .cab-brand { height: 92px; }
  .cab-brand .brand-word { width: 244px; }
  .cab-bar-in { padding: 0 18px 18px; }
  .cab-tab { min-height: 56px; }
  .cab-tab svg { width: 22px; height: 22px; }
  .cab-main:has(> .cab-view.kb), .cab-main:has(> .cab-view.ov) { max-width: calc(1320px + 2 * var(--gutter)); }
  .kb .w880 { max-width: 1040px; }
  .kb .w720 { max-width: 840px; }
  .kb .w560 { max-width: 640px; }
  .kb-tile { min-height: 150px; }
}

/* --- 7. Надпись TEGRIDY: буквы на одной линии с кнопками шапки ------------------
   В картинке буквы стоят в верхней части, под ними луч. Если ставить картинку
   по центру строки, буквы оказываются выше кнопок. Сдвиг вниз на 20,5 % своей
   высоты ставит середину букв на середину строки при любом размере, луч уходит
   ниже. Сдвиг влево на 1,56 % убирает пустое поле картинки: буквы начинаются
   ровно от левого края содержимого. (Владелец 2026-10-04; на 34″ меню кабинета
   остаётся у левого края экрана — сборку «по центру» он отменил.) */
.nav .brand-word { transform: translate(-14px, 20.5%); }
@media (max-width: 860px) {
  .nav .brand-word { transform: translate(-1.56%, 20.5%); }
  .cab-brand .brand-word { transform: translate(-1.56%, 20.5%); }
}

/* --- 7б. «Бонусы»: уровни (разбор на всех экранах, 2026-10-04) --------------------- */

/* При выборе ступени панель меняла высоту (у Diamond четыре привилегии, у «Старта» одна) —
   всё, что ниже, прыгало. В два столбца держим высоту по самой длинной ступени. */
@media (min-width: 720px) {
  .lv-pair .kb-row.n2 > .kb-half { min-height: 25.5rem; }
}
/* Панель ступени: содержимое по центру высоты — как карта рядом; у короткой ступени нет пустого низа */
.lv-pair .kb-half:not(.lv-show) { justify-content: center; }
.lv-pair .kb-half:not(.lv-show) .kb-foot { margin-top: var(--s-2); }
/* Смена ступени: текст панели проявляется вместе с картой, а не подменяется рывком */
.lv-pair .kb-half:not(.lv-show) > * { animation: lv-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.lv-pair .kb-half:not(.lv-show) > :nth-child(2) { animation-delay: 40ms; }
.lv-pair .kb-half:not(.lv-show) > :nth-child(n + 3) { animation-delay: 80ms; }

/* Свой уровень на лестнице виден и тогда, когда смотришь другую ступень: на широком экране
   выделено число друзей под названием, на телефоне (числа скрыты) — точка под названием */
@media (min-width: 720px) { .lv-node.is-mine small { color: var(--ink); font-weight: 600; } }
@media (max-width: 719px) {
  .lv-node { padding-bottom: 14px; }
  .lv-node.is-mine b { position: relative; }
  .lv-node.is-mine b::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent); }
}

/* 320 px: «Platinum» и «Diamond» слипались в одно слово */
@media (max-width: 359px) {
  .lv-node b { font-size: 0.625rem; letter-spacing: -0.02em; }
  .lv-badge { width: 36px; height: 36px; }
  .lv-rail::before, .lv-rail::after { top: 22px; }
}

/* Полоса «Ваша ссылка». На средних ширинах кнопка растягивалась во всю ширину карточки —
   ставим её справа от текста, поле ссылки — второй строкой. */
@media (min-width: 720px) and (max-width: 1279px) {
  .lv-invite { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lv-invite .kb-qr { grid-row: span 2; }
  .lv-invite .cab-code { grid-column: 2 / -1; }
  .lv-invite > .btn { grid-column: 3; grid-row: 1; }
}
/* Узкий телефон: рядом с QR тексту оставалось по одному слову в строке — ставим столбиком */
@media (max-width: 379px) {
  .lv-invite { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .lv-invite .cab-code, .lv-invite > .btn { grid-column: auto; width: 100%; }
}
@media (pointer: coarse) {
  .kb-code .cab-code-e, .kb-code .btn-sm { min-width: 44px; min-height: 44px; }
}

/* Большой монитор: карта уровня оставалась 440 px в карточке шириной 650 */
@media (min-width: 2200px) { .lv-scene { width: min(100%, 540px); } }

/* Кристалл уровня в строке клуба «Обзора» (вместо круглой медали) */
.cab-club-gem { display: grid; place-items: center; width: 52px; height: 52px; }
.cab-club-gem .lv-badge { width: 48px; height: 48px; margin: 0; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)) drop-shadow(0 4px 14px color-mix(in srgb, var(--g1) 45%, transparent)); }

@media (prefers-reduced-motion: reduce) { .lv-pair .kb-half:not(.lv-show) > * { animation: none; } }

/* --- 7в. «Мои устройства»: последнее подключение ------------------------------- */
/* На широком экране это отдельный столбец; на телефоне столбец спрятан, а время стоит строкой под названием */
.kb-td-t { display: grid; gap: 1px; min-width: 0; }
.kb-td-t small { display: none; font-size: var(--t-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 719px) { .kb-td-t small { display: block; } }
@media (max-width: 359px) { .kb-td-t small { white-space: normal; } }
/* «Обзор», строка устройства: две части через точку; на телефоне каждая на своей строке — без обрезки многоточием */
.ov-box .cab-row.ov-dev small { display: flex; flex-wrap: wrap; column-gap: 0.45em; white-space: normal; overflow: visible; }
.ov-box .cab-row.ov-dev small span + span::before { content: '· '; }
@media (max-width: 559px) {
  .ov-box .cab-row.ov-dev small { display: grid; }
  .ov-box .cab-row.ov-dev small span + span::before { content: none; }
}

/* --- 8. Низкий экран ноутбука -------------------------------------------------- */
@media (min-width: 861px) and (max-height: 760px) {
  .cab-brand { height: 64px; }
  .cab-tab { min-height: 44px; }
  .cab-tabs { gap: 6px; }
}

/* --- 9. Спокойный режим -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none; }
  .kb-tile:active, a.kb-card:active, button.kb-card:active, a.cab-stat:active, .cab-tab:active { transform: none; }
}

/* --- 10. Разбор дизайна 2026-10-08 (impeccable + taste; четыре независимых проверки) ------
   Единая шкала кнопок, тап-зоны 44 px, переносы текста, ровные поля карточек,
   лёгкий вход разделов. Правки лежат отдельным слоем в конце, чтобы их было видно и можно было откатить целиком. */

/* 10.1 Шкала кнопок: sm 40 · md 48 · lg 56 · значок 44. Было: sm 38/40/42/44, значок 40/42/44/46, lg 59/60. */
.btn { min-height: 48px; }
.btn-sm { min-height: 40px; }
.btn-lg { min-height: 56px; padding-block: 0.8rem; }
.btn-icon { min-width: 44px; min-height: 44px; }
.cab .btn-sm, .cab-lang { min-height: 40px; }
@media (min-width: 2200px) { .btn { min-height: 50px; } .btn-sm { min-height: 42px; } .btn-lg { min-height: 60px; } }
/* Касание: всё нажимаемое — не меньше 44 px (правило из depth.css перебивалось более частными) */
@media (pointer: coarse) {
  .btn-sm, .btn-icon, .seg > *, .cab-lang, .cab-back, .cab-code-e, .kb-ib, .kb-switch > *, .cab .btn-sm { min-height: 44px; }
  .btn-icon, .cab-code-e, .kb-ib { min-width: 44px; }
  .foot.f2 .foot-col a, .how-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 10.2 Переносы: заголовки и лиды — ровными строками, абзацы — без висячих слов */
h1, h2, h3, .t-lead, .lead, .hero-lead, .why-lead, .section-title { text-wrap: balance; }
p, li, dd, .t-body, .t-sm { text-wrap: pretty; }

/* 10.3 Лендинг */
.why-lead { margin-top: 0; text-align: center; text-wrap: balance; }
.tile-hero .hero-lead { max-width: 36ch; font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem); }
@media (max-width: 520px) {
  /* две кнопки героя друг под другом — одной ширины, по центру */
  .hero-actions { flex-direction: column; align-items: stretch; width: min(100%, 320px); margin-inline: auto; }
  .hero-actions .btn { width: 100%; }
}
.final-inner .t-h2 { font-size: clamp(1.5rem, 6.8vw, 1.9rem); }
@media (min-width: 900px) { .final-inner .t-h2 { font-size: inherit; } }
@media (max-width: 1100px) { .plan-flag { top: var(--s-3); right: var(--s-3); } }
.kb-osnote, .cab-note { text-wrap: balance; }
.pl1 .pl-list li:has(> [data-i18n='apps.router']) { width: auto; min-width: 112px; padding-inline: var(--s-3); }
.pl1 .pl-list li span { font-size: var(--t-xs); }
@media (max-width: 719px) { .pl1 .pl-list li span { font-size: 0.75rem; } }
/* контур второстепенной кнопки читается на любом фоне (WCAG 1.4.11, 3:1) */
.btn:not(.btn-primary):not(.btn-quiet):not(.btn-icon) { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
/* фокус: контур повторяет форму элемента (общее правило в base.css без принудительного радиуса) */
summary:focus-visible, .seg:focus-visible, .seg > *:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cab-tab:focus-visible, a.cab-stat:focus-visible, .cab-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* 10.4 Кабинет */
/* заголовок раздела всегда по центру (в состоянии «без подписки» уезжал влево) */
.cab-head { justify-items: center; text-align: center; }
/* строка настроек: подпись не рвётся по буквам, значение ужимается многоточием, на узком — переносится под подпись */
.cab-row-t b { overflow-wrap: break-word; }
.cab-row-t { min-width: min-content; }
.cab-row-e { min-width: 0; max-width: 58%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 379px) {
  /* значение под текст уходит только у строки с классом is-valwrap (почта); остальные строки со значком не трогаем */
}
/* поля заголовков карточек «Обзора» совпадают с полями самих карточек */
.ov-box > .ov-h { padding: 1.4rem 1.5rem 0.85rem; }
.ov-box .cab-row { padding-inline: 1.5rem; }
/* подписи в строках — до двух строк, а не обрыв посреди слова */
.ov-box .cab-row-t small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }
/* два главных действия: на телефоне равные половины, если влезают, иначе столбиком во всю ширину */
.kb-hero > .kb-acts { width: 100%; max-width: 30rem; }
.kb-acts .btn { flex: 1 1 9.5rem; min-width: 0; }
@media (min-width: 720px) { .kb-acts .btn { flex: 0 1 auto; } }
/* карточка «Пригласить друга» на телефоне: значок в строке с заголовком, текст на всю ширину */
@media (max-width: 619px) {
  .ov-invite { grid-template-columns: 46px minmax(0, 1fr); align-items: start; column-gap: var(--s-3); }
  .ov-invite .cab-code, .ov-invite > .btn { grid-column: 1 / -1; }
  .ov-invite-t p { max-width: none; }
}
/* плитки «Скоро»: значки на одной линии, бейдж не налезает на значок */
.kb-row:not(.is-tiles) .kb-tile { align-content: start; padding-top: 1.35rem; }
.kb-row:not(.is-tiles) .kb-tile small { min-height: 2.6em; }
.kb-soon { top: 8px; right: 8px; }
/* нижняя панель на телефоне: плотнее подложка, подписи не слипаются на 320 */
@media (max-width: 859px) {
  .cab-main { padding-bottom: calc(65px + 10px + env(safe-area-inset-bottom, 0px) + 28px); }
  .cab-tab { font-size: 0.75rem; }
}
@media (max-width: 359px) { .cab-tab { font-size: 0.6875rem; padding-inline: 1px; } }
/* шторка пополнения: подсказка не похожа на введённое значение */
.cab-sheet .input::placeholder { color: color-mix(in srgb, var(--ink) 38%, transparent); }
.cab-sheet .btn[disabled], .cab-sheet .btn:disabled { opacity: 0.6; }
/* hover на вкладках сайдбара и плитках */
@media (hover: hover) {
  .cab-tab:not([aria-current='page']):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .kb-tile:hover, a.kb-card:hover { transform: translateY(-2px); }
}
.kb-tile, a.kb-card { transition: transform 0.2s var(--ease), background 0.2s var(--ease); }

/* 10.5 Вход раздела: быстрее и без размытия (blur на каждом стеклянном блоке тормозит WebView) */
@keyframes cab-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cab-view.is-enter > * { animation: cab-rise 0.38s var(--ease) backwards; animation-delay: calc(min(var(--i, 0), 6) * 36ms); }
/* нажатие: короткий отклик */
.btn:active, .cab-tab:active, .kb-tile:active { transition-duration: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .cab-view.is-enter > *, .kb-tile, a.kb-card { animation: none; transition: none; }
  .kb-tile:hover, a.kb-card:hover { transform: none; }
}

/* --- 11. Решения владельца 2026-10-09 (по странице согласования) ----------------------- */

/* А. Река и в тёмной теме: русла рядом с частицами, тише, чем в светлой */
:root:not([data-theme='light']) { --scene-line: rgba(150, 120, 255, 0.2); --scene-line-hi: rgba(180, 150, 255, 0.7); }

/* Б. «Обзор»: две равные колонки */
@media (min-width: 1180px) { .cab-view.ov > .c5, .cab-view.ov > .c7 { grid-column: span 6; } }

/* В. Одна ширина полотна у всех разделов кабинета: 1000 px (на 27″ чуть шире) */
.cab-main:has(> .cab-view.kb), .cab-main:has(> .cab-view.ov) { max-width: calc(1000px + 2 * var(--gutter)); }
.kb .w880, .kb .w720 { max-width: none; }
@media (min-width: 2200px) {
  .cab-main:has(> .cab-view.kb), .cab-main:has(> .cab-view.ov) { max-width: calc(1160px + 2 * var(--gutter)); }
  .kb .w880, .kb .w720 { max-width: none; }
}

/* Д. Шестерёнка «Настройки» в шапке — только там, где нет бокового меню (телефон и планшет) */
@media (min-width: 860px) { .cab-gear { display: none; } }

/* Цифры в трёх строках «Обзора» (телефон): тот же шрифт, что у подписей, одинаковый вес и ширина цифр —
   раньше широкий Unbounded выбивался, «3» и «340 ₽» стояли на разной высоте */
.cab-stats:not(.kb-stats) .cab-stat b { font-family: var(--font); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.015em; }
@media (min-width: 560px) { .cab-stats:not(.kb-stats) .cab-stat b { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); } }
@media (max-width: 559px) {
  .cab-stats:not(.kb-stats) .cab-stat b { font-size: 1.1875rem; line-height: 1.1; }
  .cab-stats:not(.kb-stats) .cab-stat b i { font-weight: 500; font-size: 0.8125rem; color: var(--ink-3); margin-top: 1px; }
  .cab-stats:not(.kb-stats) .cab-stat { min-height: 68px; align-items: center; }
}

/* Числа в строках «Обзора» не обрезаем многоточием (правило 10.4 было для почты в «Настройках») */
.ov-box .cab-row-e, .cab-row-e:has(> svg:only-child), .cab-row-e:has(.cab-num) { max-width: none; overflow: visible; text-overflow: clip; flex: none; }

/* Шапка кабинета на самых узких телефонах (320 px): четыре кнопки по 44 px и надпись должны поместиться */
@media (max-width: 359px) {
  .cab-bar-in { padding-inline: 10px; }
  .cab-tools { gap: 0; }
  .cab-lang { min-width: 44px; padding-inline: 0.2rem; }
  .cab-bar .brand-word { width: 100px; }
}

/* --- 12. По видео владельца 2026-10-09 (мини-апп на iPhone, ширина 375 pt) ---------------- */

/* 12.1 Строка с длинным значением (почта): значение второй строкой под текстом. Правило 10.4 раньше задевало ВСЕ строки
   со значком и сбрасывало стрелки и переключатель «Живой фон» вниз: теперь только по классу. */
@media (max-width: 420px) {
  .cab-row.is-valwrap { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .cab-row.is-valwrap > .cab-row-e { grid-column: 2; max-width: 100%; justify-content: flex-start; }
}

/* 12.2 Надпись TEGRIDY в шапке была серой — ярче. Монета без подписки остаётся тёмной, как задумано (владелец 2026-10-09) */
:root:not([data-theme='light']) .cab-bar .brand-word, :root:not([data-theme='light']) .cab-brand .brand-word { filter: brightness(1.5) contrast(1.05); }

/* 12.3 Переключатели из стекла, а не чёрные: дорожка сегментов и выключенный «Живой фон» */
:root:not([data-theme='light']) .cab-seg { background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
:root:not([data-theme='light']) .cab-switch:not(.is-on) { background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* 12.4 Оформление подписки: тариф — компактная строка (название слева, цена справа),
   срок, устройства и трафик — одни и те же плашки: одной высоты, по центру, по три в ряд, последний ряд растягивается */
.kb-buy .cab-opts.is-3 { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.kb-buy .cab-opts.is-3 .kb-pick { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); row-gap: 0; padding: 0.7rem 0.95rem; min-height: 0; }
.kb-buy .cab-opts.is-3 .kb-pick b { grid-column: 1; grid-row: 1; }
.kb-buy .cab-opts.is-3 .kb-pick small:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; text-align: right; font-weight: 700; font-size: var(--t-sm); color: var(--ink); white-space: nowrap; }
.kb-buy .cab-opts.is-3 .kb-pick small:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.kb-buy .cab-opts:not(.is-3) { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.kb-buy .cab-opts:not(.is-3) > .cab-opt { flex: 1 1 calc(33.333% - var(--s-2)); min-width: 88px; min-height: 68px; display: grid; align-content: center; justify-items: center; gap: 2px; text-align: center; padding: 0.65rem 0.5rem; }
.kb-buy .cab-opts:not(.is-3) > .cab-opt b { justify-content: center; }

/* 12.5 Карта уровня на телефоне: палец двигает блик (раньше касания игнорировались — карта была «мёртвая»),
   а долгое нажатие не вызывает iOS-лупу, выделение и меню картинки */
.lv-scene { touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.lv-scene *, .cab-hero, .cab-hero * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.cab img { -webkit-touch-callout: none; -webkit-user-drag: none; }

/* 12.6 Аватар профиля: фото из Telegram поверх буквы */
.kb-ava { position: relative; overflow: hidden; }
.kb-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* 12.7 Правило обрезки значений (10.4) обрезало переключатель «Живой фон»: значения теперь не обрезаем вовсе,
   длинная почта уходит второй строкой (12.1) */
.cab-row-e { max-width: none; overflow: visible; text-overflow: clip; }

/* --- 13. Нижняя панель вкладок из стекла, а не чёрная (владелец 2026-10-09) -------------------- */
@media (max-width: 860px) {
  :root:not([data-theme='light']) .cab-tabs {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)), color-mix(in srgb, var(--bg) 66%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px -16px rgba(0, 0, 0, 0.6);
  }
  :root:not([data-theme='light']) .cab-ind {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  }
}