@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

: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, env(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, env(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;
  /* Ограничиваем html реальным Telegram-вьюпортом, чтобы body с фиксированной
     высотой не создавал невидимый скролл за пределами вьюпорта (на desktop
     WebView это "съедает" wheel-события и main-content не скроллится). */
  height: var(--tg-viewport-height, 100dvh);
  max-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(--tg-viewport-height, 100dvh);
  overscroll-behavior: none;
  /* Приоритет 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; /* прелоадер теперь на Tabler-иконке */
  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(--tg-viewport-stable-height, 100dvh);
  max-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;
}

/* ВАЖНО: 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%;
  object-fit: cover;
  display: none;
}

.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 {
  margin-top: 0;
  padding: 14px;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid var(--accent-red);
  box-shadow: var(--glow-red);
  transition: var(--transition);
}

.premium-upgrade-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-red-strong);
}

@keyframes premiumPulse {
  0%, 100% {
    box-shadow: var(--glow-red);
  }
  50% {
    box-shadow: var(--glow-red-strong);
  }
}

.premium-upgrade-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.premium-upgrade-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.premium-upgrade-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.premium-upgrade-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

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

.premium-upgrade-pill {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent-red);
  color: var(--accent-white);
  font-weight: 700;
  font-size: 13px;
  box-shadow: var(--glow-red);
  white-space: nowrap;
  transition: var(--transition);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

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

.premium-upgrade-pill:active {
  transform: scale(1.02);
  transition: var(--transition-fast);
}

/* ── 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(--tg-viewport-height, 100dvh);
  max-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);
}

#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;
}
.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;
}
.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(--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-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-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: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%;
  object-fit: cover;
  display: none;
}

.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);
}

/* 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(--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 {
  /* На desktop НЕ привязываемся к viewportHeight — там окно произвольного размера,
     и жёсткая высота html обрезает body. Возвращаем нативный page-scroll. */
  height: auto;
  max-height: none;
  overflow: visible;
}
html.tg-desktop body {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

html.tg-desktop .screen {
  /* Убираем жёсткую высоту stable viewport — она и обрезает блоки на desktop. */
  height: auto;
  min-height: 0;
  max-height: none;
  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);
}

/* Разделитель между 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-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(--tg-viewport-height, 100dvh);
  max-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%;
  object-fit: cover;
  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-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; }
.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: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ref-v2-hero-currency {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-dim);
}
.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: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ref-v2-copy-btn {
  width: 40px;
  height: 40px;
  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;
}


/* ════════════════════════════════════════════════════════════════════════════
   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); }