/* Шрифт используется только для названия бренда на главном экране. */
@font-face {
  font-family: "Muller ExtraBold";
  src: url("/fonts/53e59-muller-extrabold-demo.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Тёмная бирюзовая тема — как в референсе. Цвета фиксированные, а не из темы
   Telegram: у сервиса должен быть узнаваемый вид в любом клиенте. */
:root {
  --card:    rgba(255,255,255,.045);
  --card-br: rgba(255,255,255,.09);
  --text:    #ffffff;
  --muted:   #8e9bab;
  --accent:  #2fe0d0;
  --danger:  #ff6b5e;
  --radius:  22px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Матовое стекло: элемент полупрозрачный и размывает фон под собой, поэтому
   зелёная подложка просвечивает. Размытие умеренное — на телефонах каждый
   такой слой стоит производительности. */
.card, .plan, .back, .copy-box, .big.outline {
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
}

body {
  margin: 0;
  background: linear-gradient(135deg, #081d08 0%, #006400 50%, #081d08 100%);
  color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

/* мягкое свечение снизу, как в референсе */
.glow {
  position: fixed; inset: auto -20% -30% -20%; height: 70vh; z-index: 0;
  background: radial-gradient(60% 60% at 50% 100%, rgba(5, 192, 5, 0.726), transparent 70%);
  pointer-events: none;
}

/* мягкое свечение снизу, как в референсе */
.glow {
  position: fixed; inset: auto -20% -30% -20%; height: 70vh; z-index: 0;
  background: radial-gradient(60% 60% at 50% 100%, rgba(47,224,208,.28), transparent 70%);
  pointer-events: none;
}

/* Ширина колонки живёт в одной переменной: её делят экран (.app), общий
   слой с шапкой и виджетом (.hm-shell) и подложка с видео. Раньше 520px
   было прописано в трёх местах, и они разъезжались. */
:root { --col: 520px; }
@media (min-width:  760px) { :root { --col: 680px; } }
@media (min-width: 1040px) { :root { --col: min(1120px, calc(100vw - 64px)); } }

.app {
  position: relative; z-index: 1;
  max-width: var(--col); margin: 0 auto;
  padding: 14px 16px calc(32px + env(safe-area-inset-bottom));
}

.view { animation: in .24s ease; }
.view.hidden { display: none; }
@keyframes in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ── заголовки ── */
.head { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.head h1 { font-size: 20px; font-weight: 700; margin: 0; }
.back {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--card); border: 1px solid var(--card-br); color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.lead { color: var(--muted); font-size: 14px; margin: -6px 0 14px; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.fineprint { color: var(--muted); font-size: 12px; text-align: center; margin-top: 16px; }
.fineprint a { color: var(--accent); text-decoration: none; }

/* ── крупные кнопки ── */
.big {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 17px; margin-bottom: 12px;
  border-radius: 18px; border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 16px; font-weight: 650; cursor: pointer;
  transition: transform .1s, opacity .15s;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.big:active { 
  transform: scale(.985); 
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.big.primary { 
  background: rgba(0, 100, 0, 0.2); /* Темно-зеленый с прозрачностью */
  color: #ffffff;
  border: 1px solid rgba(0, 100, 0, 0.3);
}
.big.outline { 
  background: transparent; 
  border-color: #05a31f; /* Темно-зеленый с прозрачностью */
  color: #05a31f;
}
/* ── иконки ──
   SVG, вставленный через <img>, живёт в своём документе и НЕ подхватывает
   currentColor — получаются чёрные значки на тёмном фоне. Поэтому рисуем их
   маской: сама иконка задаёт форму, а цвет берётся от текста рядом.
   Использование:  <i class="i" style="--u:url(/icons/card.svg)"></i>          */
.i {
  display: inline-block; flex: none;
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--u) center / contain no-repeat;
          mask: var(--u) center / contain no-repeat;
}
/* ── карточки ── */
.card {
  background: var(--card); border: 1px solid var(--card-br);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.card-h { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

.copy-box {
  padding: 14px; border-radius: 14px; background: rgba(255,255,255,.05);
  border: 1px solid var(--card-br); color: var(--accent);
  font-size: 13px; word-break: break-all; cursor: pointer; margin-bottom: 12px;
}
.copy-box:active { background: rgba(255,255,255,.1); }

.qr-wrap { text-align: center; margin-top: 12px; }
.qr-wrap img { width: 200px; height: 200px; border-radius: 16px; background: #fff; padding: 10px; }

/* ── инструкция ── */
.os-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.os {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--card-br);
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.os.active { background: var(--accent); border-color: var(--accent); color: #04211f; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.steps li { color: var(--muted); font-size: 14px; }
.steps b { color: var(--text); }

/* ── тарифы ── */
.plans { display: grid; gap: 12px; }
.plan {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px; border-radius: 18px; border: 1px solid var(--card-br);
  background: var(--card); cursor: pointer; transition: transform .1s, border-color .15s;
}
.plan:active { transform: scale(.99); }
.plan.best { border-color: var(--accent); background: linear-gradient(180deg, rgba(47,224,208,.12), transparent); }
.plan .t { font-weight: 700; font-size: 17px; }
.plan .s { font-size: 12px; color: var(--muted); margin-top: 3px; }
.plan .p { font-size: 21px; font-weight: 800; white-space: nowrap; }
.tag { font-size: 10px; font-weight: 800; text-transform: uppercase; background: var(--accent); color: #04211f; padding: 3px 8px; border-radius: 7px; margin-left: 7px; vertical-align: 2px; }

/* ── окно с ответом ──
   Матовое стекло, как у карточек: окно полупрозрачное и размывает то, что под
   ним, поэтому зелёный фон просвечивает и приложение выглядит цельным.
   Затемнение подложки лёгкое — иначе цвет пропадает и стекло не читается. */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: fade .18s ease;
}
.modal.hidden { display: none; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal-box {
  position: relative; width: 100%; max-width: 340px;
  background: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
          backdrop-filter: blur(26px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px; padding: 18px 18px 20px;
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
  animation: pop .2s ease;
}
@keyframes pop { from { transform: scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
.modal-box h3 {
  margin: 0 0 8px; font-size: 17px; font-weight: 700;
  padding-right: 28px; line-height: 1.3;
}
.modal-box p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.modal-x {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.09); border: 0;
  color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer;
}

/* На светлых экранах окно читается наоборот: тёмный текст на белом. Стекло
   здесь не годится — под ним светлый фон, и серый текст на нём пропадает. */
body.light .modal { background: rgba(22,24,28,.22); }
body.light .modal-box {
  background: #fff; color: var(--hm-ink);
  border-color: rgba(22,24,28,.07);
  box-shadow: 0 18px 44px rgba(22,24,28,.22);
}
body.light .modal-box p { color: var(--hm-muted); }
body.light .modal-x { background: rgba(22,24,28,.06); color: var(--hm-muted); }

/* QR открывается в этом же окне. Белая подложка обязательна: код должен
   читаться камерой, а окно на светлой теме и так белое, на тёмной — нет. */
.modal-img {
  display: block; width: 220px; max-width: 100%; margin: 4px auto 12px;
  border-radius: 16px; background: #fff; padding: 10px;
}
.modal-img[hidden] { display: none; }

/* Окно только с кодом: ни заголовка, ни подписи, ни крестика — сам QR и
   есть всё содержимое. Закрывается нажатием в любом месте, поэтому и на
   самой картинке курсор-указатель. */
.modal.bare .modal-box {
  width: max-content; max-width: 100%; padding: 12px;
  cursor: pointer;
}
.modal.bare .modal-x,
.modal-box h3:empty,
.modal-box p:empty { display: none; }
.modal.bare .modal-img { margin: 0; }

/* ── список документов: значок в квадрате, название, стрелка «наружу» ── */
/* Отрицательные поля — чтобы подсветка строки при наведении выходила за
   текст к краям панели, а не обрубалась по нему. */
.doclinks { display: grid; gap: 2px; margin: 0 -6px; }
.doclinks a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 6px; border-radius: 14px;
  color: var(--hm-ink); text-decoration: none;
  transition: background .15s;
}
.doclinks a:hover  { background: rgba(255,255,255,.45); }
.doclinks a:active { background: rgba(22,24,28,.05); }
.doclinks b { flex: 1; font-weight: 500; font-size: 14px; }
.doclinks .di {
  width: 34px; height: 34px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(var(--hm-accent-rgb),.13); color: var(--hm-accent);
}
.doclinks .di .i { width: 18px; height: 18px; }
.doclinks .ext { width: 16px; height: 16px; color: var(--hm-muted); }


/* ── переход между страницами ── */
/* Документы — отдельные страницы, а не экраны приложения, поэтому переход
   к ним и обратно это настоящая перезагрузка: белая вспышка и content,
   возникающий рывком. Лечится двумя слоями.

   Первый: там, где браузер умеет переходы между документами (Chromium и
   свежий Safari), он сам делает кросс-фейд — достаточно разрешить его
   одной строкой. Обе страницы тянут этот же файл, так что разрешение
   действует в обе стороны. Не умеет — просто ничего не произойдёт.

   Второй работает везде — появление содержимого, см. .doc ниже. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}

/* ── юридические документы ── */
/* Отдельные страницы: оферта, политика, возврат, контакты. Светлые, как всё
   приложение, но без видео и стекла — это длинный текст, который читают
   подряд, в том числе модератор платёжной системы. Основной текст не серый,
   а чуть смягчённый чернильный: серым набирать документ на страницу нельзя. */
body.doc-page { background: var(--hm-bg); color: var(--hm-ink); }

.doc {
  max-width: 640px; margin: 0 auto;
  padding: 24px 20px 64px; position: relative; z-index: 1;
  /* Второй слой перехода: текст выезжает так же, как блоки на экранах
     приложения. Работает и там, где переходов между документами нет. */
  animation: hs-in .34s cubic-bezier(.22,1,.36,1) both;
}
.doc h1 {
  margin: 0 0 6px; font-size: clamp(26px, 6.4vw, 34px); font-weight: 600;
  letter-spacing: -.6px; line-height: 1.15;
}
.doc h2 { margin: 30px 0 8px; font-size: 16px; font-weight: 600; }
.doc p, .doc li { color: #3d4147; font-size: 15px; line-height: 1.6; }
.doc ul { margin: 8px 0; padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc b { color: var(--hm-ink); font-weight: 600; }
.doc a { color: var(--hm-accent); text-underline-offset: 2px; }
.doc .updated { margin: 0 0 28px; font-size: 13px; color: var(--hm-muted); }

/* Ссылка «назад» переопределяет круглую кнопку из общих стилей. */
.doc a.back {
  display: inline-block; width: auto; height: auto;
  border-radius: 999px; padding: 9px 16px; margin-bottom: 20px;
  font-size: 14px; line-height: 1; text-decoration: none;
  background: #fff; color: var(--hm-ink);
  border: 1px solid rgba(22,24,28,.07);
  box-shadow: 0 1px 2px rgba(22,24,28,.05);
}
.doc a.back:hover { background: rgba(255,255,255,.7); }

/* ── история платежей ── */


.hist { display: grid; gap: 8px; }

.pay {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--card-br);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
}

/* Плитка тарифа: цвет приходит из --c, поэтому иконка одна на все тарифы */
.pay-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--c);
}
.pay-ic .i { width: 21px; height: 21px; }

.pay-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pay-main b { font-size: 15px; font-weight: 650; }
.pay-sub { font-size: 12px; color: var(--muted); }

.pay-amt { font-size: 16px; font-weight: 800; white-space: nowrap; color: var(--accent); }

/* Пустой экран: без него человек видит просто пустоту и думает, что сломалось. */
.empty {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 46px 22px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--card-br);
}
.empty .i { width: 34px; height: 34px; color: var(--muted); opacity: .65; }
.empty b { font-size: 16px; }
.empty p { margin: 0; color: var(--muted); font-size: 13px; }


:root {
  --hm-bg:     #f1f0ee;
  --hm-ink:    #16181c;
  --hm-muted:  #8d9096;
  /* Акцент: кнопки, ссылки, выбранный срок. Цвет снят с кофты девушки в
     кадре. Три переменные, а не одна: rgba-подложкам нужны компоненты,
     а наведению — тон посветлее. Держать это числами по месту нельзя —
     раньше так и было, и половина элементов осталась бы прежнего цвета. */
  --hm-accent:     #404145;
  --hm-accent-rgb: 64, 65, 69;
  --hm-accent-alt: #55575d;
}

body.light { background: var(--hm-bg); }
body.light .glow { display: none; }

/* Отменяем поля .app, чтобы экран шёл во всю ширину. */
.hm {
    margin: -14px -16px calc(-32px - env(safe-area-inset-bottom));
  min-height: 100vh;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  /* Прозрачный: под ним закреплённое видео, а вуаль поверх него рисует
     общий слой body::after — см. блок «вуаль» ниже. */
  color: var(--hm-ink);
    padding: calc(10px + env(safe-area-inset-top)) 12px
           calc(10px + env(safe-area-inset-bottom));
}

/* Видео или GIF занимает весь экран без общего размытия. */
/* Фон лежит вне экранов и закреплён: не исчезает при переходе между ними.
   Показывается только на светлых экранах — на тёмных он бы просвечивал
   сквозь полупрозрачные карточки и мешал читать. */
.hm-bg {
  position: fixed; top: 0; bottom: 0; z-index: 0;
  /* Ширина ролика, а не окна. Кадр 720×1280, то есть при высоте окна его
     естественная ширина — 9/16 от неё; шире он уже тянется, потому что
     object-fit: cover увеличивает его и обрезает по высоте. На широком
     окне это давало кусок лица во весь экран.

     Нижняя граница 420px — чтобы в низком окне блок не сжался в полоску,
     там небольшой кроп лучше. Сверху ограничен колонкой и шириной окна,
     поэтому на телефоне выходит ровно 100%, как было. */
  left: 50%; transform: translateX(-50%);
  width: min(100%, var(--col), max(420px, 100vh * 9 / 16));
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  /* Края растворяем, иначе там, где кадр кончается, идёт вертикальная
     черта: белая стена в ролике светлее фона страницы. На телефоне маска
     упирается в края экрана и не видна. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.light .hm-bg { opacity: 1; }
/* Запасная гифка. Класс ставится из разметки, только если видео не завелось:
   пропиши её фоном безусловно — браузер скачает все 15 МБ даже тогда,
   когда поверх играет видео и гифки не видно. */
.hm-bg.fallback { background: url(/icons/background.gif) center / cover no-repeat; }
.hm-bg video, .hm-bg img {
  position: relative; z-index: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}


/* ── верхняя панель ── */
.hm-bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* Заливку, кромку и тень даёт общий рецепт стекла ниже по файлу — здесь
   только форма. Раньше тут стояли свой фон и нулевая тень: оба правила
   перебивались, но продолжали числиться живыми. */
.hm-brand {
  display: flex; align-items: center;
  border-radius: 999px;
  padding: 10px 17px;
}
.hm-name {
  font-family: "Muller ExtraBold", sans-serif;
  font-size: 16px; font-weight: 800; letter-spacing: -.2px;
}
.hm-go svg {
  width: 19px; height: 19px; fill: none;
  stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Кнопка «Menu +». Плюс поворачивается в крестик при открытии. */
.menu-toggle {
  position: relative; z-index: 42;
  height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--hm-ink); cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600;
}
.menu-word { line-height: 1; }

.menu-plus {
  position: relative; width: 14px; height: 14px; flex: none;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.menu-plus::before,
.menu-plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; border-radius: 2px;
}
.menu-plus::before { width: 14px; height: 2px; }   /* горизонталь */
.menu-plus::after  { width: 2px;  height: 14px; }  /* вертикаль  */
/* Плюс плавно поворачивается в крестик. Старые правила для гамбургера здесь
   не используются: они конфликтовали с текущей разметкой «Menu +». */
.menu-toggle.open .menu-plus { transform: rotate(135deg); }

/* Ловит нажатия мимо карточки. Затемнение лёгкое: панель небольшая, и
   плотная заливка на весь экран смотрелась бы тяжелее самого меню. */
.menu-backdrop {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(16,18,20,.18);
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease, visibility .24s ease;
}
.menu-backdrop.open { opacity: 1; visibility: visible; }

/* ═══ Меню-пузырь ═══
   Небольшая карточка того же материала, что нижний виджет с подпиской.
   Выпрыгивает из-под кнопки и туда же схлопывается — за это отвечает
   transform-origin в правом верхнем углу.                              */
.bubble-menu {
  position: absolute; z-index: 40;
  --pill-step: .04s;
  top: calc(62px + env(safe-area-inset-top));
  right: 12px;
  width: min(230px, calc(100vw - 32px));
  padding: 8px;
  border-radius: 24px;

  /* Заливка плотная. Раньше в середине градиента было .24, и расчёт шёл на
     backdrop-filter: он размоет то, что под панелью. Но размытие не всегда
     доезжает — на WebKit правило со ссылкой на SVG-фильтр отбрасывается
     вместе с размытием, — и тогда сквозь 24% панель читается насквозь:
     поверх пунктов меню видно заголовок и текст страницы.
     Меню — всплывающая панель, ей важнее читаемость, чем прозрачность,
     поэтому она больше не зависит от того, сработало размытие или нет. */
  background: linear-gradient(180deg,
                rgba(255,255,255,.95) 0%,
                rgba(255,255,255,.90) 52%,
                rgba(255,255,255,.93) 100%);
  border: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.55);
          backdrop-filter: blur(18px) saturate(1.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 14px 38px rgba(22,24,28,.20);

    transform-origin: calc(100% - 20px) 0;
  transform: translate3d(8px,-10px,0) scale(.92);
  opacity: 0; visibility: hidden; pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform .24s cubic-bezier(.4,0,.2,1),
    opacity .18s ease,
    visibility 0s linear .24s;
}
/* Меню раскрывается из правого верхнего угла без рывка и мерцания. */
.bubble-menu.open {
  transform: translate3d(0,0,0) scale(1);
  opacity: 1; visibility: visible; pointer-events: auto;
  transition:
    transform .34s cubic-bezier(.16,1,.3,1),
    opacity .2s ease,
    visibility 0s linear 0s;
}

.pill-cap {
  font-size: 12px; font-weight: 600; color: var(--hm-muted);
  padding: 7px 11px 9px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(22,24,28,.08);
  opacity: 0;
  transition: opacity .12s ease;
}
.bubble-menu.open .pill-cap { opacity: 1; transition-delay: .1s; }
.pill-cap.off { color: var(--hm-accent); }

.pill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

/* Строки плоские: стекло даёт сама карточка. */
.pill-link {
  width: 100%; padding: 11px 11px; border: 0; border-radius: 15px;
  display: flex; align-items: center;
  background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--hm-ink);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .12s ease, transform .12s ease, background .15s ease;
}
.bubble-menu.open .pill-link {
  opacity: 1; transform: none;
  transition: opacity .26s ease, transform .3s cubic-bezier(.2,.8,.2,1),
              background .15s ease;
}
.bubble-menu.open li:nth-child(1) .pill-link { transition-delay: calc(var(--pill-step) * 0 + .1s); }
.bubble-menu.open li:nth-child(2) .pill-link { transition-delay: calc(var(--pill-step) * 1 + .1s); }
.bubble-menu.open li:nth-child(3) .pill-link { transition-delay: calc(var(--pill-step) * 2 + .1s); }
.bubble-menu.open li:nth-child(4) .pill-link { transition-delay: calc(var(--pill-step) * 3 + .1s); }
.bubble-menu.open li:nth-child(5) .pill-link { transition-delay: calc(var(--pill-step) * 4 + .1s); }
.bubble-menu.open li:nth-child(6) .pill-link { transition-delay: calc(var(--pill-step) * 5 + .1s); }

.pill-label { display: inline-block; }

.pill-link.active { background: rgba(var(--hm-accent-rgb),.09); color: var(--hm-accent); }
.pill-link:active { background: rgba(22,24,28,.07); }

/* Не отключаем вертикальную прокрутку: исчезновение полосы прокрутки
   сдвигало по горизонтали и кнопку, и раскрытую панель. */
body.menu-open { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
  .bubble-menu, .pill-link, .pill-cap {
    transition-duration: .01s !important; transition-delay: 0s !important;
  }
}

/* Пространство под изображение остаётся в потоке, а матовое пятно теперь
   рисуется фоном всей главной страницы в .hm. */


/* ── карточка покупки ── */
/* Карточка — то же стекло, но толще: она крупная, и сквозь неё не должно
   просвечивать видео, иначе цена станет нечитаемой. */
.hm-buy {
  margin-top: -26px; position: relative; z-index: 2;
  border-radius: 28px; padding: 18px 14px 16px;
  background: linear-gradient(180deg,
                rgba(255,255,255,.78) 0%,
                rgba(255,255,255,.62) 100%);
  border: 1px solid var(--g-edge);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
          backdrop-filter: blur(26px) saturate(1.5);
  box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
    0 -2px 30px rgba(22,24,28,.10);
}
.hm-buy-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hm-cap   { font-size: 13px; color: var(--hm-muted); margin-bottom: 2px; }
.hm-price { font-size: 40px; font-weight: 500; letter-spacing: -1.2px; line-height: 1.05; }
.hm-meta  { text-align: right; padding-top: 4px; }
.hm-days  { font-size: 15px; font-weight: 700; }
.hm-dev   { font-size: 13px; color: var(--hm-muted); margin-top: 2px; }

/* ── выбор срока ── */
/* Четыре пилюли всегда в одну строку. На телефоне это тесно: на каждую
   выходит около 75 px, поэтому ширину отвоёвываем везде, где можно —
   у зазоров здесь и у полей самой карточки. Надписи в пилюлях сокращённые
   («3 мес» вместо «3 месяца»), иначе текст упирается в края; сокращает их
   renderBuyCard, полное название приходит с сервера. */
.hm-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin: 16px 0 12px;
}
/* Фон, рамка и тени задаются ниже, в блоке «Стекло» — здесь только форма. */
.hm-tab {
  /* min-width: 0 — чтобы длинная надпись не растягивала свою колонку шире
     соседней: у элементов сетки минимальная ширина по умолчанию равна
     содержимому, и «6 месяцев» перетягивал бы одеяло на себя. */
  min-width: 0;
  padding: 13px 4px; border-radius: 999px; cursor: pointer;
  color: var(--hm-ink); font-size: 13px; font-weight: 500;
  font-family: inherit; white-space: nowrap; text-align: center;
}
.hm-tab.on { color: var(--hm-accent); font-weight: 600; }

/* ── кнопка покупки ── */
.hm-go {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-radius: 999px; cursor: pointer;
  color: var(--hm-accent); font-size: 16px; font-weight: 600; font-family: inherit;
}

.hm-state { margin: 12px 2px 0; font-size: 13px; color: var(--hm-muted); text-align: center; }
.hm-state.on  { color: #2e9e63; }
.hm-state.off { color: var(--hm-accent); }

/* ═══ Стекло ═══
   Всё рисуется градиентами на самом элементе, без псевдоэлементов: слой с
   z-index:-1 внутри элемента с backdrop-filter прячется за его же фоном —
   именно поэтому блик было не видно.

   Стекло держится на трёх вещах, и лишнее только мешает:
     1. заливка светлее сверху, чем снизу, — свет падает сверху;
     2. одна тонкая светлая линия по верхней кромке (inset 0 1px 0);
     3. мягкая тень снизу, которая отрывает элемент от фона.
   Правится в одном месте — через переменные ниже.                        */
.hm, .hm-shell {
  color: var(--hm-ink);
  --g-fill:  linear-gradient(180deg,
               rgba(255,255,255,.58) 0%,
               rgba(255,255,255,.22) 45%,
               rgba(255,255,255,.34) 100%);
  --g-edge:  rgba(255,255,255,.55);
  --g-blur:  blur(18px) saturate(1.4);
  --g-shade: inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 -1px 0 rgba(255,255,255,.22),
             0 6px 18px rgba(22,24,28,.10);
}

/* Пунктов меню здесь намеренно нет: они лежат внутри стеклянной панели,
   и стекло на стекле даёт мутную кашу. Внутри панели строки плоские. */
.hm-brand,
.menu-toggle,
.hm-tab,
.hm-go,
.sheet-alt {
  position: relative;
  background: var(--g-fill);
  border: 1px solid var(--g-edge);
  -webkit-backdrop-filter: var(--g-blur);
          backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shade);
  transition: transform .14s ease, background .2s ease,
              box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

/* Выбранный срок: то же стекло, но с подкрасом. */
.hm-tab.on {
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(var(--hm-accent-rgb),.10));
  border-color: rgba(var(--hm-accent-rgb),.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 6px 18px rgba(var(--hm-accent-rgb),.14);
}

/* Нажатие: стекло проседает — верхний блик гаснет, тень уходит внутрь. */
.menu-toggle:active,
.hm-tab:active,
.hm-go:active,
.sheet-alt:active {
  transform: scale(.97);
  box-shadow:
    inset 0 2px 6px rgba(22,24,28,.12),
    0 2px 8px rgba(22,24,28,.08);
}

/* Старые браузеры без backdrop-filter показали бы почти прозрачные
   плашки с нечитаемым текстом — им отдаём плотную заливку. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hm-brand,
  .menu-toggle,
  .hm-tab,
  .hm-go,
  .hm-buy,
  .sheet,
  .sheet-alt,
  .pill-link { background: rgba(255,255,255,.94); }
}

/* Узкие экраны: три срока в строку начинают ломаться */
@media (max-width: 360px) {
  .hm-price { font-size: 34px; }
}

/* ═══ Жидкое стекло ═══
   Настоящее преломление (SVG-фильтр в backdrop-filter) умеет только Chromium.
   WebKit — а значит все айфоны — его не принимает, и обойти это нельзя.
   Поэтому основа работает везде и собрана из того, что поддерживают все:

     1. кайма с расхождением цвета — тёплая с одного края, холодная с другого;
        это и читается как преломление, ради которого затевался фильтр;
     2. светлая дуга по верхней кромке — блик;
     3. внутреннее свечение у краёв — толщина стекла.                        */
/* position: relative нужен только кнопкам — чтобы кайма из ::before
   держалась за них. Карточке и меню его ставить НЕЛЬЗЯ: у карточки он
   уже свой, а у меню position: fixed, и перебив его мы роняем меню
   из закреплённого положения в поток — оно уезжает вниз. */
.hm-brand,
.menu-toggle,
.hm-tab,
.hm-go,
.sheet-alt,
.sheet,
#view-history .pay-ic {
  position: relative;
}
.hm-brand,
.menu-toggle,
.hm-tab,
.hm-go,
.hm-buy,
.bubble-menu,
.sheet-alt,
.sheet,
#view-history .pay-ic {
  border-color: transparent;
}

.hm-brand::before,
.menu-toggle::before,
.hm-tab::before,
.hm-go::before,
.hm-buy::before,
.bubble-menu::before,
.sheet-alt::before,
.sheet::before,
#view-history .pay-ic::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.4px; pointer-events: none;
  /* Кайма нейтральная: от белого блика к мягкой серой тени.
     Раньше концы были тёплый и холодный — так преломление подделывается
     расхождением цвета. Но у нас оно и по-настоящему есть в Chromium, а на
     остальных движках цветные концы читались не как стекло, а как оранжевая
     полоса слева и синяя справа. Перепад светлоты даёт ту же толщину края,
     не внося чужой цвет. */
  background: linear-gradient(142deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.98) 34%,
    rgba(255,255,255,.48) 56%,
    rgba(22,24,28,.16) 100%);
  /* Приём «градиентная рамка»: заливка видна только в кольце по краю —
     внутренность вырезается второй маской. Работает и в WebKit. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Внутреннее свечение у кромки — ощущение толщины, а не наклейки. */
.hm-buy, .bubble-menu, .sheet {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 18px rgba(255,255,255,.35),
    0 14px 38px rgba(22,24,28,.20);
}
.hm-brand,
.menu-toggle,
.hm-tab,
.hm-go {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 12px rgba(255,255,255,.30),
    0 6px 18px rgba(22,24,28,.12);
}

/* Выбранный срок теперь узнаётся по цвету каймы: обычная рамка у него
   прозрачная, как у всех стеклянных элементов, и красной границы нет. */
.hm-tab.on::before {
  background: linear-gradient(142deg,
    rgba(var(--hm-accent-rgb),.62) 0%,
    rgba(255,255,255,.95) 40%,
    rgba(var(--hm-accent-rgb),.55) 100%);
}

/* Где браузер умеет — добавляем поверх настоящее преломление.
   Класс ставит app.js после проверки поддержки. Размытие в цепочке
   оставлено: чистое преломление даёт прозрачный центр, и тёмный текст
   поверх движущегося видео становится нечитаемым. */
body.glass-liquid .hm-buy,
body.glass-liquid .sheet,
body.glass-liquid .bubble-menu,
body.glass-liquid .hm-brand,
body.glass-liquid .menu-toggle,
body.glass-liquid .hm-tab,
body.glass-liquid .hm-go,
body.glass-liquid .sheet-alt {
  -webkit-backdrop-filter: var(--glass-filter) blur(7px) saturate(1.45);
          backdrop-filter: var(--glass-filter) blur(7px) saturate(1.45);
}

/* ═══ Движение нижних кнопок ═══
   Намеренно скупо. Кнопки стеклянные, и любое заметное движение на них
   сразу читается как мельтешение: блик, подпрыгивание и разбег по времени
   спорили и с самим стеклом, и друг с другом. Осталось три вещи, каждая
   привязана к действию человека или к появлению экрана.               */

/* Появление — только прозрачность, без сдвигов и разбега. */
@keyframes hm-in { from { opacity: 0; } to { opacity: 1; } }
.hm-tabs .hm-tab,
.hm-go { animation: hm-in .32s ease both; }
.hm-go { animation-delay: .06s; }

/* Смена тарифа: цифры не проявляются, а доезжают до нового значения —
   этим занимается countTo() в app.js. Проявление поверх счёта только
   смазывало бы цифры. */

/* Реакция на нажатие: стрелка чуть подаётся вперёд. */
.hm-go svg { transition: transform .18s cubic-bezier(.22,1,.36,1); }
.hm-go:active svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .hm-tabs .hm-tab, .hm-go { animation: none; }
}

/* Выбранный срок отличается только каймой и цветом текста.
   Своя тень и розовый подтон в заливке давали ощущение вдавленности —
   кнопка выглядела темнее соседних, будто выключена. */
.hm-tab.on {
  background: var(--g-fill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 12px rgba(255,255,255,.30),
    0 6px 18px rgba(22,24,28,.12);
}

/* Кнопки виджета: сквозь них должно быть видно видео, но без черноты.

   Плотную заливку тут ставить нельзя — она просто закрасит фон. Вместо
   этого осветляем то, что просвечивает: brightness в цепочке фильтра
   поднимает яркость подложки до того, как она смешается с заливкой.
   Тёмный силуэт за стеклом становится светло-серым, но остаётся видимым.

   Тень убавлена: четыре пилюли рядом складывали свои тени в сплошную
   серую полосу под собой. */
.hm-tab,
.hm-go,
.hm-tab.on,
.sheet-alt {
  background: linear-gradient(180deg,
                rgba(255,255,255,.46) 0%,
                rgba(255,255,255,.26) 50%,
                rgba(255,255,255,.34) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.25) brightness(1.22);
          backdrop-filter: blur(12px) saturate(1.25) brightness(1.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 12px rgba(255,255,255,.32),
    0 2px 8px rgba(22,24,28,.07);
}

/* Там, где работает преломление, добавляем осветление в ту же цепочку. */
body.glass-liquid .hm-tab,
body.glass-liquid .hm-go,
body.glass-liquid .sheet-alt {
  -webkit-backdrop-filter: var(--glass-filter) blur(8px) saturate(1.25) brightness(1.22);
          backdrop-filter: var(--glass-filter) blur(8px) saturate(1.25) brightness(1.22);
}

/* Крупной карточке «Друзей» — своя строка: в общей цепочке выше нет
   brightness, а она часто накрывает тёмный кусок кадра. Без осветления
   подложки низ экрана уходил в серое. */
body.glass-liquid .sheet {
  -webkit-backdrop-filter: var(--glass-filter) blur(10px) saturate(1.3) brightness(1.22);
          backdrop-filter: var(--glass-filter) blur(10px) saturate(1.3) brightness(1.22);
}

/* ═══════════════════════════════════════════════════════════════════
   ИСТОРИЯ ПЛАТЕЖЕЙ

   Тот же светлый слой поверх видео, что и на главной. От референса взята
   раскладка и ритм, но не палитра: там светлый текст на тёмном кадре,
   а у нас кадр светлый — белые буквы на нём просто исчезли бы.

   Появление ступенчатое: заголовок, потом сводка, потом строки одна за
   другой. Задержки в --d, считаются от порядкового номера.
   ═══════════════════════════════════════════════════════════════════ */

#view-history { gap: 0; }


#view-history .hm-brand { padding-left: 10px; }

@keyframes hs-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hs-title, .hs-find, .hist .hgrp, .hist .empty {
  animation: hs-in .34s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--d, 0s);
}

/* Заголовок экрана. Размер и начертание общие с «Друзьями»: один кегль на
   все экраны, иначе при переходе заголовок прыгает.
   Здесь он по центру — как в «Истории покупок» у Apple. Строкой шапки его
   сделать нельзя: там уже стоят плашка бренда и «Меню». */
.hs-title, .scr-title {
  --d: .02s;
  margin: 26px 4px 20px;
  font-size: clamp(32px, 9.2vw, 42px); font-weight: 400;
  letter-spacing: -1px; line-height: 1.04; color: var(--hm-ink);
}
.hs-title { text-align: center; }

/* ── поиск ── */
.hs-find[hidden] { display: none; }
.hs-find {
  --d: .1s;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-radius: 999px; margin-bottom: 6px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.2) brightness(1.12);
          backdrop-filter: blur(14px) saturate(1.2) brightness(1.12);
  box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(22,24,28,.05);
}
.hs-find[hidden] { display: none; }
.hs-find svg {
  width: 17px; height: 17px; flex: none; fill: none; stroke: var(--hm-muted);
  stroke-width: 2; stroke-linecap: round;
}
.hs-find input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--hm-ink);
}
.hs-find input::placeholder { color: var(--hm-muted); }
/* Системный крестик у type=search рисуется поверх стекла чёрным квадратом. */
.hs-find input::-webkit-search-cancel-button { -webkit-appearance: none; }
#hist-q[hidden] { display: none; }

/* ── список ──
   Раскладка как в «Истории покупок» Apple: серая дата над карточкой,
   внутри карточки строки покупок, снизу итог за день со стрелкой. */
#view-history .hist { display: block; }

.hgrp { margin-top: 20px; }
.hgrp-day {
  margin: 0 4px 8px; font-size: 15px; font-weight: 500; color: var(--hm-muted);
}

/* Заливка здесь ровная, а не общая --g-fill: та к середине падает до
   .22 прозрачности, и у высокой карточки нижняя половина проваливалась в
   кадр — над разделителем светло, под ним тёмное плечо. Кадр по-прежнему
   просвечивает, но карточка читается одной поверхностью. */
.hgrp-card {
  border-radius: 22px; overflow: hidden;
  /* Преломления здесь нет намеренно: карточки крупные и идут подряд,
     искажённый кадр в каждой превращал список в рябь. */
  background: linear-gradient(180deg,
                rgba(255,255,255,.52) 0%,
                rgba(255,255,255,.44) 100%);
  border: 1px solid var(--g-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.25) brightness(1.18);
          backdrop-filter: blur(16px) saturate(1.25) brightness(1.18);
  box-shadow: var(--g-shade);
}

/* Строка покупки: значок, название с подписью, сумма справа.
   Разделитель рисуем сверху у соседей — так под первой строкой и над
   итогом остаётся ровно по одной черте. */
#view-history .pay {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
}
#view-history .pay + .pay { border-top: 1px solid rgba(22,24,28,.08); }

/* Скруглённый квадрат, а не круг: у Apple в строке стоит иконка приложения. */
#view-history .pay-ic {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
#view-history .pay-ic .i { width: 20px; height: 20px; color: var(--hm-ink); opacity: .75; }

#view-history .pay-main { flex: 1; min-width: 0; }
#view-history .pay-main b {
  display: block; font-size: 16px; font-weight: 500; color: var(--hm-ink);
}
#view-history .pay-sub {
  display: block; font-size: 14px; color: var(--hm-muted); margin-top: 1px;
}

#view-history .pay-amt {
  flex: none; font-size: 15px; color: var(--hm-muted); white-space: nowrap;
}

/* ── итог за день ── */
.hgrp-total {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 15px 16px; border: 0; border-top: 1px solid rgba(22,24,28,.08);
  background: none; font: inherit; color: var(--hm-ink);
  text-align: left; cursor: pointer;
  transition: background .15s ease;
}
.hgrp-total:hover  { background: rgba(255,255,255,.28); }
.hgrp-total:active { background: rgba(255,255,255,.4); }
.hgrp-total span { flex: 1; font-size: 16px; }
.hgrp-total b    { font-size: 17px; font-weight: 600; white-space: nowrap; }
.hgrp-total svg {
  width: 17px; height: 17px; flex: none; fill: none; stroke: var(--hm-muted);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

#view-history .empty {
  --d: .12s;
  text-align: center; padding: 50px 20px; color: var(--hm-muted);
}
#view-history .empty .i { width: 44px; height: 44px; opacity: .35; }
#view-history .empty b { display: block; margin: 14px 0 6px; font-size: 16px; color: var(--hm-ink); }
#view-history .empty p { margin: 0; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .hs-title, .hs-find, .hist .hgrp, .hist .empty { animation: none; }
}


/* ── вуаль ──
   Лежит на всё окно, а не по ширине колонки. На телефоне разницы нет, а
   на десктопе экран уже окна: кадр по краям оставался незатянутым, и на
   границе колонки шла видимая вертикальная черта.

   Слой сидит между видео (z-index 0) и содержимым (.app, z-index 1):
   у body::after тот же нулевой индекс, что у подложки, но он позже в
   порядке документа — значит, поверх неё. Какая именно вуаль, решает
   --veil, его ставит applyTheme по имени экрана. */
body.light::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--veil, transparent);
}
/* Одна вуаль на оба экрана, и это важно: книзу она РАЗРЕЖАЕТСЯ. Стеклу
   нужно что-то преломлять, а плотная вуаль замывает кадр — панель над ней
   выглядит просто белой плашкой, без стекла. Раньше у «Друзей» стояла своя,
   сгущающаяся до .68 книзу: тогда там до самого низа шли карточки с тёмным
   текстом. Сейчас внизу обоих экранов лежит стеклянная панель, и условия
   должны быть одинаковые. */
body[data-screen="home"],
body[data-screen="friends"],
body[data-screen="support"],
body[data-screen="settings"],
body[data-screen="account"] {
  --veil: linear-gradient(180deg, rgba(250,250,249,.42), rgba(250,250,249,.18));
}

body.no-bg .hm-bg { opacity: 0; }

/* Тот же тон и на body: экран шириной с колонку, а на десктопе по краям
   окна видна страница — без этого на стыке шла бы полоса другого серого. */
body.no-bg { background: #f2f2f7; }
#view-history { background: #f2f2f7; }

/* Без движущегося кадра стекло бессмысленно — преломлять нечего, а
   полупрозрачные поверхности на плоском фоне только мутнеют.
   Поэтому здесь всё сплошное, с обычной тенью. */
body.no-bg .hgrp-card {
  background: #fff;
  border-color: rgba(22,24,28,.06);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(22,24,28,.05);
}

body.no-bg .hs-find {
  background: #fff;

  border-color: #fff;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgba(22,24,28,.05),
    0 8px 18px rgba(22,24,28,.08);
}
body.no-bg #view-history .pay-ic {
  background: #f3f3f5;
  border-color: rgba(22,24,28,.07);
  box-shadow: none;
}
body.no-bg #view-history .pay-ic::before { display: none; }
читан на то, чтобы поместиться целиком: ни картинки, ни
   лишних блоков — иначе на телефоне его приходится листать, а вся суть
   реферальной программы должна быть видна сразу.
   Размеры шрифтов те же, что на «Главной» и в «Истории»: 13 — мелкая
   подпись, 15 — основной текст, 16 — кнопка и заголовок карточки,
   crescendo до clamp(32…42) у заголовка экрана. */
/* ЭКРАНЫ «ДРУЗЬЯ», «ПОДДЕРЖКА» И «НАСТРОЙКИ»

   Устроены одинаково: заголовок вверху, подложка посередине, одна
   стеклянная панель внизу. Общие куски названы sheet-* и scr-*, чтобы
   имя одного экрана не стояло в стилях другого.

   Две вещи, которые легко сломать правкой:

   1. Экран рассчитан помещаться целиком, без прокрутки. Поэтому блоки
      мелкие, поля скупые, а плитки и карточка прижаты к низу (margin-top
      у .sheet-side): сверху остаётся заголовок, между ними видно подложку.
   2. Нижний виджет — то же жидкое стекло, что у карточки покупки на
      главной: заливка, кайма с расхождением цвета, внутреннее свечение и
      преломление приходят из общих правил, где .sheet и .sheet-alt стоят
      рядом с .hm-buy и .hm-go. Отдельных «своих» поверхностей у экрана
      нет намеренно — иначе два вида стекла разъедутся при первой правке.

   Кегли те же, что на «Главной» и в «Истории»: 12–13 мелкая подпись,
   14–15 основной текст и кнопки, заголовок экрана — общий с «Историей». */
#view-friends, #view-support, #view-settings, #view-account {
  gap: 0;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Экран собирается сверху вниз: у каждого блока своя задержка (--d). */
.scr-title, .scr-lead, .sheet {
  animation: hs-in .34s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--d, 0s);
}

/* ── строка с аватаром внутри панели кабинета ── */
.acc-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.acc-ava {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.9);
}
.acc-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Буква вместо фото: у части людей его нет или оно закрыто настройками. */
.acc-ava.blank {
  display: grid; place-items: center;
  font-size: 18px; font-weight: 600; color: var(--hm-muted);
}
.acc-who { min-width: 0; }
.acc-who b {
  display: block; font-size: 15px; font-weight: 600; color: var(--hm-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-who span {
  display: block; margin-top: 1px; font-size: 12px; color: var(--hm-muted);
}

/* ── заголовок и подпись ── */
/* Ни кегля, ни полей здесь нет намеренно: и то и другое приходит из общего
   правила .hs-title, .scr-title. Так заголовок стоит ровно там же, где
   «История покупок», — при правке того правила оба едут вместе. */
.scr-title { text-align: center; }
/* text-wrap: balance разводит строки поровну — без него последняя строка
   остаётся в два слова. Браузеры без поддержки переносят как обычно. */
.scr-lead {
  --d: .06s;
  max-width: 36ch; margin: 0 auto 14px; text-align: center; text-wrap: balance;
  font-size: 14px; line-height: 1.4; color: var(--hm-muted);
}

/* ── карточка со ссылкой ── */
/* Карточка лежит в обёртке, прижатой к низу экрана: заголовок остаётся
   вверху, а между ними видно подложку — ту самую девушку за стеклом.
   На низком экране поле схлопывается само. */
.sheet-side { margin-top: auto; }
/* Между панелями, если их несколько — как в «Настройках». */
.sheet + .sheet { margin-top: 10px; }

/* Заливка плотнее, чем у кнопок, и размытие сильнее — ровно как у
   карточки покупки: сквозь крупную панель не должно просвечивать видео,
   иначе ссылка на ней становится нечитаемой. */
.sheet {
  --d: .1s;
  display: block; width: 100%; text-align: left;
  padding: 16px; border-radius: 26px;
  background: linear-gradient(180deg,
                rgba(255,255,255,.78) 0%,
                rgba(255,255,255,.62) 100%);
  /* Рамка прозрачная, но ширину держим: видимую кромку рисует ::before из
     общего правила, а 1px здесь нужен, чтобы она не меняла габариты.
     У .hm-buy то же самое выходит само — её правило стоит в файле ВЫШЕ
     блока со стеклом, и border-color: transparent перебивает его там. */
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
          backdrop-filter: blur(26px) saturate(1.5);
  color: var(--hm-ink); font: inherit;
}
.sheet-h   { font-size: 15px; font-weight: 600; }
/* Если под заголовком панели сразу содержимое, а не подпись (как в
   «Настройках»), отступ приходится задавать здесь: у самого заголовка
   его нет, иначе на «Друзьях» он сложился бы с полем подписи. */
.sheet-h + .doclinks { margin-top: 12px; }
.sheet-sub { margin: 1px 0 10px; font-size: 12px; color: var(--hm-muted); }

/* ── ссылка ── */
/* Вложенная плашка плотнее карточки — иначе на её фоне не видна. */
/* Поле со ссылкой сразу под кнопкой — на «Друзьях» оно идёт первым, там
   отступ не нужен. */
.sheet-go + .sheet-link-row { margin-top: 10px; }
.sheet-link-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 14px; border-radius: 999px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(22,24,28,.05);
}
.sheet-link {
  flex: 1; min-width: 0; font-size: 14px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--hm-accent); cursor: pointer;
}
.sheet-copy {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: var(--hm-muted); cursor: pointer;
  display: grid; place-items: center;
  transition: color .18s ease, background .18s ease, transform .12s ease;
}
.sheet-copy .i { width: 18px; height: 18px; }
.sheet-copy:hover  { color: var(--hm-ink); background: rgba(255,255,255,.55); }
.sheet-copy:active { transform: scale(.9); }

.sheet-done {
  display: flex; align-items: center; gap: 6px; width: max-content;
  margin: 8px 0 0 6px; padding: 4px 11px 4px 8px; border-radius: 999px;
  background: rgba(58,178,116,.2);
  font-size: 12px; font-weight: 500; color: #24704a;
  animation: hs-in .22s ease both;
}
.sheet-done svg {
  width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.sheet-done[hidden] { display: none; }

/* ── две кнопки ── */
/* Главное действие залито акцентом: остальное на экране матово-белое, и
   без плотной заливки взгляду не за что зацепиться. QR — второе по
   важности, поэтому он в том же покрытии, что плашки. */
.sheet-go, .sheet-alt {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 18px; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, background .18s ease;
}
.sheet-go .i, .sheet-alt .i { width: 18px; height: 18px; flex: none; }

.sheet-go {
  margin-top: 10px; border: 0;
  background: var(--hm-accent); color: #fff;
}
.sheet-go:hover  { background: var(--hm-accent-alt); }
.sheet-go:active { transform: scale(.985); }

/* Ни фона, ни кромки, ни тени: всё приходит из общего рецепта стеклянных
   кнопок — того же, по которому сделана «Купить подписку» на главной. */
.sheet-alt { margin-top: 6px; color: var(--hm-ink); }

/* Совсем низкие экраны (iPhone SE и Telegram в половину окна): ужимаем
   заголовок, чтобы карточка осталась видна без прокрутки. */
@media (max-height: 680px) {
  .scr-title { margin: 14px 4px 10px; font-size: 28px; }
  .scr-lead { margin-bottom: 10px; font-size: 13px; }
  /* «Настройки» длиннее соседей: на низком экране они упирались в край
     буквально парой пикселей, и из-за них появлялась прокрутка. */
  .doclinks a { padding: 7px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .scr-title, .scr-lead, .sheet, .sheet-done, .doc { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   ОБЩИЙ СЛОЙ: шапка, меню, нижний виджет

   Лежат вне экранов, поэтому при переходе не перерисовываются: шапка
   остаётся неподвижной, а виджет уезжает вниз сам по себе, не завися от
   того, какой экран сейчас показан.

   Ширина колонки та же, что у .app.
   ═══════════════════════════════════════════════════════════════════ */
.hm-shell {
  position: fixed; top: 0; bottom: 0; z-index: 30;
  /* Центруем полями, а не transform: трансформ делает элемент точкой
     отсчёта для position: fixed внутри, и затемнение под меню (оно как
     раз fixed inset:0) упиралось в ширину колонки — на десктопе темнела
     только её полоса, а не всё окно. */
  left: 0; right: 0; margin-inline: auto;
  width: min(var(--col), 100%);
  padding: calc(10px + env(safe-area-inset-top)) 12px
           calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  pointer-events: none;            /* сквозь пустоту между шапкой и виджетом */
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.hm-shell > * { pointer-events: auto; }
body.light .hm-shell { opacity: 1; visibility: visible; }

.hm-shell .hm-bar { flex: none; }
.hm-shell .hm-buy { margin-top: auto; }

/* Виджет уезжает вниз, когда открыт не главный экран. Кривая с резким
   стартом и мягким торможением: уход должен читаться быстро. */
.hm-shell .hm-buy {
  transition: transform .34s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
body:not(.on-home) .hm-shell .hm-buy {
  transform: translateY(130%); opacity: 0; pointer-events: none;
}

/* Экраны поверх фона, но под шапкой и виджетом. */
.hm { z-index: 1; }

/* Светлым экранам нужен отступ сверху под общую шапку. */
#view-history, #view-friends, #view-support, #view-settings, #view-account {
  padding-top: calc(74px + env(safe-area-inset-top));
}

/* Переход между светлыми экранами: прозрачность у .view не анимируем.
   Полупрозрачный родитель ломает backdrop-filter у вложенных элементов —
   кнопки на миг темнеют. Двигаем только содержимое. */
#view-home, #view-history, #view-friends, #view-support, #view-settings,
#view-account { animation: none; }

/* ═══════════════════════════════════════════════════════════════════
   ДЕСКТОП

   Отдельного макета нет — та же вёрстка, только шире: колонка растёт
   (--col выше), видео разливается на всё окно, а нижний виджет на
   широком экране раскладывается в две колонки. В одну он бы растянулся
   на 900px и превратился в полосу с цифрой у левого края.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
  .hm-buy {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) 1.3fr;
    grid-template-areas:
      "top tabs"
      "top go"
      "state state";
    align-items: center;
    column-gap: 34px;
    padding: 24px 28px 22px;
  }

  /* Слева — подпись, цена и строка «30 дней · До 3 устройств» под ней.
     На телефоне эта пара стоит справа от цены, здесь места хватает
     положить её строкой. */
  /* Места вдоволь: пилюлям возвращаем кегль и воздух. */
  .hm-tabs { gap: 10px; }
  .hm-tab { padding: 13px 10px; font-size: 14px; }

  .hm-buy-top { grid-area: top; display: block; }
  .hm-price { font-size: 52px; }
  .hm-meta {
    text-align: left; padding-top: 14px;
    display: flex; align-items: baseline; gap: 10px;
  }
  .hm-dev { margin-top: 0; }

  .hm-tabs  { grid-area: tabs; margin: 0 0 12px; }
  .hm-go    { grid-area: go; }
  .hm-state { grid-area: state; margin-top: 14px; }

  /* Экраны просто дышат шире: поля крупнее, ритм тот же. */
  .hm { padding-left: 20px; padding-right: 20px; }
  .hm-shell { padding-left: 20px; padding-right: 20px; }

  #view-history .pay,
  .hgrp-total { padding-left: 22px; padding-right: 22px; }
  .hs-find { padding: 13px 20px; }
}

/* Указатель есть только на десктопе: на тач-экранах :hover залипает
   после нажатия, поэтому наведение описываем отдельно. */
@media (hover: hover) and (pointer: fine) {
  .hm-tab:hover,
  .hm-go:hover,
  .sheet-alt:hover,
  .menu-toggle:hover,
  .pill-link:hover { filter: brightness(1.03); }

  .hgrp-total:hover { background: rgba(22,24,28,.025); }
}

/* ═══════════════════════════════════════════════════════════════════
   ДЕСКТОПНАЯ КОМПОЗИЦИЯ
   На широком экране контент не растягивается одной длинной строкой:
   вторичные экраны получают удобную ширину чтения, а экраны с карточками
   используют свободное место в две колонки. Мобильные стили не меняются. */
@media (min-width: 760px) {
  body { min-height: 100dvh; }

    .app { padding-inline: 24px; }
  .hm-shell { padding-inline: 24px; }
  .hm {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Текстовые экраны остаются достаточно узкими для комфортного чтения. */
  .view:not(.hm) {
    width: min(100%, 760px);
    margin-inline: auto;
    padding-block: 24px 48px;
  }

  #view-plans { width: min(100%, 920px); }
  #view-plans .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-plans .plan { min-height: 94px; }

  /* Нижняя карточка не выглядит растянутой полосой и держит ровный ритм. */
  .hm-shell .hm-buy {
    width: 100%;
    border-radius: 32px;
    column-gap: clamp(28px, 4vw, 56px);
  }

  .hs-title {
    font-size: clamp(42px, 5vw, 58px);
    margin-top: 34px;
  }
  .scr-title { font-size: clamp(34px, 3.4vw, 44px); }
  .hs-find { max-width: 760px; margin-inline: auto; }

  /* «Друзья» и «Поддержка» на широком экране держат ту же композицию, что
     на телефоне: заголовок вверху, панель внизу. Разъезжаться в колонки
     им незачем — содержимого на пол-экрана, а панель обязана остаться
     ПОСЕРЕДИНЕ по горизонтали и внизу по вертикали: там за ней фигура из
     кадра, и стеклу есть что преломлять. По краям кадр почти белый, и у
     края панель выглядит просто белой плашкой.

     width: 100% обязателен — с одними auto-полями блок сжимается по
     содержимому и уезжает от центра. */
  #view-friends > *, #view-support > *, #view-settings > *, #view-account > *,
  #view-friends .sheet-side > *,
  #view-support .sheet-side > *,
  #view-settings .sheet-side > *,
  #view-account .sheet-side > * {
    width: 100%; max-width: 620px; margin-inline: auto;
  }
  #view-friends .scr-lead, #view-support .scr-lead { max-width: 46ch; }
  #view-history .hist { max-width: 900px; margin-inline: auto; }
}

@media (min-width: 1040px) {
    .app { padding-inline: 32px; }
  .hm-shell {
    padding: calc(18px + env(safe-area-inset-top)) 32px
             calc(18px + env(safe-area-inset-bottom));
  }
  .hm {
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .hm-shell .hm-bar { padding-inline: 4px; }
  .hm-shell .hm-buy { padding: 28px 34px 26px; }
  .hm-buy { grid-template-columns: minmax(260px, .9fr) minmax(480px, 1.35fr); }

  .bubble-menu { width: 260px; }
}

@media (min-width: 760px) and (max-height: 680px) {
  /* В невысоком окне Telegram карточка не налезает на шапку. */
  .hm-shell .hm-buy { padding-block: 18px; }
  .hm-price { font-size: 44px; }
  .hm-state { margin-top: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ШАПКА И МЕНЮ НА ШИРОКОМ ЭКРАНЕ

   Колонка шире кадра: видео — вертикальный блок по центру, и под
   пилюлями шапки с меню его нет. Преломлять нечего, поэтому жидкое
   стекло оставляет там только смазанное пятно, а тонкая заливка
   (в середине градиента всего .22-.24) читается как мёртвый серый
   прямоугольник — особенно у раскрытого меню, оно крупное.

   На широком экране делаем их плотными: белая пилюля на светлом фоне,
   как в референсе. На телефоне всё остаётся стеклянным — там кадр
   занимает всю ширину и под пилюлями он есть.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
  .hm-brand,
  .menu-toggle,
  .bubble-menu {
    background: rgba(255,255,255,.9);
  }

  body.glass-liquid .hm-brand,
  body.glass-liquid .menu-toggle,
  body.glass-liquid .bubble-menu {
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
            backdrop-filter: blur(12px) saturate(1.2);
  }

  /* Кайма-преломление тоже ни к чему: без кадра под ней тёплый и
     холодный края читаются как цветной ободок, а не как стекло. */
  .hm-brand::before,
  .menu-toggle::before {
    background: linear-gradient(142deg,
      rgba(255,255,255,.98) 0%,
      rgba(22,24,28,.10) 50%,
      rgba(255,255,255,.9) 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ИСТОРИЯ: СВОДКА ЗА ВСЁ ВРЕМЯ

   Кольцо долей по тарифам с итогом в середине. На телефоне её нет —
   там экран повторяет «Историю покупок» Apple, где кроме списка ничего
   и не должно быть. Появляется с 1040px, где рядом со списком всё
   равно оставалась пустая половина экрана.
   ═══════════════════════════════════════════════════════════════════ */
.hs-sum { display: none; }

.hs-sum-cap { font-size: 14px; color: var(--hm-muted); }

.hs-ring { position: relative; width: 100%; max-width: 240px; margin: 10px auto 18px; }
.hs-ring svg { display: block; width: 100%; height: auto; }

/* Гаснут соседи, а не подсвечивается выбранный: подсветка на цветном
   кольце только добавляет ещё один цвет. */
.hs-arc { transition: opacity .18s ease; }
.hs-arc.dim { opacity: .16; }

.hs-ring-mid {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  pointer-events: none;                 /* наведение ловят сами дуги */
}
.hs-ring-mid b {
  display: block; font-size: 30px; font-weight: 500;
  letter-spacing: -.8px; line-height: 1.1; color: var(--hm-ink);
  white-space: nowrap;
}
.hs-ring-mid span {
  display: block; margin-top: 4px; font-size: 12px; color: var(--hm-muted);
}

/* ── легенда ──
   Она же таблица значений: по кольцу близкие доли не сравнить, поэтому
   точные суммы стоят рядом с названием тарифа. Заодно это второй признак
   помимо цвета — он нужен, потому что пара «жёлтый — зелёный» лежит на
   границе различимости при дальтонизме. */
.hs-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.hs-legend li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: 10px; cursor: default;
  font-size: 14px; color: var(--hm-ink);
  transition: opacity .18s ease, background .18s ease;
}
.hs-legend li i { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.hs-legend li span { flex: 1; color: var(--hm-muted); }
.hs-legend li b { font-weight: 500; font-variant-numeric: tabular-nums; }
.hs-legend li.dim { opacity: .32; }
.hs-legend li:hover { background: rgba(22,24,28,.035); }

@media (min-width: 1040px) {
  /* Раскладка как на «Друзьях»: слева основное, справа сводка. Раньше
     список был зажат до 900px по центру и терялся посреди экрана. */
  #view-history:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    grid-template-rows: auto auto 1fr;
    align-content: start;
    column-gap: 20px;
    padding-inline: 40px;
  }
  #view-history .hs-title { grid-column: 1 / -1; }
  #view-history .hs-find,
  #view-history .hist { grid-column: 1; max-width: none; margin-inline: 0; }

  #view-history .hs-sum {
    display: block;
    --d: .14s;
    grid-column: 2; grid-row: 2 / span 2;
    align-self: start; position: sticky; top: 92px;
    padding: 22px 22px 16px; border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(22,24,28,.06);
    box-shadow: 0 1px 2px rgba(22,24,28,.05);
    animation: hs-in .34s cubic-bezier(.22,1,.36,1) both;
    animation-delay: var(--d);
  }
  /* Пустая история — карточке нечего показывать, и колонок снова одна:
     класс ставит renderHistory по тому же условию, что прячет сводку. */
  #view-history .hs-sum[hidden] { display: none; }
  #view-history.no-sum:not(.hidden) { grid-template-columns: minmax(0, 1fr); }
  /* Колонка снова во всю ширину — заглушку внутри .hist центрирует она сама. */
  #view-history.no-sum .hist { max-width: none; margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-sum, .hs-arc, .hs-legend li { animation: none; transition: none; }
}