:root {
  color-scheme: dark;
  /* ── Базовая палитра: ЧЁРНЫЙ в приоритете ── */
  --bg-primary: #050505;
  --bg-secondary: #0f0f0f;
  --bg-tertiary: #161616;
  --bg-card: #0d0d0d;
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-strong: rgba(255, 255, 255, 0.07);
  --text-primary: #f5f5f5;
  --text-secondary: #909090;
  --text-muted: #505050;
  /* ── Красный акцент ── */
  --accent-red: #e51515;
  --accent-red-dark: #b80000;
  --accent-red-light: #ff2222;
  --accent-white: #ffffff;
  /* ── Границы ── */
  --border-color: rgba(255, 255, 255, 0.07);
  --border-color-strong: rgba(255, 255, 255, 0.12);
  /* ── Тени ── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.8);
  /* ── Свечение красного (сдержанное = дорого) ── */
  --glow-red: 0 4px 22px rgba(229, 21, 21, 0.38);
  --glow-red-strong: 0 4px 32px rgba(229, 21, 21, 0.6);
  --glow-white: 0 0 16px rgba(255, 255, 255, 0.08);
  /* ── Радиусы ── */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  /* ── Переходы ── */
  --transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  /* ── Dark Glass ── */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur: blur(24px) saturate(1.6);

  /* Эффективные safe-area для верстки.
     JS может переопределить эти значения отдельно для mobile/desktop. */
  --tg-effective-safe-area-inset-top: calc(
    var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) +
    var(--tg-content-safe-area-inset-top, 0px)
  );
  --tg-effective-safe-area-inset-bottom: calc(
    var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) +
    var(--tg-content-safe-area-inset-bottom, 0px)
  );

  /* ── Design tokens v2: единая шкала spacing / типографики / семантические цвета ── */
  /* Spacing — кратно 4px, как iOS/Material */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Типографическая шкала — 5 размеров, 3 веса */
  --fs-xs: 11px;  /* eyebrow/labels */
  --fs-sm: 13px;  /* secondary text */
  --fs-md: 15px;  /* body */
  --fs-lg: 17px;  /* emphasised body / card titles */
  --fs-xl: 22px;  /* section titles */
  --fs-2xl: 28px; /* display */
  --fw-regular: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.45;

  /* Семантические статусы — используются для прогресс-баров, тостов, бейджей */
  --status-ok: #2fbd71;
  --status-ok-bg: rgba(47, 189, 113, 0.14);
  --status-ok-border: rgba(47, 189, 113, 0.38);
  --status-warn: #f5a524;
  --status-warn-bg: rgba(245, 165, 36, 0.14);
  --status-warn-border: rgba(245, 165, 36, 0.4);
  --status-critical: var(--accent-red);
  --status-critical-bg: rgba(229, 21, 21, 0.14);
  --status-critical-border: rgba(229, 21, 21, 0.45);

  /* Easing — единый «бренд» анимаций */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasised: cubic-bezier(0.3, 0, 0, 1);

  /* ── Redesign tokens (from App onboarding handoff, Apr 2026) ─────────────
     Более насыщенный красный и единая шкала elev для iOS-dark темы. */
  --red:         #FF2D2D;
  --red-bright:  #FF4545;
  --red-deep:    #B3001E;
  --red-ink:     #2A0A0D;
  --red-glow:    rgba(255, 45, 45, 0.35);
  --red-soft-bg: rgba(255, 45, 45, 0.08);
  --red-border:  rgba(255, 45, 45, 0.22);
  --bg-elev-1:   #131316;
  --bg-elev-2:   #1B1B20;
  --bg-elev-3:   #24242B;
  --divider:        rgba(255, 255, 255, 0.06);
  --divider-strong: rgba(255, 255, 255, 0.1);
  --text-dim:  #9A9AA3;
  --text-mute: #5E5E68;
  --green:     #3BE07A;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button,
a,
[role="button"],
input,
select,
textarea,
.card[role="button"],
.sheet {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
button:focus,
a:focus,
[role="button"]:focus {
  outline: none;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
}
button,
.sheet,
.backdrop,
.card[role="button"],
.icon-btn,
.ghost-btn,
.primary-btn,
.checkout-device-card,
.checkout-period-card {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  overflow-x: hidden;
  /* Ограничиваем html реальным Telegram-вьюпортом, чтобы body с фиксированной
     высотой не создавал невидимый скролл за пределами вьюпорта (на desktop
     WebView это "съедает" wheel-события и main-content не скроллится). */
  height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  max-height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  overflow: hidden;
}

body {
  margin: 0;
  /* Высоту body жёстко привязываем к Telegram-вьюпорту (а не 100dvh).
     В fullscreen 100dvh/100vh включает область системного bar/home-indicator,
     из-за чего body становится выше реально доступного экрана и нижние блоки
     уезжают за край. --tg-viewport-height обновляется из app.js.
     Не используем min-height: 100dvh — это конфликтует с height в fullscreen. */
  height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  /* Приоритет SF Pro (iOS), затем Inter, затем system */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* safe-area отступы контролируем контейнерами (.screen / фиксированные страницы / sheet),
     чтобы не было "двойной" высоты и лишнего скролла */
  padding-top: 0;
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.app-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(229, 21, 21, 0.20) 0%, transparent 60%),
    rgba(0, 0, 0, 0.35);
  transition: opacity 180ms ease, visibility 180ms ease;
  backdrop-filter: blur(10px) saturate(1.2);
}
.app-preloader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.app-preloader__inner {
  display: grid;
  gap: 12px;
  place-items: center;
  text-align: center;
}

.app-preloader__icon {
  font-size: 44px;
  color: var(--accent-red);
  filter: drop-shadow(var(--glow-red));
  animation: preloaderSpin 900ms linear infinite;
}

.app-preloader__ring {
  display: none;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background:
    conic-gradient(
      from 90deg,
      var(--accent-red) 0deg 55deg,
      rgba(255, 255, 255, 0.10) 55deg 330deg,
      rgba(255, 255, 255, 0.05) 330deg 360deg
    );
  animation: preloaderSpin 900ms linear infinite;
  display: grid;
  place-items: center;
  box-shadow: var(--glow-red);
}

.app-preloader__ring-core {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 1px rgba(229, 21, 21, 0.14) inset;
}

.app-preloader__text {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(245, 245, 245, 0.86);
  font-weight: 600;
}

@keyframes preloaderSpin {
  to { transform: rotate(360deg); }
}

.app-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(180,10,10,0.12) 0%, transparent 70%),
    var(--bg-primary);
  z-index: 0;
}

/* Starfield: тусклые точки на фоне — намёк на глубину, не конкурент контента.
   Alpha'у звёзд мы контролируем в JS, тут общий приглушающий слой. */
.snow-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;
  will-change: contents;
  transform: translateZ(0);
}

.screen {
  position: relative;
  z-index: 2;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  /* Запас снизу: safe-area + 80px. Гарантирует что последний блок (реферальная
     карточка) не прилипает к home-indicator и в конце скролла видно целиком,
     даже на экранах с большой safe-area или без неё. */
  padding: calc(var(--tg-effective-safe-area-inset-top, 0px) + 14px) 16px
    calc(var(--tg-effective-safe-area-inset-bottom, 0px) + 80px);
  /* FLEX column + gap:12px — это правильный layout с правильными отступами.
     КРИТИЧНО: детям ниже добавляется flex-shrink:0 чтобы Flexbox НЕ сжимал их,
     когда контент > viewport. Без этого (flex-shrink:1 default) карточки
     схлопывались, LTE-card становилась полоской, реферал-баннер обрезался. */
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Высоту берём из Telegram.WebApp.viewportStableHeight (выставляется в app.js).
     100dvh как fallback — но в fullscreen он включает системный bar и обрезает
     контент снизу. Из-за max-height scroll остаётся внутри .screen, страница
     целиком не "прокручивается" за пределы Telegram-вьюпорта. */
  height: var(--app-viewport-stable-height, var(--tg-viewport-stable-height, 100dvh));
  max-height: var(--app-viewport-stable-height, var(--tg-viewport-stable-height, 100dvh));
  min-height: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: transparent;
  /* iOS: гарантируем импульсный скролл без залипаний */
  touch-action: pan-y;
  overscroll-behavior-x: none;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* ВАЖНО: flex-shrink: 0 на всех прямых детях .screen. Это ЕДИНСТВЕННАЯ строка,
   которая фиксит все баги сжатия контента:
   - LTE-card сохраняет свою высоту (не сплющивается в полоску)
   - ref-banner полностью видимый
   - при clicking LTE / открытии sheet'а layout не "дышит"
   Flexbox по умолчанию shrink=1, и при max-height=viewport + contents > viewport
   он сжимает детей вместо того, чтобы включить overflow-scroll. */
.screen > * {
  flex-shrink: 0;
}

/* Top Bar */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.user-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--glass-bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  border: 1.5px solid var(--glass-border);
  transition: var(--transition);
}

.avatar:hover {
  border-color: var(--accent-red);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}

.avatar:active {
  transform: scale(1.02);
  transition: var(--transition-fast);
}

.avatar img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  image-rendering: auto;
  display: none;
}

.avatar img.is-loaded {
  display: block;
}

.avatar .initials {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.3px;
  color: var(--text-primary);
}

.user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hello {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.user-id {
  font-size: 13px;
  color: var(--text-secondary);
}

.pill {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}

.pill:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.pill.brand {
  background: var(--bg-secondary);
  border-color: var(--accent-red);
}

.pill svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent-red);
}

/* Cards */
.card {
  background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.06) inset;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  flex-shrink: 0;
}

.card:hover {
  box-shadow: var(--shadow-lg), var(--glow-white);
  transform: translateY(-3px);
  border-color: var(--border-color-strong);
}

.card-title {
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.8px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.subscription .status {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
  margin-bottom: 4px;
  color: var(--text-primary);
  transition: var(--transition);
}

.subscription .status:contains("Активна") {
  color: var(--accent-red);
  text-shadow: var(--glow-red);
}

.sub-meta {
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.progress-line {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-red), var(--accent-red-light));
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6), 0 0 20px rgba(255, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: progressShine 3s ease-in-out infinite;
}

@keyframes progressShine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Buttons */
.ghost-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  cursor: not-allowed;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}


.ghost-btn:not(:disabled) {
  cursor: pointer;
  color: var(--text-primary);
}

.ghost-btn:not(:disabled):hover {
  background: var(--bg-secondary);
  border-color: var(--accent-red);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
  transform: translateY(-2px);
}


.ghost-btn:not(:disabled):active {
  transform: scale(0.96);
  transition: transform 0.08s ease-out;
}

.ghost-btn.alt {
  border-style: dashed;
  cursor: pointer;
}

.ghost-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.primary-btn {
  width: 100%;
  background: linear-gradient(180deg, var(--accent-red-light) 0%, var(--accent-red) 100%);
  color: var(--accent-white);
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px;
  font-size: 15px;
  flex-shrink: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--glow-red), 0 1px 0 rgba(255,255,255,0.15) inset;
  cursor: pointer;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background 0.18s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.primary-btn:hover {
  background: linear-gradient(180deg, #ff3333 0%, var(--accent-red-light) 100%);
  box-shadow: var(--glow-red-strong);
}

.primary-btn:active {
  transform: scale(0.96);
  box-shadow: var(--glow-red);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

.primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.primary-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
}

.primary-btn.pay {
  margin-top: 0;
}

.primary-btn.pay.small {
  padding: 12px;
  font-size: 15px;
}

/* Icon Buttons */
.icon-btn {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 12px 10px;
  display: grid;
  place-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04) inset;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}


.icon-btn:hover {
  background: var(--bg-tertiary);
  border-color: rgba(232, 20, 20, 0.5);
}

.icon-btn:active {
  transform: scale(0.92);
  transition: transform 0.08s ease-out;
}

.icon-btn .icon {
  font-size: 20px;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
}
.icon-btn .ti {
  font-size: 20px;
  line-height: 1;
  color: currentColor;
}

/* Красная кнопка "Профиль" */
#profile-btn {
  color: var(--accent-red);
  border-color: rgba(229, 21, 21, 0.65);
  box-shadow: var(--glow-red);
}

#profile-btn:hover {
  background: rgba(229, 21, 21, 0.10);
  border-color: rgba(255, 34, 34, 0.75);
}

/* Actions */
.actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex-shrink: 0;
}

/* Premium Upgrade Card */
.premium-upgrade-card {
  position: relative;
  isolation: isolate;
  min-height: 112px;
  margin: 0 0 12px;
  padding: 18px;
  overflow: hidden;
  border-radius: 20px;
  color: var(--text-primary);
  background: #111114;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 2px 0 0 #ff3434, 0 14px 34px rgba(0,0,0,.24);
  cursor: pointer;
  transition: transform 120ms ease, border-color 180ms ease, background 180ms ease;
}
.premium-upgrade-card.hidden { display: none; }
.premium-upgrade-card:hover { background: #151518; border-color: rgba(255,255,255,.14); }
.premium-upgrade-card:active { transform: scale(.985); }
.premium-upgrade-card:focus-visible { outline: 2px solid #ff4545; outline-offset: 2px; }
.premium-upgrade-glow { position: absolute; z-index: -1; top: -70px; left: -48px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(255,45,45,.22), transparent 67%); pointer-events: none; }
.premium-upgrade-watermark { position: absolute; z-index: -1; right: -5px; bottom: -42px; color: rgba(255,255,255,.025); font-size: 142px; font-weight: 900; line-height: 1; pointer-events: none; }

.premium-upgrade-content {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 13px;
  min-height: 74px;
}
.premium-upgrade-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #ff5a5a; background: rgba(255,45,45,.12); border: 1px solid rgba(255,45,45,.18); font-size: 21px; }

.premium-upgrade-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.premium-upgrade-eyebrow { color: #ff6060; font-size: 10px; font-weight: 800; letter-spacing: .12em; }

.premium-upgrade-title {
  font-size: 18px;
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.premium-upgrade-subtitle {
  max-width: 230px;
  font-size: 13px;
  line-height: 1.35;
  color: #9797a1;
}
.premium-upgrade-arrow { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.08); font-size: 18px; }
.premium-upgrade-card.is-ending .premium-upgrade-eyebrow { font-size: 9px; letter-spacing: .075em; }
@media (max-width: 380px), (max-height: 690px) {
  .premium-upgrade-card { min-height: 104px; padding: 15px 16px; }
  .premium-upgrade-content { grid-template-columns: 40px minmax(0,1fr) 40px; gap: 11px; min-height: 72px; }
  .premium-upgrade-icon, .premium-upgrade-arrow { width: 40px; height: 40px; }
  .premium-upgrade-title { font-size: 17px; }
  .premium-upgrade-subtitle { font-size: 12px; }
}

/* ── LTE mini-card (per design handoff) ────────────────────────────────────
   ┌──────────────────────────────────────────────────────┐
   │ LTE-ТРАФИК  [23%]         30 ГБ из 130  ›            │
   │ ▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░       │
   └──────────────────────────────────────────────────────┘
   Тап → переход к Управлению трафиком. Chevron справа намекает на переход. */
.lte-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  margin: 0 0 12px;
  border-radius: var(--r-lg);
  background: var(--bg-elev-1);
  border: 1px solid var(--divider);
  cursor: pointer;
  transition: background 180ms ease, transform 120ms ease, border-color 180ms ease;
}
.lte-card:hover   { background: var(--bg-elev-2); }
.lte-card:active  { transform: scale(0.99); }
.lte-card.hidden  { display: none; }

.lte-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.lte-card-top-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lte-card-top-right {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.lte-card-percent {
  padding: 2px 7px;
  font-size: 10px;
}
.lte-card-num {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.lte-card-suffix {
  font-size: 11px;
  color: var(--text-dim);
}
.lte-card-chevron {
  margin-left: 6px;
  color: var(--text-mute);
  font-size: 14px;
  align-self: center;
}

.lte-card.is-empty .lte-card-num { color: var(--red); }
.lte-card.is-empty .lte-card-percent {
  background: rgba(255, 45, 45, 0.18);
  color: #fff;
  border-color: var(--red);
}

/* Progress уже определён выше (class="progress" + .bar) — нужен только
   тонкий оверрайд высоты, если где-то понадобится. Здесь оставляем 6px
   по умолчанию (из design tokens). */
.lte-traffic-bar { height: 6px; }

/* critical state: без жёсткого glow, только более тёмный fill */
.lte-traffic-bar[data-state="critical"] .lte-traffic-bar-fill,
.lte-traffic-bar-fill.danger {
  background: linear-gradient(90deg, var(--red-deep) 0%, var(--red) 100%);
}

/* Старые DOM-элементы (если где-то остались) — физически убираем */
.lte-traffic-card,
.lte-traffic-head,
.lte-traffic-hero,
.lte-traffic-hero-prefix,
.lte-traffic-hero-unit,
.lte-traffic-foot,
.lte-traffic-foot-main,
.lte-traffic-foot-pack { display: none; }

/* Старые DOM-элементы (если где-то остались) — физически убираем */
.lte-traffic-card,
.lte-traffic-head,
.lte-traffic-hero,
.lte-traffic-hero-prefix,
.lte-traffic-hero-unit,
.lte-traffic-label,
.lte-traffic-foot,
.lte-traffic-foot-main,
.lte-traffic-foot-pack { display: none; }

/* Grace-баннер: подписка истекла, идёт обратный отсчёт до удаления данных */
.grace-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.12) 0%, rgba(229, 21, 21, 0.08) 100%);
  border: 1.5px solid rgba(255, 152, 0, 0.38);
  box-shadow: 0 4px 20px rgba(255, 120, 0, 0.14);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.grace-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff9a3c, #e51515);
}
.grace-banner:hover {
  border-color: rgba(255, 152, 0, 0.58);
  box-shadow: 0 4px 24px rgba(255, 120, 0, 0.22);
}
.grace-banner.is-urgent {
  background: linear-gradient(135deg, rgba(229, 21, 21, 0.14) 0%, rgba(229, 21, 21, 0.08) 100%);
  border-color: rgba(229, 21, 21, 0.55);
}
.grace-banner-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.grace-banner-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.grace-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff9a3c;
  box-shadow: 0 0 0 3px rgba(255, 154, 60, 0.22);
  animation: gracePulse 1.8s ease-in-out infinite;
}
.grace-banner.is-urgent .grace-banner-dot {
  background: var(--accent-red);
  box-shadow: 0 0 0 3px rgba(229, 21, 21, 0.25);
}
@keyframes gracePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.8; }
}
.grace-banner-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.grace-banner-btn {
  flex-shrink: 0;
  background: var(--accent-red);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(229, 21, 21, 0.4);
  white-space: nowrap;
}
.grace-banner-btn:hover { background: var(--accent-red-light); }
.grace-banner-btn:active { transform: scale(0.97); }
.grace-banner.hidden { display: none; }

/* Checkout page (страница выбора тарифа и оплаты) */
.checkout-page {
  position: fixed;
  inset: 0;
  /* Жёстко ограничиваем высоту реальным Telegram-вьюпортом, иначе sticky-footer
     уезжает под системный bar на fullscreen, а контент под ним обрезается. */
  height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  max-height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  padding: calc(var(--tg-effective-safe-area-inset-top, 0px) + 20px) 0 0;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 0;
  gap: 0;
  overflow: hidden;
}
.checkout-page.hidden {
  display: none !important;
}
.checkout-page.checkout-slide-active {
  transform: translateX(0);
}

/* ─── PAYG ──────────────────────────────────────────────────────────────── */
.payg-page {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  max-height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  min-height: 0;
  padding: calc(var(--tg-effective-safe-area-inset-top, 0px) + 8px) 0 0;
  gap: 0;
  background:
    radial-gradient(90% 45% at 85% 0%, rgba(255, 62, 67, .16), transparent 66%),
    #080b0e;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22, .8, .25, 1);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
}
.payg-page.checkout-slide-active { transform: translateX(0); }
.payg-page-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 16px 6px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}
.payg-scroll {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  touch-action: pan-y;
  padding: 18px 16px 28px;
}
.payg-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  padding: 25px 20px 21px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
    radial-gradient(75% 110% at 100% 0%, rgba(255, 55, 60, .2), transparent 68%);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.payg-hero::after {
  content: "S";
  position: absolute;
  right: -8px;
  bottom: -66px;
  color: rgba(255,255,255,.035);
  font-size: 190px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.payg-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff6568;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}
.payg-hero-chip .live-dot { width: 7px; height: 7px; background: #ff4b50; box-shadow: 0 0 13px rgba(255,75,80,.85); }
.payg-hero h1 {
  position: relative;
  z-index: 1;
  margin: 14px 0 9px;
  color: #f7f8fa;
  font-size: clamp(29px, 8.2vw, 39px);
  line-height: 1.03;
  letter-spacing: -.045em;
}
.payg-hero p {
  position: relative;
  z-index: 1;
  max-width: 310px;
  margin: 0;
  color: rgba(236,240,244,.6);
  font-size: 13px;
  line-height: 1.5;
}
.payg-rate-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.payg-rate-card {
  min-width: 0;
  padding: 13px 13px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(4, 8, 10, .28);
}
.payg-rate-card.is-lte {
  background: linear-gradient(145deg, rgba(255, 72, 82, .1), rgba(4, 8, 10, .3));
}
.payg-rate-card > span {
  display: block;
  color: rgba(255,255,255,.48);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.payg-rate-card > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 7px;
  white-space: nowrap;
}
.payg-rate-card strong {
  color: #fff;
  font-size: clamp(26px, 8vw, 34px);
  line-height: .95;
  letter-spacing: -.045em;
}
.payg-rate-card b {
  color: rgba(255,255,255,.68);
  font-size: 11px;
  font-weight: 750;
}
.payg-rate-card small {
  display: block;
  min-height: 22px;
  margin-top: 6px;
  color: rgba(255,255,255,.34);
  font-size: 9px;
  line-height: 1.25;
}
.payg-content { display: grid; gap: 12px; margin-top: 13px; }
.payg-benefits, .payg-how, .payg-topup-card, .payg-history-card {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 19px;
  background: rgba(255,255,255,.035);
}
.payg-benefits { padding: 5px 15px; }
.payg-benefit {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;
  align-items: center;
  min-height: 68px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.payg-benefit:last-child { border-bottom: 0; }
.payg-benefit > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(255,77,81,.1);
  color: #ff5b5f;
  font-size: 18px;
}
.payg-benefit div { display: grid; gap: 3px; }
.payg-benefit strong { color: #f5f6f8; font-size: 13px; }
.payg-benefit span { color: rgba(255,255,255,.43); font-size: 11px; }
.payg-how { padding: 16px; }
.payg-how > span, .payg-section-title { color: #f4f5f7; font-size: 13px; font-weight: 800; }
.payg-how ol { display: grid; gap: 12px; margin: 14px 0 0; padding-left: 21px; color: rgba(255,255,255,.54); font-size: 12px; line-height: 1.4; }
.payg-how li::marker { color: #ff555a; font-weight: 800; }
.payg-how b { color: rgba(255,255,255,.86); }
.payg-legal { margin: 2px 4px; color: rgba(255,255,255,.36); font-size: 10px; line-height: 1.45; }
.payg-action-bar {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 16px calc(10px + var(--tg-effective-safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(184, 198, 193, .1);
  background: rgba(8, 13, 12, .94);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px) saturate(1.15);
}
.payg-main-btn {
  margin: 0;
  min-height: 54px;
  border: 0;
  border-radius: 27px;
  color: #130609;
  background: linear-gradient(135deg, #ff5b68, #ff3549 54%, #ed1837);
  box-shadow: 0 16px 42px rgba(255, 42, 60, .19), inset 0 1px rgba(255, 255, 255, .16);
}
.payg-main-btn:hover {
  background: linear-gradient(135deg, #ff6874, #ff4053 54%, #f2213e);
  box-shadow: 0 16px 42px rgba(255, 42, 60, .22), inset 0 1px rgba(255, 255, 255, .18);
}
.payg-main-btn:disabled {
  color: rgba(19, 6, 9, .58);
  background: linear-gradient(135deg, #b96b72, #aa5964);
  box-shadow: none;
}
.backdrop.payg-confirm-layer { z-index: 10058; }
.sheet.payg-confirm-layer { z-index: 10059; }
.payg-confirm-content {
  display: grid;
  justify-items: stretch;
  gap: 0;
  padding: 8px 2px 2px;
}
.payg-confirm-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #ff6671;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}
.payg-confirm-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 17px auto 13px;
  border: 1px solid rgba(255, 88, 99, .24);
  border-radius: 19px;
  color: #ff6470;
  background: linear-gradient(145deg, rgba(255, 66, 80, .14), rgba(255, 66, 80, .04));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 14px 34px rgba(78, 4, 14, .18);
  font-size: 27px;
}
.payg-confirm-content h2 {
  margin: 0;
  color: #f7f8f8;
  text-align: center;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.payg-confirm-lead {
  max-width: 340px;
  margin: 9px auto 17px;
  color: rgba(232, 238, 236, .56);
  text-align: center;
  font-size: 12px;
  line-height: 1.48;
}
.payg-confirm-facts {
  overflow: hidden;
  border: 1px solid rgba(184, 198, 193, .1);
  border-radius: 19px;
  background: rgba(17, 23, 21, .84);
}
.payg-confirm-facts > div {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 11px;
  align-items: center;
  min-height: 61px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(184, 198, 193, .08);
}
.payg-confirm-facts > div:last-child { border-bottom: 0; }
.payg-confirm-facts i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #ff606c;
  background: rgba(255, 64, 78, .1);
  font-size: 18px;
}
.payg-confirm-facts span { display: grid; gap: 2px; }
.payg-confirm-facts strong { color: rgba(247,249,248,.92); font-size: 12px; }
.payg-confirm-facts small { color: rgba(220,229,226,.43); font-size: 10px; line-height: 1.35; }
.payg-confirm-legal {
  margin: 13px 5px 12px;
  color: rgba(220,229,226,.4);
  text-align: center;
  font-size: 9.5px;
  line-height: 1.45;
}
.payg-confirm-legal button {
  padding: 0;
  border: 0;
  color: rgba(255, 102, 113, .82);
  background: none;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.payg-confirm-submit {
  min-height: 54px;
  margin: 0;
  border: 0;
  border-radius: 27px;
  color: #150609;
  background: linear-gradient(135deg, #ff6672, #ff3549 54%, #ed1837);
  box-shadow: 0 16px 42px rgba(255, 42, 60, .18), inset 0 1px rgba(255,255,255,.14);
  font-size: 13px;
  font-weight: 800;
}
.payg-confirm-cancel {
  min-height: 40px;
  margin-top: 5px;
  border: 0;
  color: rgba(226, 234, 232, .45);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}
.payg-wallet-card {
  padding: 19px;
  border: 1px solid rgba(255,89,93,.22);
  border-radius: 21px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,66,71,.18), transparent 62%),
    rgba(255,255,255,.045);
}
.payg-wallet-top, .payg-card-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.payg-wallet-top > span:first-child { color: rgba(255,255,255,.52); font-size: 12px; }
.payg-status-pill {
  padding: 5px 8px;
  border: 1px solid rgba(79,207,110,.2);
  border-radius: 999px;
  color: #67d47b;
  background: rgba(70,190,96,.08);
  font-size: 10px;
  font-weight: 750;
}
.payg-status-pill.is-paused { border-color: rgba(255,96,100,.22); color: #ff686c; background: rgba(255,70,76,.08); }
.payg-wallet-value { margin-top: 13px; color: #fff; font-size: 38px; font-weight: 850; line-height: 1; letter-spacing: -.045em; }
.payg-wallet-forecast { margin-top: 8px; color: rgba(255,255,255,.5); font-size: 11px; }
.payg-wallet-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.46);
  font-size: 10px;
  line-height: 1.4;
}
.payg-wallet-meter i {
  flex: 0 0 auto;
  color: #ff5964;
  font-size: 14px;
}
.payg-topup-card, .payg-history-card { padding: 16px; }
.payg-topup-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 13px; }
.payg-topup-chip {
  min-height: 39px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 750;
}
.payg-topup-chip.selected { border-color: rgba(255,80,84,.65); color: #fff; background: rgba(255,65,70,.11); }
.payg-custom-topup {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: rgba(255,255,255,.46);
  font-size: 10px;
}
.payg-custom-topup-field {
  display: flex;
  align-items: center;
  min-height: 45px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}
.payg-custom-topup-field:focus-within { border-color: rgba(255,80,84,.65); box-shadow: 0 0 0 3px rgba(255,65,70,.08); }
.payg-custom-topup-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
}
.payg-custom-topup-field input::placeholder { color: rgba(255,255,255,.25); }
.payg-custom-topup-field b { color: rgba(255,255,255,.5); font-size: 13px; }
.payg-card-line { gap: 9px; margin: 15px 0; color: rgba(255,255,255,.54); font-size: 11px; }
.payg-card-line > span { flex: 1; }
.payg-card-line > i { color: #ff5c60; font-size: 17px; }
.payg-card-line button { border: 0; color: rgba(255,255,255,.68); background: transparent; font-size: 11px; font-weight: 750; }
.payg-no-auto { display: flex; justify-content: center; gap: 6px; margin-top: 10px; color: rgba(255,255,255,.34); font-size: 10px; }
.payg-no-auto i { color: #63ca77; }
.payg-ledger-list { display: grid; gap: 0; margin-top: 9px; }
.payg-ledger-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; min-height: 53px; border-top: 1px solid rgba(255,255,255,.055); }
.payg-ledger-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.62); }
.payg-ledger-copy { display: grid; gap: 2px; color: rgba(255,255,255,.76); font-size: 11px; }
.payg-ledger-copy small { color: rgba(255,255,255,.34); font-size: 9px; }
.payg-ledger-amount { color: #69d07b; font-size: 11px; font-weight: 800; }
.payg-ledger-amount.is-debit { color: rgba(255,255,255,.62); }
.plan-switch-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 19px;
  background:
    radial-gradient(95% 145% at 100% 0%, rgba(255,70,78,.15), transparent 64%),
    rgba(255,255,255,.035);
}
.plan-switch-card::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -52px;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 50%;
  pointer-events: none;
}
.plan-switch-card--payg { margin: 15px 16px 4px; }
.plan-switch-kicker {
  color: #ff646d;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .13em;
}
.plan-switch-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 11px;
  align-items: center;
}
.plan-switch-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255,83,91,.15);
  border-radius: 13px;
  color: #ff5b65;
  background: rgba(255,65,75,.09);
  font-size: 19px;
}
.plan-switch-heading > div { display: grid; gap: 4px; min-width: 0; }
.plan-switch-heading strong { color: #f7f9f8; font-size: 13px; line-height: 1.25; }
.plan-switch-heading small { color: rgba(232,238,236,.46); font-size: 10px; line-height: 1.45; }
.plan-switch-button {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255,83,91,.28);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,78,89,.2), rgba(255,45,62,.09));
  font-size: 11px;
  font-weight: 800;
}
.plan-switch-button:disabled { opacity: .55; }
.plan-switch-cancel {
  min-height: 30px;
  border: 0;
  color: rgba(235,240,239,.5);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}
#premium-payg-confirm-backdrop { z-index: 10066; }
#premium-payg-confirm-sheet { z-index: 10067; }
.checkout-payg-offer {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 16px;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 3px 0 12px;
  padding: 18px 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(255,80,85,.3);
  border-radius: 18px;
  text-align: left;
  background:
    radial-gradient(85% 130% at 100% 0%, rgba(255,66,71,.2), transparent 67%),
    rgba(255,255,255,.045);
}
.checkout-payg-new { position: absolute; top: 0; left: 14px; transform: translateY(-1px); padding: 4px 7px; border-radius: 0 0 7px 7px; color: #fff; background: #f3454b; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.checkout-payg-copy { display: grid; gap: 4px; padding-top: 5px; }
.checkout-payg-copy strong { color: #fff; font-size: 13px; }
.checkout-payg-copy small { color: rgba(255,255,255,.42); font-size: 10px; }
.checkout-payg-price { display: grid; justify-items: end; gap: 2px; }
.checkout-payg-price b { color: #fff; font-size: 15px; }
.checkout-payg-price small { color: rgba(255,255,255,.4); font-size: 9px; }
.checkout-payg-offer > i { color: rgba(255,255,255,.48); }

@media (min-width: 620px) {
  .payg-scroll { width: min(100%, 560px); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .payg-page { transition: none; }
}

#main-content.hidden {
  display: none !important;
}

.checkout-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 24px;
  /* Сумма = запас под sticky-footer (высота кнопки + summary ~180px) + safe-area.
     Когда Telegram меняет viewport, --tg-effective-safe-area-inset-bottom
     обновляется из app.js — последний блок всегда доступен для скролла. */
  padding-bottom: calc(200px + var(--tg-effective-safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, var(--bg-primary) 0%, var(--bg-primary) 75%, transparent 100%);
}

.checkout-header {
  margin-bottom: 4px;
  padding: 0 16px 8px;
}
.checkout-back-btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.1s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.checkout-back-btn:active {
  opacity: 0.6;
  transition: opacity 0.06s ease;
}
.checkout-hero {
  text-align: center;
  margin-bottom: 16px;
  padding: 4px 0;
}
.checkout-hero-title {
  font-size: clamp(22px, 6vw, 26px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0 0 8px 0;
  letter-spacing: -0.025em;
}
.checkout-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(232, 20, 20, 0.12);
  border: 1px solid rgba(232, 20, 20, 0.3);
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.checkout-custom-tariff-note {
  margin: 2px 0 10px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(229, 21, 21, 0.28);
  background: rgba(229, 21, 21, 0.1);
  box-shadow: 0 1px 10px rgba(229, 21, 21, 0.12) inset;
}
.checkout-custom-tariff-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-red);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.checkout-custom-tariff-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.checkout-lte-renewal-note {
  margin: 4px 0 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(229, 21, 21, 0.22);
  background: rgba(229, 21, 21, 0.06);
  box-shadow: 0 1px 10px rgba(229, 21, 21, 0.08) inset;
}
.checkout-lte-renewal-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.checkout-lte-renewal-icon {
  font-size: 18px;
  color: var(--accent-red);
}
.checkout-lte-renewal-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-red);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.checkout-lte-renewal-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkout-lte-renewal-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.checkout-lte-renewal-row > i {
  font-size: 16px;
  color: rgba(229, 21, 21, 0.5);
  flex-shrink: 0;
  margin-top: 1px;
}
.renewal-lte-warning-sheet { max-height: min(430px, 72vh); }
#renewal-lte-warning-backdrop { z-index: 10062 !important; }
#renewal-lte-warning-sheet { z-index: 10063 !important; }
.renewal-lte-warning-content {
  display: grid;
  gap: 14px;
  padding: 10px 20px max(20px, var(--tg-effective-safe-area-inset-bottom));
}
.renewal-lte-warning-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,83,91,.24);
  border-radius: 15px;
  color: #ff5660;
  background: rgba(255,61,72,.09);
  font-size: 23px;
}
.renewal-lte-warning-kicker { color: #ff5862; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.renewal-lte-warning-content h2 { margin: 6px 0 7px; color: #f8f9f9; font-size: 20px; letter-spacing: -.025em; }
.renewal-lte-warning-content p { margin: 0; color: rgba(232,238,236,.55); font-size: 12px; line-height: 1.55; }
.renewal-lte-warning-content .ghost-btn { min-height: 42px; margin: -5px 0 0; }
.checkout-lte-renewal-row b {
  color: var(--text-primary);
}
.checkout-discount-timer {
  margin: 2px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(229, 21, 21, 0.35);
  background: rgba(229, 21, 21, 0.14);
  box-shadow: 0 0 10px rgba(229, 21, 21, 0.18);
}
.checkout-discount-badge {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--accent-red);
  border-radius: 999px;
  padding: 2px 7px;
}
.checkout-discount-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-red-light);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.checkout-section {
  margin-bottom: 10px;
}
.checkout-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px 0;
}
.checkout-section:has(.checkout-periods) .checkout-section-title {
  margin-bottom: 12px;
}
.checkout-section-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 6px 0;
}
.checkout-section-lte {
  font-size: 12px;
  color: var(--accent-red-light);
  margin: 0 0 10px 0;
}
.checkout-devices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.checkout-tariffs-grid {
  gap: 10px;
}
.checkout-device-card.checkout-tariff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-height: 152px;
  padding: 10px 8px 12px;
  grid-template-rows: none;
}
.checkout-device-card.checkout-tariff-card .checkout-device-head {
  position: relative;
  width: 100%;
  min-height: 22px;
}
.checkout-tariff-spec {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.25;
  text-align: center;
  padding: 4px 2px 2px;
  max-width: 100%;
}
.checkout-tariff-hint {
  font-size: 9px;
  color: var(--text-secondary);
  opacity: 0.85;
  margin-top: 2px;
}
.checkout-device-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 8px 8px 10px;
  min-height: 96px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease-out, border-color 0.15s ease;
  display: grid;
  grid-template-rows: 20px 24px 14px 18px;
  align-items: start;
  justify-items: center;
  gap: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.checkout-device-card:focus {
  outline: none;
}
.checkout-device-card:active {
  transform: scale(0.95);
  transition: transform 0.08s ease-out;
}
.checkout-device-card:hover {
  border-color: rgba(255, 0, 0, 0.45);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.38), 0 0 14px rgba(255, 0, 0, 0.08);
}
.checkout-device-card.selected {
  border-color: var(--accent-red);
  background: rgba(232, 20, 20, 0.1);
  box-shadow: 0 0 0 1px var(--accent-red) inset, 0 4px 16px rgba(0,0,0,0.4);
}
.checkout-device-card.selected::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  background: var(--accent-red);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 8px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 1px 6px rgba(255, 0, 0, 0.4);
}
.checkout-device-card.locked {
  opacity: 0.62;
  cursor: not-allowed;
}
.checkout-device-head {
  grid-row: 1;
  position: relative;
  width: 100%;
  min-height: 20px;
  display: block;
}
.checkout-device-badge {
  position: absolute;
  top: 0;
  right: 6px;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--accent-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 6px rgba(255, 0, 0, 0.35);
  pointer-events: none;
}
.checkout-device-badge-alt {
  background: rgba(180, 70, 70, 0.85);
  color: #ffc4c4;
  box-shadow: 0 1px 6px rgba(140, 50, 50, 0.35);
}
.checkout-device-badge-pale {
  background: rgba(170, 65, 65, 0.8);
  color: #ffb8b8;
  box-shadow: 0 1px 6px rgba(120, 45, 45, 0.3);
}
.checkout-device-badge-muted {
  background: var(--border-color-strong);
  color: var(--text-secondary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.checkout-device-num {
  grid-row: 2;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.checkout-device-label {
  grid-row: 3;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.2;
}
.checkout-device-price {
  grid-row: 4;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-red);
  line-height: 1.2;
}
.checkout-periods {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkout-period-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 13px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease-out, border-color 0.15s ease;
  display: grid;
  grid-template-columns: auto 1fr minmax(68px, auto);
  align-items: start;
  gap: 8px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.checkout-period-card:focus {
  outline: none;
}
.checkout-period-card:active {
  transform: scale(0.98);
  transition: transform 0.08s ease-out;
}
.checkout-period-card:hover {
  border-color: rgba(255, 0, 0, 0.5);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.42), 0 0 16px rgba(255, 0, 0, 0.1);
}
.checkout-period-card.selected {
  border-color: var(--accent-red);
  background: rgba(232, 20, 20, 0.08);
  box-shadow: 0 0 0 1px var(--accent-red) inset, 0 4px 16px rgba(0,0,0,0.4);
}
.checkout-period-radio {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: transparent;
  transition: var(--transition);
  flex-shrink: 0;
}
.checkout-period-card.selected .checkout-period-radio {
  border-color: var(--accent-red);
  background: var(--accent-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.35);
}
.checkout-period-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
}
.checkout-period-card:has(.checkout-period-badge) {
  padding-top: 26px;
}
.checkout-period-main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.checkout-period-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.checkout-period-permonth {
  font-size: 11px;
  color: var(--text-secondary);
}
.checkout-period-total {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-red);
  text-align: right;
  white-space: nowrap;
  min-width: 68px;
  text-shadow: 0 0 12px rgba(255, 0, 0, 0.2);
}
.checkout-period-meta {
  grid-column: 2;
  font-size: 10px;
  color: var(--text-muted);
}
.checkout-period-old {
  grid-column: 2;
  font-size: 11px;
  color: var(--text-muted);
}
.checkout-period-old-price {
  text-decoration: line-through;
}
.checkout-period-discount {
  color: var(--accent-red);
  font-weight: 600;
  margin-left: 3px;
}
.checkout-period-save {
  grid-column: 1 / -1;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 0, 0, 0.12);
  border: 1px solid rgba(255, 0, 0, 0.25);
  color: var(--accent-red);
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
  margin-top: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), 0 0 10px rgba(255, 0, 0, 0.06);
}
.checkout-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  flex-shrink: 0;
  padding: 10px 16px calc(14px + var(--tg-effective-safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.97) 60%, rgba(10,10,10,0) 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.checkout-footer-hint {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
  text-align: center;
}

.checkout-price-breakdown--footer {
  margin: -4px 0 10px 0;
  text-align: center;
}
/* position: fixed внутри transformed родителя позиционируется относительно него — идеально */
.checkout-page .checkout-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 51;
}
.checkout-summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  margin-bottom: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.checkout-summary-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.checkout-summary-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.checkout-summary-plan {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.checkout-summary-detail {
  font-size: 12px;
  color: var(--text-secondary);
}
.checkout-price-breakdown {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(229, 21, 21, 0.08);
  border: 1px solid rgba(229, 21, 21, 0.25);
  border-radius: 14px;
  padding: 8px 10px;
  line-height: 1.35;
}

/* Separate tariff-change screen: the catalogue never jumps or disappears. */
.checkout-page > .checkout-header,
.checkout-page > .checkout-scroll {
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.checkout-page.is-transition-view > .checkout-header,
.checkout-page.is-transition-view > .checkout-scroll {
  transform: translate3d(-24px, 0, 0);
  opacity: 0;
  pointer-events: none;
}
.checkout-transition-page {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  /* Absolute children do not inherit the checkout padding. Keep the whole
     transition chrome below Telegram's fullscreen controls explicitly. */
  padding-top: calc(var(--tg-effective-safe-area-inset-top, 0px) + 8px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 5%, rgba(255, 70, 82, 0.09), transparent 31%),
    var(--bg-primary);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0s linear 0.26s;
}
.checkout-transition-preparing {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding:
    calc(var(--tg-effective-safe-area-inset-top, 0px) + 24px)
    22px
    calc(var(--tg-effective-safe-area-inset-bottom, 0px) + 24px);
  color: var(--text-primary);
  background: rgba(5, 5, 5, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  opacity: 1;
  transition: opacity 160ms ease, visibility 160ms ease;
}
.checkout-transition-preparing.hidden {
  display: grid !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.checkout-transition-preparing__spinner {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 87, 96, 0.27);
  border-radius: 15px;
  color: #ff6670;
  background: rgba(255, 55, 70, 0.1);
  font-size: 21px;
}
.checkout-transition-preparing__spinner i { animation: checkout-transition-spin 760ms linear infinite; }
.checkout-transition-preparing > span:last-child { display: grid; min-width: 0; gap: 4px; }
.checkout-transition-preparing strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.checkout-transition-preparing small { color: var(--text-secondary); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
@keyframes checkout-transition-spin { to { transform: rotate(360deg); } }
.checkout-transition-page.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
.checkout-transition-page-header {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) auto minmax(78px, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(9, 13, 13, 0.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.checkout-transition-back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: fit-content;
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px 7px 5px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.checkout-transition-back i { font-size: 19px; }
.checkout-transition-page-brand {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.checkout-transition-page-header-spacer { min-width: 0; }
.checkout-transition-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px calc(190px + var(--tg-effective-safe-area-inset-bottom, 0px));
}
.checkout-transition-panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(255, 88, 98, 0.27);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 75, 87, 0.15), transparent 43%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.024));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 18px 44px rgba(0, 0, 0, 0.2);
}
.checkout-transition-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-bottom: 7px;
}
.checkout-transition-kicker,
.checkout-transition-status {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.checkout-transition-kicker { color: rgba(255, 128, 132, 0.96); }
.checkout-transition-status {
  flex: 0 1 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-align: center;
}
.checkout-transition-title {
  max-width: 100%;
  margin: 0 0 5px;
  color: var(--text-primary);
  font-size: clamp(17px, 5vw, 21px);
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.checkout-transition-route {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 17px 0 12px;
}
.checkout-transition-route span {
  min-width: 0;
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-transition-route span:last-child {
  border-color: rgba(255, 81, 93, 0.28);
  background: rgba(255, 55, 70, 0.09);
  color: #ff7a82;
}
.checkout-transition-route i { flex: 0 0 auto; color: rgba(255, 113, 121, 0.74); }
.checkout-transition-copy {
  max-width: 100%;
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.checkout-transition-breakdown {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.checkout-transition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}
.checkout-transition-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.checkout-transition-row > strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.checkout-transition-row.is-total {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
  font-weight: 700;
}
.checkout-transition-periods {
  min-width: 0;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.checkout-transition-periods > span {
  display: block;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
}
.checkout-transition-periods > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.checkout-transition-periods button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-transition-periods button.selected {
  border-color: rgba(255, 78, 90, 0.44);
  background: rgba(255, 54, 70, 0.11);
  color: #ff8188;
}
.checkout-transition-secondary {
  width: 100%;
  min-width: 0;
  margin-top: 11px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.checkout-transition-assurance {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  max-width: 560px;
  min-width: 0;
  margin: 12px auto 0;
  padding: 0 4px;
  color: var(--text-muted);
}
.checkout-transition-assurance > i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 58, 73, 0.08);
  color: #ff6670;
}
.checkout-transition-assurance span { display: grid; min-width: 0; }
.checkout-transition-assurance strong { color: var(--text-secondary); font-size: 11px; }
.checkout-transition-assurance small { margin-top: 2px; font-size: 9px; line-height: 1.35; overflow-wrap: anywhere; }

@media (max-width: 360px) {
  .checkout-transition-scroll { padding-inline: 12px; }
  .checkout-transition-panel { padding: 14px; border-radius: 20px; }
  .checkout-transition-row { gap: 8px; font-size: 11px; }
  .checkout-transition-head { align-items: flex-start; }
  .checkout-transition-page-header { grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr); padding-inline: 9px; }
  .checkout-transition-back { padding-right: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-transition-page,
  .checkout-page > .checkout-header,
  .checkout-page > .checkout-scroll,
  .checkout-transition-preparing { transition: none; }
  .checkout-transition-preparing__spinner i { animation-duration: 1.4s; }
}
.checkout-summary-right {
  text-align: right;
  flex-shrink: 0;
}
.checkout-summary-to-pay {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.checkout-summary-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-red);
  text-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
}
.checkout-cta-btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(232, 20, 20, 0.4);
}
.checkout-trial-wrap {
  margin-top: 10px;
  padding-bottom: 8px;
}
.checkout-trial-wrap.hidden {
  display: none;
}
.checkout-trial-card {
  background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 12px 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}
.checkout-trial-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.checkout-trial-desc {
  font-size: 11px;
  color: var(--text-secondary);
}
.checkout-trial-btn {
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 14px;
  background: transparent;
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  cursor: pointer;
  transition: var(--transition);
}
.checkout-trial-btn:hover {
  background: rgba(255, 0, 0, 0.12);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.15);
}

/* Referral Card (кликабельная — открывает реферальную программу) */
.card.referral {
  cursor: pointer;
}

.referral {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ref-header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ref-header svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent-red);
  stroke-width: 2;
}

.ref-header .subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 2px;
}

.ref-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
}

.ref-cta svg {
  width: 28px;
  height: 28px;
  stroke: var(--accent-red);
  stroke-width: 2;
}

.ref-text {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* Subscription actions: info + renew */
.subscription-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.renew-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--accent-red);
  background: transparent;
  color: var(--accent-red);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.2);
}

.renew-btn:hover {
  background: rgba(255, 0, 0, 0.12);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.35);
  transform: translateY(-2px);
}

.renew-btn:active {
  transform: translateY(0);
}

.renew-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* Duration select (1 or 3 months) */
.duration-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.duration-option-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.duration-option-card:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-red);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.2);
}

.duration-option-card.duration-option-popular {
  border-color: var(--accent-red);
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(255, 0, 0, 0.08) 100%);
  box-shadow: 0 0 16px rgba(255, 0, 0, 0.15);
}

.duration-option-card.duration-option-popular:hover {
  box-shadow: 0 0 24px rgba(255, 0, 0, 0.3);
}

.duration-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 12px;
}

.duration-option-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.duration-option-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.duration-option-months {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.duration-option-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-red);
  min-width: 72px;
  text-align: right;
  flex-shrink: 0;
}

.duration-option-meta {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

body.sheet-open {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
  z-index: 8;
}

.backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Непрозрачный фон вместо тяжёлого backdrop-filter blur —
     blur на весь экран во время slide-up кидал FPS до 10 на iOS. */
  background: #0C0C0C;
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  border: 0;
  padding: 10px 20px calc(24px + var(--tg-effective-safe-area-inset-bottom, 0px));
  /* Только мягкий drop-shadow без границы — sheet «плавает» чисто */
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.55);
  transform: translateY(105%);
  transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  z-index: 9;
  max-width: 520px;
  margin: 0 auto;
  /* Прибиваем к Telegram-вьюпорту вместо 92vh: в fullscreen 92vh вырастает за
     системный bar сверху, шапка/кнопка close оказываются под ним, и верх контента
     обрезается. Оставляем 12px зазор сверху, плюс safe-area. */
  max-height: calc(var(--app-viewport-stable-height, var(--tg-viewport-stable-height, 100dvh))
    - var(--tg-effective-safe-area-inset-top, 0px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  contain: content;
}

.sheet.open {
  transform: translateY(0) !important;
}

.backdrop.over-banned { z-index: 10001; }
.sheet.over-banned { z-index: 10002; }

/* Ожидание оплаты — вне main, поверх checkout и профиля */
#payment-waiting-backdrop {
  z-index: 10050;
}
#payment-waiting-sheet {
  z-index: 10051;
}

/* Способ оплаты, пополнение, профиль и др. шторки — выше .checkout-page (50), футера чекаута (51) и referral/balance (52), иначе клики «уходят» в слой под ними */
#paymethod-backdrop,
#topup-backdrop,
#subscription-select-backdrop,
#duration-select-backdrop,
#payment-backdrop,
#profile-backdrop,
#connect-backdrop,
#subscription-management-backdrop,
#device-addon-backdrop {
  z-index: 58 !important;
}
#paymethod-sheet,
#topup-sheet,
#subscription-select-sheet,
#duration-select-sheet,
#payment-sheet,
#profile-sheet,
#connect-sheet,
#subscription-management-sheet,
#device-addon-sheet {
  z-index: 59 !important;
}

/* Способ оплаты поверх «Управления подпиской» (оба были 58/59 — фон не перекрывал нижнюю шторку) */
#paymethod-backdrop {
  z-index: 10060 !important;
}
#paymethod-sheet {
  z-index: 10061 !important;
}

.sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border-color-strong);
  border-radius: 999px;
  margin: 0 auto 16px;
}

.sheet-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

/* Subscription Options */
.subscription-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.subscription-option-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  text-align: left;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}


.subscription-option-card:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-red);
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 0, 0, 0.2);
}

.subscription-option-card:active {
  transform: scale(0.97);
  transition: transform 0.08s ease-out;
}

.subscription-option-card.premium {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(255, 0, 0, 0.15) 100%);
  border-color: var(--accent-red);
  box-shadow: var(--glow-red);
  position: relative;
}

.subscription-option-card.premium::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 0, 0, 0.1), transparent);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 0;
}

.subscription-option-card.premium > * {
  position: relative;
  z-index: 1;
}

.subscription-option-card.premium:hover {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 0, 0, 0.25) 100%);
  border-color: var(--accent-red-light);
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--glow-red-strong);
}

.subscription-option-card.premium:hover::after {
  opacity: 1;
  background: radial-gradient(circle at center, rgba(255, 0, 0, 0.3), transparent);
}

@keyframes premiumGlow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.subscription-option-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.subscription-option-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.subscription-option-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-red);
}

.subscription-option-speed {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.subscription-option-lte {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-weight: 500;
}

.subscription-option-card.premium .subscription-option-lte {
  color: var(--accent-red);
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.subscription-option-duration {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-style: italic;
  line-height: 1.4;
}

.subscription-option-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bg-secondary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.subscription-option-badge.premium-badge {
  background: var(--accent-red);
  color: #ffffff;
}

/* Payment Card */
.payment-card {
  margin-top: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 24px;
}

.payment-plan-info {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}

.payment-plan-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.payment-plan-speed {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.payment-plan-lte {
  font-size: 13px;
  color: var(--accent-red);
  font-weight: 500;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.payment-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.payment-price-label {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 500;
}

.payment-price-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-red);
}

.payment-description {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.5;
}

.payment-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

.payment-buttons .primary-btn.pay { order: 1; }
.payment-buttons .payment-autopay-hint { order: 2; }
.payment-buttons .ghost-btn.alt { order: 3; }

.payment-autopay-hint {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
  padding: 4px 8px 0;
  text-align: center;
}

/* Payment Waiting */
.payment-waiting-kicker,
.payment-waiting-steps {
  display: none;
}

.payment-waiting-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 300px;
}

.payment-waiting-icon {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading Spinner */
.loading-spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: var(--accent-red);
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-ring:nth-child(1) {
  animation-delay: -0.45s;
  border-top-color: var(--accent-red);
  opacity: 1;
}

.spinner-ring:nth-child(2) {
  animation-delay: -0.3s;
  width: 80%;
  height: 80%;
  border-top-color: var(--accent-red-light);
  opacity: 0.8;
}

.spinner-ring:nth-child(3) {
  animation-delay: -0.15s;
  width: 60%;
  height: 60%;
  border-top-color: var(--accent-red);
  opacity: 0.6;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Success Check */
.success-check {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}

.success-check:not(.hidden) {
  display: flex;
}

.checkmark {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: var(--accent-red);
  stroke-miterlimit: 10;
  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: var(--accent-red);
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 60px rgba(220, 53, 69, 0.1);
  }
}

.payment-waiting-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  transition: var(--transition);
}

.payment-waiting-message {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
  transition: var(--transition);
}

.payment-waiting-hint {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
  transition: var(--transition);
}

.payment-waiting-hint.hidden {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.payment-waiting-fallback-btn {
  width: min(100%, 330px);
  min-height: 46px;
  margin-top: 18px;
  padding: 11px 16px;
  border: 1px solid rgba(229, 21, 21, 0.28);
  border-radius: 14px;
  color: #fff;
  background: rgba(229, 21, 21, 0.09);
  font-size: 13px;
  font-weight: 750;
}
.payment-waiting-fallback-btn:hover {
  border-color: rgba(229, 21, 21, 0.48);
  background: rgba(229, 21, 21, 0.14);
}
.payment-waiting-fallback-btn:disabled { opacity: 0.55; }

.payment-waiting-hide-btn {
  margin-top: 10px;
  width: 44px;
  height: 44px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
}

.payment-waiting-hide-btn i {
  font-size: 20px;
}

.payment-waiting-hide-btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.payment-waiting-hide-btn:hover {
  color: var(--accent-red-light);
  border-color: rgba(229, 21, 21, 0.45);
  background: rgba(229, 21, 21, 0.08);
}

/* Connect Sheet */
.connect-step {
  display: grid;
  gap: 16px;
}

.device-list {
  display: grid;
  gap: 12px;
}

.device-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 15px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}


.device-item:hover {
  border-color: var(--accent-red);
  background: var(--bg-secondary);
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-md), 0 0 20px rgba(255, 0, 0, 0.3);
}


.device-item:active {
  transform: scale(0.96);
  transition: transform 0.08s ease-out;
}

.device-item.selected {
  border-color: var(--accent-red);
  background: rgba(255, 0, 0, 0.1);
  box-shadow: var(--shadow-md), var(--glow-red);
}

.device-item svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent-red);
  stroke-width: 2;
}

.device-title {
  font-weight: 700;
  font-size: 16px;
}

.device-sub {
  font-size: 14px;
  color: var(--text-secondary);
}

.region-block {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.region-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.region-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.region-btn {
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.region-btn:hover {
  border-color: var(--accent-red);
  background: var(--bg-primary);
}

.region-btn.active {
  border-color: var(--accent-red);
  background: rgba(255, 0, 0, 0.15);
  color: var(--accent-red);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

.region-btn:active {
  transform: scale(0.95);
  transition: var(--transition-fast);
}

.download-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.download-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.download-actions {
  display: flex;
  gap: 10px;
}

.download-btn {
  flex: 1;
  text-align: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.download-btn:hover {
  border-color: var(--accent-red);
  background: rgba(255, 0, 0, 0.1);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
  transform: translateY(-2px);
}

.download-btn:active {
  transform: translateY(0);
  transition: var(--transition-fast);
}

/* Profile Sheet */
.profile-header {
  display: grid;
  place-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--accent-red);
  background: var(--bg-secondary);
  display: grid;
  place-items: center;
  box-shadow: var(--glow-red);
  transition: var(--transition);
}

.profile-avatar:hover {
  box-shadow: var(--glow-red-strong);
  transform: scale(1.05);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  image-rendering: auto;
  display: none;
}

.profile-avatar img.is-loaded {
  display: block;
}

.profile-name {
  font-weight: 700;
  font-size: 20px;
  color: var(--text-primary);
}

.profile-id {
  color: var(--text-secondary);
  font-size: 14px;
}

.profile-block {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.promo-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.promo-input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-primary);
  padding: 13px 16px;
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  font-family: inherit;
  -webkit-appearance: none;
}

.promo-input:focus {
  outline: none;
  border-color: var(--accent-red);
  box-shadow: 0 0 0 2px rgba(229, 21, 21, 0.25);
  background: rgba(0, 0, 0, 0.5);
}

.promo-input::placeholder {
  color: var(--text-muted);
}

.profile-links {
  margin-top: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  overflow: hidden;
}

.profile-link {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  border-radius: 0;
  padding: 15px 4px;
  min-height: 52px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: opacity 0.1s ease;
  font-size: 16px;
  font-weight: 400;
}
.profile-link:last-child {
  border-bottom: none;
}

.profile-link:hover {
  opacity: 0.75;
}

.profile-link:active {
  transform: scale(0.97);
  transition: transform 0.08s ease-out;
}

.profile-link svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
  stroke-width: 2;
}

.profile-close-btn {
  margin-top: 16px;
}

/* Referral Sheet */
.referral-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.referral-bonus-info {
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), rgba(204, 0, 0, 0.15));
  border: 1px solid rgba(255, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  box-shadow: var(--glow-red);
  position: relative;
  overflow: hidden;
}

.referral-bonus-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(255, 0, 0, 0.1), transparent 70%);
  pointer-events: none;
}

.referral-bonus-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-red);
  filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6));
}

.referral-bonus-icon svg {
  width: 100%;
  height: 100%;
}

.referral-bonus-text {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
  position: relative;
  z-index: 1;
}

.referral-bonus-text strong {
  color: var(--accent-red);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.referral-text {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.referral-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.referral-pill {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: grid;
  gap: 4px;
}

.referral-pill .label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.referral-pill .value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.referral-link {
  display: grid;
  gap: 10px;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.copy-btn {
  background: var(--accent-red);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--accent-white);
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: var(--transition);
  white-space: nowrap;
  box-shadow: var(--glow-red);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.copy-btn:hover {
  background: var(--accent-red-light);
  transform: scale(1.08);
  box-shadow: var(--glow-red-strong);
}

.copy-btn:active {
  transform: scale(0.93);
  transition: transform 0.08s ease-out;
}

.referral-invited {
  display: grid;
  gap: 8px;
}

.referral-invited .item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--bg-primary);
}

.referral-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* LTE-Трафик (профиль): магазин пакетов */
.sheet-lte-shop {
  padding-bottom: calc(12px + var(--tg-effective-safe-area-inset-bottom, 0px));
  max-height: min(92vh, 720px);
}

.lte-shop-head {
  text-align: center;
  margin-bottom: 18px;
  padding: 0 4px;
}

.lte-shop-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red-light);
  margin-bottom: 6px;
  opacity: 0.95;
}

.lte-shop-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  line-height: 1.15;
}

.lte-shop-lead {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.lte-shop-locked {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  background: rgba(229, 21, 21, 0.08);
  border: 1px solid rgba(229, 21, 21, 0.22);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  line-height: 1.4;
}

.lte-pack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.lte-pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 118px;
  padding: 14px 12px 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 55%, rgba(0,0,0,0.2) 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  color: inherit;
  text-align: left;
  overflow: hidden;
}

.lte-pack-card-glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(229, 21, 21, 0.22) 0%, transparent 45%);
  opacity: 0.6;
  pointer-events: none;
}

.lte-pack-card:hover .lte-pack-card-glow {
  opacity: 0.9;
}

.lte-pack-card:active {
  transform: scale(0.97);
}

.lte-pack-card:hover {
  border-color: rgba(229, 21, 21, 0.45);
  box-shadow: var(--glow-red), 0 6px 24px rgba(0,0,0,0.5);
}

.lte-pack-card--mid {
  border-color: rgba(229, 21, 21, 0.28);
}

.lte-pack-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  color: rgba(255, 80, 80, 0.55);
  pointer-events: none;
}

.lte-pack-gb-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}

.lte-pack-gb {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1;
}

.lte-pack-gb-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.lte-pack-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-red-light);
  margin-top: 10px;
  text-shadow: 0 0 18px rgba(255, 0, 0, 0.15);
}

.lte-pack-tag {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lte-pack-btn--disabled {
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(0.25);
}

/* Persistent LTE balance picker */
.lte-balance-picker {
  --lte-slider-progress: 36.842%;
  position: relative;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 180px 120px at 18% -20%, rgba(255, 54, 70, 0.14), transparent 74%),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
  transition: opacity 180ms ease, filter 180ms ease;
}

.lte-balance-picker.is-disabled {
  opacity: 0.46;
  filter: saturate(0.45);
}

.lte-picker-readout {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.lte-picker-volume {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

#lte-slider-gb {
  inline-size: auto;
  min-inline-size: 0.6em;
  justify-content: flex-start;
  color: var(--text-primary);
  font-size: 42px;
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.lte-picker-unit {
  flex: 0 0 auto;
  margin-bottom: 0.14em;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
}

.lte-picker-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.lte-picker-price {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  color: #ff5b66;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.lte-picker-currency,
.lte-picker-rate-suffix {
  display: inline-block;
  flex: 0 0 auto;
  line-height: 1;
}

#lte-slider-price { inline-size: 3ch; }
#lte-slider-rate { inline-size: 3.75ch; }

.lte-picker-rate {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
}

.lte-odometer {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 1.14em;
  padding-block: 0.07em;
  overflow: hidden;
  overflow: clip;
  line-height: 1.14;
  white-space: pre;
  contain: layout paint;
  font-variant-numeric: tabular-nums;
}

.lte-odometer-slot {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 0.6em;
  height: 1.14em;
  overflow: hidden;
  line-height: 1.14;
  contain: paint;
}

.lte-odometer-slot.is-symbol {
  min-width: 0.31em;
}

.lte-odometer-slot > span {
  grid-area: 1 / 1;
  display: block;
}

.lte-odometer-slot .lte-odometer-from,
.lte-odometer-slot .lte-odometer-to {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@keyframes lte-odometer-from-up {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to { transform: translate3d(0, -92%, 0); opacity: 0; }
}
@keyframes lte-odometer-to-up {
  from { transform: translate3d(0, 92%, 0); opacity: 0.18; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes lte-odometer-from-down {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to { transform: translate3d(0, 92%, 0); opacity: 0; }
}
@keyframes lte-odometer-to-down {
  from { transform: translate3d(0, -92%, 0); opacity: 0.18; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

.lte-odometer-slot.is-up .lte-odometer-from { animation: lte-odometer-from-up 135ms cubic-bezier(.2,.72,.24,1) both; }
.lte-odometer-slot.is-up .lte-odometer-to { animation: lte-odometer-to-up 135ms cubic-bezier(.2,.72,.24,1) both; }
.lte-odometer-slot.is-down .lte-odometer-from { animation: lte-odometer-from-down 135ms cubic-bezier(.2,.72,.24,1) both; }
.lte-odometer-slot.is-down .lte-odometer-to { animation: lte-odometer-to-down 135ms cubic-bezier(.2,.72,.24,1) both; }

.lte-slider-wrap {
  position: relative;
  height: 52px;
  margin-top: 22px;
}

.lte-slider-track {
  position: absolute;
  top: 12px;
  right: 0;
  left: 0;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(202, 217, 212, 0.13);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.lte-slider-track > span {
  display: block;
  width: var(--lte-slider-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff263d, #ff6870);
  box-shadow: 0 0 18px rgba(255, 43, 61, 0.3);
  transition: width 120ms cubic-bezier(.2,.72,.24,1);
}

.lte-balance-picker.is-dragging .lte-slider-track > span { transition: none; }

.lte-balance-range {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: grab;
  touch-action: pan-y;
}

.lte-balance-range:active { cursor: grabbing; }
.lte-balance-range:focus-visible { outline: 2px solid rgba(255, 83, 95, 0.72); outline-offset: 5px; border-radius: 999px; }
.lte-balance-range::-webkit-slider-runnable-track { height: 10px; background: transparent; }
.lte-balance-range::-moz-range-track { height: 10px; background: transparent; }
.lte-balance-range::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -9px;
  border: 4px solid #fff;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #ff3549;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 57, 73, 0.3), 0 0 22px rgba(255, 42, 60, 0.25);
  transition: transform 100ms cubic-bezier(.2,.72,.24,1);
}
.lte-balance-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #ff3549;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.52), 0 0 22px rgba(255, 42, 60, 0.25);
  transition: transform 100ms cubic-bezier(.2,.72,.24,1);
}
.lte-balance-range:active::-webkit-slider-thumb { transform: scale(1.06); }
.lte-balance-range:active::-moz-range-thumb { transform: scale(1.06); }

.lte-slider-ticks {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.lte-slider-tick {
  position: absolute;
  top: 8px;
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 43px;
  padding: 0;
  border: 0;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  transform: translateX(-50%);
  pointer-events: none;
}
.lte-slider-tick:nth-child(1) { left: calc(5.263% + 12.526px); }
.lte-slider-tick:nth-child(2) { left: calc(36.842% + 3.684px); }
.lte-slider-tick:nth-child(3) { left: calc(68.421% - 5.158px); }
.lte-slider-tick:nth-child(4) { left: calc(100% - 14px); }
.lte-slider-tick i {
  display: block;
  width: 3px;
  height: 12px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: rgba(230, 238, 235, 0.38);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.018);
  transition: height 120ms cubic-bezier(.2,.72,.24,1), background 120ms ease, box-shadow 120ms ease;
}
.lte-slider-tick span {
  margin: -5px -9px;
  padding: 5px 9px;
  pointer-events: auto;
  cursor: pointer;
}
.lte-slider-tick:focus { outline: none; }
.lte-slider-tick:focus-visible span {
  color: #fff;
  border-radius: 999px;
  background: rgba(255, 83, 97, 0.16);
  box-shadow: 0 0 0 2px rgba(255, 83, 97, 0.32);
}
.lte-balance-picker.is-disabled .lte-slider-tick span { pointer-events: none; }
.lte-slider-tick.is-active { color: #ff6b74; }
.lte-slider-tick.is-active i {
  height: 16px;
  background: #ff5361;
  box-shadow: 0 0 10px rgba(255, 65, 81, 0.38);
}

.lte-slider-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -2px;
  color: rgba(206, 218, 214, 0.46);
  font-size: 9px;
  font-weight: 650;
}

.lte-picker-economy {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.35;
}
.lte-picker-economy i { color: #ff5b67; font-size: 15px; }

.lte-slider-buy-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 13px;
  padding: 12px 16px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #ff4b5b, #f71936);
  box-shadow: 0 9px 26px rgba(235, 23, 48, 0.24), inset 0 1px rgba(255,255,255,.2);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 140ms ease, opacity 160ms ease, filter 160ms ease;
}
.lte-slider-buy-btn:active { transform: scale(0.98); }
.lte-slider-buy-btn:disabled { opacity: 0.46; cursor: default; filter: grayscale(.3); }

.lte-picker-note {
  margin: 9px 0 0;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .lte-odometer-slot .lte-odometer-from,
  .lte-odometer-slot .lte-odometer-to,
  .lte-slider-track > span,
  .lte-slider-tick i {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Checkout: тарифы — крупные карточки в стиле LTE-пакетов */
.lte-pack-grid--tariffs {
  gap: 12px;
  margin-bottom: 8px;
}

.lte-pack-card--tariff {
  min-height: 148px;
  padding: 12px 14px 18px;
  align-items: stretch;
}

/* Верхняя строка: бейдж + иконка в потоке — без наложения на цифры */
.checkout-tariff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 28px;
  min-width: 0;
  flex-shrink: 0;
}

.checkout-tariff-btn .lte-pack-icon--tariff {
  position: static;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  font-size: 22px;
  color: rgba(255, 90, 90, 0.65);
  pointer-events: none;
}

.lte-pack-grid--tariffs .lte-pack-gb {
  font-size: 34px;
}

.lte-pack-grid--tariffs .lte-pack-gb-wrap {
  margin-top: 0;
  width: 100%;
}

.checkout-tariff-badge {
  position: static;
  flex-shrink: 0;
  max-width: calc(100% - 36px);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  line-height: 1.2;
}

.checkout-tariff-badge--hot {
  background: rgba(229, 21, 21, 0.16);
  border-color: rgba(229, 21, 21, 0.38);
  color: var(--accent-red-light);
}

.checkout-tariff-btn.lte-pack-card--tariff {
  justify-content: flex-start;
  gap: 8px;
}

.checkout-tariff-desc {
  margin: 0;
  margin-top: auto;
  padding-top: 4px;
  padding-right: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
  flex: 0 1 auto;
}

.lte-price-frame {
  margin-top: auto;
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding: 2px;
  border-radius: 11px;
  background: linear-gradient(
    135deg,
    rgba(229, 21, 21, 0.42),
    rgba(255, 255, 255, 0.07),
    rgba(229, 21, 21, 0.28)
  );
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38) inset;
}

.lte-price-frame-inner {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent-red-light);
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.58);
  text-shadow: 0 0 16px rgba(255, 0, 0, 0.15);
}

.lte-price-frame--sm .lte-price-frame-inner {
  font-size: 13px;
  padding: 7px 8px;
}

.checkout-tariff-btn.selected {
  border-color: var(--accent-red);
  background: linear-gradient(
    155deg,
    rgba(229, 21, 21, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 55%,
    rgba(0, 0, 0, 0.28) 100%
  );
  box-shadow:
    0 0 0 2px var(--accent-red),
    0 8px 28px rgba(0, 0, 0, 0.55);
}

.checkout-tariff-btn.selected .lte-pack-card-glow {
  opacity: 1;
}

.checkout-tariff-btn.locked {
  opacity: 0.62;
  cursor: not-allowed;
  pointer-events: none;
}

.lte-shop-close {
  margin-top: 4px;
}

/* Управление подпиской: вкладки Трафик / Устройства */
.sheet-sub-mgmt .sub-mgmt-hero {
  padding: 0 4px 14px;
  text-align: center;
}

.sheet-sub-mgmt .sub-mgmt-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-red-light);
  margin-bottom: 6px;
}

.sheet-sub-mgmt .sub-mgmt-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sheet-sub-mgmt .sub-mgmt-lead {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ── Segmented control: "Трафик / Устройства" ────────────────────────────────
   Единый контейнер + "таблетка"-индикатор, скользящий по transform (60fps на GPU).
   Паттерн, как у iOS/Telegram native — вместо разрозненных кнопок. */
.sub-mgmt-tabs {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  isolation: isolate;
}

.sub-mgmt-tabs::before {
  content: "";
  position: absolute;
  top: var(--sp-1);
  bottom: var(--sp-1);
  left: var(--sp-1);
  width: calc((100% - var(--sp-2)) / var(--sub-mgmt-tab-count, 2));
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: translate3d(calc(var(--sub-mgmt-tab-active-index, 0) * 100%), 0, 0);
  transition: transform 0.32s var(--ease-emphasised);
  z-index: 0;
  pointer-events: none;
}

.sub-mgmt-tab {
  position: relative;
  z-index: 1;
  border: none;
  padding: 11px 14px;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.2s var(--ease-standard);
  min-height: 40px;
  border-radius: 10px;
}

.sub-mgmt-tab:hover {
  color: var(--text-primary);
}

.sub-mgmt-tab--active {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

.sub-mgmt-tab:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
}

.sub-mgmt-tab-panel {
  padding: 0 0 8px;
}

.sub-mgmt-tab-panel.hidden {
  display: none !important;
}

.sub-mgmt-panel-card {
  padding: 18px 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.35) 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sub-mgmt-panel-card--traffic {
  border-color: rgba(229, 21, 21, 0.22);
}

.sub-mgmt-panel-card--devices {
  border-color: rgba(255, 255, 255, 0.12);
}

.sub-mgmt-panel-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-red-light);
}

.sub-mgmt-panel-card--devices .sub-mgmt-panel-eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.sub-mgmt-panel-card .sub-mgmt-lte-lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.sub-mgmt-devices-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sub-mgmt-meta-pill {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent-red-light);
  background: rgba(229, 21, 21, 0.12);
  border: 1px solid rgba(229, 21, 21, 0.28);
  box-shadow: 0 0 20px rgba(229, 21, 21, 0.12);
}

.sub-mgmt-hint {
  margin: 0 0 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
}

/* Управление подпиской (legacy классы для совместимости) */
.subscription-management-title {
  margin-bottom: 20px;
}

.subscription-management-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.sub-mgmt-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  transition: var(--transition);
}

.sub-mgmt-card:hover {
  border-color: var(--border-color-strong);
}

.sub-mgmt-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.sub-mgmt-status-on .sub-mgmt-icon-wrap {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.sub-mgmt-status-off .sub-mgmt-icon-wrap {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.sub-mgmt-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.sub-mgmt-card-method-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sub-mgmt-card-method-row strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 2px;
}

.sub-mgmt-card-method-row p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.sub-mgmt-method-icon {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.sub-mgmt-text {
  flex: 1;
  min-width: 0;
}

.sub-mgmt-text strong {
  display: block;
  color: var(--text-primary);
  font-size: 15px;
  margin-bottom: 4px;
}

.sub-mgmt-text p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.sub-mgmt-info p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.sub-mgmt-devices-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sub-mgmt-device-item {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.sub-mgmt-device-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sub-mgmt-device-remove-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(229, 21, 21, 0.35);
  background: rgba(229, 21, 21, 0.10);
  color: var(--accent-red-light);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.sub-mgmt-device-remove-btn i {
  font-size: 16px;
  line-height: 1;
}

.sub-mgmt-device-remove-btn:hover {
  background: rgba(229, 21, 21, 0.18);
  border-color: rgba(229, 21, 21, 0.55);
}

.sub-mgmt-device-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  word-break: break-word;
}

.sub-mgmt-device-hwid {
  font-size: 11px;
  color: rgba(245, 245, 245, 0.55);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.sub-mgmt-device-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.sub-mgmt-device-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.device-addon-content {
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.device-addon-warning-card {
  background: rgba(229, 21, 21, 0.10);
  border: 1px solid rgba(229, 21, 21, 0.35);
  border-radius: var(--radius);
  padding: 14px;
}

.device-addon-warning-title {
  font-weight: 800;
  color: var(--accent-red-light);
  margin-bottom: 4px;
}

.device-addon-warning-text {
  font-size: 12px;
  color: rgba(245, 245, 245, 0.86);
  line-height: 1.35;
  word-break: break-word;
}

.device-addon-breakdown {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.device-addon-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  flex-wrap: nowrap;
}

.device-addon-breakdown-label {
  white-space: nowrap;
  color: var(--text-secondary);
}

.device-addon-breakdown-value {
  text-align: right;
  white-space: nowrap;
}

.device-addon-breakdown-total {
  color: var(--text-primary);
  font-weight: 800;
  font-size: 14px;
}

.device-addon-breakdown-value {
  color: var(--text-primary);
  font-weight: 800;
}

.sub-mgmt-unbind-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--border-color-strong);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.sub-mgmt-unbind-btn:hover {
  border-color: var(--accent-red);
  background: rgba(255, 0, 0, 0.08);
  box-shadow: 0 0 16px rgba(255, 0, 0, 0.15);
}

.sub-mgmt-unbind-btn:active {
  transform: scale(0.98);
}

.sub-mgmt-unbind-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

/* Agreement */
/* Шторка соглашения — не скроллит саму шторку */
#agreement-sheet {
  display: flex;
  flex-direction: column;
  overflow-y: hidden !important;
  max-height: 92vh;
}
#agreement-sheet.open {
  display: flex;
}

.agreement-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
  flex-shrink: 0;
}

.agreement-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}

.agreement-back-btn:hover {
  border-color: var(--accent-red);
  background: var(--bg-primary);
}

.agreement-back-btn:active {
  transform: scale(0.95);
}

.agreement-header .sheet-title {
  margin: 0;
  flex: 1;
}

.agreement-content {
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 4px 0 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.agreement-content::-webkit-scrollbar {
  width: 6px;
}

.agreement-content::-webkit-scrollbar-track {
  background: transparent;
}

.agreement-content::-webkit-scrollbar-thumb {
  background: var(--border-color-strong);
  border-radius: 3px;
}

.agreement-content::-webkit-scrollbar-thumb:hover {
  background: var(--border-color);
}

.agreement-content p {
  margin: 0 0 16px 0;
  line-height: 1.6;
  color: var(--text-primary);
  font-size: 14px;
}

.agreement-content h3 {
  margin: 24px 0 12px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

.agreement-content h3:first-of-type {
  margin-top: 0;
}

.agreement-content p:last-child {
  margin-bottom: 0;
}

.agreement-content .agreement-intro {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-style: italic;
}

.agreement-content .agreement-contacts {
  margin-top: 4px;
  font-size: 15px;
}

.agreement-content .agreement-note {
  margin-top: 28px;
  padding: 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.agreement-content .agreement-note h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.agreement-content .agreement-note p {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.agreement-content .agreement-note p:last-child {
  margin-bottom: 0;
}

.agreement-content strong {
  font-weight: 600;
  color: var(--text-primary);
}

.agreement-content em {
  font-style: italic;
  color: var(--text-primary);
}

.agreement-content .agreement-list {
  margin: 4px 0 16px 20px;
  padding: 0;
  list-style: disc;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
}

.agreement-content .agreement-list li {
  margin-bottom: 6px;
}

.agreement-content .agreement-list li:last-child {
  margin-bottom: 0;
}

/* Loading Animation for Subscription Activation */
.subscription-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.subscription-loading.show {
  opacity: 1;
  pointer-events: auto;
}

.subscription-loading-content {
  text-align: center;
  padding: 40px;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  max-width: 320px;
  width: 90%;
}

.subscription-loading-spinner {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  position: relative;
}

.subscription-loading-spinner .spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: var(--accent-red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.subscription-loading-spinner .spinner-ring:nth-child(2) {
  width: 75%;
  height: 75%;
  top: 12.5%;
  left: 12.5%;
  border-top-color: var(--accent-red-light);
  animation-duration: 0.8s;
  animation-direction: reverse;
}

.subscription-loading-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.subscription-loading-message {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Telegram Only Message */
.telegram-only-message {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  z-index: 9999;
  padding: 24px;
}

.telegram-only-message.hidden {
  display: none;
}

.telegram-only-content {
  text-align: center;
  max-width: 400px;
  width: 100%;
  padding: 48px 32px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: fadeInScale 0.4s ease-out;
}

.telegram-only-icon {
  font-size: 64px;
  margin-bottom: 24px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.telegram-only-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.telegram-only-text {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.telegram-only-hint {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Channel gate — подписка на канал (стиль в духе приложения) */
.channel-gate-message {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  z-index: 9998;
  padding: 24px;
}

.channel-gate-message.hidden {
  display: none;
}

.channel-gate-content {
  text-align: center;
  max-width: 400px;
  width: 100%;
  padding: 40px 28px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(255, 0, 0, 0.08);
  animation: fadeInScale 0.4s ease-out;
}

.channel-gate-icon-wrap {
  margin-bottom: 24px;
}

.channel-gate-icon {
  color: var(--accent-red);
  filter: drop-shadow(0 0 12px rgba(255, 0, 0, 0.35));
  animation: pulse 2s ease-in-out infinite;
}

.channel-gate-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.channel-gate-text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 28px 0;
}

.channel-gate-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.channel-gate-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  border: 2px solid transparent;
  box-sizing: border-box;
}

.channel-gate-btn-primary {
  background: var(--accent-red);
  color: var(--accent-white);
  border-color: var(--accent-red);
  box-shadow: var(--glow-red);
}

.channel-gate-btn-primary:hover {
  background: var(--accent-red-light);
  box-shadow: var(--glow-red-strong);
  transform: translateY(-2px);
}

.channel-gate-btn-check {
  background: transparent;
  color: var(--accent-red);
  border-color: var(--accent-red);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.2);
}

.channel-gate-btn-check:hover {
  background: rgba(255, 0, 0, 0.12);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.35);
  transform: translateY(-2px);
}

.channel-gate-btn-check:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Блокировка (бан) пользователя */
.banned-message {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  z-index: 9999;
  padding: 24px;
}

.banned-message.hidden {
  display: none;
}

.banned-content {
  text-align: center;
  max-width: 420px;
  width: 100%;
  padding: 40px 28px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(255, 0, 0, 0.12);
  animation: fadeInScale 0.4s ease-out;
}

.banned-icon-wrap {
  margin-bottom: 24px;
}

.banned-icon {
  color: var(--accent-red);
  filter: drop-shadow(0 0 12px rgba(255, 0, 0, 0.4));
}

.banned-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.banned-reason {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 24px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.banned-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.banned-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--border-color-strong);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.banned-action-btn:hover {
  border-color: var(--accent-red);
  background: rgba(255, 0, 0, 0.08);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.2);
}

.banned-action-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

/* Promo Success/Error Animations */
.promo-success-animation,
.promo-error-animation {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.promo-success-animation.show,
.promo-error-animation.show {
  opacity: 1;
}

.promo-success-overlay,
.promo-error-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.promo-success-content,
.promo-error-content {
  position: relative;
  z-index: 1;
  background: var(--bg-primary);
  backdrop-filter: blur(20px);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  min-width: 280px;
  max-width: 90%;
  animation: promoSlideIn 0.4s ease-out;
  box-shadow: var(--shadow-lg);
}

.promo-success-content {
  border-color: var(--accent-red);
  box-shadow: var(--glow-red);
}

.promo-error-content {
  border-color: var(--accent-red);
}

.promo-success-icon,
.promo-error-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: promoBounce 0.6s ease-out;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
}

.promo-success-icon {
  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(255, 0, 0, 0.3));
}

.promo-error-icon {
  animation: promoShake 0.5s ease-out;
}

.promo-success-title,
.promo-error-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
}

.promo-success-title {
  color: var(--accent-red);
  text-shadow: var(--glow-red);
}

.promo-error-title {
  color: var(--accent-red);
}

.promo-success-message,
.promo-error-message {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.5;
}

@keyframes promoSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes promoBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes promoShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

/* Utility Classes */
.hidden {
  display: none !important;
}

.muted {
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 440px) {
  .screen {
    padding: calc(var(--tg-effective-safe-area-inset-top, 0px) + 12px) 14px
      calc(var(--tg-effective-safe-area-inset-bottom, 0px) + 12px);
    gap: 10px;
  }

  .primary-btn {
    font-size: 14px;
    padding: 13px;
  }
  
  .agreement-content {
    padding: 16px;
    max-height: calc(var(--app-viewport-stable-height, var(--tg-viewport-stable-height, 100dvh)) - 180px);
  }
  
  .agreement-content p {
    font-size: 13px;
  }
  
  .agreement-content h3 {
    font-size: 15px;
  }

  .agreement-content .agreement-list {
    font-size: 13px;
  }

  .card {
    padding: 14px;
  }

  .sheet {
    padding: 12px 16px calc(20px + var(--tg-effective-safe-area-inset-bottom, 0px));
  }
}

/* ═══ MARKET PAGE — как Checkout ═══ */
.market-page {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  padding: calc(var(--tg-effective-safe-area-inset-top, 0px) + 20px) 0 0;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: unset;
  gap: 0;
}
.market-page.hidden {
  display: none !important;
}
.market-page.market-slide-active {
  transform: translateX(0);
}
.market-page-header {
  padding: 0 16px 8px;
  flex-shrink: 0;
}
.market-page-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(40px + var(--tg-effective-safe-area-inset-bottom, 0px));
}

/* Telegram Desktop: применяем по платформе, а не по ширине окна.
   В desktop-клиенте окно может быть узким (как телефон), и media-query не сработает. */
html.tg-desktop {
  /* Telegram Desktop не всегда прокручивает body внутри WebView. Оставляем
     документ фиксированным, а единственным scroll-root делаем активный экран. */
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
html.tg-desktop body {
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  overflow-y: hidden;
  overflow-x: hidden;
}

html.tg-desktop .screen {
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  overflow-y: auto;

  /* Чуть компактнее вертикальные отступы на desktop */
  padding-top: calc(var(--tg-effective-safe-area-inset-top, 0px) + 8px);
  padding-bottom: calc(var(--tg-effective-safe-area-inset-bottom, 0px) + 8px);

  scrollbar-width: thin;
}

html.tg-desktop .screen::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.tg-desktop .screen::-webkit-scrollbar-thumb {
  background: rgba(229, 21, 21, 0.35);
  border-radius: 999px;
}

html.tg-desktop .screen::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
}
.market-page-hero {
  text-align: center;
  padding: 8px 0 20px;
}
.market-page-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.market-page-balance-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 12px;
}
.market-balance-emoji { font-size: 18px; line-height: 1; }
.market-balance-label { font-size: 13px; color: var(--text-secondary); }
.market-balance-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.market-balance-unit { font-size: 13px; color: var(--text-secondary); }
.market-page-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}
.market-page-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.market-page-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 10px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.05) inset;
  transition: transform 0.15s ease-out;
}
.market-page-card:active {
  transform: scale(0.99);
  transition: transform 0.08s ease-out;
}
.market-page-featured {
  background: linear-gradient(135deg, rgba(229,21,21,0.12) 0%, rgba(229,21,21,0.05) 100%);
  border-color: rgba(229, 21, 21, 0.35);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(229,21,21,0.1);
}
.market-page-card-top {
  margin-bottom: 14px;
}
.market-page-card-badge {
  display: inline-block;
  background: var(--accent-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(229,21,21,0.4);
}
.market-page-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.market-page-card-duration {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.market-page-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.market-page-spec {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}
.market-page-spec-icon {
  font-size: 14px;
  line-height: 1;
}
.market-page-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.market-page-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.market-snowflake-big { font-size: 22px; line-height: 1; }
.market-price-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.market-price-text {
  font-size: 13px;
  color: var(--text-secondary);
}
.market-page-buy-btn {
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--accent-red-light) 0%, var(--accent-red) 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  box-shadow: var(--glow-red), 0 1px 0 rgba(255,255,255,0.12) inset;
}
.market-page-buy-btn:active {
  transform: scale(0.95);
  transition: transform 0.08s ease-out;
}
.market-page-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  margin-top: 4px;
}
.market-page-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.6;
}

/* Маркет — компактный дизайн (старый, для совместимости) */
.market-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.market-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: var(--transition);
}

.market-item:hover {
  border-color: var(--border-color-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.market-item.premium-item {
  border-color: var(--accent-red);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.2);
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 0, 0, 0.08) 100%);
}

.market-item.premium-item:hover {
  border-color: var(--accent-red-light);
  box-shadow: 0 0 16px rgba(255, 0, 0, 0.3);
  transform: translateY(-2px);
}

.market-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.market-item-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--accent-red);
  flex-shrink: 0;
}

.market-item.premium-item .market-item-icon {
  background: rgba(255, 0, 0, 0.15);
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.25);
}

.market-item-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.market-item-info {
  flex: 1;
  min-width: 0;
}

.market-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.market-item-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
}

.market-item-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.market-feature {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.market-feature svg {
  width: 14px;
  height: 14px;
  color: var(--accent-red);
  flex-shrink: 0;
}

.market-item-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.market-price-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.market-price-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.market-price-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  width: fit-content;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.snowflake-price-icon {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
  flex-shrink: 0;
}

.market-price-amount {
  color: var(--accent-red);
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.market-buy-btn {
  min-width: 88px;
  padding: 10px 16px;
  font-size: 14px;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

@media (max-width: 360px) {
  .market-item-price {
    flex-direction: column;
    align-items: stretch;
  }
  .market-buy-btn {
    width: 100%;
    min-width: auto;
  }
}

.market-close-btn {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  font-size: 13px;
}

/* Performance Optimizations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Только для элементов с реальной анимацией трансформа */
.backdrop {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ═══ RIPPLE ЭФФЕКТ — даёт ощущение "тач" как в нативных приложениях ═══ */
.ripple-container {
  position: relative;
  overflow: hidden;
}
@keyframes rippleAnim {
  0% { transform: scale(0); opacity: 0.4; }
  100% { transform: scale(2.5); opacity: 0; }
}
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
  animation: rippleAnim 0.5s ease-out forwards;
  transform-origin: center;
}
.primary-btn .ripple-wave {
  background: rgba(255, 255, 255, 0.3);
}

/* Загрузочное состояние кнопки */
.btn-loading {
  opacity: 0.75;
  pointer-events: none;
}
.btn-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ═══ КРИТИЧНЫЙ ФИX: На touch-устройствах отключаем hover-трансформы ═══
   Без этого первый тап = hover (выделение), второй тап = реальное нажатие.
   Решение: hover эффекты только там, где есть реальная мышь. */
@media (hover: none) and (pointer: coarse) {
  .primary-btn:hover,
  .ghost-btn:not(:disabled):hover,
  .icon-btn:hover,
  .card:hover,
  .checkout-device-card:hover,
  .checkout-period-card:hover,
  .duration-option-card:hover,
  .device-item:hover,
  .subscription-option-card:hover,
  .subscription-option-card.premium:hover,
  .profile-link:hover,
  .region-btn:hover,
  .download-btn:hover,
  .market-item:hover,
  .market-item.premium-item:hover,
  .renew-btn:hover,
  .copy-btn:hover,
  .sub-mgmt-unbind-btn:hover,
  .avatar:hover,
  .pill:hover,
  .channel-gate-btn:hover,
  .trial-banner:hover,
  .trial-banner-btn:hover,
  .checkout-trial-premium-btn:hover,
  .premium-upgrade-card:hover,
  .agreement-back-btn:hover,
  .profile-avatar:hover,
  .premium-upgrade-pill:hover {
    transform: none !important;
    box-shadow: unset;
  }
  /* Сохраняем нужные box-shadow без трансформов */
  .card:hover { box-shadow: var(--shadow-md); border-color: var(--border-color); }
  .primary-btn:hover { box-shadow: var(--glow-red); }
  .ghost-btn:not(:disabled):hover { background: var(--bg-tertiary); border-color: var(--border-color); box-shadow: none; }
  .icon-btn:hover { box-shadow: var(--shadow-sm); }
  .checkout-device-card:hover { border-color: var(--border-color); box-shadow: 0 3px 14px rgba(0,0,0,0.32); }
}

/* Оптимизация анимаций */
@media (prefers-reduced-motion: reduce) {
  .card, .primary-btn, .ghost-btn, .sheet, .backdrop {
    transition: none !important;
    animation: none !important;
  }
}

/* Снег включен - интерактивный */
.christmas-decor {
  display: block !important;
}

/* Trial Banner — видимый баннер пробной подписки на главном экране */
.trial-banner {
  background: linear-gradient(135deg, rgba(255,0,0,0.08) 0%, rgba(255,0,0,0.04) 100%);
  border: 1.5px solid rgba(255, 0, 0, 0.35);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.12);
  flex-shrink: 0;
}
.trial-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-red), rgba(255,0,0,0.3));
}
.trial-banner:hover {
  border-color: rgba(255, 0, 0, 0.55);
  box-shadow: 0 4px 24px rgba(255, 0, 0, 0.2);
}
.trial-banner-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.trial-banner-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.trial-banner-gift {
  font-size: 16px;
}
.trial-banner-specs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.trial-spec {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-red);
  background: rgba(255, 0, 0, 0.1);
  border-radius: 6px;
  padding: 2px 6px;
}
.trial-spec-divider {
  font-size: 11px;
  color: var(--text-muted);
}
.trial-banner-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.trial-banner-btn {
  flex-shrink: 0;
  background: var(--accent-red);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
  white-space: nowrap;
}
.trial-banner-btn:hover {
  background: var(--accent-red-light);
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.5);
}
.trial-banner-btn:active {
  transform: scale(0.98);
}

/* Улучшенный trial в checkout — теперь ВВЕРХУ */
.checkout-trial-top {
  margin-bottom: 14px;
}
.checkout-trial-premium {
  background: linear-gradient(135deg, rgba(255,0,0,0.1) 0%, rgba(255,0,0,0.05) 100%);
  border: 1.5px solid rgba(255, 0, 0, 0.4);
  border-radius: 20px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.checkout-trial-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-red), rgba(255,0,0,0.2));
}
.checkout-trial-premium-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.checkout-trial-premium-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkout-trial-free-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-red);
  background: rgba(255, 0, 0, 0.12);
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 999px;
  padding: 3px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.checkout-trial-premium-specs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.checkout-trial-spec-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.checkout-trial-spec-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-red);
  line-height: 1;
}
.checkout-trial-spec-label {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.2;
}
.checkout-trial-premium-btn {
  width: 100%;
  padding: 12px;
  background: var(--accent-red);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(255, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.checkout-trial-premium-btn:hover {
  background: var(--accent-red-light);
  box-shadow: 0 4px 20px rgba(255, 0, 0, 0.5);
}
.checkout-trial-premium-btn:active {
  transform: scale(0.98);
}

/* Checkout offer cards v1.2 — compact, icon-led and consistent with the app shell. */
.checkout-trial-premium {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: rgba(18, 22, 21, 0.94);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.025);
}
.checkout-trial-premium::before {
  display: none;
}
.checkout-trial-premium-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}
.checkout-trial-premium-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 72, 85, 0.22);
  border-radius: 13px;
  color: #ff5360;
  background: rgba(255, 61, 75, 0.09);
}
.checkout-trial-premium-icon i {
  font-size: 20px;
}
.checkout-trial-premium-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.checkout-trial-premium-eyebrow {
  color: #ff5b67;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.checkout-trial-premium-copy strong {
  color: #f7f9f8;
  font-size: 16px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.checkout-trial-premium-copy small {
  overflow: hidden;
  color: rgba(221, 229, 226, 0.5);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checkout-trial-free-badge {
  padding: 5px 8px;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(241, 245, 243, 0.72);
  background: rgba(255, 255, 255, 0.055);
  font-size: 10px;
  letter-spacing: 0;
}
.checkout-trial-premium-btn {
  min-height: 43px;
  margin-top: 12px;
  padding: 10px 14px;
  justify-content: space-between;
  border: 1px solid rgba(255, 75, 87, 0.32);
  border-radius: 15px;
  background: rgba(255, 54, 68, 0.11);
  box-shadow: none;
  color: #ff6974;
  font-size: 12px;
  font-weight: 760;
}
.checkout-trial-premium-btn:hover {
  background: rgba(255, 54, 68, 0.15);
  box-shadow: none;
}
.checkout-trial-premium-btn i {
  font-size: 16px;
}

.checkout-payg-offer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
  width: 100%;
  margin: 0 0 14px;
  padding: 15px;
  border: 1px solid rgba(255, 72, 85, 0.34);
  border-radius: 22px;
  color: #f8faf9;
  text-align: left;
  background: linear-gradient(145deg, rgba(49, 19, 23, 0.97), rgba(15, 22, 20, 0.97) 72%);
  box-shadow: 0 17px 42px rgba(82, 3, 14, 0.17), inset 0 1px rgba(255, 255, 255, 0.035);
}
.checkout-payg-topline,
.checkout-payg-main,
.checkout-payg-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.checkout-payg-topline {
  justify-content: flex-start;
  gap: 7px;
}
.checkout-payg-new,
.checkout-payg-code {
  position: static;
  transform: none;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.09em;
}
.checkout-payg-new {
  color: #210508;
  background: #ff4a57;
}
.checkout-payg-code {
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(239, 245, 242, 0.58);
  background: rgba(255, 255, 255, 0.04);
}
.checkout-payg-main {
  gap: 12px;
}
.checkout-payg-copy {
  gap: 3px;
  min-width: 0;
  padding: 0;
}
.checkout-payg-copy strong {
  color: #fff;
  font-size: 16px;
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.checkout-payg-copy small {
  color: rgba(226, 234, 231, 0.49);
  font-size: 10px;
  line-height: 1.35;
}
.checkout-payg-price {
  flex: 0 0 auto;
  gap: 1px;
}
.checkout-payg-price b {
  color: #fff;
  font-size: 17px;
  line-height: 1;
}
.checkout-payg-price small {
  color: rgba(226, 234, 231, 0.45);
  font-size: 9px;
}
.checkout-payg-meta {
  min-height: 30px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  gap: 8px;
  color: rgba(226, 234, 231, 0.58);
  font-size: 9px;
  font-weight: 650;
}
.checkout-payg-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.checkout-payg-meta span:nth-child(2) {
  margin-left: auto;
}
.checkout-payg-meta > i {
  color: #ff6873;
  font-size: 16px;
}
.checkout-payg-meta span i {
  color: #ff6873;
  font-size: 14px;
}

/* Разделитель между trial и платными тарифами */
.checkout-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
}
.checkout-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.checkout-divider-text {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Swipe-close handle enhancement */
.sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  margin: 0 auto 18px;
  cursor: grab;
  touch-action: none;
  transition: background 0.15s ease;
}
.sheet-handle:active {
  cursor: grabbing;
  background: rgba(255,255,255,0.35);
}

/* Back button in sheet header */
.sheet-back-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.sheet-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.sheet-back-btn:hover {
  border-color: var(--accent-red);
  background: var(--bg-secondary);
}
.sheet-back-btn:active {
  transform: scale(0.92);
}

/* Виджет баланса в реферальной программе */
.snowflakes-widget {
  background: var(--bg-secondary);
  border: 2px solid var(--accent-red);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.1);
}

.snowflakes-widget-content {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.snowflakes-widget-content svg {
  flex-shrink: 0;
}

.snowflakes-widget-info {
  flex: 1;
}

.snowflakes-widget-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 500;
}

.snowflakes-widget-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent-red);
  line-height: 1;
}

.snowflakes-widget-bonus {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

@keyframes iconPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* Скрываем только наши верхние кнопки "назад" (стрелка слева сверху) — Telegram имеет встроенную BackButton */
#checkout-back-btn,
#market-back-btn,
#agreement-back {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   BALANCE WIDGET (replaces snowflakes pill)
   ═══════════════════════════════════════════════════════════ */
.balance-widget {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, rgba(24,14,18,0.92) 0%, rgba(10,6,8,0.96) 100%);
  border: 1px solid rgba(229,21,21,0.22);
  border-radius: 14px;
  padding: 0.45rem 0.55rem 0.45rem 0.7rem;
  box-shadow: 0 0 0 1px rgba(229,21,21,0.06);
}
.balance-widget__info {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.balance-widget__label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
}
.balance-widget__amount {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.balance-widget__topup {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(229,21,21,0.28) 0%, rgba(160,10,10,0.4) 100%);
  border: 1px solid rgba(229,21,21,0.45);
  color: rgba(255,210,210,0.95);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.balance-widget__topup:hover {
  background: linear-gradient(135deg, rgba(229,21,21,0.42) 0%, rgba(180,12,12,0.55) 100%);
  border-color: rgba(229,21,21,0.65);
}
.balance-widget__topup:active { transform: scale(0.96); }

/* ═══════════════════════════════════════════════════════════
   REFERRAL SHEET — ruble redesign
   ═══════════════════════════════════════════════════════════ */
.ref-stats-row {
  display: flex;
  gap: 0.65rem;
  margin: 0 0 1rem;
}
.ref-stat-card {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ref-stat-card--gold {
  background: rgba(229,170,21,0.07);
  border-color: rgba(229,170,21,0.22);
}
.ref-stat-card__label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.ref-stat-card__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.ref-stat-card--gold .ref-stat-card__value { color: rgba(255,210,100,0.95); }

.ref-how-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 0.85rem;
  margin-bottom: 1rem;
}
.ref-how-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.6rem;
}
.ref-how-step {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.45;
  margin-bottom: 0.4rem;
}
.ref-how-step:last-child { margin-bottom: 0; }
.ref-how-step strong { color: rgba(255,210,210,0.95); }
.ref-how-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(229,21,21,0.2);
  border: 1px solid rgba(229,21,21,0.35);
  color: rgba(255,180,180,0.9);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* Invited list redesign */
.referral-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0;
}
.referral-item-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(229,21,21,0.18);
  border: 1px solid rgba(229,21,21,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,180,180,0.9);
  flex-shrink: 0;
}
.referral-item-name {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
}

/* Withdrawal section */
.ref-withdraw-section { margin-top: 0.75rem; }
.ref-withdraw-locked {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.ref-withdraw-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ref-withdraw-form__title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.ref-withdraw-form__hint {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  margin: -0.4rem 0 0;
}
.ref-withdraw-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ref-withdraw-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
}
.wd-method-btns {
  display: flex;
  gap: 0.5rem;
}
.wd-method-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wd-method-btn--active {
  background: rgba(229,21,21,0.12);
  border-color: rgba(229,21,21,0.45);
  color: rgba(255,210,210,0.95);
}
.wd-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1.25rem 0.5rem;
  text-align: center;
}
.wd-done-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(40,190,100,0.18);
  border: 1px solid rgba(40,190,100,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(80,220,140,0.95);
  font-size: 1.2rem;
}
.wd-done-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(100,230,150,0.95);
  margin: 0;
}
.wd-done-hint {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   TOPUP SHEET
   ═══════════════════════════════════════════════════════════ */
.sheet-body-pad {
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sheet-hint-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
}
.sheet-error-text {
  font-size: 0.82rem;
  color: rgba(255,120,120,0.9);
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: rgba(229,21,21,0.1);
  border: 1px solid rgba(229,21,21,0.2);
}
.sheet-error-text.hidden { display: none; }
.topup-quick-chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.topup-chip {
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.topup-chip--active {
  background: rgba(229,21,21,0.22);
  border-color: rgba(229,21,21,0.5);
  color: rgba(255,200,200,0.95);
}
.topup-chip:hover:not(.topup-chip--active) {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
}
.topup-input-wrap {
  position: relative;
}
.topup-input {
  width: 100%;
  padding: 0.82rem 2.5rem 0.82rem 1rem;
  border-radius: 13px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.18s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.topup-input:focus { border-color: rgba(229,21,21,0.5); background: rgba(255,255,255,0.07); }
.topup-input::placeholder { color: rgba(255,255,255,0.25); }
.topup-input-currency {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.4);
  font-size: 0.9rem;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   PAYMENT METHOD SHEET
   ═══════════════════════════════════════════════════════════ */
.paymethod-lte-context {
  margin: -2px 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.paymethod-lte-context strong {
  color: var(--text-primary);
  font-weight: 700;
}

.paymethod-amount-label {
  text-align: center;
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  margin: 0 0 0.25rem;
}
.paymethod-amount-label strong { color: #fff; font-size: 1.25rem; }
.paymethod-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}
.paymethod-option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 0.9rem;
  border-radius: 15px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}
.paymethod-option--active {
  border-color: rgba(229,21,21,0.5);
  background: rgba(229,21,21,0.08);
}
.paymethod-option--disabled { opacity: 0.45; cursor: not-allowed; }
.paymethod-option:hover:not(.paymethod-option--active):not(.paymethod-option--disabled) {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}
.paymethod-option__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.paymethod-option__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.paymethod-option__name {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
}
.paymethod-option__hint {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.42);
}
.paymethod-option__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.paymethod-option__radio--on {
  background: var(--accent-red, #e51515);
  border-color: var(--accent-red, #e51515);
}
.paymethod-option__radio--on::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
.paymethod-save {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: -0.1rem 0 0.75rem;
  padding: 0.78rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(90% 170% at 100% 0%, rgba(229,21,21,0.12), transparent 68%),
    rgba(255,255,255,0.035);
}
.paymethod-save[aria-pressed="false"] {
  border-color: rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}
.paymethod-save .paymethod-checkbox { margin: 0; }
.paymethod-save__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.paymethod-save__copy strong {
  color: rgba(255,255,255,0.92);
  font-size: 0.82rem;
  font-weight: 750;
}
.paymethod-save__copy small {
  color: rgba(255,255,255,0.42);
  font-size: 0.69rem;
  line-height: 1.35;
}
.paymethod-save__badge {
  padding: 4px 6px;
  border-radius: 7px;
  color: #ff7b80;
  background: rgba(229,21,21,0.12);
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.paymethod-unbind {
  width: 100%;
  margin: -0.35rem 0 0.75rem;
  border: 0;
  color: rgba(255,255,255,0.42);
  background: transparent;
  font-size: 0.7rem;
  font-weight: 650;
}
.paymethod-unbind:hover { color: rgba(255,255,255,0.68); }
.paymethod-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  cursor: default;
  user-select: none;
  margin-bottom: 0.25rem;
}
.paymethod-agree .paymethod-checkbox {
  cursor: pointer;
}
.paymethod-agree .inline-link-btn {
  position: relative;
  z-index: 2;
}
.paymethod-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.22);
  flex-shrink: 0;
  margin-top: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  color: transparent;
  font-size: 0.75rem;
}
.paymethod-checkbox--on {
  background: var(--accent-red, #e51515);
  border-color: var(--accent-red, #e51515);
  color: #fff;
}
.ref-link-a {
  color: rgba(229,21,21,0.85);
  text-decoration: underline;
}

/* Баланс в шапке — мини-карточка в стиле .card / реферального блока */
.balance-mini-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 9px;
  max-width: min(50vw, 208px);
  flex-shrink: 0;
  min-width: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.balance-mini-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(229, 21, 21, 0.06) inset;
}
.balance-mini-card__icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--accent-red);
  font-size: 1.05rem;
  line-height: 1;
}
.balance-mini-card__icon .ti {
  stroke-width: 1.75;
}
.balance-mini-card__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
.balance-mini-card__label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.2;
}
.balance-mini-card__amount {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.balance-mini-card__topup {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(229, 21, 21, 0.35);
  background: rgba(229, 21, 21, 0.1);
  color: rgba(255, 200, 200, 0.95);
  cursor: pointer;
  font-size: 1rem;
  transition: var(--transition-fast);
}
.balance-mini-card__topup:hover {
  background: rgba(229, 21, 21, 0.2);
  border-color: rgba(229, 21, 21, 0.55);
  box-shadow: 0 0 14px rgba(229, 21, 21, 0.2);
}
.balance-mini-card__topup:active {
  transform: scale(0.94);
}

/* В Telegram используем системную кнопку «Назад» — дубли в UI скрываем */
body.tg-native-back .screen-back-fallback {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Слой соглашения поверх чекаута и полноэкранных экранов */
.backdrop.agreement-layer,
.sheet.agreement-layer {
  z-index: 10070 !important;
}
.backdrop.agreement-layer.show {
  z-index: 10070 !important;
}
.sheet.agreement-layer.open {
  z-index: 10071 !important;
}

/* Затемнение вместо «белой вспышки» при открытии внешней оплаты */
.pay-redirect-shroud {
  position: fixed;
  inset: 0;
  z-index: 100200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #050505;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.pay-redirect-shroud:not(.hidden) {
  pointer-events: auto;
}
.pay-redirect-shroud.pay-redirect-shroud--visible {
  opacity: 1;
}
.pay-redirect-shroud__card {
  max-width: 300px;
  text-align: center;
  padding: 1.75rem 1.35rem;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(28, 28, 32, 0.98) 0%, rgba(12, 12, 14, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
}
.pay-redirect-shroud__spin {
  font-size: 2rem;
  color: rgba(229, 21, 21, 0.9);
  display: block;
  margin: 0 auto 1rem;
  animation: pay-shroud-spin 0.85s linear infinite;
}
@keyframes pay-shroud-spin {
  to { transform: rotate(360deg); }
}
.pay-redirect-shroud__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.pay-redirect-shroud__text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.48);
  margin: 0;
}

.market-page-price--cta {
  align-items: baseline;
  gap: 0.25rem;
}
.market-price-from {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.market-price-text-inline {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

/* Referral / balance — полноэкранный слайд как checkout */
.referral-page,
.balance-page {
  position: fixed;
  inset: 0;
  /* Привязываемся к Telegram-вьюпорту: в fullscreen 100% body выше реально доступного
     экрана и нижний padding "Зови друзей / История" уезжает за home-indicator. */
  height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  max-height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  z-index: 52;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #050505);
  padding: calc(var(--tg-effective-safe-area-inset-top, 0px) + 8px) 0 0;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  overscroll-behavior: contain;
}
.referral-page.hidden,
.balance-page.hidden {
  display: none !important;
}
.referral-page.checkout-slide-active,
.balance-page.checkout-slide-active {
  transform: translateX(0);
}
.referral-page-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-width: min(520px, 100%);
  width: 100%;
  margin: 0 auto;
  padding: 0 0 calc(4rem + var(--tg-effective-safe-area-inset-bottom, 0px));
}
.referral-page-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 0.5rem;
  position: sticky;
  top: 0;
  background: var(--bg-primary, #050505);
  z-index: 10;
}
.referral-page-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.referral-page-hero {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.referral-hero-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: rgba(229,21,21,0.18);
  border: 1px solid rgba(229,21,21,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,160,160,0.9);
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
.referral-hero-earned-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
}
.referral-hero-earned {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.referral-hero-sub {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
}
.referral-page-stats {
  display: flex;
  gap: 0.75rem;
  padding: 0 1rem 1.25rem;
}
.referral-stat {
  flex: 1;
  background: rgba(229,21,21,0.07);
  border: 1px solid rgba(229,21,21,0.18);
  border-radius: 14px;
  padding: 0.85rem;
  text-align: center;
}
.referral-stat__val {
  font-size: 1.6rem;
  font-weight: 800;
  color: rgba(255,160,160,0.95);
  letter-spacing: -0.02em;
}
.referral-stat__label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.15rem;
}
.referral-page-section {
  padding: 0 1rem 1.25rem;
}
.referral-page-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.65rem;
}
.ref-how-step {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin-bottom: 0.55rem;
}
.ref-how-step:last-child { margin-bottom: 0; }
.ref-how-step strong { color: rgba(255,180,180,0.95); }
.ref-how-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(229,21,21,0.2);
  border: 1px solid rgba(229,21,21,0.35);
  color: rgba(255,180,180,0.9);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.referral-link-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.referral-link-input {
  flex: 1;
  font-size: 0.8rem !important;
  padding: 0.7rem 0.85rem !important;
}
.ref-copy-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(229,21,21,0.15);
  border: 1px solid rgba(229,21,21,0.3);
  color: rgba(255,160,160,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.ref-copy-btn:hover { background: rgba(229,21,21,0.25); }
.ref-copy-btn:active { transform: scale(0.93); }

.balance-page-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-width: min(520px, 100%);
  width: 100%;
  margin: 0 auto;
  padding: 0 0 calc(4rem + var(--tg-effective-safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.balance-page-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 0.5rem;
  position: sticky;
  top: 0;
  background: var(--bg-primary, #050505);
  z-index: 10;
}
.balance-page-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.balance-page-hero {
  text-align: center;
  padding: 1.5rem 1rem 1rem;
}
.balance-hero-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.35rem;
}
.balance-hero-amount {
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}
.balance-hero-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  margin-top: 0.5rem;
}
.balance-hero-breakdown {
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.balance-hero-line {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.35;
}
.balance-hero-line strong {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.balance-hero-hint {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.28);
}
.balance-page-section {
  padding: 0 1rem;
}
.balance-page-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.65rem;
}
.balance-transactions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.balance-tx-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}
.balance-tx-desc {
  flex: 1;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.balance-tx-meta {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.balance-tx-amount {
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.balance-tx-plus { color: rgba(80,220,140,0.9); }
.balance-tx-minus { color: rgba(255,100,100,0.85); }
.balance-tx-empty {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding: 1.5rem 0;
}
.inline-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: rgba(229,21,21,0.85);
  text-decoration: underline;
  font-size: inherit;
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════════
   iOS polish — только самое необходимое: убираем синие обводки, тап-хайлайты,
   long-press меню. НЕ трогаем :active/:hover (они уже настроены по месту),
   НЕ навязываем focus-ring (на iOS он появляется после тапа и выглядит
   дёшево — лучше никакого, чем плохой).
   ═══════════════════════════════════════════════════════════════════════════ */

* { -webkit-tap-highlight-color: transparent; }

button,
[role="button"],
a,
.nav-link,
.tab,
.card,
.card[role="button"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

/* Принудительно убираем ЛЮБОЙ outline при тапе/фокусе — iOS Safari любит
   подсветить элемент после тапа, это выглядит «андроидно». */
button:focus,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible,
a:focus,
a:focus-visible,
input:focus,
textarea:focus,
select:focus,
.card:focus,
.card:focus-visible {
  outline: none !important;
  box-shadow: inherit;
}

/* Для клавиатурных пользователей: совсем без focus-стиля — accessibility risk,
   но визуально чисто. Telegram MiniApp — touch-first, клавиатурная навигация
   через TG минимальна. Оставляем на тех элементах, где у них СВОЙ focus-стиль
   (primary-btn имеет глоу, ghost-btn — красный border). */


/* ════════════════════════════════════════════════════════════════════════════
   REDESIGN v3 (App onboarding handoff, Apr 2026)
   HeroCard + Quick tiles + Referral banner. Shared primitives: eyebrow, num,
   live-dot, progress/bar, pill, btn-outline.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared primitives из design-системы макета ─────────────────────────── */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.eyebrow.red { color: var(--red); }
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--red);
  display: inline-block;
  animation: pulse-red 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 45, 0.7); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 45, 45, 0); }
}
.live-dot.is-idle {
  background: var(--text-mute);
  animation: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border: 1px solid var(--divider);
}
.pill.red   { background: var(--red-soft-bg); color: var(--red);   border-color: var(--red-border); }
.pill.green { background: rgba(59,224,122,0.1); color: var(--green); border-color: rgba(59,224,122,0.25); }

/* Unified progress bar (used by hero, lte, anywhere new) */
.progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress > .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--red) 0%, #FF6A3D 100%);
  border-radius: 999px;
  position: relative;
  overflow: hidden;   /* держит блик внутри fill — не вылезает и доходит до края */
  transition: width 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.progress > .bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 60%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0)   0%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0)   100%);
  animation: progress-shimmer 2.6s ease-in-out infinite;
}
@keyframes progress-shimmer {
  0%   { left: -60%; }
  60%  { left: 100%; }
  100% { left: 100%; } /* пауза перед следующим циклом */
}
@media (prefers-reduced-motion: reduce) {
  .progress > .bar::after { animation: none; display: none; }
  .progress > .bar { transition: none; }
}

/* Stagger animation — лёгкий rise-in. Режим по умолчанию OFF,
   включается явным классом .is-entering для конкретных контейнеров. */
.stagger.is-entering > * {
  opacity: 0;
  transform: translateY(6px);
  animation: stagger-rise 320ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.stagger.is-entering > *:nth-child(1) { animation-delay: 20ms; }
.stagger.is-entering > *:nth-child(2) { animation-delay: 55ms; }
.stagger.is-entering > *:nth-child(3) { animation-delay: 90ms; }
.stagger.is-entering > *:nth-child(4) { animation-delay: 125ms; }
.stagger.is-entering > *:nth-child(5) { animation-delay: 160ms; }
.stagger.is-entering > *:nth-child(6) { animation-delay: 195ms; }
@keyframes stagger-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .stagger.is-entering > * { animation: none; opacity: 1; transform: none; }
}

/* ── HeroCard: подписка в iOS-стиле ─────────────────────────────────────── */
.hero-sub {
  position: relative;
  border-radius: var(--r-xl);
  padding: 16px;
  margin: 0 0 10px;
  /* Один flat-gradient + один radial — iOS рендерит 2 слоя дёшево */
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255, 45, 45, 0.20), transparent 60%),
    linear-gradient(180deg, #15151B 0%, #0F0F14 100%);
  border: 1px solid rgba(255, 45, 45, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 20px 40px -20px rgba(255, 45, 45, 0.18);
  /* overflow:hidden убран — иначе нижние actions могли скрываться при any edge-case.
     Граница карты чётко ограничена `border-radius` + background-clip. */
  background-clip: padding-box;
  isolation: isolate;
  contain: layout style paint;
}

.hero-sub-crown {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 45, 45, 0.14);
  border: 1px solid rgba(255, 45, 45, 0.3);
  display: grid;
  place-items: center;
  color: var(--red);
  font-size: 17px;
  z-index: 1;
}
.hero-sub.is-inactive .hero-sub-crown { display: none; }

.hero-sub-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hero-sub-days-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.hero-sub-days-num {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.hero-sub-days-unit {
  font-size: 15px;
  color: var(--text-dim);
  font-weight: 600;
}
.hero-sub.is-inactive .hero-sub-days-num {
  font-size: 28px;
  color: var(--text-dim);
}
.hero-sub-plan {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
  min-height: 18px;
}
.hero-sub-plan.is-loading {
  /* пока данные не пришли — внутри skeleton-полоска */
  padding: 2px 0;
}
.hero-plan-skeleton {
  display: inline-block;
  width: 160px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-plan-skeleton { animation: none; }
}

.hero-sub-progress { margin-bottom: 10px; }
.hero-sub-progress.hidden { display: none; }
.hero-sub-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-mute);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.hero-sub-progress-date { letter-spacing: 0.01em; }
.hero-sub-progress-pct { font-weight: 700; color: var(--text-dim); }
.hero-sub-progress-bar { height: 8px; }

/* Flex вместо grid — надёжнее на старых iOS без :has().
   Когда renew-btn скрыт (.hidden → display:none), info-btn автоматически
   растягивается на всю ширину благодаря flex:1. */
.hero-sub-actions {
  display: flex;
  gap: 8px;
  min-height: 46px;       /* гарантируем вертикальное место даже если буквально пусто */
}
.hero-sub-actions > .hero-sub-btn { flex: 1 1 0; min-width: 0; }

.hero-sub-btn {
  height: 46px;
  font-size: 14px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  transition: transform 120ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  color: var(--text);
  padding: 0 14px;
  white-space: nowrap;
}
.hero-sub-btn:active:not(:disabled) { transform: scale(0.98); }
.hero-sub-btn.btn-ghost {
  background: var(--bg-elev-2);
  border: 1px solid var(--divider);
}
.hero-sub-btn.btn-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.hero-sub-btn.btn-outline {
  background: transparent;
  border: 1px solid var(--red-border);
  color: var(--red);
}
.hero-sub-btn.btn-outline:hover {
  background: var(--red-soft-bg);
}
.hero-sub-btn i { font-size: 16px; }
.hero-sub-btn .hero-sub-btn-icon { display: inline-flex; align-items: center; }

/* ── Quick tiles: вертикальные блоки (icon сверху, label снизу) ──────── */
.quick-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 14px;
}
.quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
  /* Такой же угольный фон как у .lte-card — единый стиль на главной */
  background: var(--bg-elev-1);
  border: 1px solid var(--divider);
  border-radius: 16px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition:
    transform 120ms ease,
    background 180ms ease,
    border-color 180ms ease;
  min-height: 76px;
  min-width: 0;
  overflow: hidden;
  contain: layout style paint;
}
.quick-tile:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.4);
}
.quick-tile:hover {
  border-color: rgba(255, 45, 45, 0.28);
}
.quick-tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 45, 45, 0.12);
  color: var(--red);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.quick-tile-icon i { font-size: 18px; line-height: 1; }
.quick-tile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
@media (max-width: 360px) {
  .quick-tile { padding: 12px 8px; min-height: 68px; }
  .quick-tile-icon { width: 30px; height: 30px; }
  .quick-tile-icon i { font-size: 16px; }
  .quick-tile-label { font-size: 11px; }
}

/* ── Referral banner (без аватарок, без friend count) ─────────────────── */
.ref-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 45, 45, 0.18), rgba(255, 45, 45, 0.05) 60%),
    var(--bg-elev-1);
  border: 1px solid var(--red-border);
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease;
}
.ref-banner:active { transform: scale(0.99); }
.ref-banner-glyph {
  position: absolute;
  right: -14px;
  top: -24px;
  font-size: 150px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 45, 45, 0.08);
  pointer-events: none;
  user-select: none;
}
.ref-banner-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.ref-banner-eyebrow {
  margin-bottom: 4px;
}
.ref-banner-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 3px;
  color: var(--text);
}
.ref-banner-accent { color: var(--red); }
.ref-banner-sub {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.ref-banner-arrow {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 45, 45, 0.1);
  color: var(--red);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── Полировка existing элементов главной под новый rhythm ─────────────── */
.lte-card {
  /* Уточнение: более тёмный фон, единый радиус с hero */
  border-radius: var(--r-lg);
}

/* Primary CTA — "Подключить устройство" */
.primary-btn {
  border-radius: 16px;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE v2 — sheet (big avatar + promo + nav list)
   ═══════════════════════════════════════════════════════════════════════════ */
.profile-v2 {
  padding: 10px 18px 28px;
}
.profile-v2-hero {
  text-align: center;
  padding: 12px 0 18px;
}
.profile-v2-avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 30% 30%, #3A3A42, #12121A),
    #1a1a22;
  border: 2px solid rgba(255, 45, 45, 0.5);
  box-shadow: 0 0 40px rgba(255, 45, 45, 0.38);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}
.profile-v2-avatar img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  image-rendering: auto;
  display: none;
}
.profile-v2-avatar img.is-loaded {
  display: block;
}
.profile-v2-avatar .initials {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.profile-v2-avatar::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 180deg, transparent, rgba(255,45,45,0.28), transparent 50%, rgba(255,45,45,0.28), transparent);
  pointer-events: none;
}
.profile-v2-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.profile-v2-id {
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text-mute);
  margin-top: 3px;
}
.profile-v2-plan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 45, 45, 0.1);
  border: 1px solid var(--red-border);
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.profile-v2-plan i { font-size: 13px; }
.profile-v2.is-inactive .profile-v2-plan {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--divider);
  color: var(--text-mute);
}

/* Promo card */
.profile-v2-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  padding: 14px 14px 14px;
  margin-bottom: 14px;
}
.profile-v2-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.profile-v2-card-icon {
  color: var(--red);
  font-size: 16px;
}
.profile-v2-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.profile-v2-card-sub {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-mute);
}
.profile-v2-promo-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.profile-v2-input {
  flex: 1 1 0;
  min-width: 0;           /* КРИТИЧНО: без этого flex-child может раздувать контейнер */
  height: 46px;
  border-radius: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--divider);
  color: var(--text);
  padding: 0 14px;
  font-size: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  outline: none;
  transition: border-color 160ms, background 160ms;
  box-sizing: border-box;
}
.profile-v2-input:focus {
  border-color: var(--red);
  background: var(--bg-elev-3);
}
.profile-v2-input::placeholder { color: var(--text-mute); letter-spacing: 0.02em; }
.profile-v2-apply-btn {
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #FF3A3A 0%, #E11313 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 45, 45, 0.3);
  transition: transform 120ms ease, box-shadow 180ms ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.profile-v2-apply-btn:active { transform: scale(0.97); }
@media (max-width: 360px) {
  .profile-v2-apply-btn { padding: 0 12px; font-size: 12px; }
}

/* Nav list */
.profile-v2-list {
  border-radius: var(--r-lg);
  border: 1px solid var(--divider);
  overflow: hidden;
  background: var(--bg-elev-1);
  margin-bottom: 14px;
}
.profile-v2-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease;
}
.profile-v2-row:last-child { border-bottom: 0; }
.profile-v2-row:hover { background: var(--bg-elev-2); }
.profile-v2-row:active { background: var(--bg-elev-3); }
.profile-v2-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 45, 45, 0.1);
  color: var(--red);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.profile-v2-row-text {
  flex: 1;
  min-width: 0;
}
.profile-v2-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.profile-v2-row-sub {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-v2-row-chev {
  color: var(--text-mute);
  font-size: 16px;
  flex-shrink: 0;
}

.profile-v2-close {
  width: 100%;
  height: 48px;
  border: 1px solid var(--divider);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.profile-v2-close:hover { background: var(--bg-elev-3); color: var(--text); }
.profile-v2-close:active { transform: scale(0.99); }


/* ════════════════════════════════════════════════════════════════════════════
   BALANCE v2 — big hero + chips + tx list
   ═══════════════════════════════════════════════════════════════════════════ */
.balance-v2 {
  /* Восстанавливаем safe-area top (иначе Telegram chrome накрывает контент) */
  padding:
    calc(var(--tg-effective-safe-area-inset-top, 0px) + 14px)
    16px
    calc(var(--tg-effective-safe-area-inset-bottom, 0px) + 56px);
  background: transparent;
}
.balance-v2-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.balance-v2-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 6px;
  min-height: 40px;
}
.balance-v2-back {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--divider);
  background: var(--bg-elev-1);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 16px;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
  flex-shrink: 0;
}
.balance-v2-back:hover { background: var(--bg-elev-2); }
.balance-v2-back:active { transform: scale(0.95); }
/* Если Telegram показывает свой native back — скрываем наш */
body.tg-native-back .balance-v2-back { display: none; }
body.tg-native-back .balance-v2-header { padding-top: 0; }
.balance-v2-title {
  flex: 1;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Big hero card */
.balance-v2-hero {
  border-radius: var(--r-xl);
  padding: 20px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 45, 45, 0.18), transparent 70%),
    var(--bg-elev-1);
  border: 1px solid var(--divider);
  margin-bottom: 6px;
  text-align: center;
}
.balance-v2-hero-label {
  text-align: center;
  color: var(--text-mute);
}
.balance-v2-hero-amount {
  text-align: center;
  margin: 6px 0 14px;
}
.balance-v2-hero-amount .num {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.balance-v2-hero-currency {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dim);
  margin-left: 4px;
}
.balance-v2-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  text-align: left;
}
.balance-v2-box {
  background: var(--bg-elev-2);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 12px;
}
.balance-v2-box.is-accent {
  background: rgba(255, 45, 45, 0.08);
  border-color: var(--red-border);
}
.balance-v2-box-label {
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}
.balance-v2-box-value {
  font-size: 18px;
  font-weight: 800;
  margin: 3px 0;
  color: var(--text);
}
.balance-v2-box.is-accent .balance-v2-box-value { color: var(--red); }
.balance-v2-box-note {
  font-size: 10px;
  color: var(--text-mute);
}

/* Sections */
.balance-v2-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 4px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.balance-v2-section-title--more { margin-top: 14px; }
.balance-v2-section-sub {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}

/* Chips */
.balance-v2-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.balance-v2-chip {
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--divider);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease;
}
.balance-v2-chip:hover { background: var(--bg-elev-3); }
.balance-v2-chip:active { transform: scale(0.97); }
.balance-v2-chip.active,
.balance-v2-chip[data-active="true"] {
  background: rgba(255, 45, 45, 0.12);
  color: var(--red);
  border-color: var(--red-border);
}

/* Input */
.balance-v2-input-wrap {
  position: relative;
  margin-bottom: 14px;
}
.balance-v2-input {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--divider);
  color: var(--text);
  padding: 0 34px 0 16px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 160ms, background 160ms;
  -moz-appearance: textfield;
}
.balance-v2-input::-webkit-outer-spin-button,
.balance-v2-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.balance-v2-input:focus { border-color: var(--red); background: var(--bg-elev-3); }
.balance-v2-input-currency {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-mute);
  font-size: 15px;
  pointer-events: none;
}

/* Terms checkbox */
.balance-v2-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  margin-bottom: 14px;
  padding: 2px 0;
  user-select: none;
}
.balance-v2-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--divider-strong);
  background: transparent;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
  -webkit-appearance: none;
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
}
.balance-v2-checkbox:active { transform: scale(0.92); }
.balance-v2-checkbox i {
  color: transparent;
  font-size: 13px;
  transition: color 160ms ease;
}
.balance-v2-checkbox[aria-checked="true"],
.balance-v2-checkbox.is-checked {
  background: var(--red);
  border-color: var(--red);
}
.balance-v2-checkbox[aria-checked="true"] i,
.balance-v2-checkbox.is-checked i { color: #fff; }
.balance-v2-terms-text { line-height: 1.45; }
.balance-v2-terms-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--red);
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}
.balance-v2-legal { display: none; }

.balance-v2-error {
  color: var(--red);
  font-size: 12px;
  margin: 0 0 10px;
}

.balance-v2-pay-btn {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #FF3A3A 0%, #E11313 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 45, 45, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 120ms ease, box-shadow 180ms ease;
}
.balance-v2-pay-btn:active { transform: scale(0.99); }
.balance-v2-pay-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Tx list */
.balance-v2-tx-list {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--divider);
  background: var(--bg-elev-1);
}
.balance-v2-tx-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
}
/* Each transaction row (will be injected by JS with these classes) */
.balance-v2-tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider);
}
.balance-v2-tx-row:last-child { border-bottom: 0; }
.balance-v2-tx-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 15px;
}
.balance-v2-tx-icon.is-in {
  background: rgba(59, 224, 122, 0.1);
  color: var(--green);
}
.balance-v2-tx-icon.is-out {
  background: rgba(255, 45, 45, 0.1);
  color: var(--red);
}
.balance-v2-tx-text { flex: 1; min-width: 0; }
.balance-v2-tx-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.balance-v2-tx-date {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 1px;
}
.balance-v2-tx-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.balance-v2-tx-amount.is-in { color: var(--green); }


/* ════════════════════════════════════════════════════════════════════════════
   REFERRAL v2 — hero earnings + steps + link row + withdraw
   ═══════════════════════════════════════════════════════════════════════════ */
.ref-v2 {
  padding:
    calc(var(--tg-effective-safe-area-inset-top, 0px) + 14px)
    16px
    calc(var(--tg-effective-safe-area-inset-bottom, 0px) + 56px);
}
.ref-v2-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ref-v2-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 6px;
  min-height: 40px;
}
body.tg-native-back .ref-v2 .balance-v2-back { display: none; }
body.tg-native-back .ref-v2-header { padding-top: 0; }
.ref-v2-title-block { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ref-v2-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ref-v2-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Earnings hero */
.ref-v2-hero {
  position: relative;
  border-radius: var(--r-xl);
  padding: 18px 18px 16px;
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(255, 45, 45, 0.18), transparent 70%),
    var(--bg-elev-1);
  border: 1px solid var(--red-border);
  overflow: hidden;
  margin-bottom: 6px;
}
.ref-v2-hero-bg-glow {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 45, 45, 0.15), transparent 70%);
  pointer-events: none;
}
.ref-v2-hero-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ref-v2-hero-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 45, 45, 0.15);
  border: 1px solid var(--red-border);
  color: var(--red);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.ref-v2-hero-amount {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
}
.ref-v2-hero-amount .num {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ref-v2-hero-currency {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
}
.ref-v2-progress {
  position: relative;
  z-index: 1;
  padding: 8px 3px 0;
  margin: 0 0 12px;
}
.ref-v2-progress-line {
  position: absolute;
  top: 21px;
  left: 25px;
  right: 25px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}
.ref-v2-progress-line span {
  display: block;
  width: var(--ref-progress-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff2d2d, #ff6b4a);
  box-shadow: 0 0 14px rgba(255, 45, 45, 0.5);
  transition: width 420ms cubic-bezier(.22, 1, .36, 1);
}
.ref-v2-progress-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.ref-v2-progress-node {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--text-mute);
}
.ref-v2-progress-node b,
.ref-v2-progress-node > i {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #171719;
  color: var(--text-dim);
  font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
.ref-v2-progress-node small {
  color: currentColor;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ref-v2-progress-node.is-complete { color: #ff6b5d; }
.ref-v2-progress-node.is-complete b,
.ref-v2-progress-node.is-complete > i {
  background: var(--red);
  border-color: rgba(255, 120, 105, 0.7);
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 45, 45, 0.32);
  transform: scale(1.04);
}
.ref-v2-progress-node.is-reward b,
.ref-v2-progress-node.is-reward > i { font-size: 14px; }
.ref-v2-progress-note {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.ref-v2-progress-note strong { color: var(--text); }
.ref-v2-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ref-v2-stat {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--divider);
}
.ref-v2-stat.is-accent {
  background: rgba(255, 45, 45, 0.08);
  border-color: var(--red-border);
}
.ref-v2-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}
.ref-v2-stat.is-accent .ref-v2-stat-val { color: var(--red); }
.ref-v2-stat-label {
  font-size: 10px;
  color: var(--text-mute);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Steps */
.ref-v2-steps {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}
.ref-v2-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--divider);
}
.ref-v2-step-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 45, 45, 0.12);
  border: 1px solid var(--red-border);
  color: var(--red);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  flex-shrink: 0;
}
.ref-v2-step-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.ref-v2-step-text strong { color: var(--red); font-weight: 700; }

/* Link row */
.ref-v2-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 4px 4px 4px 14px;
}
.ref-v2-link-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  outline: none;
  height: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ref-v2-copy-btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 11px;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 180ms ease, transform 120ms ease;
  flex-shrink: 0;
}
.ref-v2-copy-btn:hover { background: var(--red-bright); }
.ref-v2-copy-btn:active { transform: scale(0.94); }
.ref-v2-copy-btn.is-copied { background: var(--green); }

/* Withdraw section — легко-переставляемый контейнер */
.ref-v2-withdraw-section {
  margin-top: 14px;
}

.ref-v2-influencer {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 11px;
  padding: 16px;
  border: 1px solid rgba(255, 45, 45, 0.24);
  border-radius: 16px;
  background:
    radial-gradient(100% 120% at 100% 0%, rgba(255, 45, 45, 0.13), transparent 56%),
    var(--bg-elev-1);
  overflow: hidden;
}
.ref-v2-partner-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 45, 45, 0.13);
  border: 1px solid var(--red-border);
  color: var(--red);
  font-size: 18px;
}
.ref-v2-influencer-copy { display: grid; min-width: 0; gap: 5px; overflow-wrap: anywhere; }
.ref-v2-influencer-copy strong { color: var(--text); font-size: 14px; }
.ref-v2-influencer-copy span { color: var(--text-dim); font-size: 12px; line-height: 1.45; }
.ref-v2-influencer-status {
  grid-column: 1 / -1;
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--text);
  background: rgba(255, 184, 0, 0.1);
  border: 1px solid rgba(255, 184, 0, 0.22);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ref-v2-influencer-status.is-approved { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.25); }
.ref-v2-influencer-status.is-rejected { background: rgba(255, 45, 45, 0.08); border-color: var(--red-border); }
.ref-v2-partner-button {
  grid-column: 1 / -1;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 10px 12px 10px 14px;
  border: 0;
  border-radius: 13px;
  background: var(--red);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(255, 45, 45, 0.2);
  transition: transform 120ms ease, background 180ms ease;
}
.ref-v2-partner-button:active { transform: scale(0.985); }
.ref-v2-partner-button span { display: grid; min-width: 0; gap: 2px; overflow-wrap: anywhere; }
.ref-v2-partner-button strong { font-size: 13px; font-weight: 780; }
.ref-v2-partner-button small { font-size: 10px; color: rgba(255, 255, 255, 0.76); }
.ref-v2-partner-button > i { font-size: 18px; }
.ref-v2-partner-button.is-approved {
  background: rgba(34, 197, 94, 0.14);
  color: #8bf0a8;
  border: 1px solid rgba(34, 197, 94, 0.3);
  box-shadow: none;
}
.ref-v2-partner-button.is-pending {
  background: rgba(255, 184, 0, 0.13);
  color: #ffd166;
  border: 1px solid rgba(255, 184, 0, 0.26);
  box-shadow: none;
}
.ref-v2-payout-button {
  border-color: rgba(255, 82, 94, 0.3);
  background: linear-gradient(120deg, rgba(255, 54, 70, 0.17), rgba(15, 21, 20, 0.96) 72%);
}

/* Priority payout is a first-class screen instead of a form hidden at the
   bottom of the legacy referral page. */
.withdrawal-v2 {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  max-height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh));
  min-height: 0;
  box-sizing: border-box;
  padding:
    calc(var(--tg-effective-safe-area-inset-top, 0px) + 8px)
    max(14px, var(--tg-effective-safe-area-inset-right, 0px))
    0
    max(14px, var(--tg-effective-safe-area-inset-left, 0px));
  overflow: hidden;
  color: #f4f7f6;
  background:
    radial-gradient(290px 360px at 108% 12%, rgba(255, 45, 61, 0.23), transparent 72%),
    #090d0c;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.withdrawal-v2.hidden { display: none !important; }
.withdrawal-v2.checkout-slide-active { transform: translate3d(0, 0, 0); }
.withdrawal-v2__wrap {
  flex: 1 1 auto;
  width: min(100%, 520px);
  min-height: 0;
  margin-inline: auto;
  padding: 0 2px calc(30px + var(--tg-effective-safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.withdrawal-v2__header {
  position: sticky;
  z-index: 5;
  top: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  min-height: 58px;
  padding: 5px 0 7px;
  background: rgba(9, 13, 12, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.withdrawal-v2__header > div { min-width: 0; text-align: center; }
.withdrawal-v2__header span { color: #ff6874; font-size: 8px; font-weight: 850; letter-spacing: 0.13em; }
.withdrawal-v2__header h1 { margin: 2px 0 0; overflow: hidden; font-size: 15px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.withdrawal-v2__back {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  color: #f4f7f6;
  background: rgba(255, 255, 255, 0.045);
  font: inherit;
  font-size: 20px;
}
.withdrawal-v2__hero {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 10px 0 12px;
  padding: 18px;
  border: 1px solid rgba(255, 79, 92, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(180px 140px at 100% 0%, rgba(255, 57, 73, 0.17), transparent 72%),
    rgba(17, 24, 22, 0.94);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}
.withdrawal-v2__hero-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  color: #ff6470;
  background: rgba(255, 57, 73, 0.11);
  font-size: 24px;
}
.withdrawal-v2__hero > div { display: grid; min-width: 0; gap: 3px; }
.withdrawal-v2__hero small { color: #8f9a96; font-size: 10px; }
.withdrawal-v2__hero strong { font-size: clamp(24px, 8vw, 34px); line-height: 1.05; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.withdrawal-v2__hero p { margin: 5px 0 0; color: #8f9a96; font-size: 9.5px; line-height: 1.4; overflow-wrap: anywhere; }
.withdrawal-v2 .ref-v2-withdraw-section { margin-top: 0; }
.withdrawal-v2 .ref-withdraw-form,
.withdrawal-v2 .ref-withdraw-locked {
  border-color: rgba(255, 76, 89, 0.18);
  background: rgba(16, 23, 22, 0.94);
}
.withdrawal-v2 .ref-withdraw-form { gap: 13px; padding: 16px; border-radius: 22px; }
.withdrawal-v2 .ref-withdraw-form__title { font-size: 16px; }
.withdrawal-v2 .topup-input { min-width: 0; }
.withdrawal-v2 .primary-btn { min-height: 52px; border-radius: 999px; }
.withdrawal-v2__loading {
  display: grid;
  gap: 9px;
  min-height: 260px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  background: rgba(16, 23, 22, 0.92);
}
.withdrawal-v2__loading > span {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
}
.withdrawal-v2__loading > span::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.055), transparent);
  content: "";
  transform: translate3d(-100%, 0, 0);
  animation: withdrawal-v2-shimmer 1.1s ease-in-out infinite;
}
.withdrawal-v2__loading p { margin: 7px 0 0; color: #818c88; font-size: 9.5px; line-height: 1.4; text-align: center; }
@keyframes withdrawal-v2-shimmer { to { transform: translate3d(100%, 0, 0); } }
.withdrawal-v2__pending {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 18px;
  border: 1px solid rgba(255, 177, 67, 0.2);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(75, 49, 13, 0.18), rgba(16, 23, 22, 0.94) 72%);
}
.withdrawal-v2__pending-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  color: #ffc06a;
  background: rgba(255, 177, 67, 0.1);
  font-size: 22px;
}
.withdrawal-v2__pending > div { display: grid; min-width: 0; gap: 4px; }
.withdrawal-v2__pending small { color: #dba85f; font-size: 8px; font-weight: 850; letter-spacing: 0.09em; }
.withdrawal-v2__pending strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.withdrawal-v2__pending p { margin: 2px 0 0; color: #8f9a96; font-size: 9.5px; line-height: 1.4; overflow-wrap: anywhere; }
.withdrawal-v2__assurance {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 4px 5px;
  color: #77827e;
}
.withdrawal-v2__assurance > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 11px;
  color: #ff616d;
  background: rgba(255, 57, 73, 0.08);
}
.withdrawal-v2__assurance span { display: grid; min-width: 0; gap: 2px; }
.withdrawal-v2__assurance strong { color: #a4adaa; font-size: 10px; }
.withdrawal-v2__assurance small { font-size: 8.5px; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 350px) {
  .withdrawal-v2__hero { grid-template-columns: 46px minmax(0, 1fr); gap: 11px; padding: 15px; }
  .withdrawal-v2__hero-icon { width: 46px; height: 46px; border-radius: 15px; font-size: 21px; }
  .withdrawal-v2 .ref-withdraw-form { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .withdrawal-v2 { transition: none; }
  .withdrawal-v2__loading > span::after { animation: none; }
}
.ref-v2-influencer-form { display: grid; gap: 10px; }
.ref-v2-influencer-form label { display: grid; gap: 5px; color: var(--text-dim); font-size: 11px; }
.ref-v2-influencer-form input,
.ref-v2-influencer-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--divider);
  border-radius: 12px;
  background: var(--bg-elev-2);
  color: var(--text);
  padding: 11px 12px;
  font: inherit;
  outline: none;
}
.ref-v2-influencer-form textarea { resize: vertical; min-height: 76px; }
.ref-v2-influencer-form input:focus,
.ref-v2-influencer-form textarea:focus { border-color: var(--red); }
.ref-v2-influencer-form button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  font-weight: 750;
  cursor: pointer;
}
.ref-v2-influencer-form button:disabled { opacity: 0.65; cursor: wait; }


/* ════════════════════════════════════════════════════════════════════════════
   SUB-MANAGEMENT v2 — overrides для существующего sheet
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero: центрированный, eyebrow red + 28px заголовок + подзаголовок */
.sheet-sub-mgmt { padding: 10px 18px 28px; }
.sheet-sub-mgmt .sub-mgmt-hero {
  text-align: center;
  margin: 8px 0 16px;
  padding: 0;
  background: none;
  border: 0;
}
.sheet-sub-mgmt .sub-mgmt-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.sheet-sub-mgmt .sub-mgmt-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 4px;
}
.sheet-sub-mgmt .sub-mgmt-lead {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

/* Tabs: iOS-сегментированный контрол */
.sheet-sub-mgmt .sub-mgmt-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 0 0 16px;
  background: var(--bg-elev-2);
  border: 1px solid var(--divider);
  border-radius: 12px;
}
.sheet-sub-mgmt .sub-mgmt-tab {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  color: var(--text-dim);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background 200ms ease, color 200ms ease;
}
.sheet-sub-mgmt .sub-mgmt-tab:hover { color: var(--text); }
.sheet-sub-mgmt .sub-mgmt-tab--active,
.sheet-sub-mgmt .sub-mgmt-tab[aria-selected="true"] {
  background: var(--bg-elev-3) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Current usage card (добавлена per handoff) */
.sub-mgmt-usage-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 16px;
}
.sub-mgmt-usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.sub-mgmt-usage-pct { padding: 2px 9px; font-size: 11px; }
.sub-mgmt-usage-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}
.sub-mgmt-usage-amount .num {
  font-size: 34px;
  font-weight: 800;
  color: var(--text);
}
.sub-mgmt-usage-suffix {
  font-size: 13px;
  color: var(--text-dim);
}
.sub-mgmt-usage-bar { height: 8px; }
.sub-mgmt-usage-foot {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 8px;
}

/* Section title */
.sub-mgmt-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 10px;
  font-size: 15px;
  font-weight: 700;
}
.sub-mgmt-section-sub {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}

/* Override panel card (держит pack grid внутри) */
.sheet-sub-mgmt .sub-mgmt-panel-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--divider);
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.sheet-sub-mgmt .sub-mgmt-panel-card--traffic {
  border-color: var(--divider);
}
.sheet-sub-mgmt .sub-mgmt-panel-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 6px;
}
.sub-mgmt-panel-eyebrow--muted { color: var(--text-mute) !important; }
.sheet-sub-mgmt .sub-mgmt-lte-lead {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 12px;
}

/* Pack grid: 2×2 чистые карточки */
.sheet-sub-mgmt .lte-pack-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sheet-sub-mgmt .lte-pack-card {
  position: relative;
  background: var(--bg-elev-2) !important;
  border: 1.5px solid var(--divider) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  transition: border-color 200ms ease, transform 120ms ease;
}
.sheet-sub-mgmt .lte-pack-card:hover { border-color: var(--red-border) !important; }
.sheet-sub-mgmt .lte-pack-card:active { transform: scale(0.98); }
.sheet-sub-mgmt .lte-pack-card--mid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.08) !important;
}
.sheet-sub-mgmt .lte-pack-card--mid::before {
  /* Ribbon полностью ВНУТРИ карточки, не обрезается */
  content: "ХИТ";
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 2;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(255, 45, 45, 0.35);
}
.sheet-sub-mgmt .lte-pack-card-glow { display: none; }
.sheet-sub-mgmt .lte-pack-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--red);
  opacity: 0.7;
  font-size: 15px;
}
/* На popular-карточке скрываем bolt, освобождаем место для ХИТ */
.sheet-sub-mgmt .lte-pack-card--mid .lte-pack-icon { display: none; }
/* И сдвигаем основной контент правее, чтобы ХИТ не перекрывал цифру */
.sheet-sub-mgmt .lte-pack-card--mid .lte-pack-gb-wrap {
  margin-top: 14px !important;
}
.sheet-sub-mgmt .lte-pack-gb-wrap {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  margin: 0 !important;
}
.sheet-sub-mgmt .lte-pack-gb {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.sheet-sub-mgmt .lte-pack-gb-unit {
  font-size: 13px !important;
  color: var(--text-dim) !important;
  font-weight: 600 !important;
}
.sheet-sub-mgmt .lte-pack-tag {
  font-size: 10px !important;
  color: var(--text-mute) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  margin-top: 2px !important;
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
}
.sheet-sub-mgmt .lte-price-frame {
  margin-top: 10px !important;
  background: rgba(255, 45, 45, 0.12) !important;
  border: 1px solid var(--red-border) !important;
  border-radius: 10px !important;
  padding: 0 !important;
  text-align: center;
  box-shadow: none !important;
}
.sheet-sub-mgmt .lte-price-frame-inner {
  padding: 8px 10px !important;
  color: var(--red) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  background: transparent !important;
  display: block;
}

/* Devices panel */
.sheet-sub-mgmt .sub-mgmt-panel-card--devices { background: transparent; border: 0; padding: 0; }
.sheet-sub-mgmt .sub-mgmt-devices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 4px;
}
.sheet-sub-mgmt .sub-mgmt-devices-head .sub-mgmt-panel-eyebrow { margin: 0; color: var(--text-mute); }
.sheet-sub-mgmt .sub-mgmt-meta-pill {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 45, 45, 0.12);
  color: var(--red);
  border: 1px solid var(--red-border);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Close button (уже есть, но переоформим) */
#subscription-management-close.ghost-btn.alt {
  margin-top: 14px;
  border: 1px solid var(--divider);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border-radius: 14px;
  height: 48px;
}
#subscription-management-close.ghost-btn.alt:hover {
  background: var(--bg-elev-3);
  color: var(--text);
}

/* Device rows v2 (per handoff ManageScreen.jsx) */
.sheet-sub-mgmt .sub-mgmt-devices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.sheet-sub-mgmt .sub-mgmt-device-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-elev-2);
  border: 1px solid var(--divider);
  border-radius: 14px;
  transition: background 160ms ease, border-color 160ms ease;
}
.sheet-sub-mgmt .sub-mgmt-device-item:hover { background: var(--bg-elev-3); }
.sheet-sub-mgmt .sub-mgmt-dev-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--bg-elev-3);
  color: var(--red);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sheet-sub-mgmt .sub-mgmt-dev-text { flex: 1; min-width: 0; }
.sheet-sub-mgmt .sub-mgmt-device-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-sub-mgmt .sub-mgmt-device-meta {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 2px;
}
.sheet-sub-mgmt .sub-mgmt-device-remove-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 45, 45, 0.08);
  border: 1px solid rgba(255, 45, 45, 0.2);
  color: var(--red);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, transform 120ms ease;
  font-size: 15px;
}
.sheet-sub-mgmt .sub-mgmt-device-remove-btn:hover { background: rgba(255, 45, 45, 0.15); }
.sheet-sub-mgmt .sub-mgmt-device-remove-btn:active { transform: scale(0.94); }

/* ── Trial Stories onboarding: закрытый rollout для новых пользователей ── */
.trial-story-onboarding {
  --story-red: #ff2d2d;
  --story-safe-top: var(--tg-effective-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --story-safe-bottom: var(--tg-effective-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  position: fixed; inset: 0; z-index: 12000;
  display: grid; grid-template-rows: 44px minmax(0, 1fr) auto;
  height: var(--app-viewport-height, var(--tg-viewport-height, 100dvh)); min-height: 0; max-height: 100dvh; overflow: hidden; color: #fff;
  background: radial-gradient(circle at 76% 18%, rgba(255,45,45,.2), transparent 32%), radial-gradient(circle at 18% 78%, rgba(255,45,45,.09), transparent 34%), #050505;
  padding: calc(var(--story-safe-top) + 10px) calc(var(--tg-effective-safe-area-inset-right, 0px) + 14px) calc(var(--story-safe-bottom) + 14px) calc(var(--tg-effective-safe-area-inset-left, 0px) + 14px);
  box-sizing: border-box; touch-action: none; overscroll-behavior: none;
  opacity: 1; visibility: visible; transition: opacity 220ms ease, visibility 220ms ease;
}
.trial-story-onboarding.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.trial-story-a11y { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.trial-story-chrome { position: relative; z-index: 9; display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; gap: 10px; min-height: 44px; }
.trial-story-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; z-index: 5; }
.trial-story-progress span { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.22); }
.trial-story-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
.trial-story-progress span.is-complete i { width: 100%; }
.trial-story-progress span.is-active i { animation: trial-story-progress var(--story-duration, 5600ms) linear forwards; }
.trial-story-onboarding.is-paused .trial-story-progress span.is-active i { animation-play-state: paused; }
.trial-story-close { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; color: #fff; background: rgba(255,255,255,.1); backdrop-filter: blur(14px); font-size: 22px; }
.trial-story-close:focus-visible, .trial-story-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.trial-story-stage { position: relative; min-height: 0; z-index: 2; outline: none; cursor: pointer; }
.trial-story-slide { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(250px, 1fr) auto; gap: 14px; padding: clamp(24px, 5vh, 54px) 6px 6px; opacity: 0; transform: translateX(16px); pointer-events: none; transition: opacity 260ms ease, transform 260ms ease; }
.trial-story-slide.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.trial-story-slide.is-before { transform: translateX(-16px); }
.trial-story-copy { position: relative; z-index: 4; max-width: 520px; padding: 0 12px; }
.trial-story-kicker { display: block; margin-bottom: 9px; color: #ff6767; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.trial-story-copy h1 { margin: 0; max-width: 460px; font-size: clamp(30px, 8.4vw, 46px); line-height: 1.03; letter-spacing: -.035em; }
.trial-story-copy p { margin: 12px 0 0; max-width: 480px; color: #b7b7c0; font-size: clamp(15px, 4.2vw, 18px); line-height: 1.46; }
.trial-story-visual { position: relative; min-height: 250px; overflow: hidden; border-radius: 28px; background: linear-gradient(145deg, #1a1a1f, #0c0c0e); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 70px rgba(0,0,0,.42); }
.trial-story-slide.is-active .trial-story-visual:not(.visual-welcome-v2) > * { animation: trial-story-float 5.6s ease-in-out both; }
.visual-welcome-v2 { isolation: isolate; background: #09090b; }
.story-welcome-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; transform: scale(1.02); }
.story-welcome-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,5,8,.08) 0%, rgba(4,5,8,.22) 42%, rgba(4,5,8,.92) 100%), linear-gradient(120deg, rgba(255,35,35,.1), transparent 48%); }
.story-welcome-brand { position: absolute; z-index: 2; top: 17px; left: 17px; right: 17px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; color: #fff; background: rgba(7,7,9,.5); backdrop-filter: blur(14px); opacity: 0; }
.story-welcome-brand > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #ff2d2d; font-weight: 850; }
.story-welcome-brand b { font-size: 14px; }
.story-welcome-brand small { color: rgba(255,255,255,.62); font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.story-welcome-card { position: absolute; z-index: 2; left: 17px; right: 17px; bottom: 17px; display: grid; gap: 7px; padding: 17px; border-radius: 18px; color: #fff; background: rgba(8,8,10,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); opacity: 0; }
.story-welcome-card small { color: #ff7777; font-size: 10px; font-weight: 750; letter-spacing: .11em; }
.story-welcome-card strong { max-width: 260px; font-size: 21px; line-height: 1.12; letter-spacing: -.02em; }
.story-welcome-card span { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.7); font-size: 13px; }
.story-welcome-card i { color: #44da85; font-size: 16px; }
.trial-story-slide.is-active .story-welcome-photo { animation: trial-story-photo-in 900ms cubic-bezier(.2,.75,.25,1) both; }
.trial-story-slide.is-active .story-welcome-brand { animation: trial-story-rise 420ms 100ms ease-out both; }
.trial-story-slide.is-active .story-welcome-card { animation: trial-story-rise 480ms 280ms ease-out both; }
.trial-story-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 6px; }
.trial-story-specs span { padding: 11px 8px; text-align: center; border-radius: 14px; color: #dddde2; background: rgba(255,255,255,.07); font-size: 13px; font-weight: 650; }
.story-app-card, .story-phone, .story-sub-page, .story-happ-screen { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-48%); width: min(82%, 330px); border-radius: 28px; background: #111114; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 22px 50px rgba(0,0,0,.5); }
.story-app-card { padding: 18px; }
.story-app-head { display: flex; gap: 10px; align-items: center; color: #d8d8de; font-size: 13px; }
.story-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--story-red); font-weight: 800; }
.story-live-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #35d07f; box-shadow: 0 0 12px rgba(53,208,127,.6); }
.story-app-status { display: grid; gap: 5px; margin: 20px 0; padding: 19px; border-radius: 20px; background: linear-gradient(135deg, rgba(255,45,45,.2), rgba(255,255,255,.04)); }
.story-app-status small { color: #ff7777; letter-spacing: .1em; }
.story-app-status strong { font-size: 38px; line-height: 1; }
.story-app-status span { color: #9d9da7; font-size: 13px; }
.story-app-button, .story-import-button, .story-connect-highlight { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 15px; color: #fff; background: var(--story-red); font-weight: 750; font-size: 14px; box-shadow: 0 12px 30px rgba(255,45,45,.25); }
.story-ready-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; color: #cfcfd6; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.04); font-size: 13px; font-weight: 650; }
.story-ready-status i { color: #45d986; font-size: 17px; }
.story-phone { padding: 19px 15px 16px; }
.story-phone-top { width: 68px; height: 5px; margin: 0 auto 22px; border-radius: 99px; background: #3b3b42; }
.story-device-title { margin-bottom: 13px; font-size: 18px; font-weight: 750; }
.story-device-list { display: grid; gap: 8px; margin-bottom: 16px; }
.story-device-list span { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 13px; background: #1c1c21; color: #cfcfd5; font-size: 14px; }
.story-connect-highlight { justify-content: space-between; padding: 0 15px; }
.story-sub-page { display: grid; justify-items: center; gap: 8px; padding: 22px 18px 18px; }
.story-sub-logo { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 16px; background: var(--story-red); font-size: 23px; font-weight: 850; }
.story-sub-page > small { color: #8f8f99; }
.story-happ-row { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; margin: 10px 0 3px; padding: 12px; border-radius: 15px; background: #1d1d22; }
.story-happ-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #111; background: #f3f3f5; font-weight: 900; }
.story-happ-row span:nth-child(2) { display: grid; gap: 2px; }
.story-happ-row small { color: #ff6666; }
.story-import-button { width: 100%; }
.story-happ-screen { display: grid; justify-items: center; gap: 7px; padding: 24px 18px 28px; }
.story-happ-brand { display: flex; align-items: center; gap: 9px; width: 100%; font-weight: 750; }
.story-connect-ring { width: 128px; height: 128px; display: grid; place-items: center; margin: 20px 0 8px; border-radius: 50%; color: #fff; background: radial-gradient(circle, #ff5757, #ba0000); box-shadow: 0 0 0 13px rgba(255,45,45,.09), 0 0 58px rgba(255,45,45,.32); }
.story-connect-ring i { font-size: 48px; }
.story-happ-screen > strong { color: #4ae18c; font-size: 18px; }
.story-happ-screen > small { color: #92929d; }
.trial-story-help { display: flex; justify-content: center; align-items: center; gap: 7px; color: #aaaab4; font-size: 13px; }
.trial-story-footer { position: relative; z-index: 7; display: grid; gap: 8px; min-height: 76px; padding-top: 10px; pointer-events: none; }
.trial-story-count { text-align: center; color: #85858f; font-size: 12px; }
.trial-story-continue { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #85858f; font-size: 13px; pointer-events: none; }
.trial-story-footer.is-final .trial-story-continue { display: none; }
.trial-story-cta { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; border: 0; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #ff3b3b, #d90000); box-shadow: 0 13px 34px rgba(255,45,45,.28); font-size: 16px; font-weight: 800; pointer-events: auto; }
.trial-story-cta.hidden { display: none; }
.trial-story-cta:disabled { opacity: .65; }
.primary-btn.is-onboarding-highlight {
  animation: trial-story-cta-highlight 760ms ease 2;
  box-shadow: 0 0 0 7px rgba(255,45,45,.13), 0 16px 42px rgba(255,45,45,.38);
}
body.trial-story-open { overflow: hidden; }
@keyframes trial-story-progress { from { width: 0; } to { width: 100%; } }
@keyframes trial-story-float { 0% { scale: 1; } 50% { scale: 1.018; } 100% { scale: 1.028; } }
@keyframes trial-story-photo-in { from { opacity: .55; transform: scale(1.08); } to { opacity: 1; transform: scale(1.02); } }
@keyframes trial-story-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes trial-story-cta-highlight { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@media (min-width: 700px) { .trial-story-onboarding { left: 50%; right: auto; width: min(100%, 520px); transform: translateX(-50%); box-shadow: 0 0 0 100vmax rgba(0,0,0,.82), 0 0 80px rgba(0,0,0,.7); } }
@media (max-height: 690px) { .trial-story-onboarding { grid-template-rows: 44px minmax(0,1fr) auto; } .trial-story-slide { padding-top: 8px; gap: 8px; } .trial-story-copy h1 { font-size: 28px; line-height: 1.04; } .trial-story-copy p { margin-top: 8px; font-size: 14px; } .trial-story-visual { min-height: 210px; } .trial-story-specs span { padding: 9px 7px; } .trial-story-footer { min-height: 68px; padding-top: 6px; } .trial-story-continue, .trial-story-cta { min-height: 50px; } }
@media (prefers-reduced-motion: reduce) { .trial-story-progress span.is-active i, .trial-story-slide.is-active .trial-story-visual > *, .trial-story-slide.is-active .story-welcome-photo, .trial-story-slide.is-active .story-welcome-brand, .trial-story-slide.is-active .story-welcome-card { animation: none; opacity: 1; } .trial-story-slide, .trial-story-onboarding { transition: none; } }

/* ── PAYG checkout banner: original SwitzVPN graphite / pink-red ─────── */
.checkout-payg-offer {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  width: 100%;
  margin: 4px 0 18px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 87, 95, 0.28);
  border-radius: 28px;
  color: #f8f6f7;
  background:
    linear-gradient(148deg, rgba(49, 20, 25, 0.98), rgba(13, 18, 21, 0.99) 64%),
    #0d1215;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.32),
    0 12px 38px rgba(126, 9, 30, 0.17),
    inset 0 1px rgba(255, 255, 255, 0.045);
}

.checkout-payg-ambient {
  position: absolute;
  z-index: -1;
  top: -96px;
  right: -72px;
  width: 260px;
  height: 240px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 52, 63, 0.34), rgba(189, 13, 36, 0.13) 48%, transparent 72%);
  filter: blur(7px);
}

.checkout-payg-topline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.checkout-payg-new,
.checkout-payg-code {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.11em;
}

.checkout-payg-new {
  border: 1px solid rgba(255, 87, 95, 0.24);
  color: #ff8891;
  background: rgba(255, 52, 63, 0.14);
}

.checkout-payg-code {
  border: 1px solid rgba(210, 221, 217, 0.1);
  color: rgba(229, 235, 232, 0.52);
  background: rgba(255, 255, 255, 0.035);
}

.checkout-payg-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}

.checkout-payg-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0;
}

.checkout-payg-copy h2 {
  margin: 0;
  max-width: 280px;
  color: #f8f6f7;
  font-size: clamp(22px, 6.2vw, 30px);
  font-weight: 790;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.checkout-payg-copy p {
  margin: 0;
  max-width: 320px;
  color: rgba(218, 224, 222, 0.58);
  font-size: 12px;
  line-height: 1.45;
}

.checkout-payg-price {
  display: grid;
  flex: none;
  gap: 3px;
  justify-items: end;
  padding-bottom: 2px;
}

.checkout-payg-price b {
  color: #f8f6f7;
  font-size: clamp(21px, 6vw, 28px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.checkout-payg-price small {
  color: rgba(220, 227, 224, 0.45);
  font-size: 10px;
  white-space: nowrap;
}

.checkout-payg-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.checkout-payg-proof > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 11px 10px;
  border: 1px solid rgba(203, 215, 211, 0.08);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.032);
}

.checkout-payg-proof i {
  margin-bottom: 5px;
  color: #ff575f;
  font-size: 17px;
}

.checkout-payg-proof small {
  overflow: hidden;
  color: rgba(201, 210, 207, 0.42);
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-payg-proof strong {
  overflow: hidden;
  color: rgba(243, 246, 245, 0.84);
  font-size: 10px;
  font-weight: 720;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-payg-action,
.checkout-payg-cancel {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.checkout-payg-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 19px;
  border: 1px solid rgba(255, 109, 119, 0.28);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #ff575f, #ff343f 58%, #bd0d24);
  box-shadow: 0 12px 30px rgba(126, 9, 30, 0.29), inset 0 1px rgba(255, 255, 255, 0.15);
  font-size: 13px;
  font-weight: 780;
  transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
  touch-action: pan-x pan-y;
}

.checkout-payg-action:active {
  transform: scale(0.985);
  filter: brightness(1.06);
}

.checkout-payg-action:disabled {
  cursor: default;
  opacity: 0.72;
}

.checkout-payg-action i {
  font-size: 18px;
}

.checkout-payg-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
  gap: 10px;
  padding: 0 2px;
  border: 0;
  color: rgba(198, 207, 204, 0.46);
  font-size: 9px;
  font-weight: 620;
}

.checkout-payg-meta > span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
}

.checkout-payg-meta i {
  flex: none;
  color: rgba(255, 119, 129, 0.82);
  font-size: 13px;
}

.checkout-payg-cancel {
  flex: none;
  padding: 0;
  border: 0;
  color: rgba(255, 136, 145, 0.88);
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  touch-action: pan-x pan-y;
}

.checkout-payg-offer.is-scheduled {
  border-color: rgba(123, 160, 145, 0.2);
}

.checkout-payg-offer.is-scheduled .checkout-payg-new {
  border-color: rgba(70, 178, 126, 0.2);
  color: #81d4a8;
  background: rgba(47, 139, 91, 0.1);
}

.checkout-payg-offer.is-scheduled .checkout-payg-action {
  border-color: rgba(109, 149, 132, 0.16);
  color: rgba(231, 238, 235, 0.72);
  background: rgba(104, 128, 118, 0.12);
  box-shadow: none;
}

@media (max-width: 365px) {
  .checkout-payg-offer {
    gap: 13px;
    padding: 17px;
    border-radius: 25px;
  }

  .checkout-payg-main {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .checkout-payg-price {
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
    align-items: baseline;
    gap: 7px;
  }

  .checkout-payg-proof > span {
    padding: 10px 8px;
  }

  .checkout-payg-proof strong {
    font-size: 9px;
  }
}

/* Telegram owns the fullscreen navigation chrome. Keep our fallback headers
   only for ordinary browsers and never stack a second black toolbar below the
   native BackButton. These rules intentionally live last in the cascade. */
.withdrawal-v2__header > div {
  grid-column: 2;
}

.withdrawal-v2__header > span:last-child {
  grid-column: 3;
}

.withdrawal-v2__hero-kicker {
  margin-bottom: 2px;
  color: #ff6874;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.11em;
}

body.tg-native-back .withdrawal-v2__header {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.tg-native-back .withdrawal-v2__hero {
  margin-top: 8px;
}

body.tg-native-back .checkout-transition-page-header {
  display: none !important;
}

body.tg-native-back .checkout-transition-scroll {
  padding-top: 12px;
}