/* ==========================================================================
   v3-cab: слой третьего варианта компоновки («Ось и полка»), кабинет и мини-апп.
   Подключён после screens.css. Раздел «Общие кирпичи» (1–9) — для всех разделов кабинета и мини-аппа;
   «Обзор» и «Подключение» — 10–11. Следующий исполнитель дописывает снизу, чужое не переписывает.
   Правила: DIRECTION.md (центр для моментов, полки для чтения, один акцент, единая шкала, движение одним набором).
   ========================================================================== */

/* --- 1. Шкала: поля карточек 24 (ноутбук) / 16 (телефон) у ВСЕХ карточек --------------------------------- */
.cab, .cab-sheet-back { --cab-pad: 1.5rem; }
@media (max-width: 559px) { .cab, .cab-sheet-back { --cab-pad: 1rem; } }

.cab .cab-card:not(.cab-stats):not(.ov-box):not(.kb-table) { padding: var(--cab-pad); }
.cab .cab-row { padding-inline: var(--cab-pad); }
.cab .ov-box > .ov-h, .cab .kb-list > .ov-h { padding: var(--cab-pad) var(--cab-pad) 0.75rem; margin: 0; }

/* Шапка карточки: название слева, действие справа. Правый край у всех карточек экрана один;
   цель касания ссылки 44 px выдвинута за край отрицательным полем и визуально ничего не сдвигает */
.cab .ov-h { align-items: center; min-height: 28px; }
.cab .ov-h a, .cab .ov-h button {
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-width: 44px; min-height: 44px; margin: -12px -10px -12px 0; padding: 0 10px;
}
.cab .ov-h > span { font-variant-numeric: tabular-nums; }

/* Пары «подпись — значение»: подпись ink-2 500 слева, значение ink 600 справа */
.ov-kv dt { font-weight: 500; }
.ov-kv dd { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- 2. Кнопки ------------------------------------------------------------------------------------------ */

/* Контур второстепенной кнопки читается на любом фоне (WCAG 1.4.11, 3:1): тёмная ≈3.1:1 к #111115, светлая ≈3.1:1 к лиловому #d4d0e2 */
.cab .btn:not(.btn-primary):not(.btn-quiet):not(.btn-icon), .cab-sheet-back .btn:not(.btn-primary):not(.btn-quiet):not(.btn-icon) {
  border-color: color-mix(in srgb, var(--ink) 42%, transparent);
}
:root[data-theme='light'] .cab .btn:not(.btn-primary):not(.btn-quiet):not(.btn-icon),
:root[data-theme='light'] .cab-sheet-back .btn:not(.btn-primary):not(.btn-quiet):not(.btn-icon) { border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .cab .btn:not(.btn-primary):not(.btn-quiet):not(.btn-icon),
  :root:not([data-theme]) .cab-sheet-back .btn:not(.btn-primary):not(.btn-quiet):not(.btn-icon) { border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
}

/* Пара кнопок героя (V.pair): равная ширина. ≤479 столбиком на всю ширину (max 22rem); ≥480 в ряд, контейнер ≤34rem */
.cab-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); width: 100%; max-width: 34rem; margin-inline: auto; }
.cab-pair > .btn { flex: 1 1 13.5rem; min-width: 0; justify-content: center; }
.cab-hero .cab-pair { margin-top: var(--s-2); }
@media (max-width: 479px) {
  .cab-pair { flex-direction: column; flex-wrap: nowrap; max-width: 22rem; }
  .cab-pair > .btn { flex: none; width: 100%; }
}
/* прежняя пара V.acts в героях разделов — те же правила */
.kb-hero > .kb-acts { max-width: 34rem; }
.kb-acts .btn { flex: 1 1 13.5rem; }
@media (min-width: 720px) { .kb-acts .btn { flex: 1 1 13.5rem; } }

/* Кнопка внутри карточки — на всю ширину карточки, но не шире 28rem; малые кнопки внутри строк — у правого края */
.kb-card > .btn, .cab-card > .btn:only-child { max-width: 28rem; }

/* «Скопировано»: кнопка на 1,2 с меняет значок на галочку и подпись (cab-core.js: CAB.copied) — без тоста поверх */
.btn.is-copied i { font-style: normal; }
.btn.is-copied svg { color: var(--cab-ok); }
.btn-primary.is-copied svg { color: inherit; }

/* Метка «рекомендуем» в сегменте — не мельче 12 px */
.cab-seg > button small { font-size: 0.75rem; }

/* Отклик: нажатие scale(.98) 80 мс, наведение — подъём на 2 px за 0,2 с (одинаково у карточек и плиток) */
.kb-tile:active, a.kb-card:active, button.kb-card:active, a.cab-stat:active, .cab-opt:active { transform: scale(0.98); transition-duration: 80ms; }
.cab-row:active { transition-duration: 80ms; background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .kb-tile:active, a.kb-card:active, button.kb-card:active, a.cab-stat:active, .cab-opt:active { transform: none; }
}

/* --- 3. Плитки: ≥560 равные плитки, ≤559 строки 56–68 px со значком слева ---------------------------------- */
.kb-row:has(> .kb-tile) { align-items: stretch; }
@media (max-width: 559px) {
  .kb-row:has(> .kb-tile) { --n: 1; gap: var(--s-2); max-width: none; }
  .kb-row:has(> .kb-tile) > .kb-tile {
    grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-content: center; align-items: center;
    column-gap: var(--s-4); row-gap: 0; min-height: 60px; padding: 0.6rem var(--cab-pad); text-align: left;
  }
  .kb-row.is-os > .kb-tile { min-height: 56px; }
  .kb-row:has(> .kb-tile) > .kb-tile > :first-child { grid-row: 1 / span 2; align-self: center; margin: 0; }
  .kb-row:has(> .kb-tile) > .kb-tile .kb-ic { margin: 0; }
  .kb-row:has(> .kb-tile) > .kb-tile b, .kb-row:has(> .kb-tile) > .kb-tile small { grid-column: 2; text-align: left; }
  .kb-row:has(> .kb-tile) > .kb-tile small { min-height: 0; }
  /* без подписи заголовок встаёт на середину строки; с подписью — две строки */
  .kb-row:has(> .kb-tile) > .kb-tile b { grid-row: 1 / span 2; align-self: center; }
  .kb-row:has(> .kb-tile) > .kb-tile:has(> small) b { grid-row: 1; align-self: end; }
  .kb-row:has(> .kb-tile) > .kb-tile > small { grid-row: 2; align-self: start; }
  /* шеврон / стрелка наружу — справа */
  a.kb-tile::after, button.kb-tile::after {
    content: ''; grid-column: 3; grid-row: 1 / span 2; justify-self: end; width: 18px; height: 18px; background: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.7' 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 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  a.kb-tile[target='_blank']::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M17 14v4.500a1.500 1.500 0 0 1-1.500 1.500h-10A1.500 1.500 0 0 1 4 18.500v-10A1.500 1.500 0 0 1 5.500 7H10' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M17 14v4.500a1.500 1.500 0 0 1-1.500 1.500h-10A1.500 1.500 0 0 1 4 18.500v-10A1.500 1.500 0 0 1 5.500 7H10' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .kb-tile .kb-soon { position: static; grid-column: 3; grid-row: 1 / span 2; justify-self: end; align-self: center; }
}
/* ≥560: значки в плитках одного ряда стоят на одной линии, бейдж «скоро» не налезает на значок */
@media (min-width: 560px) {
  .kb-row:has(> .kb-tile) > .kb-tile { align-content: start; padding-top: 1.35rem; }
  .kb-row:has(> .kb-tile) > .kb-tile small { min-height: 2.6em; }
}

/* --- 4. Таблицы: слева текст, числа справа; в узком контейнере — «карточки-строки» -------------------------------- */
/* подсветка строки обещает нажатие — только у ссылок и кнопок; у обычных строк её нет */
.cab .kb-table div.kb-tr:not(.kb-th):not(.is-mine):hover { background: none; }
.kb-tr { transition: background var(--dur-1) var(--ease), opacity 0.18s var(--ease), transform 0.18s var(--ease); }
/* удаление строки: гаснет и уходит на 4 px вверх; из DOM строку убирает скрипт по transitionend (высота и отступы не анимируются) */
.kb-tr.is-gone { opacity: 0; transform: translateY(-4px); pointer-events: none; }
@container kbt (max-width: 800px) {
  .kb-td-t small { display: block; white-space: normal; overflow: visible; }
  .kb-td-n b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
.kb-td-n b { overflow-wrap: anywhere; }
.kb-traf { display: grid; justify-items: end; line-height: 1.25; }
.kb-traf small { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); white-space: nowrap; }
@container kbt (max-width: 320px) {
  .kb-td-n .cab-ic { display: none; }
  .kb-tr { gap: var(--s-2); }
}

/* Заголовок блока над таблицей и списком — слева, итог справа в одной строке (как шапка карточки) */
.kb-bh.is-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; justify-items: initial; gap: var(--s-1) var(--s-4); text-align: left; }
.kb-bh .kb-h2, .kb-bh.is-row .kb-h2 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
.kb-bh.is-row > span { color: var(--ink-2); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

/* Обратный отсчёт 4 с на «взведённой» корзине */
.kb-ib { position: relative; }
.kb-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.kb-ring circle { fill: none; stroke: var(--bad); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: kb-ring 4s linear forwards; }
@keyframes kb-ring { to { stroke-dashoffset: 1; } }

/* --- 5. Шаги-таймлайн (V.steps): номер слева, текст слева, вертикальная линия между номерами -------------------------- */
.kb-sts { --n: 36px; display: grid; gap: var(--s-5); }
@media (max-width: 559px) { .kb-sts { --n: 44px; } }
.kb-st { position: relative; display: grid; grid-template-columns: var(--n) minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
.kb-sts .kb-step-n { width: var(--n); height: var(--n); margin: 0; font-size: var(--t-sm); }
.kb-st-b { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; }
.kb-st-t { display: flex; align-items: center; min-height: var(--n); font-family: var(--font); font-size: var(--t-base); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; text-align: left; }
.kb-st:not(:last-child)::after {
  content: ''; position: absolute; left: calc(var(--n) / 2 - 1px); top: calc(var(--n) + 6px); bottom: calc(var(--s-5) * -1 + 6px); width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 50%, transparent), color-mix(in srgb, var(--ink-3) 22%, transparent));
}
.kb-st-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); max-width: 36rem; min-width: 0; }
.kb-st-acts > .btn { flex: 1 1 13.5rem; justify-content: center; }
/* 320–359: колонка шага 200 px — кнопка «Скачать для …» не шире колонки (nowrap + min-width:auto выталкивали её за рамку) */
@media (max-width: 359px) { .kb-st-acts > .btn { flex: 1 1 100%; min-width: 0; padding-inline: 0.75rem; font-size: 0.9375rem; gap: 0.375rem; } }
.kb-st-acts.is-col { flex-direction: column; align-items: stretch; }
.kb-st-acts.is-col > .btn { flex: none; width: 100%; max-width: 28rem; }
.kb-st-acts.is-col > .cab-code { width: 100%; }
.kb-st .kb-osnote { flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; margin-top: calc(var(--s-1) * -1); text-align: left; }
.kb-st .kb-osnote svg { margin-top: 3px; }

/* --- 6. Полка действия .actbar: слева контекст/сумма, справа главная кнопка (сайт и мини-апп) ----------------------- */
.actbar {
  position: sticky; z-index: 6; bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--glass-edge), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}
@media (max-width: 860px) { .actbar { bottom: calc(87px + env(safe-area-inset-bottom, 0px)); } }
.actbar-t { display: grid; min-width: 0; }
.actbar-t small { font-size: var(--t-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actbar-t b { display: inline-block; justify-self: start; transform-origin: left center; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.actbar > .btn { flex: none; min-height: 48px; }
.actbar-t b.is-tick { animation: actbar-tick 0.18s var(--ease); }
@keyframes actbar-tick { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .actbar-t b.is-tick { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .actbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); } }

/* --- 7. Шторки: подъём 280 мс / закрытие 160 мс, без размытия (стили движения — в cab.css) --------------------------- */
/* лимит трафика в шторке устройства: «Без лимита» на всю ширину, четыре равные плитки под ним — без пустых ячеек */
.cab-sheet .cab-opts.is-lim { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cab-sheet .cab-opts.is-lim > .cab-opt { min-height: 52px; justify-items: center; text-align: center; }
.cab-sheet .cab-opts.is-lim > .cab-opt:first-child { grid-column: 1 / -1; }
@media (max-width: 420px) { .cab-sheet .cab-opts.is-lim { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cab-sheet-h h2 { text-align: left; }
.cab-sheet-h h2:focus { outline: none; }
/* низкий экран: главная кнопка шторки остаётся у нижнего края */
@media (max-height: 700px) { .cab-sheet-b > .btn-primary:last-child { position: sticky; bottom: 0; } }
h1[tabindex='-1']:focus-visible { outline: none; }

/* --- 8. Движение: общий набор ---------------------------------------------------------------------------------- */
/* монета парит только в герое и только пока видна; в фоновой вкладке и под шторкой — пауза */
:root.has-js .hero-coin.is-away .coin, :root.has-js .hero-coin.is-away .coin-shadow, .hero-coin.is-away .coin::after,
:root.cab-bg .hero-coin .coin, :root.cab-bg .hero-coin .coin-shadow, :root.cab-bg .hero-coin .coin::after,
:root.cab-sheet-open .hero-coin .coin, :root.cab-sheet-open .hero-coin .coin-shadow, :root.cab-sheet-open .hero-coin .coin::after { animation-play-state: paused; }
/* река и частицы замирают под открытой шторкой */
:root.cab-sheet-open .scene, :root.cab-sheet-open .scene * { animation-play-state: paused !important; }
/* смена раздела: crossfade 170 мс только у содержимого (View Transitions; иначе — ступенчатый вход) */
:root.cab-vt::view-transition-old(root), :root.cab-vt::view-transition-new(root) { animation: none; }
:root.cab-vt .cab-view { view-transition-name: cab-view; }
:root.cab-vt::view-transition-group(cab-view) { animation-duration: 0.001s; }
:root.cab-vt::view-transition-old(cab-view), :root.cab-vt::view-transition-new(cab-view) { animation-duration: 0.17s; animation-timing-function: ease; }
/* точка состояния не пульсирует: свет статичный */
.cab-live.is-on::after { content: none; animation: none; }

/* --- 9. Строка состояния (V.state) -------------------------------------------------------------------------------- */
.cab-state { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0; font-size: var(--t-base); font-weight: 600; color: var(--ink); text-align: center; }
.cab-state .cab-live { flex: none; }

/* ==========================================================================
   10. Обзор
   ========================================================================== */

/* Две равные колонки — с 1280; до этого одна колонка полотна (868–1000 px) */
@media (min-width: 1180px) and (max-width: 1279px) {
  .cab-view.ov > .c5, .cab-view.ov > .c7 { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .cab-view.ov > .ov-stack.is-wide { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Одна колонка: «Подписка» сразу под тремя числами — ответ «сколько осталось» в первых двух экранах */
@media (max-width: 1279px) {
  .cab-view.ov > .cab-hero { order: 0; }
  .cab-view.ov > .cab-stats { order: 1; }
  .cab-view.ov > .ov-fill { order: 2; }
  .cab-view.ov > :not(.cab-hero):not(.cab-stats):not(.ov-fill) { order: 3; }
}
/* Строка состояния героя: нужна там, где «Подписка» не в первом экране; на двух колонках её читает сама карточка */
@media (min-width: 1280px) { .cab-view.ov .cab-state.is-hero { display: none; } }

/* Герой: монета по центру (бренд); на телефоне и коротких экранах меньше */
.cab-hero { gap: var(--s-3); }
.cab-hero .coin-shadow { margin-top: 12px; height: 16px; }
@media (max-width: 559px) {
  .cab-view.ov .cab-hero .hero-coin .coin, .cab-hero .hero-coin .coin { --d: clamp(112px, 34vw, 136px); }
  .cab-hero .coin-shadow { margin-top: 8px; height: 12px; }
  .cab-view.ov .cab-hero { gap: var(--s-3); padding-bottom: var(--s-3); }
}
@media (max-height: 700px) {
  .cab-view.ov .cab-hero .hero-coin .coin, .cab-hero .hero-coin .coin { --d: 120px; }
  .cab-hero .coin-shadow { margin-top: 6px; height: 10px; }
}
/* Телефон-ландшафт и окно ниже 520: две колонки — монета слева, текст и кнопки справа, текст слева */
@media (max-height: 520px) and (orientation: landscape) {
  .cab-hero { grid-template-columns: auto minmax(0, 28rem); column-gap: var(--s-6); justify-content: center; justify-items: start; align-content: center; text-align: left; padding-block: 0; }
  .cab-hero > .hero-coin { grid-row: 1 / span 4; grid-column: 1; align-self: center; }
  .cab-hero > :not(.hero-coin) { grid-column: 2; }
  .cab-hero .coin-shadow { display: none; }
  .cab-view.ov .cab-hero .hero-coin .coin, .cab-hero .hero-coin .coin { --d: 104px; }
  .cab-hero .cab-pair { margin-inline: 0; }
  .cab-hero .cab-state, .cab-view.ov .cab-state.is-hero { justify-content: flex-start; text-align: left; }
  .cab-view.ov .cab-state.is-hero { display: flex; }
  .cab-hero .cab-lead { text-align: left; }
}

/* «Осталось 80 дней»: одна шкала чисел сайта — Golos 700, tabular-nums */
.ov-left b { font-family: var(--font); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-size: clamp(1.9rem, 1.5rem + 1vw, 2.25rem); }
.ov-left b i { font-weight: 500; }

/* Карточка «Подписка»: узкая — столбиком; шире 600 px — «Осталось» и полоса слева, пары справа (пара ≤ 520 px, не на всю ширину) */
.ov-fill { container-type: inline-size; container-name: ovf; }
.ov-sub { display: grid; gap: var(--s-4); }
.ov-sub-a { display: grid; gap: var(--s-3); align-content: start; }
.ov-sub-a .ov-left, .ov-fill .ov-period { margin: 0; }
.ov-fill .ov-kv { margin-top: 0; max-width: 520px; width: 100%; }
@container ovf (min-width: 600px) {
  .ov-sub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-7); align-items: end; }
}

/* «Устройства» и «Новости»: подпись всегда на отдельных строках, без висячей точки и без обрыва на важном */
.ov-box .cab-row.ov-dev small { display: grid; }
.ov-box .cab-row.ov-dev small span + span::before { content: none; }
.ov-box .cab-row-t small { -webkit-line-clamp: 3; }
.ov-box .cab-row.ov-dev .cab-row-t small { display: grid; -webkit-line-clamp: unset; overflow: visible; }

/* График недели: точки стоят над подписями дней; «пустое» состояние — пунктир на тех же колонках */
.ov-chart .cab-spark { margin-top: var(--s-2); }
.ov-chart .cab-days { margin-top: var(--s-2); }
.ov-mini dt { min-height: 1.3em; }
.cab-flat { display: block; width: 100%; height: auto; aspect-ratio: 640 / 168; margin-top: var(--s-2); }
.cab-flat line { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ov-chart.is-empty .cab-flat { aspect-ratio: 640 / 96; }
.ov-chart.is-empty .cab-note { padding: var(--s-3) 0 0; text-align: center; }
.ov-lean { align-content: start; }
.ov-lean > .ov-chart { flex: 1; }

/* Приглашение: на ноутбуке две строки — значок + текст, ниже поле ссылки и кнопка (раньше тексту оставалось 80–210 px) */
@media (min-width: 620px) and (max-width: 2199px) {
  .ov-invite { grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: var(--s-4); }
  .ov-invite-t { grid-column: 2 / -1; }
  .ov-invite .cab-code { grid-column: 1 / 3; }
  .ov-invite > .btn { grid-column: 3; }
  .ov-invite-t p { max-width: 62ch; }
}

/* Монитор 34″: полотно и монета растут вместе (одна ширина у всех разделов) */
@media (min-width: 3000px) {
  .cab-main:has(> .cab-view.kb), .cab-main:has(> .cab-view.ov) { max-width: calc(1320px + 2 * var(--gutter)); }
  .cab { --cab-side: 320px; }
  .cab-view.ov .cab-hero .hero-coin .coin { --d: 240px; }
}

/* ==========================================================================
   11. Подключение
   ========================================================================== */
.kb-conn { container-type: inline-size; container-name: conn; }
.kb-conn-in { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: 'h' 's'; }
.kb-conn-h { grid-area: h; display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.kb-conn-h .kb-lead { margin: 0; }
.kb-conn-steps { grid-area: s; align-self: start; }
.kb-conn-qr { grid-area: q; display: none; justify-items: center; align-content: center; gap: var(--s-3); text-align: center; }
.kb-conn-qr p { font-size: var(--t-sm); color: var(--ink-2); }

/* QR нужен для другого устройства: на телефоне — в раскрывашке под шагами */
.kb-qrbox { margin-top: var(--s-5); padding-top: var(--s-2); box-shadow: inset 0 1px 0 var(--cab-rule); }
.kb-qrbox > summary { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: var(--t-sm); font-weight: 600; cursor: pointer; list-style: none; border-radius: 12px; }
.kb-qrbox > summary::-webkit-details-marker { display: none; }
.kb-qrbox > summary .cab-chev { margin-left: auto; color: var(--ink-3); transition: transform var(--dur-1) var(--ease); }
.kb-qrbox[open] > summary .cab-chev { transform: rotate(90deg); }
.kb-qrbox > .kb-qr { margin: var(--s-3) auto 0; width: fit-content; }

/* ≥720: QR справа в герое, шаги слева */
@container conn (min-width: 664px) { /* 664 в контейнере ≈ 720 px окна: QR справа от окна 720 */
  .kb-conn-in { grid-template-columns: minmax(0, 1fr) 264px; grid-template-areas: 'h h' 's q'; align-items: stretch; }
  .kb-conn-qr { display: grid; }
  .kb-qrbox { display: none; }
  .kb-conn-steps { align-self: stretch; }
}
/* Телефон-ландшафт и низкое окно: заголовок слева сверху, два шага рядом — «Добавить в …» остаётся над нижней панелью (QR — в раскрывашке) */
@media (max-height: 520px) and (orientation: landscape) {
  .kb-conn-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'h' 's'; gap: var(--s-3); }
  .kb-conn-h { justify-items: start; text-align: left; }
  .kb-conn-h .kb-h1 { font-size: 1.5rem; }
  .kb-conn-h .kb-lead { display: none; }
  .kb-conn-qr { display: none; }
  .kb-qrbox { display: block; }
  .kb-conn-steps { padding: var(--s-3) var(--s-4); }
  .kb-sts { --n: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  .kb-st:not(:last-child)::after { display: none; }
  .kb-st-acts, .kb-st-b { gap: var(--s-2); }
  .kb-st .kb-osnote { display: none; }
  .cab-main { padding-top: var(--s-3); }
}
/* Короткий телефон: подводка мельче, шаги плотнее — «Добавить в …» остаётся в первом экране */
@media (max-height: 700px) and (max-width: 559px) {
  .kb-conn-h .kb-lead { font-size: var(--t-sm); }
  .kb-conn-in { gap: var(--s-4); }
  .kb-conn-steps { padding-block: var(--s-4); }
  .kb-sts { gap: var(--s-4); --n: 36px; }
  .kb-st:not(:last-child)::after { bottom: calc(var(--s-4) * -1 + 6px); }
  .kb-st-acts, .kb-st-b { gap: var(--s-2); }
  .kb-st .kb-osnote { display: none; }
}
@media (max-width: 559px) { .cab-view.kb > .kb-conn { margin-top: calc(var(--s-3) * -1); } }

/* Справка: пара равных плиток по центру; «Перевыпустить ссылку» — тихая кнопка внизу, не плитка */
.kb-row.n2.is-tiles { max-width: 40rem; margin-inline: auto; }
.kb-revoke { display: grid; justify-items: center; gap: var(--s-1); text-align: center; margin-top: calc(var(--s-3) * -1); }
.kb-revoke > small { font-size: var(--t-xs); color: var(--ink-3); }
@container kbt (min-width: 801px) { .kb-table.is-devs .kb-tr { column-gap: var(--s-5); } }
.btn svg { flex: none; }

/* ==========================================================================
   12. Общее для «Подписки», «Бонусов», «Профиля» и «Настроек» (cab-2)
   ========================================================================== */

/* Кнопка-ссылка внутри текста и строк: цвет текста, подчёркивание; цель касания ≥ 44 px на пальце */
.kb-link { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: 8px; }
.kb-link:hover { text-decoration-thickness: 2px; }
@media (pointer: coarse) { .kb-link { min-height: 44px; } }

/* Выключенный тумблер читается на любом фоне (≥3:1): дорожка светлее карточки в тёмной теме и темнее — в светлой; включённый — акцент */
:root:not([data-theme='light']) .cab-switch:not(.is-on) { background: rgba(255, 255, 255, 0.38); box-shadow: none; }
:root[data-theme='light'] .cab-switch:not(.is-on) { background: var(--ink-3); box-shadow: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .cab-switch:not(.is-on) { background: var(--ink-3); box-shadow: none; } }

/* Тихий сегмент («По имени / Ссылкой»): второй переключатель в кадре не берёт акцент — он вторичен */
.cab-seg.is-quiet .cab-seg-run { background: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: none; }
.cab-seg.is-quiet > button[aria-pressed='true'] { color: var(--ink); }
.cab-seg.is-quiet:not(.has-run) > button[aria-pressed='true'] { background: color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: none; }

/* Цели касания на пальце — не ниже 44 px (сегменты, ссылки документов, «Все операции») */
@media (pointer: coarse) {
  .cab-seg > button, .cab-legal a { min-height: 44px; }
  .kb-more { padding-block: 11px; margin-block: -11px; }
}
.kb-more { transition: color var(--dur-1) var(--ease); }

/* Галочка вместо значка «копировать» на 1,2 с */
.cab-ok-ic { color: var(--cab-ok); }

/* Блоки-обёртки, которые не должны менять раскладку родителя */
.kb-zone { display: contents; }

/* Пара кнопок героя «Подписки» — тот же отступ, что у прежнего ряда */
.kb-hero > .cab-pair { margin-top: var(--s-3); }

/* Числа и суммы — одна шкала: Golos 700, tabular-nums (Unbounded — только заголовки) */
.kb-num { font-family: var(--font); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cab-sum .tot b { font-family: var(--font); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; font-size: 1.5rem; }
.kb-tot { display: grid; justify-items: end; }
.kb-tot small { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }

/* Шторки: плитки выбора — равные, по центру (одинаково в докупке и пополнении); на низком экране шторка помещается без прокрутки */
.cab-sheet .cab-opt { justify-items: center; text-align: center; min-height: 52px; }
.cab-sheet .cab-opts.is-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cab-sheet .cab-opts.is-chips .cab-opt b { justify-content: center; font-size: var(--t-base); }
.cab-sheet-b { transition: opacity 0.16s ease, transform 0.16s ease; }
.cab-sheet-b.is-swap { opacity: 0; transform: translateY(6px); }
.cab-sheet .btn-primary:disabled, .cab-sheet .btn-primary[disabled] { opacity: 1; background: color-mix(in srgb, var(--accent) 30%, var(--surface)); color: var(--ink); box-shadow: none; cursor: default; }
.cab-sheet .btn-primary:disabled::after { display: none; }
.cab-sheet .cab-plan.is-off { opacity: 1; }
@media (max-height: 480px) {
  .cab-sheet { max-height: 96vh; max-height: 96dvh; padding-block: 16px; gap: 12px; }
  .cab-sheet-h p { display: none; }
  .cab-sheet-b { gap: 12px; }
  .cab-sheet .cab-opt { min-height: 48px; }
  .kb-amt { font-size: 1.75rem; padding-block: 0; }
}

/* Пополнение: сумма крупно по центру, под ней быстрые суммы, поле слева с подсказкой под ним */
.kb-topf { display: grid; gap: var(--s-4); }
.kb-amt { display: block; padding-block: var(--s-2); font-family: var(--font); font-size: clamp(2.25rem, 9vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); }
.kb-amt.is-empty { color: var(--ink-3); }
.kb-topf .field-error { font-weight: 600; }

/* ==========================================================================
   13. Подписка (tariffs)
   ========================================================================== */

/* Сводная таблица: подпись тише значения и стоит рядом с ним (колонки 11rem · значение · кнопка у правого края) */
.kb-table.is-spec .kb-tr > span:first-child { font-weight: 500; color: var(--ink-2); }
.kb-table.is-spec .kb-tr > span:nth-child(2) b { font-weight: 600; color: var(--ink); }
.kb-auto-t { display: grid; gap: 1px; }
.kb-table.is-spec small.is-warn { color: var(--ink-2); font-weight: 600; }
/* узкая таблица — по ширине самой таблицы: название и значение столбиком слева, действие справа */
@container kbt (max-width: 520px) {
  .kb-table.is-spec .kb-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; align-items: center; }
  .kb-table.is-spec .kb-tr > span:first-child { grid-column: 1; grid-row: 1; }
  .kb-table.is-spec .kb-tr > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .kb-table.is-spec .kb-tr > span:last-child { grid-column: 2; grid-row: 1 / span 2; }
}
.kb-links { margin-top: 0; }

/* Оформление: одна колонка до 1099 (полотно уже 790 px), две равные — с 1100; полка .actbar — в правой колонке */
.kb-row.is-buy { --n: 1; }
.kb-row.is-buy > .actbar { justify-self: center; width: 100%; max-width: 34rem; }
@media (min-width: 861px) { .kb-row.is-buy > .actbar { bottom: 16px; } }
@media (min-width: 1100px) {
  .kb-row.is-buy { --n: 2; }
  .kb-row.is-buy > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .kb-row.is-buy > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .kb-row.is-buy > .kb-buy.is-pay { padding-bottom: calc(var(--cab-pad) * 2 + 64px); }
  .kb-row.is-buy > .actbar { grid-column: 2; grid-row: 1; align-self: end; max-width: none; margin: 0 var(--cab-pad) var(--cab-pad); width: auto; justify-self: stretch; }
}

/* Срок, устройства, трафик — плитки одной высоты; бейдж «−15%» сидит на верхней кромке и не переносит строку */
.kb-buy .cab-opt b { flex-wrap: nowrap; }
.kb-buy .cab-opt em { position: absolute; top: -9px; right: 10px; font-size: 0.75rem; line-height: 1.5; }
.kb-buy .cab-opts.is-term > .cab-opt { min-height: 84px; }
.kb-buy .cab-opt small.cab-num { white-space: nowrap; }
.kb-buy .cab-opts:not(.is-3) > .cab-opt { transition: box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }

/* Способы оплаты: недоступный «С баланса» — последним, причина читается (≥ 5:1); рядом действие «Пополнить» */
.kb-buy .cab-plan.is-off { opacity: 1; }
.kb-buy .cab-plan.is-off .cab-radio, .cab-sheet .cab-plan.is-off .cab-radio { opacity: 0.45; }
.kb-buy .cab-plan.is-off .cab-row-t b, .cab-sheet .cab-plan.is-off .cab-row-t b { color: var(--ink-3); }
.kb-buy .cab-plan.is-off .cab-row-t small, .cab-sheet .cab-plan.is-off .cab-row-t small { color: var(--ink-2); }
.kb-pm-top { padding: 0 var(--cab-pad) 0.5rem calc(var(--cab-pad) + 22px + var(--s-3)); margin-top: -0.35rem; }

/* Предупреждение о потере дней — в герое рядом с выбором тарифа, жёлтое (предупреждение), а не акцентное */
.cab-alert.is-warn { width: min(100%, 34rem); margin-top: var(--s-2); text-align: left; background: color-mix(in srgb, var(--warn) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.cab-alert.is-warn svg { color: var(--warn); }
.cab-alert .kb-link { display: flex; margin-top: 2px; }

/* ==========================================================================
   14. Бонусы (referrals)
   ========================================================================== */

/* Лестница: названия не мельче 12 px; на самых узких экранах подпись только у выбранной ступени (имя узла остаётся для диктора) */
.lv-rail .lv-node b { font-size: 0.75rem; letter-spacing: -0.02em; }
@media (max-width: 359px) {
  .lv-rail .lv-node:not([aria-pressed='true']) b { visibility: hidden; } /* место сохраняется, имя узла — в aria-label */
  .lv-rail .lv-node.is-mine b::after { visibility: visible; }
  .lv-rail .lv-node { padding-bottom: 8px; }
}
/* ритм: лестница → карта и панель того же шага, что между остальными блоками (40 на телефоне, 56 на ноутбуке) */
.kb-b > .lv-rail + .lv-pair { margin-top: var(--s-4); }
@media (min-width: 1024px) { .kb-b > .lv-rail + .lv-pair { margin-top: var(--s-6); } }
.lv-scene { animation-duration: 0.38s; }

/* Металл светлых уровней: гравировка тёмная — читается на золоте, серебре, платине и бриллианте (≥ 4.5:1) */
.rt-silver .lv-brand, .rt-gold .lv-brand, .rt-platinum .lv-brand, .rt-diamond .lv-brand,
.rt-silver .lv-top, .rt-gold .lv-top, .rt-platinum .lv-top, .rt-diamond .lv-top { color: #1f1a0c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
.lv-brand { font-size: 0.75rem; letter-spacing: 0.18em; }

/* Метка «скоро» — не мельче 12 px */
.kb-soon { font-size: 0.75rem; letter-spacing: 0.06em; }
/* «Скоро»: плитки не обещают нажатие — без подъёма и обводки, нажатие по-прежнему отвечает сообщением */
.kb-tile[aria-disabled='true']::after { content: none; }
.kb-tile[aria-disabled='true'], .kb-tile[aria-disabled='true']:hover, .kb-tile[aria-disabled='true']:active { transform: none; cursor: default; box-shadow: var(--glass-edge), var(--glass-drop); }

/* Приглашение: ≥1280 в одну строку (QR · текст · поле · кнопка), 520–1279 — две строки, ≤519 — столбиком, QR в раскрывашке под кнопкой */
.cab-card.lv-invite { display: grid; align-items: center; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3) var(--s-5); padding: var(--cab-pad); }
.cab-card.lv-invite > .kb-qr { grid-column: 1; grid-row: 1 / span 2; }
.cab-card.lv-invite > .lv-invite-t { grid-column: 2 / -1; grid-row: 1; }
.cab-card.lv-invite > .cab-code { grid-column: 2; grid-row: 2; width: 100%; }
.cab-card.lv-invite > .btn { grid-column: 3; grid-row: 2; min-height: 48px; }
@media (min-width: 1280px) {
  .cab-card.lv-invite { grid-template-columns: auto minmax(0, 1fr) minmax(0, 20rem) auto; }
  .cab-card.lv-invite > .kb-qr { grid-row: 1; }
  .cab-card.lv-invite > .lv-invite-t { grid-column: 2; }
  .cab-card.lv-invite > .cab-code { grid-column: 3; grid-row: 1; }
  .cab-card.lv-invite > .btn { grid-column: 4; grid-row: 1; }
}
@media (max-width: 519px) {
  .cab-card.lv-invite { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .cab-card.lv-invite > .lv-invite-t, .cab-card.lv-invite > .cab-code, .cab-card.lv-invite > .btn, .cab-card.lv-invite > .lv-qrbox { grid-column: 1; grid-row: auto; }
  .cab-card.lv-invite > .btn { width: 100%; max-width: 28rem; justify-self: center; }
  .cab-card.lv-invite .lv-qrbox { margin-top: 0; }
}
/* адрес ссылки читается целиком: «Скопировать» в поле — только значок (имя у кнопки есть), главное действие — рядом */
.lv-invite .cab-code .btn { width: 40px; padding: 0; }
.lv-invite .cab-code .btn i { display: none; }
@media (pointer: coarse) { .lv-invite .cab-code .btn { width: 44px; } }

/* Полоса чисел: ≥560 равные ячейки, число над подписью; <560 — строки «подпись слева — число справа» */
.cab-card.kb-stats .cab-stat b { font-family: var(--font); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 559px) {
  .cab-card.kb-stats.n4 { grid-template-columns: minmax(0, 1fr); }
  .cab-card.kb-stats .cab-stat { grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; column-gap: var(--s-3); min-height: 60px; padding: 0.6rem var(--cab-pad); text-align: left; border-radius: 0; box-shadow: none; }
  .cab-card.kb-stats .cab-stat + .cab-stat { box-shadow: inset 0 1px 0 var(--cab-rule); }
  .cab-card.kb-stats .cab-stat small { order: -1; font-size: var(--t-sm); color: var(--ink-2); text-align: left; overflow-wrap: normal; }
  .cab-card.kb-stats .cab-stat b { justify-self: end; font-size: 1.1875rem; line-height: 1.1; white-space: nowrap; }
  .cab-card.kb-stats .cab-stat:first-child { border-radius: var(--cab-r) var(--cab-r) 0 0; }
  .cab-card.kb-stats .cab-stat:last-child { border-radius: 0 0 var(--cab-r) var(--cab-r); }
}

/* ==========================================================================
   15. Профиль (profile)
   ========================================================================== */

/* Две половины: на 861–1059 (боковое меню уже есть, полотно 610–790) — одна колонка; перенос внутри строки невозможен */
@media (min-width: 861px) and (max-width: 1059px) { .kb-row.n2.is-aside { --n: 1; max-width: 560px; margin-inline: auto; } }
.kb-half { container-type: inline-size; container-name: kbh; }
.nw { white-space: nowrap; }
.kb-half .ov-kv > div { min-height: 48px; align-items: center; }
.kb-half .ov-kv dt { flex: none; }
.kb-half .ov-kv dd { min-width: 0; overflow-wrap: anywhere; }
.kb-pays dd { white-space: nowrap; }
.kb-pays dt small { font-size: var(--t-xs); color: var(--ink-3); }
.kb-pays dt small::before { content: ' · '; }
@container kbh (max-width: 380px) {
  .kb-pays dt small { display: block; }
  .kb-pays dt small::before { content: none; }
}
/* верх обеих половин одной высоты — разделители строк стоят на одной линии */
.kb-bal-t { display: grid; align-content: center; gap: 4px; min-height: 76px; }
.kb-cap { font-family: var(--font); letter-spacing: normal; }
.kb-me .kb-name { font-family: var(--font); font-size: var(--t-lg); font-weight: 600; line-height: 1.3; letter-spacing: normal; overflow-wrap: anywhere; }
.kb-empty-t { color: var(--ink-2); font-size: var(--t-sm); }
.kb-quick { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Плитки помощи: один слот значка 48×48 у всех (клуб не выбивается), заголовки на одной линии */
.kb-row.is-help .kb-tile .kb-ic, .kb-row.is-help .kb-tile > img.kb-clubimg { width: 48px; height: 48px; margin: 0 0 0.3rem; }
.kb-row.is-help .kb-tile .kb-ic { display: grid; place-items: center; }
@media (min-width: 560px) {
  .kb-row.is-help > .kb-tile > :first-child { margin: 0 0 0.3rem; }
  a.kb-tile[target='_blank']::after { content: ''; position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; background: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M17 14v4.500a1.500 1.500 0 0 1-1.500 1.500h-10A1.500 1.500 0 0 1 4 18.500v-10A1.500 1.500 0 0 1 5.500 7H10' fill='none' stroke='%23000' stroke-width='1.7' 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 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M17 14v4.500a1.500 1.500 0 0 1-1.500 1.500h-10A1.500 1.500 0 0 1 4 18.500v-10A1.500 1.500 0 0 1 5.500 7H10' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
}
@media (max-width: 559px) {
  .kb-row.is-help > .kb-tile { min-height: 68px; }
  .kb-row.is-help > .kb-tile > :first-child { margin: 0; }
  .kb-row.is-help .kb-tile .kb-ic, .kb-row.is-help .kb-tile > img.kb-clubimg { margin: 0; }
}

/* ==========================================================================
   16. Настройки (settings)
   ========================================================================== */

/* Ноутбук: четыре группы 2×2 в той же колонке 1000 px — пара «подпись → значение» ≤ 520 px, страница с документами в 1440×900 */
@media (min-width: 1180px) {
  .kb-stack.w880 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
}
/* Длинное значение (почта, Telegram, ID) на узком экране — второй строкой под подписью, остаётся слева */
@media (max-width: 480px) {
  .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; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 359px) { .cab-row[role='switch'] .cab-row-t b { font-size: var(--t-sm); } }
/* группы входят по очереди (раньше — одним блоком, все строки разом) */
.cab-view.cab-v-settings.is-enter > .kb-stack, .cab-view.cab-v-settings > .kb-stack.rv-in { animation: none; }
.cab-v-settings.is-enter .kb-stack > .kb-list { animation: cab-rise 0.38s var(--ease) backwards; animation-delay: calc(var(--j, 0) * 50ms + 36ms); }
.kb-stack > .kb-list:nth-child(2) { --j: 1; } .kb-stack > .kb-list:nth-child(3) { --j: 2; } .kb-stack > .kb-list:nth-child(4) { --j: 3; }
@media (prefers-reduced-motion: reduce) { .cab-v-settings.is-enter .kb-stack > .kb-list { animation: none; } }

/* ==========================================================================
   17. Низкий экран и подводки (Подписка, Бонусы, Профиль, Настройки)
   ========================================================================== */
/* Телефон в альбомной ориентации: подводка скрыта, заголовок меньше — первая карточка и главное действие видны */
@media (max-height: 520px) and (orientation: landscape) {
  .cab-view.kb > .kb-hero .kb-lead { display: none; }
  .kb-h1.cab-h1 { font-size: 1.5rem; }
  .cab-view.kb { gap: 1.25rem; }
}
/* Профиль и настройки: подводка повторяет заголовок — на телефоне её нет, баланс и кнопка выше нижней панели */
@media (max-width: 559px) { .cab-v-profile .kb-lead, .cab-v-settings .kb-lead { display: none; } }
/* Ноутбук: профиль и настройки помещаются в 1440×900 (промежуток 56 → 44, низ 96 → 48) */
@media (min-width: 861px) {
  .cab-main:has(> .cab-v-profile), .cab-main:has(> .cab-v-settings) { padding-bottom: 2rem; }
  .cab-view.kb.cab-v-profile, .cab-view.kb.cab-v-settings { gap: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
  .kb-row.is-help > .kb-tile { min-height: 116px; }
  .cab-v-profile .kb-half .ov-kv > div { min-height: 46px; }
  .kb-row.is-help > .kb-tile small { min-height: 0; }
}

/* Низкий экран: сумма и поля компактнее — шторка пополнения помещается без прокрутки (после базовых правил .kb-amt) */
@media (max-height: 480px) {
  .kb-topf { gap: 10px; }
  .kb-amt { font-size: 1.75rem; padding-block: 0; }
  .cab-sheet .cab-opts.is-chips .cab-opt { min-height: 44px; }
  .cab-sheet .btn-lg { min-height: 48px; }
}

/* ==========================================================================
   18. Правки финишного ревью (раунд 12)
   ========================================================================== */

/* «Бонусы», «Ваша ссылка» 520–1279: QR слева на три строки, справа — текст, поле ссылки, кнопка. Раньше кнопка занимала колонку 3 и
   поле оставалось с остатком (на 540 px — одна буква). Поле читается целиком */
@media (min-width: 520px) and (max-width: 1279px) {
  .cab-card.lv-invite { grid-template-columns: auto minmax(0, 1fr); }
  .cab-card.lv-invite > .kb-qr { grid-column: 1; grid-row: 1 / span 3; }
  .cab-card.lv-invite > .lv-invite-t { grid-column: 2; grid-row: 1; }
  .cab-card.lv-invite > .cab-code { grid-column: 2; grid-row: 2; }
  .cab-card.lv-invite > .btn { grid-column: 2; grid-row: 3; width: 100%; max-width: 28rem; }
}

/* QR одного размера на «Подключении» и «Бонусах» (140 + поле рамки) */
.lv-invite .lv-qrbox > .kb-qr { padding: 14px; border-radius: 26px; }

/* «Обзор», «Пригласите друга» 620–1179: в поле ссылки «Скопировать» — только значок (имя у кнопки есть), ссылка читается целиком */
@media (min-width: 620px) and (max-width: 1179px) {
  .ov-invite .cab-code .btn { width: 44px; padding: 0; }
  .ov-invite .cab-code .btn i { display: none; }
}
@media (pointer: coarse) { .ov-invite .cab-code .btn { width: 44px; } }

/* «Трафик за неделю» <560: три ячейки не влезают в ряд — строки «подпись слева — число справа» (как стат-блоки) */
@media (max-width: 559px) {
  .ov-mini { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; padding-top: var(--s-3); }
  .ov-mini::before { display: none; }
  .ov-mini > div { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); padding: 0.65rem 0; min-height: 44px; border-top: 1px solid var(--cab-rule); }
  .ov-mini dt { font-size: var(--t-sm); color: var(--ink-2); min-height: 0; align-self: center; }
  .ov-mini dd { justify-self: end; text-align: right; align-self: center; }
  .ov-mini dd i { display: inline; }
  .ov-box .cab-row.ov-dev small span { white-space: nowrap; }
}

/* Нижняя панель (≤860): высота — из --tabs-h (cab-core.js), полка оплаты стоит ровно на 10 px выше панели */
@media (max-width: 860px) {
  .actbar { bottom: calc(var(--tabs-h, 67px) + 20px + env(safe-area-inset-bottom, 0px)); }
  /* фокус с клавиатуры не прячется под панелью (WCAG 2.4.11) */
  html { scroll-padding-bottom: calc(var(--tabs-h, 67px) + 34px + env(safe-area-inset-bottom, 0px)); }
  .cab-main { padding-bottom: calc(var(--tabs-h, 65px) + 38px + env(safe-area-inset-bottom, 0px) + 28px); }
  /* стекло плотнее: подписи на золотой карте «Бонусов» ≥ 4.5:1 (66 % давало 3.6) */
  :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) 80%, transparent);
  }
}
@media (max-width: 359px) {
  .cab-tab { font-size: 0.75rem; padding-inline: 0; }
  .cab-tab span { letter-spacing: -0.01em; }
}

/* Телефон в ландшафте (844×390) и любой низкий экран: панель 50 px, полка без подписи-контекста */
@media (max-width: 860px) and (max-height: 520px) {
  .cab-tabs { padding: 3px; max-width: 640px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .cab-tab { min-height: 44px; gap: 1px; padding: 4px 2px 3px; }
  .cab-tab svg { width: 18px; height: 18px; }
  .cab-ind { top: 3px; height: calc(100% - 6px); }
  .actbar { bottom: calc(var(--tabs-h, 50px) + 16px + env(safe-area-inset-bottom, 0px)); padding-block: 0.25rem; }
  .actbar-t small { display: none; }
  .actbar > .btn { min-height: 44px; }
  .cab-main { padding-bottom: calc(var(--tabs-h, 50px) + 16px + env(safe-area-inset-bottom, 0px) + 20px); }
  html { scroll-padding-bottom: calc(var(--tabs-h, 50px) + 28px + env(safe-area-inset-bottom, 0px)); }
}

/* Оформление на ноутбуке (≥1100): итог не плавает поверх строк карточки — полка в потоке прямо под карточкой оплаты */
@media (min-width: 1100px) {
  .kb-row.is-buy { grid-template-rows: auto 1fr; }
  .kb-row.is-buy > :nth-child(1) { grid-row: 1 / span 2; }
  .kb-row.is-buy > :nth-child(2) { align-self: start; }
  .kb-row.is-buy > .kb-buy.is-pay { padding-bottom: var(--cab-pad); }
  .kb-row.is-buy > .actbar { position: static; grid-column: 2; grid-row: 2; align-self: start; justify-self: stretch; width: auto; max-width: none; margin: 0; }
}

/* Шапка кабинета: колокольчик, тема, язык — 40 px на мыши, 44 на касании; логотип-ссылка на касании не меньше 44 */
.cab-bar .btn-icon, .cab-bar .btn-sm, .cab-bar .cab-lang { min-height: 40px; }
@media (pointer: coarse) {
  .cab-bar .btn-icon, .cab-bar .btn-sm, .cab-bar .cab-lang { min-height: 44px; }
  .cab-brand { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Малые кнопки в строках таблицы подписки — одной ширины и на телефоне (7.5rem) */
@media (max-width: 719px) { .kb-table.is-spec .btn { min-width: 7.5rem; } }

/* Профиль на телефоне: кнопка «Пополнить баланс» стоит сразу под суммой, а не в самом низу карточки */
.kb-foot.is-top { margin-top: 0; padding-top: 0; min-height: 0; margin-bottom: var(--s-3); }

/* «Подключение» ≥1180: «Инструкции» и «Поддержка» стоят на той же сетке из шести колонок, что и платформы выше (по три колонки каждая) */
@media (min-width: 1180px) {
  .kb-row.n2.is-tiles.w880 { --n: 6; max-width: none; margin-top: calc(var(--s-3) - clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem)); }
  .kb-row.n2.is-tiles.w880 > .kb-tile { grid-column: span 3; }
}
/* Боковое меню (≥861): колокольчик, тема и язык — по шкале 40 (мышь) / 44 (касание), раньше 46 */
@media (min-width: 861px) {
  .cab-bar .cab-tools .btn { height: 40px; min-height: 40px; }
}
@media (min-width: 861px) and (pointer: coarse) { .cab-bar .cab-tools .btn { height: 44px; min-height: 44px; } }

/* Надпись TEGRIDY в светлой теме темнее (владелец 2026-10-12): тот же металл, поверх затемняющий фильтр; тёмная тема не затронута */
:root[data-theme='light'] .brand-word { filter: brightness(0.5) contrast(1.25); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .brand-word { filter: brightness(0.5) contrast(1.25); } }