/* eSIM Mini App — «мягкий iOS-нативный»: сгруппированные списки как в «Настройках», Mulish,
   один акцент, крупные цели нажатия, обе темы Telegram. */
/* Цвета — только токены. Тема приходит из Telegram (colorScheme → data-theme, событие themeChanged),
   поэтому светлая/тёмная переключаются сами. Светлая — «Настройки» iOS; светлая — крем и коралл; тёмная — графит #121212, кремовые кнопки, коралловые акценты. */
:root { --k: 1; }
:root, [data-theme="dark"] {
  --bg: #121212;
  --bg-sheet: #171716;
  --surface: #1e1d1b;
  --surface-2: #2a2926;
  --surface-3: #35342f;
  --bar: rgba(23, 23, 22, 0.92);
  --bar-solid: #121212;
  --line: #2c2b28;
  --line-2: #3d3b36;
  --text-1: #f3eee4;
  --text-2: #cfc9bc;
  --text-3: #a8a296;
  --accent: #ff5a3c;
  --accent-bg: #3a201a;
  --icon: #f3eee4;
  --ok: #7ad69a;
  --ok-bg: #16291d;
  --warn: #ebae5c;
  --warn-bg: #2e2213;
  --err: #f2877c;
  --err-bg: #33191a;
  --shadow: none;
  --scrim: rgba(0, 0, 0, 0.6);
  --seg-ind: #3d3b36;
  --btn: #f3eee4;
  --btn-press: #ddd6c8;
  --btn-text: #121212;
  --on-tone: #121212;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f3eee4;
  --bg-sheet: #f3eee4;
  --surface: #fffdf8;
  --surface-2: #ebe5d8;
  --surface-3: #e2dbcc;
  --bar: rgba(247, 243, 235, 0.92);
  --bar-solid: #f3eee4;
  --line: #e6dfd1;
  --line-2: #d6cebd;
  --text-1: #121212;
  --text-2: #3d3a34;
  --text-3: #6b665c;
  --accent: #c8361a;
  --accent-bg: #fbe3dc;
  --icon: #121212;
  --ok: #1b7a3a;
  --ok-bg: #e3f5e8;
  --warn: #9a5300;
  --warn-bg: #fdf0dc;
  --err: #b42318;
  --err-bg: #fde8e6;
  --shadow: none;
  --scrim: rgba(18, 18, 18, 0.4);
  --seg-ind: #fffdf8;
  --btn: #d03a1a;
  --btn-press: #b83216;
  --btn-text: #ffffff;
  --on-tone: #ffffff;
  color-scheme: light;
}
/* Mulish (SIL OFL 1.1), Google Fonts, variable 400–800 */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./vendor/mulish-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./vendor/mulish-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./vendor/mulish-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(./vendor/mulish-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --r-xl: calc(20px * var(--k));
  --r-lg: calc(14px * var(--k));
  --r-md: calc(14px * var(--k));
  --r-sm: calc(10px * var(--k));
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Mulish (свой файл, без внешних запросов); китайский и прочие письменности — системный запасной. */
  --font: "Mulish", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* Отступы устройства и интерфейса Telegram (Bot API 8.0+): максимум из двух источников, без двойного учёта */
  /* --sat…/--csat… ставит theme-boot.js из Telegram.WebApp.safeAreaInset/contentSafeAreaInset; запасные — переменные SDK
     и env(). Fullscreen: верх = статус-бар (safe) + строка кнопок «Закрыть»/«⌄ ⋯» (content safe). */
  --sa-top: max(env(safe-area-inset-top, 0px), var(--sat, var(--tg-safe-area-inset-top, 0px)));
  --sa-bottom: max(env(safe-area-inset-bottom, 0px), var(--sab, var(--tg-safe-area-inset-bottom, 0px)));
  --sa-left: max(env(safe-area-inset-left, 0px), var(--sal, var(--tg-safe-area-inset-left, 0px)));
  --sa-right: max(env(safe-area-inset-right, 0px), var(--sar, var(--tg-safe-area-inset-right, 0px)));
  --top-inset: calc(var(--sa-top) + var(--csat, var(--tg-content-safe-area-inset-top, 0px)));
  --bottom-inset: calc(var(--sa-bottom) + var(--csab, var(--tg-content-safe-area-inset-bottom, 0px)));
  --left-inset: calc(var(--sa-left) + var(--csal, var(--tg-content-safe-area-inset-left, 0px)));
  --right-inset: calc(var(--sa-right) + var(--csar, var(--tg-content-safe-area-inset-right, 0px)));
  --tabbar-h: calc(72px * var(--k));
}

/* ── база ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg);
  /* только вертикальная прокрутка: диагональный свайп не должен сдвигать страницу вбок */
  overflow-x: hidden; overflow-x: clip; max-width: 100%; touch-action: pan-y; overscroll-behavior-x: none; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100vh);
  background: var(--bg);
  color: var(--text-1);
  font: 400 calc(15px * var(--k))/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  touch-action: pan-y;
}
html.no-scroll body { overflow: hidden; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
button:disabled { cursor: default; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
img, svg { display: block; }
:focus-visible { outline: calc(2px * var(--k)) solid var(--accent); outline-offset: calc(2px * var(--k)); }
.mono { font-family: var(--mono); }
.small { font-size: calc(13px * var(--k)); line-height: 1.45; color: var(--text-3); }
.center { text-align: center; }
.noscript { padding: calc(24px * var(--k)); font-size: calc(16px * var(--k)); }

/* ── каркас ───────────────────────────────────────────────────────────── */
.app { position: relative; max-width: calc(560px * var(--k)); margin: 0 auto; }
.top-shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--top-inset);
  background: var(--bar);
  -webkit-backdrop-filter: blur(calc(16px * var(--k)));
  backdrop-filter: blur(calc(16px * var(--k)));
  pointer-events: none;
}
/* Fullscreen: под статус-баром и плавающими кнопками Telegram — сплошной фон, текст под ними не просвечивает. */
html.tg-fs .top-shade { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.main { overflow-x: clip; padding: calc(var(--top-inset) + calc(16px * var(--k))) calc(calc(16px * var(--k)) + var(--right-inset)) calc(var(--tabbar-h) + var(--bottom-inset) + calc(28px * var(--k))) calc(calc(16px * var(--k)) + var(--left-inset)); }
.screen { display: flex; flex-direction: column; gap: calc(22px * var(--k)); animation: fadeUp 0.22s var(--ease); }
/* Смена вкладки: короткий crossfade + сдвиг по направлению (вправо по таббару — экран въезжает справа). Только
   opacity/transform на композиторе; html/body overflow-x: clip — горизонтальной прокрутки сдвиг не даёт. */
html.nav .main > .screen { animation: tabIn 0.23s cubic-bezier(0.22, 1, 0.36, 1) both; --tab-dx: calc(18px * var(--k)); }
html.nav-back .main > .screen { --tab-dx: calc(-18px * var(--k)); }
/* Первый экран — без анимации входа: под заставкой fadeUp стоял на паузе (opacity 0) всё время fade #ld,
   таббар уже был виден, а экран «въезжал» после удаления заставки. Класс .nav ставит go() при смене вкладки. */
html:not(.nav) .main > .screen { animation: none; }
.stack { display: flex; flex-direction: column; gap: calc(14px * var(--k)); }
.stack-sm { display: flex; flex-direction: column; gap: calc(10px * var(--k)); }
.pad-top { padding-top: calc(8px * var(--k)); }
.hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12px * var(--k)); }
.h1 {
  font-size: calc(28px * var(--k));
  line-height: 1.15;
  font-weight: 760;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.h2 {
  font-size: calc(22px * var(--k));
  line-height: 1.2;
  font-weight: 720;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.lead { margin-top: calc(6px * var(--k)); font-size: calc(15.5px * var(--k)); line-height: 1.45; color: var(--text-2); }
.sec { display: flex; flex-direction: column; gap: calc(10px * var(--k)); }
.sec-title { font-size: calc(19px * var(--k)); line-height: 1.25; font-weight: 720; letter-spacing: -0.01em; }
.sec-sub { font-size: calc(14px * var(--k)); font-weight: 650; color: var(--text-2); }
.card {
  padding: calc(16px * var(--k));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* ── кнопки ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--k));
  min-height: calc(48px * var(--k));
  padding: 0 calc(18px * var(--k));
  border-radius: var(--r-md);
  font-size: calc(16px * var(--k));
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  transition: transform 0.15s var(--ease), background 0.2s, opacity 0.2s;
}
.btn:active:not(:disabled),
.cta:active:not(:disabled),
.dest:active,
.pkg:active,
.method:active,
.ecard:active,
.pcard:active {
  transform: scale(0.98);
}
.btn:disabled, .cta:disabled { opacity: 0.6; }
.btn-primary { background: var(--btn); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text-1); border: 1px solid var(--line-2); }
.btn-ghost { color: var(--accent); }
.btn-sm { min-height: calc(38px * var(--k)); padding: 0 calc(14px * var(--k)); font-size: calc(14.5px * var(--k)); border-radius: var(--r-sm); }
.btn-lg { min-height: calc(56px * var(--k)); padding: 0 calc(22px * var(--k)); font-size: calc(17px * var(--k)); border-radius: calc(16px * var(--k)); }
.btn-block { width: 100%; }
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--k));
  width: 100%;
  min-height: calc(56px * var(--k));
  padding: calc(8px * var(--k)) calc(18px * var(--k));
  border-radius: calc(16px * var(--k));
  background: var(--btn);
  color: #fff;
  font-size: calc(17px * var(--k));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 calc(10px * var(--k)) calc(22px * var(--k)) -12px rgba(31, 111, 229, 0.9);
  transition: transform 0.15s var(--ease), background 0.2s, opacity 0.2s;
}
.cta:active:not(:disabled) { background: var(--btn-press); }
.icon-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(44px * var(--k));
  height: calc(44px * var(--k));
  border-radius: calc(12px * var(--k));
  color: var(--text-2);
}
.icon-btn:active { background: var(--surface-2); }
.link {
  display: inline;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: calc(2px * var(--k));
  text-decoration-thickness: 1px;
  -webkit-user-select: text;
  user-select: text;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--k));
  flex: none;
  height: calc(40px * var(--k));
  margin-top: -2px;
  padding: 0 calc(12px * var(--k));
  border-radius: calc(20px * var(--k));
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: calc(18px * var(--k));
}
.lang-code { font-size: calc(13.5px * var(--k)); font-weight: 700; color: var(--text-2); letter-spacing: 0.02em; }

/* ── поиск и витрина ──────────────────────────────────────────────────── */
.search { position: relative; margin-top: -8px; }
.search-ico {
  position: absolute;
  top: 50%;
  left: calc(15px * var(--k));
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.search-input {
  width: 100%;
  height: calc(56px * var(--k));
  padding: 0 calc(48px * var(--k)) 0 calc(48px * var(--k));
  border-radius: calc(16px * var(--k));
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  color: var(--text-1);
  font: 500 calc(17px * var(--k)) var(--font);
  outline: none;
  box-shadow: var(--shadow);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input::placeholder { color: var(--text-3); font-weight: 400; font-size: calc(16px * var(--k)); }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 calc(4px * var(--k)) var(--accent-bg); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-x { position: absolute; top: 50%; right: calc(6px * var(--k)); transform: translateY(-50%); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--k)); }
.dest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2px * var(--k));
  min-height: calc(104px * var(--k));
  padding: calc(14px * var(--k));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform 0.15s var(--ease);
}
.dest-flag { margin-bottom: calc(6px * var(--k)); font-size: calc(32px * var(--k)); line-height: 1; }
.dest-name { font-size: calc(16px * var(--k)); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.dest-sub { font-size: calc(13px * var(--k)); color: var(--text-3); }
.dest-price {
  margin-top: auto;
  padding-top: calc(4px * var(--k));
  font-size: calc(14.5px * var(--k));
  font-weight: 650;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.list {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.row {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--k));
  width: 100%;
  min-height: calc(58px * var(--k));
  padding: calc(10px * var(--k)) calc(10px * var(--k)) calc(10px * var(--k)) calc(14px * var(--k));
  text-align: left;
}
.row + .row, .hist-row + .hist-row { border-top: 1px solid var(--line); }
.row:active { background: var(--surface-2); }
.row-flag { flex: none; font-size: calc(26px * var(--k)); line-height: 1; }
.row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.row-title { font-size: calc(16px * var(--k)); font-weight: 560; line-height: 1.3; overflow-wrap: anywhere; }
.row-sub { font-size: calc(13px * var(--k)); line-height: 1.35; color: var(--text-3); }
.row-right {
  flex: none;
  max-width: 45%;
  font-size: calc(14.5px * var(--k));
  font-weight: 600;
  color: var(--text-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.row-chev { flex: none; color: var(--text-3); }
.az-letter {
  padding: calc(5px * var(--k)) calc(14px * var(--k));
  background: var(--surface-2);
  font-size: calc(12.5px * var(--k));
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-3);
}
.az-letter:first-child { padding-top: calc(6px * var(--k)); }
.az-letter + .row { border-top: 0; }

/* ── нижняя навигация ─────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  max-width: calc(560px * var(--k));
  margin: 0 auto;
  padding: calc(6px * var(--k)) calc(8px * var(--k)) calc(calc(6px * var(--k)) + var(--bottom-inset));
  background: var(--bar);
  -webkit-backdrop-filter: blur(calc(20px * var(--k))) saturate(1.5);
  backdrop-filter: blur(calc(20px * var(--k))) saturate(1.5);
  border-top: 1px solid var(--line);
  transition: transform 0.22s var(--ease), opacity 0.2s;
}
.tab {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: calc(3px * var(--k));
  min-height: calc(52px * var(--k));
  color: var(--text-3);
  transition: color 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Нажатие: содержимое кнопки сжимается до 0.92 и пружинит обратно при отпускании. */
.tab > span { transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tab:active > span { transform: scale(0.92); transition: transform 0.12s var(--ease); }
/* Иконка ставшей активной вкладки — лёгкий «прыжок» 1 → 1.12 → 1 (только после смены вкладки, не на старте). */
html.nav .tab.on .tab-ico svg { animation: tabPop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tab-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(56px * var(--k));
  height: calc(30px * var(--k));
  border-radius: calc(15px * var(--k));
  transition: background 0.2s, color 0.2s;
}
.tab-label {
  max-width: 100%;
  font-size: calc(11.5px * var(--k));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab.on { color: var(--accent); }
.tab.on .tab-ico { background: var(--accent-bg); }
.tab-dot {
  position: absolute;
  top: calc(3px * var(--k));
  right: calc(13px * var(--k));
  width: calc(9px * var(--k));
  height: calc(9px * var(--k));
  border-radius: 50%;
  background: var(--err);
  box-shadow: 0 0 0 calc(2px * var(--k)) var(--bar-solid);
}
html.kb .tabbar { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* ── слои (страна, заказ, eSIM) ───────────────────────────────────────── */
.layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-width: calc(560px * var(--k));
  margin: 0 auto;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
}
.layer.in { transform: none; }
.layer-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--top-inset) + calc(16px * var(--k))) calc(16px * var(--k)) calc(28px * var(--k));
}
.backbar {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(4px * var(--k));
  min-height: calc(52px * var(--k));
  padding: var(--top-inset) calc(6px * var(--k)) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.backbar + .layer-scroll { padding-top: calc(14px * var(--k)); }
.backbar-title {
  flex: 1;
  min-width: 0;
  font-size: calc(16px * var(--k));
  font-weight: 650;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backbar-sp { width: calc(44px * var(--k)); flex: none; }
.layer-dock {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(8px * var(--k));
  padding: calc(12px * var(--k)) calc(16px * var(--k)) calc(calc(12px * var(--k)) + var(--bottom-inset));
  background: var(--bar);
  -webkit-backdrop-filter: blur(calc(16px * var(--k)));
  backdrop-filter: blur(calc(16px * var(--k)));
  border-top: 1px solid var(--line);
}

/* ── нижние листы ─────────────────────────────────────────────────────── */
.sheet-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
}
.sheet-scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 0.25s;
}
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-width: calc(560px * var(--k));
  max-height: calc(100% - var(--top-inset) - calc(24px * var(--k)));
  margin: 0 auto;
  border-radius: calc(24px * var(--k)) calc(24px * var(--k)) 0 0;
  background: var(--bg-sheet);
  box-shadow: 0 -10px calc(36px * var(--k)) rgba(0, 0, 0, 0.3), inset 0 1px 0 var(--line-2);
  transform: translateY(100%);
  transition: transform 0.3s var(--ease);
}
.sheet-wrap.in .sheet-scrim { opacity: 1; }
.sheet-wrap.in .sheet { transform: none; }
.sheet-grab {
  flex: none;
  width: calc(38px * var(--k));
  height: calc(5px * var(--k));
  margin: calc(8px * var(--k)) auto calc(2px * var(--k));
  border-radius: calc(3px * var(--k));
  background: var(--line-2);
}
.sheet-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(8px * var(--k));
  min-height: calc(48px * var(--k));
  padding: calc(2px * var(--k)) calc(8px * var(--k)) calc(4px * var(--k)) calc(16px * var(--k));
}
.sheet-title {
  flex: 1;
  min-width: 0;
  font-size: calc(20px * var(--k));
  font-weight: 720;
  letter-spacing: -0.01em;
}
.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(4px * var(--k)) calc(16px * var(--k)) calc(18px * var(--k));
}
.sheet-dock {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: calc(8px * var(--k));
  padding: calc(12px * var(--k)) calc(16px * var(--k)) calc(calc(12px * var(--k)) + var(--bottom-inset));
  border-top: 1px solid var(--line);
}
/* клавиатура открыта: обёртка листа = видимая область (visualViewport), лист прижат к клавиатуре */
html.kb .sheet-wrap {
  top: var(--vv-top, 0px);
  bottom: auto;
  height: var(--vv-h, 100%);
}
html.kb .sheet { max-height: calc(100% - calc(12px * var(--k)) - max(0px, var(--top-inset) - var(--vv-top, 0px))); }
html.kb .sheet-dock { padding-bottom: calc(10px * var(--k)); }

/* ── страна / регион ──────────────────────────────────────────────────── */
.area-hero { display: flex; align-items: center; gap: calc(14px * var(--k)); }
.area-flag { flex: none; font-size: calc(58px * var(--k)); line-height: 1; }
.area-hero .lead { margin-top: calc(4px * var(--k)); }
.pkgs, .methods { display: flex; flex-direction: column; gap: calc(10px * var(--k)); }
.pkg, .method {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--k));
  width: 100%;
  padding: calc(14px * var(--k));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  box-shadow: var(--shadow);
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s var(--ease);
}
.pkg { min-height: calc(78px * var(--k)); }
.method { min-height: calc(60px * var(--k)); }
.pkg.on, .method.on {
  border-color: var(--accent);
  background: linear-gradient(var(--accent-bg), var(--accent-bg)), var(--surface);
}
.pkg-radio {
  flex: none;
  width: calc(22px * var(--k));
  height: calc(22px * var(--k));
  border-radius: 50%;
  border: calc(2px * var(--k)) solid var(--text-3);
  transition: border 0.15s;
}
.on > .pkg-radio { border: calc(7px * var(--k)) solid var(--accent); }
.pkg-main { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.pkg-top { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--k)) calc(8px * var(--k)); }
.pkg-gb {
  font-size: calc(22px * var(--k));
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pkg-days { font-size: calc(14px * var(--k)); color: var(--text-2); }
.pkg-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(2px * var(--k));
  text-align: right;
}
.pkg-price { font-size: calc(18px * var(--k)); font-weight: 720; font-variant-numeric: tabular-nums; }
.pkg-per { font-size: calc(12.5px * var(--k)); color: var(--text-3); font-variant-numeric: tabular-nums; }
.badge {
  padding: calc(3px * var(--k)) calc(8px * var(--k));
  border-radius: calc(8px * var(--k));
  font-size: calc(11.5px * var(--k));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.badge-pop { background: var(--accent-bg); color: var(--accent); }
.badge-val { background: var(--ok-bg); color: var(--ok); }
.facts { display: flex; flex-direction: column; gap: calc(14px * var(--k)); }
.fact { display: flex; align-items: flex-start; gap: calc(12px * var(--k)); }
.fact-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(36px * var(--k));
  height: calc(36px * var(--k));
  border-radius: calc(11px * var(--k));
  background: var(--accent-bg);
  color: var(--accent);
}
.fact-main { display: flex; flex-direction: column; min-width: 0; }
.fact-label { font-size: calc(13px * var(--k)); color: var(--text-3); }
.fact-val { font-size: calc(15px * var(--k)); font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: calc(8px * var(--k)); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--k));
  padding: calc(7px * var(--k)) calc(12px * var(--k));
  border-radius: calc(999px * var(--k));
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: calc(13.5px * var(--k));
  font-weight: 550;
  line-height: 1.3;
  color: var(--text-2);
}
.chip .ico { flex: none; color: var(--icon); }
.link-row {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--k));
  width: 100%;
  min-height: calc(54px * var(--k));
  padding: calc(12px * var(--k)) calc(14px * var(--k));
  border-radius: calc(16px * var(--k));
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: calc(15.5px * var(--k));
  font-weight: 620;
  text-align: left;
}
.link-row span { flex: 1; }
.clist { display: flex; flex-wrap: wrap; gap: calc(6px * var(--k)); }
.cchip {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--k));
  padding: calc(6px * var(--k)) calc(10px * var(--k));
  border-radius: calc(10px * var(--k));
  background: var(--surface-2);
  font-size: calc(14px * var(--k));
}

/* ── раскрывающиеся блоки ─────────────────────────────────────────────── */
.coll {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.coll.card { padding: 0; }
.coll-head {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--k));
  width: 100%;
  min-height: calc(56px * var(--k));
  padding: calc(12px * var(--k)) calc(12px * var(--k)) calc(12px * var(--k)) calc(14px * var(--k));
  text-align: left;
}
.coll-ico { flex: none; color: var(--icon); }
.coll-title {
  flex: 1;
  min-width: 0;
  font-size: calc(16px * var(--k));
  font-weight: 620;
  line-height: 1.35;
}
.coll-chev { flex: none; color: var(--text-3); transition: transform 0.2s var(--ease); }
.coll.open .coll-chev { transform: rotate(180deg); }
.coll-body {
  padding: 0 calc(14px * var(--k)) calc(16px * var(--k));
  font-size: calc(15px * var(--k));
  line-height: 1.5;
  color: var(--text-2);
}
.faq { display: flex; flex-direction: column; gap: calc(8px * var(--k)); }

/* ── подсказки, ошибки, пусто ─────────────────────────────────────────── */
.note, .warnbox {
  display: flex;
  align-items: flex-start;
  gap: calc(10px * var(--k));
  padding: calc(12px * var(--k)) calc(14px * var(--k));
  border-radius: var(--r-md);
  background: var(--accent-bg);
  font-size: calc(14.5px * var(--k));
  line-height: 1.45;
}
.note > .ico { flex: none; color: var(--icon); }
.warnbox { background: var(--warn-bg); }
.warnbox > .ico { flex: none; color: var(--warn); }
.note-code { flex: none; font: 700 calc(15px * var(--k)) var(--mono); color: var(--accent); }
.errbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10px * var(--k));
  padding: calc(12px * var(--k)) calc(14px * var(--k));
  border-radius: var(--r-md);
  background: var(--err-bg);
  font-size: calc(14.5px * var(--k));
  line-height: 1.45;
}
.errbox-ico { flex: none; color: var(--err); }
.errbox-text { flex: 1; min-width: 55%; }
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8px * var(--k));
  padding: calc(28px * var(--k)) calc(12px * var(--k)) calc(12px * var(--k));
  text-align: center;
}
.empty-art { font-size: calc(52px * var(--k)); line-height: 1.1; }
.empty-title { font-size: calc(19px * var(--k)); font-weight: 720; }
.empty-text { max-width: 32ch; white-space: pre-line; font-size: calc(15px * var(--k)); color: var(--text-2); }
.empty .btn { margin-top: calc(10px * var(--k)); }
/* Пустые/ошибочные состояния (нет eSIM, ничего не найдено, ошибка загрузки) — по вертикальному центру видимой области
   между верхним отступом (.main уже содержит --top-inset) и таббаром: экран — flex-колонка высотой окна минус
   вертикальные padding .main (без дублей отступов); блок flex:1 по центру, чуть выше геометрического (margin-bottom 6vh ≈ -3…4%). */
.main > .screen:has(.center-state) {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--top-inset) - calc(16px * var(--k)) - var(--tabbar-h) - var(--bottom-inset) - calc(28px * var(--k)));
}
.center-state { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; margin-bottom: 6vh; }
.center-state > .empty { padding-top: calc(12px * var(--k)); }

/* ── оплата ───────────────────────────────────────────────────────────── */
.sum { display: flex; align-items: center; gap: calc(12px * var(--k)); padding: calc(14px * var(--k)); }
.sum-flag { flex: none; font-size: calc(34px * var(--k)); line-height: 1; }
.sum-main { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.sum-title { font-size: calc(16.5px * var(--k)); font-weight: 680; overflow-wrap: anywhere; }
.sum-sub { font-size: calc(14px * var(--k)); color: var(--text-2); }
.sum-price { flex: none; font-size: calc(19px * var(--k)); font-weight: 740; font-variant-numeric: tabular-nums; }
.method-ico { flex: none; color: var(--text-2); }
.method-name { flex: 1; min-width: 0; font-size: calc(16px * var(--k)); font-weight: 600; }
.method-price {
  flex: none;
  font-size: calc(15px * var(--k));
  font-weight: 650;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.field { display: flex; flex-direction: column; gap: calc(6px * var(--k)); }
.field-label { font-size: calc(14px * var(--k)); font-weight: 620; color: var(--text-2); }
.input {
  width: 100%;
  height: calc(52px * var(--k));
  padding: 0 calc(14px * var(--k));
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  color: var(--text-1);
  font: 400 calc(17px * var(--k)) var(--font);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 calc(4px * var(--k)) var(--accent-bg); }
.input.is-err { border-color: var(--err); }
.field-hint { font-size: calc(13px * var(--k)); color: var(--text-3); }
.field-hint.is-err { color: var(--err); }
.muted-line {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--k));
  font-size: calc(13.5px * var(--k));
  color: var(--text-3);
}
.consent { font-size: calc(12.5px * var(--k)); line-height: 1.4; color: var(--text-3); text-align: center; }
.demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12px * var(--k));
  text-align: center;
}
.demo-art { font-size: calc(48px * var(--k)); line-height: 1.1; }
.demo-text { max-width: 34ch; color: var(--text-2); }
.demo .sum { width: 100%; text-align: left; }

/* ── заказ ────────────────────────────────────────────────────────────── */
.order-head { display: flex; align-items: center; gap: calc(12px * var(--k)); }
.order-flag { flex: none; font-size: calc(42px * var(--k)); line-height: 1; }
.order-head-main { min-width: 0; }
.order-title { font-size: calc(17px * var(--k)); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.order-sub { font-size: calc(14px * var(--k)); color: var(--text-2); font-variant-numeric: tabular-nums; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: calc(4px * var(--k)) 0 0; list-style: none; }
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6px * var(--k));
  text-align: center;
}
.step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: calc(16px * var(--k));
  right: calc(50% + calc(20px * var(--k)));
  width: calc(100% - calc(40px * var(--k)));
  height: calc(2px * var(--k));
  border-radius: 1px;
  background: var(--line-2);
}
.step-done::before, .step-run::before { background: var(--ok) !important; }
.step-dot {
  display: grid;
  place-items: center;
  width: calc(34px * var(--k));
  height: calc(34px * var(--k));
  border-radius: 50%;
  border: calc(2px * var(--k)) solid var(--line-2);
  background: var(--surface);
  font-size: calc(14px * var(--k));
  font-weight: 700;
  color: var(--text-3);
}
.step-done .step-dot { border-color: var(--ok); background: var(--ok); color: #fff; }
[data-theme="dark"] .step-done .step-dot { color: #062014; }
.step-run .step-dot { border-color: var(--accent); background: var(--accent-bg); }
.step-fail .step-dot { border-color: var(--err); background: var(--err-bg); color: var(--err); }
.step-pulse {
  width: calc(10px * var(--k));
  height: calc(10px * var(--k));
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
.step-label {
  padding: 0 calc(2px * var(--k));
  font-size: calc(13px * var(--k));
  font-weight: 620;
  line-height: 1.25;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.step-run .step-label, .step-done .step-label { color: var(--text-1); }
.status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8px * var(--k));
  padding: calc(26px * var(--k)) calc(18px * var(--k)) calc(22px * var(--k));
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: center;
}
.status-ico {
  display: grid;
  place-items: center;
  width: calc(68px * var(--k));
  height: calc(68px * var(--k));
  margin-bottom: calc(4px * var(--k));
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
}
.status-ok .status-ico { background: var(--ok-bg); color: var(--ok); }
.status-muted .status-ico { background: var(--surface-2); color: var(--text-2); }
.status-emoji { font-size: calc(34px * var(--k)); line-height: 1; }
.status-title { font-size: calc(22px * var(--k)); font-weight: 740; line-height: 1.25; letter-spacing: -0.01em; }
.status-text { max-width: 36ch; font-size: calc(15px * var(--k)); line-height: 1.5; color: var(--text-2); }

/* ── eSIM ─────────────────────────────────────────────────────────────── */
.esim-head { display: flex; align-items: center; gap: calc(14px * var(--k)); }
.esim-flag { flex: none; font-size: calc(50px * var(--k)); line-height: 1; }
.esim-head-main { min-width: 0; }
.esim-head-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6px * var(--k)) calc(10px * var(--k));
  margin-top: calc(6px * var(--k));
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--k));
  min-height: calc(26px * var(--k));
  padding: calc(3px * var(--k)) calc(10px * var(--k));
  border-radius: calc(13px * var(--k));
  background: var(--surface-2);
  color: var(--text-2);
  font-size: calc(12.5px * var(--k));
  font-weight: 650;
  line-height: 1.25;
}
.pill-dot {
  flex: none;
  width: calc(7px * var(--k));
  height: calc(7px * var(--k));
  border-radius: 50%;
  background: currentColor;
}
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-err { background: var(--err-bg); color: var(--err); }
.pill-info { background: var(--accent-bg); color: var(--accent); }
.pill .spinner { border-width: calc(2px * var(--k)); }
.usage { display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
.usage-text { font-size: calc(15px * var(--k)); color: var(--text-2); font-variant-numeric: tabular-nums; }
.usage-text b { font-size: calc(24px * var(--k)); font-weight: 760; color: var(--text-1); }
.bar { height: calc(10px * var(--k)); border-radius: calc(5px * var(--k)); background: var(--surface-3); overflow: hidden; }
.bar i {
  display: block;
  height: 100%;
  min-width: calc(4px * var(--k));
  border-radius: calc(5px * var(--k));
  background: var(--accent);
  transition: width 0.4s var(--ease);
}
.bar-low i { background: var(--warn); }
.usage-sm .bar { height: calc(6px * var(--k)); }
.usage-sm .usage-text { font-size: calc(13.5px * var(--k)); }
.usage-sm .usage-text b { font-size: calc(15px * var(--k)); }
.usage-card { display: flex; flex-direction: column; gap: calc(12px * var(--k)); }
.usage-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6px * var(--k)) calc(12px * var(--k));
  font-size: calc(13.5px * var(--k));
  color: var(--text-2);
}
.usage-meta span { display: inline-flex; align-items: center; gap: calc(6px * var(--k)); }
.usage-meta .ico { flex: none; }
.usage-upd { color: var(--text-3); }
.install { display: flex; flex-direction: column; gap: calc(18px * var(--k)); }
.install-quick { display: flex; flex-direction: column; gap: calc(10px * var(--k)); }
.install-req { font-size: calc(13px * var(--k)); line-height: 1.45; color: var(--text-3); text-align: center; }
.qr { display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--k)); }
.qr-img {
  width: calc(224px * var(--k));
  height: calc(224px * var(--k));
  padding: calc(12px * var(--k));
  border-radius: calc(16px * var(--k));
  background: #fff;
  border: 1px solid var(--line-2);
}
.qr-cap { max-width: 30ch; font-size: calc(13.5px * var(--k)); color: var(--text-2); text-align: center; }
.manual, .howto { display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
.manual-title { font-size: calc(14px * var(--k)); font-weight: 650; color: var(--text-2); }
.copyf {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--k));
  padding: calc(8px * var(--k)) calc(4px * var(--k)) calc(8px * var(--k)) calc(14px * var(--k));
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.copyf-main { flex: 1; min-width: 0; }
.copyf-label { font-size: calc(12.5px * var(--k)); color: var(--text-3); }
.copyf-val {
  font-size: calc(15px * var(--k));
  font-weight: 600;
  color: var(--text-1);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.copyf-btn { color: var(--accent); }
.seg {
  position: relative;
  display: flex;
  padding: calc(3px * var(--k));
  border-radius: calc(12px * var(--k));
  background: var(--surface-2);
}
.seg-ind {
  position: absolute;
  top: calc(3px * var(--k));
  bottom: calc(3px * var(--k));
  left: 0;
  border-radius: calc(9px * var(--k));
  background: var(--seg-ind);
  box-shadow: 0 1px calc(3px * var(--k)) rgba(0, 0, 0, 0.12);
  transition: transform 0.22s var(--ease), width 0.22s var(--ease);
}
.seg-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: calc(40px * var(--k));
  font-size: calc(14.5px * var(--k));
  font-weight: 650;
  color: var(--text-2);
  text-align: center;
}
.seg-btn.on { color: var(--text-1); }
.seg-btn .seg-l1, .seg-btn .seg-l2 { display: block; line-height: 1.2; }
.seg-btn .seg-l2 { font-size: calc(12.5px * var(--k)); font-weight: 550; color: var(--text-3); }
.seg-btn.on .seg-l2 { color: var(--text-2); }
.layer-area .seg { margin-top: calc(2px * var(--k)); }
.layer-area .seg-btn { min-height: calc(48px * var(--k)); padding: calc(4px * var(--k)) calc(6px * var(--k)); }
.olist {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--k));
  padding: 0;
  list-style: none;
  font-size: calc(14.5px * var(--k));
  line-height: 1.45;
  color: var(--text-1);
}
.olist li { display: flex; gap: calc(10px * var(--k)); }
.olist-n {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(24px * var(--k));
  height: calc(24px * var(--k));
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: calc(13px * var(--k));
  font-weight: 700;
}
.tips { display: flex; flex-direction: column; gap: calc(8px * var(--k)); }
.tips-title {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--k));
  font-size: calc(16px * var(--k));
  font-weight: 680;
}
.tips-title .ico { color: var(--icon); }
.tips p { font-size: calc(14.5px * var(--k)); line-height: 1.5; color: var(--text-2); }
.hist-row { display: flex; align-items: center; gap: calc(10px * var(--k)); padding: calc(12px * var(--k)) calc(14px * var(--k)); }
.hist-main { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.hist-title { font-size: calc(15px * var(--k)); font-weight: 600; }
.hist-sub { font-size: calc(13px * var(--k)); color: var(--text-3); }
.hist-price { flex: none; font-size: calc(15px * var(--k)); font-weight: 620; font-variant-numeric: tabular-nums; }

/* ── «Мои eSIM» ───────────────────────────────────────────────────────── */
.pcard, .ecard {
  display: flex;
  width: 100%;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform 0.15s var(--ease);
}
.pcard { align-items: center; gap: calc(12px * var(--k)); padding: calc(12px * var(--k)) calc(8px * var(--k)) calc(12px * var(--k)) calc(14px * var(--k)); }
.pcard-flag, .ecard-flag { flex: none; font-size: calc(32px * var(--k)); line-height: 1; }
.pcard-main, .ecard-main { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.pcard-title { font-size: calc(16px * var(--k)); font-weight: 650; overflow-wrap: anywhere; }
.pcard-sub, .ecard-sub { font-size: calc(13px * var(--k)); color: var(--text-3); }
.pcard-side { flex: none; max-width: 46%; }
.ecard { flex-direction: column; gap: calc(12px * var(--k)); padding: calc(14px * var(--k)); }
.ecard-top { display: flex; align-items: center; gap: calc(12px * var(--k)); }
.ecard-title { font-size: calc(17px * var(--k)); font-weight: 700; overflow-wrap: anywhere; }
.ecard.is-dim .ecard-flag { filter: grayscale(0.7); opacity: 0.8; }
.ecard-cta {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--k));
  padding: calc(10px * var(--k)) calc(12px * var(--k));
  border-radius: calc(12px * var(--k));
  background: var(--accent-bg);
  color: var(--accent);
  font-size: calc(14.5px * var(--k));
  font-weight: 620;
}
.ecard-cta .ico:last-child { margin-left: auto; }

/* ── «Помощь» ─────────────────────────────────────────────────────────── */
.how {
  padding: calc(2px * var(--k)) calc(14px * var(--k));
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  list-style: none;
}
.how-step { display: flex; gap: calc(12px * var(--k)); padding: calc(14px * var(--k)) 0; }
.how-step + .how-step { border-top: 1px solid var(--line); }
.how-n {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(30px * var(--k));
  height: calc(30px * var(--k));
  border-radius: 50%;
  background: var(--btn);
  color: #fff;
  font-size: calc(15px * var(--k));
  font-weight: 700;
}
.how-main { display: flex; flex-direction: column; gap: calc(2px * var(--k)); }
.how-title { font-size: calc(16px * var(--k)); font-weight: 650; }
.how-text { font-size: calc(14.5px * var(--k)); color: var(--text-2); }
.compat {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--k));
  font-size: calc(15px * var(--k));
  line-height: 1.5;
  color: var(--text-1);
}
.ticks {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--k));
  padding: 0;
  list-style: none;
}
.ticks li { display: flex; gap: calc(8px * var(--k)); }
.ticks .ico { flex: none; margin-top: calc(2px * var(--k)); color: var(--ok); }
.lang-row.on .row-title { font-weight: 700; }
.lang-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(28px * var(--k));
  color: var(--accent);
}
.support-btn { margin-top: calc(4px * var(--k)); }

/* ── загрузка, тосты, старт ───────────────────────────────────────────── */
.spinner {
  display: inline-block;
  flex: none;
  border-radius: 50%;
  border: calc(2.5px * var(--k)) solid currentColor;
  border-top-color: transparent;
  animation: spin 0.75s linear infinite;
}
.skel {
  display: block;
  flex: none;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
.toasts {
  position: fixed;
  left: calc(16px * var(--k));
  right: calc(16px * var(--k));
  bottom: calc(var(--tabbar-h) + var(--bottom-inset) + calc(14px * var(--k)));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8px * var(--k));
  pointer-events: none;
}
.app.has-layer .toasts { bottom: calc(var(--bottom-inset) + calc(96px * var(--k))); }
.toast {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--k));
  max-width: calc(440px * var(--k));
  padding: calc(10px * var(--k)) calc(14px * var(--k)) calc(10px * var(--k)) calc(10px * var(--k));
  border-radius: calc(16px * var(--k));
  background: rgba(24, 28, 36, 0.96);
  color: #fff;
  box-shadow: 0 calc(12px * var(--k)) calc(30px * var(--k)) rgba(0, 0, 0, 0.3);
  font-size: calc(14.5px * var(--k));
  font-weight: 550;
  line-height: 1.35;
  pointer-events: auto;
  animation: fadeUp 0.2s var(--ease);
}
.toast-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(28px * var(--k));
  height: calc(28px * var(--k));
  border-radius: calc(9px * var(--k));
  background: rgba(255, 90, 60, 0.18);
  color: #ff7a60;
}
.toast-ok .toast-ico { background: rgba(69, 211, 154, 0.18); color: #59dca6; }
.toast-error .toast-ico { background: rgba(255, 125, 142, 0.18); color: #ff8f9d; }
.splash, .fatal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14px * var(--k));
  min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100vh);
  padding: calc(var(--top-inset) + calc(24px * var(--k))) calc(28px * var(--k)) calc(var(--bottom-inset) + calc(24px * var(--k)));
  text-align: center;
}
.fatal .lead { max-width: 34ch; margin: 0 0 calc(8px * var(--k)); }
.logo-mark { border-radius: calc(16px * var(--k)); box-shadow: 0 calc(12px * var(--k)) calc(28px * var(--k)) -12px rgba(31, 111, 229, 0.9); }
.splash-bar {
  position: relative;
  width: calc(120px * var(--k));
  height: calc(4px * var(--k));
  border-radius: calc(2px * var(--k));
  background: var(--surface-2);
  overflow: hidden;
}
.splash-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: calc(2px * var(--k));
  background: var(--accent);
  will-change: transform;
  animation: slide 1.1s var(--ease) infinite;
}

/* ── анимации ─────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(calc(6px * var(--k))); }
  to { opacity: 1; transform: none; }
}
@keyframes tabIn {
  from { opacity: 0; transform: translate3d(var(--tab-dx, 0), 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes tabPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes tabFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}
@keyframes pulse {
  50% { transform: scale(0.6); opacity: 0.5; }
}
@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Смена вкладки при reduce motion — только короткий fade, без сдвига и «прыжка» иконки. */
  html.nav .main > .screen { animation: tabFade 0.18s linear both !important; }
  html.nav .tab.on .tab-ico svg, .tab:active > span { animation: none !important; transform: none !important; }
}
@media (max-width: 350px) {
  .h1 { font-size: calc(25px * var(--k)); }
  .main, .layer-scroll { padding-left: calc(12px * var(--k)); padding-right: calc(12px * var(--k)); }
  .grid2 { gap: calc(8px * var(--k)); }
  .pkg-gb { font-size: calc(20px * var(--k)); }
}

/* ══ iOS-нативный слой (redesign-ios, 14.10.2026) ════════════════════════
   Поверх базовых правил: сгруппированные списки с отступом разделителя, подписи секций капсом,
   флаги-кружки, ползунок объёма, крупная цена в оплате. */
body { font-weight: 500; font-variant-numeric: tabular-nums; }
.h1 { font-size: calc(32px * var(--k)); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.h2 { font-weight: 800; }
.lead { color: var(--text-3); }
.sec { gap: 0; }
.sec-title, .sec-sub {
  padding: 0 calc(16px * var(--k)) calc(7px * var(--k));
  font-size: calc(13px * var(--k)); line-height: 1.3; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3);
}
.sec-foot { padding: calc(7px * var(--k)) calc(16px * var(--k)) 0; font-size: calc(13px * var(--k)); line-height: 1.4; color: var(--text-3); }
.card { border: 0; border-radius: var(--r-lg); box-shadow: none; }
.btn-primary, .cta { background: var(--btn); color: var(--btn-text); }
.cta { border-radius: calc(14px * var(--k)); min-height: calc(52px * var(--k)); box-shadow: none; }
.btn { border-radius: calc(14px * var(--k)); font-weight: 700; }
.btn-lg { border-radius: calc(14px * var(--k)); min-height: calc(52px * var(--k)); }
.btn-secondary { background: var(--surface); border: 0; color: var(--accent); }
.btn-tinted { background: var(--accent-bg); color: var(--accent); }

/* флаг-кружок */
.flag {
  --fs: 28px;
  display: inline-grid; place-items: center; flex: none;
  width: calc(var(--fs) * var(--k)); height: calc(var(--fs) * var(--k)); border-radius: 50%;
  background: var(--surface-2); color: var(--icon);
  font-size: calc(calc(var(--fs) * var(--k)) * 0.34); font-weight: 800; letter-spacing: 0.02em; line-height: 1;
}
.flag-img { position: relative; overflow: hidden; border-radius: 50%; isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); background: var(--surface-2, #ebe5d8); box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.16); }
.flag-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* глянец (вариант 3): блик сверху слева, лёгкая внутренняя тень по краю, тонкое кольцо */
.flag-img::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.36) 0, rgba(255, 255, 255, 0.10) 28%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0.14) 100%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), inset 0 -1px calc(2.5px * var(--k)) rgba(0, 0, 0, 0.22);
}
[data-theme="light"] .flag-img::after { box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12), inset 0 -1px calc(2.5px * var(--k)) rgba(0, 0, 0, 0.10); }
/* на мелких флагах блик слабее, чтобы не «мылил» */
.flag-img[style*="--fs:28px"]::after, .flag-img[style*="--fs:30px"]::after {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.26) 0, rgba(255, 255, 255, 0.06) 24%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.10) 100%);
}
.flag-dim { opacity: 0.55; filter: grayscale(0.6); }

/* сгруппированный список */
.list { border: 0; border-radius: var(--r-lg); box-shadow: none; background: var(--surface); }
.row { min-height: calc(52px * var(--k)); padding: calc(10px * var(--k)) calc(14px * var(--k)) calc(10px * var(--k)) calc(16px * var(--k)); position: relative; }
.row + .row, .hist-row + .hist-row, .list > * + * { border-top: 0; }
.list > * + *::before {
  content: ""; position: absolute; top: 0; right: 0; left: calc(16px * var(--k));
  height: 1px; background: var(--line); pointer-events: none;
}
.list > .row-lead + *::before, .list > .pcard + *::before, .list > .ecard + *::before { left: calc(56px * var(--k)); }
.list > *, .row, .pcard, .ecard, .hist-row, .fact, .coll, .kv-row { position: relative; }
.row-title { font-weight: 600; }
.row-right { color: var(--text-3); font-weight: 500; font-size: calc(15px * var(--k)); }
.row-chev { opacity: 0.7; }
.row-accent .row-title { color: var(--accent); }
.az-letter { background: transparent; padding: calc(10px * var(--k)) calc(16px * var(--k)) calc(4px * var(--k)); color: var(--accent); font-weight: 800; }
.list > .az-letter + .row::before, .list > .az-letter::before { display: none; }

/* шапка каталога: заголовок уезжает, закреплено только поле поиска */
.shop-head { padding-top: calc(14px * var(--k) - 16px); }
.shop-search {
  position: sticky; top: var(--top-inset); z-index: 20;
  margin: calc(-18px * var(--k)) calc(-16px * var(--k)) 0; padding: calc(8px * var(--k)) calc(16px * var(--k)) calc(10px * var(--k));
  background: var(--bg); transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.shop-search.stuck {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 var(--line);
}
.shop-lead { margin: -10px calc(4px * var(--k)) 0; font-size: calc(15px * var(--k)); }
.search { margin-top: 0; }
.search-ico { left: calc(11px * var(--k)); }
.search-input {
  height: calc(40px * var(--k)); padding: 0 calc(40px * var(--k)) 0 calc(36px * var(--k)); border: 0; border-radius: calc(10px * var(--k));
  background: var(--surface-3); box-shadow: none; font: 500 calc(16px * var(--k)) var(--font);
}
.search-input:focus { box-shadow: 0 0 0 calc(2px * var(--k)) var(--accent); border: 0; }
.search-x { right: 0; }
.lang-btn { height: calc(32px * var(--k)); border: 0; background: var(--surface); font-size: calc(13px * var(--k)); gap: calc(5px * var(--k)); padding: 0 calc(11px * var(--k)); color: var(--text-2); }

/* вкладки */
/* Хит-зона: каждая вкладка — на всю свою ширину и всю высоту бара, вниз до края экрана (включая safe-area),
   без зазоров между вкладками; отступы — внутри кнопки, а не у бара (жалоба: тапы иногда «не доходили»). */
.tabbar { padding: 0 var(--right-inset) 0 var(--left-inset); align-items: stretch; isolation: isolate; }
.tab {
  position: relative; z-index: 1; justify-content: flex-start;
  min-height: calc(49px * var(--k) + var(--bottom-inset));
  padding: calc(12px * var(--k)) 0 calc(calc(5px * var(--k)) + var(--bottom-inset));
  margin: 0; border: 0; background: none; border-radius: 0;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.tab > span { pointer-events: none; }
.tab-ico { width: calc(30px * var(--k)); height: calc(28px * var(--k)); }
.tab.on .tab-ico { background: transparent; }
.tab-label { font-size: calc(11px * var(--k)); font-weight: 700; }

/* страна */
.area-hero { gap: calc(14px * var(--k)); }
.area-hero .h1 { font-size: calc(28px * var(--k)); }
.fact-ico {
  display: inline-grid; place-items: center; flex: none;
  width: calc(30px * var(--k)); height: calc(30px * var(--k)); border-radius: calc(8px * var(--k)); color: var(--on-tone); background: var(--accent);
}
.fact-ico.tone-acc { background: var(--accent); }
.fact-ico.tone-ok { background: var(--ok); }
.fact-ico.tone-warn { background: var(--warn); }
.fact-ico.tone-mute { background: var(--text-3); }
.facts { display: block; gap: 0; padding: 0; }
.fact { align-items: center; padding: calc(11px * var(--k)) calc(16px * var(--k)); min-height: calc(52px * var(--k)); }
.list.facts > .fact + .fact::before { left: calc(58px * var(--k)); }
.fact-label { font-size: calc(15px * var(--k)); color: var(--text-1); font-weight: 600; }
.fact-val { font-size: calc(13px * var(--k)); color: var(--text-3); font-weight: 500; }
.cchip { background: var(--surface-2); border: 0; }
.cchip-code { font-size: calc(11px * var(--k)); font-weight: 800; color: var(--accent); margin-right: calc(2px * var(--k)); }
.dock-sum { display: flex; justify-content: space-between; gap: calc(12px * var(--k)); font-size: calc(14px * var(--k)); color: var(--text-3); padding: 0 calc(2px * var(--k)); }

/* пакеты списком (экран страны и докупка) */
.pkgs, .methods { gap: 0; border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.pkg, .method { border: 0; border-radius: 0; background: transparent; box-shadow: none; position: relative; }
.pkg + .pkg::before, .method + .method::before { content: ""; position: absolute; top: 0; left: calc(52px * var(--k)); right: 0; height: 1px; background: var(--line); }
.method + .method::before { left: calc(58px * var(--k)); }
.pkg.on, .method.on { background: transparent; border: 0; box-shadow: none; }
.pkg.on { background: var(--accent-bg); }
.method-check { width: calc(22px * var(--k)); flex: none; color: var(--accent); display: grid; place-items: center; }
.method-price { color: var(--text-3); }
.method.on .method-price { color: var(--text-1); }
.badge { font-weight: 700; }
.badge-pop { background: var(--btn); color: var(--btn-text); }

/* оплата: крупная цена и чёткая сводка */
.pay-hero { display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--k)); padding: calc(4px * var(--k)) 0 calc(2px * var(--k)); text-align: center; }
.pay-hero-cap { margin-top: calc(8px * var(--k)); font-size: calc(15px * var(--k)); color: var(--text-3); }
.pay-hero-price { font-size: calc(48px * var(--k)); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.pay-hero-sub { font-size: calc(15px * var(--k)); color: var(--text-3); overflow-wrap: anywhere; }
.kv { display: block; }
.kv-row { display: flex; justify-content: space-between; gap: calc(12px * var(--k)); padding: calc(12px * var(--k)) calc(16px * var(--k)); font-size: calc(15px * var(--k)); }
.kv-row span { color: var(--text-3); }
.kv-row b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.kv-cov { flex-direction: column; gap: calc(4px * var(--k)); }
.kv-cov small { font-size: calc(13px * var(--k)); line-height: 1.35; color: var(--text-2); }
.kv-total { font-size: calc(17px * var(--k)); }
.kv-total span { color: var(--text-1); font-weight: 800; }
.kv-total b { font-weight: 800; }
.input { border-radius: calc(10px * var(--k)); border: 0; background: var(--surface); }
.note, .warnbox { border-radius: var(--r-lg); border: 0; }
.note { background: var(--surface); }
.sheet { background: var(--bg-sheet); }

/* заказ */
.steps { background: var(--surface); border-radius: var(--r-lg); padding: calc(14px * var(--k)) calc(6px * var(--k)); }
.step-done .step-dot, [data-theme="dark"] .step-done .step-dot { color: var(--on-tone); }
.status-ico { width: calc(84px * var(--k)); height: calc(84px * var(--k)); }
.status-title { font-size: calc(26px * var(--k)); font-weight: 800; }

/* мои eSIM — строки внутри сгруппированного списка */
.pcard, .ecard { border: 0; border-radius: 0; background: transparent; box-shadow: none; width: 100%; }
.pcard { padding: calc(12px * var(--k)) calc(10px * var(--k)) calc(12px * var(--k)) calc(16px * var(--k)); }
.ecard { padding: calc(14px * var(--k)) calc(16px * var(--k)); gap: calc(10px * var(--k)); }
.ecard-cta { background: var(--accent-bg); border: 0; border-radius: calc(10px * var(--k)); color: var(--accent); }
.pcard:active, .ecard:active { transform: none; background: var(--surface-2); }
.pill { font-weight: 700; }
.bar { height: calc(6px * var(--k)); border-radius: calc(3px * var(--k)); background: var(--surface-3); }
.bar i { background: var(--accent); }
.usage-text b { font-weight: 800; }

/* eSIM, помощь */
.esim-head { gap: calc(12px * var(--k)); }
.tips, .install-card { border: 0; }
.how { padding: 0 calc(16px * var(--k)); border-radius: var(--r-lg); background: var(--surface); border: 0; box-shadow: none; }
.how-n { background: var(--accent-bg); color: var(--accent); font-weight: 800; }
.faq { gap: 0; }
.faq .coll { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.coll-title { font-weight: 600; }
.lang-code-badge { flex: none; width: calc(36px * var(--k)); font-size: calc(13px * var(--k)); font-weight: 800; color: var(--accent); }
.seg { background: var(--surface-3); border-radius: calc(10px * var(--k)); }
.seg-ind { border-radius: calc(8px * var(--k)); }
.empty-art {
  display: grid; place-items: center; width: calc(96px * var(--k)); height: calc(96px * var(--k)); border-radius: calc(28px * var(--k));
  background: var(--surface); color: var(--icon); font-size: 0;
}
.demo-art { display: grid; place-items: center; width: calc(80px * var(--k)); height: calc(80px * var(--k)); border-radius: calc(24px * var(--k)); background: var(--surface); color: var(--icon); }
.no-caps { text-transform: none; letter-spacing: 0.01em; }
.status { border: 0; box-shadow: none; }

/* переключатель темы рядом с языком; тач-зона 44×44 у обеих кнопок */
.head-actions { display: flex; align-items: center; gap: calc(8px * var(--k)); flex: none; }
.lang-btn { position: relative; }
.lang-btn::before { content: ''; position: absolute; inset: -6px -2px; min-height: calc(44px * var(--k)); }
.theme-btn { width: calc(32px * var(--k)); padding: 0; justify-content: center; }
.theme-btn::before { inset: -6px; }

/* плитки-иконки строго по вертикальному центру ячейки (iOS WebView: inline-grid/baseline сдвигали вверх) */
.fact, .row { display: flex; align-items: center; }
.fact-ico { display: flex; align-items: center; justify-content: center; align-self: center; flex-shrink: 0; margin: 0; }
.fact-ico > .ico { display: block; flex-shrink: 0; }
.fact-main, .row-main { align-self: center; justify-content: center; }
.fact { padding-top: calc(11px * var(--k)); padding-bottom: calc(11px * var(--k)); }

/* иконки — вариант 4 (2026-10-14): Phosphor Duotone в цвет акцента, без плиток */
.fact-ico, .fact-ico[class*="tone-"] { width: calc(28px * var(--k)); height: calc(28px * var(--k)); border-radius: 0; background: transparent; color: var(--icon); }
.fact-ico > .ico { width: calc(26px * var(--k)); height: calc(26px * var(--k)); }
.row-accent .fact-ico { color: var(--accent); }

/* Размер интерфейса (esim.uiscale.v1 → --k на <html>, theme-boot.js). Иконки: --is из Icon. */
.ico[style*="--is"] { width: calc(var(--is) * var(--k)); height: calc(var(--is) * var(--k)); }
.size-row { cursor: default; }
.size-row .size-seg { flex: none; margin-left: auto; }
.size-row .seg { min-width: calc(176px * var(--k)); }

/* ══ Размер и тач-зоны (16.10.2026) ═════════════════════════════════════
   Невидимые расширения тач-зон до ≥44px при любом --k; узкие экраны 320px; мелкий текст ≥12px. */
.badge { font-size: calc(12.5px * var(--k)); padding: calc(2px * var(--k)) calc(7px * var(--k)); }
.pkg-per { font-size: max(12px, calc(12.5px * var(--k))); }
/* шапка: тема/язык — зона 44×44 вокруг 32px-кнопок */
.lang-btn::before, .theme-btn::before { inset: auto; top: 50%; left: 50%; width: max(100%, 44px); height: 44px; min-height: 0; transform: translate(-50%, -50%); }
.head-actions { gap: calc(8px * var(--k)); }
/* назад/закрыть и прочие иконки: 44px даже при --k < 1 */
.icon-btn:not(.search-x) { position: relative; }
.icon-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
/* ссылки в согласии под «Оплатить»: оферта тянет зону вверх (на некликабельную строку текста),
   политика — вниз (в нижний отступ дока); визуально без изменений */
.consent { position: relative; }
.consent .link { position: relative; }
.consent .link::after { content: ''; position: absolute; left: -6px; right: -6px; }
.consent .link::after { top: -8px; bottom: -8px; }
.consent .link-terms::after { top: -10px; bottom: -4px; }
.consent .link-privacy::after { top: -4px; bottom: -14px; }
.consent { line-height: 1.55; padding-bottom: calc(2px * var(--k)); }
.sheet-dock .cta { position: relative; z-index: 1; }
.link-hit { position: relative; }
.link-hit::after { content: ''; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
/* каталог: заголовок максимум в 2 строки, ровный перенос */
.h1 { text-wrap: balance; }
@media (max-width: 350px) {
  .hero-row .h1 { font-size: calc(28px * var(--k)); letter-spacing: -0.02em; }
  .search-input, .search-input::placeholder { font-size: calc(15px * var(--k)); }
  .search-input { padding-right: calc(8px * var(--k)); }
  .pkg-top { column-gap: calc(6px * var(--k)); }
  .pkg-top .badge { padding: calc(1px * var(--k)) calc(6px * var(--k)); }
}
/* оплата на низких экранах: компактная шапка, способ оплаты сразу виден над «Оплатить» */
@media (max-height: 640px) {
  .sheet-checkout .pay-hero .flag, .sheet-checkout .pay-hero > :first-child:not(.pay-hero-cap) { display: none; }
  .sheet-checkout .pay-hero-cap { margin-top: 0; font-size: calc(13px * var(--k)); }
  .sheet-checkout .pay-hero-price { font-size: calc(36px * var(--k)); }
  .sheet-checkout .pay-hero { gap: calc(2px * var(--k)); padding: 0; }
  .sheet-checkout .stack { gap: calc(10px * var(--k)); }
  .sheet-checkout .sec-methods { order: -1; }
  .sheet-checkout .pay-hero { order: -2; }
  .sheet-checkout .method { min-height: 48px; padding-block: calc(8px * var(--k)); }
}
/* сегменты (iPhone/Android, размер) — зона ≥44px */
.seg-btn { position: relative; }
.seg-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%); }

/* ── единый отклик нажатий (как у таббара; .pressed ставит lib/press.js, :active — запасной) ───────────
   Строки/ячейки — подсветка фона: появляется сразу, гаснет ~200 мс. Кнопки — сжатие 0.97 + лёгкая прозрачность,
   отпускание — пружиной. Без задержки; при прокрутке/сдвиге >10px press.js снимает .pressed. */
button, a, [role=button] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.row, .coll-head, .pcard, .ecard, .lang-row {
  transition: background-color 0.2s var(--ease);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.row:active, .row.pressed, .coll-head:active, .coll-head.pressed,
.pcard:active, .pcard.pressed, .ecard:active, .ecard.pressed {
  background: var(--surface-2); transform: none; transition-duration: 0s;
}
.btn, .cta, .icon-btn, .lang-btn, .pkg, .method, .dest, .seg-btn, .link, .ecard-cta {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.btn:active:not(:disabled), .btn.pressed, .cta:active:not(:disabled), .cta.pressed,
.lang-btn:active, .lang-btn.pressed, .pkg:active, .pkg.pressed, .method:active, .method.pressed,
.dest:active, .dest.pressed, .ecard-cta.pressed {
  transform: scale(0.97); opacity: 0.86; transition: transform 0.1s var(--ease), opacity 0.1s var(--ease), background-color 0.1s;
}
.icon-btn:active, .icon-btn.pressed { transform: scale(0.94); background: var(--surface-2); transition: transform 0.1s var(--ease), background-color 0s; }
.seg-btn:active, .seg-btn.pressed { transform: scale(0.96); opacity: 0.8; transition: transform 0.1s var(--ease), opacity 0.1s; }
.link:active, .link.pressed, .consent .link.pressed { opacity: 0.55; transition: opacity 0s; }
.tab.pressed > span { transform: scale(0.92); transition: transform 0.12s var(--ease); }
.cta.pressed:not(:disabled) { background: var(--btn-press); }

/* раскрытие: высота 0fr → 1fr, шеврон поворачивается, содержимое проявляется */
.coll-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.24s; visibility: hidden; }
.coll.open .coll-wrap { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
.coll-in { min-height: 0; overflow: hidden; }
.coll-body { opacity: 0; transform: translateY(calc(-4px * var(--k))); transition: opacity 0.2s var(--ease), transform 0.24s var(--ease); }
.coll.open .coll-body { opacity: 1; transform: none; }
.coll-chev { transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); }

/* нижний лист: пружинящий выезд (кривая iOS), фон проявляется; ручка/заголовок — перетаскивание вниз */
.sheet { transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; }
.sheet-scrim { transition: opacity 0.3s var(--ease); }
.sheet-grab-zone { flex: none; padding: calc(2px * var(--k)) 0 calc(4px * var(--k)); touch-action: none; cursor: grab; }
.sheet-head { touch-action: none; }

@media (prefers-reduced-motion: reduce) {
  .btn.pressed, .cta.pressed, .icon-btn.pressed, .lang-btn.pressed, .pkg.pressed, .method.pressed, .dest.pressed,
  .seg-btn.pressed, .ecard-cta.pressed, .tab.pressed > span,
  .btn:active, .cta:active, .icon-btn:active, .lang-btn:active, .pkg:active, .method:active, .seg-btn:active { transform: none !important; }
  .coll-body { transform: none !important; }
}

/* iOS увеличивает страницу при фокусе на поле со шрифтом < 16px — держим не меньше 16px (17.10.2026) */
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { font-size: max(16px, calc(16px * var(--k))) !important; }
/* подсказка поиска тем же начертанием, что и текст поля: Mulish 500, без системного шрифта плейсхолдера iOS */
.search-input::placeholder { font-family: var(--font); font-weight: 500; color: var(--text-3); opacity: 1; -webkit-text-fill-color: var(--text-3); }

/* смена темы: все цвета меняются одним шагом (класс ставит applyTheme на ~2 кадра) */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after {
  transition: none !important;
}

/* кнопка темы: квадрат и иконка — чётные целые px, иначе при --k≠1 (29.44px/15.6px) иконку
   снапит на полпикселя влево-вниз; grid центрирует без влияния gap/line-height */
.theme-btn { display: inline-grid; place-items: center; gap: 0; line-height: 0;
  width: calc(32px * var(--k)); height: calc(32px * var(--k)); }
@supports (width: round(1.5px, 2px)) {
  .theme-btn { width: round(calc(32px * var(--k)), 2px); height: round(calc(32px * var(--k)), 2px); }
  .theme-btn > .ico { width: round(calc(17px * var(--k)), 2px); height: round(calc(17px * var(--k)), 2px); }
}
.theme-btn > .ico { display: block; }